UNPKG

@sqwkmob/ionic-custom-back

Version:

Dismiss Ionic Modal by Device Back Button

947 lines (922 loc) 35 kB
const NAMESPACE = 'sqwk-ion-back-button'; const win = window; const doc = document; const plt = { $flags$: 0, $resourcesUrl$: '', raf: (h) => requestAnimationFrame(h), ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts), rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts), }; const supportsShadowDom = !!doc.documentElement.attachShadow; const supportsListenerOptions = /*@__PURE__*/ (() => { let supportsListenerOptions = false; try { doc.addEventListener('e', null, Object.defineProperty({}, 'passive', { get() { supportsListenerOptions = true; } })); } catch (e) { } return supportsListenerOptions; })(); const supportsConstructibleStylesheets = (() => { try { new CSSStyleSheet(); return true; } catch (e) { } return false; })(); const hostRefs = new WeakMap(); const getHostRef = (ref) => hostRefs.get(ref); const registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef); const registerHost = (elm) => { { const hostRef = { $flags$: 0, $hostElement$: elm, $instanceValues$: new Map() }; hostRef.$onReadyPromise$ = new Promise(r => hostRef.$onReadyResolve$ = r); return hostRefs.set(elm, hostRef); } }; const isMemberInElement = (elm, memberName) => memberName in elm; const consoleError = (e) => console.error(e); const loadModule = (cmpMeta, hostRef, hmrVersionId) => { // loadModuleImport const bundleId = cmpMeta.$lazyBundleIds$; return import( /* webpackInclude: /\.entry\.js$/ */ /* webpackExclude: /\.system\.entry\.js$/ */ /* webpackMode: "lazy" */ `./${bundleId}.entry.js${''}`).then(importedModule => importedModule[cmpMeta.$tagName$.replace(/-/g, '_')], consoleError); }; const styles = new Map(); const cssVarShim = win.__stencil_cssshim; let queueCongestion = 0; let queuePending = false; const queueDomReads = []; const queueDomWrites = []; const queueDomWritesLow = []; const queueTask = (queue) => (cb) => { // queue dom reads queue.push(cb); if (!queuePending) { queuePending = true; plt.raf(flush); } }; const consume = (queue) => { for (let i = 0; i < queue.length; i++) { try { queue[i](performance.now()); } catch (e) { consoleError(e); } } queue.length = 0; }; const consumeTimeout = (queue, timeout) => { let i = 0; let ts = 0; while (i < queue.length && (ts = performance.now()) < timeout) { try { queue[i++](ts); } catch (e) { consoleError(e); } } if (i === queue.length) { queue.length = 0; } else if (i !== 0) { queue.splice(0, i); } }; const flush = () => { queueCongestion++; // always force a bunch of medium callbacks to run, but still have // a throttle on how many can run in a certain time // DOM READS!!! consume(queueDomReads); const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */ ? performance.now() + (7 * Math.ceil(queueCongestion * (1.0 / 22.0))) : Infinity; // DOM WRITES!!! consumeTimeout(queueDomWrites, timeout); consumeTimeout(queueDomWritesLow, timeout); if (queueDomWrites.length > 0) { queueDomWritesLow.push(...queueDomWrites); queueDomWrites.length = 0; } if (queuePending = ((queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length) > 0)) { // still more to do yet, but we've run out of time // let's let this thing cool off and try again in the next tick plt.raf(flush); } else { queueCongestion = 0; } }; const writeTask = /*@__PURE__*/ queueTask(queueDomWrites); /** * Default style mode id */ /** * Reusable empty obj/array * Don't add values to these!! */ const EMPTY_OBJ = {}; const isDef = (v) => v != null; const toLowerCase = (str) => str.toLowerCase(); const isComplexType = (o) => ['object', 'function'].includes(typeof o); function getDynamicImportFunction(namespace) { return `__sc_import_${namespace.replace(/\s|-/g, '_')}`; } const patchEsm = () => { // @ts-ignore if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) { // @ts-ignore return import('./css-shim-f7ddb189-f7ddb189.js'); } return Promise.resolve(); }; const patchBrowser = async () => { // @ts-ignore const importMeta = ""; if (importMeta !== '') { return Promise.resolve(new URL('.', importMeta).href); } else { const scriptElm = Array.from(doc.querySelectorAll('script')).find(s => (s.src.includes(`/${NAMESPACE}.esm.js`) || s.getAttribute('data-namespace') === NAMESPACE)); const resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)); patchDynamicImport(resourcesUrl.href); if (!window.customElements) { // @ts-ignore await import('./dom-a0c82e31-a0c82e31.js'); } return resourcesUrl.href; } }; const patchDynamicImport = (base) => { const importFunctionName = getDynamicImportFunction(NAMESPACE); try { win[importFunctionName] = new Function('w', 'return import(w);'); } catch (e) { const moduleMap = new Map(); win[importFunctionName] = (src) => { const url = new URL(src, base).href; let mod = moduleMap.get(url); if (!mod) { const script = doc.createElement('script'); script.type = 'module'; script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' })); mod = new Promise(resolve => { script.onload = () => { resolve(win[importFunctionName].m); script.remove(); }; }); moduleMap.set(url, mod); doc.head.appendChild(script); } return mod; }; } }; const HYDRATED_CLASS = 'hydrated'; const rootAppliedStyles = new WeakMap(); const registerStyle = (scopeId, cssText) => { let style = styles.get(scopeId); if (supportsConstructibleStylesheets) { style = (style || new CSSStyleSheet()); style.replace(cssText); } else { style = cssText; } styles.set(scopeId, style); }; const addStyle = (styleContainerNode, tagName, mode, hostElm) => { let scopeId = getScopeId(tagName); let style = styles.get(scopeId); // if an element is NOT connected then getRootNode() will return the wrong root node // so the fallback is to always use the document for the root node in those cases styleContainerNode = (styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc); if (style) { if (typeof style === 'string') { styleContainerNode = styleContainerNode.head || styleContainerNode; let appliedStyles = rootAppliedStyles.get(styleContainerNode); let styleElm; if (!appliedStyles) { rootAppliedStyles.set(styleContainerNode, appliedStyles = new Set()); } if (!appliedStyles.has(scopeId)) { { if (cssVarShim) { styleElm = cssVarShim.createHostStyle(hostElm, scopeId, style); const newScopeId = styleElm['s-sc']; if (newScopeId) { scopeId = newScopeId; // we don't want to add this styleID to the appliedStyles Set // since the cssVarShim might need to apply several different // stylesheets for the same component appliedStyles = null; } } else { styleElm = doc.createElement('style'); styleElm.innerHTML = style; } styleContainerNode.appendChild(styleElm); } if (appliedStyles) { appliedStyles.add(scopeId); } } } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) { styleContainerNode.adoptedStyleSheets = [ ...styleContainerNode.adoptedStyleSheets, style ]; } } return scopeId; }; const attachStyles = (elm, cmpMeta, mode) => { const styleId = addStyle((supportsShadowDom && elm.shadowRoot) ? elm.shadowRoot : elm.getRootNode(), cmpMeta.$tagName$, mode, elm); if (cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */) { // only required when we're NOT using native shadow dom (slot) // or this browser doesn't support native shadow dom // and this host element was NOT created with SSR // let's pick out the inner content for slot projection // create a node to represent where the original // content was first placed, which is useful later on // DOM WRITE!! elm['s-sc'] = styleId; elm.classList.add(styleId + '-h'); } }; const getScopeId = (tagName, mode) => 'sc-' + (tagName); /** * Production h() function based on Preact by * Jason Miller (@developit) * Licensed under the MIT License * https://github.com/developit/preact/blob/master/LICENSE * * Modified for Stencil's compiler and vdom */ // const stack: any[] = []; // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode; // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode; const h = (nodeName, vnodeData, ...children) => { let child = null; let simple = false; let lastSimple = false; let key; let vNodeChildren = []; const walk = (c) => { for (let i = 0; i < c.length; i++) { child = c[i]; if (Array.isArray(child)) { walk(child); } else if (child != null && typeof child !== 'boolean') { if (simple = typeof nodeName !== 'function' && !isComplexType(child)) { child = String(child); } if (simple && lastSimple) { // If the previous child was simple (string), we merge both vNodeChildren[vNodeChildren.length - 1].$text$ += child; } else { // Append a new vNode, if it's text, we create a text vNode vNodeChildren.push(simple ? { $flags$: 0, $text$: child } : child); } lastSimple = simple; } } }; walk(children); if (vnodeData) { // normalize class / classname attributes { key = vnodeData.key || undefined; } { const classData = vnodeData.className || vnodeData.class; if (classData) { vnodeData.class = typeof classData !== 'object' ? classData : Object.keys(classData) .filter(k => classData[k]) .join(' '); } } } if (typeof nodeName === 'function') { // nodeName is a functional component return nodeName(vnodeData, vNodeChildren, vdomFnUtils); } const vnode = { $flags$: 0, $tag$: nodeName, $children$: vNodeChildren.length > 0 ? vNodeChildren : null, $elm$: undefined, $attrs$: vnodeData, }; { vnode.$key$ = key; } return vnode; }; const Host = {}; const vdomFnUtils = { 'forEach': (children, cb) => children.map(convertToPublic).forEach(cb), 'map': (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate) }; const convertToPublic = (node) => { return { vattrs: node.$attrs$, vchildren: node.$children$, vkey: node.$key$, vname: node.$name$, vtag: node.$tag$, vtext: node.$text$ }; }; const convertToPrivate = (node) => { return { $flags$: 0, $attrs$: node.vattrs, $children$: node.vchildren, $key$: node.vkey, $name$: node.vname, $tag$: node.vtag, $text$: node.vtext }; }; /** * Production setAccessor() function based on Preact by * Jason Miller (@developit) * Licensed under the MIT License * https://github.com/developit/preact/blob/master/LICENSE * * Modified for Stencil's compiler and vdom */ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => { if (oldValue === newValue) { return; } if (memberName === 'class' && !isSvg) { // Class { elm.className = newValue; } } else if (memberName === 'style') { for (const prop in newValue) { if (!oldValue || newValue[prop] !== oldValue[prop]) { if (prop.includes('-')) { elm.style.setProperty(prop, newValue[prop]); } else { elm.style[prop] = newValue[prop]; } } } } else if (memberName === 'key') ; else if (memberName === 'ref') { // minifier will clean this up if (newValue) { newValue(elm); } } else if (memberName.startsWith('on') && !isMemberInElement(elm, memberName)) { // Event Handlers // so if the member name starts with "on" and the 3rd characters is // a capital letter, and it's not already a member on the element, // then we're assuming it's an event listener if (isMemberInElement(elm, toLowerCase(memberName))) { // standard event // the JSX attribute could have been "onMouseOver" and the // member name "onmouseover" is on the element's prototype // so let's add the listener "mouseover", which is all lowercased memberName = toLowerCase(memberName.substring(2)); } else { // custom event // the JSX attribute could have been "onMyCustomEvent" // so let's trim off the "on" prefix and lowercase the first character // and add the listener "myCustomEvent" // except for the first character, we keep the event name case memberName = toLowerCase(memberName[2]) + memberName.substring(3); } if (oldValue) { plt.rel(elm, memberName, oldValue, false); } if (newValue) { plt.ael(elm, memberName, newValue, false); } } else { // Set property if it exists and it's not a SVG const isProp = isMemberInElement(elm, memberName); const isComplex = isComplexType(newValue); if ((isProp || (isComplex && newValue !== null)) && !isSvg) { try { elm[memberName] = newValue == null && elm.tagName.indexOf('-') === -1 ? '' : newValue; } catch (e) { } } if (newValue == null || newValue === false) { { elm.removeAttribute(memberName); } } else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) { newValue = newValue === true ? '' : newValue.toString(); { elm.setAttribute(memberName, newValue); } } } }; const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => { // if the element passed in is a shadow root, which is a document fragment // then we want to be adding attrs/props to the shadow root's "host" element // if it's not a shadow root, then we add attrs/props to the same element const elm = (newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host) ? newVnode.$elm$.host : newVnode.$elm$; const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ; const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ; // add new & update changed attributes for (memberName in newVnodeAttrs) { setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$); } }; let scopeId; let hostTagName; let isSvgMode = false; const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => { // tslint:disable-next-line: prefer-const let newVNode = newParentVNode.$children$[childIndex]; let i = 0; let elm; let childNode; if (isDef(newVNode.$text$)) { // create text node newVNode.$elm$ = doc.createTextNode(newVNode.$text$); } else { // create element elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$)); // add css classes, attrs, props, listeners, etc. { updateElement(null, newVNode, isSvgMode); } if (isDef(scopeId) && elm['s-si'] !== scopeId) { // if there is a scopeId and this is the initial render // then let's add the scopeId as a css class elm.classList.add((elm['s-si'] = scopeId)); } if (newVNode.$children$) { for (i = 0; i < newVNode.$children$.length; ++i) { // create the node childNode = createElm(oldParentVNode, newVNode, i); // return node could have been null if (childNode) { // append our new node elm.appendChild(childNode); } } } } return newVNode.$elm$; }; const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => { let containerElm = (parentElm); let childNode; if (containerElm.shadowRoot && toLowerCase(containerElm.tagName) === hostTagName) { containerElm = containerElm.shadowRoot; } for (; startIdx <= endIdx; ++startIdx) { if (vnodes[startIdx]) { childNode = createElm(null, parentVNode, startIdx); if (childNode) { vnodes[startIdx].$elm$ = childNode; containerElm.insertBefore(childNode, before); } } } }; const patch = (oldVNode, newVNode) => { const elm = newVNode.$elm$ = oldVNode.$elm$; const oldChildren = oldVNode.$children$; const newChildren = newVNode.$children$; if (!isDef(newVNode.$text$)) { // element node { { // either this is the first render of an element OR it's an update // AND we already know it's possible it could have changed // this updates the element's css classes, attrs, props, listeners, etc. updateElement(oldVNode, newVNode, isSvgMode); } } if (isDef(newChildren)) { // add the new vnode children addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1); } } else if (oldVNode.$text$ !== newVNode.$text$) { // update the text content for the text only vnode // and also only if the text is different than before elm.textContent = newVNode.$text$; } }; const isHost = (node) => { return node && node.$tag$ === Host; }; const renderVdom = (hostElm, hostRef, cmpMeta, renderFnResults) => { const oldVNode = hostRef.$vnode$ || { $flags$: 0 }; hostTagName = toLowerCase(hostElm.tagName); if (isHost(renderFnResults)) { renderFnResults.$tag$ = null; } else { renderFnResults = h(null, null, renderFnResults); } renderFnResults.$flags$ |= 4 /* isHost */; hostRef.$vnode$ = renderFnResults; renderFnResults.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm); { scopeId = hostElm['s-sc']; } // synchronous patch patch(oldVNode, renderFnResults); }; const safeCall = async (instance, method) => { if (instance && instance[method]) { try { await instance[method](); } catch (e) { consoleError(e); } } }; const scheduleUpdate = async (elm, hostRef, cmpMeta, isInitialLoad) => { const instance = hostRef.$lazyInstance$; // there is no ancestorc omponent or the ancestor component // has already fired off its lifecycle update then // fire off the initial update { writeTask(() => updateComponent(elm, hostRef, cmpMeta, instance, isInitialLoad)); } }; const updateComponent = (elm, hostRef, cmpMeta, instance, isInitialLoad) => { { elm['s-lr'] = false; } if (isInitialLoad) { // DOM WRITE! attachStyles(elm, cmpMeta, hostRef.$modeName$); } { { // tell the platform we're actively rendering // if a value is changed within a render() then // this tells the platform not to queue the change hostRef.$flags$ |= 4 /* isActiveRender */; try { // looks like we've got child nodes to render into this host element // or we need to update the css class/attrs on the host element // DOM WRITE! renderVdom(elm, hostRef, cmpMeta, instance.render()); } catch (e) { consoleError(e); } hostRef.$flags$ &= ~4 /* isActiveRender */; } } if (cssVarShim) { cssVarShim.updateHost(elm); } // set that this component lifecycle rendering has completed { elm['s-lr'] = true; } { hostRef.$flags$ |= 2 /* hasRendered */; } if (elm['s-rc'].length > 0) { // ok, so turns out there are some child host elements // waiting on this parent element to load // let's fire off all update callbacks waiting elm['s-rc'].forEach(cb => cb()); elm['s-rc'].length = 0; } postUpdateComponent(elm, hostRef); }; const postUpdateComponent = (elm, hostRef, ancestorsActivelyLoadingChildren) => { if (!elm['s-al']) { const instance = hostRef.$lazyInstance$; const ancestorComponent = hostRef.$ancestorComponent$; if (!(hostRef.$flags$ & 512 /* hasLoadedComponent */)) { hostRef.$flags$ |= 512 /* hasLoadedComponent */; { // DOM WRITE! // add the css class that this element has officially hydrated elm.classList.add(HYDRATED_CLASS); } { safeCall(instance, 'componentDidLoad'); } { hostRef.$onReadyResolve$(elm); } if (!ancestorComponent) { // on appload // we have finish the first big initial render doc.documentElement.classList.add(HYDRATED_CLASS); { setTimeout(() => plt.$flags$ |= 2 /* appLoaded */, 999); } } } // load events fire from bottom to top // the deepest elements load first then bubbles up if (ancestorComponent) { // ok so this element already has a known ancestor component // let's make sure we remove this element from its ancestor's // known list of child elements which are actively loading if (ancestorsActivelyLoadingChildren = ancestorComponent['s-al']) { // remove this element from the actively loading map ancestorsActivelyLoadingChildren.delete(elm); // the ancestor's initializeComponent method will do the actual checks // to see if the ancestor is actually loaded or not // then let's call the ancestor's initializeComponent method if there's no length // (which actually ends up as this method again but for the ancestor) if (ancestorsActivelyLoadingChildren.size === 0) { ancestorComponent['s-al'] = undefined; ancestorComponent['s-init'](); } } hostRef.$ancestorComponent$ = undefined; } // ( •_•) // ( •_•)>⌐■-■ // (⌐■_■) } }; const disconnectedCallback = (elm) => { if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) { const hostRef = getHostRef(elm); { if (hostRef.$rmListeners$) { hostRef.$rmListeners$(); hostRef.$rmListeners$ = undefined; } } // clear CSS var-shim tracking if (cssVarShim) { cssVarShim.removeHost(elm); } const instance = hostRef.$lazyInstance$; } }; const proxyComponent = (Cstr, cmpMeta, flags) => { if (cmpMeta.$members$) { // It's better to have a const than two Object.entries() const members = Object.entries(cmpMeta.$members$); const prototype = Cstr.prototype; members.forEach(([memberName, [memberFlags]]) => { }); } return Cstr; }; const addEventListeners = (elm, hostRef, listeners) => { const removeFns = listeners.map(([flags, name, method]) => { const target = (getHostListenerTarget(elm, flags)); const handler = hostListenerProxy(hostRef, method); const opts = hostListenerOpts(flags); plt.ael(target, name, handler, opts); return () => plt.rel(target, name, handler, opts); }); return () => removeFns.forEach(fn => fn()); }; const hostListenerProxy = (hostRef, methodName) => { return (ev) => { { if (hostRef.$lazyInstance$) { // instance is ready, let's call it's member method for this event return hostRef.$lazyInstance$[methodName](ev); } else { return hostRef.$onReadyPromise$.then(() => hostRef.$lazyInstance$[methodName](ev)).catch(consoleError); } } }; }; const getHostListenerTarget = (elm, flags) => { if (flags & 8 /* TargetWindow */) return win; return elm; }; const hostListenerOpts = (flags) => supportsListenerOptions ? { 'passive': (flags & 1 /* Passive */) !== 0, 'capture': (flags & 2 /* Capture */) !== 0, } : (flags & 2 /* Capture */) !== 0; const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => { // initializeComponent if ((hostRef.$flags$ & 256 /* hasInitializedComponent */) === 0) { // we haven't initialized this element yet hostRef.$flags$ |= 256 /* hasInitializedComponent */; { // lazy loaded components // request the component's implementation to be // wired up with the host element Cstr = await loadModule(cmpMeta); if (!Cstr.isProxied) { proxyComponent(Cstr, cmpMeta); Cstr.isProxied = true; } // ok, time to construct the instance // but let's keep track of when we start and stop // so that the getters/setters don't incorrectly step on data { hostRef.$flags$ |= 8 /* isConstructingInstance */; } // construct the lazy-loaded component implementation // passing the hostRef is very important during // construction in order to directly wire together the // host element and the lazy-loaded instance try { new Cstr(hostRef); } catch (e) { consoleError(e); } { hostRef.$flags$ &= ~8 /* isConstructingInstance */; } fireConnectedCallback(hostRef.$lazyInstance$); } if (!Cstr.isStyleRegistered && Cstr.style) { // this component has styles but we haven't registered them yet let style = Cstr.style; let scopeId = getScopeId(cmpMeta.$tagName$, hostRef.$modeName$); if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) { style = await import('./shadow-css-984bac74-549b16dd.js').then(m => m.scopeCss(style, scopeId, false)); } registerStyle(scopeId, style); Cstr.isStyleRegistered = true; } } // we've successfully created a lazy instance const ancestorComponent = hostRef.$ancestorComponent$; if (ancestorComponent && !ancestorComponent['s-lr'] && ancestorComponent['s-rc']) { // this is the intial load and this component it has an ancestor component // but the ancestor component has NOT fired its will update lifecycle yet // so let's just cool our jets and wait for the ancestor to continue first ancestorComponent['s-rc'].push(() => // this will get fired off when the ancestor component // finally gets around to rendering its lazy self // fire off the initial update initializeComponent(elm, hostRef, cmpMeta)); } else { scheduleUpdate(elm, hostRef, cmpMeta, true); } }; const fireConnectedCallback = (instance) => { }; const connectedCallback = (elm, cmpMeta) => { if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) { // connectedCallback const hostRef = getHostRef(elm); if (cmpMeta.$listeners$) { // initialize our event listeners on the host element // we do this now so that we can listening to events that may // have fired even before the instance is ready hostRef.$rmListeners$ = addEventListeners(elm, hostRef, cmpMeta.$listeners$); } if (!(hostRef.$flags$ & 1 /* hasConnected */)) { // first time this component has connected hostRef.$flags$ |= 1 /* hasConnected */; { // find the first ancestor component (if there is one) and register // this component as one of the actively loading child components for its ancestor let ancestorComponent = elm; while ((ancestorComponent = (ancestorComponent.parentNode || ancestorComponent.host))) { // climb up the ancestors looking for the first // component that hasn't finished its lifecycle update yet if (ancestorComponent['s-init'] && !ancestorComponent['s-lr']) { // we found this components first ancestor component // keep a reference to this component's ancestor component hostRef.$ancestorComponent$ = ancestorComponent; // ensure there is an array to contain a reference to each of the child components // and set this component as one of the ancestor's child components it should wait on (ancestorComponent['s-al'] = ancestorComponent['s-al'] || new Set()).add(elm); break; } } } { initializeComponent(elm, hostRef, cmpMeta); } } fireConnectedCallback(hostRef.$lazyInstance$); } }; const bootstrapLazy = (lazyBundles, options = {}) => { const cmpTags = []; const exclude = options.exclude || []; const head = doc.head; const customElements = win.customElements; const y = /*@__PURE__*/ head.querySelector('meta[charset]'); const visibilityStyle = /*@__PURE__*/ doc.createElement('style'); Object.assign(plt, options); plt.$resourcesUrl$ = new URL(options.resourcesUrl || '/', win.location.href).href; if (options.syncQueue) { plt.$flags$ |= 4 /* queueSync */; } lazyBundles.forEach(lazyBundle => lazyBundle[1].forEach(compactMeta => { const cmpMeta = { $flags$: compactMeta[0], $tagName$: compactMeta[1], $members$: compactMeta[2], $listeners$: compactMeta[3], }; if (!supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) { cmpMeta.$flags$ |= 8 /* needsShadowDomShim */; } const tagName = cmpMeta.$tagName$; const HostElement = class extends HTMLElement { // StencilLazyHost constructor(self) { // @ts-ignore super(self); self = this; { this['s-lr'] = false; this['s-rc'] = []; } registerHost(self); if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) { // this component is using shadow dom // and this browser supports shadow dom // add the read-only property "shadowRoot" to the host element if (supportsShadowDom) { self.attachShadow({ 'mode': 'open' }); } else if (!('shadowRoot' in self)) { self.shadowRoot = self; } } } connectedCallback() { connectedCallback(this, cmpMeta); } disconnectedCallback() { disconnectedCallback(this); } 's-init'() { const hostRef = getHostRef(this); if (hostRef.$lazyInstance$) { postUpdateComponent(this, hostRef); } } 's-hmr'(hmrVersionId) { } forceUpdate() { } componentOnReady() { return getHostRef(this).$onReadyPromise$; } }; cmpMeta.$lazyBundleIds$ = lazyBundle[0]; if (!exclude.includes(tagName) && !customElements.get(tagName)) { cmpTags.push(tagName); customElements.define(tagName, proxyComponent(HostElement, cmpMeta)); } })); // visibilityStyle.innerHTML = cmpTags.map(t => `${t}:not(.hydrated)`) + '{display:none}'; visibilityStyle.innerHTML = cmpTags + '{visibility:hidden}.hydrated{visibility:inherit}'; visibilityStyle.setAttribute('data-styles', ''); head.insertBefore(visibilityStyle, y ? y.nextSibling : head.firstChild); }; const getElement = (ref) => getHostRef(ref).$hostElement$; export { patchEsm as a, bootstrapLazy as b, getElement as g, h, patchBrowser as p, registerInstance as r };