@rindo/core 1.8.12 → 2.5.2

package/{dist/client/index.mjs → internal/client/index.js}

@@ -1,15 +1,19 @@
-import { BUILD, NAMESPACE } from '@rindo/core/build-conditionals';
-let queueCongestion = 0;
-let queuePending = false;
-let i = 0;
 let scopeId;
 let contentRef;
 let hostTagName;
+let customError;
+let i = 0;
 let useNativeShadowDom = false;
 let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
 let isSvgMode = false;
-let renderingElement = null;
+let renderingRef = null;
+let queueCongestion = 0;
+let queuePending = false;
+/*
+ Rindo Client Platform v2.5.2 | MIT Licensed | https://rindojs.web.app
+ */
+import { BUILD, NAMESPACE } from '@rindo/core/internal/app-data';
 const win = typeof window !== 'undefined' ? window : {};
 const CSS = BUILD.cssVarShim ? win.CSS : null;
 const doc = win.document || { head: {} };
@@ -18,297 +22,106 @@ const H = (win.HTMLElement || class {
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
-    jmp: (h) => h(),
-    raf: (h) => requestAnimationFrame(h),
+    jmp: h => h(),
+    raf: h => requestAnimationFrame(h),
     ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
     rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+    ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
-const supportsShadowDom = BUILD.shadowDomShim ? (BUILD.shadowDom) ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() : false : true;
+const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom
+    ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
+    : true;
 const supportsListenerOptions = /*@__PURE__*/ (() => {
     let supportsListenerOptions = false;
     try {
         doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
-            get() { supportsListenerOptions = true; }
+            get() {
+                supportsListenerOptions = true;
+            },
         }));
     }
     catch (e) { }
     return supportsListenerOptions;
 })();
 const promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructibleStylesheets = BUILD.constructableCSS ? /*@__PURE__*/ (() => {
-    try {
-        new CSSStyleSheet();
-        return true;
-    }
-    catch (e) { }
-    return false;
-})() : false;
-const Context = {};
-const hostRefs = new WeakMap();
-const getHostRef = (ref) => hostRefs.get(ref);
-const registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
-const registerHost = (elm) => {
-    const hostRef = {
-        $flags$: 0,
-        $hostElement$: elm,
-        $instanceValues$: new Map()
-    };
-    if (BUILD.isDev) {
-        hostRef.$renderCount$ = 0;
-    }
-    if (BUILD.method && BUILD.lazyLoad) {
-        hostRef.$onInstancePromise$ = new Promise(r => hostRef.$onInstanceResolve$ = r);
-    }
-    if (BUILD.asyncLoading) {
-        hostRef.$onReadyPromise$ = new Promise(r => hostRef.$onReadyResolve$ = r);
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
-    }
-    return hostRefs.set(elm, hostRef);
-};
-const isMemberInElement = (elm, memberName) => memberName in elm;
-const RINDO_DEV_MODE = ['%c[RINDO-DEV-MODE]', 'color:#4c47ff;font-weight: bold'];
-const consoleDevError = (...m) => console.error(...RINDO_DEV_MODE, ...m);
-const consoleDevWarn = (...m) => console.warn(...RINDO_DEV_MODE, ...m);
-const consoleDevInfo = (...m) => console.info(...RINDO_DEV_MODE, ...m);
-const consoleError = (e) => console.error(e);
-const moduleCache = /*@__PURE__*/ new Map();
-const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
-    // loadModuleImport
-    const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
-    const bundleId = ((BUILD.mode && typeof cmpMeta.$lazyBundleIds$ !== 'string')
-        ? cmpMeta.$lazyBundleIds$[hostRef.$modeName$]
-        : cmpMeta.$lazyBundleIds$);
-    const module = !BUILD.hotModuleReplacement ? moduleCache.get(bundleId) : false;
-    if (module) {
-        return module[exportName];
-    }
-    return import(
-    /* webpackInclude: /\.entry\.js$/ */
-    /* webpackExclude: /\.system\.entry\.js$/ */
-    /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`).then(importedModule => {
-        if (!BUILD.hotModuleReplacement) {
-            moduleCache.set(bundleId, importedModule);
-        }
-        return importedModule[exportName];
-    }, consoleError);
-};
-const styles = new Map();
-const queueDomReads = [];
-const queueDomWrites = [];
-const queueDomWritesLow = [];
-const queueTask = (queue, write) => (cb) => {
-    queue.push(cb);
-    if (!queuePending) {
-        queuePending = true;
-        if (write && plt.$flags$ & 4 /* queueSync */) {
-            nextTick(flush);
-        }
-        else {
-            plt.raf(flush);
-        }
-    }
-};
-const consume = (queue) => {
-    for (let i = 0; i < queue.length; i++) {
-        try {
-            queue[i](performance.now());
-        }
-        catch (e) {
-            consoleError(e);
-        }
-    }
-    queue.length = 0;
-};
-const consumeTimeout = (queue, timeout) => {
-    let i = 0;
-    let ts = 0;
-    while (i < queue.length && (ts = performance.now()) < timeout) {
+const supportsConstructibleStylesheets = BUILD.constructableCSS
+    ? /*@__PURE__*/ (() => {
         try {
-            queue[i++](ts);
-        }
-        catch (e) {
-            consoleError(e);
+            new CSSStyleSheet();
+            return typeof new CSSStyleSheet().replace === 'function';
         }
-    }
-    if (i === queue.length) {
-        queue.length = 0;
-    }
-    else if (i !== 0) {
-        queue.splice(0, i);
-    }
-};
-const flush = () => {
-    queueCongestion++;
-    // always force a bunch of medium callbacks to run, but still have
-    // a throttle on how many can run in a certain time
-    // DOM READS!!!
-    consume(queueDomReads);
-    const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
-        ? performance.now() + (10 * Math.ceil(queueCongestion * (1.0 / 22.0)))
-        : Infinity;
-    // DOM WRITES!!!
-    consumeTimeout(queueDomWrites, timeout);
-    consumeTimeout(queueDomWritesLow, timeout);
-    if (queueDomWrites.length > 0) {
-        queueDomWritesLow.push(...queueDomWrites);
-        queueDomWrites.length = 0;
-    }
-    if (queuePending = ((queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length) > 0)) {
-        // still more to do yet, but we've run out of time
-        // let's let this thing cool off and try again in the next tick
-        plt.raf(flush);
-    }
-    else {
-        queueCongestion = 0;
-    }
-};
-const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
-const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
-const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
-const Build = {
-    isDev: BUILD.isDev ? true : false,
-    isBrowser: true
-};
-/**
- * Default style mode id
- */
-/**
- * Reusable empty obj/array
- * Don't add values to these!!
- */
-const EMPTY_OBJ = {};
-/**
- * Namespaces
- */
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const HTML_NS = 'http://www.w3.org/1999/xhtml';
-const isDef = (v) => v != null;
-const isComplexType = (o) => {
-    // https://jsperf.com/typeof-fn-object/5
-    o = typeof o;
-    return o === 'object' || o === 'function';
-};
-const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
-const patchEsm = () => {
-    // @ts-ignore
-    if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {
-        // @ts-ignore
-        return import(/* webpackChunkName: "rindo-polyfills-css-shim" */ './css-shim-14a9812e.js').then(() => {
-            if (plt.$cssShim$ = win.__cssshim) {
-                return plt.$cssShim$.i();
+        catch (e) { }
+        return false;
+    })()
+    : false;
+const Context = {};
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (BUILD.hostListener && listeners) {
+        // this is called immediately within the element's constructor
+        // initialize our event listeners on the host element
+        // we do this now so that we can listen to events that may
+        // have fired even before the instance is ready
+        if (BUILD.hostListenerTargetParent) {
+            // this component may have event listeners that should be attached to the parent
+            if (attachParentListeners) {
+                // this is being ran from within the connectedCallback
+                // which is important so that we know the host element actually has a parent element
+                // filter out the listeners to only have the ones that ARE being attached to the parent
+                listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
             }
             else {
-                // for better minification
-                return 0;
-            }
+                // this is being ran from within the component constructor
+                // everything BUT the parent element listeners should be attached at this time
+                // filter out the listeners that are NOT being attached to the parent
+                listeners = listeners.filter(([flags]) => !(flags & 32 /* TargetParent */));
+            }
+        }
+        listeners.map(([flags, name, method]) => {
+            const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
+            const handler = hostListenerProxy(hostRef, method);
+            const opts = hostListenerOpts(flags);
+            plt.ael(target, name, handler, opts);
+            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
         });
     }
-    return promiseResolve();
 };
-const patchBrowser = () => {
-    // NOTE!! This fn cannot use async/await!
-    if (BUILD.isDev) {
-        consoleDevInfo('Rindo is running in the development mode.');
-    }
-    if (BUILD.cssVarShim) {
-        // shim css vars
-        plt.$cssShim$ = win.__cssshim;
-    }
-    if (BUILD.cloneNodeFix) {
-        // opted-in to polyfill cloneNode() for slot polyfilled components
-        patchCloneNodeFix(H.prototype);
-    }
-    if (BUILD.profile && !performance.mark) {
-        // not all browsers support performance.mark/measure (Safari 10)
-        performance.mark = performance.measure = () => { };
-        performance.getEntriesByName = () => [];
-    }
-    // @ts-ignore
-    const scriptElm = (BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim) ?
-        Array.from(doc.querySelectorAll('script')).find(s => (new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
-            s.getAttribute('data-rindo-namespace') === NAMESPACE)) : null;
-    const importMeta = import.meta.url;
-    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
-    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
-        // Safari < v11 support: This IF is true if it's Safari below v11.
-        // This fn cannot use async/await since Safari didn't support it until v11,
-        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
-        // so both the ESM file and nomodule file would get downloaded. Only Safari
-        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
-        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
-        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
-        return { then() { } };
-    }
-    if (!BUILD.safari10 && importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    else if (BUILD.dynamicImportShim || BUILD.safari10) {
-        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;
-        patchDynamicImport(opts.resourcesUrl, scriptElm);
-        if (BUILD.dynamicImportShim && !win.customElements) {
-            // module support, but no custom elements support (Old Edge)
-            // @ts-ignore
-            return import(/* webpackChunkName: "rindo-polyfills-dom" */ './dom-af01458a.js').then(() => opts);
-        }
-    }
-    return promiseResolve(opts);
-};
-const patchDynamicImport = (base, orgScriptElm) => {
-    const importFunctionName = getDynamicImportFunction(NAMESPACE);
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
     try {
-        // test if this browser supports dynamic imports
-        // There is a caching issue in V8, that breaks using import() in Function
-        // By generating a random string, we can workaround it
-        // Check https://bugs.chromium.org/p/v8/issues/detail?id=9558 for more info
-        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+        if (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$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+        else {
+            hostRef.$hostElement$[methodName](ev);
+        }
     }
     catch (e) {
-        // this shim is specifically for browsers that do support "esm" imports
-        // however, they do NOT support "dynamic" imports
-        // basically this code is for old Edge, v18 and below
-        const moduleMap = new Map();
-        win[importFunctionName] = (src) => {
-            const url = new URL(src, base).href;
-            let mod = moduleMap.get(url);
-            if (!mod) {
-                const script = doc.createElement('script');
-                script.type = 'module';
-                script.crossOrigin = orgScriptElm.crossOrigin;
-                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], { type: 'application/javascript' }));
-                mod = new Promise(resolve => {
-                    script.onload = () => {
-                        resolve(win[importFunctionName].m);
-                        script.remove();
-                    };
-                });
-                moduleMap.set(url, mod);
-                doc.head.appendChild(script);
-            }
-            return mod;
-        };
+        consoleError(e);
     }
 };
-const patchCloneNodeFix = (HTMLElementPrototype) => {
-    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
-    HTMLElementPrototype.cloneNode = function (deep) {
-        if (this.nodeName === 'TEMPLATE') {
-            return nativeCloneNodeFn.call(this, deep);
-        }
-        const clonedNode = nativeCloneNodeFn.call(this, false);
-        const srcChildNodes = this.childNodes;
-        if (deep) {
-            for (let i = 0; i < srcChildNodes.length; i++) {
-                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
-                if (srcChildNodes[i].nodeType !== 2) {
-                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
-                }
-            }
-        }
-        return clonedNode;
-    };
+const getHostListenerTarget = (elm, flags) => {
+    if (BUILD.hostListenerTargetDocument && flags & 4 /* TargetDocument */)
+        return doc;
+    if (BUILD.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
+        return win;
+    if (BUILD.hostListenerTargetBody && flags & 16 /* TargetBody */)
+        return doc.body;
+    if (BUILD.hostListenerTargetParent && flags & 32 /* TargetParent */)
+        return elm.parentElement;
+    return elm;
 };
+// prettier-ignore
+const hostListenerOpts = (flags) => supportsListenerOptions
+    ? ({
+        passive: (flags & 1 /* Passive */) !== 0,
+        capture: (flags & 2 /* Capture */) !== 0,
+    })
+    : (flags & 2 /* Capture */) !== 0;
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
 const SLOT_NODE_ID = 's';
@@ -319,7 +132,7 @@ const HYDRATE_CHILD_ID = 'c-id';
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
 const createTime = (fnName, tagName = '') => {
-    if (BUILD.profile) {
+    if (BUILD.profile && performance.mark) {
         const key = `st:${fnName}:${tagName}:${i++}`;
         // Start
         performance.mark(key);
@@ -327,11 +140,13 @@ const createTime = (fnName, tagName = '') => {
         return () => performance.measure(`[Rindo] ${fnName}() <${tagName}>`, key);
     }
     else {
-        return () => { return; };
+        return () => {
+            return;
+        };
     }
 };
 const uniqueTime = (key, measureText) => {
-    if (BUILD.profile) {
+    if (BUILD.profile && performance.mark) {
         if (performance.getEntriesByName(key).length === 0) {
             performance.mark(key);
         }
@@ -342,7 +157,9 @@ const uniqueTime = (key, measureText) => {
         };
     }
     else {
-        return () => { return; };
+        return () => {
+            return;
+        };
     }
 };
 const inspect = (ref) => {
@@ -389,7 +206,7 @@ const inspect = (ref) => {
 };
 const installDevTools = () => {
     if (BUILD.devTools) {
-        const rindo = win.rindo = win.rindo || {};
+        const rindo = (win.rindo = win.rindo || {});
         const originalInspect = rindo.inspect;
         rindo.inspect = (ref) => {
             let result = inspect(ref);
@@ -413,25 +230,26 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     styles.set(scopeId, style);
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
-    let scopeId = BUILD.mode ? getScopeId(cmpMeta.$tagName$, mode) : getScopeId(cmpMeta.$tagName$);
+    let scopeId = getScopeId(cmpMeta, mode);
     let style = styles.get(scopeId);
+    if (!BUILD.attachStyles) {
+        return scopeId;
+    }
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
-    styleContainerNode = (styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc);
-    if (BUILD.mode && !style) {
-        scopeId = getScopeId(cmpMeta.$tagName$);
-        style = styles.get(scopeId);
-    }
+    styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
     if (style) {
         if (typeof style === 'string') {
             styleContainerNode = styleContainerNode.head || styleContainerNode;
             let appliedStyles = rootAppliedStyles.get(styleContainerNode);
             let styleElm;
             if (!appliedStyles) {
-                rootAppliedStyles.set(styleContainerNode, appliedStyles = new Set());
+                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
             }
             if (!appliedStyles.has(scopeId)) {
-                if (BUILD.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
+                if (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;
                 }
@@ -467,12 +285,13 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     }
     return scopeId;
 };
-const attachStyles = (elm, cmpMeta, mode) => {
+const attachStyles = (hostRef) => {
+    const cmpMeta = hostRef.$cmpMeta$;
+    const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle((BUILD.shadowDom && supportsShadowDom && elm.shadowRoot)
-        ? elm.shadowRoot
-        : elm.getRootNode(), cmpMeta, mode, elm);
-    if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */) {
+    const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
+    if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && 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
@@ -482,14 +301,38 @@ const attachStyles = (elm, cmpMeta, mode) => {
         // DOM WRITE!!
         elm['s-sc'] = scopeId;
         elm.classList.add(scopeId + '-h');
-        if (BUILD.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+        if (BUILD.scoped && flags & 2 /* scopedCssEncapsulation */) {
             elm.classList.add(scopeId + '-s');
         }
     }
     endAttachStyles();
 };
-const getScopeId = (tagName, mode) => 'sc-' + ((BUILD.mode && mode) ? tagName + '-' + mode : tagName);
+const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
 const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
+// Private
+const computeMode = (elm) => modeResolutionChain.map(h => h(elm)).find(m => !!m);
+// Public
+const setMode = (handler) => modeResolutionChain.push(handler);
+const getMode = (ref) => getHostRef(ref).$modeName$;
+/**
+ * Default style mode id
+ */
+/**
+ * Reusable empty obj/array
+ * Don't add values to these!!
+ */
+const EMPTY_OBJ = {};
+/**
+ * Namespaces
+ */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
+const isDef = (v) => v != null;
+const isComplexType = (o) => {
+    // https://jsperf.com/typeof-fn-object/5
+    o = typeof o;
+    return o === 'object' || o === 'function';
+};
 /**
  * Production h() function based on Preact by
  * Jason Miller (@developit)
@@ -515,12 +358,12 @@ const h = (nodeName, vnodeData, ...children) => {
                 walk(child);
             }
             else if (child != null && typeof child !== 'boolean') {
-                if (simple = typeof nodeName !== 'function' && !isComplexType(child)) {
+                if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {
                     child = String(child);
                 }
-                else if (BUILD.isDev && child.$flags$ === undefined) {
-                    consoleDevError(`vNode passed as children has unexpected type.
-Make sure it's using the correct h() function.
+                else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) {
+                    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) {
@@ -550,22 +393,23 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
         if (BUILD.vdomClass) {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
-                vnodeData.class = typeof classData !== 'object'
-                    ? classData
-                    : Object.keys(classData)
-                        .filter(k => classData[k])
-                        .join(' ');
+                vnodeData.class =
+                    typeof classData !== 'object'
+                        ? classData
+                        : Object.keys(classData)
+                            .filter(k => classData[k])
+                            .join(' ');
             }
         }
     }
     if (BUILD.isDev && vNodeChildren.some(isHost)) {
-        consoleDevError(`The <Host> must be the single root component. Make sure:
-- You are NOT using hostData() and <Host> in the same component.
+        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 (BUILD.vdomFunctional && typeof nodeName === 'function') {
         // nodeName is a functional component
-        return nodeName(vnodeData, vNodeChildren, vdomFnUtils);
+        return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
     }
     const vnode = newVNode(nodeName, null);
     vnode.$attrs$ = vnodeData;
@@ -586,7 +430,7 @@ const newVNode = (tag, text) => {
         $tag$: tag,
         $text$: text,
         $elm$: null,
-        $children$: null
+        $children$: null,
     };
     if (BUILD.vdomAttribute) {
         vnode.$attrs$ = null;
@@ -602,20 +446,28 @@ const newVNode = (tag, text) => {
 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$
-    };
-};
+    forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+    map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
+};
+const convertToPublic = (node) => ({
+    vattrs: node.$attrs$,
+    vchildren: node.$children$,
+    vkey: node.$key$,
+    vname: node.$name$,
+    vtag: node.$tag$,
+    vtext: node.$text$,
+});
 const convertToPrivate = (node) => {
+    if (typeof node.vtag === 'function') {
+        const vnodeData = Object.assign({}, node.vattrs);
+        if (node.vkey) {
+            vnodeData.key = node.vkey;
+        }
+        if (node.vname) {
+            vnodeData.name = node.vname;
+        }
+        return h(node.vtag, vnodeData, ...(node.vchildren || []));
+    }
     const vnode = newVNode(node.vtag, node.vtext);
     vnode.$attrs$ = node.vattrs;
     vnode.$children$ = node.vchildren;
@@ -630,6 +482,9 @@ const validateInputProperties = (vnodeData) => {
     const maxIndex = props.indexOf('max');
     const stepIndex = props.indexOf('min');
     const value = props.indexOf('value');
+    if (value === -1) {
+        return;
+    }
     if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {
         consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
     }
@@ -687,10 +542,9 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             }
         }
         else if (BUILD.vdomListener &&
-            (BUILD.lazyLoad
-                ? !isProp
-                : !elm.__lookupSetter__(memberName)) &&
-            memberName[0] === 'o' && memberName[1] === 'n') {
+            (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,
@@ -764,14 +618,16 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
             if (newValue == null || newValue === false) {
-                if (BUILD.vdomXlink && xlink) {
-                    elm.removeAttributeNS(XLINK_NS, memberName);
-                }
-                else {
-                    elm.removeAttribute(memberName);
+                if (newValue !== false || elm.getAttribute(memberName) === '') {
+                    if (BUILD.vdomXlink && xlink) {
+                        elm.removeAttributeNS(XLINK_NS, memberName);
+                    }
+                    else {
+                        elm.removeAttribute(memberName);
+                    }
                 }
             }
-            else if ((!isProp || (flags & 4 /* isHost */) || isSvg) && !isComplex) {
+            else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
                 newValue = newValue === true ? '' : newValue;
                 if (BUILD.vdomXlink && xlink) {
                     elm.setAttributeNS(XLINK_NS, memberName, newValue);
@@ -784,12 +640,14 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     }
 };
 const parseClassListRegex = /\s/;
-const parseClassList = (value) => (!value) ? [] : value.split(parseClassListRegex);
+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 elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host
+        ? newVnode.$elm$.host
+        : newVnode.$elm$;
     const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
     const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
     if (BUILD.updatable) {
@@ -820,18 +678,15 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
                 // 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 */;
+            newVNode.$flags$ |= newVNode.$children$
+                ? // slot element has fallback content
+                    2 /* isSlotFallback */
+                : // slot element does not have fallback content
+                    1 /* isSlotReference */;
         }
     }
     if (BUILD.isDev && newVNode.$elm$) {
-        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`);
+        consoleDevError(`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 (BUILD.vdomText && newVNode.$text$ !== null) {
         // create text node
@@ -839,16 +694,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     else if (BUILD.slotRelocation && newVNode.$flags$ & 1 /* isSlotReference */) {
         // create a slot reference node
-        elm = newVNode.$elm$ = (BUILD.isDebug || BUILD.hydrateServerSide) ? slotReferenceDebugNode(newVNode) : doc.createTextNode('');
+        elm = newVNode.$elm$ =
+            BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : doc.createTextNode('');
     }
     else {
         if (BUILD.svg && !isSvgMode) {
             isSvgMode = newVNode.$tag$ === 'svg';
         }
         // create element
-        elm = newVNode.$elm$ = ((BUILD.svg)
-            ? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, (BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$)
-            : doc.createElement((BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */) ? 'slot-fb' : newVNode.$tag$));
+        elm = newVNode.$elm$ = (BUILD.svg
+            ? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */
+                ? 'slot-fb'
+                : newVNode.$tag$)
+            : doc.createElement(BUILD.slotRelocation && newVNode.$flags$ & 2 /* isSlotFallback */
+                ? 'slot-fb'
+                : newVNode.$tag$));
         if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {
             isSvgMode = false;
         }
@@ -945,7 +805,7 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
 };
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
-        if (vnode = vnodes[startIdx]) {
+        if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
             callNodeRefs(vnode);
             if (BUILD.slotRelocation) {
@@ -1063,7 +923,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
         }
     }
     if (oldStartIdx > oldEndIdx) {
-        addVnodes(parentElm, (newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$), newVNode, newCh, newStartIdx, newEndIdx);
+        addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
     }
     else if (BUILD.updatable && newStartIdx > newEndIdx) {
         removeVnodes(oldCh, oldStartIdx, oldEndIdx);
@@ -1092,7 +952,7 @@ const referenceNode = (node) => {
 };
 const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
 const patch = (oldVNode, newVNode) => {
-    const elm = newVNode.$elm$ = oldVNode.$elm$;
+    const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
     const tag = newVNode.$tag$;
@@ -1102,11 +962,7 @@ const patch = (oldVNode, newVNode) => {
         if (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;
+            isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
         }
         // element node
         if (BUILD.vdomAttribute || BUILD.reflect) {
@@ -1170,24 +1026,22 @@ const updateFallbackSlotVisibility = (elm) => {
                 // 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;
-                            }
+                    nodeType = childNodes[j].nodeType;
+                    if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
+                        // this sibling node is from a different component OR 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;
-                            }
+                    }
+                    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;
                         }
                     }
                 }
@@ -1211,7 +1065,7 @@ const relocateSlotContent = (elm) => {
     let ilen = childNodes.length;
     for (; i < ilen; i++) {
         childNode = childNodes[i];
-        if (childNode['s-sr'] && (node = childNode['s-cr'])) {
+        if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
             // 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;
@@ -1243,10 +1097,10 @@ const relocateSlotContent = (elm) => {
                             });
                         }
                         if (node['s-sr']) {
-                            relocateNodes.forEach(relocateNode => {
+                            relocateNodes.map(relocateNode => {
                                 if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
                                     relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
-                                    if (relocateNodeData) {
+                                    if (relocateNodeData && !relocateNode.$slotRefNode$) {
                                         relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
                                     }
                                 }
@@ -1286,33 +1140,33 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
 const callNodeRefs = (vNode) => {
     if (BUILD.vdomRef) {
         vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-        vNode.$children$ && vNode.$children$.forEach(callNodeRefs);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
-const renderVdom = (hostElm, hostRef, cmpMeta, renderFnResults) => {
+const renderVdom = (hostRef, renderFnResults) => {
+    const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
+    const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
     // <Host> runtime check
     if (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>
-  );
-}
-`);
+        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 (BUILD.reflect && cmpMeta.$attrsToReflect$) {
         rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-        cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]);
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
     }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
