@qwik.dev/core 2.0.0-beta.8 → 2.0.0-beta.9

package/dist/core.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.8-dev+434cd18
+ * @qwik.dev/core 2.0.0-beta.9-dev+6b582c7
  * 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
@@ -11,6 +11,13 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.qwikCore = {}, global.qwikBuild, global.qwikPreloader));
 })(this, (function (exports, build, preloader) { 'use strict';
 
+    /**
+     * QWIK_VERSION
+     *
+     * @public
+     */
+    const version = "2.0.0-beta.9-dev+6b582c7";
+
     // same as isDev but separate so we can test
     const qDev = globalThis.qDev !== false;
     const qInspector = globalThis.qInspector === true;
@@ -88,6 +95,9 @@
     const isString = (v) => {
         return typeof v === 'string';
     };
+    const isNumber$1 = (v) => {
+        return typeof v === 'number';
+    };
     const isFunction = (v) => {
         return typeof v === 'function';
     };
@@ -290,13 +300,6 @@
                     });
                 });
             },
-            nextTick: (fn) => {
-                return new Promise((resolve) => {
-                    setTimeout(() => {
-                        resolve(fn());
-                    });
-                });
-            },
             chunkForSymbol(symbolName, chunk) {
                 return [symbolName, chunk ?? '_'];
             },
@@ -554,6 +557,13 @@
             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$;
         }
@@ -567,14 +577,7 @@
         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
@@ -636,12 +639,11 @@
         $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;
@@ -650,7 +652,6 @@
         }
         invalidate() {
             this.$flags$ |= 1 /* SignalFlags.INVALID */;
-            this.$forceRunEffects$ = false;
             this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, this.$hostElement$, this, this.$effects$);
         }
         /**
@@ -658,29 +659,26 @@
          * remained the same object.
          */
         force() {
-            this.$forceRunEffects$ = true;
+            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(_) {
@@ -875,12 +873,26 @@
     };
     /** @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.
+            }
+        })();
     };
 
     /**
@@ -958,7 +970,7 @@
         }
         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;
     }
@@ -1247,13 +1259,6 @@
         return true;
     };
 
-    /**
-     * QWIK_VERSION
-     *
-     * @public
-     */
-    const version = "2.0.0-beta.8-dev+434cd18";
-
     /** @internal */
     const EMPTY_ARRAY = [];
     const EMPTY_OBJ = {};
@@ -1394,7 +1399,7 @@
      *
      * @internal
      */
-    const queueQRL = (...args) => {
+    const _run = (...args) => {
         // This will already check container
         const [runQrl] = useLexicalScope();
         const context = getInvokeContext();
@@ -1408,7 +1413,9 @@
         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 */
@@ -1532,13 +1539,12 @@
          */
         $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 */ |
-            16 /* ComputedSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */) {
+            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);
@@ -1547,7 +1553,6 @@
         }
         invalidate() {
             this.$flags$ |= 1 /* SignalFlags.INVALID */;
-            this.$forceRunEffects$ = false;
             this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, null, this, this.$effects$);
         }
         /**
@@ -1555,20 +1560,17 @@
          * 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);
@@ -1587,9 +1589,12 @@
                 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) {
@@ -1615,12 +1620,12 @@
      */
     class SerializerSignalImpl extends ComputedSignalImpl {
         constructor(container, argQrl) {
-            super(container, argQrl, 1 /* SignalFlags.INVALID */ | 16 /* ComputedSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */);
+            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;
@@ -1638,9 +1643,9 @@
             this.$flags$ &= -2 /* SignalFlags.INVALID */;
             this.$didInitialize$ = true;
             if (didChange) {
+                this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
                 this.$untrackedValue$ = untrackedValue;
             }
-            return didChange;
         }
     }
 
@@ -1650,6 +1655,28 @@
     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,...)
@@ -1688,7 +1715,12 @@
         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;
