@qwik.dev/core 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.1-dev+495e8d9
+ * @qwik.dev/core 2.0.0-beta.10-dev+4669425
  * 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,6 +9,13 @@ 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.10-dev+4669425";
+
 // same as isDev but separate so we can test
 const qDev = globalThis.qDev !== false;
 const qInspector = globalThis.qInspector === true;
@@ -72,6 +79,30 @@ const createAndLogError = (asyncThrow, message, ...optionalParams) => {
     return err;
 };
 
+/** @private */
+const isSerializableObject = (v) => {
+    const proto = Object.getPrototypeOf(v);
+    return proto === Object.prototype || proto === Array.prototype || proto === null;
+};
+const isObject = (v) => {
+    return typeof v === 'object' && v !== null;
+};
+const isArray = (v) => {
+    return Array.isArray(v);
+};
+const isString = (v) => {
+    return typeof v === 'string';
+};
+const isNumber$1 = (v) => {
+    return typeof v === 'number';
+};
+const isFunction = (v) => {
+    return typeof v === 'function';
+};
+const isPrimitive = (v) => {
+    return typeof v !== 'object' && typeof v !== 'function' && v !== null && v !== undefined;
+};
+
 const codeToText = (code, ...parts) => {
     if (qDev) {
         // Keep one error, one line to make it easier to search for the error message.
@@ -116,7 +147,7 @@ const codeToText = (code, ...parts) => {
         if (parts.length) {
             text = text.replaceAll(/{{(\d+)}}/g, (_, index) => {
                 let v = parts[index];
-                if (v && typeof v === 'object' && v.constructor === Object) {
+                if (v && isObject(v) && v.constructor === Object) {
                     v = JSON.stringify(v).slice(0, 50);
                 }
                 return v;
@@ -195,9 +226,13 @@ const QContainerSelector = '[q\\:container]:not([q\\:container=' +
     ']):not([q\\:container=' +
     "text" /* QContainerValue.TEXT */ +
     '])';
+// Node namespaces
 const HTML_NS = 'http://www.w3.org/1999/xhtml';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
+// Attributes namespaces
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+const XML_NS = 'http://www.w3.org/XML/1998/namespace';
 const ResourceEvent = 'qResource';
 const RenderEvent = 'qRender';
 const TaskEvent = 'qTask';
@@ -263,13 +298,6 @@ const createPlatform = () => {
                 });
             });
         },
-        nextTick: (fn) => {
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    resolve(fn());
-                });
-            });
-        },
         chunkForSymbol(symbolName, chunk) {
             return [symbolName, chunk ?? '_'];
         },
@@ -377,7 +405,7 @@ const delay = (timeout) => {
         setTimeout(resolve, timeout);
     });
 };
