@rindo/core 1.17.4 → 2.5.2

package/internal/client/index.js

@@ -1,6 +1,7 @@
 let scopeId;
 let contentRef;
 let hostTagName;
+let customError;
 let i = 0;
 let useNativeShadowDom = false;
 let checkSlotFallbackVisibility = false;
@@ -10,7 +11,7 @@ let renderingRef = null;
 let queueCongestion = 0;
 let queuePending = false;
 /*
- Rindo Client Platform v0.0.0-dev.20221104122636 | MIT Licensed | https://rindojs.web.app
+ 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 : {};
@@ -27,7 +28,9 @@ const plt = {
     rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
-const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() : true;
+const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom
+    ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
+    : true;
 const supportsListenerOptions = /*@__PURE__*/ (() => {
     let supportsListenerOptions = false;
     try {
@@ -45,7 +48,7 @@ const supportsConstructibleStylesheets = BUILD.constructableCSS
     ? /*@__PURE__*/ (() => {
         try {
             new CSSStyleSheet();
-            return true;
+            return typeof new CSSStyleSheet().replace === 'function';
         }
         catch (e) { }
         return false;
@@ -64,13 +67,13 @@ const addHostEventListeners = (elm, hostRef, listeners, 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 & 16 /* TargetParent */);
+                listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
             }
             else {
                 // 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 & 16 /* TargetParent */));
+                listeners = listeners.filter(([flags]) => !(flags & 32 /* TargetParent */));
             }
         }
         listeners.map(([flags, name, method]) => {
@@ -83,17 +86,22 @@ const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =
     }
 };
 const hostListenerProxy = (hostRef, methodName) => (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);
+    try {
+        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.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            hostRef.$hostElement$[methodName](ev);
         }
     }
-    else {
-        hostRef.$hostElement$[methodName](ev);
+    catch (e) {
+        consoleError(e);
     }
 };
 const getHostListenerTarget = (elm, flags) => {
@@ -101,9 +109,9 @@ const getHostListenerTarget = (elm, flags) => {
         return doc;
     if (BUILD.hostListenerTargetWindow && flags & 8 /* TargetWindow */)
         return win;
-    if (BUILD.hostListenerTargetBody && flags & 32 /* TargetBody */)
+    if (BUILD.hostListenerTargetBody && flags & 16 /* TargetBody */)
         return doc.body;
-    if (BUILD.hostListenerTargetParent && flags & 16 /* TargetParent */)
+    if (BUILD.hostListenerTargetParent && flags & 32 /* TargetParent */)
         return elm.parentElement;
     return elm;
 };
@@ -239,7 +247,9 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                 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;
                 }
@@ -317,8 +327,6 @@ const EMPTY_OBJ = {};
  */
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const HTML_NS = 'http://www.w3.org/1999/xhtml';
-const getCurrentDirectory = process.cwd;
-const exit = process.exit;
 const isDef = (v) => v != null;
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
@@ -354,8 +362,8 @@ const h = (nodeName, vnodeData, ...children) => {
                     child = String(child);
                 }
                 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.
+                    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) {
@@ -395,8 +403,8 @@ Empty objects can also be the cause, look for JSX comments that became objects.`
         }
     }
     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') {
@@ -439,10 +447,7 @@ 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),
+    map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
 };
 const convertToPublic = (node) => ({
     vattrs: node.$attrs$,
@@ -461,7 +466,7 @@ const convertToPrivate = (node) => {
         if (node.vname) {
             vnodeData.name = node.vname;
         }
-        return h(node.vtag, vnodeData, ...node.vchildren || []);
+        return h(node.vtag, vnodeData, ...(node.vchildren || []));
     }
     const vnode = newVNode(node.vtag, node.vtext);
     vnode.$attrs$ = node.vattrs;
@@ -536,7 +541,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 newValue(elm);
             }
         }
-        else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === 'o' && memberName[1] === 'n') {
+        else if (BUILD.vdomListener &&
+            (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,
@@ -637,7 +645,9 @@ 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) {
@@ -676,7 +686,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         }
     }
     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
@@ -684,7 +694,8 @@ 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) {
@@ -692,8 +703,12 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         }
         // 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$));
+            ? 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;
         }
@@ -1011,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;
                         }
                     }
                 }
@@ -1052,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;
@@ -1138,17 +1151,17 @@ const renderVdom = (hostRef, 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>
+  );
+}
   `);
     }
     if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