@@ -1751,7 +1783,11 @@
             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) {
@@ -1810,8 +1846,10 @@
     }
     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;
@@ -1939,7 +1977,7 @@
         }
         $computeIfNeeded$() {
             if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
-                return false;
+                return;
             }
             const computeQrl = this.$computeQrl$;
             throwIfQRLNotResolved(computeQrl);
@@ -1969,6 +2007,7 @@
             this.$flags$ &= -2 /* SignalFlags.INVALID */;
             const didChange = untrackedValue !== this.$untrackedValue$;
             if (didChange) {
+                this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
                 this.$untrackedValue$ = untrackedValue;
             }
             return didChange;
@@ -2056,7 +2095,7 @@
             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);
@@ -2117,7 +2156,7 @@
         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) {
@@ -2572,12 +2611,12 @@
                     }
                     if (targetElement) {
                         if (targetElement.type === 'script' && key === qVisibleEvent) {
-                            eventKey = 'document:onQinit$';
+                            eventKey = 'document:onQInit$';
                             logWarn('You are trying to add an event "' +
                                 key +
                                 '" using `useVisibleTask$` hook, ' +
                                 'but a node to which you can add an event is not found. ' +
-                                'Using document:onQinit$ instead.');
+                                'Using document:onQInit$ instead.');
                         }
                         addUseOnEvent(targetElement, eventKey, useOnEvents[key]);
                     }
@@ -2700,13 +2739,13 @@
         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 {
@@ -2814,7 +2853,14 @@
                             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);
                     }
@@ -2930,16 +2976,17 @@
             }
         }
     }
-    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];
@@ -2976,7 +3023,7 @@
                         }
                     }
                 }
-                const eventValue = setEvent(serializationCtx, key, value);
+                const eventValue = setEvent(options.serializationCtx, key, value);
                 if (eventValue) {
                     ssrAttrs.push(jsxEventToHtmlAttribute(key), eventValue);
                 }
@@ -2986,7 +3033,7 @@
                 // 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);
@@ -2994,13 +3041,13 @@
                 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;
     }
@@ -3049,7 +3096,7 @@
              * 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);
         };
@@ -3129,10 +3176,9 @@
         // 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) => {
@@ -3144,7 +3190,7 @@
         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));
@@ -3153,7 +3199,6 @@
                 throw err;
             }
         });
-        return result;
     };
     const cleanupTask = (task) => {
         const destroy = task.$destroy$;
@@ -3195,7 +3240,7 @@
      */
     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);
     };
@@ -3447,7 +3492,7 @@
                 ? 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;
         }
@@ -3861,6 +3906,10 @@
             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");
@@ -4393,8 +4442,13 @@
                         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;
@@ -4896,7 +4950,7 @@
                                 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);
@@ -4947,7 +5001,16 @@
                      */
                     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;
                     }
                 }
@@ -5024,8 +5087,8 @@
         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">
@@ -5093,10 +5156,10 @@
     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));
                 }
@@ -5111,14 +5174,7 @@
                     }
                 }
             }
-            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));
@@ -5136,7 +5192,7 @@
         const resource = {
             __brand: 'resource',
             value: undefined,
-            loading: isServerPlatform() ? false : true,
+            loading: !isServerPlatform(),
             _resolved: undefined,
             _error: undefined,
             _state: 'pending',
@@ -5187,19 +5243,22 @@
                 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;
@@ -5215,17 +5274,17 @@
             }
         });
         // 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)) {
@@ -5248,10 +5307,6 @@
         }
         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 = [];
@@ -5334,11 +5389,11 @@
         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];
@@ -5355,6 +5410,210 @@
         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.
      *
@@ -5438,29 +5697,43 @@
      */
     // 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 */;
             }
@@ -5474,167 +5747,310 @@
                 $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;
+                    }
+                }
+            }
+            const blockingChore = findBlockingChore(chore, choreQueue, blockedChores, runningChores, container);
+            if (blockingChore) {
+                addBlockedChore(chore, blockingChore, blockedChores);
+                return chore;
             }