@@ -1323,13 +1177,16 @@ render() {
     }
     if (BUILD.slotRelocation) {
         contentRef = hostElm['s-cr'];
-        useNativeShadowDom = supportsShadowDom && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+        useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
         // always reset
         checkSlotFallbackVisibility = false;
     }
     // synchronous patch
     patch(oldVNode, rootVnode);
     if (BUILD.slotRelocation) {
+        // while we're moving nodes around existing nodes, temporarily disable
+        // the disconnectCallback from working
+        plt.$flags$ |= 1 /* isTmpDisconnected */;
         if (checkSlotRelocate) {
             relocateSlotContent(rootVnode.$elm$);
             let relocateData;
@@ -1345,16 +1202,14 @@ render() {
                 if (!nodeToRelocate['s-ol']) {
                     // add a reference node marking this node's original location
                     // keep a reference to this node for later lookups
-                    orgLocationNode = (BUILD.isDebug || BUILD.hydrateServerSide)
-                        ? originalLocationDebugNode(nodeToRelocate)
-                        : doc.createTextNode('');
+                    orgLocationNode =
+                        BUILD.isDebug || BUILD.hydrateServerSide
+                            ? originalLocationDebugNode(nodeToRelocate)
+                            : 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
-            plt.$flags$ |= 1 /* isTmpDisconnected */;
             for (i = 0; i < relocateNodes.length; i++) {
                 relocateData = relocateNodes[i];
                 nodeToRelocate = relocateData.$nodeToRelocate$;
@@ -1364,11 +1219,9 @@ render() {
                     parentNodeRef = relocateData.$slotRefNode$.parentNode;
                     insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
                     orgLocationNode = nodeToRelocate['s-ol'];
-                    while (orgLocationNode = orgLocationNode.previousSibling) {
+                    while ((orgLocationNode = orgLocationNode.previousSibling)) {
                         refNode = orgLocationNode['s-nr'];
-                        if (refNode &&
-                            refNode['s-sn'] === nodeToRelocate['s-sn'] &&
-                            parentNodeRef === refNode.parentNode) {
+                        if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
                             refNode = refNode.nextSibling;
                             if (!refNode || !refNode['s-nr']) {
                                 insertBeforeNode = refNode;
@@ -1377,7 +1230,7 @@ render() {
                         }
                     }
                     if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
-                        (nodeToRelocate.nextSibling !== insertBeforeNode)) {
+                        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
@@ -1398,32 +1251,52 @@ render() {
                     }
                 }
             }
-            // done moving nodes around
-            // allow the disconnect callback to work again
-            plt.$flags$ &= ~1 /* isTmpDisconnected */;
         }
         if (checkSlotFallbackVisibility) {
             updateFallbackSlotVisibility(rootVnode.$elm$);
         }
+        // done moving nodes around
+        // allow the disconnect callback to work again
+        plt.$flags$ &= ~1 /* isTmpDisconnected */;
         // 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) => doc.createComment(`<slot${slotVNode.$name$ ?
-    (' name="' + slotVNode.$name$) + '"' :
-    ''}> (host=${hostTagName.toLowerCase()})`);
+const slotReferenceDebugNode = (slotVNode) => doc.createComment(`<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ''}> (host=${hostTagName.toLowerCase()})`);
 const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` +
-    (nodeToRelocate.localName ?
-        `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})` :
-        `[${nodeToRelocate.textContent}]`));
+    (nodeToRelocate.localName
+        ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})`
+        : `[${nodeToRelocate.textContent}]`));
+const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            if (BUILD.isDev && !elm.isConnected) {
+                consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
+            }
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* Bubbles */),
+                composed: !!(flags & 2 /* Composed */),
+                cancelable: !!(flags & 1 /* Cancellable */),
+                detail,
+            });
+        },
+    };
+};
+const emitEvent = (elm, name, opts) => {
+    const ev = plt.ce(name, opts);
+    elm.dispatchEvent(ev);
+    return ev;
+};
 const attachToAncestor = (hostRef, ancestorComponent) => {
-    if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$) {
-        ancestorComponent['s-p'].push(new Promise(r => hostRef.$onRenderResolve$ = r));
+    if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
+        ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
     }
 };
-const scheduleUpdate = (elm, hostRef, cmpMeta, isInitialLoad) => {
+const scheduleUpdate = (hostRef, isInitialLoad) => {
     if (BUILD.taskQueue && BUILD.updatable) {
         hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
     }
@@ -1431,17 +1304,23 @@ const scheduleUpdate = (elm, hostRef, cmpMeta, isInitialLoad) => {
         hostRef.$flags$ |= 512 /* needsRerender */;
         return;
     }
-    const endSchedule = createTime('scheduleUpdate', cmpMeta.$tagName$);
-    const ancestorComponent = hostRef.$ancestorComponent$;
+    attachToAncestor(hostRef, hostRef.$ancestorComponent$);
+    // there is no ancestor component or the ancestor component
+    // has already fired off its lifecycle update then
+    // fire off the initial update
+    const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+    return BUILD.taskQueue ? writeTask(dispatch) : dispatch();
+};
+const dispatchHooks = (hostRef, isInitialLoad) => {
+    const elm = hostRef.$hostElement$;
+    const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
-    const update = () => updateComponent(elm, hostRef, cmpMeta, instance, isInitialLoad);
-    attachToAncestor(hostRef, ancestorComponent);
     let promise;
     if (isInitialLoad) {
         if (BUILD.lazyLoad && BUILD.hostListener) {
             hostRef.$flags$ |= 256 /* isListenReady */;
             if (hostRef.$queuedListeners$) {
-                hostRef.$queuedListeners$.forEach(([methodName, event]) => safeCall(instance, methodName, event));
+                hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
                 hostRef.$queuedListeners$ = null;
             }
         }
@@ -1461,35 +1340,26 @@ const scheduleUpdate = (elm, hostRef, cmpMeta, isInitialLoad) => {
         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, BUILD.taskQueue
-        ? () => writeTask(update)
-        : update);
+    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-const updateComponent = (elm, hostRef, cmpMeta, instance, isInitialLoad) => {
+const updateComponent = async (hostRef, instance, isInitialLoad) => {
     // updateComponent
-    const endUpdate = createTime('update', cmpMeta.$tagName$);
+    const elm = hostRef.$hostElement$;
+    const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
     if (BUILD.style && isInitialLoad) {
         // DOM WRITE!
-        attachStyles(elm, cmpMeta, hostRef.$modeName$);
+        attachStyles(hostRef);
     }
-    const endRender = createTime('render', cmpMeta.$tagName$);
+    const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     if (BUILD.isDev) {
         hostRef.$flags$ |= 1024 /* devOnRender */;
     }
-    if (BUILD.hasRenderFn || BUILD.reflect) {
-        if (BUILD.vdomRender || 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 (BUILD.hydrateServerSide) {
+        await callRender(hostRef, instance, elm);
+    }
+    else {
+        callRender(hostRef, instance, elm);
     }
     if (BUILD.cssVarShim && plt.$cssShim$) {
         plt.$cssShim$.updateHost(elm);
@@ -1498,42 +1368,36 @@ const updateComponent = (elm, hostRef, cmpMeta, instance, isInitialLoad) => {
         hostRef.$renderCount$++;
         hostRef.$flags$ &= ~1024 /* devOnRender */;
     }
-    if (BUILD.updatable && BUILD.taskQueue) {
-        hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
-    }
     if (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 */) {
+                if (hostRef.$cmpMeta$.$flags$ & 1 /* shadowDomEncapsulation */) {
                     elm['s-en'] = '';
                 }
-                else if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+                else if (hostRef.$cmpMeta$.$flags$ & 2 /* scopedCssEncapsulation */) {
                     elm['s-en'] = 'c';
                 }
             }
         }
         catch (e) {
-            consoleError(e);
+            consoleError(e, elm);
         }
     }
-    if (BUILD.updatable || BUILD.lazyLoad) {
-        hostRef.$flags$ |= 2 /* hasRendered */;
-    }
     if (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());
+        rc.map(cb => cb());
         elm['s-rc'] = undefined;
     }
     endRender();
     endUpdate();
     if (BUILD.asyncLoading) {
         const childrenPromises = elm['s-p'];
-        const postUpdate = () => postUpdateComponent(elm, hostRef, cmpMeta);
+        const postUpdate = () => postUpdateComponent(hostRef);
         if (childrenPromises.length === 0) {
             postUpdate();
         }
@@ -1544,23 +1408,54 @@ const updateComponent = (elm, hostRef, cmpMeta, instance, isInitialLoad) => {
         }
     }
     else {
-        postUpdateComponent(elm, hostRef, cmpMeta);
+        postUpdateComponent(hostRef);
     }
 };
-const callRender = (instance, elm) => {
+const callRender = (hostRef, instance, elm) => {
+    // in order for bundlers to correctly treeshake the BUILD object
+    // we need to ensure BUILD is not deoptimized within a try/catch
+    // https://rollupjs.org/guide/en/#treeshake tryCatchDeoptimization
+    const allRenderFn = BUILD.allRenderFn ? true : false;
+    const lazyLoad = BUILD.lazyLoad ? true : false;
+    const taskQueue = BUILD.taskQueue ? true : false;
+    const updatable = BUILD.updatable ? true : false;
     try {
-        renderingElement = elm;
-        instance = (BUILD.allRenderFn) ? instance.render() : (instance.render && instance.render());
+        renderingRef = instance;
+        instance = allRenderFn ? instance.render() : instance.render && instance.render();
+        if (updatable && taskQueue) {
+            hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
+        }
+        if (updatable || lazyLoad) {
+            hostRef.$flags$ |= 2 /* hasRendered */;
+        }
+        if (BUILD.hasRenderFn || BUILD.reflect) {
+            if (BUILD.vdomRender || 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!
+                if (BUILD.hydrateServerSide) {
+                    return Promise.resolve(instance).then(value => renderVdom(hostRef, value));
+                }
+                else {
+                    renderVdom(hostRef, instance);
+                }
+            }
+            else {
+                elm.textContent = instance;
+            }
+        }
     }
     catch (e) {
-        consoleError(e);
+        consoleError(e, hostRef.$hostElement$);
     }
-    renderingElement = null;
-    return instance;
+    renderingRef = null;
+    return null;
 };
-const getRenderingElement = () => renderingElement;
-const postUpdateComponent = (elm, hostRef, cmpMeta) => {
-    const endPostUpdate = createTime('postUpdate', cmpMeta.$tagName$);
+const getRenderingRef = () => renderingRef;
+const postUpdateComponent = (hostRef) => {
+    const tagName = hostRef.$cmpMeta$.$tagName$;
+    const elm = hostRef.$hostElement$;
+    const endPostUpdate = createTime('postUpdate', tagName);
     const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
     const ancestorComponent = hostRef.$ancestorComponent$;
     if (BUILD.cmpDidRender) {
@@ -1593,7 +1488,7 @@ const postUpdateComponent = (elm, hostRef, cmpMeta) => {
         if (BUILD.asyncLoading) {
             hostRef.$onReadyResolve$(elm);
             if (!ancestorComponent) {
-                appDidLoad(cmpMeta.$tagName$);
+                appDidLoad(tagName);
             }
         }
     }
@@ -1628,7 +1523,7 @@ const postUpdateComponent = (elm, hostRef, cmpMeta) => {
             hostRef.$onRenderResolve$ = undefined;
         }
         if (hostRef.$flags$ & 512 /* needsRerender */) {
-            nextTick(() => scheduleUpdate(elm, hostRef, cmpMeta, false));
+            nextTick(() => scheduleUpdate(hostRef, false));
         }
         hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
     }
@@ -1636,12 +1531,13 @@ const postUpdateComponent = (elm, hostRef, cmpMeta) => {
     // ( •_•)>⌐■-■
     // (⌐■_■)
 };
-const forceUpdate = (elm, cmpMeta) => {
+const forceUpdate = (ref) => {
     if (BUILD.updatable) {
-        const hostRef = getHostRef(elm);
+        const hostRef = getHostRef(ref);
         const isConnected = hostRef.$hostElement$.isConnected;
-        if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
-            scheduleUpdate(elm, hostRef, cmpMeta, false);
+        if (isConnected &&
+            (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+            scheduleUpdate(hostRef, false);
         }
         // Returns "true" when the forced update was successfully scheduled
         return isConnected;
@@ -1654,11 +1550,11 @@ const appDidLoad = (who) => {
     if (BUILD.cssAnnotations) {
         addHydratedFlag(doc.documentElement);
     }
-    if (!BUILD.hydrateServerSide) {
+    if (BUILD.asyncQueue) {
         plt.$flags$ |= 2 /* appLoaded */;
     }
-    emitLifecycleEvent(doc, 'appload');
-    if (BUILD.profile) {
+    nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
+    if (BUILD.profile && performance.measure) {
         performance.measure(`[Rindo] ${NAMESPACE} initial load (by ${who})`, 'st:app:start');
     }
 };
@@ -1678,14 +1574,20 @@ const then = (promise, thenFn) => {
 };
 const emitLifecycleEvent = (elm, lifecycleName) => {
     if (BUILD.lifecycleDOMEvents) {
-        elm.dispatchEvent(new CustomEvent('rindo_' + lifecycleName, { 'bubbles': true, 'composed': true }));
+        emitEvent(elm, 'rindo_' + lifecycleName, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                namespace: NAMESPACE,
+            },
+        });
     }
 };
-const addHydratedFlag = (elm) => BUILD.hydratedClass ?
-    elm.classList.add('hydrated') :
-    BUILD.hydratedAttribute ?
-        elm.setAttribute('hydrated', '') :
-        undefined;
+const addHydratedFlag = (elm) => BUILD.hydratedClass
+    ? elm.classList.add('hydrated')
+    : BUILD.hydratedAttribute
+        ? elm.setAttribute('hydrated', '')
+        : undefined;
 const serverSideConnected = (elm) => {
     const children = elm.children;
     if (children != null) {
@@ -1698,135 +1600,24 @@ const serverSideConnected = (elm) => {
         }
     }
 };
-const cloneNodeFix = (HostElementPrototype) => {
-    const orgCloneNode = HostElementPrototype.cloneNode;
-    HostElementPrototype.cloneNode = function (deep) {
-        const srcNode = this;
-        const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadowDom : false;
-        const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
-        if (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 (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 = (BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm);
-        const handler = hostListenerProxy(hostRef, method);
-        const opts = hostListenerOpts(flags);
-        plt.ael(target, name, handler, opts);
-        return () => plt.rel(target, name, handler, opts);
-    });
-    return () => removeFns.forEach(fn => fn());
-};
-const hostListenerProxy = (hostRef, methodName) => {
-    return (ev) => {
-        if (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 (BUILD.hostListenerTargetDocument && flags & 4 /* TargetDocument */)
-        return doc;
-    if (BUILD.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
-        return win;
-    if (BUILD.hostListenerTargetBody && flags & 32 /* TargetBody */)
-        return doc.body;
-    if (BUILD.hostListenerTargetParent && flags & 16 /* TargetParent */)
-        return elm.parentElement;
-    return elm;
-};
-const hostListenerOpts = (flags) => 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 = (BUILD.shadowDom && shadowRoot ? [] : null);
-    const vnode = hostRef.$vnode$ = newVNode(tagName, null);
+    const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
+    const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
     if (!plt.$orgLocNodes$) {
-        initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = new Map());
+        initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
     }
     hostElm[HYDRATE_ID] = hostId;
     hostElm.removeAttribute(HYDRATE_ID);
     clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
-    childRenderNodes.forEach(c => {
+    childRenderNodes.map(c => {
         const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
         const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
         const node = c.$elm$;
-        if (orgLocationNode && (supportsShadowDom && orgLocationNode['s-en'] === '')) {
+        if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
             orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
         }
         if (!shadowRoot) {
@@ -1839,7 +1630,7 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         plt.$orgLocNodes$.delete(orgLocationId);
     });
     if (BUILD.shadowDom && shadowRoot) {
-        shadowRootNodes.forEach(shadowRootNode => {
+        shadowRootNodes.map(shadowRootNode => {
             if (shadowRootNode) {
                 shadowRoot.appendChild(shadowRootNode);
             }
@@ -1871,7 +1662,7 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
                     $children$: null,
                     $key$: null,
                     $name$: null,
-                    $text$: null
+                    $text$: null,
                 };
                 childRenderNodes.push(childVNode);
                 node.removeAttribute(HYDRATE_CHILD_ID);
@@ -1918,7 +1709,7 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
                 $key$: null,
                 $name$: null,
                 $tag$: null,
-                $text$: null
+                $text$: null,
             };
             if (childNodeType === TEXT_NODE_ID) {
                 childVNode.$elm$ = node.nextSibling;
@@ -2020,7 +1811,7 @@ const parsePropertyValue = (propValue, propType) => {
         if (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);
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
         if (BUILD.propNumber && propType & 2 /* Number */) {
             // force it to be a number
@@ -2047,7 +1838,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if (newVal !== oldVal && (!BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === undefined)) {
+    if ((!BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -2065,18 +1856,19 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
                 const watchMethods = cmpMeta.$watchers$[propName];
                 if (watchMethods) {
                     // this instance is watching for when this property changed
-                    watchMethods.forEach(watchMethodName => {
+                    watchMethods.map(watchMethodName => {
                         try {
                             // fire off each of the watch methods that are watching this property
                             instance[watchMethodName](newVal, oldVal, propName);
                         }
                         catch (e) {
-                            consoleError(e);
+                            consoleError(e, elm);
                         }
                     });
                 }
             }
-            if (BUILD.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+            if (BUILD.updatable &&
+                (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
                 if (BUILD.cmpShouldUpdate && instance.componentShouldUpdate) {
                     if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
                         return;
@@ -2086,7 +1878,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
                 // 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);
+                scheduleUpdate(hostRef, false);
             }
         }
     }
@@ -2099,10 +1891,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         // 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 ((BUILD.prop || BUILD.state) && ((memberFlags & 31 /* Prop */) ||
-                ((!BUILD.lazyLoad || flags & 2 /* proxyState */) &&
-                    (memberFlags & 32 /* State */)))) {
+        members.map(([memberName, [memberFlags]]) => {
+            if ((BUILD.prop || BUILD.state) &&
+                (memberFlags & 31 /* Prop */ ||
+                    ((!BUILD.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
                 // proxyComponent - prop
                 Object.defineProperty(prototype, memberName, {
                     get() {
@@ -2110,29 +1902,38 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         return getValue(this, memberName);
                     },
                     set(newValue) {
-                        if (
                         // only during dev time
-                        (BUILD.isDev) &&
-                            // we are proxing the instance (not element)
+                        if (BUILD.isDev) {
+                            const ref = getHostRef(this);
+                            if (
+                            // we are proxying the instance (not element)
                             (flags & 1 /* isElementConstructor */) === 0 &&
-                            // the member is a non-mutable prop
-                            (memberFlags & (31 /* Prop */ | 1024 /* Mutable */)) === 31 /* Prop */) {
-                            consoleDevWarn(`@Prop() "${memberName}" on "${cmpMeta.$tagName$}" cannot be modified.\nFurther information: https://rindojs.web.app/docs/properties#prop-mutability`);
+                                // the element is not constructing
+                                (ref.$flags$ & 8 /* isConstructingInstance */) === 0 &&
+                                // the member is a prop
+                                (memberFlags & 31 /* Prop */) !== 0 &&
+                                // the member is not mutable
+                                (memberFlags & 1024 /* Mutable */) === 0) {
+                                consoleDevWarn(`@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.\nMore information: https://rindojs.web.app/docs/properties#prop-mutability`);
+                            }
                         }
                         // proxyComponent, set value
                         setValue(this, memberName, newValue, cmpMeta);
                     },
                     configurable: true,