@@ -1189,7 +1202,10 @@ 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);
                 }
@@ -1213,7 +1229,8 @@ render() {
                             }
                         }
                     }
-                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) || nodeToRelocate.nextSibling !== insertBeforeNode) {
+                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
+                        nodeToRelocate.nextSibling !== insertBeforeNode) {
                         // we've checked that it's worth while to relocate
                         // since that the node to relocate
                         // has a different next sibling or parent relocated
@@ -1248,7 +1265,10 @@ render() {
 // 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 originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})` : `[${nodeToRelocate.textContent}]`));
+const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` +
+    (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);
@@ -1285,11 +1305,11 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
         return;
     }
     attachToAncestor(hostRef, hostRef.$ancestorComponent$);
-    // there is no ancestorc omponent or the ancestor component
+    // 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;
+    return BUILD.taskQueue ? writeTask(dispatch) : dispatch();
 };
 const dispatchHooks = (hostRef, isInitialLoad) => {
     const elm = hostRef.$hostElement$;
@@ -1322,7 +1342,7 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-const updateComponent = (hostRef, instance, isInitialLoad) => {
+const updateComponent = async (hostRef, instance, isInitialLoad) => {
     // updateComponent
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
@@ -1335,16 +1355,11 @@ const updateComponent = (hostRef, instance, isInitialLoad) => {
     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(hostRef, callRender(hostRef, instance));
-        }
-        else {
-            elm.textContent = callRender(hostRef, instance);
-        }
+    if (BUILD.hydrateServerSide) {
+        await callRender(hostRef, instance, elm);
+    }
+    else {
+        callRender(hostRef, instance, elm);
     }
     if (BUILD.cssVarShim && plt.$cssShim$) {
         plt.$cssShim$.updateHost(elm);
@@ -1368,7 +1383,7 @@ const updateComponent = (hostRef, instance, isInitialLoad) => {
             }
         }
         catch (e) {
-            consoleError(e);
+            consoleError(e, elm);
         }
     }
     if (BUILD.asyncLoading && rc) {
@@ -1396,7 +1411,7 @@ const updateComponent = (hostRef, instance, isInitialLoad) => {
         postUpdateComponent(hostRef);
     }
 };
-const callRender = (hostRef, instance) => {
+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
@@ -1413,12 +1428,28 @@ const callRender = (hostRef, instance) => {
         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$);
     }
     renderingRef = null;
-    return instance;
+    return null;
 };
 const getRenderingRef = () => renderingRef;
 const postUpdateComponent = (hostRef) => {
@@ -1504,7 +1535,8 @@ const forceUpdate = (ref) => {
     if (BUILD.updatable) {
         const hostRef = getHostRef(ref);
         const isConnected = hostRef.$hostElement$.isConnected;
-        if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (isConnected &&
+            (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
             scheduleUpdate(hostRef, false);
         }
         // Returns "true" when the forced update was successfully scheduled
@@ -1551,7 +1583,11 @@ const emitLifecycleEvent = (elm, lifecycleName) => {
         });
     }
 };
-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) {
@@ -1826,12 +1862,13 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
                             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;
@@ -1855,7 +1892,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
-            if ((BUILD.prop || BUILD.state) && (memberFlags & 31 /* Prop */ || ((!BUILD.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
+            if ((BUILD.prop || BUILD.state) &&
+                (memberFlags & 31 /* Prop */ ||
+                    ((!BUILD.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
                 // proxyComponent - prop
                 Object.defineProperty(prototype, memberName, {
                     get() {
@@ -1863,14 +1902,20 @@ 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);
@@ -1879,7 +1924,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     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) {
@@ -1915,7 +1963,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 };
 const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
-    if ((BUILD.lazyLoad || BUILD.hydrateServerSide || BUILD.style) && (hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
+    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 */;
@@ -1985,7 +2034,10 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             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 */) {
+                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 */));
@@ -2031,7 +2083,9 @@ const connectedCallback = (elm) => {
                 hostId = elm.getAttribute(HYDRATE_ID);
                 if (hostId) {
                     if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                        const scopeId = BUILD.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode')) : addStyle(elm.shadowRoot, cmpMeta);
+                        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);
@@ -2042,7 +2096,9 @@ const connectedCallback = (elm) => {
                 // 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 || BUILD.shadowDom) && cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
+                if (BUILD.hydrateServerSide ||
+                    ((BUILD.slot || BUILD.shadowDom) &&
+                        cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */))) {
                     setContentReference(elm);
                 }
             }
@@ -2053,7 +2109,10 @@ const connectedCallback = (elm) => {
                 while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
                     // climb up the ancestors looking for the first
                     // component that hasn't finished its lifecycle update yet
-                    if ((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
@@ -2229,10 +2288,24 @@ const patchCloneNode = (HostElementPrototype) => {
         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'];
+            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]);
+                nonRindoNode = rindoPrivates.every(privateField => !srcNode.childNodes[i][privateField]);
                 if (slotted) {
                     if (BUILD.appendChildSlotFix && clonedNode.__appendChild) {
                         clonedNode.__appendChild(slotted.cloneNode(true));
@@ -2283,7 +2356,8 @@ const patchChildSlotNodes = (elm, cmpMeta) => {
         Object.defineProperty(elm, 'childNodes', {
             get() {
                 const childNodes = childNodesFn.call(this);
-                if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 && getHostRef(this).$flags$ & 2 /* hasRendered */) {
+                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'];
@@ -2377,7 +2451,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
         if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
         }
-        const tagName = BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
+        const tagName = BUILD.transformTagName && options.transformTagName
+            ? options.transformTagName(cmpMeta.$tagName$)
+            : cmpMeta.$tagName$;
         const HostElement = class extends HTMLElement {
             // RindoLazyHost
             constructor(self) {
@@ -2425,17 +2501,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             disconnectedCallback() {
                 plt.jmp(() => disconnectedCallback(this));
             }
-            forceUpdate() {
-                if (BUILD.isDev) {
-                    consoleDevWarn(`element.forceUpdate() is deprecated, use the "forceUpdate" function from "@rindo/core" instead:
-
-  import { forceUpdate } from ‘@rindo/core’;
-
-  forceUpdate(this);
-  forceUpdate(element);`);
-                }
-                forceUpdate(this);
-            }
             componentOnReady() {
                 return getHostRef(this).$onReadyPromise$;
             }
@@ -2650,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);
@@ -2670,6 +2736,8 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
         });
     }
 };
+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);
@@ -2695,13 +2763,17 @@ const registerHost = (elm, cmpMeta) => {
     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'];
+    : [
+        '%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 consoleError = (e) => console.error(e);
+const setErrorHandler = (handler) => (customError = handler);
 const cmpModules = /*@__PURE__*/ new Map();
 const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     // loadModuleImport
@@ -2782,7 +2854,9 @@ const flush = () => {
     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;
+        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) {
@@ -2816,5 +2890,5 @@ const Build = {
     isServer: false,
     isTesting: BUILD.isTesting ? true : false,
 };
-export { BUILD, NAMESPACE } from '@rindo/core/internal/app-data';
-export { Build, CSS, Context, 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, setMode, setValue, styles, supportsConstructibleStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };
+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 };