-            // TODO figure out what to do with chore errors
-            if (runLater) {
-                return getPromise(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);
@@ -5642,64 +6058,49 @@
                             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$;
+                    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;
-                            if (target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl) {
-                                const forceRunEffects = target.$forceRunEffects$;
-                                target.$forceRunEffects$ = false;
-                                if (!effects?.size && !forceRunEffects) {
-                                    break;
+                            // 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));
                                 }
-                                // needed for computed signals and throwing QRLs
-                                returnValue = maybeThen(retryOnPromise(() => invoke.call(target, ctx, target.$computeIfNeeded$)), (didChange) => {
-                                    if (didChange || forceRunEffects) {
-                                        return retryOnPromise(() => 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.
@@ -5728,15 +6129,6 @@
                 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;
@@ -5760,8 +6152,14 @@
                 // 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
@@ -5793,6 +6191,15 @@
             /// 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);
@@ -5807,9 +6214,6 @@
             if (existing.$payload$ !== value.$payload$) {
                 existing.$payload$ = value.$payload$;
             }
-            if (existing.$executed$) {
-                existing.$executed$ = false;
-            }
             return existing;
         }
     };
@@ -5821,6 +6225,25 @@
             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',
@@ -5830,31 +6253,87 @@
             [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');
     }
@@ -5872,7 +6351,8 @@
         $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;
@@ -5880,7 +6360,7 @@
             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);
@@ -6189,9 +6669,10 @@
                     const shadowRootContainer = node;
                     const shadowRoot = shadowRootContainer?.shadowRoot;
                     if (shadowRoot) {
+                        const firstShadowRootChild = firstChild(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(firstShadowRootChild, 0x1 /* NodeFilter.SHOW_ELEMENT  */ | 0x80 /*  NodeFilter.SHOW_COMMENT */), null, firstShadowRootChild, null, '', null);
                     }
                 }
                 if ((nodeType & 2 /* NodeType.ELEMENT */) === 2 /* NodeType.ELEMENT */) {
@@ -6267,7 +6748,7 @@
     /** @internal */
     function _getQContainerElement(element) {
         const qContainerElement = Array.isArray(element)
-            ? vnode_getDomParent(element)
+            ? vnode_getDomParent(element, true)
             : element;
         return qContainerElement.closest(QContainerSelector);
     }
@@ -6282,7 +6763,6 @@
         rootVNode;
         document;
         $journal$;
-        renderDone = null;
         $rawStateData$;
         $storeProxyMap$ = new WeakMap();
         $qFuncs$;
@@ -6292,9 +6772,11 @@
         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 */);
@@ -6336,20 +6818,17 @@
         }
         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) {
@@ -6424,29 +6903,6 @@
             }
             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 */;
@@ -6456,7 +6912,9 @@
                     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));
                         }
                     }
                 }
@@ -6577,7 +7035,7 @@
         }
     };
     const triggerEffects = (container, signal, effects) => {
-        const isBrowser = isDomContainer(container);
+        const isBrowser = !isServerPlatform();
         if (effects) {
             const scheduleEffect = (effectSubscription) => {
                 const consumer = effectSubscription[0 /* EffectSubscriptionProp.CONSUMER */];
@@ -6587,7 +7045,7 @@
                     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);
                 }
@@ -6610,22 +7068,22 @@
                     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);
                     }
                 }
             };
@@ -6646,10 +7104,10 @@
             //   flags |= ComputedSignalFlags.SERIALIZATION_STRATEGY_AUTO;
             //   break;
             case 'never':