-                    enumerable: true
+                    enumerable: true,
                 });
             }
-            else if (BUILD.lazyLoad && BUILD.method && (flags & 1 /* isElementConstructor */) && (memberFlags & 64 /* Method */)) {
+            else if (BUILD.lazyLoad &&
+                BUILD.method &&
+                flags & 1 /* isElementConstructor */ &&
+                memberFlags & 64 /* Method */) {
                 // proxyComponent - method
                 Object.defineProperty(prototype, memberName, {
                     value(...args) {
                         const ref = getHostRef(this);
                         return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
-                    }
+                    },
                 });
             }
         });
@@ -2141,9 +1942,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
-                    this[propName] = newValue === null && typeof this[propName] === 'boolean'
-                        ? false
-                        : newValue;
+                    this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
             // create an array of attributes to observe
@@ -2162,27 +1961,13 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
     }
     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) => getHostRef(ref).$modeName$;
 const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
-    if ((BUILD.lazyLoad || BUILD.style) && (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
-        // we haven't initialized this element yet
-        hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-        if (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 (BUILD.hydrateServerSide && hostRef.$modeName$) {
-            elm.setAttribute('s-mode', hostRef.$modeName$);
-        }
-        if (BUILD.lazyLoad) {
+    if ((BUILD.lazyLoad || BUILD.hydrateServerSide || BUILD.style) &&
+        (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
+        if (BUILD.lazyLoad || BUILD.hydrateClientSide) {
+            // we haven't initialized this element yet
+            hostRef.$flags$ |= 32 /* hasInitializedComponent */;
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -2233,26 +2018,36 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
         else {
+            // sync constructor component
             Cstr = elm.constructor;
+            hostRef.$flags$ |= 128 /* isWatchReady */ | 32 /* hasInitializedComponent */;
         }
-        const scopeId = BUILD.mode ? getScopeId(cmpMeta.$tagName$, hostRef.$modeName$) : getScopeId(cmpMeta.$tagName$);
-        if (BUILD.style && !styles.has(scopeId) && Cstr.style) {
-            const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
+        if (BUILD.style && Cstr.style) {
             // this component has styles but we haven't registered them yet
             let style = Cstr.style;
             if (BUILD.mode && typeof style !== 'string') {
-                style = style[hostRef.$modeName$];
+                style = style[(hostRef.$modeName$ = computeMode(elm))];
+                if (BUILD.hydrateServerSide && hostRef.$modeName$) {
+                    elm.setAttribute('s-mode', hostRef.$modeName$);
+                }
             }
-            if (!BUILD.hydrateServerSide && BUILD.shadowDom && BUILD.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-                style = await import('./shadow-css-6ef31c68.js').then(m => m.scopeCss(style, scopeId, false));
+            const scopeId = getScopeId(cmpMeta, hostRef.$modeName$);
+            if (!styles.has(scopeId)) {
+                const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
+                if (!BUILD.hydrateServerSide &&
+                    BUILD.shadowDom &&
+                    BUILD.shadowDomShim &&
+                    cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+                    style = await import('./shadow-css.js').then(m => m.scopeCss(style, scopeId, false));
+                }
+                registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
+                endRegisterStyles();
             }
-            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);
+    const schedule = () => scheduleUpdate(hostRef, true);
     if (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
@@ -2271,16 +2066,14 @@ const fireConnectedCallback = (instance) => {
         safeCall(instance, 'connectedCallback');
     }
 };
-const connectedCallback = (elm, cmpMeta) => {
+const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
-        const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
-        // connectedCallback
         const hostRef = getHostRef(elm);
-        if (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$);
+        const cmpMeta = hostRef.$cmpMeta$;
+        const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);
+        if (BUILD.hostListenerTargetParent) {
+            // only run if we have listeners being attached to a parent
+            addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
         }
         if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
             // first time this component has connected
@@ -2289,8 +2082,10 @@ const connectedCallback = (elm, cmpMeta) => {
             if (BUILD.hydrateClientSide) {
                 hostId = elm.getAttribute(HYDRATE_ID);
                 if (hostId) {
-                    if (BUILD.shadowDom && supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                        const scopeId = BUILD.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode')) : addStyle(elm.shadowRoot, cmpMeta);
+                    if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                        const scopeId = 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);
@@ -2301,9 +2096,9 @@ const connectedCallback = (elm, cmpMeta) => {
                 // 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 ((BUILD.hydrateServerSide) ||
-                    (BUILD.slot && cmpMeta.$flags$ & 4 /* hasSlotRelocation */) ||
-                    (BUILD.shadowDom && cmpMeta.$flags$ & 8 /* needsShadowDomShim */)) {
+                if (BUILD.hydrateServerSide ||
+                    ((BUILD.slot || BUILD.shadowDom) &&
+                        cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
                     setContentReference(elm);
                 }
             }
@@ -2311,11 +2106,14 @@ const connectedCallback = (elm, cmpMeta) => {
                 // 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))) {
+                while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
                     // climb up the ancestors looking for the first
                     // component that hasn't finished its lifecycle update yet
-                    if ((BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute('s-id')) ||
-                        (ancestorComponent['s-p'])) {
+                    if ((BUILD.hydrateClientSide &&
+                        ancestorComponent.nodeType === 1 /* ElementNode */ &&
+                        ancestorComponent.hasAttribute('s-id') &&
+                        ancestorComponent['s-p']) ||
+                        ancestorComponent['s-p']) {
                         // we found this components first ancestor component
                         // keep a reference to this component's ancestor component
                         attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
@@ -2326,7 +2124,7 @@ const connectedCallback = (elm, cmpMeta) => {
             // Lazy properties
             // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
             if (BUILD.prop && BUILD.lazyLoad && !BUILD.hydrateServerSide && cmpMeta.$members$) {
-                Object.entries(cmpMeta.$members$).forEach(([memberName, [memberFlags]]) => {
+                Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
                     if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
                         const value = elm[memberName];
                         delete elm[memberName];
@@ -2345,7 +2143,14 @@ const connectedCallback = (elm, cmpMeta) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
-        fireConnectedCallback(hostRef.$lazyInstance$);
+        else {
+            // not the first time this has connected
+            // reattach any event listeners to the host
+            // since they would have been removed when disconnected
+            addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
         endConnected();
     }
 };
@@ -2356,9 +2161,7 @@ const setContentReference = (elm) => {
     // 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'] = doc.createComment(BUILD.isDebug
-        ? `content-ref (host=${elm.localName})`
-        : '');
+    const contentRefElm = (elm['s-cr'] = doc.createComment(BUILD.isDebug ? `content-ref (host=${elm.localName})` : ''));
     contentRefElm['s-cn'] = true;
     elm.insertBefore(contentRefElm, elm.firstChild);
 };
@@ -2368,7 +2171,7 @@ const disconnectedCallback = (elm) => {
         const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
         if (BUILD.hostListener) {
             if (hostRef.$rmListeners$) {
-                hostRef.$rmListeners$();
+                hostRef.$rmListeners$.map(rmListener => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
@@ -2384,7 +2187,82 @@ const disconnectedCallback = (elm) => {
         }
     }
 };
-function hmrStart(elm, cmpMeta, hmrVersionId) {
+const defineCustomElement = (Cstr, compactMeta) => {
+    customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
+};
+const proxyCustomElement = (Cstr, compactMeta) => {
+    const cmpMeta = {
+        $flags$: compactMeta[0],
+        $tagName$: compactMeta[1],
+    };
+    if (BUILD.member) {
+        cmpMeta.$members$ = compactMeta[2];
+    }
+    if (BUILD.hostListener) {
+        cmpMeta.$listeners$ = compactMeta[3];
+    }
+    if (BUILD.watchCallback) {
+        cmpMeta.$watchers$ = Cstr.$watchers$;
+    }
+    if (BUILD.reflect) {
+        cmpMeta.$attrsToReflect$ = [];
+    }
+    if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+        cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+    }
+    const originalConnectedCallback = Cstr.prototype.connectedCallback;
+    const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
+    Object.assign(Cstr.prototype, {
+        __registerHost() {
+            registerHost(this, cmpMeta);
+        },
+        connectedCallback() {
+            connectedCallback(this);
+            if (BUILD.connectedCallback && originalConnectedCallback) {
+                originalConnectedCallback.call(this);
+            }
+        },
+        disconnectedCallback() {
+            disconnectedCallback(this);
+            if (BUILD.disconnectedCallback && originalDisconnectedCallback) {
+                originalDisconnectedCallback.call(this);
+            }
+        },
+    });
+    Cstr.is = cmpMeta.$tagName$;
+    return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
+};
+const forceModeUpdate = (elm) => {
+    if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
+        const mode = computeMode(elm);
+        const hostRef = getHostRef(elm);
+        if (hostRef.$modeName$ !== mode) {
+            const cmpMeta = hostRef.$cmpMeta$;
+            const oldScopeId = elm['s-sc'];
+            const scopeId = getScopeId(cmpMeta, mode);
+            const style = elm.constructor.style[mode];
+            const flags = cmpMeta.$flags$;
+            if (style) {
+                if (!styles.has(scopeId)) {
+                    registerStyle(scopeId, style, !!(flags & 1 /* shadowDomEncapsulation */));
+                }
+                hostRef.$modeName$ = mode;
+                elm.classList.remove(oldScopeId + '-h', oldScopeId + '-s');
+                attachStyles(hostRef);
+                forceUpdate(elm);
+            }
+        }
+    }
+};
+const attachShadow = (el) => {
+    if (supportsShadow) {
+        el.attachShadow({ mode: 'open' });
+    }
+    else {
+        el.shadowRoot = el;
+    }
+};
+const hmrStart = (elm, cmpMeta, hmrVersionId) => {
     // ¯\_(ツ)_/¯
     const hostRef = getHostRef(elm);
     // reset state flags to only have been connected
@@ -2400,9 +2278,125 @@ function hmrStart(elm, cmpMeta, hmrVersionId) {
     };
     // re-initialize the component
     initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
-}
+};
+const patchCloneNode = (HostElementPrototype) => {
+    const orgCloneNode = HostElementPrototype.cloneNode;
+    HostElementPrototype.cloneNode = function (deep) {
+        const srcNode = this;
+        const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
+        const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
+        if (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 (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 patchSlotAppendChild = (HostElementPrototype) => {
+    HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+    HostElementPrototype.appendChild = function (newChild) {
+        const slotName = (newChild['s-sn'] = getSlotName(newChild));
+        const slotNode = getHostSlotNode(this.childNodes, 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 patchChildSlotNodes = (elm, cmpMeta) => {
+    class FakeNodeList extends Array {
+        item(n) {
+            return this[n];
+        }
+    }
+    if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+        const childNodesFn = elm.__lookupGetter__('childNodes');
+        Object.defineProperty(elm, 'children', {
+            get() {
+                return this.childNodes.map((n) => n.nodeType === 1);
+            },
+        });
+        Object.defineProperty(elm, 'childElementCount', {
+            get() {
+                return elm.children.length;
+            },
+        });
+        Object.defineProperty(elm, 'childNodes', {
+            get() {
+                const childNodes = childNodesFn.call(this);
+                if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 &&
+                    getHostRef(this).$flags$ & 2 /* hasRendered */) {
+                    const result = new FakeNodeList();
+                    for (let i = 0; i < childNodes.length; i++) {
+                        const slot = childNodes[i]['s-nr'];
+                        if (slot) {
+                            result.push(slot);
+                        }
+                    }
+                    return result;
+                }
+                return FakeNodeList.from(childNodes);
+            },
+        });
+    }
+};
+const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';
+const getHostSlotNode = (childNodes, slotName) => {
+    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.childNodes, 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 bootstrapLazy = (lazyBundles, options = {}) => {
-    if (BUILD.profile) {
+    if (BUILD.profile && performance.mark) {
         performance.mark('st:app:start');
     }
     installDevTools();
@@ -2420,8 +2414,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     let i = 0;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
-    if (options.syncQueue) {
-        plt.$flags$ |= 4 /* queueSync */;
+    if (BUILD.asyncQueue) {
+        if (options.syncQueue) {
+            plt.$flags$ |= 4 /* queueSync */;
+        }
     }
     if (BUILD.hydrateClientSide) {
         // If the app is already hydrated there is not point to disable the
@@ -2433,7 +2429,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
         }
     }
-    lazyBundles.forEach(lazyBundle => lazyBundle[1].forEach(compactMeta => {
+    lazyBundles.map(lazyBundle => lazyBundle[1].map(compactMeta => {
         const cmpMeta = {
             $flags$: compactMeta[0],
             $tagName$: compactMeta[1],
@@ -2452,23 +2448,25 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
         if (BUILD.watchCallback) {
             cmpMeta.$watchers$ = {};
         }
-        if (BUILD.shadowDom && !supportsShadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+        if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
         }
-        const tagName = cmpMeta.$tagName$;
+        const tagName = BUILD.transformTagName && options.transformTagName
+            ? options.transformTagName(cmpMeta.$tagName$)
+            : cmpMeta.$tagName$;
         const HostElement = class extends HTMLElement {
             // RindoLazyHost
             constructor(self) {
                 // @ts-ignore
                 super(self);
                 self = this;
-                registerHost(self);
+                registerHost(self, cmpMeta);
                 if (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 (supportsShadowDom) {
+                    if (supportsShadow) {
                         if (BUILD.shadowDelegatesFocus) {
                             self.attachShadow({
                                 mode: 'open',
@@ -2483,6 +2481,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                         self.shadowRoot = self;
                     }
                 }
+                if (BUILD.slotChildNodesFix) {
+                    patchChildSlotNodes(self, cmpMeta);
+                }
             }
             connectedCallback() {
                 if (appLoadFallback) {
@@ -2494,31 +2495,28 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                     deferredConnectedCallbacks.push(this);
                 }
                 else {
-                    plt.jmp(() => connectedCallback(this, cmpMeta));
+                    plt.jmp(() => connectedCallback(this));
                 }
             }
             disconnectedCallback() {
                 plt.jmp(() => disconnectedCallback(this));
             }
-            forceUpdate() {
-                forceUpdate(this, cmpMeta);
-            }
             componentOnReady() {
                 return getHostRef(this).$onReadyPromise$;
             }
         };
         if (BUILD.cloneNodeFix) {
-            cloneNodeFix(HostElement.prototype);
+            patchCloneNode(HostElement.prototype);
         }
         if (BUILD.appendChildSlotFix) {
-            appendChildSlotFix(HostElement.prototype);
+            patchSlotAppendChild(HostElement.prototype);
         }
         if (BUILD.hotModuleReplacement) {
             HostElement.prototype['s-hmr'] = function (hmrVersionId) {
                 hmrStart(this, cmpMeta, hmrVersionId);
             };
         }
-        cmpMeta.$lazyBundleIds$ = lazyBundle[0];
+        cmpMeta.$lazyBundleId$ = lazyBundle[0];
         if (!exclude.includes(tagName) && !customElements.get(tagName)) {
             cmpTags.push(tagName);
             customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
@@ -2531,115 +2529,25 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
-    if (deferredConnectedCallbacks.length > 0) {
-        deferredConnectedCallbacks.forEach(host => host.connectedCallback());
+    if (deferredConnectedCallbacks.length) {
+        deferredConnectedCallbacks.map(host => host.connectedCallback());
     }
     else {
         if (BUILD.profile) {
-            plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30, 'timeout'));
+            plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30, 'timeout')));
         }
         else {
-            plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
+            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 (BUILD.member) {
-        cmpMeta.$members$ = compactMeta[2];
-    }
-    if (BUILD.hostListener) {
-        cmpMeta.$listeners$ = compactMeta[3];
-    }
-    if (BUILD.watchCallback) {
-        cmpMeta.$watchers$ = Cstr.$watchers$;
-    }
-    if (BUILD.reflect) {
-        cmpMeta.$attrsToReflect$ = [];
-    }
-    if (BUILD.shadowDom && !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 (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 (BUILD.reflect) {
-        cmpMeta.$attrsToReflect$ = [];
-    }
-    if (BUILD.shadowDom && !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 = getElement(ref);
-    return {
-        emit: (detail) => {
-            if (BUILD.isDev && !elm.isConnected) {
-                consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
-            }
-            const ev = new (BUILD.hydrateServerSide ? 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, plt.$resourcesUrl$);
-    return (assetUrl.origin !== win.location.origin)
-        ? assetUrl.href
-        : assetUrl.pathname;
+    return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
 };
+const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
 const getConnect = (_ref, tagName) => {
     const componentOnReady = () => {
         let elm = doc.querySelector(tagName);
@@ -2650,8 +2558,7 @@ const getConnect = (_ref, tagName) => {
         return typeof elm.componentOnReady === 'function' ? elm.componentOnReady() : Promise.resolve(elm);
     };
     const create = (...args) => {
-        return componentOnReady()
-            .then(el => el.create(...args));
+        return componentOnReady().then(el => el.create(...args));
     };
     return {
         create,
@@ -2684,18 +2591,18 @@ const getContext = (_elm, context) => {
             tick: {
                 then(cb) {
                     return nextTick(cb);
-                }
-            }
+                },
+            },
         };
     }
     return undefined;
 };
-const getElement = (ref) => BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
-const insertVdomAnnotations = (doc) => {
+const insertVdomAnnotations = (doc, staticComponents) => {
     if (doc != null) {
         const docData = {
             hostIds: 0,
-            rootLevelIds: 0
+            rootLevelIds: 0,
+            staticComponents: new Set(staticComponents),
         };
         const orgLocationNodes = [];
         parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
@@ -2758,9 +2665,9 @@ const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
     if (node.nodeType === 1 /* ElementNode */) {
         node.childNodes.forEach(childNode => {
             const hostRef = getHostRef(childNode);
-            if (hostRef != null) {
+            if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
                 const cmpData = {
-                    nodeIds: 0
+                    nodeIds: 0,
                 };
                 insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData);
             }
@@ -2781,6 +2688,17 @@ const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
                 insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
             });
         }
+        if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute('c-id')) {
+            const parent = hostElm.parentElement;
+            if (parent && parent.childNodes) {
+                const parentChildNodes = Array.from(parent.childNodes);
+                const comment = parentChildNodes.find(node => node.nodeType === 8 /* CommentNode */ && node['s-sr']);
+                if (comment) {
+                    const index = parentChildNodes.indexOf(hostElm) - 1;
+                    vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment['s-host-id']}.${comment['s-node-id']}.0.${index}`);
+                }
+            }
+        }
     }
 };
 const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
@@ -2797,7 +2715,8 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
     }
     else if (childElm.nodeType === 3 /* TextNode */) {
         const parentNode = childElm.parentNode;
-        if (parentNode.nodeName !== 'STYLE') {
+        const nodeName = parentNode.nodeName;
+        if (nodeName !== 'STYLE' && nodeName !== 'SCRIPT') {
             const textNodeId = `${TEXT_NODE_ID}.${childId}`;
             const commentBeforeTextNode = doc.createComment(textNodeId);
             parentNode.insertBefore(commentBeforeTextNode, childElm);
@@ -2805,7 +2724,7 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
     }
     else if (childElm.nodeType === 8 /* CommentNode */) {
         if (childElm['s-sr']) {
-            const slotName = (childElm['s-sn'] || '');
+            const slotName = childElm['s-sn'] || '';
             const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;
             childElm.nodeValue = slotNodeId;
         }
@@ -2817,4 +2736,159 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
         });
     }
 };
-export { Build, CSS, Context, H, H as HTMLElement, Host, RINDO_DEV_MODE, attachShadow, bootstrapLazy, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingElement, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, moduleCache, nextTick, parsePropertyValue, patchBrowser, patchCloneNodeFix, patchDynamicImport, patchEsm, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, proxyNative, readTask, registerHost, registerInstance, renderVdom, setMode, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadowDom, win, writeTask };
+const setPlatformOptions = (opts) => Object.assign(plt, opts);
+const Fragment = (_, children) => children;
+const hostRefs = new WeakMap();
+const getHostRef = (ref) => hostRefs.get(ref);
+const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
+const registerHost = (elm, cmpMeta) => {
+    const hostRef = {
+        $flags$: 0,
+        $hostElement$: elm,
+        $cmpMeta$: cmpMeta,
+        $instanceValues$: new Map(),
+    };
+    if (BUILD.isDev) {
+        hostRef.$renderCount$ = 0;
+    }
+    if (BUILD.method && BUILD.lazyLoad) {
+        hostRef.$onInstancePromise$ = new Promise(r => (hostRef.$onInstanceResolve$ = r));
+    }
+    if (BUILD.asyncLoading) {
+        hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
+        elm['s-p'] = [];
+        elm['s-rc'] = [];
+    }
+    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+    return hostRefs.set(elm, hostRef);
+};
+const isMemberInElement = (elm, memberName) => memberName in elm;
+const consoleError = (e, el) => (customError || console.error)(e, el);
+const RINDO_DEV_MODE = BUILD.isTesting
+    ? ['RINDO:'] // E2E testing
+    : [
+        '%crindo',
+        'color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px',
+    ];
+const consoleDevError = (...m) => console.error(...RINDO_DEV_MODE, ...m);
+const consoleDevWarn = (...m) => console.warn(...RINDO_DEV_MODE, ...m);
+const consoleDevInfo = (...m) => console.info(...RINDO_DEV_MODE, ...m);
+const setErrorHandler = (handler) => (customError = handler);
+const cmpModules = /*@__PURE__*/ new Map();
+const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
+    // loadModuleImport
+    const exportName = cmpMeta.$tagName$.replace(/-/g, '_');
+    const bundleId = cmpMeta.$lazyBundleId$;
+    if (BUILD.isDev && typeof bundleId !== 'string') {
+        consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`);
+        return undefined;
+    }
+    const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
+    if (module) {
+        return module[exportName];
+    }
+    return import(
+    /* webpackInclude: /\.entry\.js$/ */
+    /* webpackExclude: /\.system\.entry\.js$/ */
+    /* webpackMode: "lazy" */
+    `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`).then(importedModule => {
+        if (!BUILD.hotModuleReplacement) {
+            cmpModules.set(bundleId, importedModule);
+        }
+        return importedModule[exportName];
+    }, consoleError);
+};
+const styles = new Map();
+const modeResolutionChain = [];
+const queueDomReads = [];
+const queueDomWrites = [];
+const queueDomWritesLow = [];
+const queueTask = (queue, write) => (cb) => {
+    queue.push(cb);
+    if (!queuePending) {
+        queuePending = true;
+        if (write && plt.$flags$ & 4 /* queueSync */) {
+            nextTick(flush);
+        }
+        else {
+            plt.raf(flush);
+        }
+    }
+};
+const consume = (queue) => {
+    for (let i = 0; i < queue.length; i++) {
+        try {
+            queue[i](performance.now());
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    queue.length = 0;
+};
+const consumeTimeout = (queue, timeout) => {
+    let i = 0;
+    let ts = 0;
+    while (i < queue.length && (ts = performance.now()) < timeout) {
+        try {
+            queue[i++](ts);
+        }
+        catch (e) {
+            consoleError(e);
+        }
+    }
+    if (i === queue.length) {
+        queue.length = 0;
+    }
+    else if (i !== 0) {
+        queue.splice(0, i);
+    }
+};
+const flush = () => {
+    if (BUILD.asyncQueue) {
+        queueCongestion++;
+    }
+    // always force a bunch of medium callbacks to run, but still have
+    // a throttle on how many can run in a certain time
+    // DOM READS!!!
+    consume(queueDomReads);
+    // DOM WRITES!!!
+    if (BUILD.asyncQueue) {
+        const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* appLoaded */
+            ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0))
+            : Infinity;
+        consumeTimeout(queueDomWrites, timeout);
+        consumeTimeout(queueDomWritesLow, timeout);
+        if (queueDomWrites.length > 0) {
+            queueDomWritesLow.push(...queueDomWrites);
+            queueDomWrites.length = 0;
+        }
+        if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) {
+            // still more to do yet, but we've run out of time
+            // let's let this thing cool off and try again in the next tick
+            plt.raf(flush);
+        }
+        else {
+            queueCongestion = 0;
+        }
+    }
+    else {
+        consume(queueDomWrites);
+        if ((queuePending = queueDomReads.length > 0)) {
+            // still more to do yet, but we've run out of time
+            // let's let this thing cool off and try again in the next tick
+            plt.raf(flush);
+        }
+    }
+};
+const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
+const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
+const Build = {
+    isDev: BUILD.isDev ? true : false,
+    isBrowser: true,
+    isServer: false,
+    isTesting: BUILD.isTesting ? true : false,
+};
+export { BUILD, Env, NAMESPACE } from '@rindo/core/internal/app-data';
+export { Build, CSS, Context, Fragment, H, H as HTMLElement, Host, RINDO_DEV_MODE, addHostEventListeners, attachShadow, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getConnect, getContext, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setPlatformOptions, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };