\n *
{data.firstName} {data.lastName}
\n *
{data.title}
\n *
\n * ))\n * \n * const html = tpl.apply({ firstName: 'Joe', lastName: 'Smith', title: 'CEO' });\n */\n\nvar Template = Ext.define(null, {\n extend: 'Ext.Template',\n\n /**\n * @param {Function} fn A function that takes data values as an object and returns a React.Element to be rendered.\n */\n constructor: function constructor(fn) {\n this.fn = fn;\n },\n // overrides Ext.Template\n apply: function apply(values) {\n return ReactDOMServer.renderToStaticMarkup(this.fn(values));\n },\n // overrides Ext.Template\n doInsert: function doInsert(where, el, values, returnElement) {\n var target = this.getCachedTarget();\n this.doRender(values, target);\n var dom = target.firstChild;\n var result = Ext.dom.Helper.doInsert(el, dom, returnElement, where);\n this.unmountChildrenOnRemove(dom);\n return result;\n },\n // overrides Ext.Template\n overwrite: function overwrite(el, values, returnElement) {\n var dom = Ext.getDom(el);\n var result = this.doRender(values, dom);\n this.unmountChildrenOnRemove(dom);\n return returnElement ? new Ext.Element(dom) : dom;\n },\n\n /**\n * @private\n * @return {HTMLElement}\n */\n getCachedTarget: function getCachedTarget() {\n if (!this.cachedTarget) this.cachedTarget = document.createElement('div');\n return this.cachedTarget;\n },\n\n /**\n * Renders the result of this.fn to the specified target\n * @private\n * @param {Object} values Values to pass to this.fn\n * @param {HTMLElement} target The element into which the result should be rendered.\n * @return {HTMLElement} The newly rendered element\n */\n doRender: function doRender(values, target) {\n var reactElement = this.fn(values);\n ReactDOM.render(reactElement, target);\n return target.firstChild;\n },\n\n /**\n * Ensures that componentWillUnmount is called on each descendent component when the target node is removed from the DOM.\n * @param {Node} target A node containing a React tree\n */\n unmountChildrenOnRemove: function unmountChildrenOnRemove(target) {\n var parent = target.parentNode;\n var parentKey = '$extreactObserveRemoveChild';\n var targetKey = '$extreactUnmountOnRemove';\n target[targetKey] = true; // we tag the target with $extreactUnmountOnRemove so we know it has a React tree to unmount when removed\n\n if (!parent[parentKey]) {\n // we tag the parent with $extreactObserveRemoveChild so we can ensure we are only observing it once\n parent[parentKey] = true;\n var observer = new MutationObserver(function (mutations) {\n mutations.forEach(function (_ref) {\n var removedNodes = _ref.removedNodes;\n\n for (var i = 0; i < removedNodes.length; i++) {\n var node = removedNodes[i];\n\n if (node[targetKey]) {\n ReactDOM.unmountComponentAtNode(node); // Unmount the React tree when the target dom node is removed.\n }\n }\n });\n });\n observer.observe(parent, {\n childList: true\n });\n }\n }\n});\nexport default Template; // Hook Ext.XTemplate.get so that we can just pass a function that returns JSX in place of a XTemplate.\n//# sourceMappingURL=Template.js.map","import Template from './Template';\nvar Ext = window.Ext; // add support for functions that return JSX elements in place of XTemplates\n\nvar getTpl = Ext.XTemplate.getTpl;\nvar originalGet = Ext.XTemplate.get;\n\nExt.XTemplate.get = function (fn) {\n if (typeof fn === 'function') {\n return new Template(fn);\n } else {\n return originalGet.apply(Ext.XTemplate, arguments);\n }\n};\n\nExt.XTemplate.getTpl = function () {\n return getTpl.apply(Ext.XTemplate, arguments);\n}; // automatically persist event before rippling\n\n\nvar originalRipple = Ext.dom.Element.prototype.ripple;\n\nExt.dom.Element.prototype.ripple = function (event) {\n if (event && event.persist) event.persist();\n return originalRipple.apply(this, arguments);\n}; // enable component query by component name in Sencha Test\n\n\nvar originalWidgetIsXtype = Ext.Widget.prototype.isXType; // https://github.com/sencha/ext-react/issues/92\n// Ext.Widget.prototype.isXType = function(xtype, shallow) {\n// return originalWidgetIsXtype.call(this, xtype.toLowerCase().replace(/_/g, '-'), shallow);\n// }\n\nExt.Widget.prototype.isXType = function (xtype, shallow) {\n return originalWidgetIsXtype.call(this, xtype.replace(/_/g, '-'), shallow) || originalWidgetIsXtype.call(this, xtype.toLowerCase().replace(/_/g, '-'), shallow);\n}; // needed for classic\n\n\nif (Ext.Component.prototype.isXType) {\n Ext.Component.prototype.isXType = Ext.Widget.prototype.isXType;\n}\n//# sourceMappingURL=overrides.js.map","import _inheritsLoose from \"@babel/runtime/helpers/inheritsLoose\";\nimport _defineProperty from \"@babel/runtime/helpers/defineProperty\";\nimport React from 'react';\nvar launchQueue = [];\n/**\n * Higher order function that returns a component that waits for a ExtReact to be ready before rendering.\n * @param {class} Component \n * @return {class}\n */\n\nexport default function renderWhenReady(Component) {\n var _class, _temp;\n\n return _temp = _class =\n /*#__PURE__*/\n function (_React$Component) {\n _inheritsLoose(ExtReactRenderWhenReady, _React$Component);\n\n function ExtReactRenderWhenReady() {\n var _this;\n\n _this = _React$Component.call(this) || this;\n _this.state = {\n ready: Ext.isReady,\n done: false\n };\n return _this;\n }\n\n var _proto = ExtReactRenderWhenReady.prototype;\n\n _proto.componentWillMount = function componentWillMount() {\n if (!this.state.ready) {\n launchQueue.push(this);\n }\n };\n\n _proto.render = function render() {\n if (this.state.ready === true && this.state.done == false) {\n this.state.done = true;\n return React.createElement(Component, this.props);\n } else {\n return false;\n }\n };\n\n return ExtReactRenderWhenReady;\n }(React.Component), _defineProperty(_class, \"isExtJSComponent\", true), _temp;\n}\nExt.onReady(function () {\n for (var _i = 0; _i < launchQueue.length; _i++) {\n var queued = launchQueue[_i];\n queued.setState({\n ready: true\n });\n }\n});\n//# sourceMappingURL=renderWhenReady.js.map","import _extends from \"@babel/runtime/helpers/extends\";\nimport React from 'react';\nimport { reactify } from './reactify'; //export function ExtReact() {} //??\n//import { reactify } from '@sencha/ext-react'\n//var ExtReact = reactify('ExtReact')\n\nvar globalRoot = [];\nexport { globalRoot };\nexport function render(component, target) {\n globalRoot.push(target);\n ReactDOM.render(component, target);\n}\nimport { settings } from './reactify';\nexport { reactify };\nexport function l(name, val, val2, val3, val4) {\n // settings.debug = true\n if (settings.debug) {\n console.group(name);\n\n if (val != undefined) {\n console.log(val);\n }\n\n if (val2 != undefined) {\n console.log(val2);\n }\n\n if (val3 != undefined) {\n console.log(val3);\n }\n\n if (val4 != undefined) {\n console.log(val4);\n }\n\n console.groupEnd();\n }\n}\nimport ReactDOM from 'react-dom';\nimport './overrides';\nimport { configure } from './reactify';\nexport { default as Template } from './Template';\nexport { default as renderWhenReady } from './renderWhenReady';\nvar Ext = window.Ext;\nexport function go(_ref) {\n var callback = _ref.callback,\n element = _ref.element;\n Ext.namespace('Ext.react').ReactDOM = ReactDOM; // needed for RendererCell and any other components that can render React elements;\n //var rootEl = rootElement\n // \n\n Ext.application({\n name: '$ExtReactApp',\n // ...appConfig,\n launch: function launch() {\n if (Ext.Viewport && Ext.Viewport.getRenderTarget) {\n // modern, ext-react\n var target = Ext.Viewport.getRenderTarget().dom;\n\n if (callback != undefined) {\n var rootElement = element; // if (typeof rootComponent === 'function') {\n //r theElement = React.createElement(rootElement,null)\n //rootComponent(