-                flags |= 8 /* ComputedSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
+                flags |= 16 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
                 break;
             case 'always':
-                flags |= 16 /* ComputedSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
+                flags |= 32 /* SerializationSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
                 break;
         }
         return flags;
@@ -7041,6 +7499,9 @@
         }
         let vParent = null;
         do {
+            if (callback?.(vCursor, vParent)) {
+                return;
+            }
             const vFirstChild = vnode_getFirstChild(vCursor);
             if (vFirstChild) {
                 vCursor = vFirstChild;
@@ -7209,6 +7670,7 @@
         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.
@@ -7367,6 +7829,18 @@
         }
         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;
@@ -7505,7 +7979,7 @@
          * 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) {
@@ -7554,27 +8028,31 @@
                 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;
@@ -7596,14 +8074,22 @@
         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;
     };
@@ -7613,7 +8099,7 @@
             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
@@ -8094,6 +8580,26 @@
     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;
@@ -8453,13 +8959,15 @@
             }
             const container = this.$container$;
             let propValue = allocate(container, typeId, value);
+            Reflect.set(target, property, propValue);
+            this.$data$[idx] = undefined;
+            this.$data$[idx + 1] = propValue;
             /** We stored the reference, so now we can inflate, allowing cycles. */
             if (typeId >= 14 /* TypeIds.Error */) {
                 propValue = inflate(container, propValue, typeId, value);
+                Reflect.set(target, property, propValue);
+                this.$data$[idx + 1] = propValue;
             }
-            Reflect.set(target, property, propValue);
-            this.$data$[idx] = undefined;
-            this.$data$[idx + 1] = propValue;
             return propValue;
         }
         has(target, property) {
@@ -8638,7 +9146,7 @@
                      */
                     // 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;
             }
@@ -9426,8 +9934,8 @@
                 }
                 else if (value instanceof ComputedSignalImpl) {
                     let v = value.$untrackedValue$;
-                    const shouldAlwaysSerialize = value.$flags$ & 16 /* ComputedSignalFlags.SERIALIZATION_STRATEGY_ALWAYS */;
-                    const shouldNeverSerialize = value.$flags$ & 8 /* ComputedSignalFlags.SERIALIZATION_STRATEGY_NEVER */;
+                    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) {
@@ -10769,7 +11277,7 @@
         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);
@@ -11607,7 +12115,7 @@
         useRunTask(task, eagerness);
         if (!isServerPlatform()) {
             qrl.resolve(iCtx.$element$);
-            iCtx.$container$.$scheduler$(32 /* ChoreType.VISIBLE */, task);
+            iCtx.$container$.$scheduler$(16 /* ChoreType.VISIBLE */, task);
         }
     };
     const useRunTask = (task, eagerness) => {
@@ -11885,6 +12393,16 @@
      */
     const PrefetchGraph = (_opts = {}) => null;
 
+    //////////////////////////////////////////////////////////////////////////////////////////
+    // 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;
+
     Object.defineProperty(exports, "isBrowser", {
         enumerable: true,
         get: function () { return build.isBrowser; }
@@ -11930,6 +12448,7 @@
     exports._getDomContainer = getDomContainer;
     exports._getQContainerElement = _getQContainerElement;
     exports._getVarProps = _getVarProps;
+    exports._hasStoreEffects = _hasStoreEffects;
     exports._isJSXNode = isJSXNode;
     exports._isStore = isStore;
     exports._isStringifiable = isStringifiable;
@@ -11950,7 +12469,7 @@
     exports._regSymbol = _regSymbol;
     exports._resolveContextWithoutSequentialScope = _resolveContextWithoutSequentialScope;
     exports._restProps = _restProps;
-    exports._run = queueQRL;
+    exports._run = _run;
     exports._serializationWeakRef = _serializationWeakRef;
     exports._serialize = _serialize;
     exports._task = scheduleTask;
@@ -11983,6 +12502,7 @@
     exports.createSignal = createSignal;
     exports.event$ = event$;
     exports.eventQrl = eventQrl;
+    exports.forceStoreEffects = forceStoreEffects;
     exports.getDomContainer = getDomContainer;
     exports.getLocale = getLocale;
     exports.getPlatform = getPlatform;