@rindo/core 1.8.12

package/dist/runtime/index.js

@@ -0,0 +1,2576 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var buildConditionals = require('@rindo/core/build-conditionals');
+var platform = require('@rindo/core/platform');
+var utils = require('@rindo/core/utils');
+
+const CONTENT_REF_ID = 'r';
+const ORG_LOCATION_ID = 'o';
+const SLOT_NODE_ID = 's';
+const TEXT_NODE_ID = 't';
+const HYDRATE_ID = 's-id';
+const HYDRATED_STYLE_ID = 'sty-id';
+const HYDRATE_CHILD_ID = 'c-id';
+const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+
+let i = 0;
+const createTime = (fnName, tagName = '') => {
+    if (buildConditionals.BUILD.profile) {
+        const key = `st:${fnName}:${tagName}:${i++}`;
+        // Start
+        performance.mark(key);
+        // End
+        return () => performance.measure(`[Rindo] ${fnName}() <${tagName}>`, key);
+    }
+    else {
+        return () => { return; };
+    }
+};
+const uniqueTime = (key, measureText) => {
+    if (buildConditionals.BUILD.profile) {
+        if (performance.getEntriesByName(key).length === 0) {
+            performance.mark(key);
+        }
+        return () => {
+            if (performance.getEntriesByName(measureText).length === 0) {
+                performance.measure(measureText, key);
+            }
+        };
+    }
+    else {
+        return () => { return; };
+    }
+};
+const inspect = (ref) => {
+    const hostRef = platform.getHostRef(ref);
+    if (!hostRef) {
+        return undefined;
+    }
+    const flags = hostRef.$flags$;
+    const hostElement = hostRef.$hostElement$;
+    return {
+        renderCount: hostRef.$renderCount$,
+        flags: {
+            hasRendered: !!(flags & 2 /* hasRendered */),
+            hasConnected: !!(flags & 1 /* hasConnected */),
+            isWaitingForChildren: !!(flags & 4 /* isWaitingForChildren */),
+            isConstructingInstance: !!(flags & 8 /* isConstructingInstance */),
+            isQueuedForUpdate: !!(flags & 16 /* isQueuedForUpdate */),
+            hasInitializedComponent: !!(flags & 32 /* hasInitializedComponent */),
+            hasLoadedComponent: !!(flags & 64 /* hasLoadedComponent */),
+            isWatchReady: !!(flags & 128 /* isWatchReady */),
+            isListenReady: !!(flags & 256 /* isListenReady */),
+            needsRerender: !!(flags & 512 /* needsRerender */),
+        },
+        instanceValues: hostRef.$instanceValues$,
+        ancestorComponent: hostRef.$ancestorComponent$,
+        hostElement,
+        lazyInstance: hostRef.$lazyInstance$,
+        vnode: hostRef.$vnode$,
+        modeName: hostRef.$modeName$,
+        onReadyPromise: hostRef.$onReadyPromise$,
+        onReadyResolve: hostRef.$onReadyResolve$,
+        onInstancePromise: hostRef.$onInstancePromise$,
+        onInstanceResolve: hostRef.$onInstanceResolve$,
+        onRenderResolve: hostRef.$onRenderResolve$,
+        queuedListeners: hostRef.$queuedListeners$,
+        rmListeners: hostRef.$rmListeners$,
+        ['s-id']: hostElement['s-id'],
+        ['s-cr']: hostElement['s-cr'],
+        ['s-lr']: hostElement['s-lr'],
+        ['s-p']: hostElement['s-p'],
+        ['s-rc']: hostElement['s-rc'],
+        ['s-sc']: hostElement['s-sc'],
+    };
+};
+const installDevTools = () => {
+    if (buildConditionals.BUILD.devTools) {
+        const rindo = platform.win.rindo = platform.win.rindo || {};
+        const originalInspect = rindo.inspect;
+        rindo.inspect = (ref) => {
+            let result = inspect(ref);
+            if (!result && typeof originalInspect === 'function') {
+                result = originalInspect(ref);
+            }
+            return result;
+        };
+    }
+};
+
+const rootAppliedStyles = new WeakMap();
+const registerStyle = (scopeId, cssText, allowCS) => {
+    let style = platform.styles.get(scopeId);
+    if (platform.supportsConstructibleStylesheets && allowCS) {
+        style = (style || new CSSStyleSheet());
+        style.replace(cssText);
+    }
+    else {
+        style = cssText;
+    }
+    platform.styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    let scopeId = buildConditionals.BUILD.mode ? getScopeId(cmpMeta.$tagName$, mode) : getScopeId(cmpMeta.$tagName$);
+    let style = platform.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 : platform.doc);
+    if (buildConditionals.BUILD.mode && !style) {
+        scopeId = getScopeId(cmpMeta.$tagName$);
+        style = platform.styles.get(scopeId);
+    }
+    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 (buildConditionals.BUILD.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
+                    // This is only happening on native shadow-dom, do not needs CSS var shim
+                    styleElm.innerHTML = style;
+                }
+                else {
+                    if (buildConditionals.BUILD.cssVarShim && platform.plt.$cssShim$) {
+                        styleElm = platform.plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
+                        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 = platform.doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    if (buildConditionals.BUILD.hydrateServerSide || buildConditionals.BUILD.hotModuleReplacement) {
+                        styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
+                    }
+                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (buildConditionals.BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (elm, cmpMeta, mode) => {
+    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
+    const scopeId = addStyle((buildConditionals.BUILD.shadowDom && platform.supportsShadowDom && elm.shadowRoot)
+        ? elm.shadowRoot
+        : elm.getRootNode(), cmpMeta, mode, elm);
+    if ((buildConditionals.BUILD.shadowDom || buildConditionals.BUILD.scoped) && buildConditionals.BUILD.cssAnnotations && 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'] = scopeId;
+        elm.classList.add(scopeId + '-h');
+        if (buildConditionals.BUILD.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
+    }
+    endAttachStyles();
+};
+const getScopeId = (tagName, mode) => 'sc-' + ((buildConditionals.BUILD.mode && mode) ? tagName + '-' + mode : tagName);
+const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
+
+/**
+ * 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 Rindo'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 key = null;
+    let slotName = null;
+    let simple = false;
+    let lastSimple = false;
+    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' && !utils.isComplexType(child)) {
+                    child = String(child);
+                }
+                else if (buildConditionals.BUILD.isDev && child.$flags$ === undefined) {
+                    platform.consoleDevError(`vNode passed as children has unexpected type.
+Make sure it's using the correct h() function.
+Empty objects can also be the cause, look for JSX comments that became objects.`);
+                }
+                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 ? newVNode(null, child) : child);
+                }
+                lastSimple = simple;
+            }
+        }
+    };
+    walk(children);
+    if (vnodeData) {
+        if (buildConditionals.BUILD.isDev && nodeName === 'input') {
+            validateInputProperties(vnodeData);
+        }
+        // normalize class / classname attributes
+        if (buildConditionals.BUILD.vdomKey && vnodeData.key) {
+            key = vnodeData.key;
+        }
+        if (buildConditionals.BUILD.slotRelocation && vnodeData.name) {
+            slotName = vnodeData.name;
+        }
+        if (buildConditionals.BUILD.vdomClass) {
+            const classData = vnodeData.className || vnodeData.class;
+            if (classData) {
+                vnodeData.class = typeof classData !== 'object'
+                    ? classData
+                    : Object.keys(classData)
+                        .filter(k => classData[k])
+                        .join(' ');
+            }
+        }
+    }
+    if (buildConditionals.BUILD.isDev && vNodeChildren.some(isHost)) {
+        platform.consoleDevError(`The <Host> must be the single root component. Make sure:
+- You are NOT using hostData() and <Host> in the same component.
+- <Host> is used once, and it's the single root component of the render() function.`);
+    }
+    if (buildConditionals.BUILD.vdomFunctional && typeof nodeName === 'function') {
+        // nodeName is a functional component
+        return nodeName(vnodeData, vNodeChildren, vdomFnUtils);
+    }
+    const vnode = newVNode(nodeName, null);
+    vnode.$attrs$ = vnodeData;
+    if (vNodeChildren.length > 0) {
+        vnode.$children$ = vNodeChildren;
+    }
+    if (buildConditionals.BUILD.vdomKey) {
+        vnode.$key$ = key;
+    }
+    if (buildConditionals.BUILD.slotRelocation) {
+        vnode.$name$ = slotName;
+    }
+    return vnode;
+};
+const newVNode = (tag, text) => {
+    const vnode = {
+        $flags$: 0,
+        $tag$: tag,
+        $text$: text,
+        $elm$: null,
+        $children$: null
+    };
+    if (buildConditionals.BUILD.vdomAttribute) {
+        vnode.$attrs$ = null;
+    }
+    if (buildConditionals.BUILD.vdomKey) {
+        vnode.$key$ = null;
+    }
+    if (buildConditionals.BUILD.slotRelocation) {
+        vnode.$name$ = null;
+    }
+    return vnode;
+};
+const Host = {};
+const isHost = (node) => node && node.$tag$ === 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) => {
+    const vnode = newVNode(node.vtag, node.vtext);
+    vnode.$attrs$ = node.vattrs;
+    vnode.$children$ = node.vchildren;
+    vnode.$key$ = node.vkey;
+    vnode.$name$ = node.vname;
+    return vnode;
+};
+const validateInputProperties = (vnodeData) => {
+    const props = Object.keys(vnodeData);
+    const typeIndex = props.indexOf('type');
+    const minIndex = props.indexOf('min');
+    const maxIndex = props.indexOf('max');
+    const stepIndex = props.indexOf('min');
+    const value = props.indexOf('value');
+    if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {
+        platform.consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
+    }
+};
+
+/**
+ * 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 Rindo's compiler and vdom
+ */
+const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
+    if (oldValue !== newValue) {
+        let isProp = platform.isMemberInElement(elm, memberName);
+        let ln = memberName.toLowerCase();
+        if (buildConditionals.BUILD.vdomClass && memberName === 'class') {
+            const classList = elm.classList;
+            const oldClasses = parseClassList(oldValue);
+            const newClasses = parseClassList(newValue);
+            classList.remove(...oldClasses.filter(c => c && !newClasses.includes(c)));
+            classList.add(...newClasses.filter(c => c && !oldClasses.includes(c)));
+        }
+        else if (buildConditionals.BUILD.vdomStyle && memberName === 'style') {
+            // update style attribute, css properties and values
+            if (buildConditionals.BUILD.updatable) {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (!buildConditionals.BUILD.hydrateServerSide && prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (!buildConditionals.BUILD.hydrateServerSide && prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
+        else if (buildConditionals.BUILD.vdomKey && memberName === 'key') ;
+        else if (buildConditionals.BUILD.vdomRef && memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
+        else if (buildConditionals.BUILD.vdomListener &&
+            (buildConditionals.BUILD.lazyLoad
+                ? !isProp
+                : !elm.__lookupSetter__(memberName)) &&
+            memberName[0] === 'o' && memberName[1] === 'n') {
+            // 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 (memberName[2] === '-') {
+                // on- prefixed events
+                // allows to be explicit about the dom event to listen without any magic
+                // under the hood:
+                // <my-cmp on-click> // listens for "click"
+                // <my-cmp on-Click> // listens for "Click"
+                // <my-cmp on-ionChange> // listens for "ionChange"
+                // <my-cmp on-EVENTS> // listens for "EVENTS"
+                memberName = memberName.slice(3);
+            }
+            else if (platform.isMemberInElement(platform.win, ln)) {
+                // standard event
+                // the JSX attribute could have been "onMouseOver" and the
+                // member name "onmouseover" is on the window's prototype
+                // so let's add the listener "mouseover", which is all lowercased
+                memberName = ln.slice(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 = ln[2] + memberName.slice(3);
+            }
+            if (oldValue) {
+                platform.plt.rel(elm, memberName, oldValue, false);
+            }
+            if (newValue) {
+                platform.plt.ael(elm, memberName, newValue, false);
+            }
+        }
+        else if (buildConditionals.BUILD.vdomPropOrAttr) {
+            // Set property if it exists and it's not a SVG
+            const isComplex = utils.isComplexType(newValue);
+            if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
+                try {
+                    if (!elm.tagName.includes('-')) {
+                        let n = newValue == null ? '' : newValue;
+                        // Workaround for Safari, moving the <input> caret when re-assigning the same valued
+                        if (memberName === 'list') {
+                            isProp = false;
+                            // tslint:disable-next-line: triple-equals
+                        }
+                        else if (oldValue == null || elm[memberName] != n) {
+                            elm[memberName] = n;
+                        }
+                    }
+                    else {
+                        elm[memberName] = newValue;
+                    }
+                }
+                catch (e) { }
+            }
+            /**
+             * Need to manually update attribute if:
+             * - memberName is not an attribute
+             * - if we are rendering the host element in order to reflect attribute
+             * - if it's a SVG, since properties might not work in <svg>
+             * - if the newValue is null/undefined or 'false'.
+             */
+            let xlink = false;
+            if (buildConditionals.BUILD.vdomXlink) {
+                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
+                    memberName = ln;
+                    xlink = true;
+                }
+            }
+            if (newValue == null || newValue === false) {
+                if (buildConditionals.BUILD.vdomXlink && xlink) {
+                    elm.removeAttributeNS(XLINK_NS, memberName);
+                }
+                else {
+                    elm.removeAttribute(memberName);
+                }
+            }
+            else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) {
+                newValue = newValue === true ? '' : newValue;
+                if (buildConditionals.BUILD.vdomXlink && xlink) {
+                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
+                }
+                else {
+                    elm.setAttribute(memberName, newValue);
+                }
+            }
+        }
+    }
+};
+const parseClassListRegex = /\s/;
+const parseClassList = (value) => (!value) ? [] : value.split(parseClassListRegex);
+
+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$) || utils.EMPTY_OBJ;
+    const newVnodeAttrs = newVnode.$attrs$ || utils.EMPTY_OBJ;
+    if (buildConditionals.BUILD.updatable) {
+        // remove attributes no longer present on the vnode by setting them to undefined
+        for (memberName in oldVnodeAttrs) {
+            if (!(memberName in newVnodeAttrs)) {
+                setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
+            }
+        }
+    }
+    // add new & update changed attributes
+    for (memberName in newVnodeAttrs) {
+        setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
+    }
+};
+
+let scopeId;
+let contentRef;
+let hostTagName;
+let useNativeShadowDom = false;
+let checkSlotFallbackVisibility = false;
+let checkSlotRelocate = false;
+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;
+    let oldVNode;
+    if (buildConditionals.BUILD.slotRelocation && !useNativeShadowDom) {
+        // remember for later we need to check to relocate nodes
+        checkSlotRelocate = true;
+        if (newVNode.$tag$ === 'slot') {
+            if (scopeId) {
+                // scoped css needs to add its scoped id to the parent element
+                parentElm.classList.add(scopeId + '-s');
+            }
+            newVNode.$flags$ |= (newVNode.$children$)
+                // slot element has fallback content
+                // still create an element that "mocks" the slot element
+                ? 2 /* isSlotFallback */
+                // slot element does not have fallback content
+                // create an html comment we'll use to always reference
+                // where actual slot content should sit next to
+                : 1 /* isSlotReference */;
+        }
+    }
+    if (buildConditionals.BUILD.isDev && newVNode.$elm$) {
+        platform.consoleError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${newVNode.$tag$}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://rindojs.web.app/docs/templating-jsx#avoid-shared-jsx-nodes`);
+    }
+    if (buildConditionals.BUILD.vdomText && newVNode.$text$ !== null) {
+        // create text node
+        elm = newVNode.$elm$ = platform.doc.createTextNode(newVNode.$text$);
+    }
+    else if (buildConditionals.BUILD.slotRelocation && newVNode.$flags$ & 1 /* isSlotReference */) {
+        // create a slot reference node
+        elm = newVNode.$elm$ = (buildConditionals.BUILD.isDebug || buildConditionals.BUILD.hydrateServerSide) ? slotReferenceDebugNode(newVNode) : platform.doc.createTextNode('');
+    }
+    else {
+        if (buildConditionals.BUILD.svg && !isSvgMode) {
+            isSvgMode = newVNode.$tag$ === 'svg';
+        }
+        // create element
+        elm = newVNode.$elm$ = ((buildConditionals.BUILD.svg)
+            ? platform.doc.createElementNS(isSvgMode ? utils.SVG_NS : utils.HTML_NS, (buildConditionals.BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$)
+            : platform.doc.createElement((buildConditionals.BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$));
+        if (buildConditionals.BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {
+            isSvgMode = false;
+        }
+        // add css classes, attrs, props, listeners, etc.
+        if (buildConditionals.BUILD.vdomAttribute) {
+            updateElement(null, newVNode, isSvgMode);
+        }
+        if ((buildConditionals.BUILD.shadowDom || buildConditionals.BUILD.scoped) && utils.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, elm);
+                // return node could have been null
+                if (childNode) {
+                    // append our new node
+                    elm.appendChild(childNode);
+                }
+            }
+        }
+        if (buildConditionals.BUILD.svg) {
+            if (newVNode.$tag$ === 'svg') {
+                // Only reset the SVG context when we're exiting <svg> element
+                isSvgMode = false;
+            }
+            else if (elm.tagName === 'foreignObject') {
+                // Reenter SVG context when we're exiting <foreignObject> element
+                isSvgMode = true;
+            }
+        }
+    }
+    if (buildConditionals.BUILD.slotRelocation) {
+        elm['s-hn'] = hostTagName;
+        if (newVNode.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
+            // remember the content reference comment
+            elm['s-sr'] = true;
+            // remember the content reference comment
+            elm['s-cr'] = contentRef;
+            // remember the slot name, or empty string for default slot
+            elm['s-sn'] = newVNode.$name$ || '';
+            // check if we've got an old vnode for this slot
+            oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+            if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
+                // we've got an old slot vnode and the wrapper is being replaced
+                // so let's move the old slot content back to it's original location
+                putBackInOriginalLocation(oldParentVNode.$elm$, false);
+            }
+        }
+    }
+    return elm;
+};
+const putBackInOriginalLocation = (parentElm, recursive) => {
+    platform.plt.$flags$ |= 1 /* isTmpDisconnected */;
+    const oldSlotChildNodes = parentElm.childNodes;
+    for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
+        const childNode = oldSlotChildNodes[i];
+        if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
+            // // this child node in the old element is from another component
+            // // remove this node from the old slot's parent
+            // childNode.remove();
+            // and relocate it back to it's original location
+            parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
+            // remove the old original location comment entirely
+            // later on the patch function will know what to do
+            // and move this to the correct spot in need be
+            childNode['s-ol'].remove();
+            childNode['s-ol'] = undefined;
+            checkSlotRelocate = true;
+        }
+        if (recursive) {
+            putBackInOriginalLocation(childNode, recursive);
+        }
+    }
+    platform.plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
+const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
+    let containerElm = ((buildConditionals.BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
+    let childNode;
+    if (buildConditionals.BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+        containerElm = containerElm.shadowRoot;
+    }
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (vnodes[startIdx]) {
+            childNode = createElm(null, parentVNode, startIdx, parentElm);
+            if (childNode) {
+                vnodes[startIdx].$elm$ = childNode;
+                containerElm.insertBefore(childNode, buildConditionals.BUILD.slotRelocation ? referenceNode(before) : before);
+            }
+        }
+    }
+};
+const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
+    for (; startIdx <= endIdx; ++startIdx) {
+        if (vnode = vnodes[startIdx]) {
+            elm = vnode.$elm$;
+            callNodeRefs(vnode);
+            if (buildConditionals.BUILD.slotRelocation) {
+                // we're removing this element
+                // so it's possible we need to show slot fallback content now
+                checkSlotFallbackVisibility = true;
+                if (elm['s-ol']) {
+                    // remove the original location comment
+                    elm['s-ol'].remove();
+                }
+                else {
+                    // it's possible that child nodes of the node
+                    // that's being removed are slot nodes
+                    putBackInOriginalLocation(elm, true);
+                }
+            }
+            // remove the vnode's element from the dom
+            elm.remove();
+        }
+    }
+};
+const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    let newEndIdx = newCh.length - 1;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let node;
+    let elmToMove;
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+        if (oldStartVnode == null) {
+            // Vnode might have been moved left
+            oldStartVnode = oldCh[++oldStartIdx];
+        }
+        else if (oldEndVnode == null) {
+            oldEndVnode = oldCh[--oldEndIdx];
+        }
+        else if (newStartVnode == null) {
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (newEndVnode == null) {
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+            patch(oldStartVnode, newStartVnode);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+            patch(oldEndVnode, newEndVnode);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldStartVnode, newEndVnode)) {
+            // Vnode moved right
+            if (buildConditionals.BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
+                putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+            }
+            patch(oldStartVnode, newEndVnode);
+            parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+            oldStartVnode = oldCh[++oldStartIdx];
+            newEndVnode = newCh[--newEndIdx];
+        }
+        else if (isSameVnode(oldEndVnode, newStartVnode)) {
+            // Vnode moved left
+            if (buildConditionals.BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
+                putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+            }
+            patch(oldEndVnode, newStartVnode);
+            parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
+            oldEndVnode = oldCh[--oldEndIdx];
+            newStartVnode = newCh[++newStartIdx];
+        }
+        else {
+            // createKeyToOldIdx
+            idxInOld = -1;
+            if (buildConditionals.BUILD.vdomKey) {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (buildConditionals.BUILD.vdomKey && idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
+                // new element
+                node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx, parentElm);
+                newStartVnode = newCh[++newStartIdx];
+            }
+            if (node) {
+                if (buildConditionals.BUILD.slotRelocation) {
+                    parentReferenceNode(oldStartVnode.$elm$).insertBefore(node, referenceNode(oldStartVnode.$elm$));
+                }
+                else {
+                    oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
+                }
+            }
+        }
+    }
+    if (oldStartIdx > oldEndIdx) {
+        addVnodes(parentElm, (newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$), newVNode, newCh, newStartIdx, newEndIdx);
+    }
+    else if (buildConditionals.BUILD.updatable && newStartIdx > newEndIdx) {
+        removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+    }
+};
+const isSameVnode = (vnode1, vnode2) => {
+    // compare if two vnode to see if they're "technically" the same
+    // need to have the same element tag, and same key to be the same
+    if (vnode1.$tag$ === vnode2.$tag$) {
+        if (buildConditionals.BUILD.slotRelocation && vnode1.$tag$ === 'slot') {
+            return vnode1.$name$ === vnode2.$name$;
+        }
+        if (buildConditionals.BUILD.vdomKey) {
+            return vnode1.$key$ === vnode2.$key$;
+        }
+        return true;
+    }
+    return false;
+};
+const referenceNode = (node) => {
+    // this node was relocated to a new location in the dom
+    // because of some other component's slot
+    // but we still have an html comment in place of where
+    // it's original location was according to it's original vdom
+    return (node && node['s-ol']) || node;
+};
+const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
+const patch = (oldVNode, newVNode) => {
+    const elm = newVNode.$elm$ = oldVNode.$elm$;
+    const oldChildren = oldVNode.$children$;
+    const newChildren = newVNode.$children$;
+    const tag = newVNode.$tag$;
+    const text = newVNode.$text$;
+    let defaultHolder;
+    if (!buildConditionals.BUILD.vdomText || text === null) {
+        if (buildConditionals.BUILD.svg) {
+            // test if we're rendering an svg element, or still rendering nodes inside of one
+            // only add this to the when the compiler sees we're using an svg somewhere
+            isSvgMode = (tag === 'svg')
+                ? true
+                : (tag === 'foreignObject')
+                    ? false
+                    : isSvgMode;
+        }
+        // element node
+        if (buildConditionals.BUILD.vdomAttribute || buildConditionals.BUILD.reflect) {
+            if (buildConditionals.BUILD.slot && tag === 'slot') ;
+            else {
+                // 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 (buildConditionals.BUILD.updatable && oldChildren !== null && newChildren !== null) {
+            // looks like there's child vnodes for both the old and new vnodes
+            updateChildren(elm, oldChildren, newVNode, newChildren);
+        }
+        else if (newChildren !== null) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (buildConditionals.BUILD.updatable && buildConditionals.BUILD.vdomText && oldVNode.$text$ !== null) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
+            // add the new vnode children
+            addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
+        }
+        else if (buildConditionals.BUILD.updatable && oldChildren !== null) {
+            // no new child vnodes, but there are old child vnodes to remove
+            removeVnodes(oldChildren, 0, oldChildren.length - 1);
+        }
+        if (buildConditionals.BUILD.svg && isSvgMode && tag === 'svg') {
+            isSvgMode = false;
+        }
+    }
+    else if (buildConditionals.BUILD.vdomText && buildConditionals.BUILD.slotRelocation && (defaultHolder = elm['s-cr'])) {
+        // this element has slotted content
+        defaultHolder.parentNode.textContent = text;
+    }
+    else if (buildConditionals.BUILD.vdomText && oldVNode.$text$ !== text) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.data = text;
+    }
+};
+const updateFallbackSlotVisibility = (elm) => {
+    // tslint:disable-next-line: prefer-const
+    let childNodes = elm.childNodes;
+    let childNode;
+    let i;
+    let ilen;
+    let j;
+    let slotNameAttr;
+    let nodeType;
+    for (i = 0, ilen = childNodes.length; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            if (childNode['s-sr']) {
+                // this is a slot fallback node
+                // get the slot name for this slot reference node
+                slotNameAttr = childNode['s-sn'];
+                // by default always show a fallback slot node
+                // then hide it if there are other slots in the light dom
+                childNode.hidden = false;
+                for (j = 0; j < ilen; j++) {
+                    if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
+                        // this sibling node is from a different component
+                        nodeType = childNodes[j].nodeType;
+                        if (slotNameAttr !== '') {
+                            // this is a named fallback slot node
+                            if (nodeType === 1 /* ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                        else {
+                            // this is a default fallback slot node
+                            // any element or text node (with content)
+                            // should hide the default fallback slot node
+                            if (nodeType === 1 /* ElementNode */ || (nodeType === 3 /* TextNode */ && childNodes[j].textContent.trim() !== '')) {
+                                childNode.hidden = true;
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            // keep drilling down
+            updateFallbackSlotVisibility(childNode);
+        }
+    }
+};
+const relocateNodes = [];
+const relocateSlotContent = (elm) => {
+    // tslint:disable-next-line: prefer-const
+    let childNode;
+    let node;
+    let hostContentNodes;
+    let slotNameAttr;
+    let relocateNodeData;
+    let j;
+    let i = 0;
+    let childNodes = elm.childNodes;
+    let ilen = childNodes.length;
+    for (; i < ilen; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && (node = childNode['s-cr'])) {
+            // first got the content reference comment node
+            // then we got it's parent, which is where all the host content is in now
+            hostContentNodes = node.parentNode.childNodes;
+            slotNameAttr = childNode['s-sn'];
+            for (j = hostContentNodes.length - 1; j >= 0; j--) {
+                node = hostContentNodes[j];
+                if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
+                    // let's do some relocating to its new home
+                    // but never relocate a content reference node
+                    // that is suppose to always represent the original content location
+                    if (isNodeLocatedInSlot(node, slotNameAttr)) {
+                        // it's possible we've already decided to relocate this node
+                        relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                        // made some changes to slots
+                        // let's make sure we also double check
+                        // fallbacks are correctly hidden or shown
+                        checkSlotFallbackVisibility = true;
+                        node['s-sn'] = node['s-sn'] || slotNameAttr;
+                        if (relocateNodeData) {
+                            // previously we never found a slot home for this node
+                            // but turns out we did, so let's remember it now
+                            relocateNodeData.$slotRefNode$ = childNode;
+                        }
+                        else {
+                            // add to our list of nodes to relocate
+                            relocateNodes.push({
+                                $slotRefNode$: childNode,
+                                $nodeToRelocate$: node,
+                            });
+                        }
+                        if (node['s-sr']) {
+                            relocateNodes.forEach(relocateNode => {
+                                if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
+                                    relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                                    if (relocateNodeData) {
+                                        relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
+                                    }
+                                }
+                            });
+                        }
+                    }
+                    else if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
+                        // so far this element does not have a slot home, not setting slotRefNode on purpose
+                        // if we never find a home for this element then we'll need to hide it
+                        relocateNodes.push({
+                            $nodeToRelocate$: node,
+                        });
+                    }
+                }
+            }
+        }
+        if (childNode.nodeType === 1 /* ElementNode */) {
+            relocateSlotContent(childNode);
+        }
+    }
+};
+const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
+    if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+        if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
+            return true;
+        }
+        if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
+            return true;
+        }
+        return false;
+    }
+    if (nodeToRelocate['s-sn'] === slotNameAttr) {
+        return true;
+    }
+    return slotNameAttr === '';
+};
+const callNodeRefs = (vNode) => {
+    if (buildConditionals.BUILD.vdomRef) {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.forEach(callNodeRefs);
+    }
+};
+const renderVdom = (hostElm, hostRef, cmpMeta, renderFnResults) => {
+    hostTagName = hostElm.tagName;
+    // <Host> runtime check
+    if (buildConditionals.BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
+        throw new Error(`The <Host> must be the single root component.
+Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
+
+The render() function should look like this instead:
+
+render() {
+  // Do not return an array
+  return (
+    <Host>{content}</Host>
+  );
+}
+`);
+    }
+    const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    const rootVnode = isHost(renderFnResults)
+        ? renderFnResults
+        : h(null, null, renderFnResults);
+    if (buildConditionals.BUILD.reflect && cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]);
+    }
+    rootVnode.$tag$ = null;
+    rootVnode.$flags$ |= 4 /* isHost */;
+    hostRef.$vnode$ = rootVnode;
+    rootVnode.$elm$ = oldVNode.$elm$ = (buildConditionals.BUILD.shadowDom ? hostElm.shadowRoot || hostElm : hostElm);
+    if (buildConditionals.BUILD.scoped || buildConditionals.BUILD.shadowDom) {
+        scopeId = hostElm['s-sc'];
+    }
+    if (buildConditionals.BUILD.slotRelocation) {
+        contentRef = hostElm['s-cr'];
+        useNativeShadowDom = platform.supportsShadowDom && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+        // always reset
+        checkSlotFallbackVisibility = false;
+    }
+    // synchronous patch
+    patch(oldVNode, rootVnode);
+    if (buildConditionals.BUILD.slotRelocation) {
+        if (checkSlotRelocate) {
+            relocateSlotContent(rootVnode.$elm$);
+            let relocateData;
+            let nodeToRelocate;
+            let orgLocationNode;
+            let parentNodeRef;
+            let insertBeforeNode;
+            let refNode;
+            let i = 0;
+            for (; i < relocateNodes.length; i++) {
+                relocateData = relocateNodes[i];
+                nodeToRelocate = relocateData.$nodeToRelocate$;
+                if (!nodeToRelocate['s-ol']) {
+                    // add a reference node marking this node's original location
+                    // keep a reference to this node for later lookups
+                    orgLocationNode = (buildConditionals.BUILD.isDebug || buildConditionals.BUILD.hydrateServerSide)
+                        ? originalLocationDebugNode(nodeToRelocate)
+                        : platform.doc.createTextNode('');
+                    orgLocationNode['s-nr'] = nodeToRelocate;
+                    nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
+                }
+            }
+            // while we're moving nodes around existing nodes, temporarily disable
+            // the disconnectCallback from working
+            platform.plt.$flags$ |= 1 /* isTmpDisconnected */;
+            for (i = 0; i < relocateNodes.length; i++) {
+                relocateData = relocateNodes[i];
+                nodeToRelocate = relocateData.$nodeToRelocate$;
+                if (relocateData.$slotRefNode$) {
+                    // by default we're just going to insert it directly
+                    // after the slot reference node
+                    parentNodeRef = relocateData.$slotRefNode$.parentNode;
+                    insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
+                    orgLocationNode = nodeToRelocate['s-ol'];
+                    while (orgLocationNode = orgLocationNode.previousSibling) {
+                        refNode = orgLocationNode['s-nr'];
+                        if (refNode &&
+                            refNode['s-sn'] === nodeToRelocate['s-sn'] &&
+                            parentNodeRef === refNode.parentNode) {
+                            refNode = refNode.nextSibling;
+                            if (!refNode || !refNode['s-nr']) {
+                                insertBeforeNode = refNode;
+                                break;
+                            }
+                        }
+                    }
+                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
+                        (nodeToRelocate.nextSibling !== insertBeforeNode)) {
+                        // we've checked that it's worth while to relocate
+                        // since that the node to relocate
+                        // has a different next sibling or parent relocated
+                        if (nodeToRelocate !== insertBeforeNode) {
+                            if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
+                                // probably a component in the index.html that doesn't have it's hostname set
+                                nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
+                            }
+                            // add it back to the dom but in its new home
+                            parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
+                        }
+                    }
+                }
+                else {
+                    // this node doesn't have a slot home to go to, so let's hide it
+                    if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
+                        nodeToRelocate.hidden = true;
+                    }
+                }
+            }
+            // done moving nodes around
+            // allow the disconnect callback to work again
+            platform.plt.$flags$ &= ~1 /* isTmpDisconnected */;
+        }
+        if (checkSlotFallbackVisibility) {
+            updateFallbackSlotVisibility(rootVnode.$elm$);
+        }
+        // always reset
+        relocateNodes.length = 0;
+    }
+};
+// slot comment debug nodes only created with the `--debug` flag
+// otherwise these nodes are text nodes w/out content
+const slotReferenceDebugNode = (slotVNode) => platform.doc.createComment(`<slot${slotVNode.$name$ ?
+    (' name="' + slotVNode.$name$) + '"' :
+    ''}> (host=${hostTagName.toLowerCase()})`);
+const originalLocationDebugNode = (nodeToRelocate) => platform.doc.createComment(`org-location for ` +
+    (nodeToRelocate.localName ?
+        `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})` :
+        `[${nodeToRelocate.textContent}]`));
+
+const attachToAncestor = (hostRef, ancestorComponent) => {
+    if (buildConditionals.BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$) {
+        ancestorComponent['s-p'].push(new Promise(r => hostRef.$onRenderResolve$ = r));
+    }
+};
+const scheduleUpdate = (elm, hostRef, cmpMeta, isInitialLoad) => {
+    if (buildConditionals.BUILD.taskQueue && buildConditionals.BUILD.updatable) {
+        hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
+    }
+    if (buildConditionals.BUILD.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
+        hostRef.$flags$ |= 512 /* needsRerender */;
+        return;
+    }
+    const endSchedule = createTime('scheduleUpdate', cmpMeta.$tagName$);
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    const instance = buildConditionals.BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+    const update = () => updateComponent(elm, hostRef, cmpMeta, instance, isInitialLoad);
+    attachToAncestor(hostRef, ancestorComponent);
+    let promise;
+    if (isInitialLoad) {
+        if (buildConditionals.BUILD.lazyLoad && buildConditionals.BUILD.hostListener) {
+            hostRef.$flags$ |= 256 /* isListenReady */;
+            if (hostRef.$queuedListeners$) {
+                hostRef.$queuedListeners$.forEach(([methodName, event]) => safeCall(instance, methodName, event));
+                hostRef.$queuedListeners$ = null;
+            }
+        }
+        emitLifecycleEvent(elm, 'componentWillLoad');
+        if (buildConditionals.BUILD.cmpWillLoad) {
+            promise = safeCall(instance, 'componentWillLoad');
+        }
+    }
+    else {
+        emitLifecycleEvent(elm, 'componentWillUpdate');
+        if (buildConditionals.BUILD.cmpWillUpdate) {
+            promise = safeCall(instance, 'componentWillUpdate');
+        }
+    }
+    emitLifecycleEvent(elm, 'componentWillRender');
+    if (buildConditionals.BUILD.cmpWillRender) {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
+    endSchedule();
+    // there is no ancestorc omponent or the ancestor component
+    // has already fired off its lifecycle update then
+    // fire off the initial update
+    return then(promise, buildConditionals.BUILD.taskQueue
+        ? () => platform.writeTask(update)
+        : update);
+};
+const updateComponent = (elm, hostRef, cmpMeta, instance, isInitialLoad) => {
+    // updateComponent
+    const endUpdate = createTime('update', cmpMeta.$tagName$);
+    const rc = elm['s-rc'];
+    if (buildConditionals.BUILD.style && isInitialLoad) {
+        // DOM WRITE!
+        attachStyles(elm, cmpMeta, hostRef.$modeName$);
+    }
+    const endRender = createTime('render', cmpMeta.$tagName$);
+    if (buildConditionals.BUILD.isDev) {
+        hostRef.$flags$ |= 1024 /* devOnRender */;
+    }
+    if (buildConditionals.BUILD.hasRenderFn || buildConditionals.BUILD.reflect) {
+        if (buildConditionals.BUILD.vdomRender || buildConditionals.BUILD.reflect) {
+            // 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, callRender(instance, elm));
+        }
+        else {
+            elm.textContent = callRender(instance, elm);
+        }
+    }
+    if (buildConditionals.BUILD.cssVarShim && platform.plt.$cssShim$) {
+        platform.plt.$cssShim$.updateHost(elm);
+    }
+    if (buildConditionals.BUILD.isDev) {
+        hostRef.$renderCount$++;
+        hostRef.$flags$ &= ~1024 /* devOnRender */;
+    }
+    if (buildConditionals.BUILD.updatable && buildConditionals.BUILD.taskQueue) {
+        hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
+    }
+    if (buildConditionals.BUILD.hydrateServerSide) {
+        try {
+            // manually connected child components during server-side hydrate
+            serverSideConnected(elm);
+            if (isInitialLoad) {
+                // using only during server-side hydrate
+                if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                    elm['s-en'] = '';
+                }
+                else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+                    elm['s-en'] = 'c';
+                }
+            }
+        }
+        catch (e) {
+            platform.consoleError(e);
+        }
+    }
+    if (buildConditionals.BUILD.updatable || buildConditionals.BUILD.lazyLoad) {
+        hostRef.$flags$ |= 2 /* hasRendered */;
+    }
+    if (buildConditionals.BUILD.asyncLoading && rc) {
+        // 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
+        rc.forEach(cb => cb());
+        elm['s-rc'] = undefined;
+    }
+    endRender();
+    endUpdate();
+    if (buildConditionals.BUILD.asyncLoading) {
+        const childrenPromises = elm['s-p'];
+        const postUpdate = () => postUpdateComponent(elm, hostRef, cmpMeta);
+        if (childrenPromises.length === 0) {
+            postUpdate();
+        }
+        else {
+            Promise.all(childrenPromises).then(postUpdate);
+            hostRef.$flags$ |= 4 /* isWaitingForChildren */;
+            childrenPromises.length = 0;
+        }
+    }
+    else {
+        postUpdateComponent(elm, hostRef, cmpMeta);
+    }
+};
+let renderingElement = null;
+const callRender = (instance, elm) => {
+    try {
+        renderingElement = elm;
+        instance = (buildConditionals.BUILD.allRenderFn) ? instance.render() : (instance.render && instance.render());
+    }
+    catch (e) {
+        platform.consoleError(e);
+    }
+    renderingElement = null;
+    return instance;
+};
+const getRenderingElement = () => renderingElement;
+const postUpdateComponent = (elm, hostRef, cmpMeta) => {
+    const endPostUpdate = createTime('postUpdate', cmpMeta.$tagName$);
+    const instance = buildConditionals.BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    if (buildConditionals.BUILD.cmpDidRender) {
+        if (buildConditionals.BUILD.isDev) {
+            hostRef.$flags$ |= 1024 /* devOnRender */;
+        }
+        safeCall(instance, 'componentDidRender');
+        if (buildConditionals.BUILD.isDev) {
+            hostRef.$flags$ &= ~1024 /* devOnRender */;
+        }
+    }
+    emitLifecycleEvent(elm, 'componentDidRender');
+    if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
+        hostRef.$flags$ |= 64 /* hasLoadedComponent */;
+        if (buildConditionals.BUILD.asyncLoading && buildConditionals.BUILD.cssAnnotations) {
+            // DOM WRITE!
+            addHydratedFlag(elm);
+        }
+        if (buildConditionals.BUILD.cmpDidLoad) {
+            if (buildConditionals.BUILD.isDev) {
+                hostRef.$flags$ |= 2048 /* devOnDidLoad */;
+            }
+            safeCall(instance, 'componentDidLoad');
+            if (buildConditionals.BUILD.isDev) {
+                hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
+            }
+        }
+        emitLifecycleEvent(elm, 'componentDidLoad');
+        endPostUpdate();
+        if (buildConditionals.BUILD.asyncLoading) {
+            hostRef.$onReadyResolve$(elm);
+            if (!ancestorComponent) {
+                appDidLoad(cmpMeta.$tagName$);
+            }
+        }
+    }
+    else {
+        if (buildConditionals.BUILD.cmpDidUpdate) {
+            // we've already loaded this component
+            // fire off the user's componentDidUpdate method (if one was provided)
+            // componentDidUpdate runs AFTER render() has been called
+            // and all child components have finished updating
+            if (buildConditionals.BUILD.isDev) {
+                hostRef.$flags$ |= 1024 /* devOnRender */;
+            }
+            safeCall(instance, 'componentDidUpdate');
+            if (buildConditionals.BUILD.isDev) {
+                hostRef.$flags$ &= ~1024 /* devOnRender */;
+            }
+        }
+        emitLifecycleEvent(elm, 'componentDidUpdate');
+        endPostUpdate();
+    }
+    if (buildConditionals.BUILD.hotModuleReplacement) {
+        elm['s-hmr-load'] && elm['s-hmr-load']();
+    }
+    if (buildConditionals.BUILD.method && buildConditionals.BUILD.lazyLoad) {
+        hostRef.$onInstanceResolve$(elm);
+    }
+    // load events fire from bottom to top
+    // the deepest elements load first then bubbles up
+    if (buildConditionals.BUILD.asyncLoading) {
+        if (hostRef.$onRenderResolve$) {
+            hostRef.$onRenderResolve$();
+            hostRef.$onRenderResolve$ = undefined;
+        }
+        if (hostRef.$flags$ & 512 /* needsRerender */) {
+            platform.nextTick(() => scheduleUpdate(elm, hostRef, cmpMeta, false));
+        }
+        hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
+    }
+    // ( •_•)
+    // ( •_•)>⌐■-■
+    // (⌐■_■)
+};
+const forceUpdate = (elm, cmpMeta) => {
+    if (buildConditionals.BUILD.updatable) {
+        const hostRef = platform.getHostRef(elm);
+        const isConnected = hostRef.$hostElement$.isConnected;
+        if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+            scheduleUpdate(elm, hostRef, cmpMeta, false);
+        }
+        // Returns "true" when the forced update was successfully scheduled
+        return isConnected;
+    }
+    return false;
+};
+const appDidLoad = (who) => {
+    // on appload
+    // we have finish the first big initial render
+    if (buildConditionals.BUILD.cssAnnotations) {
+        addHydratedFlag(platform.doc.documentElement);
+    }
+    if (!buildConditionals.BUILD.hydrateServerSide) {
+        platform.plt.$flags$ |= 2 /* appLoaded */;
+    }
+    emitLifecycleEvent(platform.doc, 'appload');
+    if (buildConditionals.BUILD.profile) {
+        performance.measure(`[Rindo] ${buildConditionals.NAMESPACE} initial load (by ${who})`, 'st:app:start');
+    }
+};
+const safeCall = (instance, method, arg) => {
+    if (instance && instance[method]) {
+        try {
+            return instance[method](arg);
+        }
+        catch (e) {
+            platform.consoleError(e);
+        }
+    }
+    return undefined;
+};
+const then = (promise, thenFn) => {
+    return promise && promise.then ? promise.then(thenFn) : thenFn();
+};
+const emitLifecycleEvent = (elm, lifecycleName) => {
+    if (buildConditionals.BUILD.lifecycleDOMEvents) {
+        elm.dispatchEvent(new CustomEvent('rindo_' + lifecycleName, { 'bubbles': true, 'composed': true }));
+    }
+};
+const addHydratedFlag = (elm) => buildConditionals.BUILD.hydratedClass ?
+    elm.classList.add('hydrated') :
+    buildConditionals.BUILD.hydratedAttribute ?
+        elm.setAttribute('hydrated', '') :
+        undefined;
+const serverSideConnected = (elm) => {
+    const children = elm.children;
+    if (children != null) {
+        for (let i = 0, ii = children.length; i < ii; i++) {
+            const childElm = children[i];
+            if (typeof childElm.connectedCallback === 'function') {
+                childElm.connectedCallback();
+            }
+            serverSideConnected(childElm);
+        }
+    }
+};
+
+const cloneNodeFix = (HostElementPrototype) => {
+    const orgCloneNode = HostElementPrototype.cloneNode;
+    HostElementPrototype.cloneNode = function (deep) {
+        const srcNode = this;
+        const isShadowDom = buildConditionals.BUILD.shadowDom ? srcNode.shadowRoot && platform.supportsShadowDom : false;
+        const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
+        if (buildConditionals.BUILD.slot && !isShadowDom && deep) {
+            let i = 0;
+            let slotted, nonRindoNode;
+            let rindoPrivates = ['s-id', 's-cr', 's-lr', 's-rc', 's-sc', 's-p', 's-cn', 's-sr', 's-sn', 's-hn', 's-ol', 's-nr', 's-si'];
+            for (; i < srcNode.childNodes.length; i++) {
+                slotted = srcNode.childNodes[i]['s-nr'];
+                nonRindoNode = rindoPrivates.every((privateField) => !srcNode.childNodes[i][privateField]);
+                if (slotted) {
+                    if (buildConditionals.BUILD.appendChildSlotFix && clonedNode.__appendChild) {
+                        clonedNode.__appendChild(slotted.cloneNode(true));
+                    }
+                    else {
+                        clonedNode.appendChild(slotted.cloneNode(true));
+                    }
+                }
+                if (nonRindoNode) {
+                    clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
+const appendChildSlotFix = (HostElementPrototype) => {
+    HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+    HostElementPrototype.appendChild = function (newChild) {
+        const slotName = newChild['s-sn'] = getSlotName(newChild);
+        const slotNode = getHostSlotNode(this, slotName);
+        if (slotNode) {
+            const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+            const appendAfter = slotChildNodes[slotChildNodes.length - 1];
+            return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);
+        }
+        return this.__appendChild(newChild);
+    };
+};
+const getSlotName = (node) => (node['s-sn']) ||
+    (node.nodeType === 1 && node.getAttribute('slot')) || '';
+const getHostSlotNode = (elm, slotName) => {
+    let childNodes = elm.childNodes;
+    let i = 0;
+    let childNode;
+    for (; i < childNodes.length; i++) {
+        childNode = childNodes[i];
+        if (childNode['s-sr'] && childNode['s-sn'] === slotName) {
+            return childNode;
+        }
+        childNode = getHostSlotNode(childNode, slotName);
+        if (childNode) {
+            return childNode;
+        }
+    }
+    return null;
+};
+const getHostSlotChildNodes = (n, slotName) => {
+    const childNodes = [n];
+    while ((n = n.nextSibling) && n['s-sn'] === slotName) {
+        childNodes.push(n);
+    }
+    return childNodes;
+};
+
+const addEventListeners = (elm, hostRef, listeners) => {
+    hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || [];
+    const removeFns = listeners.map(([flags, name, method]) => {
+        const target = (buildConditionals.BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm);
+        const handler = hostListenerProxy(hostRef, method);
+        const opts = hostListenerOpts(flags);
+        platform.plt.ael(target, name, handler, opts);
+        return () => platform.plt.rel(target, name, handler, opts);
+    });
+    return () => removeFns.forEach(fn => fn());
+};
+const hostListenerProxy = (hostRef, methodName) => {
+    return (ev) => {
+        if (buildConditionals.BUILD.lazyLoad) {
+            if (hostRef.$flags$ & 256 /* isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                hostRef.$queuedListeners$.push([methodName, ev]);
+            }
+        }
+        else {
+            hostRef.$hostElement$[methodName](ev);
+        }
+    };
+};
+const getHostListenerTarget = (elm, flags) => {
+    if (buildConditionals.BUILD.hostListenerTargetDocument && flags & 4 /* TargetDocument */)
+        return platform.doc;
+    if (buildConditionals.BUILD.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
+        return platform.win;
+    if (buildConditionals.BUILD.hostListenerTargetBody && flags & 32 /* TargetBody */)
+        return platform.doc.body;
+    if (buildConditionals.BUILD.hostListenerTargetParent && flags & 16 /* TargetParent */)
+        return elm.parentElement;
+    return elm;
+};
+const hostListenerOpts = (flags) => platform.supportsListenerOptions ?
+    {
+        'passive': (flags & 1 /* Passive */) !== 0,
+        'capture': (flags & 2 /* Capture */) !== 0,
+    }
+    : (flags & 2 /* Capture */) !== 0;
+
+const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+    const endHydrate = createTime('hydrateClient', tagName);
+    const shadowRoot = hostElm.shadowRoot;
+    const childRenderNodes = [];
+    const slotNodes = [];
+    const shadowRootNodes = (buildConditionals.BUILD.shadowDom && shadowRoot ? [] : null);
+    const vnode = hostRef.$vnode$ = newVNode(tagName, null);
+    if (!platform.plt.$orgLocNodes$) {
+        initializeDocumentHydrate(platform.doc.body, platform.plt.$orgLocNodes$ = new Map());
+    }
+    hostElm[HYDRATE_ID] = hostId;
+    hostElm.removeAttribute(HYDRATE_ID);
+    clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
+    childRenderNodes.forEach(c => {
+        const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
+        const orgLocationNode = platform.plt.$orgLocNodes$.get(orgLocationId);
+        const node = c.$elm$;
+        if (orgLocationNode && (platform.supportsShadowDom && orgLocationNode['s-en'] === '')) {
+            orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+        }
+        if (!shadowRoot) {
+            node['s-hn'] = tagName;
+            if (orgLocationNode) {
+                node['s-ol'] = orgLocationNode;
+                node['s-ol']['s-nr'] = node;
+            }
+        }
+        platform.plt.$orgLocNodes$.delete(orgLocationId);
+    });
+    if (buildConditionals.BUILD.shadowDom && shadowRoot) {
+        shadowRootNodes.forEach(shadowRootNode => {
+            if (shadowRootNode) {
+                shadowRoot.appendChild(shadowRootNode);
+            }
+        });
+    }
+    endHydrate();
+};
+const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
+    let childNodeType;
+    let childIdSplt;
+    let childVNode;
+    let i;
+    if (node.nodeType === 1 /* ElementNode */) {
+        childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+        if (childNodeType) {
+            // got the node data from the element's attribute
+            // `${hostId}.${nodeId}.${depth}.${index}`
+            childIdSplt = childNodeType.split('.');
+            if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
+                childVNode = {
+                    $flags$: 0,
+                    $hostId$: childIdSplt[0],
+                    $nodeId$: childIdSplt[1],
+                    $depth$: childIdSplt[2],
+                    $index$: childIdSplt[3],
+                    $tag$: node.tagName.toLowerCase(),
+                    $elm$: node,
+                    $attrs$: null,
+                    $children$: null,
+                    $key$: null,
+                    $name$: null,
+                    $text$: null
+                };
+                childRenderNodes.push(childVNode);
+                node.removeAttribute(HYDRATE_CHILD_ID);
+                // this is a new child vnode
+                // so ensure its parent vnode has the vchildren array
+                if (!parentVNode.$children$) {
+                    parentVNode.$children$ = [];
+                }
+                // add our child vnode to a specific index of the vnode's children
+                parentVNode.$children$[childVNode.$index$] = childVNode;
+                // this is now the new parent vnode for all the next child checks
+                parentVNode = childVNode;
+                if (shadowRootNodes && childVNode.$depth$ === '0') {
+                    shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                }
+            }
+        }
+        // recursively drill down, end to start so we can remove nodes
+        for (i = node.childNodes.length - 1; i >= 0; i--) {
+            clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
+        }
+        if (node.shadowRoot) {
+            // keep drilling down through the shadow root nodes
+            for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
+                clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* CommentNode */) {
+        // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
+        childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
+            // comment node for either the host id or a 0 host id
+            childNodeType = childIdSplt[0];
+            childVNode = {
+                $flags$: 0,
+                $hostId$: childIdSplt[1],
+                $nodeId$: childIdSplt[2],
+                $depth$: childIdSplt[3],
+                $index$: childIdSplt[4],
+                $elm$: node,
+                $attrs$: null,
+                $children$: null,
+                $key$: null,
+                $name$: null,
+                $tag$: null,
+                $text$: null
+            };
+            if (childNodeType === TEXT_NODE_ID) {
+                childVNode.$elm$ = node.nextSibling;
+                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
+                    childVNode.$text$ = childVNode.$elm$.textContent;
+                    childRenderNodes.push(childVNode);
+                    // remove the text comment since it's no longer needed
+                    node.remove();
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                    if (shadowRootNodes && childVNode.$depth$ === '0') {
+                        shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                    }
+                }
+            }
+            else if (childVNode.$hostId$ === hostId) {
+                // this comment node is specifcally for this host id
+                if (childNodeType === SLOT_NODE_ID) {
+                    // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
+                    childVNode.$tag$ = 'slot';
+                    if (childIdSplt[5]) {
+                        node['s-sn'] = childVNode.$name$ = childIdSplt[5];
+                    }
+                    else {
+                        node['s-sn'] = '';
+                    }
+                    node['s-sr'] = true;
+                    if (buildConditionals.BUILD.shadowDom && shadowRootNodes) {
+                        // browser support shadowRoot and this is a shadow dom component
+                        // create an actual slot element
+                        childVNode.$elm$ = platform.doc.createElement(childVNode.$tag$);
+                        if (childVNode.$name$) {
+                            // add the slot name attribute
+                            childVNode.$elm$.setAttribute('name', childVNode.$name$);
+                        }
+                        // insert the new slot element before the slot comment
+                        node.parentNode.insertBefore(childVNode.$elm$, node);
+                        // remove the slot comment since it's not needed for shadow
+                        node.remove();
+                        if (childVNode.$depth$ === '0') {
+                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                        }
+                    }
+                    slotNodes.push(childVNode);
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                }
+                else if (childNodeType === CONTENT_REF_ID) {
+                    // `${CONTENT_REF_ID}.${hostId}`;
+                    if (buildConditionals.BUILD.shadowDom && shadowRootNodes) {
+                        // remove the content ref comment since it's not needed for shadow
+                        node.remove();
+                    }
+                    else if (buildConditionals.BUILD.slotRelocation) {
+                        hostElm['s-cr'] = node;
+                        node['s-cn'] = true;
+                    }
+                }
+            }
+        }
+    }
+    else if (parentVNode && parentVNode.$tag$ === 'style') {
+        const vnode = newVNode(null, node.textContent);
+        vnode.$elm$ = node;
+        vnode.$index$ = '0';
+        parentVNode.$children$ = [vnode];
+    }
+};
+const initializeDocumentHydrate = (node, orgLocNodes) => {
+    if (node.nodeType === 1 /* ElementNode */) {
+        let i = 0;
+        for (; i < node.childNodes.length; i++) {
+            initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
+        }
+        if (node.shadowRoot) {
+            for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
+                initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* CommentNode */) {
+        const childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[0] === ORG_LOCATION_ID) {
+            orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
+            node.nodeValue = '';
+            // useful to know if the original location is
+            // the root light-dom of a shadow dom component
+            node['s-en'] = childIdSplt[3];
+        }
+    }
+};
+
+const parsePropertyValue = (propValue, propType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && !utils.isComplexType(propValue)) {
+        if (buildConditionals.BUILD.propBoolean && propType & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return (propValue === 'false' ? false : propValue === '' || !!propValue);
+        }
+        if (buildConditionals.BUILD.propNumber && propType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (buildConditionals.BUILD.propString && propType & 1 /* String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+
+const getValue = (ref, propName) => platform.getHostRef(ref).$instanceValues$.get(propName);
+const setValue = (ref, propName, newVal, cmpMeta) => {
+    // check our new property value against our internal value
+    const hostRef = platform.getHostRef(ref);
+    const elm = buildConditionals.BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
+    const oldVal = hostRef.$instanceValues$.get(propName);
+    const flags = hostRef.$flags$;
+    const instance = buildConditionals.BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+    newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+    if (newVal !== oldVal && (!buildConditionals.BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === undefined)) {
+        // gadzooks! the property's value has changed!!
+        // set our new value!
+        hostRef.$instanceValues$.set(propName, newVal);
+        if (buildConditionals.BUILD.isDev) {
+            if (hostRef.$flags$ & 1024 /* devOnRender */) {
+                platform.consoleDevWarn(`The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`, '\nElement', elm, '\nNew value', newVal, '\nOld value', oldVal);
+            }
+            else if (hostRef.$flags$ & 2048 /* devOnDidLoad */) {
+                platform.consoleDevWarn(`The state/prop "${propName}" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()"`, '\nElement', elm, '\nNew value', newVal, '\nOld value', oldVal);
+            }
+        }
+        if (!buildConditionals.BUILD.lazyLoad || instance) {
+            // get an array of method names of watch functions to call
+            if (buildConditionals.BUILD.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.forEach(watchMethodName => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            platform.consoleError(e);
+                        }
+                    });
+                }
+            }
+            if (buildConditionals.BUILD.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+                if (buildConditionals.BUILD.cmpShouldUpdate && instance.componentShouldUpdate) {
+                    if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+                        return;
+                    }
+                }
+                // looks like this value actually changed, so we've got work to do!
+                // but only if we've already rendered, otherwise just chill out
+                // queue that we need to do an update, but don't worry about queuing
+                // up millions cuz this function ensures it only runs once
+                scheduleUpdate(elm, hostRef, cmpMeta, false);
+            }
+        }
+    }
+};
+
+const proxyComponent = (Cstr, cmpMeta, flags) => {
+    if (buildConditionals.BUILD.member && cmpMeta.$members$) {
+        if (buildConditionals.BUILD.watchCallback && Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
+        // 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]]) => {
+            if ((buildConditionals.BUILD.prop || buildConditionals.BUILD.state) && ((memberFlags & 31 /* Prop */) ||
+                ((!buildConditionals.BUILD.lazyLoad || flags & 2 /* proxyState */) &&
+                    (memberFlags & 32 /* State */)))) {
+                // proxyComponent - prop
+                Object.defineProperty(prototype, memberName, {
+                    get() {
+                        // proxyComponent, get value
+                        return getValue(this, memberName);
+                    },
+                    set(newValue) {
+                        if (
+                        // only during dev time
+                        (buildConditionals.BUILD.isDev) &&
+                            // we are proxing the instance (not element)
+                            (flags & 1 /* isElementConstructor */) === 0 &&
+                            // the member is a non-mutable prop
+                            (memberFlags & (31 /* Prop */ | 1024 /* Mutable */)) === 31 /* Prop */) {
+                            platform.consoleDevWarn(`@Prop() "${memberName}" on "${cmpMeta.$tagName$}" cannot be modified.\nFurther information: https://rindojs.web.app/docs/properties#prop-mutability`);
+                        }
+                        // proxyComponent, set value
+                        setValue(this, memberName, newValue, cmpMeta);
+                    },
+                    configurable: true,
+                    enumerable: true
+                });
+            }
+            else if (buildConditionals.BUILD.lazyLoad && buildConditionals.BUILD.method && (flags & 1 /* isElementConstructor */) && (memberFlags & 64 /* Method */)) {
+                // proxyComponent - method
+                Object.defineProperty(prototype, memberName, {
+                    value(...args) {
+                        const ref = platform.getHostRef(this);
+                        return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
+                    }
+                });
+            }
+        });
+        if (buildConditionals.BUILD.observeAttribute && (!buildConditionals.BUILD.lazyLoad || flags & 1 /* isElementConstructor */)) {
+            const attrNameToPropName = new Map();
+            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+                platform.plt.jmp(() => {
+                    const propName = attrNameToPropName.get(attrName);
+                    this[propName] = newValue === null && typeof this[propName] === 'boolean'
+                        ? false
+                        : newValue;
+                });
+            };
+            // create an array of attributes to observe
+            // and also create a map of html attribute name to js property name
+            Cstr.observedAttributes = members
+                .filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
+                .map(([propName, m]) => {
+                const attrName = m[1] || propName;
+                attrNameToPropName.set(attrName, propName);
+                if (buildConditionals.BUILD.reflect && m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
+                return attrName;
+            });
+        }
+    }
+    return Cstr;
+};
+
+const modeResolutionChain = [];
+const computeMode = (elm) => modeResolutionChain.map(h => h(elm)).find(m => !!m);
+// Public
+const setMode = (handler) => modeResolutionChain.push(handler);
+const getMode = (ref) => platform.getHostRef(ref).$modeName$;
+
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+    // initializeComponent
+    if ((buildConditionals.BUILD.lazyLoad || buildConditionals.BUILD.style) && (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
+        // we haven't initialized this element yet
+        hostRef.$flags$ |= 32 /* hasInitializedComponent */;
+        if (buildConditionals.BUILD.mode && hostRef.$modeName$ == null) {
+            // initializeComponent
+            // looks like mode wasn't set as a property directly yet
+            // first check if there's an attribute
+            // next check the app's global
+            hostRef.$modeName$ = typeof cmpMeta.$lazyBundleIds$ !== 'string' ? computeMode(elm) : '';
+        }
+        if (buildConditionals.BUILD.hydrateServerSide && hostRef.$modeName$) {
+            elm.setAttribute('s-mode', hostRef.$modeName$);
+        }
+        if (buildConditionals.BUILD.lazyLoad) {
+            // lazy loaded components
+            // request the component's implementation to be
+            // wired up with the host element
+            Cstr = platform.loadModule(cmpMeta, hostRef, hmrVersionId);
+            if (Cstr.then) {
+                // Await creates a micro-task avoid if possible
+                const endLoad = uniqueTime(`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`, `[Rindo] Load module for <${cmpMeta.$tagName$}>`);
+                Cstr = await Cstr;
+                endLoad();
+            }
+            if ((buildConditionals.BUILD.isDev || buildConditionals.BUILD.isDebug) && !Cstr) {
+                throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+            }
+            if (buildConditionals.BUILD.member && !Cstr.isProxied) {
+                // we'eve never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                if (buildConditionals.BUILD.watchCallback) {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
+                proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
+                Cstr.isProxied = true;
+            }
+            const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);
+            // 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
+            if (buildConditionals.BUILD.member) {
+                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) {
+                platform.consoleError(e);
+            }
+            if (buildConditionals.BUILD.member) {
+                hostRef.$flags$ &= ~8 /* isConstructingInstance */;
+            }
+            if (buildConditionals.BUILD.watchCallback) {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
+            endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
+        else {
+            Cstr = elm.constructor;
+        }
+        const scopeId = buildConditionals.BUILD.mode ? getScopeId(cmpMeta.$tagName$, hostRef.$modeName$) : getScopeId(cmpMeta.$tagName$);
+        if (buildConditionals.BUILD.style && !platform.styles.has(scopeId) && Cstr.style) {
+            const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
+            // this component has styles but we haven't registered them yet
+            let style = Cstr.style;
+            if (buildConditionals.BUILD.mode && typeof style !== 'string') {
+                style = style[hostRef.$modeName$];
+            }
+            if (!buildConditionals.BUILD.hydrateServerSide && buildConditionals.BUILD.shadowDom && buildConditionals.BUILD.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+                style = await new Promise(function (resolve) { resolve(require('./shadow-css-8fd1a9e4.js')); }).then(m => m.scopeCss(style, scopeId, false));
+            }
+            registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
+            endRegisterStyles();
+        }
+    }
+    // we've successfully created a lazy instance
+    const ancestorComponent = hostRef.$ancestorComponent$;
+    const schedule = () => scheduleUpdate(elm, hostRef, cmpMeta, true);
+    if (buildConditionals.BUILD.asyncLoading && ancestorComponent && 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
+        // this will get fired off when the ancestor component
+        // finally gets around to rendering its lazy self
+        // fire off the initial update
+        ancestorComponent['s-rc'].push(schedule);
+    }
+    else {
+        schedule();
+    }
+};
+
+const fireConnectedCallback = (instance) => {
+    if (buildConditionals.BUILD.lazyLoad && buildConditionals.BUILD.connectedCallback) {
+        safeCall(instance, 'connectedCallback');
+    }
+};
+const connectedCallback = (elm, cmpMeta) => {
+    if ((platform.plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
+        // connectedCallback
+        const hostRef = platform.getHostRef(elm);
+        if (buildConditionals.BUILD.hostListener && 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 */;
+            let hostId;
+            if (buildConditionals.BUILD.hydrateClientSide) {
+                hostId = elm.getAttribute(HYDRATE_ID);
+                if (hostId) {
+                    if (buildConditionals.BUILD.shadowDom && platform.supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                        const scopeId = buildConditionals.BUILD.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode')) : addStyle(elm.shadowRoot, cmpMeta);
+                        elm.classList.remove(scopeId + '-h', scopeId + '-s');
+                    }
+                    initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
+                }
+            }
+            if (buildConditionals.BUILD.slotRelocation && !hostId) {
+                // initUpdate
+                // if the slot polyfill is required we'll need to put some nodes
+                // in here to act as original content anchors as we move nodes around
+                // host element has been connected to the DOM
+                if ((buildConditionals.BUILD.hydrateServerSide) ||
+                    (buildConditionals.BUILD.slot && cmpMeta.$flags$ & 4 /* hasSlotRelocation */) ||
+                    (buildConditionals.BUILD.shadowDom && cmpMeta.$flags$ & 8 /* needsShadowDomShim */)) {
+                    setContentReference(elm);
+                }
+            }
+            if (buildConditionals.BUILD.asyncLoading) {
+                // 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 ((buildConditionals.BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id')) ||
+                        (ancestorComponent['s-p'])) {
+                        // we found this components first ancestor component
+                        // keep a reference to this component's ancestor component
+                        attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
+                        break;
+                    }
+                }
+            }
+            // Lazy properties
+            // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+            if (buildConditionals.BUILD.prop && buildConditionals.BUILD.lazyLoad && !buildConditionals.BUILD.hydrateServerSide && cmpMeta.$members$) {
+                Object.entries(cmpMeta.$members$).forEach(([memberName, [memberFlags]]) => {
+                    if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+                        const value = elm[memberName];
+                        delete elm[memberName];
+                        elm[memberName] = value;
+                    }
+                });
+            }
+            if (buildConditionals.BUILD.initializeNextTick) {
+                // connectedCallback, taskQueue, initialLoad
+                // angular sets attribute AFTER connectCallback
+                // https://github.com/angular/angular/issues/18909
+                // https://github.com/angular/angular/issues/19940
+                platform.nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
+            }
+            else {
+                initializeComponent(elm, hostRef, cmpMeta);
+            }
+        }
+        fireConnectedCallback(hostRef.$lazyInstance$);
+        endConnected();
+    }
+};
+const setContentReference = (elm) => {
+    // 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
+    const contentRefElm = elm['s-cr'] = platform.doc.createComment(buildConditionals.BUILD.isDebug
+        ? `content-ref (host=${elm.localName})`
+        : '');
+    contentRefElm['s-cn'] = true;
+    elm.insertBefore(contentRefElm, elm.firstChild);
+};
+
+const disconnectedCallback = (elm) => {
+    if ((platform.plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
+        const hostRef = platform.getHostRef(elm);
+        const instance = buildConditionals.BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+        if (buildConditionals.BUILD.hostListener) {
+            if (hostRef.$rmListeners$) {
+                hostRef.$rmListeners$();
+                hostRef.$rmListeners$ = undefined;
+            }
+        }
+        // clear CSS var-shim tracking
+        if (buildConditionals.BUILD.cssVarShim && platform.plt.$cssShim$) {
+            platform.plt.$cssShim$.removeHost(elm);
+        }
+        if (buildConditionals.BUILD.lazyLoad && buildConditionals.BUILD.disconnectedCallback) {
+            safeCall(instance, 'disconnectedCallback');
+        }
+        if (buildConditionals.BUILD.cmpDidUnload) {
+            safeCall(instance, 'componentDidUnload');
+        }
+    }
+};
+
+function hmrStart(elm, cmpMeta, hmrVersionId) {
+    // ¯\_(ツ)_/¯
+    const hostRef = platform.getHostRef(elm);
+    // reset state flags to only have been connected
+    hostRef.$flags$ = 1 /* hasConnected */;
+    // TODO
+    // detatch any event listeners that may have been added
+    // because we're not passing an exact event name it'll
+    // remove all of this element's event, which is good
+    // create a callback for when this component finishes hmr
+    elm['s-hmr-load'] = () => {
+        // finished hmr for this element
+        delete elm['s-hmr-load'];
+    };
+    // re-initialize the component
+    initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
+}
+
+const bootstrapLazy = (lazyBundles, options = {}) => {
+    if (buildConditionals.BUILD.profile) {
+        performance.mark('st:app:start');
+    }
+    installDevTools();
+    const endBootstrap = createTime('bootstrapLazy');
+    const cmpTags = [];
+    const exclude = options.exclude || [];
+    const customElements = platform.win.customElements;
+    const head = platform.doc.head;
+    const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
+    const visibilityStyle = /*@__PURE__*/ platform.doc.createElement('style');
+    const deferredConnectedCallbacks = [];
+    const styles = /*@__PURE__*/ platform.doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
+    let appLoadFallback;
+    let isBootstrapping = true;
+    let i = 0;
+    Object.assign(platform.plt, options);
+    platform.plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', platform.doc.baseURI).href;
+    if (options.syncQueue) {
+        platform.plt.$flags$ |= 4 /* queueSync */;
+    }
+    if (buildConditionals.BUILD.hydrateClientSide) {
+        // If the app is already hydrated there is not point to disable the
+        // async queue. This will improve the first input delay
+        platform.plt.$flags$ |= 2 /* appLoaded */;
+    }
+    if (buildConditionals.BUILD.hydrateClientSide && buildConditionals.BUILD.shadowDom) {
+        for (; i < styles.length; i++) {
+            registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
+        }
+    }
+    lazyBundles.forEach(lazyBundle => lazyBundle[1].forEach(compactMeta => {
+        const cmpMeta = {
+            $flags$: compactMeta[0],
+            $tagName$: compactMeta[1],
+            $members$: compactMeta[2],
+            $listeners$: compactMeta[3],
+        };
+        if (buildConditionals.BUILD.member) {
+            cmpMeta.$members$ = compactMeta[2];
+        }
+        if (buildConditionals.BUILD.hostListener) {
+            cmpMeta.$listeners$ = compactMeta[3];
+        }
+        if (buildConditionals.BUILD.reflect) {
+            cmpMeta.$attrsToReflect$ = [];
+        }
+        if (buildConditionals.BUILD.watchCallback) {
+            cmpMeta.$watchers$ = {};
+        }
+        if (buildConditionals.BUILD.shadowDom && !platform.supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+        }
+        const tagName = cmpMeta.$tagName$;
+        const HostElement = class extends HTMLElement {
+            // RindoLazyHost
+            constructor(self) {
+                // @ts-ignore
+                super(self);
+                self = this;
+                platform.registerHost(self);
+                if (buildConditionals.BUILD.shadowDom && 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
+                    // adding the shadow root build conditionals to minimize runtime
+                    if (platform.supportsShadowDom) {
+                        if (buildConditionals.BUILD.shadowDelegatesFocus) {
+                            self.attachShadow({
+                                mode: 'open',
+                                delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */),
+                            });
+                        }
+                        else {
+                            self.attachShadow({ mode: 'open' });
+                        }
+                    }
+                    else if (!buildConditionals.BUILD.hydrateServerSide && !('shadowRoot' in self)) {
+                        self.shadowRoot = self;
+                    }
+                }
+            }
+            connectedCallback() {
+                if (appLoadFallback) {
+                    clearTimeout(appLoadFallback);
+                    appLoadFallback = null;
+                }
+                if (isBootstrapping) {
+                    // connectedCallback will be processed once all components have been registered
+                    deferredConnectedCallbacks.push(this);
+                }
+                else {
+                    platform.plt.jmp(() => connectedCallback(this, cmpMeta));
+                }
+            }
+            disconnectedCallback() {
+                platform.plt.jmp(() => disconnectedCallback(this));
+            }
+            forceUpdate() {
+                forceUpdate(this, cmpMeta);
+            }
+            componentOnReady() {
+                return platform.getHostRef(this).$onReadyPromise$;
+            }
+        };
+        if (buildConditionals.BUILD.cloneNodeFix) {
+            cloneNodeFix(HostElement.prototype);
+        }
+        if (buildConditionals.BUILD.appendChildSlotFix) {
+            appendChildSlotFix(HostElement.prototype);
+        }
+        if (buildConditionals.BUILD.hotModuleReplacement) {
+            HostElement.prototype['s-hmr'] = function (hmrVersionId) {
+                hmrStart(this, cmpMeta, hmrVersionId);
+            };
+        }
+        cmpMeta.$lazyBundleIds$ = lazyBundle[0];
+        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+            cmpTags.push(tagName);
+            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
+        }
+    }));
+    if (buildConditionals.BUILD.hydratedClass || buildConditionals.BUILD.hydratedAttribute) {
+        visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
+        visibilityStyle.setAttribute('data-styles', '');
+        head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
+    }
+    // Process deferred connectedCallbacks now all components have been registered
+    isBootstrapping = false;
+    if (deferredConnectedCallbacks.length > 0) {
+        deferredConnectedCallbacks.forEach(host => host.connectedCallback());
+    }
+    else {
+        if (buildConditionals.BUILD.profile) {
+            platform.plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30, 'timeout'));
+        }
+        else {
+            platform.plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
+        }
+    }
+    // Fallback appLoad event
+    endBootstrap();
+};
+
+const defineCustomElement = (Cstr, compactMeta) => {
+    customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
+};
+const proxyCustomElement = (Cstr, compactMeta) => {
+    const cmpMeta = {
+        $flags$: compactMeta[0],
+        $tagName$: compactMeta[1],
+    };
+    if (buildConditionals.BUILD.member) {
+        cmpMeta.$members$ = compactMeta[2];
+    }
+    if (buildConditionals.BUILD.hostListener) {
+        cmpMeta.$listeners$ = compactMeta[3];
+    }
+    if (buildConditionals.BUILD.watchCallback) {
+        cmpMeta.$watchers$ = Cstr.$watchers$;
+    }
+    if (buildConditionals.BUILD.reflect) {
+        cmpMeta.$attrsToReflect$ = [];
+    }
+    if (buildConditionals.BUILD.shadowDom && !platform.supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+        cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+    }
+    Object.assign(Cstr.prototype, {
+        forceUpdate() {
+            forceUpdate(this, cmpMeta);
+        },
+        connectedCallback() {
+            connectedCallback(this, cmpMeta);
+        },
+        disconnectedCallback() {
+            disconnectedCallback(this);
+        }
+    });
+    return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
+};
+
+const attachShadow = (el) => {
+    if (platform.supportsShadowDom) {
+        el.attachShadow({ mode: 'open' });
+    }
+    else {
+        el.shadowRoot = el;
+    }
+};
+const proxyNative = (Cstr, compactMeta) => {
+    const cmpMeta = {
+        $flags$: compactMeta[0],
+        $tagName$: compactMeta[1],
+        $members$: compactMeta[2],
+        $listeners$: compactMeta[3],
+        $watchers$: Cstr.$watchers$
+    };
+    if (buildConditionals.BUILD.reflect) {
+        cmpMeta.$attrsToReflect$ = [];
+    }
+    if (buildConditionals.BUILD.shadowDom && !platform.supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+        cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+    }
+    Object.assign(Cstr.prototype, {
+        forceUpdate() {
+            forceUpdate(this, cmpMeta);
+        },
+        connectedCallback() {
+            connectedCallback(this, cmpMeta);
+        },
+        disconnectedCallback() {
+            disconnectedCallback(this);
+        }
+    });
+    return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
+};
+
+const createEvent = (ref, name, flags) => {
+    const elm = platform.getElement(ref);
+    return {
+        emit: (detail) => {
+            if (buildConditionals.BUILD.isDev && !elm.isConnected) {
+                platform.consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
+            }
+            const ev = new (buildConditionals.BUILD.hydrateServerSide ? platform.win.CustomEvent : CustomEvent)(name, {
+                bubbles: !!(flags & 4 /* Bubbles */),
+                composed: !!(flags & 2 /* Composed */),
+                cancelable: !!(flags & 1 /* Cancellable */),
+                detail
+            });
+            elm.dispatchEvent(ev);
+            return ev;
+        }
+    };
+};
+
+const getAssetPath = (path) => {
+    const assetUrl = new URL(path, platform.plt.$resourcesUrl$);
+    return (assetUrl.origin !== platform.win.location.origin)
+        ? assetUrl.href
+        : assetUrl.pathname;
+};
+
+const getConnect = (_ref, tagName) => {
+    const componentOnReady = () => {
+        let elm = platform.doc.querySelector(tagName);
+        if (!elm) {
+            elm = platform.doc.createElement(tagName);
+            platform.doc.body.appendChild(elm);
+        }
+        return typeof elm.componentOnReady === 'function' ? elm.componentOnReady() : Promise.resolve(elm);
+    };
+    const create = (...args) => {
+        return componentOnReady()
+            .then(el => el.create(...args));
+    };
+    return {
+        create,
+        componentOnReady,
+    };
+};
+
+const getContext = (_elm, context) => {
+    if (context in platform.Context) {
+        return platform.Context[context];
+    }
+    else if (context === 'window') {
+        return platform.win;
+    }
+    else if (context === 'document') {
+        return platform.doc;
+    }
+    else if (context === 'isServer' || context === 'isPrerender') {
+        return buildConditionals.BUILD.hydrateServerSide ? true : false;
+    }
+    else if (context === 'isClient') {
+        return buildConditionals.BUILD.hydrateServerSide ? false : true;
+    }
+    else if (context === 'resourcesUrl' || context === 'publicPath') {
+        return platform.getAssetPath('.');
+    }
+    else if (context === 'queue') {
+        return {
+            write: platform.writeTask,
+            read: platform.readTask,
+            tick: {
+                then(cb) {
+                    return platform.nextTick(cb);
+                }
+            }
+        };
+    }
+    return undefined;
+};
+
+const getElement = (ref) => buildConditionals.BUILD.lazyLoad ? platform.getHostRef(ref).$hostElement$ : ref;
+
+const insertVdomAnnotations = (doc) => {
+    if (doc != null) {
+        const docData = {
+            hostIds: 0,
+            rootLevelIds: 0
+        };
+        const orgLocationNodes = [];
+        parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
+        orgLocationNodes.forEach(orgLocationNode => {
+            if (orgLocationNode != null) {
+                const nodeRef = orgLocationNode['s-nr'];
+                let hostId = nodeRef['s-host-id'];
+                let nodeId = nodeRef['s-node-id'];
+                let childId = `${hostId}.${nodeId}`;
+                if (hostId == null) {
+                    hostId = 0;
+                    docData.rootLevelIds++;
+                    nodeId = docData.rootLevelIds;
+                    childId = `${hostId}.${nodeId}`;
+                    if (nodeRef.nodeType === 1 /* ElementNode */) {
+                        nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
+                    }
+                    else if (nodeRef.nodeType === 3 /* TextNode */) {
+                        if (hostId === 0) {
+                            const textContent = nodeRef.nodeValue.trim();
+                            if (textContent === '') {
+                                // useless whitespace node at the document root
+                                orgLocationNode.remove();
+                                return;
+                            }
+                        }
+                        const commentBeforeTextNode = doc.createComment(childId);
+                        commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
+                        nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
+                    }
+                }
+                let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
+                const orgLocationParentNode = orgLocationNode.parentElement;
+                if (orgLocationParentNode) {
+                    if (orgLocationParentNode['s-en'] === '') {
+                        // ending with a "." means that the parent element
+                        // of this node's original location is a SHADOW dom element
+                        // and this node is apart of the root level light dom
+                        orgLocationNodeId += `.`;
+                    }
+                    else if (orgLocationParentNode['s-en'] === 'c') {
+                        // ending with a ".c" means that the parent element
+                        // of this node's original location is a SCOPED element
+                        // and this node is apart of the root level light dom
+                        orgLocationNodeId += `.c`;
+                    }
+                }
+                orgLocationNode.nodeValue = orgLocationNodeId;
+            }
+        });
+    }
+};
+const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
+    if (node == null) {
+        return;
+    }
+    if (node['s-nr'] != null) {
+        orgLocationNodes.push(node);
+    }
+    if (node.nodeType === 1 /* ElementNode */) {
+        node.childNodes.forEach(childNode => {
+            const hostRef = platform.getHostRef(childNode);
+            if (hostRef != null) {
+                const cmpData = {
+                    nodeIds: 0
+                };
+                insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData);
+            }
+            parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
+        });
+    }
+};
+const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
+    if (vnode != null) {
+        const hostId = ++docData.hostIds;
+        hostElm.setAttribute(HYDRATE_ID, hostId);
+        if (hostElm['s-cr'] != null) {
+            hostElm['s-cr'].nodeValue = `${CONTENT_REF_ID}.${hostId}`;
+        }
+        if (vnode.$children$ != null) {
+            const depth = 0;
+            vnode.$children$.forEach((vnodeChild, index) => {
+                insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
+            });
+        }
+    }
+};
+const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
+    const childElm = vnodeChild.$elm$;
+    if (childElm == null) {
+        return;
+    }
+    const nodeId = cmpData.nodeIds++;
+    const childId = `${hostId}.${nodeId}.${depth}.${index}`;
+    childElm['s-host-id'] = hostId;
+    childElm['s-node-id'] = nodeId;
+    if (childElm.nodeType === 1 /* ElementNode */) {
+        childElm.setAttribute(HYDRATE_CHILD_ID, childId);
+    }
+    else if (childElm.nodeType === 3 /* TextNode */) {
+        const parentNode = childElm.parentNode;
+        if (parentNode.nodeName !== 'STYLE') {
+            const textNodeId = `${TEXT_NODE_ID}.${childId}`;
+            const commentBeforeTextNode = doc.createComment(textNodeId);
+            parentNode.insertBefore(commentBeforeTextNode, childElm);
+        }
+    }
+    else if (childElm.nodeType === 8 /* CommentNode */) {
+        if (childElm['s-sr']) {
+            const slotName = (childElm['s-sn'] || '');
+            const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;
+            childElm.nodeValue = slotNodeId;
+        }
+    }
+    if (vnodeChild.$children$ != null) {
+        const childDepth = depth + 1;
+        vnodeChild.$children$.forEach((vnode, index) => {
+            insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index);
+        });
+    }
+};
+
+exports.Host = Host;
+exports.attachShadow = attachShadow;
+exports.bootstrapLazy = bootstrapLazy;
+exports.connectedCallback = connectedCallback;
+exports.createEvent = createEvent;
+exports.defineCustomElement = defineCustomElement;
+exports.disconnectedCallback = disconnectedCallback;
+exports.forceUpdate = forceUpdate;
+exports.getAssetPath = getAssetPath;
+exports.getConnect = getConnect;
+exports.getContext = getContext;
+exports.getElement = getElement;
+exports.getMode = getMode;
+exports.getRenderingElement = getRenderingElement;
+exports.getValue = getValue;
+exports.h = h;
+exports.insertVdomAnnotations = insertVdomAnnotations;
+exports.parsePropertyValue = parsePropertyValue;
+exports.postUpdateComponent = postUpdateComponent;
+exports.proxyComponent = proxyComponent;
+exports.proxyCustomElement = proxyCustomElement;
+exports.proxyNative = proxyNative;
+exports.renderVdom = renderVdom;
+exports.setMode = setMode;
+exports.setValue = setValue;