@qwik.dev/core 2.0.0-beta.23 → 2.0.0-beta.24

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.23-dev+03de42d
+ * @qwik.dev/core 2.0.0-beta.24-dev+314726b
  * Copyright QwikDev. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -9,13 +9,6 @@ import { isDev, isServer, isBrowser } from '@qwik.dev/core/build';
 export { isBrowser, isDev, isServer } from '@qwik.dev/core/build';
 import { p } from '@qwik.dev/core/preloader';
 
-/**
- * QWIK_VERSION
- *
- * @public
- */
-const version = "2.0.0-beta.23-dev+03de42d";
-
 // same as isDev but separate so we can test
 const qDev = globalThis.qDev !== false;
 const qInspector = globalThis.qInspector === true;
@@ -79,6 +72,102 @@ const createAndLogError = (asyncThrow, message, ...optionalParams) => {
     return err;
 };
 
+const ASSERT_DISCLAIMER = 'Internal assert, this is likely caused by a bug in Qwik: ';
+/*@__INLINE__*/
+function assertDefined(value, text, ...parts) {
+    if (isDev) {
+        if (value != null) {
+            return;
+        }
+        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
+    }
+}
+/*@__INLINE__*/
+function assertEqual(value1, value2, text, ...parts) {
+    if (isDev) {
+        if (value1 === value2) {
+            return;
+        }
+        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
+    }
+}
+/*@__INLINE__*/
+function assertTrue(value1, text, ...parts) {
+    if (isDev) {
+        if (value1 === true) {
+            return;
+        }
+        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
+    }
+}
+/*@__INLINE__*/
+function assertFalse(value1, text, ...parts) {
+    if (isDev) {
+        if (value1 === false) {
+            return;
+        }
+        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
+    }
+}
+/*@__INLINE__*/
+function assertNumber(value1, text, ...parts) {
+    if (isDev) {
+        if (typeof value1 === 'number') {
+            return;
+        }
+        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
+    }
+}
+
+/** @internal */
+const mapApp_findIndx = (array, key, start) => {
+    isDev && assertTrue(start % 2 === 0, 'Expecting even number.');
+    let bottom = start >> 1;
+    let top = (array.length - 2) >> 1;
+    while (bottom <= top) {
+        const mid = bottom + ((top - bottom) >> 1);
+        const midKey = array[mid << 1];
+        if (midKey === key) {
+            return mid << 1;
+        }
+        if (midKey < key) {
+            bottom = mid + 1;
+        }
+        else {
+            top = mid - 1;
+        }
+    }
+    return (bottom << 1) ^ -1;
+};
+/** @internal */
+const mapArray_set = (array, key, value, start, allowNullValue = false) => {
+    const indx = mapApp_findIndx(array, key, start);
+    if (indx >= 0) {
+        if (value == null && !allowNullValue) {
+            array.splice(indx, 2);
+        }
+        else {
+            array[indx + 1] = value;
+        }
+    }
+    else if (value != null || allowNullValue) {
+        array.splice(indx ^ -1, 0, key, value);
+    }
+};
+/** @internal */
+const mapArray_get = (array, key, start) => {
+    const indx = mapApp_findIndx(array, key, start);
+    if (indx >= 0) {
+        return array[indx + 1];
+    }
+    else {
+        return null;
+    }
+};
+const mapArray_has = (array, key, start) => {
+    return mapApp_findIndx(array, key, start) >= 0;
+};
+
 /** @private */
 const isSerializableObject = (v) => {
     const proto = Object.getPrototypeOf(v);
@@ -134,7 +223,7 @@ const codeToText = (code, ...parts) => {
             'Materialize error: missing element: {{0}} {{1}} {{2}}', // 27
             'Cannot coerce a Signal, use `.value` instead', // 28
             'useComputed$ QRL {{0}} {{1}} cannot return a Promise', // 29
-            'ComputedSignal is read-only', // 30
+            '===\nQwik version {{0}} already imported while importing {{1}}.\nThis can lead to issues due to duplicated shared structures.\nVerify that the Qwik libraries you\'re using are in "resolve.noExternal[]" and in "optimizeDeps.exclude".\n===\n', // 30
             'WrappedSignal is read-only', // 31
             'Attribute value is unsafe for SSR {{0}}', // 32
             'SerializerSymbol function returned rejected promise', // 33
@@ -154,7 +243,8 @@ const codeToText = (code, ...parts) => {
     }
     else {
         // cute little hack to give roughly the correct line number. Update the line number if it shifts.
-        return `Code(Q${code}) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L${8 + code}`;
+        // TODO change the URL after merging into main
+        return `Code(Q${code}) https://github.com/QwikDev/qwik/blob/build/v2/packages/qwik/src/core/shared/error/error.ts#${parts.join()}L${9 + code}`;
     }
 };
 const qError = (code, errorMessageArgs = []) => {
@@ -186,6 +276,112 @@ const getSymbolHash = (symbolName) => {
     return symbolName;
 };
 
+/**
+ * A friendly name tag for a VirtualVNode.
+ *
+ * Theses are used to give a name to a VirtualVNode. This is useful for debugging and testing.
+ *
+ * The name is only added in development mode and is not included in production builds.
+ */
+const DEBUG_TYPE = 'q:type';
+const VirtualTypeName = {
+    ["V" /* VirtualType.Virtual */]: /* ********* */ 'Virtual', //
+    ["F" /* VirtualType.Fragment */]: /* ******** */ 'Fragment', //
+    ["S" /* VirtualType.WrappedSignal */]: /* *** */ 'Signal', //
+    ["A" /* VirtualType.Awaited */]: /* ********* */ 'Awaited', //
+    ["C" /* VirtualType.Component */]: /* ******* */ 'Component', //
+    ["I" /* VirtualType.InlineComponent */]: /* * */ 'InlineComponent', //
+    ["P" /* VirtualType.Projection */]: /* ****** */ 'Projection', //
+};
+
+/**
+ * @file
+ *
+ *   VNodeData is additional information which allows the `vnode` to recover virtual VNode information
+ *   from the HTML.
+ */
+/**
+ * VNodeDataSeparator contains information about splitting up the VNodeData and attaching it to the
+ * HTML.
+ */
+const VNodeDataSeparator = {
+    REFERENCE: /* ******** */ 126, // `~` is a reference to the node. Save it.
+    ADVANCE_1: /* ********* */ 33, // `!` is vNodeData separator skipping 0. (ie next vNode)
+    ADVANCE_8192: /* ****** */ 46, // `.` is vNodeData separator skipping 4096.
+};
+/**
+ * VNodeDataChar contains information about the VNodeData used for encoding props.
+ *
+ * Available character ranges: 59 - 64, 91 - 94, 96, 123 - 126
+ */
+const VNodeDataChar = {
+    OPEN: /* ************** */ 123, // `{` is the start of the VNodeData for a virtual element.
+    CLOSE: /* ************* */ 125, // `}` is the end of the VNodeData for a virtual element.
+    SCOPED_STYLE: /* ******* */ 59, // `;` - `q:sstyle` - Style attribute.
+    RENDER_FN: /* ********** */ 60, // `<` - `q:renderFn' - Component QRL render function (body)
+    ID: /* ***************** */ 61, // `=` - `q:id` - ID of the element.
+    PROPS: /* ************** */ 62, // `>` - `q:props' - Component Props
+    SLOT_PARENT: /* ******** */ 63, // `?` - `q:sparent` - Slot parent.
+    KEY: /* **************** */ 64, // `@` - `q:key` - Element key.
+    SEQ: /* **************** */ 91, // `[` - `q:seq' - Seq value from `useSequentialScope()`
+    CONTEXT: /* ************ */ 93, // `]` - `q:ctx' - Component context/props
+    SEQ_IDX: /* ************ */ 94, // `^` - `q:seqIdx' - Sequential scope id
+    BACK_REFS: /* ********** */ 96, // '`' - `q:brefs' - Effect dependencies/subscriptions
+    SEPARATOR: /* ********* */ 124, // `|` - Separator char to encode any key/value pairs.
+    SLOT: /* ************** */ 126};
+
+function escapeHTML(html) {
+    let escapedHTML = '';
+    const length = html.length;
+    let idx = 0;
+    let lastIdx = idx;
+    for (; idx < length; idx++) {
+        // We get the charCode NOT string. String would allocate memory.
+        const ch = html.charCodeAt(idx);
+        // Every time we concat a string we allocate memory. We want to minimize that.
+        if (ch === 60 /* < */) {
+            escapedHTML += html.substring(lastIdx, idx) + '&lt;';
+        }
+        else if (ch === 62 /* > */) {
+            escapedHTML += html.substring(lastIdx, idx) + '&gt;';
+        }
+        else if (ch === 38 /* & */) {
+            escapedHTML += html.substring(lastIdx, idx) + '&amp;';
+        }
+        else if (ch === 34 /* " */) {
+            escapedHTML += html.substring(lastIdx, idx) + '&quot;';
+        }
+        else if (ch === 39 /* ' */) {
+            escapedHTML += html.substring(lastIdx, idx) + '&#39;';
+        }
+        else {
+            continue;
+        }
+        lastIdx = idx + 1;
+    }
+    if (lastIdx === 0) {
+        // This is most common case, just return previous string no memory allocation.
+        return html;
+    }
+    else {
+        // Add the tail of replacement.
+        return escapedHTML + html.substring(lastIdx);
+    }
+}
+function decodeVNodeDataString(str) {
+    let result = '';
+    for (let i = 0; i < str.length; i++) {
+        if (str.charAt(i) === '\\' && i + 1 < str.length) {
+            result += str.charAt(i + 1);
+            i++;
+        }
+        else {
+            result += str.charAt(i);
+        }
+    }
+    return result;
+}
+
 /** State factory of the component. */
 const OnRenderProp = 'q:renderFn';
 /** Component style content prefix */
@@ -254,127 +450,15 @@ const NON_SERIALIZABLE_MARKER_PREFIX = ':';
 const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
 const USE_ON_LOCAL_SEQ_IDX = NON_SERIALIZABLE_MARKER_PREFIX + 'onIdx';
 const USE_ON_LOCAL_FLAGS = NON_SERIALIZABLE_MARKER_PREFIX + 'onFlags';
-// comment nodes
-const FLUSH_COMMENT = 'qkssr-f';
-const STREAM_BLOCK_START_COMMENT = 'qkssr-pu';
-const STREAM_BLOCK_END_COMMENT = 'qkssr-po';
 const Q_PROPS_SEPARATOR = ':';
 const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
 const qwikInspectorAttr = 'data-qwik-inspector';
 const debugStyleScopeIdPrefixAttr = '__scopedStyleIdPrefix__';
 
-// keep this import from core/build so the cjs build works
-const createPlatform = () => {
-    return {
-        isServer,
-        importSymbol(containerEl, url, symbolName) {
-            if (isServer) {
-                const hash = getSymbolHash(symbolName);
-                const regSym = globalThis.__qwik_reg_symbols?.get(hash);
-                if (regSym) {
-                    return regSym;
-                }
-            }
-            if (!url) {
-                throw qError(14 /* QError.qrlMissingChunk */, [symbolName]);
-            }
-            if (!containerEl) {
-                throw qError(13 /* QError.qrlMissingContainer */, [url, symbolName]);
-            }
-            const urlDoc = toUrl(containerEl.ownerDocument, containerEl, url).toString();
-            const urlCopy = new URL(urlDoc);
-            urlCopy.hash = '';
-            const importURL = urlCopy.href;
-            return import(/* @vite-ignore */ importURL).then((mod) => {
-                return mod[symbolName];
-            });
-        },
-        raf: (fn) => {
-            return new Promise((resolve) => {
-                requestAnimationFrame(() => {
-                    resolve(fn());
-                });
-            });
-        },
-        chunkForSymbol(symbolName, chunk) {
-            return [symbolName, chunk ?? '_'];
-        },
-    };
-};
-/**
- * Convert relative base URI and relative URL into a fully qualified URL.
- *
- * @param base -`QRL`s are relative, and therefore they need a base for resolution.
- *
- *   - `Element` use `base.ownerDocument.baseURI`
- *   - `Document` use `base.baseURI`
- *   - `string` use `base` as is
- *   - `QConfig` use `base.baseURI`
- *
- * @param url - Relative URL
- * @returns Fully qualified URL.
- */
-const toUrl = (doc, containerEl, url) => {
-    const baseURI = doc.baseURI;
-    const base = new URL(containerEl.getAttribute(QBaseAttr) ?? baseURI, baseURI);
-    return new URL(url, base);
-};
-let _platform = /*#__PURE__ */ createPlatform();
-// <docs markdown="./readme.md#setPlatform">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ./readme.md#setPlatform instead and run `pnpm docs.sync`)
-/**
- * Sets the `CorePlatform`.
- *
- * This is useful to override the platform in tests to change the behavior of,
- * `requestAnimationFrame`, and import resolution.
- *
- * @param doc - The document of the application for which the platform is needed.
- * @param platform - The platform to use.
- * @public
- */
-// </docs>
-const setPlatform = (plt) => (_platform = plt);
-// <docs markdown="./readme.md#getPlatform">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ./readme.md#getPlatform instead and run `pnpm docs.sync`)
-/**
- * Retrieve the `CorePlatform`.
- *
- * The `CorePlatform` is also responsible for retrieving the Manifest, that contains mappings from
- * symbols to javascript import chunks. For this reason, `CorePlatform` can't be global, but is
- * specific to the application currently running. On server it is possible that many different
- * applications are running in a single server instance, and for this reason the `CorePlatform` is
- * associated with the application document.
- *
- * @param docOrNode - The document (or node) of the application for which the platform is needed.
- * @public
- */
-// </docs>
-const getPlatform = () => {
-    return _platform;
-};
-const isServerPlatform = () => {
-    if (qDynamicPlatform) {
-        return _platform.isServer;
-    }
-    return false;
-};
-
-const isNode = (value) => {
-    return value && typeof value.nodeType === 'number';
-};
-const isDocument = (value) => {
-    return value.nodeType === 9;
-};
-const isElement$1 = (value) => {
-    return value.nodeType === 1;
-};
-
-const MAX_RETRY_ON_PROMISE_COUNT = 100;
-const isPromise = (value) => {
-    // not using "value instanceof Promise" to have zone.js support
-    return !!value && typeof value == 'object' && typeof value.then === 'function';
+const MAX_RETRY_ON_PROMISE_COUNT = 100;
+const isPromise = (value) => {
+    // not using "value instanceof Promise" to have zone.js support
+    return !!value && typeof value == 'object' && typeof value.then === 'function';
 };
 const safeCall = (call, thenFn, rejectFn) => {
     try {
@@ -455,101 +539,583 @@ function retryOnPromise(fn, onError = justThrow) {
     return ok ? result.catch(retry) : retry(result);
 }
 
-const ASSERT_DISCLAIMER = 'Internal assert, this is likely caused by a bug in Qwik: ';
-function assertDefined(value, text, ...parts) {
-    if (qDev) {
-        if (value != null) {
-            return;
+const styleContent = (styleId) => {
+    return ComponentStylesPrefixContent + styleId;
+};
+function isClassAttr(key) {
+    return key === 'class';
+}
+function convertScopedStyleIdsToArray(scopedStyleIds) {
+    return scopedStyleIds?.split(' ') ?? null;
+}
+function convertStyleIdsToString(scopedStyleIds) {
+    return Array.from(scopedStyleIds).join(' ');
+}
+const addComponentStylePrefix = (styleId) => {
+    if (styleId) {
+        let idx = 0;
+        do {
+            styleId = styleId.substring(0, idx) + styleContent(styleId.substring(idx));
+        } while ((idx = styleId.indexOf(' ', idx) + 1) !== 0);
+    }
+    return styleId || null;
+};
+
+/**
+ * Think of `-` as an escape character which makes the next character uppercase. `--` is just `-`.
+ *
+ * Rules for JSX property event names starting with `on`:
+ *
+ * - Are case insensitive: `onClick$` is same `onclick$`
+ * - A `--` is `-`: `dbl--click` => `dbl-click`
+ * - Become case sensitive if prefixed by `-`: `-Click` is `Click`
+ * - A `-` (not at the beginning) makes next character uppercase: `dbl-click` => `dblClick`
+ */
+const EVENT_SUFFIX = '$';
+const isHtmlAttributeAnEventName = (name) => {
+    return (name.charCodeAt(0) === 113 /* q */ &&
+        name.charCodeAt(1) === 45 /* - */ &&
+        name.charCodeAt(3) === 58 /* : */);
+};
+function jsxEventToHtmlAttribute(jsxEvent) {
+    if (jsxEvent.endsWith(EVENT_SUFFIX)) {
+        const [prefix, idx] = getEventScopeDataFromJsxEvent(jsxEvent);
+        if (idx !== -1) {
+            const name = jsxEvent.slice(idx, -1);
+            return name === 'DOMContentLoaded'
+                ? // The only DOM event that is not all lowercase
+                    prefix + '-d-o-m-content-loaded'
+                : createEventName(name.charAt(0) === '-'
+                    ? // marker for case sensitive event name
+                        name.slice(1)
+                    : name.toLowerCase(), prefix);
         }
-        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
     }
+    return null; // Return null if not matching expected format
 }
-function assertEqual(value1, value2, text, ...parts) {
-    if (qDev) {
-        if (value1 === value2) {
-            return;
-        }
-        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
+function createEventName(event, prefix) {
+    const eventName = fromCamelToKebabCase(event);
+    return prefix + eventName;
+}
+function getEventScopeDataFromJsxEvent(eventName) {
+    let prefix;
+    let idx = -1;
+    // set prefix and idx based on the scope
+    if (eventName.startsWith("on" /* EventNameJSXScope.on */)) {
+        prefix = "q-e:" /* EventNameHtmlScope.on */;
+        idx = 2;
     }
+    else if (eventName.startsWith("window:on" /* EventNameJSXScope.window */)) {
+        prefix = "q-w:" /* EventNameHtmlScope.window */;
+        idx = 9;
+    }
+    else if (eventName.startsWith("document:on" /* EventNameJSXScope.document */)) {
+        prefix = "q-d:" /* EventNameHtmlScope.document */;
+        idx = 11;
+    }
+    return [prefix, idx];
 }
-function assertTrue(value1, text, ...parts) {
-    if (qDev) {
-        if (value1 === true) {
-            return;
+function isPreventDefault(key) {
+    return key.startsWith('preventdefault:');
+}
+/** Converts a camelCase string to kebab-case. This is used for event names. */
+const fromCamelToKebabCase = (text) => {
+    return text.replace(/([A-Z-])/g, (a) => '-' + a.toLowerCase());
+};
+/** E.g. `"q-e:click"` => `['e', 'click']` */
+const getEventDataFromHtmlAttribute = (htmlKey) => [
+    htmlKey.charAt(2),
+    htmlKey.substring(4),
+];
+/** E.g. `"e:click"`, `"w:load"` */
+const getScopedEventName = (scope, eventName) => scope + ':' + eventName;
+
+/** CSS properties which accept numbers but are not in units of "px". */
+const unitlessNumbers = new Set([
+    'animationIterationCount',
+    'aspectRatio',
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'columns',
+    'flex',
+    'flexGrow',
+    'flexShrink',
+    'gridArea',
+    'gridRow',
+    'gridRowEnd',
+    'gridRowStart',
+    'gridColumn',
+    'gridColumnEnd',
+    'gridColumnStart',
+    'fontWeight',
+    'lineClamp',
+    'lineHeight',
+    'opacity',
+    'order',
+    'orphans',
+    'scale',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    'MozAnimationIterationCount', // Known Prefixed Properties
+    'MozBoxFlex', // TODO: Remove these since they shouldn't be used in modern code
+    'msFlex',
+    'msFlexPositive',
+    'WebkitAnimationIterationCount',
+    'WebkitBoxFlex',
+    'WebkitBoxOrdinalGroup',
+    'WebkitColumnCount',
+    'WebkitColumns',
+    'WebkitFlex',
+    'WebkitFlexGrow',
+    'WebkitFlexShrink',
+    'WebkitLineClamp',
+]);
+const isUnitlessNumber = (name) => {
+    return unitlessNumbers.has(name);
+};
+
+const hashCode = (text, hash = 0) => {
+    for (let i = 0; i < text.length; i++) {
+        const chr = text.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Number(Math.abs(hash)).toString(36);
+};
+
+const serializeClass = (obj) => {
+    if (!obj) {
+        return '';
+    }
+    if (isString(obj)) {
+        return obj.trim();
+    }
+    const classes = [];
+    if (isArray(obj)) {
+        for (const o of obj) {
+            const classList = serializeClass(o);
+            if (classList) {
+                classes.push(classList);
+            }
         }
-        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
     }
-}
-function assertFalse(value1, text, ...parts) {
-    if (qDev) {
-        if (value1 === false) {
-            return;
+    else {
+        for (const [key, value] of Object.entries(obj)) {
+            if (value) {
+                classes.push(key.trim());
+            }
         }
-        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
     }
+    return classes.join(' ');
+};
+// Unlike fromCamelToKebabCase, this leaves `-` so that `background-color` stays `background-color`
+const fromCamelToKebabCaseWithDash = (text) => {
+    return text.replace(/([A-Z])/g, '-$1').toLowerCase();
+};
+const stringifyStyle = (obj) => {
+    if (obj == null) {
+        return '';
+    }
+    if (typeof obj == 'object') {
+        if (isArray(obj)) {
+            throw qError(0 /* QError.stringifyClassOrStyle */, [obj, 'style']);
+        }
+        else {
+            const chunks = [];
+            for (const key in obj) {
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    const value = obj[key];
+                    if (value != null && typeof value !== 'function') {
+                        if (key.startsWith('--')) {
+                            chunks.push(key + ':' + value);
+                        }
+                        else {
+                            chunks.push(fromCamelToKebabCaseWithDash(key) + ':' + setValueForStyle(key, value));
+                        }
+                    }
+                }
+            }
+            return chunks.join(';');
+        }
+    }
+    return String(obj);
+};
+const serializeBooleanOrNumberAttribute = (value) => {
+    return value != null ? String(value) : null;
+};
+function serializeAttribute(key, value, styleScopedId) {
+    if (isClassAttr(key)) {
+        const serializedClass = serializeClass(value);
+        value = styleScopedId
+            ? styleScopedId + (serializedClass.length ? ' ' + serializedClass : serializedClass)
+            : serializedClass;
+    }
+    else if (key === 'style') {
+        value = stringifyStyle(value);
+    }
+    else if (isEnumeratedBooleanAttribute(key) || typeof value === 'number') {
+        // aria attrs, tabindex etc.
+        value = serializeBooleanOrNumberAttribute(value);
+    }
+    else if (value === false || value == null) {
+        value = null;
+    }
+    else if (value === true && isPreventDefault(key)) {
+        value = '';
+    }
+    return value;
 }
-function assertNumber(value1, text, ...parts) {
-    if (qDev) {
-        if (typeof value1 === 'number') {
-            return;
+function isEnumeratedBooleanAttribute(key) {
+    return isAriaAttribute(key) || ['spellcheck', 'draggable', 'contenteditable'].includes(key);
+}
+const setValueForStyle = (styleName, value) => {
+    if (typeof value === 'number' && value !== 0 && !isUnitlessNumber(styleName)) {
+        return value + 'px';
+    }
+    return value;
+};
+function isAriaAttribute(prop) {
+    return prop.startsWith('aria-');
+}
+const styleKey = (qStyles, index) => {
+    assertQrl(qStyles);
+    return `${hashCode(qStyles.$hash$)}-${index}`;
+};
+
+// Browser-specific setup
+const doc = isBrowser ? document : undefined;
+// Determine which rel attribute to use based on browser support
+const rel = isBrowser && doc.createElement('link').relList.supports('modulepreload')
+    ? 'modulePreload'
+    : 'preload';
+const isJSRegex = /\.[mc]?js$/;
+
+const BundleImportState_None = 0;
+const BundleImportState_Preload = 2;
+const BundleImportState_Alias = 3;
+const BundleImportState_Loaded = 4;
+
+let base;
+const makeBundle = (name, deps) => {
+    return {
+        $name$: name,
+        $state$: isJSRegex.test(name) ? BundleImportState_None : BundleImportState_Alias,
+        $deps$: deps,
+        $inverseProbability$: 1,
+        $createdTs$: Date.now(),
+        $waitedMs$: 0,
+        $loadedMs$: 0,
+    };
+};
+const getBundle = (name) => {
+    let bundle = bundles.get(name);
+    if (!bundle) {
+        let deps;
+        bundle = makeBundle(name, deps);
+        bundles.set(name, bundle);
+    }
+    return bundle;
+};
+
+const bundles = new Map();
+let preloadCount = 0;
+const queue = [];
+/**
+ * This is called when a bundle is queued, or finished loading.
+ *
+ * Because Chrome doesn't treat new modulepreloads as higher priority, we only make
+ * maxSimultaneousPreloads links available at a time, so that when a new high priority bundle comes
+ * in, it is soon preloaded.
+ *
+ * We make sure to first preload the high priority items.
+ */
+const trigger = () => {
+    if (!queue.length) {
+        return;
+    }
+    while (queue.length) {
+        const bundle = queue[0];
+        const inverseProbability = bundle.$inverseProbability$;
+        const probability = 1 - inverseProbability;
+        const allowedPreloads = // While the graph is not available, we limit to 5 preloads
+                5;
+        // When we're 99% sure, everything needs to be queued
+        if (probability >= 0.99 || preloadCount < allowedPreloads) {
+            queue.shift();
+            preloadOne(bundle);
         }
-        throwErrorAndStop(ASSERT_DISCLAIMER + text, ...parts);
+        else {
+            break;
+        }
+    }
+};
+const preloadOne = (bundle) => {
+    if (bundle.$state$ >= BundleImportState_Preload) {
+        return;
+    }
+    preloadCount++;
+    const start = Date.now();
+    bundle.$waitedMs$ = start - bundle.$createdTs$;
+    bundle.$state$ = BundleImportState_Preload;
+    const link = doc.createElement('link');
+    // Only bundles with state none are js bundles
+    link.href = new URL(`${base}${bundle.$name$}`, doc.baseURI).toString();
+    link.rel = rel;
+    // Needed when rel is 'preload'
+    link.as = 'script';
+    // Handle completion of the preload
+    link.onload = link.onerror = () => {
+        preloadCount--;
+        const end = Date.now();
+        bundle.$loadedMs$ = end - start;
+        bundle.$state$ = BundleImportState_Loaded;
+        // Keep the <head> clean
+        link.remove();
+        // More bundles may be ready to preload
+        trigger();
+    };
+    doc.head.appendChild(link);
+};
+/**
+ * Adjust the probability of a bundle based on the probability of its dependent bundles, and queue
+ * it if it's likely enough to be preloaded.
+ *
+ * Note that if the probability is 100%, we treat the dynamic imports as 99% sure, and both will be
+ * preloaded without limit.
+ *
+ * We also limit "organic" probability to 98% so they don't get unlimited preloads.
+ */
+const adjustProbabilities = (bundle, newInverseProbability, seen) => {
+    if (seen?.has(bundle)) {
+        return;
+    }
+    const previousInverseProbability = bundle.$inverseProbability$;
+    bundle.$inverseProbability$ = newInverseProbability;
+    // Don't propagate tiny changes
+    if (previousInverseProbability - bundle.$inverseProbability$ < 0.01) {
+        return;
+    }
+    if (bundle.$deps$) {
+        seen ||= new Set();
+        seen.add(bundle);
+        const probability = 1 - bundle.$inverseProbability$;
+        for (const dep of bundle.$deps$) {
+            const depBundle = getBundle(dep.$name$);
+            if (depBundle.$inverseProbability$ === 0) {
+                // it's already at max probability
+                continue;
+            }
+            /**
+             * The chance that a dep won't be loaded is 1-(the chance that the dep will be loaded)*(the
+             * chance that the current bundle will be loaded).
+             *
+             * We can multiply this chance together with all other bundle adjustments to get the chance
+             * that a dep will be loaded given all the chances of the other bundles.
+             *
+             * But when we're very likely to load the current bundle, make the dynamic imports very likely
+             * too.
+             */
+            let newInverseProbability;
+            if (probability === 1 || (probability >= 0.99 && depsCount < 100)) {
+                depsCount++;
+                // we're loaded at max probability, so elevate dynamic imports to 99% sure
+                newInverseProbability = Math.min(0.01, 1 - dep.$importProbability$);
+            }
+            else {
+                const newInverseImportProbability = 1 - dep.$importProbability$ * probability;
+                /** We need to undo the previous adjustment */
+                const prevAdjust = dep.$factor$;
+                const factor = newInverseImportProbability / prevAdjust;
+                // limit organic probability to 98%
+                newInverseProbability = Math.max(0.02, depBundle.$inverseProbability$ * factor);
+                dep.$factor$ = factor;
+            }
+            adjustProbabilities(depBundle, newInverseProbability, seen);
+        }
+    }
+};
+const handleBundle = (name, inverseProbability) => {
+    const bundle = getBundle(name);
+    if (bundle && bundle.$inverseProbability$ > inverseProbability) {
+        adjustProbabilities(bundle, inverseProbability);
+    }
+};
+let depsCount;
+const preload = (name, probability) => {
+    if (!name?.length) {
+        return;
     }
+    depsCount = 0;
+    let inverseProbability = 1 - probability ;
+    if (Array.isArray(name)) {
+        // We must process in reverse order to ensure first bundles are handled first
+        for (let i = name.length - 1; i >= 0; i--) {
+            const item = name[i];
+            if (typeof item === 'number') {
+                inverseProbability = 1 - item / 10;
+            }
+            else {
+                handleBundle(item, inverseProbability);
+            }
+        }
+    }
+    else {
+        handleBundle(name, inverseProbability);
+    }
+    if (isBrowser) {
+        trigger();
+    }
+};
+if (isBrowser) {
+    // Get early hints from qwikloader
+    document.addEventListener('qsymbol', (ev) => {
+        const { symbol, href } = ev.detail;
+        // the qrl class doesn't emit href, we don't need to preload
+        if (href) {
+            const hash = symbol.slice(symbol.lastIndexOf('_') + 1);
+            preload(hash, 1);
+        }
+    });
 }
 
+const isObjectEmpty = (obj) => {
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            return false;
+        }
+    }
+    return true;
+};
+
+// Pre-allocated common strings to reduce allocation overhead
+const CLOSE_TAG = '</';
+const ESCAPED_CLOSE_TAG = '<\\/';
+const QUOTE = '"';
+const BRACKET_OPEN = '[';
+const BRACKET_CLOSE = ']';
+const COMMA = ',';
+
 /**
- * A friendly name tag for a VirtualVNode.
+ * QWIK_VERSION
  *
- * Theses are used to give a name to a VirtualVNode. This is useful for debugging and testing.
+ * @public
+ */
+const version = "2.0.0-beta.24-dev+314726b";
+
+// keep this import from core/build so the cjs build works
+const createPlatform = () => {
+    return {
+        isServer,
+        importSymbol(containerEl, url, symbolName) {
+            if (isServer) {
+                const hash = getSymbolHash(symbolName);
+                const regSym = globalThis.__qwik_reg_symbols?.get(hash);
+                if (regSym) {
+                    return regSym;
+                }
+            }
+            if (!url) {
+                throw qError(14 /* QError.qrlMissingChunk */, [symbolName]);
+            }
+            if (!containerEl) {
+                throw qError(13 /* QError.qrlMissingContainer */, [url, symbolName]);
+            }
+            const urlDoc = toUrl(containerEl.ownerDocument, containerEl, url).toString();
+            const urlCopy = new URL(urlDoc);
+            urlCopy.hash = '';
+            const importURL = urlCopy.href;
+            return import(/* @vite-ignore */ importURL).then((mod) => {
+                return mod[symbolName];
+            });
+        },
+        raf: (fn) => {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    resolve(fn());
+                });
+            });
+        },
+        chunkForSymbol(symbolName, chunk) {
+            return [symbolName, chunk ?? '_'];
+        },
+    };
+};
+/**
+ * Convert relative base URI and relative URL into a fully qualified URL.
+ *
+ * @param base -`QRL`s are relative, and therefore they need a base for resolution.
+ *
+ *   - `Element` use `base.ownerDocument.baseURI`
+ *   - `Document` use `base.baseURI`
+ *   - `string` use `base` as is
+ *   - `QConfig` use `base.baseURI`
+ *
+ * @param url - Relative URL
+ * @returns Fully qualified URL.
+ */
+const toUrl = (doc, containerEl, url) => {
+    const baseURI = doc.baseURI;
+    const base = new URL(containerEl.getAttribute(QBaseAttr) ?? baseURI, baseURI);
+    return new URL(url, base);
+};
+let _platform = /*#__PURE__ */ createPlatform();
+// <docs markdown="./readme.md#setPlatform">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit ./readme.md#setPlatform instead and run `pnpm docs.sync`)
+/**
+ * Sets the `CorePlatform`.
+ *
+ * This is useful to override the platform in tests to change the behavior of,
+ * `requestAnimationFrame`, and import resolution.
+ *
+ * @param doc - The document of the application for which the platform is needed.
+ * @param platform - The platform to use.
+ * @public
+ */
+// </docs>
+const setPlatform = (plt) => (_platform = plt);
+// <docs markdown="./readme.md#getPlatform">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit ./readme.md#getPlatform instead and run `pnpm docs.sync`)
+/**
+ * Retrieve the `CorePlatform`.
+ *
+ * The `CorePlatform` is also responsible for retrieving the Manifest, that contains mappings from
+ * symbols to javascript import chunks. For this reason, `CorePlatform` can't be global, but is
+ * specific to the application currently running. On server it is possible that many different
+ * applications are running in a single server instance, and for this reason the `CorePlatform` is
+ * associated with the application document.
  *
- * The name is only added in development mode and is not included in production builds.
+ * @param docOrNode - The document (or node) of the application for which the platform is needed.
+ * @public
  */
-const DEBUG_TYPE = 'q:type';
-const VirtualTypeName = {
-    ["V" /* VirtualType.Virtual */]: /* ********* */ 'Virtual', //
-    ["F" /* VirtualType.Fragment */]: /* ******** */ 'Fragment', //
-    ["S" /* VirtualType.WrappedSignal */]: /* *** */ 'Signal', //
-    ["A" /* VirtualType.Awaited */]: /* ********* */ 'Awaited', //
-    ["C" /* VirtualType.Component */]: /* ******* */ 'Component', //
-    ["I" /* VirtualType.InlineComponent */]: /* * */ 'InlineComponent', //
-    ["P" /* VirtualType.Projection */]: /* ****** */ 'Projection', //
+// </docs>
+const getPlatform = () => {
+    return _platform;
+};
+const isServerPlatform = () => {
+    if (qDynamicPlatform) {
+        return _platform.isServer;
+    }
+    return false;
 };
 
-/**
- * @file
- *
- *   VNodeData is additional information which allows the `vnode` to recover virtual VNode information
- *   from the HTML.
- */
-/**
- * VNodeDataSeparator contains information about splitting up the VNodeData and attaching it to the
- * HTML.
- */
-const VNodeDataSeparator = {
-    REFERENCE: /* ******** */ 126, // `~` is a reference to the node. Save it.
-    ADVANCE_1: /* ********* */ 33, // `!` is vNodeData separator skipping 0. (ie next vNode)
-    ADVANCE_8192: /* ****** */ 46, // `.` is vNodeData separator skipping 4096.
+const isNode = (value) => {
+    return value && typeof value.nodeType === 'number';
+};
+const isDocument = (value) => {
+    return value.nodeType === 9;
+};
+const isElement$1 = (value) => {
+    return value.nodeType === 1;
 };
-/**
- * VNodeDataChar contains information about the VNodeData used for encoding props.
- *
- * Available character ranges: 59 - 64, 91 - 94, 96, 123 - 126
- */
-const VNodeDataChar = {
-    OPEN: /* ************** */ 123, // `{` is the start of the VNodeData for a virtual element.
-    CLOSE: /* ************* */ 125, // `}` is the end of the VNodeData for a virtual element.
-    SCOPED_STYLE: /* ******* */ 59, // `;` - `q:sstyle` - Style attribute.
-    RENDER_FN: /* ********** */ 60, // `<` - `q:renderFn' - Component QRL render function (body)
-    ID: /* ***************** */ 61, // `=` - `q:id` - ID of the element.
-    PROPS: /* ************** */ 62, // `>` - `q:props' - Component Props
-    SLOT_PARENT: /* ******** */ 63, // `?` - `q:sparent` - Slot parent.
-    KEY: /* **************** */ 64, // `@` - `q:key` - Element key.
-    SEQ: /* **************** */ 91, // `[` - `q:seq' - Seq value from `useSequentialScope()`
-    CONTEXT: /* ************ */ 93, // `]` - `q:ctx' - Component context/props
-    SEQ_IDX: /* ************ */ 94, // `^` - `q:seqIdx' - Sequential scope id
-    BACK_REFS: /* ********** */ 96, // '`' - `q:brefs' - Effect dependencies/subscriptions
-    SEPARATOR: /* ********* */ 124, // `|` - Separator char to encode any key/value pairs.
-    SLOT: /* ************** */ 126};
 
 const isForeignObjectElement = (elementName) => {
     return isDev ? elementName.toLowerCase() === 'foreignobject' : elementName === 'foreignObject';
@@ -773,75 +1339,6 @@ const mergeMaps = (map1, map2) => {
     return map1;
 };
 
-/**
- * Think of `-` as an escape character which makes the next character uppercase. `--` is just `-`.
- *
- * Rules for JSX property event names starting with `on`:
- *
- * - Are case insensitive: `onClick$` is same `onclick$`
- * - A `--` is `-`: `dbl--click` => `dbl-click`
- * - Become case sensitive if prefixed by `-`: `-Click` is `Click`
- * - A `-` (not at the beginning) makes next character uppercase: `dbl-click` => `dblClick`
- */
-const EVENT_SUFFIX = '$';
-const isHtmlAttributeAnEventName = (name) => {
-    return (name.charCodeAt(0) === 113 /* q */ &&
-        name.charCodeAt(1) === 45 /* - */ &&
-        name.charCodeAt(3) === 58 /* : */);
-};
-function jsxEventToHtmlAttribute(jsxEvent) {
-    if (jsxEvent.endsWith(EVENT_SUFFIX)) {
-        const [prefix, idx] = getEventScopeDataFromJsxEvent(jsxEvent);
-        if (idx !== -1) {
-            const name = jsxEvent.slice(idx, -1);
-            return name === 'DOMContentLoaded'
-                ? // The only DOM event that is not all lowercase
-                    prefix + '-d-o-m-content-loaded'
-                : createEventName(name.charAt(0) === '-'
-                    ? // marker for case sensitive event name
-                        name.slice(1)
-                    : name.toLowerCase(), prefix);
-        }
-    }
-    return null; // Return null if not matching expected format
-}
-function createEventName(event, prefix) {
-    const eventName = fromCamelToKebabCase(event);
-    return prefix + eventName;
-}
-function getEventScopeDataFromJsxEvent(eventName) {
-    let prefix;
-    let idx = -1;
-    // set prefix and idx based on the scope
-    if (eventName.startsWith("on" /* EventNameJSXScope.on */)) {
-        prefix = "q-e:" /* EventNameHtmlScope.on */;
-        idx = 2;
-    }
-    else if (eventName.startsWith("window:on" /* EventNameJSXScope.window */)) {
-        prefix = "q-w:" /* EventNameHtmlScope.window */;
-        idx = 9;
-    }
-    else if (eventName.startsWith("document:on" /* EventNameJSXScope.document */)) {
-        prefix = "q-d:" /* EventNameHtmlScope.document */;
-        idx = 11;
-    }
-    return [prefix, idx];
-}
-function isPreventDefault(key) {
-    return key.startsWith('preventdefault:');
-}
-/** Converts a camelCase string to kebab-case. This is used for event names. */
-const fromCamelToKebabCase = (text) => {
-    return text.replace(/([A-Z-])/g, (a) => '-' + a.toLowerCase());
-};
-/** E.g. `"q-e:click"` => `['e', 'click']` */
-const getEventDataFromHtmlAttribute = (htmlKey) => [
-    htmlKey.charAt(2),
-    htmlKey.substring(4),
-];
-/** E.g. `"e:click"`, `"w:load"` */
-const getScopedEventName = (scope, eventName) => scope + ':' + eventName;
-
 /** @internal */
 const _EFFECT_BACK_REF = Symbol('backRef');
 /** Class for back reference to the EffectSubscription */
@@ -1092,16 +1589,20 @@ class SignalImpl {
         this.$untrackedValue$ = value;
     }
     /**
-     * Use this to force running subscribers, for example when the calculated value has mutated but
+     * Use this to trigger running subscribers, for example when the calculated value has mutated but
      * remained the same object
      */
+    trigger() {
+        scheduleEffects(this.$container$, this, this.$effects$);
+    }
+    /** @deprecated Use `trigger()` instead */
     force() {
         scheduleEffects(this.$container$, this, this.$effects$);
     }
+    // We need this to be getter/setter so subclasses can override them
     get untrackedValue() {
         return this.$untrackedValue$;
     }
-    // TODO: should we disallow setting the value directly?
     set untrackedValue(value) {
         this.$untrackedValue$ = value;
     }
@@ -1205,6 +1706,7 @@ const _UNINITIALIZED = Symbol('UNINITIALIZED');
 
 /** @internal */
 const EMPTY_ARRAY = [];
+/** @internal */
 const EMPTY_OBJ = {};
 Object.freeze(EMPTY_ARRAY);
 Object.freeze(EMPTY_OBJ);
@@ -1616,6 +2118,9 @@ class ComputedSignalImpl extends SignalImpl {
         isDev && assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
         return this.$untrackedValue$;
     }
+    set untrackedValue(value) {
+        this.$untrackedValue$ = value;
+    }
     $computeIfNeeded$() {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
             return;
@@ -1711,18 +2216,17 @@ class AsyncSignalImpl extends ComputedSignalImpl {
     $jobs$ = [];
     $concurrency$ = 1;
     $interval$ = 0;
-    $pollTimeoutId$ = undefined;
     $timeoutMs$;
-    $computationTimeoutId$;
     [_EFFECT_BACK_REF] = undefined;
     constructor(container, fn, flags = 1 /* SignalFlags.INVALID */ |
         16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */, options) {
         super(container, fn, flags);
-        const interval = options?.interval || 0;
+        const interval = options?.interval;
         const concurrency = options?.concurrency ?? 1;
         const initial = options?.initial;
         const timeout = options?.timeout;
         const eagerCleanup = options?.eagerCleanup;
+        const clientOnly = options?.clientOnly;
         // Handle initial value - eagerly evaluate if function, set $untrackedValue$ and $promiseValue$
         // Do NOT call setValue() which would clear the INVALID flag and prevent async computation
         if (initial !== undefined) {
@@ -1730,11 +2234,42 @@ class AsyncSignalImpl extends ComputedSignalImpl {
             this.$untrackedValue$ = initialValue;
         }
         this.$concurrency$ = concurrency;
-        this.$timeoutMs$ = timeout;
+        if (timeout) {
+            this.$timeoutMs$ = timeout;
+        }
         if (eagerCleanup) {
             this.$flags$ |= 32 /* AsyncSignalFlags.EAGER_CLEANUP */;
         }
-        this.interval = interval;
+        if (clientOnly) {
+            this.$flags$ |= 64 /* AsyncSignalFlags.CLIENT_ONLY */;
+        }
+        if (interval) {
+            this.interval = interval;
+        }
+    }
+    get untrackedValue() {
+        this.$computeIfNeeded$();
+        if (this.$current$?.$promise$) {
+            if (this.$untrackedValue$ === NEEDS_COMPUTATION ||
+                (import.meta.env.TEST ? isServerPlatform() : isServer)) {
+                throw this.$current$?.$promise$;
+            }
+            return this.$untrackedValue$;
+        }
+        if (this.$untrackedError$) {
+            throw this.$untrackedError$;
+        }
+        // For clientOnly signals without initial value during SSR, throw if trying to read value
+        // During SSR, clientOnly signals are skipped, so there's no computed value available
+        if ((import.meta.env.TEST ? isServerPlatform() : isServer) &&
+            this.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */ &&
+            this.$untrackedValue$ === NEEDS_COMPUTATION) {
+            throw new Error('During SSR, cannot read .value from clientOnly async signal without an initial value. Use .loading or provide an initial value.');
+        }
+        return this.$untrackedValue$;
+    }
+    set untrackedValue(value) {
+        this.$untrackedValue$ = value;
     }
     /**
      * Loading is true if the signal is still waiting for the promise to resolve, false if the promise
@@ -1827,6 +2362,14 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
             return;
         }
+        // Skip computation on SSR for clientOnly signals
+        if ((import.meta.env.TEST ? isServerPlatform() : isServer) &&
+            this.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
+            // We must pretend to load, and register as a listener for the captures
+            this.$untrackedLoading$ = true;
+            this.$container$?.serializationCtx.$eagerResume$.add(this);
+            return;
+        }
         this.$clearNextPoll$();
         if (this.$current$) {
             this.$requestCleanups$(this.$current$);
@@ -1901,20 +2444,6 @@ class AsyncSignalImpl extends ComputedSignalImpl {
         }
         await Promise.all(this.$jobs$.map((job) => job.$promise$));
     }
-    get untrackedValue() {
-        this.$computeIfNeeded$();
-        if (this.$current$?.$promise$) {
-            if (this.$untrackedValue$ === NEEDS_COMPUTATION ||
-                (import.meta.env.TEST ? isServerPlatform() : isServer)) {
-                throw this.$current$?.$promise$;
-            }
-            return this.$untrackedValue$;
-        }
-        if (this.$untrackedError$) {
-            throw this.$untrackedError$;
-        }
-        return this.$untrackedValue$;
-    }
     $clearNextPoll$() {
         if (this.$pollTimeoutId$ !== undefined) {
             clearTimeout(this.$pollTimeoutId$);
@@ -2198,6 +2727,8 @@ class WrappedSignalImpl extends SignalImpl {
     $funcStr$;
     $flags$;
     $hostElement$ = undefined;
+    // important: don't use implemnets BackRef here
+    // it causes v8 optimizations eager bailouts, because of not consistent class shape
     [_EFFECT_BACK_REF] = undefined;
     constructor(container, fn, args, fnStr, 
     // We need a separate flag to know when the computation needs running because
@@ -2393,17 +2924,16 @@ function _chk(_, element) {
  */
 function _res(_, element) {
     maybeScopeFromQL(this, element);
-    // Captures are deserialized, signals are now resumed
-}
-
-const isObjectEmpty = (obj) => {
-    for (const key in obj) {
-        if (Object.prototype.hasOwnProperty.call(obj, key)) {
-            return false;
+    // Captures are deserialized, now trigger computation on AsyncSignals
+    if (_captures) {
+        for (const capture of _captures) {
+            if (capture instanceof AsyncSignalImpl && capture.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
+                capture.$computeIfNeeded$();
+            }
+            // note that polling async signals will automatically schedule themselves so no action needed
         }
     }
-    return true;
-};
+}
 
 const _hasOwnProperty$2 = Object.prototype.hasOwnProperty;
 // TODO store props as the arrays the vnodes also use?
@@ -2462,6 +2992,9 @@ const isJSXNode = (n) => {
             _hasOwnProperty$2.call(n, 'key') &&
             _hasOwnProperty$2.call(n, 'props') &&
             _hasOwnProperty$2.call(n, 'type')) {
+            if (isPropsProxy(n)) {
+                return false;
+            }
             logWarn(`Duplicate implementations of "JSXNode" found`);
             return true;
         }
@@ -2914,7 +3447,6 @@ function addUseOnEvent(jsxElement, key, value) {
         props[key] = undefined;
     }
 }
-const getValue = (o) => o.value;
 /**
  * Finds the first element node in the JSX output.
  *
@@ -2938,7 +3470,7 @@ function findFirstElementNode(jsx) {
             return maybeThen(jsx, (jsx) => findFirstElementNode(jsx));
         }
         else if (isSignal(jsx)) {
-            return findFirstElementNode(untrack(getValue, jsx));
+            return findFirstElementNode(jsx.untrackedValue);
         }
     }
     return null;
@@ -3007,11 +3539,7 @@ const SSRRaw = () => null;
 const SSRComment = () => null;
 /** @public */
 const SSRStreamBlock = (props) => {
-    return [
-        jsx(SSRComment, { data: STREAM_BLOCK_START_COMMENT }),
-        props.children,
-        jsx(SSRComment, { data: STREAM_BLOCK_END_COMMENT }),
-    ];
+    return props.children;
 };
 /** @public */
 const SSRStream = (props, key) => jsx(RenderOnce, { children: jsx(InternalSSRStream, props) }, key);
@@ -3022,79 +3550,27 @@ const fastSetAttribute = (target, name, value) => {
     if (!_setAttribute) {
         _setAttribute = target.setAttribute;
     }
-    _setAttribute.call(target, name, value);
-};
-let _setAttributeNS = null;
-const fastSetAttributeNS = (target, namespace, name, value) => {
-    if (!_setAttributeNS) {
-        _setAttributeNS = target.setAttributeNS;
-    }
-    _setAttributeNS.call(target, namespace, name, value);
-};
-function directSetAttribute(element, attrName, attrValue, isSvg) {
-    if (attrValue != null) {
-        if (isSvg) {
-            // only svg elements can have namespace attributes
-            const namespace = getAttributeNamespace(attrName);
-            if (namespace) {
-                fastSetAttributeNS(element, namespace, attrName, attrValue);
-                return;
-            }
-        }
-        fastSetAttribute(element, attrName, attrValue);
-    }
-}
-
-function escapeHTML(html) {
-    let escapedHTML = '';
-    const length = html.length;
-    let idx = 0;
-    let lastIdx = idx;
-    for (; idx < length; idx++) {
-        // We get the charCode NOT string. String would allocate memory.
-        const ch = html.charCodeAt(idx);
-        // Every time we concat a string we allocate memory. We want to minimize that.
-        if (ch === 60 /* < */) {
-            escapedHTML += html.substring(lastIdx, idx) + '&lt;';
-        }
-        else if (ch === 62 /* > */) {
-            escapedHTML += html.substring(lastIdx, idx) + '&gt;';
-        }
-        else if (ch === 38 /* & */) {
-            escapedHTML += html.substring(lastIdx, idx) + '&amp;';
-        }
-        else if (ch === 34 /* " */) {
-            escapedHTML += html.substring(lastIdx, idx) + '&quot;';
-        }
-        else if (ch === 39 /* ' */) {
-            escapedHTML += html.substring(lastIdx, idx) + '&#39;';
-        }
-        else {
-            continue;
-        }
-        lastIdx = idx + 1;
-    }
-    if (lastIdx === 0) {
-        // This is most common case, just return previous string no memory allocation.
-        return html;
-    }
-    else {
-        // Add the tail of replacement.
-        return escapedHTML + html.substring(lastIdx);
-    }
-}
-function decodeVNodeDataString(str) {
-    let result = '';
-    for (let i = 0; i < str.length; i++) {
-        if (str.charAt(i) === '\\' && i + 1 < str.length) {
-            result += str.charAt(i + 1);
-            i++;
-        }
-        else {
-            result += str.charAt(i);
+    _setAttribute.call(target, name, value);
+};
+let _setAttributeNS = null;
+const fastSetAttributeNS = (target, namespace, name, value) => {
+    if (!_setAttributeNS) {
+        _setAttributeNS = target.setAttributeNS;
+    }
+    _setAttributeNS.call(target, namespace, name, value);
+};
+function directSetAttribute(element, attrName, attrValue, isSvg) {
+    if (attrValue != null) {
+        if (isSvg) {
+            // only svg elements can have namespace attributes
+            const namespace = getAttributeNamespace(attrName);
+            if (namespace) {
+                fastSetAttributeNS(element, namespace, attrName, attrValue);
+                return;
+            }
         }
+        fastSetAttribute(element, attrName, attrValue);
     }
-    return result;
 }
 
 function getFileLocationFromJsx(jsxDev) {
@@ -3133,187 +3609,6 @@ const _restProps = (props, omit = [], target = {}) => {
     return createPropsProxy(new JSXNodeImpl(null, varPropsTarget, constPropsTarget, null, null));
 };
 
-const styleContent = (styleId) => {
-    return ComponentStylesPrefixContent + styleId;
-};
-function isClassAttr(key) {
-    return key === 'class';
-}
-function convertScopedStyleIdsToArray(scopedStyleIds) {
-    return scopedStyleIds?.split(' ') ?? null;
-}
-function convertStyleIdsToString(scopedStyleIds) {
-    return Array.from(scopedStyleIds).join(' ');
-}
-const addComponentStylePrefix = (styleId) => {
-    if (styleId) {
-        let idx = 0;
-        do {
-            styleId = styleId.substring(0, idx) + styleContent(styleId.substring(idx));
-        } while ((idx = styleId.indexOf(' ', idx) + 1) !== 0);
-    }
-    return styleId || null;
-};
-
-/** CSS properties which accept numbers but are not in units of "px". */
-const unitlessNumbers = new Set([
-    'animationIterationCount',
-    'aspectRatio',
-    'borderImageOutset',
-    'borderImageSlice',
-    'borderImageWidth',
-    'boxFlex',
-    'boxFlexGroup',
-    'boxOrdinalGroup',
-    'columnCount',
-    'columns',
-    'flex',
-    'flexGrow',
-    'flexShrink',
-    'gridArea',
-    'gridRow',
-    'gridRowEnd',
-    'gridRowStart',
-    'gridColumn',
-    'gridColumnEnd',
-    'gridColumnStart',
-    'fontWeight',
-    'lineClamp',
-    'lineHeight',
-    'opacity',
-    'order',
-    'orphans',
-    'scale',
-    'tabSize',
-    'widows',
-    'zIndex',
-    'zoom',
-    'MozAnimationIterationCount', // Known Prefixed Properties
-    'MozBoxFlex', // TODO: Remove these since they shouldn't be used in modern code
-    'msFlex',
-    'msFlexPositive',
-    'WebkitAnimationIterationCount',
-    'WebkitBoxFlex',
-    'WebkitBoxOrdinalGroup',
-    'WebkitColumnCount',
-    'WebkitColumns',
-    'WebkitFlex',
-    'WebkitFlexGrow',
-    'WebkitFlexShrink',
-    'WebkitLineClamp',
-]);
-const isUnitlessNumber = (name) => {
-    return unitlessNumbers.has(name);
-};
-
-const hashCode = (text, hash = 0) => {
-    for (let i = 0; i < text.length; i++) {
-        const chr = text.charCodeAt(i);
-        hash = (hash << 5) - hash + chr;
-        hash |= 0; // Convert to 32bit integer
-    }
-    return Number(Math.abs(hash)).toString(36);
-};
-
-const serializeClass = (obj) => {
-    if (!obj) {
-        return '';
-    }
-    if (isString(obj)) {
-        return obj.trim();
-    }
-    const classes = [];
-    if (isArray(obj)) {
-        for (const o of obj) {
-            const classList = serializeClass(o);
-            if (classList) {
-                classes.push(classList);
-            }
-        }
-    }
-    else {
-        for (const [key, value] of Object.entries(obj)) {
-            if (value) {
-                classes.push(key.trim());
-            }
-        }
-    }
-    return classes.join(' ');
-};
-// Unlike fromCamelToKebabCase, this leaves `-` so that `background-color` stays `background-color`
-const fromCamelToKebabCaseWithDash = (text) => {
-    return text.replace(/([A-Z])/g, '-$1').toLowerCase();
-};
-const stringifyStyle = (obj) => {
-    if (obj == null) {
-        return '';
-    }
-    if (typeof obj == 'object') {
-        if (isArray(obj)) {
-            throw qError(0 /* QError.stringifyClassOrStyle */, [obj, 'style']);
-        }
-        else {
-            const chunks = [];
-            for (const key in obj) {
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    const value = obj[key];
-                    if (value != null && typeof value !== 'function') {
-                        if (key.startsWith('--')) {
-                            chunks.push(key + ':' + value);
-                        }
-                        else {
-                            chunks.push(fromCamelToKebabCaseWithDash(key) + ':' + setValueForStyle(key, value));
-                        }
-                    }
-                }
-            }
-            return chunks.join(';');
-        }
-    }
-    return String(obj);
-};
-const serializeBooleanOrNumberAttribute = (value) => {
-    return value != null ? String(value) : null;
-};
-function serializeAttribute(key, value, styleScopedId) {
-    if (isClassAttr(key)) {
-        const serializedClass = serializeClass(value);
-        value = styleScopedId
-            ? styleScopedId + (serializedClass.length ? ' ' + serializedClass : serializedClass)
-            : serializedClass;
-    }
-    else if (key === 'style') {
-        value = stringifyStyle(value);
-    }
-    else if (isEnumeratedBooleanAttribute(key) || typeof value === 'number') {
-        // aria attrs, tabindex etc.
-        value = serializeBooleanOrNumberAttribute(value);
-    }
-    else if (value === false || value == null) {
-        value = null;
-    }
-    else if (value === true && isPreventDefault(key)) {
-        value = '';
-    }
-    return value;
-}
-function isEnumeratedBooleanAttribute(key) {
-    return isAriaAttribute(key) || ['spellcheck', 'draggable', 'contenteditable'].includes(key);
-}
-const setValueForStyle = (styleName, value) => {
-    if (typeof value === 'number' && value !== 0 && !isUnitlessNumber(styleName)) {
-        return value + 'px';
-    }
-    return value;
-};
-function isAriaAttribute(prop) {
-    return prop.startsWith('aria-');
-}
-const styleKey = (qStyles, index) => {
-    assertQrl(qStyles);
-    return `${hashCode(qStyles.$hash$)}-${index}`;
-};
-
 class DeleteOperation {
     target;
     constructor(target) {
@@ -3329,7 +3624,6 @@ class RemoveAllChildrenOperation {
 class SetTextOperation {
     target;
     text;
-    operationType = 16 /* VNodeOperationType.SetText */;
     constructor(target, text) {
         this.target = target;
         this.text = text;
@@ -3415,66 +3709,17 @@ function runEventHandlerQRL(handler, event, element, ctx = newInvokeContextFromD
 /**
  * This is called by qwik-loader to run a QRL. It has to be synchronous when possible.
  *
- * @internal
- */
-function _run(event, element) {
-    const ctx = newInvokeContextFromDOM(event, element);
-    if (typeof this === 'string') {
-        setCaptures(deserializeCaptures(ctx.$container$, this));
-    }
-    const qrlToRun = _captures[0];
-    isDev && assertQrl(qrlToRun);
-    return runEventHandlerQRL(qrlToRun, event, element, ctx);
-}
-
-/** @internal */
-const mapApp_findIndx = (array, key, start) => {
-    isDev && assertTrue(start % 2 === 0, 'Expecting even number.');
-    let bottom = start >> 1;
-    let top = (array.length - 2) >> 1;
-    while (bottom <= top) {
-        const mid = bottom + ((top - bottom) >> 1);
-        const midKey = array[mid << 1];
-        if (midKey === key) {
-            return mid << 1;
-        }
-        if (midKey < key) {
-            bottom = mid + 1;
-        }
-        else {
-            top = mid - 1;
-        }
-    }
-    return (bottom << 1) ^ -1;
-};
-/** @internal */
-const mapArray_set = (array, key, value, start, allowNullValue = false) => {
-    const indx = mapApp_findIndx(array, key, start);
-    if (indx >= 0) {
-        if (value == null && !allowNullValue) {
-            array.splice(indx, 2);
-        }
-        else {
-            array[indx + 1] = value;
-        }
-    }
-    else if (value != null || allowNullValue) {
-        array.splice(indx ^ -1, 0, key, value);
-    }
-};
-/** @internal */
-const mapArray_get = (array, key, start) => {
-    const indx = mapApp_findIndx(array, key, start);
-    if (indx >= 0) {
-        return array[indx + 1];
-    }
-    else {
-        return null;
+ * @internal
+ */
+function _run(event, element) {
+    const ctx = newInvokeContextFromDOM(event, element);
+    if (typeof this === 'string') {
+        setCaptures(deserializeCaptures(ctx.$container$, this));
     }
-};
-const mapArray_has = (array, key, start) => {
-    return mapApp_findIndx(array, key, start) >= 0;
-};
+    const qrlToRun = _captures[0];
+    isDev && assertQrl(qrlToRun);
+    return runEventHandlerQRL(qrlToRun, event, element, ctx);
+}
 
 /**
  * Helper to get the next sibling of a VNode. Extracted to module scope to help V8 inline it
@@ -3565,7 +3810,7 @@ function diff(diffContext, jsxNode, vStartNode) {
                 if (isJSXNode(diffContext.jsxValue)) {
                     const type = diffContext.jsxValue.type;
                     if (typeof type === 'string') {
-                        expectNoMoreTextNodes(diffContext);
+                        expectNoTextNode(diffContext);
                         expectElement(diffContext, diffContext.jsxValue, type);
                         const hasDangerousInnerHTML = (diffContext.jsxValue.constProps &&
                             _hasOwnProperty.call(diffContext.jsxValue.constProps, dangerouslySetInnerHTML)) ||
@@ -3579,12 +3824,12 @@ function diff(diffContext, jsxNode, vStartNode) {
                     }
                     else if (typeof type === 'function') {
                         if (type === Fragment) {
-                            expectNoMoreTextNodes(diffContext);
+                            expectNoTextNode(diffContext);
                             expectVirtual(diffContext, "F" /* VirtualType.Fragment */, diffContext.jsxValue.key);
                             descend(diffContext, diffContext.jsxValue.children, true);
                         }
                         else if (type === Slot) {
-                            expectNoMoreTextNodes(diffContext);
+                            expectNoTextNode(diffContext);
                             if (!expectSlot(diffContext)) {
                                 // nothing to project, so try to render the Slot default content.
                                 descend(diffContext, diffContext.jsxValue.children, true);
@@ -3605,7 +3850,7 @@ function diff(diffContext, jsxNode, vStartNode) {
                         }
                         else {
                             // Must be a component
-                            expectNoMoreTextNodes(diffContext);
+                            expectNoTextNode(diffContext);
                             expectComponent(diffContext, type);
                         }
                     }
@@ -3790,11 +4035,10 @@ function descendContentToProject(diffContext, children, host) {
         const props = host.props;
         if (props) {
             // we need to create empty projections for all the slots to remove unused slots content
-            for (const prop of Object.keys(props)) {
+            for (const prop in props) {
                 if (isSlotProp(prop)) {
                     const slotName = prop;
-                    projections.push(slotName);
-                    projections.push(createProjectionJSXNode(slotName));
+                    mapArray_set(projections, slotName, createProjectionJSXNode(slotName), 0);
                 }
             }
         }
@@ -3976,9 +4220,8 @@ function expectNoMore(diffContext) {
         }
     }
 }
-function expectNoMoreTextNodes(diffContext) {
-    while (diffContext.vCurrent !== null && vnode_isTextVNode(diffContext.vCurrent)) {
-        cleanup(diffContext.container, diffContext.journal, diffContext.vCurrent, diffContext.cursor);
+function expectNoTextNode(diffContext) {
+    if (diffContext.vCurrent !== null && vnode_isTextVNode(diffContext.vCurrent)) {
         const toRemove = diffContext.vCurrent;
         diffContext.vCurrent = peekNextSibling(diffContext.vCurrent);
         vnode_remove(diffContext.journal, diffContext.vParent, toRemove, true);
@@ -4077,7 +4320,9 @@ function registerEventHandlers(key, value, element, vnode, diffContext) {
                 handlers.push(runEventHandlerQRL.bind(null, item));
             }
         }
-        (element._qDispatch ||= {})[scopedKebabName] = handlers;
+        if (handlers.length > 0) {
+            (element._qDispatch ||= {})[scopedKebabName] = handlers;
+        }
     }
     else if (value) {
         (element._qDispatch ||= {})[scopedKebabName] = [
@@ -4491,7 +4736,7 @@ function expectComponent(diffContext, component) {
                 (vnode_isVirtualVNode(componentHost)
                     ? vnode_getProp(componentHost, OnRenderProp, null) === null
                     : true)) {
-                componentHost = componentHost.parent;
+                componentHost = componentHost.parent || vnode_getProjectionParentComponent(componentHost);
             }
             const jsxOutput = executeComponent(diffContext.container, host, (componentHost || diffContext.container.rootVNode), component, jsxNode.props);
             diffContext.asyncQueue.push(jsxOutput, host);
@@ -5402,6 +5647,13 @@ function walkCursor(cursor, options) {
             if (currentVNode.dirty & 64 /* ChoreBits.CLEANUP */) {
                 executeCleanup(currentVNode, container);
             }
+            else if (currentVNode.dirty & 32 /* ChoreBits.CHILDREN */) {
+                const next = tryDescendDirtyChildren(container, cursorData, currentVNode, cursor);
+                if (next !== null) {
+                    currentVNode = next;
+                    continue;
+                }
+            }
             // Clear dirty bits and move to next node
             currentVNode.dirty &= -128 /* ChoreBits.DIRTY_MASK */;
             setCursorPosition(container, cursorData, getNextVNode(currentVNode, cursor));
@@ -5426,17 +5678,9 @@ function walkCursor(cursor, options) {
                 result = executeCompute(currentVNode, container);
             }
             else if (currentVNode.dirty & 32 /* ChoreBits.CHILDREN */) {
-                const dirtyChildren = currentVNode.dirtyChildren;
-                if (!dirtyChildren || dirtyChildren.length === 0) {
-                    // No dirty children
-                    currentVNode.dirty &= ~32 /* ChoreBits.CHILDREN */;
-                }
-                else {
-                    partitionDirtyChildren(dirtyChildren, currentVNode);
-                    currentVNode.nextDirtyChildIndex = 0;
-                    // descend
-                    currentVNode = getNextVNode(dirtyChildren[0], cursor);
-                    setCursorPosition(container, cursorData, currentVNode);
+                const next = tryDescendDirtyChildren(container, cursorData, currentVNode, cursor);
+                if (next !== null) {
+                    currentVNode = next;
                     continue;
                 }
             }
@@ -5493,6 +5737,22 @@ function finishWalk(container, cursor, cursorData, isServer) {
 function resolveCursor(container) {
     container.$checkPendingCount$();
 }
+/**
+ * If the vNode has dirty children, partitions them, sets cursor to first dirty child, and returns
+ * that child. Otherwise clears CHILDREN bit and returns null.
+ */
+function tryDescendDirtyChildren(container, cursorData, currentVNode, cursor) {
+    const dirtyChildren = currentVNode.dirtyChildren;
+    if (!dirtyChildren || dirtyChildren.length === 0) {
+        currentVNode.dirty &= -33 /* ChoreBits.CHILDREN */;
+        return null;
+    }
+    partitionDirtyChildren(dirtyChildren, currentVNode);
+    currentVNode.nextDirtyChildIndex = 0;
+    const next = getNextVNode(dirtyChildren[0], cursor);
+    setCursorPosition(container, cursorData, next);
+    return next;
+}
 /**
  * Partitions dirtyChildren array so non-projections come first, projections last. Uses in-place
  * swapping to avoid allocations.
@@ -8481,18 +8741,26 @@ const _fnSignal = (fn, args, fnStr) => {
  * - Odd values are numbers, strings (JSON stringified with `</` escaping) or arrays (same format).
  * - Therefore root indexes need to be doubled to get the actual index.
  */
-async function serialize(serializationContext) {
-    const { $writer$, $isSsrNode$, $isDomRef$, $storeProxyMap$, $addRoot$, $promoteToRoot$, getSeenRef, $markSeen$, } = serializationContext;
-    let rootIdx = 0;
-    const forwardRefs = [];
-    let forwardRefsId = 0;
-    const promises = new Set();
-    const s11nWeakRefs = new Map();
-    let parent;
-    const qrlMap = new Map();
+class Serializer {
+    $serializationContext$;
+    rootIdx = 0;
+    forwardRefs = [];
+    forwardRefsId = 0;
+    promises = new Set();
+    s11nWeakRefs = new Map();
+    parent;
+    qrlMap = new Map();
+    $writer$;
+    constructor($serializationContext$) {
+        this.$serializationContext$ = $serializationContext$;
+        this.$writer$ = $serializationContext$.$writer$;
+    }
+    async serialize() {
+        await this.outputRoots();
+    }
     /** Helper to output an array */
-    const outputArray = (value, keepUndefined, writeFn) => {
-        $writer$.write('[');
+    outputArray(value, keepUndefined, writeFn) {
+        this.$writer$.write(BRACKET_OPEN);
         let separator = false;
         let length;
         if (keepUndefined) {
@@ -8507,41 +8775,52 @@ async function serialize(serializationContext) {
         }
         for (let i = 0; i < length; i++) {
             if (separator) {
-                $writer$.write(',');
+                this.$writer$.write(COMMA);
             }
             else {
                 separator = true;
             }
             writeFn(value[i], i);
         }
-        $writer$.write(']');
-    };
+        this.$writer$.write(BRACKET_CLOSE);
+    }
+    /** Whether a string needs JSON escaping (quote, backslash, or control chars). */
+    stringNeedsJsonEscape$(str) {
+        for (let i = 0; i < str.length; i++) {
+            const c = str.charCodeAt(i);
+            if (c < 32 || c === 34 || c === 92) {
+                return true;
+            }
+        }
+        return false;
+    }
     /** Output a type,value pair. If the value is an array, it calls writeValue on each item. */
-    const output = (type, value, keepUndefined) => {
-        $writer$.write(`${type},`);
+    output(type, value, keepUndefined) {
         if (typeof value === 'number') {
-            $writer$.write(value.toString());
+            this.$writer$.write(type + COMMA + value);
         }
         else if (typeof value === 'string') {
-            const s = JSON.stringify(value);
+            const s = this.stringNeedsJsonEscape$(value) ? JSON.stringify(value) : QUOTE + value + QUOTE;
+            this.$writer$.write(type + COMMA);
             let angleBracketIdx = -1;
             let lastIdx = 0;
-            while ((angleBracketIdx = s.indexOf('</', lastIdx)) !== -1) {
-                $writer$.write(s.slice(lastIdx, angleBracketIdx));
-                $writer$.write('<\\/');
+            while ((angleBracketIdx = s.indexOf(CLOSE_TAG, lastIdx)) !== -1) {
+                this.$writer$.write(s.slice(lastIdx, angleBracketIdx));
+                this.$writer$.write(ESCAPED_CLOSE_TAG);
                 lastIdx = angleBracketIdx + 2;
             }
-            $writer$.write(lastIdx === 0 ? s : s.slice(lastIdx));
+            this.$writer$.write(lastIdx === 0 ? s : s.slice(lastIdx));
         }
         else {
-            outputArray(value, !!keepUndefined, (valueItem, idx) => {
-                writeValue(valueItem, idx);
+            this.$writer$.write(type + COMMA);
+            this.outputArray(value, !!keepUndefined, (valueItem, idx) => {
+                this.writeValue(valueItem, idx);
             });
         }
-    };
-    const getSeenRefOrOutput = (value, index, keepWeak) => {
-        let seen = getSeenRef(value);
-        const forwardRefIdx = !keepWeak && s11nWeakRefs.get(value);
+    }
+    getSeenRefOrOutput(value, index, keepWeak) {
+        let seen = this.$serializationContext$.getSeenRef(value);
+        const forwardRefIdx = !keepWeak && this.s11nWeakRefs.get(value);
         if (!seen) {
             if (keepWeak) {
                 // we're testing a weakref, so don't mark it as seen yet
@@ -8550,136 +8829,136 @@ async function serialize(serializationContext) {
             // Maybe it's a weakref and that should count as seen
             if (typeof forwardRefIdx === 'number') {
                 // Yes, no longer a weakref
-                seen = $addRoot$(value, true);
+                seen = this.$serializationContext$.$addRoot$(value, true);
             }
             else {
-                return $markSeen$(value, parent, index);
+                return this.$serializationContext$.$markSeen$(value, this.parent, index);
             }
         }
         // Now that we saw it a second time, make sure it's a root
         if (seen.$parent$) {
             // Note, this means it was output before so we always need a backref
             // Special case: we're a root so instead of adding a backref, we replace ourself
-            if (!parent) {
-                $promoteToRoot$(seen, index);
-                value = serializationContext.$roots$[index];
+            if (!this.parent) {
+                this.$serializationContext$.$promoteToRoot$(seen, index);
+                value = this.$serializationContext$.$roots$[index];
             }
             else {
-                $promoteToRoot$(seen);
+                this.$serializationContext$.$promoteToRoot$(seen);
             }
         }
         // Check if there was a weakref to us
         if (typeof forwardRefIdx === 'number') {
-            forwardRefs[forwardRefIdx] = seen.$index$;
-            s11nWeakRefs.delete(value);
+            this.forwardRefs[forwardRefIdx] = seen.$index$;
+            this.s11nWeakRefs.delete(value);
         }
         // Now we know it's a root and we should output a RootRef
         const rootIdx = value instanceof SerializationBackRef ? value.$path$ : seen.$index$;
         // But make sure we do output ourselves
-        if (!parent && rootIdx === index) {
+        if (!this.parent && rootIdx === index) {
             return seen;
         }
-        output(1 /* TypeIds.RootRef */, rootIdx);
-    };
+        this.output(1 /* TypeIds.RootRef */, rootIdx);
+    }
     // First check for scalars, then do objects with seen checks
     // Make sure to only get the SeenRef once, it's expensive
-    const writeValue = (value, index) => {
+    writeValue(value, index) {
         if (fastSkipSerialize(value)) {
-            output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
+            this.output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
         }
         else {
             switch (typeof value) {
                 case 'undefined':
-                    output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
+                    this.output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
                     break;
                 case 'boolean':
-                    output(3 /* TypeIds.Constant */, value ? 2 /* Constants.True */ : 3 /* Constants.False */);
+                    this.output(3 /* TypeIds.Constant */, value ? 2 /* Constants.True */ : 3 /* Constants.False */);
                     break;
                 case 'number':
                     if (Number.isNaN(value)) {
-                        output(3 /* TypeIds.Constant */, 12 /* Constants.NaN */);
+                        this.output(3 /* TypeIds.Constant */, 12 /* Constants.NaN */);
                     }
                     else if (!Number.isFinite(value)) {
-                        output(3 /* TypeIds.Constant */, value < 0 ? 14 /* Constants.NegativeInfinity */ : 13 /* Constants.PositiveInfinity */);
+                        this.output(3 /* TypeIds.Constant */, value < 0 ? 14 /* Constants.NegativeInfinity */ : 13 /* Constants.PositiveInfinity */);
                     }
                     else if (value === Number.MAX_SAFE_INTEGER) {
-                        output(3 /* TypeIds.Constant */, 15 /* Constants.MaxSafeInt */);
+                        this.output(3 /* TypeIds.Constant */, 15 /* Constants.MaxSafeInt */);
                     }
                     else if (value === Number.MAX_SAFE_INTEGER - 1) {
-                        output(3 /* TypeIds.Constant */, 16 /* Constants.AlmostMaxSafeInt */);
+                        this.output(3 /* TypeIds.Constant */, 16 /* Constants.AlmostMaxSafeInt */);
                     }
                     else if (value === Number.MIN_SAFE_INTEGER) {
-                        output(3 /* TypeIds.Constant */, 17 /* Constants.MinSafeInt */);
+                        this.output(3 /* TypeIds.Constant */, 17 /* Constants.MinSafeInt */);
                     }
                     else {
-                        output(0 /* TypeIds.Plain */, value);
+                        this.output(0 /* TypeIds.Plain */, value);
                     }
                     break;
                 case 'string':
                     if (value.length === 0) {
-                        output(3 /* TypeIds.Constant */, 4 /* Constants.EmptyString */);
+                        this.output(3 /* TypeIds.Constant */, 4 /* Constants.EmptyString */);
                     }
                     else {
                         // If the string is short, we output directly
                         // Very short strings add overhead to tracking
-                        if (value.length < 4 || getSeenRefOrOutput(value, index)) {
-                            output(0 /* TypeIds.Plain */, value);
+                        if (value.length < 4 || this.getSeenRefOrOutput(value, index)) {
+                            this.output(0 /* TypeIds.Plain */, value);
                         }
                     }
                     break;
                 case 'bigint':
-                    if ((value < 10000 && value > -1e3) || getSeenRefOrOutput(value, index)) {
-                        output(12 /* TypeIds.BigInt */, value.toString());
+                    if ((value < 10000 && value > -1e3) || this.getSeenRefOrOutput(value, index)) {
+                        this.output(12 /* TypeIds.BigInt */, value.toString());
                     }
                     break;
                 case 'symbol':
                     if (value === NEEDS_COMPUTATION) {
-                        output(3 /* TypeIds.Constant */, 7 /* Constants.NEEDS_COMPUTATION */);
+                        this.output(3 /* TypeIds.Constant */, 7 /* Constants.NEEDS_COMPUTATION */);
                     }
                     else if (value === STORE_ALL_PROPS) {
-                        output(3 /* TypeIds.Constant */, 8 /* Constants.STORE_ALL_PROPS */);
+                        this.output(3 /* TypeIds.Constant */, 8 /* Constants.STORE_ALL_PROPS */);
                     }
                     else if (value === _UNINITIALIZED) {
-                        output(3 /* TypeIds.Constant */, 9 /* Constants.UNINITIALIZED */);
+                        this.output(3 /* TypeIds.Constant */, 9 /* Constants.UNINITIALIZED */);
                     }
                     break;
                 case 'function':
                     if (value === Slot) {
-                        output(3 /* TypeIds.Constant */, 10 /* Constants.Slot */);
+                        this.output(3 /* TypeIds.Constant */, 10 /* Constants.Slot */);
                     }
                     else if (value === Fragment) {
-                        output(3 /* TypeIds.Constant */, 11 /* Constants.Fragment */);
+                        this.output(3 /* TypeIds.Constant */, 11 /* Constants.Fragment */);
                     }
                     else if (isQrl(value)) {
-                        if (getSeenRefOrOutput(value, index)) {
-                            const [chunk, symbol, captures] = qrlToString(serializationContext, value, true);
+                        if (this.getSeenRefOrOutput(value, index)) {
+                            const [chunk, symbol, captures] = qrlToString(this.$serializationContext$, value, true);
                             let data;
                             if (chunk !== '') {
                                 // not a sync QRL, replace all parts with string references
-                                data = `${$addRoot$(chunk)}#${$addRoot$(symbol)}${captures ? '#' + captures : ''}`;
+                                data = `${this.$serializationContext$.$addRoot$(chunk)}#${this.$serializationContext$.$addRoot$(symbol)}${captures ? '#' + captures : ''}`;
                                 // Since we map QRLs to strings, we need to keep track of this secondary mapping
-                                const existing = qrlMap.get(data);
+                                const existing = this.qrlMap.get(data);
                                 if (existing) {
                                     // We encountered the same QRL again, make it a root
-                                    const ref = $addRoot$(existing);
-                                    output(1 /* TypeIds.RootRef */, ref);
+                                    const ref = this.$serializationContext$.$addRoot$(existing);
+                                    this.output(1 /* TypeIds.RootRef */, ref);
                                     return;
                                 }
                                 else {
-                                    qrlMap.set(data, value);
+                                    this.qrlMap.set(data, value);
                                 }
                             }
                             else {
                                 // sync QRL
                                 data = Number(symbol);
                             }
-                            output(9 /* TypeIds.QRL */, data);
+                            this.output(9 /* TypeIds.QRL */, data);
                         }
                     }
                     else if (isQwikComponent(value)) {
                         const [qrl] = value[SERIALIZABLE_STATE];
-                        serializationContext.$renderSymbols$.add(qrl.$symbol$);
-                        output(21 /* TypeIds.Component */, [qrl]);
+                        this.$serializationContext$.$renderSymbols$.add(qrl.$symbol$);
+                        this.output(21 /* TypeIds.Component */, [qrl]);
                     }
                     else {
                         throw qError(34 /* QError.serializeErrorCannotSerializeFunction */, [value.toString()]);
@@ -8687,25 +8966,25 @@ async function serialize(serializationContext) {
                     break;
                 case 'object':
                     if (value === EMPTY_ARRAY) {
-                        output(3 /* TypeIds.Constant */, 5 /* Constants.EMPTY_ARRAY */);
+                        this.output(3 /* TypeIds.Constant */, 5 /* Constants.EMPTY_ARRAY */);
                     }
                     else if (value === EMPTY_OBJ) {
-                        output(3 /* TypeIds.Constant */, 6 /* Constants.EMPTY_OBJ */);
+                        this.output(3 /* TypeIds.Constant */, 6 /* Constants.EMPTY_OBJ */);
                     }
                     else if (value === null) {
-                        output(3 /* TypeIds.Constant */, 1 /* Constants.Null */);
+                        this.output(3 /* TypeIds.Constant */, 1 /* Constants.Null */);
                     }
                     else if (value instanceof SerializationBackRef) {
-                        output(1 /* TypeIds.RootRef */, value.$path$);
+                        this.output(1 /* TypeIds.RootRef */, value.$path$);
                     }
                     else {
-                        const newSeenRef = getSeenRefOrOutput(value, index);
+                        const newSeenRef = this.getSeenRefOrOutput(value, index);
                         if (newSeenRef) {
-                            const oldParent = parent;
-                            parent = newSeenRef;
+                            const oldParent = this.parent;
+                            this.parent = newSeenRef;
                             // separate function for readability
-                            writeObjectValue(value);
-                            parent = oldParent;
+                            this.writeObjectValue(value);
+                            this.parent = oldParent;
                         }
                     }
                     break;
@@ -8713,11 +8992,11 @@ async function serialize(serializationContext) {
                     throw qError(20 /* QError.serializeErrorUnknownType */, [typeof value]);
             }
         }
-    };
-    const writeObjectValue = (value) => {
+    }
+    writeObjectValue(value) {
         if (isPropsProxy(value)) {
             const owner = value[_OWNER];
-            output(30 /* TypeIds.PropsProxy */, [
+            this.output(30 /* TypeIds.PropsProxy */, [
                 _serializationWeakRef(owner),
                 owner.varProps,
                 owner.constProps,
@@ -8725,10 +9004,13 @@ async function serialize(serializationContext) {
             ]);
         }
         else if (value instanceof SubscriptionData) {
-            output(31 /* TypeIds.SubscriptionData */, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
+            this.output(31 /* TypeIds.SubscriptionData */, [
+                value.data.$scopedStyleIdPrefix$,
+                value.data.$isConst$,
+            ]);
         }
         else if (value instanceof EffectSubscription) {
-            output(32 /* TypeIds.EffectSubscription */, [
+            this.output(32 /* TypeIds.EffectSubscription */, [
                 value.consumer,
                 value.property,
                 value.backRef,
@@ -8744,7 +9026,7 @@ async function serialize(serializationContext) {
             const innerStores = [];
             for (const prop in storeTarget) {
                 const propValue = storeTarget[prop];
-                const innerStore = $storeProxyMap$.get(propValue);
+                const innerStore = this.$serializationContext$.$storeProxyMap$.get(propValue);
                 if (innerStore) {
                     innerStores.push(innerStore);
                 }
@@ -8753,26 +9035,26 @@ async function serialize(serializationContext) {
             while (out[out.length - 1] === undefined) {
                 out.pop();
             }
-            output(27 /* TypeIds.Store */, out);
+            this.output(27 /* TypeIds.Store */, out);
         }
         else if (isSerializerObj(value)) {
             const result = value[SerializerSymbol](value);
             if (isPromise(result)) {
-                const forwardRef = resolvePromise(result, $addRoot$, (resolved, resolvedValue) => {
+                const forwardRef = this.resolvePromise(result, (resolved, resolvedValue) => {
                     return new PromiseResult(26 /* TypeIds.SerializerSignal */, resolved, resolvedValue, undefined, undefined);
                 });
-                output(2 /* TypeIds.ForwardRef */, forwardRef);
+                this.output(2 /* TypeIds.ForwardRef */, forwardRef);
             }
             else {
                 // We replace ourselves with this value
-                const index = parent.$index$;
-                parent = parent.$parent$;
-                writeValue(result, index);
+                const index = this.parent.$index$;
+                this.parent = this.parent.$parent$;
+                this.writeValue(result, index);
             }
         }
         else if (isObjectLiteral(value)) {
             if (Array.isArray(value)) {
-                output(4 /* TypeIds.Array */, value);
+                this.output(4 /* TypeIds.Array */, value);
             }
             else {
                 const out = [];
@@ -8784,24 +9066,24 @@ async function serialize(serializationContext) {
                         }
                     }
                 }
-                output(5 /* TypeIds.Object */, out.length ? out : 0);
+                this.output(5 /* TypeIds.Object */, out.length ? out : 0);
             }
         }
-        else if ($isDomRef$(value)) {
+        else if (this.$serializationContext$.$isDomRef$(value)) {
             value.$ssrNode$.vnodeData[0] |= 16 /* VNodeDataFlag.SERIALIZE */;
-            output(11 /* TypeIds.RefVNode */, value.$ssrNode$.id);
+            this.output(11 /* TypeIds.RefVNode */, value.$ssrNode$.id);
         }
         else if (value instanceof SignalImpl) {
             if (value instanceof SerializerSignalImpl) {
                 const maybeValue = getCustomSerializerPromise(value, value.$untrackedValue$);
                 if (isPromise(maybeValue)) {
-                    const forwardRefId = resolvePromise(maybeValue, $addRoot$, (resolved, resolvedValue) => {
+                    const forwardRefId = this.resolvePromise(maybeValue, (resolved, resolvedValue) => {
                         return new PromiseResult(26 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
                     });
-                    output(2 /* TypeIds.ForwardRef */, forwardRefId);
+                    this.output(2 /* TypeIds.ForwardRef */, forwardRefId);
                 }
                 else {
-                    output(26 /* TypeIds.SerializerSignal */, [
+                    this.output(26 /* TypeIds.SerializerSignal */, [
                         value.$computeQrl$,
                         filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                         value.$effects$,
@@ -8811,8 +9093,8 @@ async function serialize(serializationContext) {
                 return;
             }
             if (value instanceof WrappedSignalImpl) {
-                output(23 /* TypeIds.WrappedSignal */, [
-                    ...serializeWrappingFn(serializationContext, value),
+                this.output(23 /* TypeIds.WrappedSignal */, [
+                    ...serializeWrappingFn(this.$serializationContext$, value),
                     filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                     value.$flags$,
                     value.$hostElement$,
@@ -8829,7 +9111,9 @@ async function serialize(serializationContext) {
                 const interval = isAsync && value.$interval$ > 0 ? value.$interval$ : undefined;
                 const concurrency = isAsync && value.$concurrency$ !== 1 ? value.$concurrency$ : undefined;
                 const timeout = isAsync && value.$timeoutMs$ !== 0 ? value.$timeoutMs$ : undefined;
-                const eagerCleanup = isAsync && value.$flags$ & 32 /* AsyncSignalFlags.EAGER_CLEANUP */ ? true : undefined;
+                // Send the flags but remove the serialization bits and default to 0 when undefined
+                const asyncFlags = (isAsync && value.$flags$ & -25 /* SerializationSignalFlags.SERIALIZATION_ALL_STRATEGIES */) ||
+                    undefined;
                 if (isInvalid || isSkippable) {
                     v = NEEDS_COMPUTATION;
                 }
@@ -8847,6 +9131,7 @@ async function serialize(serializationContext) {
                 if (isAsync) {
                     // After SSR, the signal is never loading, so no need to send it
                     out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedError$);
+                    out.push(asyncFlags || undefined);
                 }
                 let keepUndefined = false;
                 if (v !== NEEDS_COMPUTATION ||
@@ -8867,9 +9152,8 @@ async function serialize(serializationContext) {
                     out.push(interval);
                     out.push(concurrency);
                     out.push(timeout);
-                    out.push(eagerCleanup);
                 }
-                output(isAsync ? 25 /* TypeIds.AsyncSignal */ : 24 /* TypeIds.ComputedSignal */, out, keepUndefined);
+                this.output(isAsync ? 25 /* TypeIds.AsyncSignal */ : 24 /* TypeIds.ComputedSignal */, out, keepUndefined);
             }
             else {
                 const v = value.$untrackedValue$;
@@ -8878,17 +9162,17 @@ async function serialize(serializationContext) {
                 if (value.$effects$) {
                     out.push(...value.$effects$);
                 }
-                output(22 /* TypeIds.Signal */, out, keepUndefined);
+                this.output(22 /* TypeIds.Signal */, out, keepUndefined);
             }
         }
         else if (value instanceof URL) {
-            output(6 /* TypeIds.URL */, value.href);
+            this.output(6 /* TypeIds.URL */, value.href);
         }
         else if (value instanceof Date) {
-            output(7 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
+            this.output(7 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
         }
         else if (value instanceof RegExp) {
-            output(8 /* TypeIds.Regex */, value.toString());
+            this.output(8 /* TypeIds.Regex */, value.toString());
         }
         else if (value instanceof Error) {
             const out = [value.message];
@@ -8898,29 +9182,32 @@ async function serialize(serializationContext) {
             if (isDev) {
                 out.push('stack', value.stack);
             }
-            output(15 /* TypeIds.Error */, out);
+            this.output(15 /* TypeIds.Error */, out);
         }
-        else if ($isSsrNode$(value)) {
-            const rootIndex = $addRoot$(value);
-            serializationContext.$setProp$(value, ELEMENT_ID, String(rootIndex));
+        else if (this.$serializationContext$.$isSsrNode$(value)) {
+            const rootIndex = this.$serializationContext$.$addRoot$(value);
+            this.$serializationContext$.$setProp$(value, ELEMENT_ID, String(rootIndex));
             // we need to output before the vnode overwrites its values
-            output(10 /* TypeIds.VNode */, value.id);
+            this.output(10 /* TypeIds.VNode */, value.id);
             const vNodeData = value.vnodeData;
             if (vNodeData) {
-                discoverValuesForVNodeData(vNodeData, (vNodeDataValue) => $addRoot$(vNodeDataValue));
+                discoverValuesForVNodeData(vNodeData, (vNodeDataValue) => this.$serializationContext$.$addRoot$(vNodeDataValue));
                 vNodeData[0] |= 16 /* VNodeDataFlag.SERIALIZE */;
             }
             if (value.children) {
                 // can be static, but we need to save vnode data structure + discover the back refs
-                for (const child of value.children) {
+                const childrenLength = value.children.length;
+                for (let i = 0; i < childrenLength; i++) {
+                    const child = value.children[i];
                     const childVNodeData = child.vnodeData;
                     if (childVNodeData) {
                         // add all back refs to the roots
-                        for (const value of childVNodeData) {
+                        for (let i = 0; i < childVNodeData.length; i++) {
+                            const value = childVNodeData[i];
                             if (isSsrAttrs(value)) {
-                                const backRefKeyIndex = value.findIndex((v) => v === QBackRefs);
-                                if (backRefKeyIndex !== -1) {
-                                    $addRoot$(value[backRefKeyIndex + 1]);
+                                const backRefs = tryGetBackRefs(value);
+                                if (backRefs) {
+                                    this.$serializationContext$.$addRoot$(backRefs);
                                 }
                             }
                         }
@@ -8932,28 +9219,25 @@ async function serialize(serializationContext) {
         else if (typeof FormData !== 'undefined' && value instanceof FormData) {
             // FormData is generally used only once so don't bother with references
             const array = [];
-            value.forEach((value, key) => {
-                if (typeof value === 'string') {
-                    array.push(key, value);
-                }
-                else {
-                    array.push(key, value.name);
+            for (const [k, v] of value.entries()) {
+                if (typeof v === 'string') {
+                    array.push(k, v);
                 }
-            });
-            output(28 /* TypeIds.FormData */, array);
+            }
+            this.output(28 /* TypeIds.FormData */, array);
         }
         else if (value instanceof URLSearchParams) {
-            output(13 /* TypeIds.URLSearchParams */, value.toString());
+            this.output(13 /* TypeIds.URLSearchParams */, value.toString());
         }
         else if (value instanceof Set) {
-            output(17 /* TypeIds.Set */, [...value.values()]);
+            this.output(17 /* TypeIds.Set */, [...value.values()]);
         }
         else if (value instanceof Map) {
             const combined = [];
             for (const [k, v] of value.entries()) {
                 combined.push(k, v);
             }
-            output(18 /* TypeIds.Map */, combined);
+            this.output(18 /* TypeIds.Map */, combined);
         }
         else if (isJSXNode(value)) {
             const out = [
@@ -8967,7 +9251,7 @@ async function serialize(serializationContext) {
             while (out[out.length - 1] === undefined) {
                 out.pop();
             }
-            output(29 /* TypeIds.JSXNode */, out);
+            this.output(29 /* TypeIds.JSXNode */, out);
         }
         else if (value instanceof Task) {
             const out = [
@@ -8981,24 +9265,24 @@ async function serialize(serializationContext) {
             while (out[out.length - 1] === undefined) {
                 out.pop();
             }
-            output(20 /* TypeIds.Task */, out);
+            this.output(20 /* TypeIds.Task */, out);
         }
         else if (isPromise(value)) {
-            const forwardRefId = resolvePromise(value, $addRoot$, (resolved, resolvedValue) => {
+            const forwardRefId = this.resolvePromise(value, (resolved, resolvedValue) => {
                 return new PromiseResult(16 /* TypeIds.Promise */, resolved, resolvedValue);
             });
-            output(2 /* TypeIds.ForwardRef */, forwardRefId);
+            this.output(2 /* TypeIds.ForwardRef */, forwardRefId);
         }
         else if (value instanceof PromiseResult) {
             if (value.$type$ === 26 /* TypeIds.SerializerSignal */) {
                 if (value.$qrl$) {
-                    output(26 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
+                    this.output(26 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
                 }
                 else if (value.$resolved$) {
                     // We replace ourselves with this value
-                    const index = parent.$index$;
-                    parent = parent.$parent$;
-                    writeValue(value.$value$, index);
+                    const index = this.parent.$index$;
+                    this.parent = this.parent.$parent$;
+                    this.writeValue(value.$value$, index);
                 }
                 else {
                     console.error(value.$value$);
@@ -9006,95 +9290,97 @@ async function serialize(serializationContext) {
                 }
             }
             else {
-                output(16 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
+                this.output(16 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
             }
         }
         else if (value instanceof Uint8Array) {
             let buf = '';
-            for (const c of value) {
-                buf += String.fromCharCode(c);
+            const length = value.length;
+            for (let i = 0; i < length; i++) {
+                buf += String.fromCharCode(value[i]);
             }
             const out = btoa(buf).replace(/=+$/, '');
-            output(19 /* TypeIds.Uint8Array */, out);
+            this.output(19 /* TypeIds.Uint8Array */, out);
         }
         else if (value instanceof SerializationWeakRef) {
             const obj = value.$obj$;
             // This will return a fake SeenRef if it's not been seen before
-            if (getSeenRefOrOutput(obj, parent.$index$, true)) {
-                let forwardRefId = s11nWeakRefs.get(obj);
+            if (this.getSeenRefOrOutput(obj, this.parent.$index$, true)) {
+                let forwardRefId = this.s11nWeakRefs.get(obj);
                 if (forwardRefId === undefined) {
-                    forwardRefId = forwardRefsId++;
-                    s11nWeakRefs.set(obj, forwardRefId);
-                    forwardRefs[forwardRefId] = -1;
+                    forwardRefId = this.forwardRefsId++;
+                    this.s11nWeakRefs.set(obj, forwardRefId);
+                    this.forwardRefs[forwardRefId] = -1;
                 }
-                output(2 /* TypeIds.ForwardRef */, forwardRefId);
+                this.output(2 /* TypeIds.ForwardRef */, forwardRefId);
             }
         }
         else if (vnode_isVNode(value)) {
-            output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
+            this.output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
         }
         else {
             throw qError(20 /* QError.serializeErrorUnknownType */, [typeof value]);
         }
-    };
-    function resolvePromise(promise, $addRoot$, classCreator) {
-        const forwardRefId = forwardRefsId++;
+    }
+    resolvePromise(promise, classCreator) {
+        const forwardRefId = this.forwardRefsId++;
         promise
             .then((resolvedValue) => {
-            promises.delete(promise);
-            forwardRefs[forwardRefId] = $addRoot$(classCreator(true, resolvedValue));
+            this.promises.delete(promise);
+            this.forwardRefs[forwardRefId] = this.$serializationContext$.$addRoot$(classCreator(true, resolvedValue));
         })
             .catch((err) => {
-            promises.delete(promise);
-            forwardRefs[forwardRefId] = $addRoot$(classCreator(false, err));
+            this.promises.delete(promise);
+            this.forwardRefs[forwardRefId] = this.$serializationContext$.$addRoot$(classCreator(false, err));
         });
-        promises.add(promise);
+        this.promises.add(promise);
         return forwardRefId;
     }
-    const outputRoots = async () => {
-        $writer$.write('[');
-        const { $roots$ } = serializationContext;
-        while (rootIdx < $roots$.length || promises.size) {
-            if (rootIdx !== 0) {
-                $writer$.write(',');
+    async outputRoots() {
+        this.$writer$.write(BRACKET_OPEN);
+        const { $roots$ } = this.$serializationContext$;
+        while (this.rootIdx < $roots$.length || this.promises.size) {
+            if (this.rootIdx !== 0) {
+                this.$writer$.write(COMMA);
             }
             let separator = false;
-            for (; rootIdx < $roots$.length; rootIdx++) {
+            for (; this.rootIdx < $roots$.length; this.rootIdx++) {
                 if (separator) {
-                    $writer$.write(',');
+                    this.$writer$.write(COMMA);
                 }
                 else {
                     separator = true;
                 }
-                writeValue($roots$[rootIdx], rootIdx);
+                this.writeValue($roots$[this.rootIdx], this.rootIdx);
             }
-            if (promises.size) {
+            if (this.promises.size) {
                 try {
-                    await Promise.race(promises);
+                    await Promise.race(this.promises);
                 }
                 catch {
                     // ignore rejections, they will be serialized as rejected promises
                 }
             }
         }
-        if (forwardRefs.length) {
-            let lastIdx = forwardRefs.length - 1;
-            while (lastIdx >= 0 && forwardRefs[lastIdx] === -1) {
+        if (this.forwardRefs.length) {
+            let lastIdx = this.forwardRefs.length - 1;
+            while (lastIdx >= 0 && this.forwardRefs[lastIdx] === -1) {
                 lastIdx--;
             }
             if (lastIdx >= 0) {
-                $writer$.write(',');
-                $writer$.write(14 /* TypeIds.ForwardRefs */ + ',');
-                const out = lastIdx === forwardRefs.length - 1 ? forwardRefs : forwardRefs.slice(0, lastIdx + 1);
+                this.$writer$.write(COMMA);
+                this.$writer$.write(14 /* TypeIds.ForwardRefs */ + COMMA);
+                const out = lastIdx === this.forwardRefs.length - 1
+                    ? this.forwardRefs
+                    : this.forwardRefs.slice(0, lastIdx + 1);
                 // We could also implement RLE of -1 values
-                outputArray(out, true, (value) => {
-                    $writer$.write(String(value));
+                this.outputArray(out, true, (value) => {
+                    this.$writer$.write(String(value));
                 });
             }
         }
-        $writer$.write(']');
-    };
-    await outputRoots();
+        this.$writer$.write(BRACKET_CLOSE);
+    }
 }
 class PromiseResult {
     $type$;
@@ -9132,16 +9418,15 @@ function getCustomSerializerPromise(signal, value) {
     });
 }
 const discoverValuesForVNodeData = (vnodeData, callback) => {
-    for (const value of vnodeData) {
+    const length = vnodeData.length;
+    for (let i = 0; i < length; i++) {
+        const value = vnodeData[i];
         if (isSsrAttrs(value)) {
-            for (let i = 1; i < value.length; i += 2) {
-                const keyValue = value[i - 1];
-                const attrValue = value[i];
+            for (const key in value) {
+                const attrValue = value[key];
                 if (attrValue == null ||
                     typeof attrValue === 'string' ||
-                    // skip empty props
-                    (keyValue === ELEMENT_PROPS &&
-                        Object.keys(attrValue).length === 0)) {
+                    (key === ELEMENT_PROPS && isObjectEmpty(attrValue))) {
                     continue;
                 }
                 callback(attrValue);
@@ -9149,7 +9434,7 @@ const discoverValuesForVNodeData = (vnodeData, callback) => {
         }
     }
 };
-const isSsrAttrs = (value) => Array.isArray(value) && value.length > 0;
+const isSsrAttrs = (value) => typeof value === 'object' && value !== null && !isObjectEmpty(value);
 /**
  * When serializing the object we need check if it is URL, RegExp, Map, Set, etc. This is time
  * consuming. So if we could know that this is a basic object literal we could skip the check, and
@@ -9187,6 +9472,11 @@ function filterEffectBackRefs(effectBackRef) {
     }
     return effectBackRefToSerialize;
 }
+function tryGetBackRefs(props) {
+    return Object.prototype.hasOwnProperty.call(props, QBackRefs)
+        ? props[QBackRefs]
+        : undefined;
+}
 class SerializationWeakRef {
     $obj$;
     constructor($obj$) {
@@ -9209,39 +9499,56 @@ class SerializationBackRef {
         this.$path$ = $path$;
     }
 }
-const createSerializationContext = (
-/**
- * Node constructor, for instanceof checks.
- *
- * A node constructor can be null. For example on the client we can't serialize DOM nodes as
- * server will not know what to do with them.
- */
-NodeConstructor, 
-/** DomRef constructor, for instanceof checks. */
-DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer) => {
-    if (!writer) {
-        const buffer = [];
-        writer = {
-            write: (text) => buffer.push(text),
-            toString: () => buffer.join(''),
-        };
-    }
-    const seenObjsMap = new Map();
-    const syncFnMap = new Map();
-    const syncFns = [];
-    const roots = [];
-    const eagerResume = new Set();
-    const getSeenRef = (obj) => seenObjsMap.get(obj);
-    const $markSeen$ = (obj, parent, index) => {
+class SerializationContextImpl {
+    NodeConstructor;
+    DomRefConstructor;
+    $symbolToChunkResolver$;
+    $setProp$;
+    $storeProxyMap$;
+    $writer$;
+    $seenObjsMap$ = new Map();
+    $syncFnMap$ = new Map();
+    $syncFns$ = [];
+    $roots$ = [];
+    $eagerResume$ = new Set();
+    $eventQrls$ = new Set();
+    $eventNames$ = new Set();
+    $renderSymbols$ = new Set();
+    $serializer$;
+    constructor(
+    /**
+     * Node constructor, for instanceof checks.
+     *
+     * A node constructor can be null. For example on the client we can't serialize DOM nodes as
+     * server will not know what to do with them.
+     */
+    NodeConstructor, 
+    /** DomRef constructor, for instanceof checks. */
+    DomRefConstructor, $symbolToChunkResolver$, $setProp$, $storeProxyMap$, $writer$) {
+        this.NodeConstructor = NodeConstructor;
+        this.DomRefConstructor = DomRefConstructor;
+        this.$symbolToChunkResolver$ = $symbolToChunkResolver$;
+        this.$setProp$ = $setProp$;
+        this.$storeProxyMap$ = $storeProxyMap$;
+        this.$writer$ = $writer$;
+        this.$serializer$ = new Serializer(this);
+    }
+    async $serialize$() {
+        return await this.$serializer$.serialize();
+    }
+    getSeenRef(obj) {
+        return this.$seenObjsMap$.get(obj);
+    }
+    $markSeen$(obj, parent, index) {
         const ref = { $index$: index, $parent$: parent };
-        seenObjsMap.set(obj, ref);
+        this.$seenObjsMap$.set(obj, ref);
         return ref;
-    };
+    }
     /**
      * Returns a path string representing the path from roots through all parents to the object.
      * Format: "3 2 0" where each number is the index within its parent, from root to leaf.
      */
-    const $getObjectPath$ = (ref) => {
+    $getObjectPath$(ref) {
         // Traverse up through parent references to build a path
         const path = [];
         while (ref.$parent$) {
@@ -9251,88 +9558,89 @@ DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, write
         // Now we are at root, but it could be a backref
         path.unshift(ref.$index$);
         return path.join(' ');
-    };
-    const $promoteToRoot$ = (ref, index) => {
-        const path = $getObjectPath$(ref);
+    }
+    $promoteToRoot$(ref, index) {
+        const path = this.$getObjectPath$(ref);
         if (index === undefined) {
-            index = roots.length;
+            index = this.$roots$.length;
         }
-        roots[index] = new SerializationBackRef(path);
+        this.$roots$[index] = new SerializationBackRef(path);
         ref.$parent$ = null;
         ref.$index$ = index;
-    };
-    const $addRoot$ = ((obj, returnRef) => {
-        let seen = seenObjsMap.get(obj);
+    }
+    $addRoot$(obj, returnRef = false) {
+        let seen = this.$seenObjsMap$.get(obj);
         let index;
         if (!seen) {
-            index = roots.length;
+            index = this.$roots$.length;
             seen = {
                 $index$: index,
                 // TODO benchmark with and without $parent$
                 // $parent$: undefined
             };
-            seenObjsMap.set(obj, seen);
-            roots.push(obj);
+            this.$seenObjsMap$.set(obj, seen);
+            this.$roots$.push(obj);
         }
         else {
             if (seen.$parent$) {
-                $promoteToRoot$(seen);
+                this.$promoteToRoot$(seen);
             }
             index = seen.$index$;
         }
         return returnRef ? seen : index;
-    });
-    const isSsrNode = (NodeConstructor ? (obj) => obj instanceof NodeConstructor : (() => false));
-    isDomRef = (DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : (() => false));
-    return {
-        async $serialize$() {
-            return await serialize(this);
-        },
-        $isSsrNode$: isSsrNode,
-        $isDomRef$: isDomRef,
-        $symbolToChunkResolver$: symbolToChunkResolver,
-        getSeenRef,
-        $roots$: roots,
-        $markSeen$,
-        $hasRootId$: (obj) => {
-            const id = seenObjsMap.get(obj);
-            return id && (id.$parent$ ? undefined : id.$index$);
-        },
-        $promoteToRoot$,
-        $addRoot$,
-        $syncFns$: syncFns,
-        $addSyncFn$: (funcStr, argCount, fn) => {
-            const isFullFn = funcStr == null;
+    }
+    $isSsrNode$(obj) {
+        return this.NodeConstructor ? obj instanceof this.NodeConstructor : false;
+    }
+    $isDomRef$(obj) {
+        return this.DomRefConstructor ? obj instanceof this.DomRefConstructor : false;
+    }
+    $hasRootId$(obj) {
+        const id = this.$seenObjsMap$.get(obj);
+        return id && (id.$parent$ ? undefined : id.$index$);
+    }
+    $addSyncFn$(funcStr, argCount, fn) {
+        const isFullFn = funcStr == null;
+        if (isFullFn) {
+            funcStr = fn.serialized || fn.toString();
+        }
+        let id = this.$syncFnMap$.get(funcStr);
+        if (id === undefined) {
+            id = this.$syncFns$.length;
+            this.$syncFnMap$.set(funcStr, id);
             if (isFullFn) {
-                funcStr = fn.serialized || fn.toString();
+                this.$syncFns$.push(funcStr);
             }
-            let id = syncFnMap.get(funcStr);
-            if (id === undefined) {
-                id = syncFns.length;
-                syncFnMap.set(funcStr, id);
-                if (isFullFn) {
-                    syncFns.push(funcStr);
-                }
-                else {
-                    let code = '(';
-                    for (let i = 0; i < argCount; i++) {
-                        code += (i == 0 ? 'p' : ',p') + i;
-                    }
-                    syncFns.push((code += ')=>' + funcStr));
+            else {
+                let code = '(';
+                for (let i = 0; i < argCount; i++) {
+                    code += (i == 0 ? 'p' : ',p') + i;
                 }
+                this.$syncFns$.push((code += ')=>' + funcStr));
             }
-            return id;
-        },
-        $writer$: writer,
-        $eventQrls$: new Set(),
-        $eventNames$: new Set(),
-        $renderSymbols$: new Set(),
-        $storeProxyMap$: storeProxyMap,
-        $eagerResume$: eagerResume,
-        $resources$: new Set(),
-        $getProp$: getProp,
-        $setProp$: setProp,
-    };
+        }
+        return id;
+    }
+}
+const createSerializationContext = (
+/**
+ * Node constructor, for instanceof checks.
+ *
+ * A node constructor can be null. For example on the client we can't serialize DOM nodes as
+ * server will not know what to do with them.
+ */
+NodeConstructor, 
+/** DomRef constructor, for instanceof checks. */
+DomRefConstructor, symbolToChunkResolver, setProp, storeProxyMap, writer) => {
+    if (!writer) {
+        const buffer = [];
+        writer = {
+            write: (text) => buffer.push(text),
+            toString: () => buffer.join(''),
+        };
+    }
+    isDomRef = (DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : (() => false));
+    return new SerializationContextImpl(NodeConstructor, DomRefConstructor, symbolToChunkResolver, setProp, storeProxyMap, writer);
 };
 
 /** @internal */
@@ -9363,7 +9671,7 @@ class _SharedContainer {
         return trackSignalAndAssignHost(signal, subscriber, property, this, data);
     }
     serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer) {
-        return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer);
+        return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.setHostProp.bind(this), this.$storeProxyMap$, writer);
     }
     $checkPendingCount$() {
         if (this.$pendingCount$ === 0) {
@@ -9396,16 +9704,14 @@ const applyQwikComponentBody = (ssr, jsx, component) => {
     return executeComponent(ssr, host, host, componentQrl, srcProps);
 };
 
-class ParentComponentData {
-    $scopedStyle$;
-    $componentFrame$;
-    constructor($scopedStyle$, $componentFrame$) {
-        this.$scopedStyle$ = $scopedStyle$;
-        this.$componentFrame$ = $componentFrame$;
-    }
-}
 class MaybeAsyncSignal {
 }
+function setParentOptions(mutable, styleScoped, parentComponentFrame) {
+    return () => {
+        mutable.currentStyleScoped = styleScoped;
+        mutable.parentComponentFrame = parentComponentFrame;
+    };
+}
 /** @internal */
 async function _walkJSX(ssr, value, options) {
     const stack = [value];
@@ -9413,32 +9719,22 @@ async function _walkJSX(ssr, value, options) {
     const drain = async () => {
         while (stack.length) {
             const value = stack.pop();
-            if (value instanceof ParentComponentData) {
-                options.currentStyleScoped = value.$scopedStyle$;
-                options.parentComponentFrame = value.$componentFrame$;
-                continue;
-            }
-            else if (value === MaybeAsyncSignal) {
-                // It could be an async signal, but it is not resolved yet, we need to wait for it.
-                // We could do that in the processJSXNode,
-                // but it will mean that we need to await it there, and it will return a promise.
-                // We probably want to avoid creating a promise for all jsx nodes.
+            // Reference equality first (no prototype walk), then typeof
+            if (value === MaybeAsyncSignal) {
                 const trackFn = stack.pop();
                 await retryOnPromise(() => stack.push(trackFn()));
                 continue;
             }
-            else if (typeof value === 'function') {
+            if (typeof value === 'function') {
                 if (value === Promise) {
                     stack.push(await stack.pop());
-                    continue;
                 }
-                await value.apply(ssr);
+                else {
+                    await value.apply(ssr);
+                }
                 continue;
             }
-            processJSXNode(ssr, enqueue, value, {
-                styleScoped: options.currentStyleScoped,
-                parentComponentFrame: options.parentComponentFrame,
-            });
+            processJSXNode(ssr, enqueue, value, options);
         }
     };
     await drain();
@@ -9465,7 +9761,7 @@ function processJSXNode(ssr, enqueue, value, options) {
         }
         else if (isSignal(value)) {
             maybeAddPollingAsyncSignalToEagerResume(ssr.serializationCtx, value);
-            ssr.openFragment(isDev ? [DEBUG_TYPE, "S" /* VirtualType.WrappedSignal */] : EMPTY_ARRAY);
+            ssr.openFragment(isDev ? { [DEBUG_TYPE]: "S" /* VirtualType.WrappedSignal */ } : EMPTY_OBJ);
             const signalNode = ssr.getOrCreateLastNode();
             const unwrappedSignal = value instanceof WrappedSignalImpl ? value.$unwrapIfSignal$() : value;
             enqueue(ssr.closeFragment);
@@ -9473,20 +9769,20 @@ function processJSXNode(ssr, enqueue, value, options) {
             enqueue(MaybeAsyncSignal);
         }
         else if (isPromise(value)) {
-            ssr.openFragment(isDev ? [DEBUG_TYPE, "A" /* VirtualType.Awaited */] : EMPTY_ARRAY);
+            ssr.openFragment(isDev ? { [DEBUG_TYPE]: "A" /* VirtualType.Awaited */ } : EMPTY_OBJ);
             enqueue(ssr.closeFragment);
             enqueue(value);
             enqueue(Promise);
-            enqueue(() => ssr.commentNode(FLUSH_COMMENT));
+            enqueue(() => ssr.streamHandler.flush());
         }
         else if (isAsyncGenerator(value)) {
             enqueue(async () => {
                 for await (const chunk of value) {
                     await _walkJSX(ssr, chunk, {
-                        currentStyleScoped: options.styleScoped,
+                        currentStyleScoped: options.currentStyleScoped,
                         parentComponentFrame: options.parentComponentFrame,
                     });
-                    ssr.commentNode(FLUSH_COMMENT);
+                    ssr.streamHandler.flush();
                 }
             });
         }
@@ -9495,7 +9791,7 @@ function processJSXNode(ssr, enqueue, value, options) {
             const type = jsx.type;
             // Below, JSXChildren allows functions and regexes, but we assume the dev only uses those as appropriate.
             if (typeof type === 'string') {
-                appendClassIfScopedStyleExists(jsx, options.styleScoped);
+                appendClassIfScopedStyleExists(jsx, options.currentStyleScoped);
                 let qwikInspectorAttrValue = null;
                 if (isDev && jsx.dev && jsx.type !== 'head') {
                     qwikInspectorAttrValue = getFileLocationFromJsx(jsx.dev);
@@ -9503,14 +9799,7 @@ function processJSXNode(ssr, enqueue, value, options) {
                         appendQwikInspectorAttribute(jsx, qwikInspectorAttrValue);
                     }
                 }
-                const innerHTML = ssr.openElement(type, jsx.key, toSsrAttrs(jsx.varProps, {
-                    serializationCtx: ssr.serializationCtx,
-                    styleScopedId: options.styleScoped,
-                    toSort: jsx.toSort,
-                }), toSsrAttrs(jsx.constProps, {
-                    serializationCtx: ssr.serializationCtx,
-                    styleScopedId: options.styleScoped,
-                }), qwikInspectorAttrValue);
+                const innerHTML = ssr.openElement(type, jsx.key, jsx.varProps, jsx.constProps, options.currentStyleScoped, qwikInspectorAttrValue);
                 if (innerHTML) {
                     ssr.htmlNode(innerHTML);
                 }
@@ -9533,9 +9822,9 @@ function processJSXNode(ssr, enqueue, value, options) {
             }
             else if (isFunction(type)) {
                 if (type === Fragment) {
-                    let attrs = jsx.key != null ? [ELEMENT_KEY, jsx.key] : EMPTY_ARRAY;
+                    const attrs = jsx.key != null ? { [ELEMENT_KEY]: jsx.key } : {};
                     if (isDev) {
-                        attrs = [DEBUG_TYPE, "F" /* VirtualType.Fragment */, ...attrs]; // Add debug info.
+                        attrs[DEBUG_TYPE] = "F" /* VirtualType.Fragment */; // Add debug info.
                     }
                     ssr.openFragment(attrs);
                     enqueue(ssr.closeFragment);
@@ -9547,14 +9836,16 @@ function processJSXNode(ssr, enqueue, value, options) {
                     const componentFrame = options.parentComponentFrame;
                     if (componentFrame) {
                         const compId = componentFrame.componentNode.id || '';
-                        const projectionAttrs = isDev ? [DEBUG_TYPE, "P" /* VirtualType.Projection */] : [];
-                        projectionAttrs.push(QSlotParent, compId);
+                        const projectionAttrs = isDev
+                            ? { [DEBUG_TYPE]: "P" /* VirtualType.Projection */ }
+                            : {};
+                        projectionAttrs[QSlotParent] = compId;
                         ssr.openProjection(projectionAttrs);
                         const host = componentFrame.componentNode;
                         const node = ssr.getOrCreateLastNode();
                         const slotName = getSlotName(host, jsx, ssr);
-                        projectionAttrs.push(QSlot, slotName);
-                        enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame));
+                        projectionAttrs[QSlot] = slotName;
+                        enqueue(setParentOptions(options, options.currentStyleScoped, options.parentComponentFrame));
                         enqueue(ssr.closeProjection);
                         const slotDefaultChildren = jsx.children || null;
                         const slotChildren = componentFrame.consumeChildrenForSlot(node, slotName) || slotDefaultChildren;
@@ -9562,11 +9853,15 @@ function processJSXNode(ssr, enqueue, value, options) {
                             ssr.addUnclaimedProjection(componentFrame, QDefaultSlot, slotDefaultChildren);
                         }
                         enqueue(slotChildren);
-                        enqueue(new ParentComponentData(componentFrame.projectionScopedStyle, componentFrame.projectionComponentFrame));
+                        enqueue(setParentOptions(options, componentFrame.projectionScopedStyle, componentFrame.projectionComponentFrame));
                     }
                     else {
                         // Even thought we are not projecting we still need to leave a marker for the slot.
-                        ssr.openFragment(isDev ? [DEBUG_TYPE, "P" /* VirtualType.Projection */] : EMPTY_ARRAY);
+                        let projectionAttrs = EMPTY_OBJ;
+                        if (isDev) {
+                            projectionAttrs = { [DEBUG_TYPE]: "P" /* VirtualType.Projection */ };
+                        }
+                        ssr.openFragment(projectionAttrs);
                         ssr.closeFragment();
                     }
                 }
@@ -9574,17 +9869,17 @@ function processJSXNode(ssr, enqueue, value, options) {
                     ssr.commentNode(directGetPropsProxyProp(jsx, 'data') || '');
                 }
                 else if (type === SSRStream) {
-                    ssr.commentNode(FLUSH_COMMENT);
+                    ssr.streamHandler.flush();
                     const generator = jsx.children;
                     let value;
                     if (isFunction(generator)) {
                         value = generator({
                             async write(chunk) {
                                 await _walkJSX(ssr, chunk, {
-                                    currentStyleScoped: options.styleScoped,
+                                    currentStyleScoped: options.currentStyleScoped,
                                     parentComponentFrame: options.parentComponentFrame,
                                 });
-                                ssr.commentNode(FLUSH_COMMENT);
+                                ssr.streamHandler.flush();
                             },
                         });
                     }
@@ -9597,14 +9892,23 @@ function processJSXNode(ssr, enqueue, value, options) {
                 else if (type === SSRRaw) {
                     ssr.htmlNode(directGetPropsProxyProp(jsx, 'data'));
                 }
+                else if (type === SSRStreamBlock) {
+                    ssr.streamHandler.streamBlockStart();
+                    enqueue(() => ssr.streamHandler.streamBlockEnd());
+                    enqueue(jsx.children);
+                }
                 else if (isQwikComponent(type)) {
-                    // prod: use new instance of an array for props, we always modify props for a component
-                    ssr.openComponent(isDev ? [DEBUG_TYPE, "C" /* VirtualType.Component */] : []);
+                    // prod: use new instance of an object for props, we always modify props for a component
+                    const componentAttrs = {};
+                    if (isDev) {
+                        componentAttrs[DEBUG_TYPE] = "C" /* VirtualType.Component */;
+                    }
+                    ssr.openComponent(componentAttrs);
                     const host = ssr.getOrCreateLastNode();
                     const componentFrame = ssr.getParentComponentFrame();
-                    componentFrame.distributeChildrenIntoSlots(jsx.children, options.styleScoped, options.parentComponentFrame);
+                    componentFrame.distributeChildrenIntoSlots(jsx.children, options.currentStyleScoped, options.parentComponentFrame);
                     const jsxOutput = applyQwikComponentBody(ssr, jsx, type);
-                    enqueue(new ParentComponentData(options.styleScoped, options.parentComponentFrame));
+                    enqueue(setParentOptions(options, options.currentStyleScoped, options.parentComponentFrame));
                     enqueue(ssr.closeComponent);
                     if (isPromise(jsxOutput)) {
                         // Defer reading QScopedStyle until after the promise resolves
@@ -9612,22 +9916,23 @@ function processJSXNode(ssr, enqueue, value, options) {
                             const resolvedOutput = await jsxOutput;
                             const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
                             enqueue(resolvedOutput);
-                            enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                            enqueue(setParentOptions(options, compStyleComponentId, componentFrame));
                         });
                     }
                     else {
                         enqueue(jsxOutput);
                         const compStyleComponentId = addComponentStylePrefix(host.getProp(QScopedStyle));
-                        enqueue(new ParentComponentData(compStyleComponentId, componentFrame));
+                        enqueue(setParentOptions(options, compStyleComponentId, componentFrame));
                     }
                 }
                 else {
-                    const inlineComponentProps = [ELEMENT_KEY, jsx.key];
-                    ssr.openFragment(isDev
-                        ? [DEBUG_TYPE, "I" /* VirtualType.InlineComponent */, ...inlineComponentProps]
-                        : inlineComponentProps);
+                    const inlineComponentProps = { [ELEMENT_KEY]: jsx.key };
+                    if (isDev) {
+                        inlineComponentProps[DEBUG_TYPE] = "I" /* VirtualType.InlineComponent */;
+                    }
+                    ssr.openFragment(inlineComponentProps);
                     enqueue(ssr.closeFragment);
-                    const component = ssr.getComponentFrame(0);
+                    const component = ssr.getParentComponentFrame();
                     const jsxOutput = applyInlineComponent(ssr, component && component.componentNode, type, jsx);
                     enqueue(jsxOutput);
                     isPromise(jsxOutput) && enqueue(Promise);
@@ -9636,112 +9941,6 @@ function processJSXNode(ssr, enqueue, value, options) {
         }
     }
 }
-function toSsrAttrs(record, options) {
-    if (record == null) {
-        return null;
-    }
-    const ssrAttrs = [];
-    const handleProp = (key, value) => {
-        if (value == null) {
-            return;
-        }
-        if (isHtmlAttributeAnEventName(key)) {
-            const eventValue = setEvent(options.serializationCtx, key, value);
-            if (eventValue) {
-                ssrAttrs.push(key, eventValue);
-            }
-            return;
-        }
-        if (isSignal(value)) {
-            maybeAddPollingAsyncSignalToEagerResume(options.serializationCtx, value);
-            // write signal as is. We will track this signal inside `writeAttrs`
-            if (isClassAttr(key)) {
-                // additionally append styleScopedId for class attr
-                ssrAttrs.push(key, [value, options.styleScopedId]);
-            }
-            else {
-                ssrAttrs.push(key, value);
-            }
-            return;
-        }
-        if (isPreventDefault(key)) {
-            addPreventDefaultEventToSerializationContext(options.serializationCtx, key);
-        }
-        else if (key === ITERATION_ITEM_SINGLE || key === ITERATION_ITEM_MULTI) {
-            value = options.serializationCtx.$addRoot$(value);
-        }
-        value = serializeAttribute(key, value, options.styleScopedId);
-        ssrAttrs.push(key, value);
-    };
-    if (options.toSort) {
-        const keys = Object.keys(record).sort();
-        for (const key of keys) {
-            handleProp(key, record[key]);
-        }
-    }
-    else {
-        for (const key in record) {
-            handleProp(key, record[key]);
-        }
-    }
-    return ssrAttrs;
-}
-function setEvent(serializationCtx, key, rawValue) {
-    let value = null;
-    const qrls = rawValue;
-    const appendToValue = (valueToAppend) => {
-        value = (value == null ? '' : value + '|') + valueToAppend;
-    };
-    const getQrlString = (qrl) => {
-        /**
-         * If there are captures we need to schedule so everything is executed in the right order + qrls
-         * are resolved.
-         *
-         * For internal qrls (starting with `_`) we assume that they do the right thing.
-         */
-        if (!qrl.$symbol$.startsWith('_') && qrl.$captures$?.length) {
-            qrl = createQRL(null, '_run', _run, null, [qrl]);
-        }
-        return qrlToString(serializationCtx, qrl);
-    };
-    if (Array.isArray(qrls)) {
-        for (let i = 0; i <= qrls.length; i++) {
-            const qrl = qrls[i];
-            if (isQrl(qrl)) {
-                appendToValue(getQrlString(qrl));
-                addQwikEventToSerializationContext(serializationCtx, key, qrl);
-            }
-            else if (qrl != null) {
-                // nested arrays etc.
-                const nestedValue = setEvent(serializationCtx, key, qrl);
-                if (nestedValue) {
-                    appendToValue(nestedValue);
-                }
-            }
-        }
-    }
-    else if (isQrl(qrls)) {
-        value = getQrlString(qrls);
-        addQwikEventToSerializationContext(serializationCtx, key, qrls);
-    }
-    return value;
-}
-function addQwikEventToSerializationContext(serializationCtx, key, qrl) {
-    const data = getEventDataFromHtmlAttribute(key);
-    if (data) {
-        const [scope, eventName] = data;
-        const scopedEvent = getScopedEventName(scope, eventName);
-        serializationCtx.$eventNames$.add(scopedEvent);
-        serializationCtx.$eventQrls$.add(qrl);
-    }
-}
-function addPreventDefaultEventToSerializationContext(serializationCtx, key) {
-    // skip the `preventdefault`, leave the ':'
-    const eventName = 'e' + key.substring(14);
-    if (eventName) {
-        serializationCtx.$eventNames$.add(eventName);
-    }
-}
 function maybeAddPollingAsyncSignalToEagerResume(serializationCtx, signal) {
     // Unwrap if it's a WrappedSignalImpl
     const unwrappedSignal = signal instanceof WrappedSignalImpl ? signal.$unwrapIfSignal$() : signal;
@@ -9912,6 +10111,57 @@ const isResourceReturn = (obj) => {
     return obj && obj.__brand === 'resource';
 };
 
+/** @internal */
+function setEvent(serializationCtx, key, rawValue, isLoopElement) {
+    let value = null;
+    const qrls = rawValue;
+    const appendToValue = (valueToAppend) => {
+        value = (value == null ? '' : value + '|') + valueToAppend;
+    };
+    const getQrlString = (qrl) => {
+        /**
+         * If there are captures we need to schedule so everything is executed in the right order + qrls
+         * are resolved.
+         *
+         * For internal qrls (starting with `_`) we assume that they do the right thing.
+         */
+        if (!qrl.$symbol$.startsWith('_') && (qrl.$captures$?.length || isLoopElement)) {
+            qrl = createQRL(null, '_run', _run, null, [qrl]);
+        }
+        return qrlToString(serializationCtx, qrl);
+    };
+    if (Array.isArray(qrls)) {
+        for (let i = 0; i < qrls.length; i++) {
+            const qrl = qrls[i];
+            if (isQrl(qrl)) {
+                appendToValue(getQrlString(qrl));
+                addQwikEventToSerializationContext(serializationCtx, key, qrl);
+            }
+            else if (qrl != null) {
+                // nested arrays etc.
+                const nestedValue = setEvent(serializationCtx, key, qrl, isLoopElement);
+                if (nestedValue) {
+                    appendToValue(nestedValue);
+                }
+            }
+        }
+    }
+    else if (isQrl(qrls)) {
+        value = getQrlString(qrls);
+        addQwikEventToSerializationContext(serializationCtx, key, qrls);
+    }
+    return value;
+}
+function addQwikEventToSerializationContext(serializationCtx, key, qrl) {
+    const data = getEventDataFromHtmlAttribute(key);
+    if (data) {
+        const [scope, eventName] = data;
+        const scopedEvent = getScopedEventName(scope, eventName);
+        serializationCtx.$eventNames$.add(scopedEvent);
+        serializationCtx.$eventQrls$.add(qrl);
+    }
+}
+
 let loading = Promise.resolve();
 const inflate = (container, target, typeId, data) => {
     if (typeId === 0 /* TypeIds.Plain */) {
@@ -9999,21 +10249,23 @@ const inflate = (container, target, typeId, data) => {
             asyncSignal.$loadingEffects$ = new Set(d[3]);
             asyncSignal.$errorEffects$ = new Set(d[4]);
             asyncSignal.$untrackedError$ = d[5];
-            const hasValue = d.length > 6;
+            asyncSignal.$flags$ = d[6] ?? 0;
+            if (asyncSignal.$flags$ & 64 /* AsyncSignalFlags.CLIENT_ONLY */) {
+                // If it's client only, it was serialized because it pretended to be loading
+                asyncSignal.$untrackedLoading$ = true;
+            }
+            const hasValue = d.length > 7;
             if (hasValue) {
-                asyncSignal.$untrackedValue$ = d[6];
+                asyncSignal.$untrackedValue$ = d[7];
             }
-            if (asyncSignal.$untrackedValue$ !== NEEDS_COMPUTATION) {
-                // If we have a value after SSR, it will always be mean the signal was not invalid
-                asyncSignal.$flags$ &= -2 /* SignalFlags.INVALID */;
+            // can happen when never serialize etc
+            if (asyncSignal.$untrackedValue$ === NEEDS_COMPUTATION) {
+                asyncSignal.$flags$ |= 1 /* SignalFlags.INVALID */;
             }
             // Note, we use the setter so that it schedules polling if needed
-            asyncSignal.interval = d[7] ?? 0;
-            asyncSignal.$concurrency$ = d[8] ?? 1;
-            asyncSignal.$timeoutMs$ = d[9] ?? 0;
-            if (d[10]) {
-                asyncSignal.$flags$ |= 32 /* AsyncSignalFlags.EAGER_CLEANUP */;
-            }
+            asyncSignal.interval = (d[8] ?? 0);
+            asyncSignal.$concurrency$ = (d[9] ?? 1);
+            asyncSignal.$timeoutMs$ = (d[10] ?? 0);
             break;
         }
         // Inflating a SerializerSignal is the same as inflating a ComputedSignal
@@ -10356,7 +10608,6 @@ function processVNodeData(document) {
     // Process all of the `qwik/vnode` script tags by attaching them to the corresponding containers.
     const attachVnodeDataAndRefs = (element) => {
         Array.from(element.querySelectorAll('script[type="qwik/vnode"]')).forEach((script) => {
-            script.setAttribute('type', 'x-qwik/vnode');
             const qContainerElement = script.closest('[q\\:container]');
             qContainerElement.qVnodeData = script.textContent;
             qContainerElement.qVNodeRefs = new Map();
@@ -10673,9 +10924,14 @@ class DomContainer extends _SharedContainer {
     $hoistStyles$() {
         const document = this.element.ownerDocument;
         const head = document.head;
-        const styles = document.querySelectorAll(QStylesAllSelector);
-        for (let i = 0; i < styles.length; i++) {
-            head.appendChild(styles[i]);
+        const styles = document.body.querySelectorAll(QStylesAllSelector);
+        const styleTagCount = styles.length;
+        if (styleTagCount) {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < styleTagCount; i++) {
+                fragment.appendChild(styles[i]);
+            }
+            head.appendChild(fragment);
         }
     }
     $setRawState$(id, vParent) {
@@ -11649,7 +11905,7 @@ function preprocessState(data, container) {
  * @internal
  */
 async function _serialize(data) {
-    const serializationContext = createSerializationContext(null, null, () => '', () => '', () => { }, new WeakMap());
+    const serializationContext = createSerializationContext(null, null, () => '', () => { }, new WeakMap());
     serializationContext.$addRoot$(data);
     await serializationContext.$serialize$();
     return serializationContext.$writer$.toString();
@@ -11786,7 +12042,7 @@ const shouldSerialize = (obj) => {
 const fastSkipSerialize = (obj) => {
     return (!!obj &&
         (isObject(obj) || typeof obj === 'function') &&
-        (NoSerializeSymbol in obj || noSerializeSet.has(obj)));
+        (noSerializeSet.has(obj) || NoSerializeSymbol in obj));
 };
 // <docs markdown="../../readme.md#noSerialize">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -12037,12 +12293,9 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, captures) => {
             return symbolRef;
         }));
     }
-    if (isBrowser && symbol) {
-        /**
-         * Preloading the symbol instead of the chunk allows us to get probabilities for the bundle
-         * based on its contents.
-         */
-        p(symbol, 0.8);
+    if (isBrowser && chunk) {
+        /** Preloading the chunk when we create the QRL. */
+        p(chunk, 0.8);
     }
     return qrl;
 };
@@ -12672,12 +12925,12 @@ const a = 97; // `a`.charCodeAt(0);
 const z = 122; // `z`.charCodeAt(0);
 const OPEN_BRACE = 123; // `{`.charCodeAt(0);
 const CLOSE_BRACE = 125; // `}`.charCodeAt(0);
-const STRINGS_COMMENTS = /*__PURE__*/ (() => [
+const STRINGS_COMMENTS = /*@__PURE__*/ (() => [
     [ANY, SINGLE_QUOTE, stringSingle],
     [ANY, DOUBLE_QUOTE, stringDouble],
     [ANY, FORWARD_SLASH, commentMultiline, '*'],
 ])();
-const STATE_MACHINE = /*__PURE__*/ (() => [
+const STATE_MACHINE = /*@__PURE__*/ (() => [
     [
         /// rule
         [ANY, STAR, starSelector],
@@ -13105,6 +13358,7 @@ const useConstant = (value, ...args) => {
     if (val != null) {
         return val;
     }
+    // We don't want to create a subscription since we only run this once
     // Note: We are not using `invoke` here because we don't want to clear the context
     value = isFunction(value) && !isQwikComponent(value) ? untrack(value, ...args) : value;
     return set(value);
@@ -13488,11 +13742,7 @@ const PrefetchGraph = (_opts = {}) => null;
 // Protect against duplicate imports
 //////////////////////////////////////////////////////////////////////////////////////////
 if (globalThis.__qwik) {
-    console.error(`==============================================\n` +
-        `Qwik version ${globalThis.__qwik} already imported while importing ${version}.\n` +
-        `This can lead to issues due to duplicated shared structures.\n` +
-        `Verify that the Qwik libraries you're using are in "resolve.noExternal[]" and in "optimizeDeps.exclude".\n` +
-        `==============================================\n`);
+    qError(30 /* QError.duplicateQwik */, [globalThis.__qwik, version]);
 }
 globalThis.__qwik = version;
 if (import.meta.hot) {
@@ -13501,5 +13751,5 @@ if (import.meta.hot) {
     });
 }
 
-export { $, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _captures, _chk, createQRL as _createQRL, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, qrlToString as _qrlToString, _regSymbol, _res, _resolveContextWithoutSequentialScope, _restProps, _rsc, _run, _serialize, scheduleTask as _task, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getFirstChild as _vnode_getFirstChild, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsync$, createAsyncSignal as createAsyncQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsync$, useAsyncQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
+export { $, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, EMPTY_OBJ as _EMPTY_OBJ, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _captures, _chk, createQRL as _createQRL, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, qrlToString as _qrlToString, _regSymbol, _res, _resolveContextWithoutSequentialScope, _restProps, _rsc, _run, _serialize, setEvent as _setEvent, scheduleTask as _task, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getFirstChild as _vnode_getFirstChild, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsync$, createAsyncSignal as createAsyncQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsync$, useAsyncQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
 //# sourceMappingURL=core.mjs.map