-// Retries a function that throws a promise.
+/** Retries a function that throws a promise. */
 function retryOnPromise(fn, retryCount = 0) {
     const retryOrThrow = (e) => {
         if (isPromise(e) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
@@ -402,24 +430,6 @@ function retryOnPromise(fn, retryCount = 0) {
     }
 }
 
-/** @private */
-const isSerializableObject = (v) => {
-    const proto = Object.getPrototypeOf(v);
-    return proto === Object.prototype || proto === Array.prototype || proto === null;
-};
-const isObject = (v) => {
-    return !!v && typeof v === 'object';
-};
-const isArray = (v) => {
-    return Array.isArray(v);
-};
-const isString = (v) => {
-    return typeof v === 'string';
-};
-const isFunction = (v) => {
-    return typeof v === 'function';
-};
-
 const ASSERT_DISCLAIMER = 'Internal assert, this is likely caused by a bug in Qwik: ';
 function assertDefined(value, text, ...parts) {
     if (qDev) {
@@ -545,6 +555,13 @@ class SignalImpl {
         this.$container$ = container;
         this.$untrackedValue$ = value;
     }
+    /**
+     * Use this to force running subscribers, for example when the calculated value has mutated but
+     * remained the same object
+     */
+    force() {
+        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
+    }
     get untrackedValue() {
         return this.$untrackedValue$;
     }
@@ -558,14 +575,7 @@ class SignalImpl {
     set value(value) {
         if (value !== this.$untrackedValue$) {
             this.$untrackedValue$ = value;
-            // TODO: move this to the scheduler
-            triggerEffects(this.$container$, this, this.$effects$);
-            // this.$container$?.$scheduler$(
-            //   ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS,
-            //   null,
-            //   this,
-            //   this.$effects$
-            // );
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
         }
     }
     // prevent accidental use as value
@@ -627,23 +637,19 @@ class WrappedSignalImpl extends SignalImpl {
     $funcStr$;
     $flags$;
     $hostElement$ = null;
-    $forceRunEffects$ = false;
     [_EFFECT_BACK_REF] = null;
     constructor(container, fn, args, fnStr, 
     // We need a separate flag to know when the computation needs running because
     // we need the old value to know if effects need running after computation
-    flags = 1 /* SignalFlags.INVALID */ | 2 /* WrappedSignalFlags.UNWRAP */) {
+    flags = 1 /* SignalFlags.INVALID */ | 4 /* WrappedSignalFlags.UNWRAP */) {
         super(container, NEEDS_COMPUTATION);
         this.$args$ = args;
         this.$func$ = fn;
         this.$funcStr$ = fnStr;
         this.$flags$ = flags;
     }
-    $invalidate$() {
+    invalidate() {
         this.$flags$ |= 1 /* SignalFlags.INVALID */;
-        this.$forceRunEffects$ = false;
-        // We should only call subscribers if the calculation actually changed.
-        // Therefore, we need to calculate the value now.
         this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, this.$hostElement$, this, this.$effects$);
     }
     /**
@@ -651,30 +657,26 @@ class WrappedSignalImpl extends SignalImpl {
      * remained the same object.
      */
     force() {
-        this.$flags$ |= 1 /* SignalFlags.INVALID */;
-        this.$forceRunEffects$ = false;
-        triggerEffects(this.$container$, this, this.$effects$);
+        this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
+        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, this.$hostElement$, this, this.$effects$);
     }
     get untrackedValue() {
-        const didChange = this.$computeIfNeeded$();
-        if (didChange) {
-            this.$forceRunEffects$ = didChange;
-        }
+        this.$computeIfNeeded$();
         assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
         return this.$untrackedValue$;
     }
     $computeIfNeeded$() {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-            return false;
+            return;
         }
         const untrackedValue = trackSignal(() => this.$func$(...this.$args$), this, "." /* EffectProperty.VNODE */, this.$container$);
-        // TODO: we should remove invalid flag here
+        // TODO: we should remove invalid flag here, but some tests are failing
         // this.$flags$ &= ~SignalFlags.INVALID;
         const didChange = untrackedValue !== this.$untrackedValue$;
         if (didChange) {
+            this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
             this.$untrackedValue$ = untrackedValue;
         }
-        return didChange;
     }
     // Make this signal read-only
     set value(_) {
@@ -711,7 +713,6 @@ function isSsrNode(value) {
 }
 
 let _context;
-/** @public */
 const tryGetInvokeContext = () => {
     if (!_context) {
         const context = typeof document !== 'undefined' && document && document.__q_context__;
@@ -732,6 +733,7 @@ const getInvokeContext = () => {
     }
     return ctx;
 };
+/** @internal */
 const useInvokeContext = () => {
     const ctx = tryGetInvokeContext();
     if (!ctx || ctx.$event$ !== RenderEvent) {
@@ -777,7 +779,7 @@ const newInvokeContextFromTuple = ([element, event, url]) => {
 // TODO how about putting url and locale (and event/custom?) in to a "static" object
 const newInvokeContext = (locale, hostElement, element, event, url) => {
     // ServerRequestEvent has .locale, but it's not always defined.
-    const $locale$ = locale || (typeof event === 'object' && event && 'locale' in event ? event.locale : undefined);
+    const $locale$ = locale || (event && isObject(event) && 'locale' in event ? event.locale : undefined);
     const ctx = {
         $url$: url,
         $i$: 0,
@@ -857,17 +859,38 @@ const _getContextEvent = () => {
     }
 };
 /** @internal */
+const _getContextContainer = () => {
+    const iCtx = tryGetInvokeContext();
+    if (iCtx) {
+        return iCtx.$container$;
+    }
+};
+/** @internal */
 const _jsxBranch = (input) => {
     return input;
 };
 /** @internal */
 const _waitUntilRendered = (elm) => {
-    const containerEl = _getQContainerElement(elm);
-    if (!containerEl) {
+    const container = _getQContainerElement(elm)?.qContainer;
+    if (!container) {
         return Promise.resolve();
     }
-    const container = containerEl.qContainer;
-    return container?.renderDone ?? Promise.resolve();
+    // Multi-cycle idle: loop WAIT_FOR_QUEUE until the flush epoch stays stable
+    // across an extra microtask, which signals that no new work re-scheduled.
+    return (async () => {
+        for (;;) {
+            await container.$scheduler$(255 /* ChoreType.WAIT_FOR_QUEUE */).$returnValue$;
+            const firstEpoch = container.$flushEpoch$ || 0;
+            // Give a microtask for any immediate follow-up scheduling to enqueue
+            await Promise.resolve();
+            const secondEpoch = container.$flushEpoch$ || 0;
+            // If no epoch change occurred during and after WAIT_FOR_QUEUE, we are idle.
+            if (firstEpoch === secondEpoch) {
+                return;
+            }
+            // Continue loop if epoch advanced, meaning more work flushed.
+        }
+    })();
 };
 
 /**
@@ -945,7 +968,7 @@ function jsxEventToHtmlAttribute(jsxEvent) {
     }
     return null; // Return null if not matching expected format
 }
-function eventNameToJsxEvent(eventName, prefix, startIdx = 0) {
+function eventNameToJsxEvent(eventName, prefix) {
     eventName = eventName.charAt(0).toUpperCase() + eventName.substring(1);
     return prefix + eventName + EVENT_SUFFIX;
 }
@@ -1214,6 +1237,15 @@ const validateContext = (context) => {
         throw qError(11 /* QError.invalidContext */, [context]);
     }
 };
+/** @internal */
+const _resolveContextWithoutSequentialScope = (context) => {
+    const iCtx = getInvokeContext();
+    const hostElement = iCtx.$hostElement$;
+    if (!hostElement) {
+        return undefined;
+    }
+    return iCtx.$container$?.resolveContext(hostElement, context);
+};
 
 const ERROR_CONTEXT = /*#__PURE__*/ createContextId('qk-error');
 const isRecoverable = (err) => {
@@ -1225,13 +1257,6 @@ const isRecoverable = (err) => {
     return true;
 };
 
-/**
- * QWIK_VERSION
- *
- * @public
- */
-const version = "2.0.0-beta.1-dev+495e8d9";
-
 /** @internal */
 const EMPTY_ARRAY = [];
 const EMPTY_OBJ = {};
@@ -1372,7 +1397,7 @@ const useLexicalScope = () => {
  *
  * @internal
  */
-const queueQRL = (...args) => {
+const _run = (...args) => {
     // This will already check container
     const [runQrl] = useLexicalScope();
     const context = getInvokeContext();
@@ -1386,7 +1411,58 @@ const queueQRL = (...args) => {
     if (!scheduler) {
         throw qError(1 /* QError.schedulerNotFound */);
     }
-    return scheduler(2 /* ChoreType.RUN_QRL */, hostElement, runQrl, args);
+    // We don't return anything, the scheduler is in charge now
+    const chore = scheduler(2 /* ChoreType.RUN_QRL */, hostElement, runQrl, args);
+    return getChorePromise(chore);
+};
+
+/** @internal */
+const mapApp_findIndx = (array, key, start) => {
+    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;
 };
 
 /** @internal */
@@ -1395,6 +1471,8 @@ const _CONST_PROPS = Symbol('CONST');
 const _VAR_PROPS = Symbol('VAR');
 /** @internal @deprecated v1 compat */
 const _IMMUTABLE = Symbol('IMMUTABLE');
+/** @internal */
+const _UNINITIALIZED = Symbol('UNINITIALIZED');
 
 // <docs markdown="../../readme.md#implicit$FirstArg">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -1459,21 +1537,20 @@ class ComputedSignalImpl extends SignalImpl {
      */
     $computeQrl$;
     $flags$;
-    $forceRunEffects$ = false;
     [_EFFECT_BACK_REF] = null;
     constructor(container, fn, 
     // We need a separate flag to know when the computation needs running because
     // we need the old value to know if effects need running after computation
-    flags = 1 /* SignalFlags.INVALID */) {
+    flags = 1 /* SignalFlags.INVALID */ |
+        32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */) {
         // The value is used for comparison when signals trigger, which can only happen
         // when it was calculated before. Therefore we can pass whatever we like.
         super(container, NEEDS_COMPUTATION);
         this.$computeQrl$ = fn;
         this.$flags$ = flags;
     }
-    $invalidate$() {
+    invalidate() {
         this.$flags$ |= 1 /* SignalFlags.INVALID */;
-        this.$forceRunEffects$ = false;
         this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
     }
     /**
@@ -1481,20 +1558,17 @@ class ComputedSignalImpl extends SignalImpl {
      * remained the same object
      */
     force() {
-        this.$forceRunEffects$ = true;
-        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
+        this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
+        super.force();
     }
     get untrackedValue() {
-        const didChange = this.$computeIfNeeded$();
-        if (didChange) {
-            this.$forceRunEffects$ = didChange;
-        }
+        this.$computeIfNeeded$();
         assertFalse(this.$untrackedValue$ === NEEDS_COMPUTATION, 'Invalid state');
         return this.$untrackedValue$;
     }
     $computeIfNeeded$() {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-            return false;
+            return;
         }
         const computeQrl = this.$computeQrl$;
         throwIfQRLNotResolved(computeQrl);
@@ -1513,9 +1587,12 @@ class ComputedSignalImpl extends SignalImpl {
             this.$flags$ &= ~1 /* SignalFlags.INVALID */;
             const didChange = untrackedValue !== this.$untrackedValue$;
             if (didChange) {
+                // skip first computation when value is not changed
+                if (this.$untrackedValue$ !== NEEDS_COMPUTATION) {
+                    this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
+                }
                 this.$untrackedValue$ = untrackedValue;
             }
-            return didChange;
         }
         finally {
             if (ctx) {
@@ -1541,12 +1618,12 @@ class ComputedSignalImpl extends SignalImpl {
  */
 class SerializerSignalImpl extends ComputedSignalImpl {
     constructor(container, argQrl) {
-        super(container, argQrl);
+        super(container, argQrl, 1 /* SignalFlags.INVALID */ | 32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */);
     }
     $didInitialize$ = false;
     $computeIfNeeded$() {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-            return false;
+            return;
         }
         throwIfQRLNotResolved(this.$computeQrl$);
         let arg = this.$computeQrl$.resolved;
@@ -1557,16 +1634,16 @@ class SerializerSignalImpl extends ComputedSignalImpl {
         const update = arg.update;
         const currentValue = this.$untrackedValue$ === NEEDS_COMPUTATION ? initial : this.$untrackedValue$;
         const untrackedValue = trackSignal(() => this.$didInitialize$
-            ? update?.(currentValue)
+            ? update?.(currentValue) || currentValue
             : deserialize(currentValue), this, "." /* EffectProperty.VNODE */, this.$container$);
         const didChange = (this.$didInitialize$ && untrackedValue !== 'undefined') ||
             untrackedValue !== this.$untrackedValue$;
         this.$flags$ &= -2 /* SignalFlags.INVALID */;
         this.$didInitialize$ = true;
         if (didChange) {
+            this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
             this.$untrackedValue$ = untrackedValue;
         }
-        return didChange;
     }
 }
 
@@ -1576,6 +1653,28 @@ const getStoreHandler = (value) => {
 const getStoreTarget = (value) => {
     return value?.[STORE_TARGET] || null;
 };
+/**
+ * Force a store to recompute and schedule effects.
+ *
+ * @public
+ */
+const forceStoreEffects = (value, prop) => {
+    const handler = getStoreHandler(value);
+    if (handler) {
+        handler.force(prop);
+    }
+};
+/**
+ * @returns True if the store has effects for the given prop
+ * @internal
+ */
+const _hasStoreEffects = (value, prop) => {
+    const handler = getStoreHandler(value);
+    if (handler) {
+        return (handler.$effects$?.get(prop)?.size ?? 0) > 0;
+    }
+    return false;
+};
 /**
  * Get the original object that was wrapped by the store. Useful if you want to clone a store
  * (structuredClone, IndexedDB,...)
@@ -1585,6 +1684,7 @@ const getStoreTarget = (value) => {
 const unwrapStore = (value) => {
     return getStoreTarget(value) || value;
 };
+/** @internal */
 const isStore = (value) => {
     return STORE_TARGET in value;
 };
@@ -1613,7 +1713,12 @@ class StoreHandler {
     toString() {
         return '[Store]';
     }
+    force(prop) {
+        const target = getStoreTarget(this);
+        this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, getEffects(target, prop, this.$effects$));
+    }
     get(target, prop) {
+        // TODO(perf): handle better `slice` calls
         if (typeof prop === 'symbol') {
             if (prop === STORE_TARGET) {
                 return target;
@@ -1646,8 +1751,7 @@ class StoreHandler {
         }
         const flags = this.$flags$;
         if (flags & 1 /* StoreFlags.RECURSIVE */ &&
-            typeof value === 'object' &&
-            value !== null &&
+            isObject(value) &&
             !Object.isFrozen(value) &&
             !isStore(value) &&
             !Object.isFrozen(target)) {
@@ -1677,7 +1781,11 @@ class StoreHandler {
         if (typeof prop != 'string' || !delete target[prop]) {
             return false;
         }
-        triggerEffects(this.$container$, this, getEffects(target, prop, this.$effects$));
+        if (!Array.isArray(target)) {
+            // If the target is an array, we don't need to trigger effects.
+            // Changing the length property will trigger effects.
+            this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, getEffects(target, prop, this.$effects$));
+        }
         return true;
     }
     has(target, prop) {
@@ -1736,8 +1844,10 @@ function addStoreEffect(target, prop, store, effectSubscription) {
 }
 function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
     target[prop] = value;
-    // TODO: trigger effects through the scheduler
-    triggerEffects(currentStore.$container$, currentStore, getEffects(target, prop, currentStore.$effects$));
+    const effects = getEffects(target, prop, currentStore.$effects$);
+    if (effects) {
+        currentStore.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, currentStore, effects);
+    }
 }
 function getEffects(target, prop, storeEffects) {
     let effectsToTrigger;
@@ -1825,7 +1935,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
     $loadingEffects$ = null;
     $errorEffects$ = null;
     $destroy$;
-    $promiseValue$ = null;
+    $promiseValue$ = NEEDS_COMPUTATION;
     [_EFFECT_BACK_REF] = null;
     constructor(container, fn, flags = 1 /* SignalFlags.INVALID */) {
         super(container, fn, flags);
@@ -1859,18 +1969,23 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
     get untrackedError() {
         return this.$untrackedError$;
     }
+    invalidate() {
+        super.invalidate();
+        this.$promiseValue$ = NEEDS_COMPUTATION;
+    }
     $computeIfNeeded$() {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-            return false;
+            return;
         }
         const computeQrl = this.$computeQrl$;
         throwIfQRLNotResolved(computeQrl);
         const [cleanup] = cleanupFn(this, (err) => this.$container$?.handleError(err, null));
-        const untrackedValue = this.$promiseValue$ ??
-            computeQrl.getFn()({
+        const untrackedValue = this.$promiseValue$ === NEEDS_COMPUTATION
+            ? computeQrl.getFn()({
                 track: trackFn(this, this.$container$),
                 cleanup,
-            });
+            })
+            : this.$promiseValue$;
         if (isPromise(untrackedValue)) {
             this.untrackedLoading = true;
             this.untrackedError = null;
@@ -1881,14 +1996,16 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
                 this.untrackedError = null;
             })
                 .catch((err) => {
+                this.$promiseValue$ = err;
                 this.untrackedLoading = false;
                 this.untrackedError = err;
             });
         }
-        this.$promiseValue$ = null;
+        this.$promiseValue$ = NEEDS_COMPUTATION;
         this.$flags$ &= -2 /* SignalFlags.INVALID */;
         const didChange = untrackedValue !== this.$untrackedValue$;
         if (didChange) {
+            this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
             this.$untrackedValue$ = untrackedValue;
         }
         return didChange;
@@ -1900,13 +2017,15 @@ const createSignal$1 = (value) => {
     return new SignalImpl(null, value);
 };
 /** @internal */
-const createComputedSignal = (qrl) => {
-    throwIfQRLNotResolved(qrl);
-    return new ComputedSignalImpl(null, qrl);
+const createComputedSignal = (qrl, options) => {
+    return new ComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || 'always'));
+};
+/** @internal */
+const createAsyncComputedSignal = (qrl, options) => {
+    return new AsyncComputedSignalImpl(options?.container || null, qrl, getComputedSignalFlags(options?.serializationStrategy || 'never'));
 };
 /** @internal */
 const createSerializerSignal = (arg) => {
-    throwIfQRLNotResolved(arg);
     return new SerializerSignalImpl(null, arg);
 };
 
@@ -1925,11 +2044,22 @@ const createSignal = createSignal$1;
  * The QRL must be a function which returns the value of the signal. The function must not have side
  * effects, and it must be synchronous.
  *
- * If you need the function to be async, use `useSignal` and `useTask$` instead.
+ * If you need the function to be async, use `useAsyncComputed$` instead.
  *
  * @public
  */
 const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedSignal);
+/**
+ * Create an async computed signal which is calculated from the given QRL. A computed signal is a
+ * signal which is calculated from other signals or async operation. When the signals change, the
+ * computed signal is recalculated.
+ *
+ * The QRL must be a function which returns the value of the signal. The function must not have side
+ * effects, and it can be async.
+ *
+ * @public
+ */
+const createAsyncComputed$ = /*#__PURE__*/ implicit$FirstArg(createAsyncComputedSignal);
 /**
  * Create a signal that holds a custom serializable value. See {@link useSerializer$} for more
  * details.
@@ -1963,7 +2093,7 @@ const _wrapProp = (...args) => {
         if (!(obj instanceof AsyncComputedSignalImpl)) {
             assertEqual(prop, 'value', 'Left side is a signal, prop must be value');
         }
-        if (obj instanceof WrappedSignalImpl && obj.flags & 2 /* WrappedSignalFlags.UNWRAP */) {
+        if (obj instanceof WrappedSignalImpl && obj.flags & 4 /* WrappedSignalFlags.UNWRAP */) {
             return obj;
         }
         return getWrapped(args);
@@ -1989,17 +2119,6 @@ const _wrapProp = (...args) => {
     // the object is not reactive, so we can just return the value
     return obj[prop];
 };
-/** @internal */
-const _wrapStore = (obj, prop) => {
-    const target = getStoreTarget(obj);
-    const value = target[prop];
-    if (isSignal(value)) {
-        return value;
-    }
-    else {
-        return new WrappedSignalImpl(null, getProp, [obj, prop], null, 1 /* SignalFlags.INVALID */);
-    }
-};
 /** @internal @deprecated v1 compat */
 const _wrapSignal = (obj, prop) => {
     const r = _wrapProp(obj, prop);
@@ -2035,7 +2154,7 @@ function isSlotProp(prop) {
     return !prop.startsWith('q:') && !prop.startsWith(NON_SERIALIZABLE_MARKER_PREFIX);
 }
 /** @internal */
-const _restProps = (props, omit, target = {}) => {
+const _restProps = (props, omit = [], target = {}) => {
     let constPropsTarget = null;
     const constProps = props[_CONST_PROPS];
     if (constProps) {
@@ -2421,7 +2540,6 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         if (!isInlineComponent) {
             container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
             container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
-            container.setHostProp(renderHost, ELEMENT_PROPS, props);
         }
         if (vnode_isVNode(renderHost)) {
             clearAllEffects(container, renderHost);
@@ -2435,75 +2553,83 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         return jsx;
     }, (err) => {
         if (isPromise(err) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
-            return err.then(() => executeComponentWithPromiseExceptionRetry(retryCount++));
+            return err.then(() => executeComponentWithPromiseExceptionRetry(++retryCount));
         }
         else {
+            if (retryCount >= MAX_RETRY_ON_PROMISE_COUNT) {
+                throw new Error(`Max retry count of component execution reached`);
+            }
             throw err;
         }
     });
     return executeComponentWithPromiseExceptionRetry();
 };
 /**
- * Stores the JSX output of the last execution of the component.
- *
- * Component can execute multiple times because:
- *
- * - Component can have multiple tasks
- * - Tasks can track signals
- * - Task A can change signal which causes Task B to rerun.
+ * Adds `useOn` events to the JSX output.
  *
- * So when executing a component we only care about its last JSX Output.
+ * @param jsx The JSX output to modify.
+ * @param useOnEvents The `useOn` events to add.
+ * @returns The modified JSX output.
  */
 function addUseOnEvents(jsx, useOnEvents) {
-    const jsxElement = findFirstStringJSX(jsx);
+    const jsxElement = findFirstElementNode(jsx);
     let jsxResult = jsx;
+    const qVisibleEvent = 'onQvisible$';
     return maybeThen(jsxElement, (jsxElement) => {
-        let isInvisibleComponent = false;
-        if (!jsxElement) {
-            /**
-             * We did not find any jsx node with a string tag. This means that we should append:
-             *
-             * ```html
-             * <script type="placeholder" hidden on-document:qinit="..."></script>
-             * ```
-             *
-             * This is needed because use on events should have a node to attach them to.
-             */
-            isInvisibleComponent = true;
-        }
+        // headless components are components that don't render a real DOM element
+        const isHeadless = !jsxElement;
+        // placeholder element is a <script> element that is used to add events to the document or window
+        let placeholderElement = null;
         for (const key in useOnEvents) {
             if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) {
-                if (isInvisibleComponent) {
-                    if (key === 'onQvisible$') {
-                        const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
-                        jsxResult = jsx;
-                        if (jsxElement) {
-                            addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]);
+                let targetElement = jsxElement;
+                let eventKey = key;
+                if (isHeadless) {
+                    // if the component is headless, we need to add the event to the placeholder element
+                    if (key === qVisibleEvent ||
+                        key.startsWith("document:on" /* EventNameJSXScope.document */) ||
+                        key.startsWith("window:on" /* EventNameJSXScope.window */)) {
+                        if (!placeholderElement) {
+                            const [createdElement, newJsx] = injectPlaceholderElement(jsxResult);
+                            jsxResult = newJsx;
+                            placeholderElement = createdElement;
                         }
+                        targetElement = placeholderElement;
                     }
-                    else if (key.startsWith('document:') || key.startsWith('window:')) {
-                        const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
-                        jsxResult = jsx;
-                        if (jsxElement) {
-                            addUseOnEvent(jsxElement, key, useOnEvents[key]);
+                    else {
+                        if (isDev) {
+                            logWarn('You are trying to add an event "' +
+                                key +
+                                '" using `useOn` hook, ' +
+                                'but a node to which you can add an event is not found. ' +
+                                'Please make sure that the component has a valid element node. ');
                         }
+                        continue;
                     }
-                    else if (isDev) {
+                }
+                if (targetElement) {
+                    if (targetElement.type === 'script' && key === qVisibleEvent) {
+                        eventKey = 'document:onQInit$';
                         logWarn('You are trying to add an event "' +
                             key +
-                            '" using `useOn` hook, ' +
+                            '" using `useVisibleTask$` hook, ' +
                             'but a node to which you can add an event is not found. ' +
-                            'Please make sure that the component has a valid element node. ');
+                            'Using document:onQInit$ instead.');
                     }
-                }
-                else if (jsxElement) {
-                    addUseOnEvent(jsxElement, key, useOnEvents[key]);
+                    addUseOnEvent(targetElement, eventKey, useOnEvents[key]);
                 }
             }
         }
         return jsxResult;
     });
 }
+/**
+ * Adds an event to the JSX element.
+ *
+ * @param jsxElement The JSX element to add the event to.
+ * @param key The event name.
+ * @param value The event value.
+ */
 function addUseOnEvent(jsxElement, key, value) {
     let props = jsxElement.props;
     if (props === EMPTY_OBJ) {
@@ -2519,7 +2645,13 @@ function addUseOnEvent(jsxElement, key, value) {
     propValue.push(...value);
     props[key] = propValue;
 }
-function findFirstStringJSX(jsx) {
+/**
+ * Finds the first element node in the JSX output.
+ *
+ * @param jsx The JSX output to search.
+ * @returns The first element node or null if no element node is found.
+ */
+function findFirstElementNode(jsx) {
     const queue = [jsx];
     while (queue.length) {
         const jsx = queue.shift();
@@ -2529,44 +2661,69 @@ function findFirstStringJSX(jsx) {
             }
             queue.push(jsx.children);
         }
-        else if (Array.isArray(jsx)) {
+        else if (isArray(jsx)) {
             queue.push(...jsx);
         }
         else if (isPromise(jsx)) {
-            return maybeThen(jsx, (jsx) => findFirstStringJSX(jsx));
+            return maybeThen(jsx, (jsx) => findFirstElementNode(jsx));
         }
         else if (isSignal(jsx)) {
-            return findFirstStringJSX(untrack(() => jsx.value));
+            return findFirstElementNode(untrack(() => jsx.value));
         }
     }
     return null;
 }
-function addScriptNodeForInvisibleComponents(jsx) {
+/**
+ * Injects a placeholder <script> element into the JSX output.
+ *
+ * This is necessary for headless components (components that don't render a real DOM element) to
+ * have an anchor point for `useOn` event listeners that target the document or window.
+ *
+ * @param jsx The JSX output to modify.
+ * @returns A tuple containing the created placeholder element and the modified JSX output.
+ */
+function injectPlaceholderElement(jsx) {
+    // For regular JSX nodes, we can append the placeholder to its children.
     if (isJSXNode(jsx)) {
-        const jsxElement = new JSXNodeImpl('script', {}, {
-            type: 'placeholder',
-            hidden: '',
-        }, null, 3);
+        const placeholder = createPlaceholderScriptNode();
+        // For slots, we can't add children, so we wrap them in a fragment.
         if (jsx.type === Slot) {
-            return [jsxElement, _jsxSorted(Fragment, null, null, [jsx, jsxElement], 0, null)];
+            return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
         }
         if (jsx.children == null) {
-            jsx.children = jsxElement;
+            jsx.children = placeholder;
         }
-        else if (Array.isArray(jsx.children)) {
-            jsx.children.push(jsxElement);
+        else if (isArray(jsx.children)) {
+            jsx.children.push(placeholder);
         }
         else {
-            jsx.children = [jsx.children, jsxElement];
+            jsx.children = [jsx.children, placeholder];
         }
-        return [jsxElement, jsx];
+        return [placeholder, jsx];
+    }
+    // For primitives, we can't add children, so we wrap them in a fragment.
+    if (isPrimitive(jsx)) {
+        const placeholder = createPlaceholderScriptNode();
+        return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
     }
-    else if (Array.isArray(jsx) && jsx.length) {
-        // get first element
-        const [jsxElement, _] = addScriptNodeForInvisibleComponents(jsx[0]);
-        return [jsxElement, jsx];
+    // For an array of nodes, we inject the placeholder into the first element.
+    if (isArray(jsx) && jsx.length > 0) {
+        const [createdElement, _] = injectPlaceholderElement(jsx[0]);
+        return [createdElement, jsx];
     }
-    return [null, null];
+    // For anything else we do nothing.
+    return [null, jsx];
+}
+/**
+ * Creates a <script> element with a placeholder type.
+ *
+ * @returns A <script> element with a placeholder type.
+ */
+function createPlaceholderScriptNode() {
+    return new JSXNodeImpl('script', {}, {
+        type: 'placeholder',
+        hidden: '',
+    }, null, 3);
 }
 
 const applyInlineComponent = (ssr, componentHost, inlineComponentFunction, jsx) => {
@@ -2580,13 +2737,13 @@ const applyQwikComponentBody = (ssr, jsx, component) => {
     if (srcProps && srcProps.children) {
         delete srcProps.children;
     }
-    const scheduler = ssr.$scheduler$;
     host.setProp(OnRenderProp, componentQrl);
     host.setProp(ELEMENT_PROPS, srcProps);
     if (jsx.key !== null) {
         host.setProp(ELEMENT_KEY, jsx.key);
     }
-    return scheduler(6 /* ChoreType.COMPONENT */, host, componentQrl, srcProps);
+    const componentChore = ssr.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQrl, srcProps);
+    return getChorePromise(componentChore);
 };
 
 class ParentComponentData {
@@ -2694,7 +2851,14 @@ function processJSXNode(ssr, enqueue, value, options) {
                         appendQwikInspectorAttribute(jsx, qwikInspectorAttrValue);
                     }
                 }
-                const innerHTML = ssr.openElement(type, varPropsToSsrAttrs(jsx.varProps, jsx.constProps, ssr.serializationCtx, options.styleScoped, jsx.key), constPropsToSsrAttrs(jsx.constProps, jsx.varProps, ssr.serializationCtx, options.styleScoped), qwikInspectorAttrValue);
+                const innerHTML = ssr.openElement(type, varPropsToSsrAttrs(jsx.varProps, jsx.constProps, {
+                    serializationCtx: ssr.serializationCtx,
+                    styleScopedId: options.styleScoped,
+                    key: jsx.key,
+                }), constPropsToSsrAttrs(jsx.constProps, jsx.varProps, {
+                    serializationCtx: ssr.serializationCtx,
+                    styleScopedId: options.styleScoped,
+                }), qwikInspectorAttrValue);
                 if (innerHTML) {
                     ssr.htmlNode(innerHTML);
                 }
@@ -2810,16 +2974,17 @@ function processJSXNode(ssr, enqueue, value, options) {
         }
     }
 }
-function varPropsToSsrAttrs(varProps, constProps, serializationCtx, styleScopedId, key) {
-    return toSsrAttrs(varProps, constProps, serializationCtx, true, styleScopedId, key);
+function varPropsToSsrAttrs(varProps, constProps, options) {
+    return toSsrAttrs(varProps, constProps, false, options);
 }
-function constPropsToSsrAttrs(constProps, varProps, serializationCtx, styleScopedId) {
-    return toSsrAttrs(constProps, varProps, serializationCtx, false, styleScopedId);
+function constPropsToSsrAttrs(constProps, varProps, options) {
+    return toSsrAttrs(constProps, varProps, true, options);
 }
-function toSsrAttrs(record, anotherRecord, serializationCtx, pushMergedEventProps, styleScopedId, key) {
+function toSsrAttrs(record, anotherRecord, isConst, options) {
     if (record == null) {
         return null;
     }
+    const pushMergedEventProps = !isConst;
     const ssrAttrs = [];
     for (const key in record) {
         let value = record[key];
@@ -2856,7 +3021,7 @@ function toSsrAttrs(record, anotherRecord, serializationCtx, pushMergedEventProp
                     }
                 }
             }
-            const eventValue = setEvent(serializationCtx, key, value);
+            const eventValue = setEvent(options.serializationCtx, key, value);
             if (eventValue) {
                 ssrAttrs.push(jsxEventToHtmlAttribute(key), eventValue);
             }
@@ -2866,7 +3031,7 @@ function toSsrAttrs(record, anotherRecord, serializationCtx, pushMergedEventProp
             // write signal as is. We will track this signal inside `writeAttrs`
             if (isClassAttr(key)) {
                 // additionally append styleScopedId for class attr
-                ssrAttrs.push(key, [value, styleScopedId]);
+                ssrAttrs.push(key, [value, options.styleScopedId]);
             }
             else {
                 ssrAttrs.push(key, value);
@@ -2874,13 +3039,13 @@ function toSsrAttrs(record, anotherRecord, serializationCtx, pushMergedEventProp
             continue;
         }
         if (isPreventDefault(key)) {
-            addPreventDefaultEventToSerializationContext(serializationCtx, key);
+            addPreventDefaultEventToSerializationContext(options.serializationCtx, key);
         }
-        value = serializeAttribute(key, value, styleScopedId);
+        value = serializeAttribute(key, value, options.styleScopedId);
         ssrAttrs.push(key, value);
     }
-    if (key != null) {
-        ssrAttrs.push(ELEMENT_KEY, key);
+    if (options.key != null) {
+        ssrAttrs.push(ELEMENT_KEY, options.key);
     }
     return ssrAttrs;
 }
@@ -2929,7 +3094,7 @@ function setEvent(serializationCtx, key, rawValue) {
          * For internal qrls (starting with `_`) we assume that they do the right thing.
          */
         if (!qrl.$symbol$.startsWith('_') && (qrl.$captureRef$ || qrl.$capture$)) {
-            qrl = createQRL(null, '_run', queueQRL, null, null, [qrl]);
+            qrl = createQRL(null, '_run', _run, null, null, [qrl]);
         }
         return qrlToString(serializationCtx, qrl);
     };
@@ -3009,10 +3174,9 @@ const useTaskQrl = (qrl) => {
     // deleted and we need to be able to release the task subscriptions.
     set(task);
     const container = iCtx.$container$;
-    const promise = container.$scheduler$(3 /* ChoreType.TASK */, task);
-    if (isPromise(promise)) {
-        // TODO: should we handle this differently?
-        promise.catch(() => { });
+    const result = runTask(task, container, iCtx.$hostElement$);
+    if (isPromise(result)) {
+        throw result;
     }
 };
 const runTask = (task, container, host) => {
@@ -3024,7 +3188,7 @@ const runTask = (task, container, host) => {
     const track = trackFn(task, container);
     const [cleanup] = cleanupFn(task, (reason) => container.handleError(reason, host));
     const taskApi = { track, cleanup };
-    const result = safeCall(() => taskFn(taskApi), cleanup, (err) => {
+    return safeCall(() => taskFn(taskApi), cleanup, (err) => {
         // If a Promise is thrown, that means we need to re-run the task.
         if (isPromise(err)) {
             return err.then(() => runTask(task, container, host));
@@ -3033,7 +3197,6 @@ const runTask = (task, container, host) => {
             throw err;
         }
     });
-    return result;
 };
 const cleanupTask = (task) => {
     const destroy = task.$destroy$;
@@ -3064,6 +3227,7 @@ class Task extends BackRef {
         this.$destroy$ = $destroy$;
     }
 }
+/** @internal */
 const isTask = (value) => {
     return value instanceof Task;
 };
@@ -3074,7 +3238,7 @@ const isTask = (value) => {
  */
 const scheduleTask = (_event, element) => {
     const [task] = useLexicalScope();
-    const type = task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */ ? 32 /* ChoreType.VISIBLE */ : 3 /* ChoreType.TASK */;
+    const type = task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */ ? 16 /* ChoreType.VISIBLE */ : 3 /* ChoreType.TASK */;
     const container = getDomContainer(element);
     container.$scheduler$(type, task);
 };
@@ -3326,7 +3490,7 @@ class PropsProxyHandler {
             ? this.$constProps$[prop]
             : this.$varProps$[prop];
         // a proxied value that the optimizer made
-        return value instanceof WrappedSignalImpl && value.$flags$ & 2 /* WrappedSignalFlags.UNWRAP */
+        return value instanceof WrappedSignalImpl && value.$flags$ & 4 /* WrappedSignalFlags.UNWRAP */
             ? value.value
             : value;
     }
@@ -3402,48 +3566,23 @@ class PropsProxyHandler {
 const directGetPropsProxyProp = (jsx, prop) => {
     return (jsx.constProps && prop in jsx.constProps ? jsx.constProps[prop] : jsx.varProps[prop]);
 };
-
-const mapApp_findIndx = (array, key, start) => {
-    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;
-};
-const mapArray_set = (array, key, value, start) => {
-    const indx = mapApp_findIndx(array, key, start);
-    if (indx >= 0) {
-        if (value == null) {
-            array.splice(indx, 2);
-        }
-        else {
-            array[indx + 1] = value;
-        }
-    }
-    else if (value != null) {
-        array.splice(indx ^ -1, 0, key, value);
+/** @internal */
+const _getVarProps = (props) => {
+    if (!props) {
+        return null;
     }
+    return _VAR_PROPS in props
+        ? 'children' in props
+            ? { ...props[_VAR_PROPS], children: props.children }
+            : props[_VAR_PROPS]
+        : props;
 };
-const mapArray_get = (array, key, start) => {
-    const indx = mapApp_findIndx(array, key, start);
-    if (indx >= 0) {
-        return array[indx + 1];
-    }
-    else {
+/** @internal */
+const _getConstProps = (props) => {
+    if (!props) {
         return null;
     }
+    return _CONST_PROPS in props ? props[_CONST_PROPS] : null;
 };
 
 const isForeignObjectElement = (elementName) => {
@@ -3649,6 +3788,24 @@ function getNewElementNamespaceData(domParentVNode, tagOrVNode) {
         elementNamespaceFlag,
     };
 }
+function getAttributeNamespace(attributeName) {
+    switch (attributeName) {
+        case 'xlink:href':
+        case 'xlink:actuate':
+        case 'xlink:arcrole':
+        case 'xlink:role':
+        case 'xlink:show':
+        case 'xlink:title':
+        case 'xlink:type':
+            return XLINK_NS;
+        case 'xml:base':
+        case 'xml:lang':
+        case 'xml:space':
+            return XML_NS;
+        default:
+            return null;
+    }
+}
 
 function escapeHTML(html) {
     let escapedHTML = '';
@@ -3747,6 +3904,10 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         vNewNode = null;
         vCurrent = vnode_getFirstChild(vStartNode);
         stackPush(jsxNode, true);
+        if (vParent[0 /* VNodeProps.flags */] & 32 /* VNodeFlags.Deleted */) {
+            // Ignore diff if the parent is deleted.
+            return;
+        }
         while (stack.length) {
             while (jsxIdx < jsxCount) {
                 assertFalse(vParent === vCurrent, "Parent and current can't be the same");
@@ -4175,8 +4336,10 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     value = trackSignalAndAssignHost(value, vNewNode, key, container, signalData);
                 }
                 if (key === dangerouslySetInnerHTML) {
-                    element.innerHTML = value;
-                    element.setAttribute(QContainerAttr, "html" /* QContainerValue.HTML */);
+                    if (value) {
+                        element.innerHTML = String(value);
+                        element.setAttribute(QContainerAttr, "html" /* QContainerValue.HTML */);
+                    }
                     continue;
                 }
                 if (elementName === 'textarea' && key === 'value') {
@@ -4191,6 +4354,14 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 }
                 value = serializeAttribute(key, value, scopedStyleIdPrefix);
                 if (value != null) {
+                    if (vNewNode[0 /* VNodeProps.flags */] & 64 /* VNodeFlags.NS_svg */) {
+                        // only svg elements can have namespace attributes
+                        const namespace = getAttributeNamespace(key);
+                        if (namespace) {
+                            element.setAttributeNS(namespace, key, String(value));
+                            continue;
+                        }
+                    }
                     element.setAttribute(key, String(value));
                 }
             }
@@ -4269,8 +4440,13 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     let returnValue = false;
                     qrls.flat(2).forEach((qrl) => {
                         if (qrl) {
-                            const value = container.$scheduler$(2 /* ChoreType.RUN_QRL */, vNode, qrl, [event, element]);
-                            returnValue = returnValue || value === true;
+                            if (isSyncQrl(qrl)) {
+                                qrl(event, element);
+                            }
+                            else {
+                                const value = container.$scheduler$(2 /* ChoreType.RUN_QRL */, vNode, qrl, [event, element]);
+                                returnValue = returnValue || value === true;
+                            }
                         }
                     });
                     return returnValue;
@@ -4540,16 +4716,36 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 shouldRender = true;
             }
             if (host) {
-                const vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
-                shouldRender = shouldRender || propsDiffer(jsxProps, vNodeProps);
+                let vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
+                const propsAreDifferent = propsDiffer(jsxProps, vNodeProps);
+                shouldRender = shouldRender || propsAreDifferent;
                 if (shouldRender) {
+                    if (propsAreDifferent) {
+                        if (vNodeProps) {
+                            // Reuse the same props instance, qrls can use the current props instance
+                            // as a capture ref, so we can't change it.
+                            // We need to do this directly, because normally we would subscribe to the signals
+                            // if any signal is there.
+                            vNodeProps[_CONST_PROPS] = jsxProps[_CONST_PROPS];
+                            vNodeProps[_VAR_PROPS] = jsxProps[_VAR_PROPS];
+                        }
+                        else if (jsxProps) {
+                            // If there is no props instance, create a new one.
+                            // We can do this because we are not using the props instance for anything else.
+                            vnode_setProp(host, ELEMENT_PROPS, jsxProps);
+                            vNodeProps = jsxProps;
+                        }
+                    }
+                    // Assign the new QRL instance to the host.
+                    // Unfortunately it is created every time, something to fix in the optimizer.
+                    vnode_setProp(host, OnRenderProp, componentQRL);
                     /**
                      * Mark host as not deleted. The host could have been marked as deleted if it there was a
                      * cleanup run. Now we found it and want to reuse it, so we need to mark it as not
                      * deleted.
                      */
                     host[0 /* VNodeProps.flags */] &= -33 /* VNodeFlags.Deleted */;
-                    container.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQRL, jsxProps);
+                    container.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQRL, vNodeProps);
                 }
             }
             descendContentToProject(jsxNode.children, host);
@@ -4752,7 +4948,7 @@ function cleanup(container, vNode) {
                             const task = obj;
                             clearAllEffects(container, task);
                             if (task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
-                                container.$scheduler$(48 /* ChoreType.CLEANUP_VISIBLE */, task);
+                                container.$scheduler$(32 /* ChoreType.CLEANUP_VISIBLE */, task);
                             }
                             else {
                                 cleanupTask(task);
@@ -4803,7 +4999,16 @@ function cleanup(container, vNode) {
                  */
                 const vFirstChild = vnode_getFirstChild(vCursor);
                 if (vFirstChild) {
-                    vnode_walkVNode(vFirstChild);
+                    vnode_walkVNode(vFirstChild, (vNode) => {
+                        /**
+                         * Instead of an ID, we store a direct reference to the VNode. This is necessary to
+                         * locate the slot's parent in a detached subtree, as the ID would become invalid.
+                         */
+                        if (vNode[0 /* VNodeProps.flags */] & 2 /* VNodeFlags.Virtual */) {
+                            // The QSlotParent is used to find the slot parent during scheduling
+                            vnode_getProp(vNode, QSlotParent, (id) => vnode_locate(container.rootVNode, id));
+                        }
+                    });
                     return;
                 }
             }
@@ -4880,8 +5085,8 @@ const useResourceQrl = (qrl, opts) => {
     const resource = createResourceReturn(container, opts);
     const el = iCtx.$hostElement$;
     const task = new Task(8 /* TaskFlags.DIRTY */ | 4 /* TaskFlags.RESOURCE */, i, el, qrl, resource, null);
-    container.$scheduler$(3 /* ChoreType.TASK */, task);
     set(resource);
+    runResource(task, container, el);
     return resource;
 };
 // <docs markdown="../readme.md#useResource">
@@ -4949,10 +5154,10 @@ const Resource = (props) => {
 function getResourceValueAsPromise(props) {
     const resource = props.value;
     if (isResourceReturn(resource)) {
+        // create a subscription for the resource._state changes
+        const state = resource._state;
         const isBrowser = !isServerPlatform();
         if (isBrowser) {
-            // create a subscription for the resource._state changes
-            const state = resource._state;
             if (state === 'pending' && props.onPending) {
                 return Promise.resolve().then(useBindInvokeContext(props.onPending));
             }
@@ -4967,30 +5172,25 @@ function getResourceValueAsPromise(props) {
                 }
             }
         }
-        const value = resource.value;
-        if (value) {
-            return value.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
-        }
-        else {
-            // this is temporary value until the `runResource` is executed and promise is assigned to the value
-            return Promise.resolve(undefined);
-        }
+        return untrack(() => resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
     }
     else if (isPromise(resource)) {
         return resource.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
     }
     else if (isSignal(resource)) {
-        return Promise.resolve(resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        const value = retryOnPromise(() => resource.value);
+        const promise = isPromise(value) ? value : Promise.resolve(value);
+        return promise.then(useBindInvokeContext(props.onResolved));
     }
     else {
-        return Promise.resolve(resource).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        return Promise.resolve(resource).then(useBindInvokeContext(props.onResolved));
     }
 }
 const _createResourceReturn = (opts) => {
     const resource = {
         __brand: 'resource',
         value: undefined,
-        loading: isServerPlatform() ? false : true,
+        loading: !isServerPlatform(),
         _resolved: undefined,
         _error: undefined,
         _state: 'pending',
@@ -5041,19 +5241,22 @@ const runResource = (task, container, host) => {
             done = true;
             if (resolved) {
                 done = true;
-                resource.loading = false;
-                resource._state = 'resolved';
-                resource._resolved = value;
-                resource._error = undefined;
+                resourceTarget.loading = false;
+                resourceTarget._state = 'resolved';
+                resourceTarget._resolved = value;
+                resourceTarget._error = undefined;
                 resolve(value);
             }
             else {
                 done = true;
-                resource.loading = false;
-                resource._state = 'rejected';
-                resource._error = value;
+                resourceTarget.loading = false;
+                resourceTarget._state = 'rejected';
+                resourceTarget._error = value;
                 reject(value);
             }
+            if (!isServerPlatform()) {
+                forceStoreEffects(resource, '_state');
+            }
             return true;
         }
         return false;
@@ -5069,17 +5272,17 @@ const runResource = (task, container, host) => {
         }
     });
     // Execute mutation inside empty invocation
+    // TODO: is it right? why we need to invoke inside context and trigger effects?
     invoke(iCtx, () => {
         // console.log('RESOURCE.pending: ');
         resource._state = 'pending';
         resource.loading = !isServerPlatform();
-        const promise = (resource.value = new Promise((r, re) => {
+        resource.value = new Promise((r, re) => {
             resolve = r;
             reject = re;
-        }));
-        promise.catch(ignoreErrorToPreventNodeFromCrashing);
+        });
     });
-    const promise = safeCall(() => Promise.resolve(taskFn(opts)), (value) => {
+    const promise = safeCall(() => taskFn(opts), (value) => {
         setState(true, value);
     }, (err) => {
         if (isPromise(err)) {
@@ -5102,10 +5305,6 @@ const runResource = (task, container, host) => {
     }
     return promise;
 };
-const ignoreErrorToPreventNodeFromCrashing = (err) => {
-    // ignore error to prevent node from crashing
-    // node will crash in promise is rejected and no one is listening to the rejection.
-};
 
 /// These global variables are used to avoid creating new arrays for each call to `vnode_documentPosition`.
 const aVNodePath = [];
@@ -5188,11 +5387,11 @@ const ssrNodeDocumentPosition = (a, b) => {
     let bDepth = -1;
     while (a) {
         const ssrNode = (aSsrNodePath[++aDepth] = a);
-        a = ssrNode.parentSsrNode;
+        a = ssrNode.parentComponent;
     }
     while (b) {
         const ssrNode = (bSsrNodePath[++bDepth] = b);
-        b = ssrNode.parentSsrNode;
+        b = ssrNode.parentComponent;
     }
     while (aDepth >= 0 && bDepth >= 0) {
         a = aSsrNodePath[aDepth];
@@ -5209,6 +5408,210 @@ const ssrNodeDocumentPosition = (a, b) => {
     return aDepth < bDepth ? -1 : 1;
 };
 
+/**
+ * Rules for determining if a chore is blocked by another chore. Some chores can block other chores.
+ * They cannot run until the blocking chore has completed.
+ *
+ * The match function is used to determine if the blocked chore is blocked by the blocking chore.
+ * The match function is called with the blocked chore, the blocking chore, and the container.
+ */
+const VISIBLE_BLOCKING_RULES = [
+    // NODE_DIFF blocks VISIBLE on same host,
+    // if the blocked chore is a child of the blocking chore
+    // or the blocked chore is a sibling of the blocking chore
+    {
+        blockedType: 16 /* ChoreType.VISIBLE */,
+        blockingType: 4 /* ChoreType.NODE_DIFF */,
+        match: (blocked, blocking, container) => isDescendant(blocked, blocking, container) || isDescendant(blocking, blocked, container),
+    },
+    // COMPONENT blocks VISIBLE on same host
+    // if the blocked chore is a child of the blocking chore
+    // or the blocked chore is a sibling of the blocking chore
+    {
+        blockedType: 16 /* ChoreType.VISIBLE */,
+        blockingType: 6 /* ChoreType.COMPONENT */,
+        match: (blocked, blocking, container) => isDescendant(blocked, blocking, container) || isDescendant(blocking, blocked, container),
+    },
+];
+const BLOCKING_RULES = [
+    // QRL_RESOLVE blocks RUN_QRL, TASK, VISIBLE on same host
+    {
+        blockedType: 2 /* ChoreType.RUN_QRL */,
+        blockingType: 1 /* ChoreType.QRL_RESOLVE */,
+        match: (blocked, blocking) => {
+            const blockedQrl = blocked.$target$;
+            const blockingQrl = blocking.$target$;
+            return isSameHost(blocked, blocking) && isSameQrl(blockedQrl, blockingQrl);
+        },
+    },
+    {
+        blockedType: 3 /* ChoreType.TASK */,
+        blockingType: 1 /* ChoreType.QRL_RESOLVE */,
+        match: (blocked, blocking) => {
+            const blockedTask = blocked.$payload$;
+            const blockingQrl = blocking.$target$;
+            return isSameHost(blocked, blocking) && isSameQrl(blockedTask.$qrl$, blockingQrl);
+        },
+    },
+    {
+        blockedType: 16 /* ChoreType.VISIBLE */,
+        blockingType: 1 /* ChoreType.QRL_RESOLVE */,
+        match: (blocked, blocking) => {
+            const blockedTask = blocked.$payload$;
+            const blockingQrl = blocking.$target$;
+            return isSameHost(blocked, blocking) && isSameQrl(blockedTask.$qrl$, blockingQrl);
+        },
+    },
+    // COMPONENT blocks NODE_DIFF, NODE_PROP on same host
+    {
+        blockedType: 4 /* ChoreType.NODE_DIFF */,
+        blockingType: 6 /* ChoreType.COMPONENT */,
+        match: (blocked, blocking) => blocked.$host$ === blocking.$host$,
+    },
+    {
+        blockedType: 5 /* ChoreType.NODE_PROP */,
+        blockingType: 6 /* ChoreType.COMPONENT */,
+        match: (blocked, blocking) => blocked.$host$ === blocking.$host$,
+    },
+    ...VISIBLE_BLOCKING_RULES,
+    // TASK blocks subsequent TASKs in the same component
+    {
+        blockedType: 3 /* ChoreType.TASK */,
+        blockingType: 3 /* ChoreType.TASK */,
+        match: (blocked, blocking, container) => {
+            if (blocked.$host$ !== blocking.$host$) {
+                return false;
+            }
+            const blockedIdx = blocked.$idx$;
+            if (!isNumber$1(blockedIdx) || blockedIdx <= 0) {
+                return false;
+            }
+            const previousTask = findPreviousTaskInComponent(blocked.$host$, blockedIdx, container);
+            return previousTask === blocking.$payload$;
+        },
+    },
+];
+function isDescendant(descendantChore, ancestorChore, container) {
+    const descendantHost = descendantChore.$host$;
+    const ancestorHost = ancestorChore.$host$;
+    if (!vnode_isVNode(descendantHost) || !vnode_isVNode(ancestorHost)) {
+        return false;
+    }
+    return vnode_isDescendantOf(descendantHost, ancestorHost, container.rootVNode);
+}
+function isSameHost(a, b) {
+    return a.$host$ === b.$host$;
+}
+function isSameQrl(a, b) {
+    return a.$symbol$ === b.$symbol$;
+}
+function findBlockingChoreInQueue(chore, choreQueue, container) {
+    for (const candidate of choreQueue) {
+        // everything after VISIBLE is not blocking. Visible task, task and resource should not block anything in this rule.
+        if (candidate.$type$ >= 16 /* ChoreType.VISIBLE */ || candidate.$type$ === 3 /* ChoreType.TASK */) {
+            continue;
+        }
+        if (isDescendant(chore, candidate, container)) {
+            return candidate;
+        }
+    }
+    return null;
+}
+function findBlockingChore(chore, choreQueue, blockedChores, runningChores, container) {
+    const blockingChoreInChoreQueue = findBlockingChoreInQueue(chore, choreQueue, container);
+    if (blockingChoreInChoreQueue) {
+        return blockingChoreInChoreQueue;
+    }
+    const blockingChoreInBlockedChores = findBlockingChoreInQueue(chore, Array.from(blockedChores), container);
+    if (blockingChoreInBlockedChores) {
+        return blockingChoreInBlockedChores;
+    }
+    const blockingChoreInRunningChores = findBlockingChoreInQueue(chore, Array.from(runningChores), container);
+    if (blockingChoreInRunningChores) {
+        return blockingChoreInRunningChores;
+    }
+    for (const rule of BLOCKING_RULES) {
+        if (chore.$type$ !== rule.blockedType) {
+            continue;
+        }
+        // Check in choreQueue
+        // TODO(perf): better to iterate in reverse order?
+        for (const candidate of choreQueue) {
+            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                return candidate;
+            }
+        }
+        // Check in blockedChores
+        for (const candidate of blockedChores) {
+            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                return candidate;
+            }
+        }
+        // Check in runningChores
+        for (const candidate of runningChores) {
+            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                return candidate;
+            }
+        }
+    }
+    return null;
+}
+function findPreviousTaskInComponent(host, currentTaskIdx, container) {
+    const elementSeq = container.getHostProp(host, ELEMENT_SEQ);
+    if (!elementSeq || elementSeq.length <= currentTaskIdx) {
+        return null;
+    }
+    for (let i = currentTaskIdx - 1; i >= 0; i--) {
+        const candidate = elementSeq[i];
+        if (candidate instanceof Task && candidate.$flags$ & 2 /* TaskFlags.TASK */) {
+            return candidate;
+        }
+    }
+    return null;
+}
+function findBlockingChoreForVisible(chore, runningChores, container) {
+    for (const rule of VISIBLE_BLOCKING_RULES) {
+        if (chore.$type$ !== rule.blockedType) {
+            continue;
+        }
+        for (const candidate of runningChores) {
+            if (candidate.$type$ === rule.blockingType && rule.match(chore, candidate, container)) {
+                return candidate;
+            }
+        }
+    }
+    return null;
+}
+
+// This can't be in platform.ts because it uses MessageChannel which cannot post messages with functions
+// TODO: move this to platform.ts somehow
+const createNextTick = (fn) => {
+    let nextTick;
+    // according to the https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate#notes
+    if (typeof setImmediate === 'function') {
+        // setImmediate is the fastest way to schedule a task, but works only in node.js
+        nextTick = () => {
+            setImmediate(fn);
+        };
+    }
+    else if (typeof MessageChannel !== 'undefined') {
+        const channel = new MessageChannel();
+        channel.port1.onmessage = () => {
+            fn();
+        };
+        nextTick = () => {
+            channel.port2.postMessage(null);
+        };
+    }
+    else {
+        // setTimeout is a fallback, creates 4ms delay
+        nextTick = () => {
+            setTimeout(fn);
+        };
+    }
+    return nextTick;
+};
+
 /**
  * Scheduler is responsible for running application code in predictable order.
  *
@@ -5292,29 +5695,43 @@ const ssrNodeDocumentPosition = (a, b) => {
  */
 // Turn this on to get debug output of what the scheduler is doing.
 const DEBUG = false;
-const getPromise = (chore) => (chore.$promise$ ||= new Promise((resolve) => {
-    chore.$resolve$ = resolve;
-}));
-const createScheduler = (container, scheduleDrain, journalFlush) => {
-    const choreQueue = [];
-    const qrlRuns = [];
-    let currentChore = null;
+var ChoreState;
+(function (ChoreState) {
+    ChoreState[ChoreState["NONE"] = 0] = "NONE";
+    ChoreState[ChoreState["RUNNING"] = 1] = "RUNNING";
+    ChoreState[ChoreState["FAILED"] = 2] = "FAILED";
+    ChoreState[ChoreState["DONE"] = 3] = "DONE";
+})(ChoreState || (ChoreState = {}));
+const getChorePromise = (chore) => chore.$state$ === ChoreState.NONE
+    ? (chore.$returnValue$ ||= new Promise((resolve, reject) => {
+        chore.$resolve$ = resolve;
+        chore.$reject$ = reject;
+    }))
+    : chore.$returnValue$;
+const createScheduler = (container, journalFlush, choreQueue = [], blockedChores = new Set(), runningChores = new Set()) => {
+    let drainChore = null;
     let drainScheduled = false;
+    let isDraining = false;
+    let isJournalFlushRunning = false;
+    let flushBudgetStart = 0;
+    let currentTime = performance.now();
+    const nextTick = createNextTick(drainChoreQueue);
+    function drainInNextTick() {
+        if (!drainScheduled) {
+            drainScheduled = true;
+            nextTick();
+        }
+    }
+    // Drain for ~16.67ms, then apply journal flush for ~16.67ms, then repeat
+    // We divide by 60 because we want to run at 60fps
+    const FREQUENCY_MS = Math.floor(1000 / 60);
     return schedule;
     ///// IMPLEMENTATION /////
     function schedule(type, hostOrTask = null, targetOrQrl = null, payload = null) {
-        const isServer = !isDomContainer(container);
-        const isComponentSsr = isServer && type === 6 /* ChoreType.COMPONENT */;
-        const runLater = type !== 255 /* ChoreType.WAIT_FOR_ALL */ && !isComponentSsr && type !== 2 /* ChoreType.RUN_QRL */;
-        const isTask = type === 3 /* ChoreType.TASK */ || type === 32 /* ChoreType.VISIBLE */ || type === 48 /* ChoreType.CLEANUP_VISIBLE */;
-        const isClientOnly = type === 16 /* ChoreType.JOURNAL_FLUSH */ ||
-            type === 4 /* ChoreType.NODE_DIFF */ ||
-            type === 5 /* ChoreType.NODE_PROP */ ||
-            type === 1 /* ChoreType.QRL_RESOLVE */ ||
-            type === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */;
-        if (isServer && isClientOnly) {
-            return;
+        if (type === 255 /* ChoreType.WAIT_FOR_QUEUE */ && drainChore) {
+            return drainChore;
         }
+        const isTask = type === 3 /* ChoreType.TASK */ || type === 16 /* ChoreType.VISIBLE */ || type === 32 /* ChoreType.CLEANUP_VISIBLE */;
         if (isTask) {
             hostOrTask.$flags$ |= 8 /* TaskFlags.DIRTY */;
         }
@@ -5328,167 +5745,310 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             $host$: isTask ? hostOrTask.$el$ : hostOrTask,
             $target$: targetOrQrl,
             $payload$: isTask ? hostOrTask : payload,
-            $resolve$: null,
-            $promise$: null,
+            $state$: ChoreState.NONE,
+            $blockedChores$: null,
+            $startTime$: undefined,
+            $endTime$: undefined,
+            $resolve$: undefined,
+            $reject$: undefined,
             $returnValue$: null,
-            $executed$: false,
         };
-        chore = sortedInsert(choreQueue, chore, container.rootVNode || null);
-        if (!drainScheduled && runLater) {
-            // If we are not currently draining, we need to schedule a drain.
-            drainScheduled = true;
-            schedule(16 /* ChoreType.JOURNAL_FLUSH */);
-            // Catch here to avoid unhandled promise rejection
-            scheduleDrain()?.catch?.(() => { });
+        if (type === 255 /* ChoreType.WAIT_FOR_QUEUE */) {
+            getChorePromise(chore);
+            drainChore = chore;
+            drainInNextTick();
+            return chore;
+        }
+        const isServer = isServerPlatform();
+        const isClientOnly = type === 4 /* ChoreType.NODE_DIFF */ || type === 1 /* ChoreType.QRL_RESOLVE */;
+        if (isServer && isClientOnly) {
+            // Mark skipped client-only chores as completed on the server
+            finishChore(chore, undefined);
+            return chore;
+        }
+        if (isServer && chore.$host$ && isSsrNode(chore.$host$)) {
+            const isUpdatable = !!(chore.$host$.flags & 1 /* SsrNodeFlags.Updatable */);
+            if (!isUpdatable) {
+                if (
+                // backpatching exceptions:
+                // - node prop is allowed because it is used to update the node property
+                // - recompute and schedule effects because it triggers effects (so node prop too)
+                chore.$type$ !== 5 /* ChoreType.NODE_PROP */ &&
+                    chore.$type$ !== 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */) {
+                    // We are running on the server.
+                    // On server we can't schedule task for a different host!
+                    // Server is SSR, and therefore scheduling for anything but the current host
+                    // implies that things need to be re-run and that is not supported because of streaming.
+                    const warningMessage = `A '${choreTypeToName(chore.$type$)}' chore was scheduled on a host element that has already been streamed to the client.
+This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
+
+Problematic chore:
+  - Type: ${choreTypeToName(chore.$type$)}
+  - Host: ${chore.$host$.toString()}
+  - Nearest element location: ${chore.$host$.currentFile}
+
+This is often caused by modifying a signal in an already rendered component during SSR.`;
+                    logWarn(warningMessage);
+                    return chore;
+                }
+            }
         }
-        // TODO figure out what to do with chore errors
-        if (runLater) {
-            return getPromise(chore);
+        const blockingChore = findBlockingChore(chore, choreQueue, blockedChores, runningChores, container);
+        if (blockingChore) {
+            addBlockedChore(chore, blockingChore, blockedChores);
+            return chore;
+        }
+        chore = sortedInsert(choreQueue, chore, container.rootVNode || null);
+        const runImmediately = (isServer && type === 6 /* ChoreType.COMPONENT */) || type === 2 /* ChoreType.RUN_QRL */;
+        if (runImmediately && !isDraining) {
+            immediateDrain();
         }
         else {
-            return drainUpTo(chore, isServer);
-        }
-    }
-    /** Execute all of the chores up to and including the given chore. */
-    function drainUpTo(runUptoChore, isServer) {
-        let maxRetries = 5000;
-        while (choreQueue.length) {
-            if (maxRetries-- < 0) {
-                throw new Error('drainUpTo: max retries reached');
-            }
-            if (currentChore) {
-                // Already running chore, which means we're waiting for async completion
-                return getPromise(currentChore)
-                    .then(() => drainUpTo(runUptoChore, isServer))
-                    .catch((e) => {
-                    container.handleError(e, currentChore?.$host$);
-                });
+            drainInNextTick();
+        }
+        return chore;
+    }
+    function immediateDrain() {
+        drainScheduled = true;
+        drainChoreQueue();
+    }
+    ////////////////////////////////////////////////////////////////////////////////
+    // Drain queue helpers
+    ////////////////////////////////////////////////////////////////////////////////
+    function applyJournalFlush() {
+        if (!isJournalFlushRunning) {
+            // prevent multiple journal flushes from running at the same time
+            isJournalFlushRunning = true;
+            journalFlush();
+            isJournalFlushRunning = false;
+            flushBudgetStart = performance.now();
+        }
+    }
+    function shouldApplyJournalFlush(isServer) {
+        return !isServer && currentTime - flushBudgetStart >= FREQUENCY_MS;
+    }
+    function drainChoreQueue() {
+        const isServer = isServerPlatform();
+        drainScheduled = false;
+        if (isDraining) {
+            return;
+        }
+        // early return if the queue is empty
+        if (!choreQueue.length) {
+            applyJournalFlush();
+            if (drainChore && !runningChores.size) {
+                // resolve drainChore only if there are no running chores, because
+                // we are sure that we are done
+                drainChore.$resolve$(null);
+                drainChore = null;
             }
-            const nextChore = choreQueue[0];
-            if (nextChore.$executed$) {
-                choreQueue.shift();
-                if (nextChore === runUptoChore) {
-                    break;
+            return;
+        }
+        isDraining = true;
+        flushBudgetStart = performance.now();
+        const maybeFinishDrain = () => {
+            if (choreQueue.length) {
+                drainInNextTick();
+                return false;
+            }
+            if (drainChore && runningChores.size) {
+                if (shouldApplyJournalFlush(isServer)) {
+                    // apply journal flush even if we are not finished draining the queue
+                    applyJournalFlush();
                 }
-                continue;
+                return false;
             }
-            if (vNodeAlreadyDeleted(nextChore) &&
-                // we need to process cleanup tasks for deleted nodes
-                nextChore.$type$ !== 48 /* ChoreType.CLEANUP_VISIBLE */) {
-                choreQueue.shift();
-                continue;
+            currentChore = null;
+            applyJournalFlush();
+            drainChore?.$resolve$(null);
+            drainChore = null;
+            return true;
+        };
+        const scheduleBlockedChoresAndDrainIfNeeded = (chore) => {
+            let blockedChoresScheduled = false;
+            if (chore.$blockedChores$) {
+                for (const blockedChore of chore.$blockedChores$) {
+                    const blockingChore = findBlockingChore(blockedChore, choreQueue, blockedChores, runningChores, container);
+                    if (blockingChore) {
+                        addBlockedChore(blockedChore, blockingChore, blockedChores);
+                    }
+                    else {
+                        blockedChores.delete(blockedChore);
+                        sortedInsert(choreQueue, blockedChore, container.rootVNode || null);
+                        blockedChoresScheduled = true;
+                    }
+                }
+                chore.$blockedChores$ = null;
             }
-            executeChore(nextChore, isServer);
-        }
-        return runUptoChore.$returnValue$;
-    }
-    function executeChore(chore, isServer) {
-        const host = chore.$host$;
-        assertEqual(currentChore, null, 'Chore already running.');
-        currentChore = chore;
-        let returnValue = null;
+            if (blockedChoresScheduled && !isDraining) {
+                drainInNextTick();
+            }
+        };
+        let currentChore = null;
         try {
-            switch (chore.$type$) {
-                case 255 /* ChoreType.WAIT_FOR_ALL */:
-                    {
-                        if (isServer) {
-                            drainScheduled = false;
-                        }
-                    }
-                    break;
-                case 16 /* ChoreType.JOURNAL_FLUSH */:
-                    {
-                        returnValue = journalFlush();
-                        drainScheduled = false;
+            while (choreQueue.length) {
+                currentTime = performance.now();
+                const chore = (currentChore = choreQueue.shift());
+                if (chore.$state$ !== ChoreState.NONE) {
+                    continue;
+                }
+                if (vNodeAlreadyDeleted(chore) &&
+                    // we need to process cleanup tasks for deleted nodes
+                    chore.$type$ !== 32 /* ChoreType.CLEANUP_VISIBLE */) {
+                    // skip deleted chore
+                    DEBUG && debugTrace('skip chore', chore, choreQueue, blockedChores);
+                    continue;
+                }
+                if (chore.$type$ === 16 /* ChoreType.VISIBLE */) {
+                    // ensure that the journal flush is applied before the visible chore is executed
+                    // so that the visible chore can see the latest DOM changes
+                    applyJournalFlush();
+                    const blockingChore = findBlockingChoreForVisible(chore, runningChores, container);
+                    if (blockingChore && blockingChore.$state$ === ChoreState.RUNNING) {
+                        addBlockedChore(chore, blockingChore, blockedChores);
+                        continue;
                     }
-                    break;
-                case 6 /* ChoreType.COMPONENT */:
-                    {
-                        returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
-                            if (isServer) {
-                                return jsx;
+                }
+                // Note that this never throws
+                chore.$startTime$ = performance.now();
+                const result = executeChore(chore, isServer);
+                chore.$returnValue$ = result;
+                if (isPromise(result)) {
+                    runningChores.add(chore);
+                    chore.$state$ = ChoreState.RUNNING;
+                    result
+                        .then((value) => {
+                        finishChore(chore, value);
+                    })
+                        .catch((e) => {
+                        if (chore.$state$ !== ChoreState.RUNNING) {
+                            // we already handled the error
+                            return;
+                        }
+                        handleError(chore, e);
+                    })
+                        .finally(() => {
+                        runningChores.delete(chore);
+                        // Note that we ignore failed chores so the app keeps working
+                        // TODO decide if this is ok and document it
+                        scheduleBlockedChoresAndDrainIfNeeded(chore);
+                        // If drainChore is not null, we are waiting for it to finish.
+                        // If there are no running chores, we can finish the drain.
+                        if (!runningChores.size) {
+                            let finished = false;
+                            if (drainChore) {
+                                finished = maybeFinishDrain();
                             }
-                            else {
-                                const styleScopedId = container.getHostProp(host, QScopedStyle);
-                                return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
+                            if (!finished && !isDraining) {
+                                // if finished, then journal flush is already applied
+                                applyJournalFlush();
                             }
-                        }, (err) => container.handleError(err, host));
-                    }
-                    break;
-                case 2 /* ChoreType.RUN_QRL */:
-                    {
-                        const fn = chore.$target$.getFn();
-                        const result = retryOnPromise(() => fn(...chore.$payload$));
-                        if (isPromise(result)) {
-                            const handled = result
-                                .finally(() => {
-                                qrlRuns.splice(qrlRuns.indexOf(handled), 1);
-                            })
-                                .catch((error) => {
-                                container.handleError(error, chore.$host$);
-                            });
-                            // Don't wait for the promise to resolve
-                            // TODO come up with a better solution, we also want concurrent signal handling with tasks but serial tasks
-                            qrlRuns.push(handled);
-                            DEBUG &&
-                                debugTrace('execute.DONE (but still running)', chore, currentChore, choreQueue);
-                            chore.$returnValue$ = handled;
-                            chore.$resolve$?.(handled);
-                            currentChore = null;
-                            chore.$executed$ = true;
-                            // early out so we don't call after()
-                            return;
                         }
-                        returnValue = null;
-                    }
-                    break;
-                case 3 /* ChoreType.TASK */:
-                case 32 /* ChoreType.VISIBLE */:
-                    {
-                        const payload = chore.$payload$;
-                        if (payload.$flags$ & 4 /* TaskFlags.RESOURCE */) {
-                            const result = runResource(payload, container, host);
-                            // Don't await the return value of the resource, because async resources should not be awaited.
-                            // The reason for this is that we should be able to update for example a node with loading
-                            // text. If we await the resource, the loading text will not be displayed until the resource
-                            // is loaded.
-                            // Awaiting on the client also causes a deadlock.
-                            // In any case, the resource will never throw.
-                            returnValue = isServer ? result : null;
+                    });
+                }
+                else {
+                    finishChore(chore, result);
+                    scheduleBlockedChoresAndDrainIfNeeded(chore);
+                }
+                if (shouldApplyJournalFlush(isServer)) {
+                    applyJournalFlush();
+                    drainInNextTick();
+                    return;
+                }
+            }
+        }
+        catch (e) {
+            handleError(currentChore, e);
+            scheduleBlockedChoresAndDrainIfNeeded(currentChore);
+        }
+        finally {
+            isDraining = false;
+            maybeFinishDrain();
+        }
+    }
+    function finishChore(chore, value) {
+        chore.$endTime$ = performance.now();
+        chore.$state$ = ChoreState.DONE;
+        chore.$returnValue$ = value;
+        chore.$resolve$?.(value);
+    }
+    function handleError(chore, e) {
+        chore.$endTime$ = performance.now();
+        chore.$state$ = ChoreState.FAILED;
+        // If we used the result as promise, this won't exist
+        chore.$reject$?.(e);
+        container.handleError(e, chore.$host$);
+    }
+    function executeChore(chore, isServer) {
+        const host = chore.$host$;
+        let returnValue;
+        switch (chore.$type$) {
+            case 6 /* ChoreType.COMPONENT */:
+                {
+                    returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
+                        if (isServer) {
+                            return jsx;
                         }
                         else {
-                            returnValue = runTask(payload, container, host);
+                            const styleScopedId = container.getHostProp(host, QScopedStyle);
+                            return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
                         }
+                    }, (err) => {
+                        handleError(chore, err);
+                    });
+                }
+                break;
+            case 2 /* ChoreType.RUN_QRL */:
+                {
+                    const fn = chore.$target$.getFn();
+                    returnValue = retryOnPromise(() => fn(...chore.$payload$));
+                }
+                break;
+            case 3 /* ChoreType.TASK */:
+            case 16 /* ChoreType.VISIBLE */:
+                {
+                    const payload = chore.$payload$;
+                    if (payload.$flags$ & 4 /* TaskFlags.RESOURCE */) {
+                        returnValue = runResource(payload, container, host);
                     }
-                    break;
-                case 48 /* ChoreType.CLEANUP_VISIBLE */:
-                    {
-                        const task = chore.$payload$;
-                        cleanupTask(task);
+                    else {
+                        returnValue = runTask(payload, container, host);
                     }
-                    break;
-                case 4 /* ChoreType.NODE_DIFF */:
-                    {
-                        const parentVirtualNode = chore.$target$;
-                        let jsx = chore.$payload$;
-                        if (isSignal(jsx)) {
-                            jsx = jsx.value;
-                        }
-                        returnValue = retryOnPromise(() => vnode_diff(container, jsx, parentVirtualNode, null));
+                }
+                break;
+            case 32 /* ChoreType.CLEANUP_VISIBLE */:
+                {
+                    const task = chore.$payload$;
+                    cleanupTask(task);
+                }
+                break;
+            case 4 /* ChoreType.NODE_DIFF */:
+                {
+                    const parentVirtualNode = chore.$target$;
+                    let jsx = chore.$payload$;
+                    if (isSignal(jsx)) {
+                        jsx = jsx.value;
                     }
-                    break;
-                case 5 /* ChoreType.NODE_PROP */:
-                    {
-                        const virtualNode = chore.$host$;
-                        const payload = chore.$payload$;
-                        let value = payload.$value$;
-                        if (isSignal(value)) {
-                            value = value.value;
-                        }
-                        const isConst = payload.$isConst$;
-                        const journal = container.$journal$;
-                        const property = chore.$idx$;
-                        const serializedValue = serializeAttribute(property, value, payload.$scopedStyleIdPrefix$);
+                    returnValue = retryOnPromise(() => vnode_diff(container, jsx, parentVirtualNode, null));
+                }
+                break;
+            case 5 /* ChoreType.NODE_PROP */:
+                {
+                    const virtualNode = chore.$host$;
+                    const payload = chore.$payload$;
+                    let value = payload.$value$;
+                    if (isSignal(value)) {
+                        value = value.value;
+                    }
+                    const isConst = payload.$isConst$;
+                    const journal = container.$journal$;
+                    const property = chore.$idx$;
+                    const serializedValue = serializeAttribute(property, value, payload.$scopedStyleIdPrefix$);
+                    if (isServer) {
+                        container.addBackpatchEntry(chore.$host$.id, property, serializedValue);
+                        returnValue = null;
+                    }
+                    else {
                         if (isConst) {
                             const element = virtualNode[6 /* ElementVNodeProps.element */];
                             journal.push(2 /* VNodeJournalOpCode.SetAttribute */, element, property, serializedValue);
@@ -5496,63 +6056,49 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
                         else {
                             vnode_setAttr(journal, virtualNode, property, serializedValue);
                         }
+                        returnValue = undefined;
                     }
-                    break;
-                case 1 /* ChoreType.QRL_RESOLVE */: {
-                    {
-                        const target = chore.$target$;
-                        returnValue = !target.resolved ? target.resolve() : null;
-                    }
-                    break;
                 }
-                case 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */: {
-                    {
-                        const target = chore.$target$;
-                        const effects = chore.$payload$;
-                        if (target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl) {
-                            const forceRunEffects = target.$forceRunEffects$;
-                            target.$forceRunEffects$ = false;
-                            if (!target.$effects$?.size) {
-                                break;
+                break;
+            case 1 /* ChoreType.QRL_RESOLVE */: {
+                {
+                    const target = chore.$target$;
+                    returnValue = (!target.resolved ? target.resolve() : null);
+                }
+                break;
+            }
+            case 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */: {
+                {
+                    const target = chore.$target$;
+                    const effects = chore.$payload$;
+                    if (!effects?.size) {
+                        break;
+                    }
+                    let shouldCompute = target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl;
+                    if (target instanceof AsyncComputedSignalImpl && effects !== target.$effects$) {
+                        shouldCompute = false;
+                    }
+                    if (shouldCompute) {
+                        const ctx = newInvokeContext();
+                        ctx.$container$ = container;
+                        // needed for computed signals and throwing QRLs
+                        returnValue = maybeThen(retryOnPromise(() => invoke.call(target, ctx, target.$computeIfNeeded$)), () => {
+                            if (target.$flags$ & 2 /* SignalFlags.RUN_EFFECTS */) {
+                                target.$flags$ &= -3 /* SignalFlags.RUN_EFFECTS */;
+                                return retryOnPromise(() => triggerEffects(container, target, effects));
                             }
-                            returnValue = retryOnPromise(() => {
-                                if (target.$computeIfNeeded$() || forceRunEffects) {
-                                    triggerEffects(container, target, effects);
-                                }
-                            });
-                        }
-                        else {
-                            returnValue = retryOnPromise(() => {
-                                triggerEffects(container, target, effects);
-                            });
-                        }
+                        });
+                    }
+                    else {
+                        returnValue = retryOnPromise(() => {
+                            triggerEffects(container, target, effects);
+                        });
                     }
-                    break;
                 }
+                break;
             }
         }
-        catch (e) {
-            returnValue = Promise.reject(e);
-        }
-        const after = (value, error) => {
-            currentChore = null;
-            chore.$executed$ = true;
-            if (error) {
-                container.handleError(error, host);
-            }
-            else {
-                chore.$returnValue$ = value;
-                chore.$resolve$?.(value);
-            }
-        };
-        if (isPromise(returnValue)) {
-            chore.$promise$ = returnValue.then(after, (error) => after(undefined, error));
-            chore.$resolve$?.(chore.$promise$);
-            chore.$resolve$ = undefined;
-        }
-        else {
-            after(returnValue);
-        }
+        return returnValue;
     }
     /**
      * Compares two chores to determine their execution order in the scheduler's queue.
@@ -5581,15 +6127,6 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             else {
                 assertFalse(vnode_isVNode(aHost), 'expected aHost to be SSRNode but it is a VNode');
                 assertFalse(vnode_isVNode(bHost), 'expected bHost to be SSRNode but it is a VNode');
-                // we are running on the server.
-                // On server we can't schedule task for a different host!
-                // Server is SSR, and therefore scheduling for anything but the current host
-                // implies that things need to be re-run nad that is not supported because of streaming.
-                const errorMessage = `SERVER: during HTML streaming, re-running tasks on a different host is not allowed.
-          You are attempting to change a state that has already been streamed to the client.
-          This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
-          Problematic Node: ${aHost.toString()}`;
-                logWarn(errorMessage);
                 const hostDiff = ssrNodeDocumentPosition(aHost, bHost);
                 if (hostDiff !== 0) {
                     return hostDiff;
@@ -5606,12 +6143,21 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             return idxDiff;
         }
         // If the host is the same (or missing), and the type is the same,  we need to compare the target.
-        if (a.$target$ !== b.$target$ || a.$payload$ !== b.$payload$) {
+        if (a.$target$ !== b.$target$) {
+            if (isQrl(a.$target$) && isQrl(b.$target$) && a.$target$.$hash$ === b.$target$.$hash$) {
+                return 0;
+            }
             // 1 means that we are going to process chores as FIFO
             return 1;
         }
-        // If the chore is the same as the current chore, we will run it again
-        if (b === currentChore) {
+        // ensure that the effect chores are scheduled for the same target
+        // TODO: can we do this better?
+        if (a.$type$ === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */ &&
+            b.$type$ === 7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */ &&
+            ((a.$target$ instanceof StoreHandler && b.$target$ instanceof StoreHandler) ||
+                (a.$target$ instanceof AsyncComputedSignalImpl &&
+                    b.$target$ instanceof AsyncComputedSignalImpl)) &&
+            a.$payload$ !== b.$payload$) {
             return 1;
         }
         // The chores are the same and will run only once
@@ -5643,6 +6189,15 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
         /// We need to ensure that the `queue` is sorted by priority.
         /// 1. Find a place where to insert into.
         const idx = sortedFindIndex(sortedArray, value, rootVNode);
+        if (idx < 0 && runningChores.size) {
+            // 1.1. Check if the chore is already running.
+            for (const chore of runningChores) {
+                const comp = choreComparator(value, chore, rootVNode);
+                if (comp === 0) {
+                    return chore;
+                }
+            }
+        }
         if (idx < 0) {
             /// 2. Insert the chore into the queue.
             sortedArray.splice(~idx, 0, value);
@@ -5654,12 +6209,9 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
          * multiple times during component execution. For this reason it is necessary for us to update
          * the chore with the latest result of the signal.
          */
-        if (existing.$type$ === 4 /* ChoreType.NODE_DIFF */) {
+        if (existing.$payload$ !== value.$payload$) {
             existing.$payload$ = value.$payload$;
         }
-        if (existing.$executed$) {
-            existing.$executed$ = false;
-        }
         return existing;
     }
 };
@@ -5671,6 +6223,25 @@ function vNodeAlreadyDeleted(chore) {
         vnode_isVNode(chore.$host$) &&
         chore.$host$[0 /* VNodeProps.flags */] & 32 /* VNodeFlags.Deleted */);
 }
+function addBlockedChore(blockedChore, blockingChore, blockedChores) {
+    blockingChore.$blockedChores$ ||= [];
+    blockingChore.$blockedChores$.push(blockedChore);
+    blockedChores.add(blockedChore);
+}
+function choreTypeToName(type) {
+    return ({
+        [1 /* ChoreType.QRL_RESOLVE */]: 'Resolve QRL',
+        [2 /* ChoreType.RUN_QRL */]: 'Run QRL',
+        [3 /* ChoreType.TASK */]: 'Task',
+        [4 /* ChoreType.NODE_DIFF */]: 'Changes diffing',
+        [5 /* ChoreType.NODE_PROP */]: 'Updating node property',
+        [6 /* ChoreType.COMPONENT */]: 'Component',
+        [7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */]: 'Signal recompute',
+        [16 /* ChoreType.VISIBLE */]: 'Visible',
+        [32 /* ChoreType.CLEANUP_VISIBLE */]: 'Cleanup visible',
+        [255 /* ChoreType.WAIT_FOR_QUEUE */]: 'Wait for queue',
+    }[type] || 'Unknown: ' + type);
+}
 function debugChoreTypeToString(type) {
     return ({
         [1 /* ChoreType.QRL_RESOLVE */]: 'QRL_RESOLVE',
@@ -5680,31 +6251,87 @@ function debugChoreTypeToString(type) {
         [5 /* ChoreType.NODE_PROP */]: 'NODE_PROP',
         [6 /* ChoreType.COMPONENT */]: 'COMPONENT',
         [7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */]: 'RECOMPUTE_SIGNAL',
-        [16 /* ChoreType.JOURNAL_FLUSH */]: 'JOURNAL_FLUSH',
-        [32 /* ChoreType.VISIBLE */]: 'VISIBLE',
-        [48 /* ChoreType.CLEANUP_VISIBLE */]: 'CLEANUP_VISIBLE',
-        [255 /* ChoreType.WAIT_FOR_ALL */]: 'WAIT_FOR_ALL',
+        [16 /* ChoreType.VISIBLE */]: 'VISIBLE',
+        [32 /* ChoreType.CLEANUP_VISIBLE */]: 'CLEANUP_VISIBLE',
+        [255 /* ChoreType.WAIT_FOR_QUEUE */]: 'WAIT_FOR_QUEUE',
     }[type] || 'UNKNOWN: ' + type);
 }
-function debugChoreToString(chore) {
-    const type = debugChoreTypeToString(chore.$type$);
-    const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
-    const qrlTarget = chore.$target$?.$symbol$;
-    return `Chore(${type} ${chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */ ? qrlTarget : host} ${chore.$idx$})`;
-}
-function debugTrace(action, arg, currentChore, queue) {
-    const lines = ['===========================\nScheduler: ' + action];
-    if (arg && !('$type$' in arg)) {
-        lines.push('      arg: ' + String(arg).replaceAll(/\n.*/gim, ''));
-    }
-    if (queue) {
-        queue.forEach((chore) => {
-            const active = chore === arg ? '>>>' : '   ';
-            lines.push(`     ${active} > ` +
-                (chore === currentChore ? '[running] ' : '') +
-                debugChoreToString(chore));
+function debugTrace(action, arg, queue, blockedChores) {
+    const lines = [];
+    // Header
+    lines.push(`Scheduler: ${action}`);
+    // Argument section
+    if (arg) {
+        lines.push('');
+        if (arg && '$type$' in arg) {
+            const chore = arg;
+            const type = debugChoreTypeToString(chore.$type$);
+            const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
+            const qrlTarget = chore.$target$?.$symbol$;
+            const targetOrHost = chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */
+                ? qrlTarget
+                : host;
+            lines.push(`🎯 Current Chore:`);
+            lines.push(`  Type: ${type}`);
+            lines.push(`  Host: ${targetOrHost}`);
+            // Show execution time if available
+            if (chore.$startTime$ && chore.$endTime$) {
+                const executionTime = chore.$endTime$ - chore.$startTime$;
+                lines.push(`  Time: ${executionTime.toFixed(2)}ms`);
+            }
+            else if (chore.$startTime$) {
+                const elapsedTime = performance.now() - chore.$startTime$;
+                lines.push(`  Time: ${elapsedTime.toFixed(2)}ms (running)`);
+            }
+            // Show blocked chores for this chore
+            if (chore.$blockedChores$ && chore.$blockedChores$.length > 0) {
+                lines.push(`  ⛔ Blocked Chores:`);
+                chore.$blockedChores$.forEach((blockedChore, index) => {
+                    const blockedType = debugChoreTypeToString(blockedChore.$type$);
+                    const blockedTarget = String(blockedChore.$host$).replaceAll(/\n.*/gim, '');
+                    lines.push(`    ${index + 1}. ${blockedType} ${blockedTarget} ${blockedChore.$idx$}`);
+                });
+            }
+        }
+        else {
+            lines.push(`📝 Argument: ${String(arg).replaceAll(/\n.*/gim, '')}`);
+        }
+    }
+    // Queue section
+    if (queue && queue.length > 0) {
+        lines.push('');
+        lines.push(`📋 Queue (${queue.length} items):`);
+        queue.forEach((chore, index) => {
+            const isActive = chore === arg;
+            const activeMarker = isActive ? `▶ ` : '  ';
+            const type = debugChoreTypeToString(chore.$type$);
+            const state = chore.$state$ ? `[${ChoreState[chore.$state$]}]` : '';
+            const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
+            const qrlTarget = chore.$target$?.$symbol$;
+            const target = chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */
+                ? qrlTarget
+                : host;
+            const line = `${activeMarker}${state} ${type} ${target} ${chore.$idx$}`;
+            lines.push(line);
         });
     }
+    // Blocked chores section
+    if (blockedChores && blockedChores.size > 0) {
+        lines.push('');
+        lines.push(`🚫 Blocked Chores (${blockedChores.size} items):`);
+        Array.from(blockedChores).forEach((chore, index) => {
+            const type = debugChoreTypeToString(chore.$type$);
+            const host = String(chore.$host$).replaceAll(/\n.*/gim, '');
+            const qrlTarget = chore.$target$?.$symbol$;
+            const target = chore.$type$ === 1 /* ChoreType.QRL_RESOLVE */ || chore.$type$ === 2 /* ChoreType.RUN_QRL */
+                ? qrlTarget
+                : host;
+            lines.push(`  ${index + 1}. ${type} ${target} ${chore.$idx$}`);
+        });
+    }
+    // Footer
+    lines.push('');
+    lines.push('─'.repeat(60));
     // eslint-disable-next-line no-console
     console.log(lines.join('\n') + '\n');
 }
@@ -5722,7 +6349,8 @@ class _SharedContainer {
     $currentUniqueId$ = 0;
     $instanceHash$ = null;
     $buildBase$ = null;
-    constructor(scheduleDrain, journalFlush, serverData, locale) {
+    $flushEpoch$ = 0;
+    constructor(journalFlush, serverData, locale) {
         this.$serverData$ = serverData;
         this.$locale$ = locale;
         this.$version$ = version;
@@ -5730,7 +6358,7 @@ class _SharedContainer {
         this.$getObjectById$ = (_id) => {
             throw Error('Not implemented');
         };
-        this.$scheduler$ = createScheduler(this, scheduleDrain, journalFlush);
+        this.$scheduler$ = createScheduler(this, journalFlush);
     }
     trackSignalValue(signal, subscriber, property, data) {
         return trackSignalAndAssignHost(signal, subscriber, property, this, data);
@@ -5878,7 +6506,7 @@ function processVNodeData$1(document) {
             const qContainer = getAttribute.call(node, Q_CONTAINER);
             if (qContainer === null) {
                 if (hasAttribute.call(node, Q_SHADOW_ROOT)) {
-                    return 6 /* NodeType.ELEMENT_SHADOW_ROOT */;
+                    return 6 /* NodeType.ELEMENT_SHADOW_ROOT_WRAPPER */;
                 }
                 const isQElement = hasAttribute.call(node, Q_PROPS_SEPARATOR);
                 return isQElement ? 2 /* NodeType.ELEMENT */ : 0 /* NodeType.OTHER */;
@@ -5896,10 +6524,10 @@ function processVNodeData$1(document) {
                 return 16 /* NodeType.COMMENT_IGNORE_START */;
             }
             else if (nodeValue.startsWith(Q_CONTAINER)) {
-                return 5 /* NodeType.COMMENT_SKIP_START */;
+                return 9 /* NodeType.COMMENT_SKIP_START */;
             }
             else if (nodeValue.startsWith(Q_CONTAINER_ISLAND_END)) {
-                return 128 /* NodeType.COMMENT_ISLAND_END */;
+                return 64 /* NodeType.COMMENT_ISLAND_END */;
             }
             else if (nodeValue.startsWith(Q_IGNORE_END)) {
                 return 32 /* NodeType.COMMENT_IGNORE_END */;
@@ -5946,11 +6574,6 @@ function processVNodeData$1(document) {
         while (node && (node = node.nextSibling) && getFastNodeType(node) === 0 /* NodeType.OTHER */) { }
         return node;
     };
-    const firstChild = (node) => {
-        // eslint-disable-next-line no-empty
-        while (node && (node = node.firstChild) && getFastNodeType(node) === 0 /* NodeType.OTHER */) { }
-        return node;
-    };
     /**
      * Process the container
      *
@@ -6011,7 +6634,7 @@ function processVNodeData$1(document) {
                 } while (getFastNodeType(islandNode) !== 65 /* NodeType.COMMENT_ISLAND_START */);
                 nextNode = null;
             }
-            else if (nodeType === 128 /* NodeType.COMMENT_ISLAND_END */) {
+            else if (nodeType === 64 /* NodeType.COMMENT_ISLAND_END */) {
                 nextNode = node;
                 do {
                     nextNode = walker.nextNode();
@@ -6021,7 +6644,7 @@ function processVNodeData$1(document) {
                 } while (getFastNodeType(nextNode) !== 32 /* NodeType.COMMENT_IGNORE_END */);
                 nextNode = null;
             }
-            else if (nodeType === 5 /* NodeType.COMMENT_SKIP_START */) {
+            else if (nodeType === 9 /* NodeType.COMMENT_SKIP_START */) {
                 // If we are in a container, we need to skip the children.
                 nextNode = node;
                 do {
@@ -6033,7 +6656,7 @@ function processVNodeData$1(document) {
                 // console.log('EXIT', nextNode?.outerHTML);
                 walkContainer(walker, node, node, nextNode, '', null);
             }
-            else if (nodeType === 6 /* NodeType.ELEMENT_SHADOW_ROOT */) {
+            else if (nodeType === 6 /* NodeType.ELEMENT_SHADOW_ROOT_WRAPPER */) {
                 // If we are in a shadow root, we need to get the shadow root element.
                 nextNode = nextSibling(node);
                 const shadowRootContainer = node;
@@ -6041,7 +6664,7 @@ function processVNodeData$1(document) {
                 if (shadowRoot) {
                     walkContainer(
                     // we need to create a new walker for the shadow root
-                    document.createTreeWalker(shadowRoot, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, firstChild(shadowRoot), null, '', null);
+                    document.createTreeWalker(shadowRoot, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, shadowRoot, null, '', null);
                 }
             }
             if ((nodeType & 2 /* NodeType.ELEMENT */) === 2 /* NodeType.ELEMENT */) {
@@ -6098,6 +6721,7 @@ function processVNodeData$1(document) {
 }
 
 /** @file Public APIs for the SSR */
+// @ts-expect-error we don't have types for the preloader
 /** @public */
 function getDomContainer(element) {
     const qContainerElement = _getQContainerElement(element);
@@ -6117,7 +6741,7 @@ function getDomContainerFromQContainerElement(qContainerElement) {
 /** @internal */
 function _getQContainerElement(element) {
     const qContainerElement = Array.isArray(element)
-        ? vnode_getDomParent(element)
+        ? vnode_getDomParent(element, true)
         : element;
     return qContainerElement.closest(QContainerSelector);
 }
@@ -6132,19 +6756,20 @@ class DomContainer extends _SharedContainer {
     rootVNode;
     document;
     $journal$;
-    renderDone = null;
     $rawStateData$;
     $storeProxyMap$ = new WeakMap();
     $qFuncs$;
     $instanceHash$;
     $forwardRefs$ = null;
-    $initialQRLsIndexes$ = null;
+    $initialQRLs$ = null;
     vNodeLocate = (id) => vnode_locate(this.rootVNode, id);
     $stateData$;
     $styleIds$ = null;
-    $renderCount$ = 0;
     constructor(element) {
-        super(() => this.scheduleRender(), () => vnode_applyJournal(this.$journal$), {}, element.getAttribute(QLocaleAttr));
+        super(() => {
+            this.$flushEpoch$++;
+            vnode_applyJournal(this.$journal$);
+        }, {}, element.getAttribute(QLocaleAttr));
         this.qContainer = element.getAttribute(QContainerAttr);
         if (!this.qContainer) {
             throw qError(25 /* QError.elementWithoutContainer */);
@@ -6186,20 +6811,17 @@ class DomContainer extends _SharedContainer {
     }
     handleError(err, host) {
         if (qDev && host) {
-            // Clean vdom
             if (typeof document !== 'undefined') {
                 const vHost = host;
-                const errorDiv = document.createElement('errored-host');
-                if (err && err instanceof Error) {
-                    errorDiv.props = { error: err };
-                }
-                errorDiv.setAttribute('q:key', '_error_');
                 const journal = [];
-                const vErrorDiv = vnode_newElement(errorDiv, 'errored-host');
-                vnode_getDOMChildNodes(journal, vHost, true).forEach((child) => {
-                    vnode_insertBefore(journal, vErrorDiv, child, null);
-                });
-                vnode_insertBefore(journal, vHost, vErrorDiv, null);
+                const vHostParent = vnode_getParent(vHost);
+                const vHostNextSibling = vnode_getNextSibling(vHost);
+                const vErrorDiv = vnode_createErrorDiv(document, vHost, err, journal);
+                // If the host is an element node, we need to insert the error div into its parent.
+                const insertHost = vnode_isElementVNode(vHost) ? vHostParent || vHost : vHost;
+                // If the host is different then we need to insert errored-host in the same position as the host.
+                const insertBefore = insertHost === vHost ? null : vHostNextSibling;
+                vnode_insertBefore(journal, insertHost, vErrorDiv, insertBefore);
                 vnode_applyJournal(journal);
             }
             if (err && err instanceof Error) {
@@ -6219,19 +6841,16 @@ class DomContainer extends _SharedContainer {
     }
     setContext(host, context, value) {
         let ctx = this.getHostProp(host, QCtxAttr);
-        if (!ctx) {
+        if (ctx == null) {
             this.setHostProp(host, QCtxAttr, (ctx = []));
         }
-        mapArray_set(ctx, context.id, value, 0);
+        mapArray_set(ctx, context.id, value, 0, true);
     }
     resolveContext(host, contextId) {
         while (host) {
             const ctx = this.getHostProp(host, QCtxAttr);
-            if (ctx) {
-                const value = mapArray_get(ctx, contextId.id, 0);
-                if (value) {
-                    return value;
-                }
+            if (ctx != null && mapArray_has(ctx, contextId.id, 0)) {
+                return mapArray_get(ctx, contextId.id, 0);
             }
             host = this.getParentHost(host);
         }
@@ -6277,29 +6896,6 @@ class DomContainer extends _SharedContainer {
         }
         return vnode_getProp(vNode, name, getObjectById);
     }
-    scheduleRender() {
-        this.$renderCount$++;
-        this.renderDone ||= getPlatform().nextTick(() => this.processChores());
-        return this.renderDone.finally(() => emitEvent('qrender', { instanceHash: this.$instanceHash$, renderCount: this.$renderCount$ }));
-    }
-    processChores() {
-        let renderCount = this.$renderCount$;
-        const result = this.$scheduler$(255 /* ChoreType.WAIT_FOR_ALL */);
-        if (isPromise(result)) {
-            return result.then(async () => {
-                while (renderCount !== this.$renderCount$) {
-                    renderCount = this.$renderCount$;
-                    await this.$scheduler$(255 /* ChoreType.WAIT_FOR_ALL */);
-                }
-                this.renderDone = null;
-            });
-        }
-        if (renderCount !== this.$renderCount$) {
-            this.processChores();
-            return;
-        }
-        this.renderDone = null;
-    }
     ensureProjectionResolved(vNode) {
         if ((vNode[0 /* VNodeProps.flags */] & 16 /* VNodeFlags.Resolved */) === 0) {
             vNode[0 /* VNodeProps.flags */] |= 16 /* VNodeFlags.Resolved */;
@@ -6309,7 +6905,9 @@ class DomContainer extends _SharedContainer {
                 if (isSlotProp(prop)) {
                     const value = props[i + 1];
                     if (typeof value == 'string') {
-                        props[i + 1] = this.vNodeLocate(value);
+                        const projection = this.vNodeLocate(value);
+                        props[i + 1] = projection;
+                        vnode_getProp(projection, QSlotParent, (id) => this.vNodeLocate(id));
                     }
                 }
             }
@@ -6378,11 +6976,14 @@ class DomContainer extends _SharedContainer {
      * ```
      */
     $scheduleInitialQRLs$() {
-        if (this.$initialQRLsIndexes$) {
-            for (const index of this.$initialQRLsIndexes$) {
-                this.$scheduler$(1 /* ChoreType.QRL_RESOLVE */, null, this.$getObjectById$(index));
+        if (this.$initialQRLs$) {
+            for (const qrl of this.$initialQRLs$) {
+                const match = /#(.*)_([a-zA-Z0-9]+)(\[|$)/.exec(qrl);
+                if (match) {
+                    p(match[2], 0.3);
+                }
             }
-            this.$initialQRLsIndexes$ = null;
+            this.$initialQRLs$ = null;
         }
     }
 }
@@ -6430,7 +7031,7 @@ const addQrlToSerializationCtx = (effectSubscriber, container) => {
     }
 };
 const triggerEffects = (container, signal, effects) => {
-    const isBrowser = isDomContainer(container);
+    const isBrowser = !isServerPlatform();
     if (effects) {
         const scheduleEffect = (effectSubscription) => {
             const consumer = effectSubscription[0 /* EffectSubscriptionProp.CONSUMER */];
@@ -6440,7 +7041,7 @@ const triggerEffects = (container, signal, effects) => {
                 consumer.$flags$ |= 8 /* TaskFlags.DIRTY */;
                 let choreType = 3 /* ChoreType.TASK */;
                 if (consumer.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
-                    choreType = 32 /* ChoreType.VISIBLE */;
+                    choreType = 16 /* ChoreType.VISIBLE */;
                 }
                 container.$scheduler$(choreType, consumer);
             }
@@ -6454,7 +7055,7 @@ const triggerEffects = (container, signal, effects) => {
                         container.$scheduler$(1 /* ChoreType.QRL_RESOLVE */, null, consumer.$computeQrl$);
                     }
                 }
-                consumer.$invalidate$();
+                consumer.invalidate();
             }
             else if (property === ":" /* EffectProperty.COMPONENT */) {
                 const host = consumer;
@@ -6463,22 +7064,22 @@ const triggerEffects = (container, signal, effects) => {
                 const props = container.getHostProp(host, ELEMENT_PROPS);
                 container.$scheduler$(6 /* ChoreType.COMPONENT */, host, qrl, props);
             }
-            else if (isBrowser) {
-                if (property === "." /* EffectProperty.VNODE */) {
+            else if (property === "." /* EffectProperty.VNODE */) {
+                if (isBrowser) {
                     const host = consumer;
                     container.$scheduler$(4 /* ChoreType.NODE_DIFF */, host, host, signal);
                 }
-                else {
-                    const host = consumer;
-                    const effectData = effectSubscription[3 /* EffectSubscriptionProp.DATA */];
-                    if (effectData instanceof SubscriptionData) {
-                        const data = effectData.data;
-                        const payload = {
-                            ...data,
-                            $value$: signal,
-                        };
-                        container.$scheduler$(5 /* ChoreType.NODE_PROP */, host, property, payload);
-                    }
+            }
+            else {
+                const host = consumer;
+                const effectData = effectSubscription[3 /* EffectSubscriptionProp.DATA */];
+                if (effectData instanceof SubscriptionData) {
+                    const data = effectData.data;
+                    const payload = {
+                        ...data,
+                        $value$: signal,
+                    };
+                    container.$scheduler$(5 /* ChoreType.NODE_PROP */, host, property, payload);
                 }
             }
         };
@@ -6489,7 +7090,23 @@ const triggerEffects = (container, signal, effects) => {
 };
 /** @internal */
 const isSerializerObj = (obj) => {
-    return (typeof obj === 'object' && obj !== null && typeof obj[SerializerSymbol] === 'function');
+    return isObject(obj) && typeof obj[SerializerSymbol] === 'function';
+};
+const getComputedSignalFlags = (serializationStrategy) => {
+    let flags = 1 /* SignalFlags.INVALID */;
+    switch (serializationStrategy) {
+        // TODO: implement this in the future
+        // case 'auto':
+        //   flags |= ComputedSignalFlags.SERIALIZATION_STRATEGY_AUTO;
+        //   break;
+        case 'never':
+            flags |= 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
+            break;
+        case 'always':
+            flags |= 32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
+            break;
+    }
+    return flags;
 };
 
 const stringifyPath = [];
@@ -6784,6 +7401,7 @@ const vnode_isElementOrTextVNode = (vNode) => {
     const flag = vNode[0 /* VNodeProps.flags */];
     return (flag & 5 /* VNodeFlags.ELEMENT_OR_TEXT_MASK */) !== 0;
 };
+/** @internal */
 const vnode_isMaterialized = (vNode) => {
     assertDefined(vNode, 'Missing vNode');
     const flag = vNode[0 /* VNodeProps.flags */];
@@ -6791,11 +7409,13 @@ const vnode_isMaterialized = (vNode) => {
         vNode[4 /* ElementVNodeProps.firstChild */] !== undefined &&
         vNode[5 /* ElementVNodeProps.lastChild */] !== undefined);
 };
+/** @internal */
 const vnode_isTextVNode = (vNode) => {
     assertDefined(vNode, 'Missing vNode');
     const flag = vNode[0 /* VNodeProps.flags */];
     return (flag & 4 /* VNodeFlags.Text */) === 4 /* VNodeFlags.Text */;
 };
+/** @internal */
 const vnode_isVirtualVNode = (vNode) => {
     assertDefined(vNode, 'Missing vNode');
     const flag = vNode[0 /* VNodeProps.flags */];
@@ -6833,6 +7453,7 @@ const vnode_getNodeTypeName = (vNode) => {
     }
     return '<unknown>';
 };
+/** @internal */
 const vnode_ensureElementInflated = (vnode) => {
     const flags = vnode[0 /* VNodeProps.flags */];
     if ((flags & 15 /* VNodeFlags.INFLATED_TYPE_MASK */) === 1 /* VNodeFlags.Element */) {
@@ -6874,6 +7495,9 @@ function vnode_walkVNode(vNode, callback) {
     }
     let vParent = null;
     do {
+        if (callback?.(vCursor, vParent)) {
+            return;
+        }
         const vFirstChild = vnode_getFirstChild(vCursor);
         if (vFirstChild) {
             vCursor = vFirstChild;
@@ -7042,6 +7666,7 @@ const vnode_ensureTextInflated = (journal, vnode) => {
     const flags = textVNode[0 /* VNodeProps.flags */];
     if ((flags & 8 /* VNodeFlags.Inflated */) === 0) {
         const parentNode = vnode_getDomParent(vnode);
+        assertDefined(parentNode, 'Missing parent node.');
         const sharedTextNode = textVNode[4 /* TextVNodeProps.node */];
         const doc = parentNode.ownerDocument;
         // Walk the previous siblings and inflate them.
@@ -7200,6 +7825,18 @@ const indexOfAlphanumeric = (id, length) => {
     }
     return length;
 };
+const vnode_createErrorDiv = (document, host, err, journal) => {
+    const errorDiv = document.createElement('errored-host');
+    if (err && err instanceof Error) {
+        errorDiv.props = { error: err };
+    }
+    errorDiv.setAttribute('q:key', '_error_');
+    const vErrorDiv = vnode_newElement(errorDiv, 'errored-host');
+    vnode_getDOMChildNodes(journal, host, true).forEach((child) => {
+        vnode_insertBefore(journal, vErrorDiv, child, null);
+    });
+    return vErrorDiv;
+};
 const parseBoolean = (value) => {
     if (value === 'false') {
         return false;
@@ -7338,7 +7975,7 @@ const vnode_insertBefore = (journal, parent, newChild, insertBefore) => {
      * unlink the previous or next sibling, we don't know that after "a" node is "b". So we need to
      * find children first (and inflate them).
      */
-    const domParentVNode = vnode_getDomParentVNode(parent);
+    const domParentVNode = vnode_getDomParentVNode(parent, false);
     const parentNode = domParentVNode && domParentVNode[6 /* ElementVNodeProps.element */];
     let domChildren = null;
     if (domParentVNode) {
@@ -7387,27 +8024,31 @@ const vnode_insertBefore = (journal, parent, newChild, insertBefore) => {
             newChildCurrentParent !== parent)) {
         vnode_remove(journal, newChildCurrentParent, newChild, false);
     }
-    let adjustedInsertBefore = null;
-    if (insertBefore == null) {
-        if (vnode_isVirtualVNode(parent)) {
-            // If `insertBefore` is null, than we need to insert at the end of the list.
-            // Well, not quite. If the parent is a virtual node, our "last node" is not the same
-            // as the DOM "last node". So in that case we need to look for the "next node" from
-            // our parent.
-            adjustedInsertBefore = vnode_getDomSibling(parent, true, false);
+    const parentIsDeleted = parent[0 /* VNodeProps.flags */] & 32 /* VNodeFlags.Deleted */;
+    // if the parent is deleted, then we don't need to insert the new child
+    if (!parentIsDeleted) {
+        let adjustedInsertBefore = null;
+        if (insertBefore == null) {
+            if (vnode_isVirtualVNode(parent)) {
+                // If `insertBefore` is null, than we need to insert at the end of the list.
+                // Well, not quite. If the parent is a virtual node, our "last node" is not the same
+                // as the DOM "last node". So in that case we need to look for the "next node" from
+                // our parent.
+                adjustedInsertBefore = vnode_getDomSibling(parent, true, false);
+            }
+        }
+        else if (vnode_isVirtualVNode(insertBefore)) {
+            // If the `insertBefore` is virtual, than we need to descend into the virtual and find e actual
+            adjustedInsertBefore = vnode_getDomSibling(insertBefore, true, true);
+        }
+        else {
+            adjustedInsertBefore = insertBefore;
+        }
+        adjustedInsertBefore && vnode_ensureInflatedIfText(journal, adjustedInsertBefore);
+        // Here we know the insertBefore node
+        if (domChildren && domChildren.length) {
+            journal.push(5 /* VNodeJournalOpCode.Insert */, parentNode, vnode_getNode(adjustedInsertBefore), ...domChildren);
         }
-    }
-    else if (vnode_isVirtualVNode(insertBefore)) {
-        // If the `insertBefore` is virtual, than we need to descend into the virtual and find e actual
-        adjustedInsertBefore = vnode_getDomSibling(insertBefore, true, true);
-    }
-    else {
-        adjustedInsertBefore = insertBefore;
-    }
-    adjustedInsertBefore && vnode_ensureInflatedIfText(journal, adjustedInsertBefore);
-    // Here we know the insertBefore node
-    if (domChildren && domChildren.length) {
-        journal.push(5 /* VNodeJournalOpCode.Insert */, parentNode, vnode_getNode(adjustedInsertBefore), ...domChildren);
     }
     // link newChild into the previous/next list
     const vNext = insertBefore;
@@ -7429,14 +8070,22 @@ const vnode_insertBefore = (journal, parent, newChild, insertBefore) => {
     newChild[2 /* VNodeProps.previousSibling */] = vPrevious;
     newChild[3 /* VNodeProps.nextSibling */] = vNext;
     newChild[1 /* VNodeProps.parent */] = parent;
+    if (parentIsDeleted) {
+        // if the parent is deleted, then the new child is also deleted
+        newChild[0 /* VNodeProps.flags */] |= 32 /* VNodeFlags.Deleted */;
+    }
 };
-const vnode_getDomParent = (vnode) => {
-    vnode = vnode_getDomParentVNode(vnode);
+const vnode_getDomParent = (vnode, includeProjection = true) => {
+    vnode = vnode_getDomParentVNode(vnode, includeProjection);
     return (vnode && vnode[6 /* ElementVNodeProps.element */]);
 };
-const vnode_getDomParentVNode = (vnode) => {
+const vnode_getDomParentVNode = (vnode, includeProjection = true) => {
     while (vnode && !vnode_isElementVNode(vnode)) {
-        vnode = vnode[1 /* VNodeProps.parent */];
+        vnode =
+            vnode[1 /* VNodeProps.parent */] ||
+                (includeProjection
+                    ? vnode_getProp(vnode, QSlotParent, (id) => (vnode_isVNode(id) ? id : null))
+                    : null);
     }
     return vnode;
 };
@@ -7446,7 +8095,7 @@ const vnode_remove = (journal, vParent, vToRemove, removeDOM) => {
         vnode_ensureTextInflated(journal, vToRemove);
     }
     if (removeDOM) {
-        const domParent = vnode_getDomParent(vParent);
+        const domParent = vnode_getDomParent(vParent, false);
         const isInnerHTMLParent = vnode_getAttr(vParent, dangerouslySetInnerHTML);
         if (isInnerHTMLParent) {
             // ignore children, as they are inserted via innerHTML
@@ -7511,6 +8160,7 @@ const vnode_setText = (journal, textVNode, text) => {
     const textNode = textVNode[4 /* TextVNodeProps.node */];
     journal.push(1 /* VNodeJournalOpCode.SetText */, textNode, (textVNode[5 /* TextVNodeProps.text */] = text));
 };
+/** @internal */
 const vnode_getFirstChild = (vnode) => {
     if (vnode_isTextVNode(vnode)) {
         return null;
@@ -7771,27 +8421,46 @@ const materializeFromDOM = (vParent, firstChild, vData) => {
     return vFirstChild;
 };
 function setEffectBackRefFromVNodeData(vParent, value, container) {
-    const deserializedSubMap = container.$getObjectById$(value);
     if (!vParent[_EFFECT_BACK_REF]) {
+        // get data lazily
+        // this is because effects back refs can point to vnodes which are not yet materialized
+        // (are after the current vnode)
         Object.defineProperty(vParent, _EFFECT_BACK_REF, {
-            value: deserializedSubMap,
+            get() {
+                const subMap = container.$getObjectById$(value);
+                vParent[_EFFECT_BACK_REF] = subMap;
+                return subMap;
+            },
+            set(value) {
+                Object.defineProperty(vParent, _EFFECT_BACK_REF, {
+                    value,
+                    writable: true,
+                    enumerable: true,
+                    configurable: true,
+                });
+            },
+            enumerable: true,
+            configurable: true,
         });
     }
     else {
         const subMap = vParent[_EFFECT_BACK_REF];
-        mergeMaps(subMap, deserializedSubMap);
+        mergeMaps(subMap, container.$getObjectById$(value));
     }
 }
 const processVNodeData = (vData, callback) => {
     let nextToConsumeIdx = 0;
     let ch = 0;
     let peekCh = 0;
+    const getChar = (idx) => {
+        return idx < vData.length ? vData.charCodeAt(idx) : 0;
+    };
     const peek = () => {
         if (peekCh !== 0) {
             return peekCh;
         }
         else {
-            return (peekCh = nextToConsumeIdx < vData.length ? vData.charCodeAt(nextToConsumeIdx) : 0);
+            return (peekCh = getChar(nextToConsumeIdx));
         }
     };
     const consume = () => {
@@ -7812,15 +8481,17 @@ const processVNodeData = (vData, callback) => {
         return vData.substring(start, nextToConsumeIdx);
     };
     while (peek() !== 0) {
-        callback(peek, consumeValue, consume, nextToConsumeIdx);
+        callback(peek, consumeValue, consume, getChar, nextToConsumeIdx);
     }
 };
+/** @internal */
 const vnode_getNextSibling = (vnode) => {
     return vnode[3 /* VNodeProps.nextSibling */];
 };
 const vnode_getPreviousSibling = (vnode) => {
     return vnode[2 /* VNodeProps.previousSibling */];
 };
+/** @internal */
 const vnode_getAttrKeys = (vnode) => {
     const type = vnode[0 /* VNodeProps.flags */];
     if ((type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0) {
@@ -7866,6 +8537,7 @@ const vnode_setAttr = (journal, vnode, key, value) => {
         }
     }
 };
+/** @internal */
 const vnode_getAttr = (vnode, key) => {
     const type = vnode[0 /* VNodeProps.flags */];
     if ((type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0) {
@@ -7902,6 +8574,7 @@ const vnode_setProp = (vnode, key, value) => {
         props.splice(idx ^ -1, 0, key, value);
     }
 };
+/** @internal */
 const vnode_getPropStartIndex = (vnode) => {
     const type = vnode[0 /* VNodeProps.flags */] & 7 /* VNodeFlags.TYPE_MASK */;
     if (type === 1 /* VNodeFlags.Element */) {
@@ -7912,12 +8585,33 @@ const vnode_getPropStartIndex = (vnode) => {
     }
     throw qError(26 /* QError.invalidVNodeType */, [type]);
 };
+/** @internal */
 const vnode_getProps = (vnode) => {
     return vnode[vnode_getPropStartIndex(vnode)];
 };
 const vnode_getParent = (vnode) => {
     return vnode[1 /* VNodeProps.parent */] || null;
 };
+const vnode_isDescendantOf = (vnode, ancestor, rootVNode) => {
+    let parent = vnode_getParentOrProjectionParent(vnode, rootVNode);
+    while (parent) {
+        if (parent === ancestor) {
+            return true;
+        }
+        parent = vnode_getParentOrProjectionParent(parent, rootVNode);
+    }
+    return false;
+};
+const vnode_getParentOrProjectionParent = (vnode, rootVNode) => {
+    if (rootVNode) {
+        const parentProjection = vnode_getProp(vnode, QSlotParent, (id) => vnode_locate(rootVNode, id));
+        if (parentProjection) {
+            // This is a projection, so we need to check the parent of the projection
+            return parentProjection;
+        }
+    }
+    return vnode_getParent(vnode);
+};
 const vnode_getNode = (vnode) => {
     if (vnode === null || vnode_isVirtualVNode(vnode)) {
         return null;
@@ -8026,21 +8720,19 @@ function materializeFromVNodeData(vParent, vData, element, child) {
     let textIdx = 0;
     let combinedText = null;
     let container = null;
-    processVNodeData(vData, (peek, consumeValue, consume, nextToConsumeIdx) => {
+    processVNodeData(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
         if (isNumber(peek())) {
             // Element counts get encoded as numbers.
-            while (!isElement(child)) {
+            while (!isElement(child) ||
+                // We pretend that style element's don't exist as they can get moved out.
+                // skip over style elements, as those need to be moved to the head
+                // and are not included in the counts.
+                isQStyleElement(child)) {
                 child = fastNextSibling(child);
                 if (!child) {
                     throw qError(27 /* QError.materializeVNodeDataError */, [vData, peek(), nextToConsumeIdx]);
                 }
             }
-            // We pretend that style element's don't exist as they can get moved out.
-            while (isQStyleElement(child)) {
-                // skip over style elements, as those need to be moved to the head
-                // and are not included in the counts.
-                child = fastNextSibling(child);
-            }
             combinedText = null;
             previousTextNode = null;
             let value = 0;
@@ -8072,7 +8764,17 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
         }
         else if (peek() === VNodeDataChar.KEY) {
-            vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
+            const isEscapedValue = getChar(nextToConsumeIdx + 1) === VNodeDataChar.SEPARATOR;
+            let value;
+            if (isEscapedValue) {
+                consume();
+                value = decodeURI(consumeValue());
+                consume();
+            }
+            else {
+                value = consumeValue();
+            }
+            vnode_setAttr(null, vParent, ELEMENT_KEY, value);
         }
         else if (peek() === VNodeDataChar.SEQ) {
             vnode_setAttr(null, vParent, ELEMENT_SEQ, consumeValue());
@@ -8118,6 +8820,10 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             vnode_setAttr(null, vParent, QSlot, consumeValue());
         }
         else {
+            // skip over style elements in front of text nodes, where text node is the first child (except the style node)
+            while (isQStyleElement(child)) {
+                child = fastNextSibling(child);
+            }
             const textNode = child && fastNodeType(child) === /* Node.TEXT_NODE */ 3 ? child : null;
             // must be alphanumeric
             if (combinedText === null) {
@@ -8212,9 +8918,11 @@ const VNodeArray = class VNode extends Array {
 };
 
 /** There's [documentation](./serialization.md) */
+/** Arrays/Objects are special-cased so their identifiers is a single digit. */
+const needsInflation = (typeId) => typeId >= 14 /* TypeIds.Error */ || typeId === 4 /* TypeIds.Array */ || typeId === 5 /* TypeIds.Object */;
 const deserializedProxyMap = new WeakMap();
 const isDeserializerProxy = (value) => {
-    return typeof value === 'object' && value !== null && SERIALIZER_PROXY_UNWRAP in value;
+    return isObject(value) && SERIALIZER_PROXY_UNWRAP in value;
 };
 const SERIALIZER_PROXY_UNWRAP = Symbol('UNWRAP');
 /** Call this on the serialized root state */
@@ -8259,19 +8967,19 @@ class DeserializationHandler {
         const idx = i * 2;
         const typeId = this.$data$[idx];
         const value = this.$data$[idx + 1];
-        if (typeId === undefined) {
+        if (typeId === 0 /* TypeIds.Plain */) {
             // The value is already cached
             return value;
         }
         const container = this.$container$;
-        let propValue = allocate(container, typeId, value);
-        /** We stored the reference, so now we can inflate, allowing cycles. */
-        if (typeId >= 14 /* TypeIds.Error */) {
-            propValue = inflate(container, propValue, typeId, value);
-        }
+        const propValue = allocate(container, typeId, value);
         Reflect.set(target, property, propValue);
-        this.$data$[idx] = undefined;
+        this.$data$[idx] = 0 /* TypeIds.Plain */;
         this.$data$[idx + 1] = propValue;
+        /** We stored the reference, so now we can inflate, allowing cycles */
+        if (needsInflation(typeId)) {
+            inflate(container, propValue, typeId, value);
+        }
         return propValue;
     }
     has(target, property) {
@@ -8290,7 +8998,7 @@ class DeserializationHandler {
             return out;
         }
         const idx = i * 2;
-        this.$data$[idx] = undefined;
+        this.$data$[idx] = 0 /* TypeIds.Plain */;
         this.$data$[idx + 1] = value;
         return true;
     }
@@ -8308,51 +9016,33 @@ const _eagerDeserializeArray = (container, data) => {
 };
 const resolvers = new WeakMap();
 const inflate = (container, target, typeId, data) => {
-    if (typeId === undefined) {
+    if (typeId === 0 /* TypeIds.Plain */) {
         // Already processed
-        return target;
+        return;
     }
-    // restore the complex data, except for plain objects
-    if (typeId !== 15 /* TypeIds.Object */ && Array.isArray(data)) {
+    // Restore the complex data
+    if (Array.isArray(data)) {
         data = _eagerDeserializeArray(container, data);
     }
     switch (typeId) {
-        case 15 /* TypeIds.Object */:
-            // We use getters for making complex values lazy
-            for (let i = 0; i < data.length; i += 4) {
-                const key = deserializeData(container, data[i], data[i + 1]);
-                const valType = data[i + 2];
-                const valData = data[i + 3];
-                if (valType === 0 /* TypeIds.RootRef */ || valType >= 14 /* TypeIds.Error */) {
-                    Object.defineProperty(target, key, {
-                        get() {
-                            const value = deserializeData(container, valType, valData);
-                            // after first deserialize, we can replace the Object.defineProperty with the value
-                            target[key] = value;
-                            return value;
-                        },
-                        set(value) {
-                            Object.defineProperty(target, key, {
-                                value,
-                                writable: true,
-                                enumerable: true,
-                                configurable: true,
-                            });
-                        },
-                        enumerable: true,
-                        configurable: true,
-                    });
-                }
-                else {
-                    target[key] = deserializeData(container, valType, valData);
-                }
+        case 4 /* TypeIds.Array */:
+            for (let i = 0; i < target.length; i++) {
+                // read the value to trigger lazy deserialization
+                target[i];
+            }
+            break;
+        case 5 /* TypeIds.Object */:
+            for (let i = 0; i < data.length; i += 2) {
+                const key = data[i];
+                const value = data[i + 1];
+                target[key] = value;
             }
             break;
-        case 20 /* TypeIds.QRL */:
-        case 21 /* TypeIds.PreloadQRL */:
+        case 19 /* TypeIds.QRL */:
+        case 20 /* TypeIds.PreloadQRL */:
             inflateQRL(container, target);
             break;
-        case 22 /* TypeIds.Task */:
+        case 21 /* TypeIds.Task */:
             const task = target;
             const v = data;
             task.$qrl$ = inflateQRL(container, v[0]);
@@ -8362,7 +9052,7 @@ const inflate = (container, target, typeId, data) => {
             task[_EFFECT_BACK_REF] = v[4];
             task.$state$ = v[5];
             break;
-        case 23 /* TypeIds.Resource */:
+        case 22 /* TypeIds.Resource */:
             const [resolved, result, effects] = data;
             const resource = target;
             if (resolved) {
@@ -8377,26 +9067,31 @@ const inflate = (container, target, typeId, data) => {
             }
             getStoreHandler(target).$effects$ = effects;
             break;
-        case 24 /* TypeIds.Component */:
+        case 23 /* TypeIds.Component */:
             target[SERIALIZABLE_STATE][0] = data[0];
             break;
-        case 30 /* TypeIds.Store */:
-        case 31 /* TypeIds.StoreArray */: {
-            const [value, flags, effects] = data;
-            const store = getOrCreateStore(value, flags, container);
-            const storeHandler = getStoreHandler(store);
+        case 29 /* TypeIds.Store */: {
+            /**
+             * Note that cycles between stores and their targets can cause this inflation to happen on
+             * already inflated stores, but that's ok because the flags and effects are still the same.
+             *
+             * Also note that we don't do anything with the innerstores we added during serialization,
+             * because they are already inflated in the first step of inflate().
+             */
+            const [, flags, effects] = data;
+            const storeHandler = getStoreHandler(target);
+            storeHandler.$flags$ = flags;
             storeHandler.$effects$ = effects;
-            target = store;
             break;
         }
-        case 25 /* TypeIds.Signal */: {
+        case 24 /* TypeIds.Signal */: {
             const signal = target;
             const d = data;
             signal.$untrackedValue$ = d[0];
             signal.$effects$ = new Set(d.slice(1));
             break;
         }
-        case 26 /* TypeIds.WrappedSignal */: {
+        case 25 /* TypeIds.WrappedSignal */: {
             const signal = target;
             const d = data;
             signal.$func$ = container.getSyncFn(d[0]);
@@ -8409,7 +9104,7 @@ const inflate = (container, target, typeId, data) => {
             signal.$effects$ = new Set(d.slice(5));
             break;
         }
-        case 28 /* TypeIds.AsyncComputedSignal */: {
+        case 27 /* TypeIds.AsyncComputedSignal */: {
             const asyncComputed = target;
             const d = data;
             asyncComputed.$computeQrl$ = d[0];
@@ -8422,14 +9117,12 @@ const inflate = (container, target, typeId, data) => {
             if (hasValue) {
                 asyncComputed.$untrackedValue$ = d[6];
             }
-            else {
-                asyncComputed.$flags$ |= 1 /* SignalFlags.INVALID */;
-            }
+            asyncComputed.$flags$ |= 1 /* SignalFlags.INVALID */;
             break;
         }
         // Inflating a SerializerSignal is the same as inflating a ComputedSignal
-        case 29 /* TypeIds.SerializerSignal */:
-        case 27 /* TypeIds.ComputedSignal */: {
+        case 28 /* TypeIds.SerializerSignal */:
+        case 26 /* TypeIds.ComputedSignal */: {
             const computed = target;
             const d = data;
             computed.$computeQrl$ = d[0];
@@ -8438,7 +9131,7 @@ const inflate = (container, target, typeId, data) => {
             if (hasValue) {
                 computed.$untrackedValue$ = d[2];
                 // The serialized signal is always invalid so it can recreate the custom object
-                if (typeId === 29 /* TypeIds.SerializerSignal */) {
+                if (typeId === 28 /* TypeIds.SerializerSignal */) {
                     computed.$flags$ |= 1 /* SignalFlags.INVALID */;
                 }
             }
@@ -8452,7 +9145,7 @@ const inflate = (container, target, typeId, data) => {
                  */
                 // try to download qrl in this tick
                 computed.$computeQrl$.resolve();
-                container.$scheduler$?.(1 /* ChoreType.QRL_RESOLVE */, null, computed.$computeQrl$);
+                container.$scheduler$(1 /* ChoreType.QRL_RESOLVE */, null, computed.$computeQrl$);
             }
             break;
         }
@@ -8464,7 +9157,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 32 /* TypeIds.FormData */: {
+        case 30 /* TypeIds.FormData */: {
             const formData = target;
             const d = data;
             for (let i = 0; i < d.length; i++) {
@@ -8472,7 +9165,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 33 /* TypeIds.JSXNode */: {
+        case 31 /* TypeIds.JSXNode */: {
             const jsx = target;
             const [type, varProps, constProps, children, flags, key] = data;
             jsx.type = type;
@@ -8483,7 +9176,7 @@ const inflate = (container, target, typeId, data) => {
             jsx.key = key;
             break;
         }
-        case 17 /* TypeIds.Set */: {
+        case 16 /* TypeIds.Set */: {
             const set = target;
             const d = data;
             for (let i = 0; i < d.length; i++) {
@@ -8491,7 +9184,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 18 /* TypeIds.Map */: {
+        case 17 /* TypeIds.Map */: {
             const map = target;
             const d = data;
             for (let i = 0; i < d.length; i++) {
@@ -8499,7 +9192,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 16 /* TypeIds.Promise */: {
+        case 15 /* TypeIds.Promise */: {
             const promise = target;
             const [resolved, result] = data;
             const [resolve, reject] = resolvers.get(promise);
@@ -8511,7 +9204,7 @@ const inflate = (container, target, typeId, data) => {
             }
             break;
         }
-        case 19 /* TypeIds.Uint8Array */:
+        case 18 /* TypeIds.Uint8Array */:
             const bytes = target;
             const buf = atob(data);
             let i = 0;
@@ -8519,12 +9212,12 @@ const inflate = (container, target, typeId, data) => {
                 bytes[i++] = s.charCodeAt(0);
             }
             break;
-        case 34 /* TypeIds.PropsProxy */:
+        case 32 /* TypeIds.PropsProxy */:
             const propsProxy = target;
             propsProxy[_VAR_PROPS] = data === 0 ? {} : data[0];
             propsProxy[_CONST_PROPS] = data[1];
             break;
-        case 35 /* TypeIds.EffectData */: {
+        case 33 /* TypeIds.SubscriptionData */: {
             const effectData = target;
             effectData.data.$scopedStyleIdPrefix$ = data[0];
             effectData.data.$isConst$ = data[1];
@@ -8533,7 +9226,6 @@ const inflate = (container, target, typeId, data) => {
         default:
             throw qError(16 /* QError.serializeErrorNotImplemented */, [typeId]);
     }
-    return target;
 };
 const _constants = [
     undefined,
@@ -8545,6 +9237,7 @@ const _constants = [
     EMPTY_OBJ,
     NEEDS_COMPUTATION,
     STORE_ALL_PROPS,
+    _UNINITIALIZED,
     Slot,
     Fragment,
     NaN,
@@ -8564,6 +9257,7 @@ const _constantNames = [
     'EMPTY_OBJ',
     'NEEDS_COMPUTATION',
     'STORE_ALL_PROPS',
+    '_UNINITIALIZED',
     'Slot',
     'Fragment',
     'NaN',
@@ -8574,84 +9268,96 @@ const _constantNames = [
     'MIN_SAFE_INTEGER',
 ];
 const allocate = (container, typeId, value) => {
-    if (value === undefined) {
-        // When a value was already processed, the result is stored in type
-        return typeId;
+    if (typeId === 0 /* TypeIds.Plain */) {
+        return value;
     }
     switch (typeId) {
-        case 0 /* TypeIds.RootRef */:
+        case 1 /* TypeIds.RootRef */:
             return container.$getObjectById$(value);
-        case 1 /* TypeIds.ForwardRef */:
+        case 2 /* TypeIds.ForwardRef */:
             if (!container.$forwardRefs$) {
                 throw qError(18 /* QError.serializeErrorCannotAllocate */, ['forward ref']);
             }
-            return container.$getObjectById$(container.$forwardRefs$[value]);
-        case 2 /* TypeIds.ForwardRefs */:
+            const rootRef = container.$forwardRefs$[value];
+            if (rootRef === -1) {
+                return _UNINITIALIZED;
+            }
+            else {
+                return container.$getObjectById$(rootRef);
+            }
+        case 13 /* TypeIds.ForwardRefs */:
             return value;
         case 3 /* TypeIds.Constant */:
             return _constants[value];
-        case 4 /* TypeIds.Number */:
-            return value;
-        case 6 /* TypeIds.Array */:
+        case 4 /* TypeIds.Array */:
+            // Wrap while inflating so we can handle cyclic references
             return wrapDeserializerProxy(container, value);
-        case 15 /* TypeIds.Object */:
+        case 5 /* TypeIds.Object */:
             return {};
-        case 20 /* TypeIds.QRL */:
-        case 21 /* TypeIds.PreloadQRL */:
+        case 19 /* TypeIds.QRL */:
+        case 20 /* TypeIds.PreloadQRL */:
             const qrl = typeof value === 'number'
                 ? // root reference
                     container.$getObjectById$(value)
                 : value;
             return parseQRL(qrl);
-        case 22 /* TypeIds.Task */:
+        case 21 /* TypeIds.Task */:
             return new Task(-1, -1, null, null, null, null);
-        case 23 /* TypeIds.Resource */: {
+        case 22 /* TypeIds.Resource */: {
             const res = createResourceReturn(container, 
             // we don't care about the timeout value
             undefined, undefined);
             res.loading = false;
             return res;
         }
-        case 7 /* TypeIds.URL */:
+        case 6 /* TypeIds.URL */:
             return new URL(value);
-        case 8 /* TypeIds.Date */:
+        case 7 /* TypeIds.Date */:
             return new Date(value);
-        case 9 /* TypeIds.Regex */:
+        case 8 /* TypeIds.Regex */:
             const idx = value.lastIndexOf('/');
             return new RegExp(value.slice(1, idx), value.slice(idx + 1));
         case 14 /* TypeIds.Error */:
             return new Error();
-        case 24 /* TypeIds.Component */:
+        case 23 /* TypeIds.Component */:
             return componentQrl(null);
-        case 25 /* TypeIds.Signal */:
+        case 24 /* TypeIds.Signal */:
             return new SignalImpl(container, 0);
-        case 26 /* TypeIds.WrappedSignal */:
+        case 25 /* TypeIds.WrappedSignal */:
             return new WrappedSignalImpl(container, null, null, null);
-        case 27 /* TypeIds.ComputedSignal */:
+        case 26 /* TypeIds.ComputedSignal */:
             return new ComputedSignalImpl(container, null);
-        case 28 /* TypeIds.AsyncComputedSignal */:
+        case 27 /* TypeIds.AsyncComputedSignal */:
             return new AsyncComputedSignalImpl(container, null);
-        case 29 /* TypeIds.SerializerSignal */:
+        case 28 /* TypeIds.SerializerSignal */:
             return new SerializerSignalImpl(container, null);
-        case 30 /* TypeIds.Store */:
-        case 31 /* TypeIds.StoreArray */:
-            // ignore allocate, we need to assign target while creating store
-            return null;
-        case 13 /* TypeIds.URLSearchParams */:
+        case 29 /* TypeIds.Store */:
+            /**
+             * We have a problem here: In theory, both the store and the target need to be present at
+             * allocate time before inflation can happen. However, that makes the code really complex.
+             * Instead, we deserialize the target here, which will already allocate and inflate this store
+             * if there is a cycle (because the original allocation for the store didn't complete yet).
+             * Because we have a map of target -> store, we will reuse the same store instance after
+             * target deserialization. So in that case, we will be running inflation twice on the same
+             * store, but that is not a problem, very little overhead and the code is way simpler.
+             */
+            const storeValue = deserializeData(container, value[0], value[1]);
+            value[0] = 0 /* TypeIds.Plain */;
+            value[1] = storeValue;
+            return getOrCreateStore(storeValue, 0 /* StoreFlags.NONE */, container);
+        case 12 /* TypeIds.URLSearchParams */:
             return new URLSearchParams(value);
-        case 32 /* TypeIds.FormData */:
+        case 30 /* TypeIds.FormData */:
             return new FormData();
-        case 33 /* TypeIds.JSXNode */:
+        case 31 /* TypeIds.JSXNode */:
             return new JSXNodeImpl(null, null, null, null, -1, null);
-        case 12 /* TypeIds.BigInt */:
+        case 11 /* TypeIds.BigInt */:
             return BigInt(value);
-        case 17 /* TypeIds.Set */:
+        case 16 /* TypeIds.Set */:
             return new Set();
-        case 18 /* TypeIds.Map */:
+        case 17 /* TypeIds.Map */:
             return new Map();
-        case 5 /* TypeIds.String */:
-            return value;
-        case 16 /* TypeIds.Promise */:
+        case 15 /* TypeIds.Promise */:
             let resolve;
             let reject;
             const promise = new Promise((res, rej) => {
@@ -8662,25 +9368,51 @@ const allocate = (container, typeId, value) => {
             // Don't leave unhandled promise rejections
             promise.catch(() => { });
             return promise;
-        case 19 /* TypeIds.Uint8Array */:
+        case 18 /* TypeIds.Uint8Array */:
             const encodedLength = value.length;
             const blocks = encodedLength >>> 2;
             const rest = encodedLength & 3;
             const decodedLength = blocks * 3 + (rest ? rest - 1 : 0);
             return new Uint8Array(decodedLength);
-        case 34 /* TypeIds.PropsProxy */:
+        case 32 /* TypeIds.PropsProxy */:
             return createPropsProxy(null, null);
-        case 10 /* TypeIds.VNode */:
+        case 9 /* TypeIds.VNode */:
             return retrieveVNodeOrDocument(container, value);
-        case 11 /* TypeIds.RefVNode */:
+        case 10 /* TypeIds.RefVNode */:
             const vNode = retrieveVNodeOrDocument(container, value);
             if (vnode_isVNode(vNode)) {
+                /**
+                 * If we have a ref, we need to ensure the element is materialized.
+                 *
+                 * Example:
+                 *
+                 * ```
+                 * const Cmp = component$(() => {
+                 *       const element = useSignal<HTMLDivElement>();
+                 *
+                 *       useVisibleTask$(() => {
+                 *         element.value!.innerHTML = 'I am the innerHTML content!';
+                 *       });
+                 *
+                 *       return (
+                 *          <div ref={element} />
+                 *       );
+                 * });
+                 * ```
+                 *
+                 * If we don't materialize early element with ref property, and change element innerHTML it
+                 * will be applied to a vnode tree during the lazy materialization, and it is wrong.
+                 *
+                 * Next if we rerender component it will remove applied innerHTML, because the system thinks
+                 * it is a part of the vnode tree.
+                 */
+                ensureMaterialized(vNode);
                 return vnode_getNode(vNode);
             }
             else {
                 throw qError(17 /* QError.serializeErrorExpectedVNode */, [typeof vNode]);
             }
-        case 35 /* TypeIds.EffectData */:
+        case 33 /* TypeIds.SubscriptionData */:
             return new SubscriptionData({});
         default:
             throw qError(18 /* QError.serializeErrorCannotAllocate */, [typeId]);
@@ -8742,7 +9474,7 @@ DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, write
         };
     }
     const seenObjsMap = new Map();
-    const rootsPathMap = new Map();
+    const objectPathStringCache = new Map();
     const syncFnMap = new Map();
     const syncFns = [];
     const roots = [];
@@ -8751,7 +9483,7 @@ DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, write
         return seenObjsMap.set(obj, { $parent$: parent, $index$: index, $rootIndex$: -1 });
     };
     const $addRootPath$ = (obj) => {
-        const rootPath = rootsPathMap.get(obj);
+        const rootPath = objectPathStringCache.get(obj);
         if (rootPath) {
             return rootPath;
         }
@@ -8770,7 +9502,7 @@ DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, write
             current = seenObjsMap.get(current.$parent$);
         }
         const pathStr = path.length > 1 ? path.join(' ') : path.length ? path[0] : seen.$index$;
-        rootsPathMap.set(obj, pathStr);
+        objectPathStringCache.set(obj, pathStr);
         return pathStr;
     };
     const $addRoot$ = (obj, parent = null) => {
@@ -8837,7 +9569,7 @@ DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, write
         $storeProxyMap$: storeProxyMap,
         $getProp$: getProp,
         $setProp$: setProp,
-        $pathMap$: rootsPathMap,
+        $objectPathStringCache$: objectPathStringCache,
     };
 };
 function $discoverRoots$(serializationContext, obj, parent, index) {
@@ -8861,7 +9593,8 @@ const discoverValuesForVNodeData = (vnodeData, callback) => {
             for (let i = 1; i < value.length; i += 2) {
                 const keyValue = value[i - 1];
                 const attrValue = value[i];
-                if (typeof attrValue === 'string' ||
+                if (attrValue == null ||
+                    typeof attrValue === 'string' ||
                     // skip empty props
                     (keyValue === ELEMENT_PROPS &&
                         Object.keys(attrValue).length === 0)) {
@@ -8886,6 +9619,14 @@ class PromiseResult {
         this.$qrl$ = $qrl$;
     }
 }
+class SerializationWeakRef {
+    $obj$;
+    constructor($obj$) {
+        this.$obj$ = $obj$;
+    }
+}
+/** @internal */
+const _serializationWeakRef = (obj) => new SerializationWeakRef(obj);
 /**
  * Format:
  *
@@ -8896,12 +9637,14 @@ class PromiseResult {
  * - Therefore root indexes need to be doubled to get the actual index.
  */
 async function serialize(serializationContext) {
-    const { $writer$, $isSsrNode$, $isDomRef$, $storeProxyMap$, $addRoot$, $pathMap$, $wasSeen$ } = serializationContext;
+    const { $writer$, $isSsrNode$, $isDomRef$, $storeProxyMap$, $addRoot$, $objectPathStringCache$, $wasSeen$, } = serializationContext;
     let depth = 0;
+    let rootIdx = 0;
     const forwardRefs = [];
     let forwardRefsId = 0;
     const promises = new Set();
     const preloadQrls = new Set();
+    const s11nWeakRefs = new Map();
     let parent = null;
     const isRootObject = () => depth === 0;
     const outputArray = (value, writeFn) => {
@@ -8946,19 +9689,41 @@ async function serialize(serializationContext) {
     };
     const addPreloadQrl = (qrl) => {
         preloadQrls.add(qrl);
-        serializationContext.$addRoot$(qrl, null);
+        serializationContext.$addRoot$(qrl);
     };
-    const outputRootRef = (value, rootDepth = 0) => {
+    const outputAsRootRef = (value, rootDepth = 0) => {
         const seen = $wasSeen$(value);
-        const rootRefPath = $pathMap$.get(value);
+        const rootRefPath = $objectPathStringCache$.get(value);
+        // Objects are the only way to create circular dependencies.
+        // So the first thing to to is to see if we have a circular dependency.
+        // (NOTE: For root objects we need to serialize them regardless if we have seen
+        //        them before, otherwise the root object reference will point to itself.)
+        // Also note that depth will be 1 for objects in root
         if (rootDepth === depth && seen && seen.$parent$ !== null && rootRefPath) {
-            output(0 /* TypeIds.RootRef */, rootRefPath);
+            output(1 /* TypeIds.RootRef */, rootRefPath);
             return true;
         }
         else if (depth > rootDepth && seen && seen.$rootIndex$ !== -1) {
-            output(0 /* TypeIds.RootRef */, seen.$rootIndex$);
+            // We have seen this object before, so we can serialize it as a reference.
+            // Otherwise serialize as normal
+            output(1 /* TypeIds.RootRef */, seen.$rootIndex$);
             return true;
         }
+        else if (s11nWeakRefs.has(value)) {
+            const forwardRefId = s11nWeakRefs.get(value);
+            // We see the object again, we must now make it a root and update the forward ref
+            if (rootDepth === depth) {
+                // It's already a root
+                forwardRefs[forwardRefId] = rootIdx;
+            }
+            else {
+                // ref
+                const rootRef = $addRoot$(value);
+                output(1 /* TypeIds.RootRef */, rootRef);
+                forwardRefs[forwardRefId] = rootRef;
+                return true;
+            }
+        }
         return false;
     };
     const writeValue = (value) => {
@@ -8966,22 +9731,22 @@ async function serialize(serializationContext) {
             output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
         }
         else if (typeof value === 'bigint') {
-            output(12 /* TypeIds.BigInt */, value.toString());
+            output(11 /* TypeIds.BigInt */, value.toString());
         }
         else if (typeof value === 'boolean') {
             output(3 /* TypeIds.Constant */, value ? 2 /* Constants.True */ : 3 /* Constants.False */);
         }
         else if (typeof value === 'function') {
             if (value === Slot) {
-                output(3 /* TypeIds.Constant */, 9 /* Constants.Slot */);
+                output(3 /* TypeIds.Constant */, 10 /* Constants.Slot */);
             }
             else if (value === Fragment) {
-                output(3 /* TypeIds.Constant */, 10 /* Constants.Fragment */);
+                output(3 /* TypeIds.Constant */, 11 /* Constants.Fragment */);
             }
             else if (isQrl(value)) {
-                if (!outputRootRef(value)) {
+                if (!outputAsRootRef(value)) {
                     const qrl = qrlToString(serializationContext, value);
-                    const type = preloadQrls.has(value) ? 21 /* TypeIds.PreloadQRL */ : 20 /* TypeIds.QRL */;
+                    const type = preloadQrls.has(value) ? 20 /* TypeIds.PreloadQRL */ : 19 /* TypeIds.QRL */;
                     if (isRootObject()) {
                         output(type, qrl);
                     }
@@ -8994,7 +9759,7 @@ async function serialize(serializationContext) {
             else if (isQwikComponent(value)) {
                 const [qrl] = value[SERIALIZABLE_STATE];
                 serializationContext.$renderSymbols$.add(qrl.$symbol$);
-                output(24 /* TypeIds.Component */, [qrl]);
+                output(23 /* TypeIds.Component */, [qrl]);
             }
             else {
                 throw qError(34 /* QError.serializeErrorCannotSerializeFunction */, [value.toString()]);
@@ -9002,22 +9767,22 @@ async function serialize(serializationContext) {
         }
         else if (typeof value === 'number') {
             if (Number.isNaN(value)) {
-                output(3 /* TypeIds.Constant */, 11 /* Constants.NaN */);
+                output(3 /* TypeIds.Constant */, 12 /* Constants.NaN */);
             }
             else if (!Number.isFinite(value)) {
-                output(3 /* TypeIds.Constant */, value < 0 ? 13 /* Constants.NegativeInfinity */ : 12 /* Constants.PositiveInfinity */);
+                output(3 /* TypeIds.Constant */, value < 0 ? 14 /* Constants.NegativeInfinity */ : 13 /* Constants.PositiveInfinity */);
             }
             else if (value === Number.MAX_SAFE_INTEGER) {
-                output(3 /* TypeIds.Constant */, 14 /* Constants.MaxSafeInt */);
+                output(3 /* TypeIds.Constant */, 15 /* Constants.MaxSafeInt */);
             }
             else if (value === Number.MAX_SAFE_INTEGER - 1) {
-                output(3 /* TypeIds.Constant */, 15 /* Constants.AlmostMaxSafeInt */);
+                output(3 /* TypeIds.Constant */, 16 /* Constants.AlmostMaxSafeInt */);
             }
             else if (value === Number.MIN_SAFE_INTEGER) {
-                output(3 /* TypeIds.Constant */, 16 /* Constants.MinSafeInt */);
+                output(3 /* TypeIds.Constant */, 17 /* Constants.MinSafeInt */);
             }
             else {
-                output(4 /* TypeIds.Number */, value);
+                output(0 /* TypeIds.Plain */, value);
             }
         }
         else if (typeof value === 'object') {
@@ -9044,8 +9809,8 @@ async function serialize(serializationContext) {
                 output(3 /* TypeIds.Constant */, 4 /* Constants.EmptyString */);
             }
             else {
-                if (!outputRootRef(value)) {
-                    output(5 /* TypeIds.String */, value);
+                if (!outputAsRootRef(value)) {
+                    output(0 /* TypeIds.Plain */, value);
                 }
             }
         }
@@ -9058,6 +9823,9 @@ async function serialize(serializationContext) {
         else if (value === STORE_ALL_PROPS) {
             output(3 /* TypeIds.Constant */, 8 /* Constants.STORE_ALL_PROPS */);
         }
+        else if (value === _UNINITIALIZED) {
+            output(3 /* TypeIds.Constant */, 9 /* Constants.UNINITIALIZED */);
+        }
         else {
             throw qError(20 /* QError.serializeErrorUnknownType */, [typeof value]);
         }
@@ -9067,14 +9835,11 @@ async function serialize(serializationContext) {
          * The object writer outputs an array object (without type prefix) and this increases the depth
          * for the objects within (depth 1).
          */
-        // Objects are the only way to create circular dependencies.
-        // So the first thing to to is to see if we have a circular dependency.
-        // (NOTE: For root objects we need to serialize them regardless if we have seen
-        //        them before, otherwise the root object reference will point to itself.)
-        // Also note that depth will be 1 for objects in root
-        if (outputRootRef(value, 1)) {
+        if (outputAsRootRef(value, 1)) {
             return;
         }
+        // handle custom serializers
+        // add to the seen map
         if (isPropsProxy(value)) {
             const varProps = value[_VAR_PROPS];
             const constProps = value[_CONST_PROPS];
@@ -9083,10 +9848,10 @@ async function serialize(serializationContext) {
                 : Object.keys(varProps).length
                     ? [varProps]
                     : 0;
-            output(34 /* TypeIds.PropsProxy */, out);
+            output(32 /* TypeIds.PropsProxy */, out);
         }
         else if (value instanceof SubscriptionData) {
-            output(35 /* TypeIds.EffectData */, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
+            output(33 /* TypeIds.SubscriptionData */, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
         }
         else if (isStore(value)) {
             if (isResource(value)) {
@@ -9094,38 +9859,38 @@ async function serialize(serializationContext) {
                 serializationContext.$resources$.add(value);
                 // TODO the effects include the resource return which has duplicate data
                 const forwardRefId = $resolvePromise$(value.value, $addRoot$, (resolved, resolvedValue) => {
-                    return new PromiseResult(23 /* TypeIds.Resource */, resolved, resolvedValue, getStoreHandler(value).$effects$);
+                    return new PromiseResult(22 /* TypeIds.Resource */, resolved, resolvedValue, getStoreHandler(value).$effects$);
                 });
-                output(1 /* TypeIds.ForwardRef */, forwardRefId);
+                output(2 /* TypeIds.ForwardRef */, forwardRefId);
             }
             else {
                 const storeHandler = getStoreHandler(value);
                 const storeTarget = getStoreTarget(value);
                 const flags = storeHandler.$flags$;
                 const effects = storeHandler.$effects$;
+                // We need to retain the nested stores too, they won't be found from the target
                 const innerStores = [];
                 for (const prop in storeTarget) {
                     const propValue = storeTarget[prop];
-                    if ($storeProxyMap$.has(propValue)) {
-                        const innerStore = $storeProxyMap$.get(propValue);
+                    const innerStore = $storeProxyMap$.get(propValue);
+                    if (innerStore) {
                         innerStores.push(innerStore);
-                        serializationContext.$addRoot$(innerStore);
                     }
                 }
                 const out = [storeTarget, flags, effects, ...innerStores];
                 while (out[out.length - 1] == null) {
                     out.pop();
                 }
-                output(Array.isArray(storeTarget) ? 31 /* TypeIds.StoreArray */ : 30 /* TypeIds.Store */, out);
+                output(29 /* TypeIds.Store */, out);
             }
         }
         else if (isSerializerObj(value)) {
             const result = value[SerializerSymbol](value);
             if (isPromise(result)) {
                 const forwardRef = $resolvePromise$(result, $addRoot$, (resolved, resolvedValue) => {
-                    return new PromiseResult(29 /* TypeIds.SerializerSignal */, resolved, resolvedValue, null, null);
+                    return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, null, null);
                 });
-                output(1 /* TypeIds.ForwardRef */, forwardRef);
+                output(2 /* TypeIds.ForwardRef */, forwardRef);
             }
             else {
                 depth--;
@@ -9135,7 +9900,7 @@ async function serialize(serializationContext) {
         }
         else if (isObjectLiteral(value)) {
             if (Array.isArray(value)) {
-                output(6 /* TypeIds.Array */, value);
+                output(4 /* TypeIds.Array */, value);
             }
             else {
                 const out = [];
@@ -9146,32 +9911,24 @@ async function serialize(serializationContext) {
                     }
                 }
                 // TODO if !out.length, output 0 and restore as {}
-                output(15 /* TypeIds.Object */, out);
+                output(5 /* TypeIds.Object */, out);
             }
         }
         else if ($isDomRef$(value)) {
             value.$ssrNode$.vnodeData[0] |= 16 /* VNodeDataFlag.SERIALIZE */;
-            output(11 /* TypeIds.RefVNode */, value.$ssrNode$.id);
+            output(10 /* TypeIds.RefVNode */, value.$ssrNode$.id);
         }
         else if (value instanceof SignalImpl) {
             if (value instanceof SerializerSignalImpl) {
                 addPreloadQrl(value.$computeQrl$);
                 const forwardRefId = $resolvePromise$($getCustomSerializerPromise$(value, value.$untrackedValue$), $addRoot$, (resolved, resolvedValue) => {
-                    return new PromiseResult(29 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
+                    return new PromiseResult(28 /* TypeIds.SerializerSignal */, resolved, resolvedValue, value.$effects$, value.$computeQrl$);
                 });
-                output(1 /* TypeIds.ForwardRef */, forwardRefId);
+                output(2 /* TypeIds.ForwardRef */, forwardRefId);
                 return;
             }
-            /**
-             * Special case: when a Signal value is an SSRNode, it always needs to be a DOM ref instead.
-             * It can never be meant to become a vNode, because vNodes are internal only.
-             */
-            const v = value instanceof ComputedSignalImpl &&
-                (value.$flags$ & 1 /* SignalFlags.INVALID */ || fastSkipSerialize(value.$untrackedValue$))
-                ? NEEDS_COMPUTATION
-                : value.$untrackedValue$;
             if (value instanceof WrappedSignalImpl) {
-                output(26 /* TypeIds.WrappedSignal */, [
+                output(25 /* TypeIds.WrappedSignal */, [
                     ...serializeWrappingFn(serializationContext, value),
                     filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                     value.$flags$,
@@ -9179,45 +9936,44 @@ async function serialize(serializationContext) {
                     ...(value.$effects$ || []),
                 ]);
             }
-            else if (value instanceof AsyncComputedSignalImpl) {
-                addPreloadQrl(value.$computeQrl$);
-                const out = [
-                    value.$computeQrl$,
-                    value.$effects$,
-                    value.$loadingEffects$,
-                    value.$errorEffects$,
-                    value.$untrackedLoading$,
-                    value.$untrackedError$,
-                ];
-                if (v !== NEEDS_COMPUTATION) {
-                    out.push(v);
-                }
-                output(28 /* TypeIds.AsyncComputedSignal */, out);
-            }
             else if (value instanceof ComputedSignalImpl) {
+                let v = value.$untrackedValue$;
+                const shouldAlwaysSerialize = value.$flags$ & 32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
+                const shouldNeverSerialize = value.$flags$ & 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
+                const isInvalid = value.$flags$ & 1 /* SignalFlags.INVALID */;
+                const isSkippable = fastSkipSerialize(value.$untrackedValue$);
+                if (shouldAlwaysSerialize) {
+                    v = value.$untrackedValue$;
+                }
+                else if (shouldNeverSerialize) {
+                    v = NEEDS_COMPUTATION;
+                }
+                else if (isInvalid || isSkippable) {
+                    v = NEEDS_COMPUTATION;
+                }
                 addPreloadQrl(value.$computeQrl$);
-                const out = [
-                    value.$computeQrl$,
-                    // TODO check if we can use domVRef for effects
-                    value.$effects$,
-                ];
+                const out = [value.$computeQrl$, value.$effects$];
+                const isAsync = value instanceof AsyncComputedSignalImpl;
+                if (isAsync) {
+                    out.push(value.$loadingEffects$, value.$errorEffects$, value.$untrackedLoading$, value.$untrackedError$);
+                }
                 if (v !== NEEDS_COMPUTATION) {
                     out.push(v);
                 }
-                output(27 /* TypeIds.ComputedSignal */, out);
+                output(isAsync ? 27 /* TypeIds.AsyncComputedSignal */ : 26 /* TypeIds.ComputedSignal */, out);
             }
             else {
-                output(25 /* TypeIds.Signal */, [v, ...(value.$effects$ || [])]);
+                output(24 /* TypeIds.Signal */, [value.$untrackedValue$, ...(value.$effects$ || [])]);
             }
         }
         else if (value instanceof URL) {
-            output(7 /* TypeIds.URL */, value.href);
+            output(6 /* TypeIds.URL */, value.href);
         }
         else if (value instanceof Date) {
-            output(8 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
+            output(7 /* TypeIds.Date */, Number.isNaN(value.valueOf()) ? '' : value.valueOf());
         }
         else if (value instanceof RegExp) {
-            output(9 /* TypeIds.Regex */, value.toString());
+            output(8 /* TypeIds.Regex */, value.toString());
         }
         else if (value instanceof Error) {
             const out = [value.message];
@@ -9233,7 +9989,7 @@ async function serialize(serializationContext) {
             const rootIndex = $addRoot$(value);
             serializationContext.$setProp$(value, ELEMENT_ID, String(rootIndex));
             // we need to output before the vnode overwrites its values
-            output(10 /* TypeIds.VNode */, value.id);
+            output(9 /* TypeIds.VNode */, value.id);
             const vNodeData = value.vnodeData;
             if (vNodeData) {
                 discoverValuesForVNodeData(vNodeData, (vNodeDataValue) => $addRoot$(vNodeDataValue));
@@ -9269,23 +10025,23 @@ async function serialize(serializationContext) {
                     array.push(key, value.name);
                 }
             });
-            output(32 /* TypeIds.FormData */, array);
+            output(30 /* TypeIds.FormData */, array);
         }
         else if (value instanceof URLSearchParams) {
-            output(13 /* TypeIds.URLSearchParams */, value.toString());
+            output(12 /* TypeIds.URLSearchParams */, value.toString());
         }
         else if (value instanceof Set) {
-            output(17 /* TypeIds.Set */, [...value.values()]);
+            output(16 /* 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);
+            output(17 /* TypeIds.Map */, combined);
         }
         else if (isJSXNode(value)) {
-            output(33 /* TypeIds.JSXNode */, [
+            output(31 /* TypeIds.JSXNode */, [
                 value.type,
                 value.varProps,
                 value.constProps,
@@ -9306,21 +10062,21 @@ async function serialize(serializationContext) {
             while (out[out.length - 1] == null) {
                 out.pop();
             }
-            output(22 /* TypeIds.Task */, out);
+            output(21 /* TypeIds.Task */, out);
         }
         else if (isPromise(value)) {
             const forwardRefId = $resolvePromise$(value, $addRoot$, (resolved, resolvedValue) => {
-                return new PromiseResult(16 /* TypeIds.Promise */, resolved, resolvedValue);
+                return new PromiseResult(15 /* TypeIds.Promise */, resolved, resolvedValue);
             });
-            output(1 /* TypeIds.ForwardRef */, forwardRefId);
+            output(2 /* TypeIds.ForwardRef */, forwardRefId);
         }
         else if (value instanceof PromiseResult) {
-            if (value.$type$ === 23 /* TypeIds.Resource */) {
-                output(23 /* TypeIds.Resource */, [value.$resolved$, value.$value$, value.$effects$]);
+            if (value.$type$ === 22 /* TypeIds.Resource */) {
+                output(22 /* TypeIds.Resource */, [value.$resolved$, value.$value$, value.$effects$]);
             }
-            else if (value.$type$ === 29 /* TypeIds.SerializerSignal */) {
+            else if (value.$type$ === 28 /* TypeIds.SerializerSignal */) {
                 if (value.$qrl$) {
-                    output(29 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
+                    output(28 /* TypeIds.SerializerSignal */, [value.$qrl$, value.$effects$, value.$value$]);
                 }
                 else if (value.$resolved$) {
                     writeValue(value.$value$);
@@ -9331,7 +10087,7 @@ async function serialize(serializationContext) {
                 }
             }
             else {
-                output(16 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
+                output(15 /* TypeIds.Promise */, [value.$resolved$, value.$value$]);
             }
         }
         else if (value instanceof Uint8Array) {
@@ -9340,7 +10096,13 @@ async function serialize(serializationContext) {
                 buf += String.fromCharCode(c);
             }
             const out = btoa(buf).replace(/=+$/, '');
-            output(19 /* TypeIds.Uint8Array */, out);
+            output(18 /* TypeIds.Uint8Array */, out);
+        }
+        else if (value instanceof SerializationWeakRef) {
+            const forwardRefId = forwardRefsId++;
+            s11nWeakRefs.set(value.$obj$, forwardRefId);
+            forwardRefs[forwardRefId] = -1;
+            output(2 /* TypeIds.ForwardRef */, forwardRefId);
         }
         else if (vnode_isVNode(value)) {
             output(3 /* TypeIds.Constant */, 0 /* Constants.Undefined */);
@@ -9365,21 +10127,20 @@ async function serialize(serializationContext) {
     }
     const outputRoots = async () => {
         $writer$.write('[');
-        let lastRootsLength = 0;
         let rootsLength = serializationContext.$roots$.length;
-        while (lastRootsLength < rootsLength || promises.size) {
-            if (lastRootsLength !== 0) {
+        while (rootIdx < rootsLength || promises.size) {
+            if (rootIdx !== 0) {
                 $writer$.write(',');
             }
             let separator = false;
-            for (let i = lastRootsLength; i < rootsLength; i++) {
+            for (; rootIdx < rootsLength; rootIdx++) {
                 if (separator) {
                     $writer$.write(',');
                 }
                 else {
                     separator = true;
                 }
-                writeValue(serializationContext.$roots$[i]);
+                writeValue(serializationContext.$roots$[rootIdx]);
             }
             if (promises.size) {
                 try {
@@ -9389,12 +10150,11 @@ async function serialize(serializationContext) {
                     // ignore rejections, they will be serialized as rejected promises
                 }
             }
-            lastRootsLength = rootsLength;
             rootsLength = serializationContext.$roots$.length;
         }
         if (forwardRefs.length) {
             $writer$.write(',');
-            $writer$.write(2 /* TypeIds.ForwardRefs */ + ',');
+            $writer$.write(13 /* TypeIds.ForwardRefs */ + ',');
             outputArray(forwardRefs, (value) => {
                 $writer$.write(String(value));
             });
@@ -9543,12 +10303,12 @@ function _deserialize(rawStateData, element) {
     return output;
 }
 function deserializeData(container, typeId, value) {
-    if (typeId === undefined) {
+    if (typeId === 0 /* TypeIds.Plain */) {
         return value;
     }
-    let propValue = allocate(container, typeId, value);
-    if (typeId >= 14 /* TypeIds.Error */) {
-        propValue = inflate(container, propValue, typeId, value);
+    const propValue = allocate(container, typeId, value);
+    if (needsInflation(typeId)) {
+        inflate(container, propValue, typeId, value);
     }
     return propValue;
 }
@@ -9571,7 +10331,7 @@ function _createDeserializeContainer(stateData, element) {
         $storeProxyMap$: new WeakMap(),
         element: null,
         $forwardRefs$: null,
-        $initialQRLsIndexes$: null,
+        $initialQRLs$: null,
         $scheduler$: null,
     };
     preprocessState(stateData, container);
@@ -9631,18 +10391,18 @@ function _createDeserializeContainer(stateData, element) {
  */
 function preprocessState(data, container) {
     const isRootDeepRef = (type, value) => {
-        return type === 0 /* TypeIds.RootRef */ && typeof value === 'string';
+        return type === 1 /* TypeIds.RootRef */ && typeof value === 'string';
     };
     const isForwardRefsMap = (type) => {
-        return type === 2 /* TypeIds.ForwardRefs */;
+        return type === 13 /* TypeIds.ForwardRefs */;
     };
     const isPreloadQrlType = (type) => {
-        return type === 21 /* TypeIds.PreloadQRL */;
+        return type === 20 /* TypeIds.PreloadQRL */;
     };
     const processRootRef = (index) => {
         const rootRefPath = data[index + 1].split(' ');
         let object = data;
-        let objectType = 0 /* TypeIds.RootRef */;
+        let objectType = 1 /* TypeIds.RootRef */;
         let typeIndex = 0;
         let valueIndex = 0;
         let parent = null;
@@ -9652,7 +10412,7 @@ function preprocessState(data, container) {
             valueIndex = typeIndex + 1;
             objectType = object[typeIndex];
             object = object[valueIndex];
-            if (objectType === 0 /* TypeIds.RootRef */) {
+            if (objectType === 1 /* TypeIds.RootRef */) {
                 const rootRef = object;
                 const rootRefTypeIndex = rootRef * 2;
                 objectType = data[rootRefTypeIndex];
@@ -9660,7 +10420,7 @@ function preprocessState(data, container) {
             }
         }
         if (parent) {
-            parent[typeIndex] = 0 /* TypeIds.RootRef */;
+            parent[typeIndex] = 1 /* TypeIds.RootRef */;
             parent[valueIndex] = index / 2;
         }
         data[index] = objectType;
@@ -9674,8 +10434,8 @@ function preprocessState(data, container) {
             container.$forwardRefs$ = data[i + 1];
         }
         else if (isPreloadQrlType(data[i])) {
-            container.$initialQRLsIndexes$ ||= [];
-            container.$initialQRLsIndexes$.push(i / 2);
+            const qrl = data[i + 1];
+            (container.$initialQRLs$ ||= []).push(qrl);
         }
     }
 }
@@ -9695,7 +10455,7 @@ function shouldTrackObj(obj) {
     return (
     // THINK: Not sure if we need to keep track of functions (QRLs) Let's skip them for now.
     // and see if we have a test case which requires them.
-    (typeof obj === 'object' && obj !== null) ||
+    isObject(obj) ||
         /**
          * We track all strings greater than 1 character, because those take at least 6 bytes to encode
          * and even with 999 root objects it saves one byte per reference. Tracking more objects makes
@@ -9723,9 +10483,7 @@ function isResource(value) {
     return '__brand' in value && value.__brand === 'resource';
 }
 const frameworkType = (obj) => {
-    return ((typeof obj === 'object' &&
-        obj !== null &&
-        (obj instanceof SignalImpl || obj instanceof Task || isJSXNode(obj))) ||
+    return ((isObject(obj) && (obj instanceof SignalImpl || obj instanceof Task || isJSXNode(obj))) ||
         isQrl(obj));
 };
 const canSerialize = (value, seen = new WeakSet()) => {
@@ -9811,17 +10569,19 @@ const canSerialize = (value, seen = new WeakSet()) => {
             return true;
         }
     }
+    else if (value === _UNINITIALIZED) {
+        return true;
+    }
     return false;
 };
 const QRL_RUNTIME_CHUNK = 'mock-chunk';
 const _typeIdNames = [
+    'Plain',
     'RootRef',
     'ForwardRef',
-    'ForwardRefs',
     'Constant',
-    'Number',
-    'String',
     'Array',
+    'Object',
     'URL',
     'Date',
     'Regex',
@@ -9829,8 +10589,8 @@ const _typeIdNames = [
     'RefVNode',
     'BigInt',
     'URLSearchParams',
+    'ForwardRefs',
     'Error',
-    'Object',
     'Promise',
     'Set',
     'Map',
@@ -9846,16 +10606,15 @@ const _typeIdNames = [
     'AsyncComputedSignal',
     'SerializerSignal',
     'Store',
-    'StoreArray',
     'FormData',
     'JSXNode',
     'PropsProxy',
-    'EffectData',
+    'SubscriptionData',
 ];
 const circularProofJson = (obj, indent) => {
     const seen = new WeakSet();
-    return JSON.stringify(obj, (key, value) => {
-        if (typeof value === 'object' && value !== null) {
+    return JSON.stringify(obj, (_, value) => {
+        if (isObject(value)) {
             if (seen.has(value)) {
                 return `[Circular ${value.constructor.name}]`;
             }
@@ -9890,9 +10649,15 @@ const dumpState = (state, color = false, prefix = '', limit = 20) => {
         }
         const key = state[i];
         let value = state[++i];
-        if (key === undefined) {
-            hasRaw = true;
-            out.push(`${RED}[raw${typeof value === 'object' && value ? ` ${value.constructor.name}` : ''}]${RESET} ${printRaw(value, `${prefix}  `)}`);
+        if (key === 0 /* TypeIds.Plain */) {
+            const isRaw = typeof value !== 'number' && typeof value !== 'string';
+            if (isRaw) {
+                hasRaw = true;
+            }
+            const type = isRaw
+                ? `[raw${isObject(value) ? ` ${value.constructor.name}` : ''}]`
+                : typeIdToName(key);
+            out.push(`${RED}${type}${RESET} ${printRaw(value, `${prefix}  `)}`);
         }
         else {
             if (key === 3 /* TypeIds.Constant */) {
@@ -9904,7 +10669,7 @@ const dumpState = (state, color = false, prefix = '', limit = 20) => {
                     value = value.slice(0, 120) + '"...';
                 }
             }
-            else if (key === 2 /* TypeIds.ForwardRefs */) {
+            else if (key === 13 /* TypeIds.ForwardRefs */) {
                 value = '[' + `\n${prefix}  ${value.join(`\n${prefix}  `)}\n${prefix}]`;
             }
             else if (Array.isArray(value)) {
@@ -10006,7 +10771,6 @@ const _verifySerializable = (value, seen, ctx, preMessage) => {
     return value;
 };
 const noSerializeSet = /*#__PURE__*/ new WeakSet();
-const weakSerializeSet = /*#__PURE__*/ new WeakSet();
 const shouldSerialize = (obj) => {
     if (isObject(obj) || isFunction(obj)) {
         return !noSerializeSet.has(obj);
@@ -10015,7 +10779,7 @@ const shouldSerialize = (obj) => {
 };
 const fastSkipSerialize = (obj) => {
     return (obj &&
-        (typeof obj === 'object' || typeof obj === 'function') &&
+        (isObject(obj) || typeof obj === 'function') &&
         (NoSerializeSymbol in obj || noSerializeSet.has(obj)));
 };
 // <docs markdown="../../readme.md#noSerialize">
@@ -10040,16 +10804,11 @@ const fastSkipSerialize = (obj) => {
 // </docs>
 const noSerialize = (input) => {
     // only add supported values to the noSerializeSet, prevent console errors
-    if ((typeof input === 'object' && input !== null) || typeof input === 'function') {
+    if ((isObject(input) && input !== null) || typeof input === 'function') {
         noSerializeSet.add(input);
     }
     return input;
 };
-/** @internal */
-const _weakSerialize = (input) => {
-    weakSerializeSet.add(input);
-    return input;
-};
 /**
  * If an object has this property, it will not be serialized. Use this on prototypes to avoid having
  * to call `noSerialize()` on every object.
@@ -10076,6 +10835,7 @@ const NoSerializeSymbol = Symbol('noSerialize');
 const SerializerSymbol = Symbol('serialize');
 
 // keep these imports above the rest to prevent circular dep issues
+const resolvedSymbol = Symbol('resolved');
 const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
     if (qDev && qSerialize) {
         if (captureRef) {
@@ -10128,9 +10888,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         };
         return bound;
     }
-    const resolveLazy = (containerEl) => {
-        return symbolRef !== null ? symbolRef : resolve(containerEl);
-    };
     // Wrap functions to provide their lexical scope
     const wrapFn = (fn) => {
         if (typeof fn !== 'function' || (!capture?.length && !captureRef?.length)) {
@@ -10159,45 +10916,58 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
             return invoke.call(this, context, fn, ...args);
         };
     };
-    const resolve = async (containerEl) => {
-        if (symbolRef !== null) {
-            // Resolving (Promise) or already resolved (value)
+    // Retrieve memoized result from symbolFn
+    if (symbolFn && resolvedSymbol in symbolFn) {
+        symbolRef = symbolFn[resolvedSymbol];
+    }
+    const resolve = symbolRef
+        ? async () => symbolRef
+        : async (containerEl) => {
+            if (symbolRef !== null) {
+                // Resolving (Promise) or already resolved (value)
+                return symbolRef;
+            }
+            if (containerEl) {
+                setContainer(containerEl);
+            }
+            if (chunk === '') {
+                // Sync QRL
+                assertDefined(_containerEl, 'Sync QRL must have container element');
+                const hash = _containerEl.getAttribute(QInstanceAttr);
+                const doc = _containerEl.ownerDocument;
+                const qFuncs = getQFuncs(doc, hash);
+                // No need to wrap, syncQRLs can't have captured scope
+                return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
+            }
+            if (isBrowser && chunk) {
+                /** We run the QRL, so now the probability of the chunk is 100% */
+                p(chunk, 1);
+            }
+            const start = now();
+            const ctx = tryGetInvokeContext();
+            if (symbolFn !== null) {
+                symbolRef = symbolFn().then((module) => {
+                    const resolved = wrapFn((symbolRef = module[symbol]));
+                    // We memoize the result on the symbolFn
+                    symbolFn[resolvedSymbol] = resolved;
+                    qrl.resolved = resolved;
+                    return resolved;
+                });
+            }
+            else {
+                // TODO cache the imported symbol but watch out for dev mode
+                const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
+                symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
+            }
+            if (isPromise(symbolRef)) {
+                symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), (err) => {
+                    console.error(`qrl ${symbol} failed to load`, err);
+                    // We shouldn't cache rejections, we can try again later
+                    symbolRef = null;
+                });
+            }
             return symbolRef;
-        }
-        if (containerEl) {
-            setContainer(containerEl);
-        }
-        if (chunk === '') {
-            // Sync QRL
-            assertDefined(_containerEl, 'Sync QRL must have container element');
-            const hash = _containerEl.getAttribute(QInstanceAttr);
-            const doc = _containerEl.ownerDocument;
-            const qFuncs = getQFuncs(doc, hash);
-            // No need to wrap, syncQRLs can't have captured scope
-            return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
-        }
-        if (isBrowser && chunk) {
-            /** We run the QRL, so now the probability of the chunk is 100% */
-            p(chunk, 1);
-        }
-        const start = now();
-        const ctx = tryGetInvokeContext();
-        if (symbolFn !== null) {
-            symbolRef = symbolFn().then((module) => (qrl.resolved = wrapFn((symbolRef = module[symbol]))));
-        }
-        else {
-            const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-            symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
-        }
-        if (typeof symbolRef === 'object' && isPromise(symbolRef)) {
-            symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), (err) => {
-                console.error(`qrl ${symbol} failed to load`, err);
-                // We shouldn't cache rejections, we can try again later
-                symbolRef = null;
-            });
-        }
-        return symbolRef;
-    };
+        };
     const createOrReuseInvocationContext = (invoke) => {
         if (invoke == null) {
             return newInvokeContext();
@@ -10215,7 +10985,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         getHash: () => hash,
         getCaptured: () => captureRef,
         resolve,
-        $resolveLazy$: resolveLazy,
         $setContainer$: setContainer,
         $chunk$: chunk,
         $symbol$: symbol,
@@ -10516,7 +11285,7 @@ const render = async (parent, jsxNode, opts = {}) => {
     container.$serverData$ = opts.serverData || {};
     const host = container.rootVNode;
     container.$scheduler$(4 /* ChoreType.NODE_DIFF */, host, host, jsxNode);
-    await container.$scheduler$(255 /* ChoreType.WAIT_FOR_ALL */);
+    await container.$scheduler$(255 /* ChoreType.WAIT_FOR_QUEUE */).$returnValue$;
     return {
         cleanup: () => {
             cleanup(container, container.rootVNode);
@@ -11056,13 +11825,13 @@ const _useStyles = (styleQrl, transform, scoped) => {
     const styleId = styleKey(styleQrl, i);
     const host = iCtx.$hostElement$;
     set(styleId);
-    const value = styleQrl.$resolveLazy$(iCtx.$element$);
-    if (isPromise(value)) {
-        value.then((val) => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped));
-        throw value;
+    if (styleQrl.resolved) {
+        iCtx.$container$.$appendStyle$(transform(styleQrl.resolved, styleId), styleId, host, scoped);
     }
     else {
-        iCtx.$container$.$appendStyle$(transform(value, styleId), styleId, host, scoped);
+        throw styleQrl
+            .resolve()
+            .then((val) => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped));
     }
     return styleId;
 };
@@ -11243,13 +12012,13 @@ const useConstant = (value) => {
     return set(value);
 };
 
-const useComputedCommon = (qrl, Class) => {
+const useComputedCommon = (qrl, createFn, options) => {
     const { val, set } = useSequentialScope();
     if (val) {
         return val;
     }
     assertQrl(qrl);
-    const signal = new Class(null, qrl);
+    const signal = createFn(qrl, options);
     set(signal);
     // Note that we first save the signal
     // and then we throw to load the qrl
@@ -11258,8 +12027,8 @@ const useComputedCommon = (qrl, Class) => {
     return signal;
 };
 /** @internal */
-const useComputedQrl = (qrl) => {
-    return useComputedCommon(qrl, ComputedSignalImpl);
+const useComputedQrl = (qrl, options) => {
+    return useComputedCommon(qrl, createComputedSignal, options);
 };
 /**
  * Creates a computed signal which is calculated from the given function. A computed signal is a
@@ -11274,7 +12043,7 @@ const useComputedQrl = (qrl) => {
 const useComputed$ = implicit$FirstArg(useComputedQrl);
 
 /** @internal */
-const useSerializerQrl = (qrl) => useComputedCommon(qrl, SerializerSignalImpl);
+const useSerializerQrl = (qrl) => useComputedCommon(qrl, createSerializerSignal);
 /**
  * Creates a signal which holds a custom serializable value. It requires that the value implements
  * the `CustomSerializable` type, which means having a function under the `[SerializeSymbol]`
@@ -11353,8 +12122,8 @@ const useVisibleTaskQrl = (qrl, opts) => {
     set(task);
     useRunTask(task, eagerness);
     if (!isServerPlatform()) {
-        qrl.$resolveLazy$(iCtx.$element$);
-        iCtx.$container$.$scheduler$(32 /* ChoreType.VISIBLE */, task);
+        qrl.resolve(iCtx.$element$);
+        iCtx.$container$.$scheduler$(16 /* ChoreType.VISIBLE */, task);
     }
 };
 const useRunTask = (task, eagerness) => {
@@ -11529,8 +12298,8 @@ const useTask$ = /*#__PURE__*/ implicit$FirstArg(useTaskQrl);
 const useVisibleTask$ = /*#__PURE__*/ implicit$FirstArg(useVisibleTaskQrl);
 
 /** @internal */
-const useAsyncComputedQrl = (qrl) => {
-    return useComputedCommon(qrl, AsyncComputedSignalImpl);
+const useAsyncComputedQrl = (qrl, options) => {
+    return useComputedCommon(qrl, createAsyncComputedSignal, options);
 };
 /**
  * Creates a computed signal which is calculated from the given function. A computed signal is a
@@ -11583,7 +12352,7 @@ const PrefetchServiceWorker = (opts) => {
         // the file 'qwik-prefetch-service-worker.js' is not located in /build/
         resolvedOpts.path = baseUrl + resolvedOpts.path;
     }
-    let code = PREFETCH_CODE.replace("'_URL_'", JSON.stringify(resolvedOpts.path));
+    let code = PREFETCH_CODE.replace('"_URL_"', JSON.stringify(resolvedOpts.path.split('/').pop()));
     if (!isDev) {
         // consecutive spaces are indentation
         code = code.replaceAll(/\s\s+/gm, '');
@@ -11613,6 +12382,17 @@ const PREFETCH_CODE = /*#__PURE__*/ ((c // Service worker container
             });
         });
     }
+    if ('caches' in window) {
+        caches
+            .keys()
+            .then((names) => {
+            const cacheName = names.find((name) => name.startsWith('QwikBundles'));
+            if (cacheName) {
+                caches.delete(cacheName).catch(console.error);
+            }
+        })
+            .catch(console.error);
+    }
 }).toString();
 /**
  * @deprecated This is no longer needed as the preloading happens automatically in qrl-class. You
@@ -11621,5 +12401,15 @@ const PREFETCH_CODE = /*#__PURE__*/ ((c // Service worker container
  */
 const PrefetchGraph = (_opts = {}) => null;
 
-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, _VAR_PROPS, _deserialize, dumpState as _dumpState, _fnSignal, _getContextElement, _getContextEvent, getDomContainer as _getDomContainer, _getQContainerElement, isJSXNode as _isJSXNode, isStringifiable as _isStringifiable, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, _regSymbol, _restProps, queueQRL as _run, _serialize, scheduleTask as _task, verifySerializable as _verifySerializable, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _weakSerialize, _wrapProp, _wrapSignal, _wrapStore, component$, componentQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsx as jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsyncComputed$, useAsyncComputedQrl, 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 };
+//////////////////////////////////////////////////////////////////////////////////////////
+// Protect against duplicate imports
+//////////////////////////////////////////////////////////////////////////////////////////
+if (globalThis.__qwik) {
+    console.error(`==============================================\n` +
+        `Qwik version ${globalThis.__qwik} already imported while importing ${version}. Verify external vs bundled imports etc. This can lead to issues due to duplicated shared structures.\n` +
+        `==============================================\n`);
+}
+globalThis.__qwik = version;
+
+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, _deserialize, dumpState as _dumpState, _fnSignal, _getConstProps, _getContextContainer, _getContextElement, _getContextEvent, 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, _regSymbol, _resolveContextWithoutSequentialScope, _restProps, _run, _serializationWeakRef, _serialize, scheduleTask as _task, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttr as _vnode_getAttr, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getFirstChild as _vnode_getFirstChild, vnode_getNextSibling as _vnode_getNextSibling, vnode_getPropStartIndex as _vnode_getPropStartIndex, vnode_getProps as _vnode_getProps, 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, createAsyncComputed$, createAsyncComputedSignal as createAsyncComputedQrl, 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, jsx as jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsyncComputed$, useAsyncComputedQrl, 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