@qwik.dev/core 2.0.0-alpha.6 → 2.0.0-alpha.7

package/dist/core.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.6-dev+d848ba5
+ * @qwik.dev/core 2.0.0-alpha.7-dev+a26598a
  * 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
@@ -121,8 +121,8 @@
             // Keep one error, one line to make it easier to search for the error message.
             const MAP = [
                 'Error while serializing class or style attributes', // 0
-                '', // 1 unused
-                '', // 2 unused
+                'Scheduler not found', // 1
+                'track() received object, without prop to track', // 2
                 'Only primitive and object literals can be serialized. {{0}}', // 3
                 '', // 4 unused
                 'You can render over a existing q:container. Skipping render().', // 5
@@ -165,12 +165,11 @@
                 "Element must have 'q:container' attribute.", // 42
                 'Unknown vnode type {{0}}.', // 43
                 'Materialize error: missing element: {{0}} {{1}} {{2}}', // 44
-                'Cannot coerce a Signal, use `.value` instead', // 46
-                'useComputedSignal$ QRL {{0}} {{1}} returned a Promise', // 47
-                'ComputedSignal is read-only', // 48
-                'WrappedSignal is read-only', // 49
-                'SsrError: Promises not expected here.', // 50
-                'Attribute value is unsafe for SSR', // 51
+                'Cannot coerce a Signal, use `.value` instead', // 45
+                'useComputedSignal$ QRL {{0}} {{1}} returned a Promise', // 46
+                'ComputedSignal is read-only', // 47
+                'WrappedSignal is read-only', // 48
+                'Attribute value is unsafe for SSR', // 49
             ];
             let text = MAP[code] ?? '';
             if (parts.length) {
@@ -192,8 +191,8 @@
     var QError;
     (function (QError) {
         QError[QError["stringifyClassOrStyle"] = 0] = "stringifyClassOrStyle";
-        QError[QError["UNUSED_1"] = 1] = "UNUSED_1";
-        QError[QError["UNUSED_2"] = 2] = "UNUSED_2";
+        QError[QError["schedulerNotFound"] = 1] = "schedulerNotFound";
+        QError[QError["trackObjectWithoutProp"] = 2] = "trackObjectWithoutProp";
         QError[QError["verifySerializable"] = 3] = "verifySerializable";
         QError[QError["UNUSED_4"] = 4] = "UNUSED_4";
         QError[QError["cannotRenderOverExistingContainer"] = 5] = "cannotRenderOverExistingContainer";
@@ -240,14 +239,37 @@
         QError[QError["computedNotSync"] = 46] = "computedNotSync";
         QError[QError["computedReadOnly"] = 47] = "computedReadOnly";
         QError[QError["wrappedReadOnly"] = 48] = "wrappedReadOnly";
-        QError[QError["promisesNotExpected"] = 49] = "promisesNotExpected";
-        QError[QError["unsafeAttr"] = 50] = "unsafeAttr";
+        QError[QError["unsafeAttr"] = 49] = "unsafeAttr";
     })(QError || (QError = {}));
     const qError = (code, errorMessageArgs = []) => {
         const text = codeToText(code, ...errorMessageArgs);
         return logErrorAndStop(text, ...errorMessageArgs);
     };
 
+    /** QRL related utilities that you can import without importing all of Qwik. */
+    const SYNC_QRL = '<sync>';
+    /** Sync QRL is a function which is serialized into `<script q:func="qwik/json">` tag. */
+    const isSyncQrl = (value) => {
+        return isQrl$1(value) && value.$symbol$ == SYNC_QRL;
+    };
+    const isQrl$1 = (value) => {
+        return typeof value === 'function' && typeof value.getSymbol === 'function';
+    };
+    function assertQrl(qrl) {
+        if (build.isDev) {
+            if (!isQrl$1(qrl)) {
+                throw new Error('Not a QRL');
+            }
+        }
+    }
+    const getSymbolHash = (symbolName) => {
+        const index = symbolName.lastIndexOf('_');
+        if (index > -1) {
+            return symbolName.slice(index + 1);
+        }
+        return symbolName;
+    };
+
     /**
      * A friendly name tag for a VirtualVNode.
      *
@@ -291,7 +313,7 @@
     /** State factory of the component. */
     const OnRenderProp = 'q:renderFn';
     /** Component style content prefix */
-    const ComponentStylesPrefixContent = '⭐️';
+    const ComponentStylesPrefixContent = '⚡️';
     /** `<some-element q:slot="...">` */
     const QSlot = 'q:slot';
     const QSlotParent = ':';
@@ -303,7 +325,7 @@
     const QStylesAllSelector = QStyleSelector + ',' + QStyleSSelector;
     const QScopedStyle = 'q:sstyle';
     const QCtxAttr = 'q:ctx';
-    const QSubscribers = 'q:subs';
+    const QBackRefs = 'q:brefs';
     const QFuncsPrefix = 'qFuncs_';
     const getQFuncs = (document, hash) => {
         return document[QFuncsPrefix + hash] || [];
@@ -499,11 +521,6 @@
             ? valueOrPromise.then(thenFn, shouldNotError)
             : thenFn(valueOrPromise);
     };
-    const maybeThenPassError = (valueOrPromise, thenFn) => {
-        return isPromise(valueOrPromise)
-            ? valueOrPromise.then(thenFn)
-            : thenFn(valueOrPromise);
-    };
     const shouldNotError = (reason) => {
         throwErrorAndStop(reason);
     };
@@ -621,7 +638,7 @@
         _locale = locale;
     }
 
-    const isQrl$1 = (value) => {
+    const isQrl = (value) => {
         return typeof value === 'function' && typeof value.getSymbol === 'function';
     };
 
@@ -693,21 +710,21 @@
             // Emit event
             announcedQRL.add(symbol);
             emitEvent('qprefetch', {
-                symbols: [getSymbolHash(symbol)],
+                symbols: [symbol],
                 bundles: chunk && [chunk],
             });
         }
         // Unwrap subscribers
-        return createQRL(chunk, symbol, null, symbolFn, null, lexicalScopeCapture, null);
+        return createQRL(chunk, symbol, null, symbolFn, null, lexicalScopeCapture);
     };
     /** @internal */
     const inlinedQrl = (symbol, symbolName, lexicalScopeCapture = EMPTY_ARRAY) => {
         // Unwrap subscribers
-        return createQRL(null, symbolName, symbol, null, null, lexicalScopeCapture, null);
+        return createQRL(null, symbolName, symbol, null, null, lexicalScopeCapture);
     };
     /** @internal */
     const _noopQrl = (symbolName, lexicalScopeCapture = EMPTY_ARRAY) => {
-        return createQRL(null, symbolName, null, null, null, lexicalScopeCapture, null);
+        return createQRL(null, symbolName, null, null, null, lexicalScopeCapture);
     };
     /** @internal */
     const _noopQrlDEV = (symbolName, opts, lexicalScopeCapture = EMPTY_ARRAY) => {
@@ -736,6 +753,80 @@
         return symbol;
     };
 
+    var ChoreType;
+    (function (ChoreType) {
+        /// MASKS defining three levels of sorting
+        ChoreType[ChoreType["MACRO"] = 240] = "MACRO";
+        /* order of elements (not encoded here) */
+        ChoreType[ChoreType["MICRO"] = 15] = "MICRO";
+        /** Ensure that the QRL promise is resolved before processing next chores in the queue */
+        ChoreType[ChoreType["QRL_RESOLVE"] = 1] = "QRL_RESOLVE";
+        ChoreType[ChoreType["RUN_QRL"] = 2] = "RUN_QRL";
+        ChoreType[ChoreType["TASK"] = 3] = "TASK";
+        ChoreType[ChoreType["NODE_DIFF"] = 4] = "NODE_DIFF";
+        ChoreType[ChoreType["NODE_PROP"] = 5] = "NODE_PROP";
+        ChoreType[ChoreType["COMPONENT"] = 6] = "COMPONENT";
+        ChoreType[ChoreType["RECOMPUTE_AND_SCHEDULE_EFFECTS"] = 7] = "RECOMPUTE_AND_SCHEDULE_EFFECTS";
+        // Next macro level
+        ChoreType[ChoreType["JOURNAL_FLUSH"] = 16] = "JOURNAL_FLUSH";
+        // Next macro level
+        ChoreType[ChoreType["VISIBLE"] = 32] = "VISIBLE";
+        // Next macro level
+        ChoreType[ChoreType["CLEANUP_VISIBLE"] = 48] = "CLEANUP_VISIBLE";
+        // Next macro level
+        ChoreType[ChoreType["WAIT_FOR_ALL"] = 255] = "WAIT_FOR_ALL";
+    })(ChoreType || (ChoreType = {}));
+
+    // <docs markdown="../readme.md#useLexicalScope">
+    // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+    // (edit ../readme.md#useLexicalScope instead and run `pnpm docs.sync`)
+    /**
+     * Used by the Qwik Optimizer to restore the lexically scoped variables.
+     *
+     * This method should not be present in the application source code.
+     *
+     * NOTE: `useLexicalScope` method can only be used in the synchronous portion of the callback
+     * (before any `await` statements.)
+     *
+     * @internal
+     */
+    // </docs>
+    const useLexicalScope = () => {
+        const context = getInvokeContext();
+        let qrl = context.$qrl$;
+        if (!qrl) {
+            const el = context.$element$;
+            assertDefined(el, 'invoke: element must be defined inside useLexicalScope()', context);
+            const containerElement = _getQContainerElement(el);
+            assertDefined(containerElement, `invoke: cant find parent q:container of`, el);
+            const container = getDomContainer(containerElement);
+            qrl = container.parseQRL(decodeURIComponent(String(context.$url$)));
+        }
+        else {
+            assertQrl(qrl);
+            assertDefined(qrl.$captureRef$, 'invoke: qrl $captureRef$ must be defined inside useLexicalScope()', qrl);
+        }
+        return qrl.$captureRef$;
+    };
+
+    /**
+     * This is called by qwik-loader to schedule a QRL. It has to be synchronous.
+     *
+     * @internal
+     */
+    const queueQRL = (...args) => {
+        // This will already check container
+        const [runQrl] = useLexicalScope();
+        const context = getInvokeContext();
+        const hostElement = context.$hostElement$;
+        const container = getDomContainer(hostElement);
+        const scheduler = container.$scheduler$;
+        if (!scheduler) {
+            throw qError(QError.schedulerNotFound);
+        }
+        return scheduler(ChoreType.RUN_QRL, hostElement, runQrl, args);
+    };
+
     /**
      * Allows to project the children of the current component. <Slot/> can only be used within the
      * context of a component defined with `component$`.
@@ -860,6 +951,47 @@
         return key.startsWith('preventdefault:');
     }
 
+    function getFileLocationFromJsx(jsxDev) {
+        if (!jsxDev) {
+            return null;
+        }
+        const sanitizedFileName = jsxDev.fileName?.replace(/\\/g, '/');
+        if (sanitizedFileName) {
+            return `${sanitizedFileName}:${jsxDev.lineNumber}:${jsxDev.columnNumber}`;
+        }
+        return null;
+    }
+
+    const styleContent = (styleId) => {
+        return ComponentStylesPrefixContent + styleId;
+    };
+    function hasClassAttr(props) {
+        for (const key in props) {
+            if (Object.prototype.hasOwnProperty.call(props, key) && isClassAttr(key)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function isClassAttr(key) {
+        return key === 'class' || key === 'className';
+    }
+    function convertScopedStyleIdsToArray(scopedStyleIds) {
+        return scopedStyleIds?.split(' ') ?? null;
+    }
+    function convertStyleIdsToString(scopedStyleIds) {
+        return Array.from(scopedStyleIds).join(' ');
+    }
+    const addComponentStylePrefix = (styleId) => {
+        if (styleId) {
+            let idx = 0;
+            do {
+                styleId = styleId.substring(0, idx) + styleContent(styleId.substring(idx));
+            } while ((idx = styleId.indexOf(' ', idx) + 1) !== 0);
+        }
+        return styleId || null;
+    };
+
     /** CSS properties which accept numbers but are not in units of "px". */
     const unitlessNumbers = new Set([
         'animationIterationCount',
@@ -1018,36 +1150,6 @@
         assertQrl(qStyles);
         return `${hashCode(qStyles.$hash$)}-${index}`;
     };
-    const styleContent = (styleId) => {
-        return ComponentStylesPrefixContent + styleId;
-    };
-
-    function hasClassAttr(props) {
-        for (const key in props) {
-            if (Object.prototype.hasOwnProperty.call(props, key) && isClassAttr(key)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    function isClassAttr(key) {
-        return key === 'class' || key === 'className';
-    }
-    function convertScopedStyleIdsToArray(scopedStyleIds) {
-        return scopedStyleIds?.split(' ') ?? null;
-    }
-    function convertStyleIdsToString(scopedStyleIds) {
-        return Array.from(scopedStyleIds).join(' ');
-    }
-    const addComponentStylePrefix = (styleId) => {
-        if (styleId) {
-            let idx = 0;
-            do {
-                styleId = styleId.substring(0, idx) + styleContent(styleId.substring(idx));
-            } while ((idx = styleId.indexOf(' ', idx) + 1) !== 0);
-        }
-        return styleId || null;
-    };
 
     const STORE_TARGET = Symbol('store.target');
     const STORE_HANDLER = Symbol('store.handler');
@@ -1192,8 +1294,12 @@
             return Reflect.ownKeys(target);
         }
         getOwnPropertyDescriptor(target, prop) {
+            const descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
             if (Array.isArray(target) || typeof prop === 'symbol') {
-                return Object.getOwnPropertyDescriptor(target, prop);
+                return descriptor;
+            }
+            if (descriptor && !descriptor.configurable) {
+                return descriptor;
             }
             return {
                 enumerable: true,
@@ -1201,355 +1307,280 @@
             };
         }
     }
-    function addEffect(target, prop, store, effectSubscriber) {
-        const effectsMap = (store.$effects$ ||= {});
-        const effects = (Object.prototype.hasOwnProperty.call(effectsMap, prop) && effectsMap[prop]) ||
-            (effectsMap[prop] = []);
+    function addEffect(target, prop, store, effectSubscription) {
+        const effectsMap = (store.$effects$ ||= new Map());
+        let effects = effectsMap.get(prop);
+        if (!effects) {
+            effects = new Set();
+            effectsMap.set(prop, effects);
+        }
         // Let's make sure that we have a reference to this effect.
         // Adding reference is essentially adding a subscription, so if the signal
         // changes we know who to notify.
-        ensureContainsEffect(effects, effectSubscriber);
+        ensureContainsSubscription(effects, effectSubscription);
         // But when effect is scheduled in needs to be able to know which signals
         // to unsubscribe from. So we need to store the reference from the effect back
         // to this signal.
-        ensureContains(effectSubscriber, target);
-        // We need to add the subscriber to the effect so that we can clean it up later
-        ensureEffectContainsSubscriber(effectSubscriber[EffectSubscriptionsProp.EFFECT], target, store.$container$);
+        ensureContainsBackRef(effectSubscription, target);
+        addQrlToSerializationCtx(effectSubscription, store.$container$);
     }
     function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
         target[prop] = value;
         triggerEffects(currentStore.$container$, currentStore, getEffects(target, prop, currentStore.$effects$));
     }
     function getEffects(target, prop, storeEffects) {
-        let effectsToTrigger = storeEffects
-            ? Array.isArray(target)
-                ? Object.values(storeEffects).flatMap((effects) => effects)
-                : storeEffects[prop]
-            : null;
-        const storeArrayValue = storeEffects?.[STORE_ARRAY_PROP];
+        let effectsToTrigger;
+        if (storeEffects) {
+            if (Array.isArray(target)) {
+                for (const effects of storeEffects.values()) {
+                    effectsToTrigger ||= new Set();
+                    for (const effect of effects) {
+                        effectsToTrigger.add(effect);
+                    }
+                }
+            }
+            else {
+                effectsToTrigger = storeEffects.get(prop);
+            }
+        }
+        const storeArrayValue = storeEffects?.get(STORE_ARRAY_PROP);
         if (storeArrayValue) {
-            effectsToTrigger ||= [];
-            effectsToTrigger.push(...storeArrayValue);
+            effectsToTrigger ||= new Set();
+            for (const effect of storeArrayValue) {
+                effectsToTrigger.add(effect);
+            }
         }
-        return effectsToTrigger;
+        return effectsToTrigger || null;
     }
 
     /**
-     * @internal
-     * The storage provider for hooks. Each invocation increases index i. Data is stored in an array.
+     * Special value used to mark that a given signal needs to be computed. This is essentially a
+     * "marked as dirty" flag.
      */
-    const useSequentialScope = () => {
-        const iCtx = useInvokeContext();
-        const hostElement = iCtx.$hostElement$;
-        const host = hostElement;
-        let seq = iCtx.$container$.getHostProp(host, ELEMENT_SEQ);
-        if (seq === null) {
-            seq = [];
-            iCtx.$container$.setHostProp(host, ELEMENT_SEQ, seq);
-        }
-        let seqIdx = iCtx.$container$.getHostProp(host, ELEMENT_SEQ_IDX);
-        if (seqIdx === null) {
-            seqIdx = 0;
-        }
-        iCtx.$container$.setHostProp(host, ELEMENT_SEQ_IDX, seqIdx + 1);
-        while (seq.length <= seqIdx) {
-            seq.push(undefined);
-        }
-        const set = (value) => {
-            if (qDev && qSerialize) {
-                verifySerializable(value);
-            }
-            return (seq[seqIdx] = value);
-        };
-        return {
-            val: seq[seqIdx],
-            set,
-            i: seqIdx,
-            iCtx,
-        };
-    };
+    const NEEDS_COMPUTATION = Symbol('invalid');
+    /** @internal */
+    const _EFFECT_BACK_REF = Symbol('backRef');
 
-    class Subscriber {
-        $effectDependencies$ = null;
+    /** Class for back reference to the EffectSubscription */
+    class BackRef {
+        [_EFFECT_BACK_REF] = null;
     }
-    function isSubscriber(value) {
-        return value instanceof Subscriber || value instanceof WrappedSignal;
-    }
-    function clearVNodeEffectDependencies(container, value) {
-        if (vnode_isElementVNode(value)) {
-            ensureMaterialized(value);
+    function clearAllEffects(container, consumer) {
+        if (vnode_isVNode(consumer) && vnode_isElementVNode(consumer)) {
+            ensureMaterialized(consumer);
         }
-        const effects = vnode_getProp(value, QSubscribers, container.$getObjectById$);
+        const effects = consumer[_EFFECT_BACK_REF];
         if (!effects) {
             return;
         }
-        for (let i = effects.length - 1; i >= 0; i--) {
-            const subscriber = effects[i];
-            clearEffects(subscriber, value, effects, i, container);
-        }
-        if (effects.length === 0) {
-            vnode_setProp(value, QSubscribers, null);
-        }
-    }
-    function clearSubscriberEffectDependencies(container, value) {
-        if (value.$effectDependencies$) {
-            for (let i = value.$effectDependencies$.length - 1; i >= 0; i--) {
-                const subscriber = value.$effectDependencies$[i];
-                clearEffects(subscriber, value, value.$effectDependencies$, i, container);
-            }
-            if (value.$effectDependencies$.length === 0) {
-                value.$effectDependencies$ = null;
+        for (const [, effect] of effects) {
+            const backRefs = effect[EffectSubscriptionProp.BACK_REF];
+            if (!backRefs) {
+                return;
             }
-        }
-    }
-    function clearEffects(subscriber, value, effectArray, indexToRemove, container) {
-        let subscriptionRemoved = false;
-        const seenSet = new Set();
-        if (subscriber instanceof WrappedSignal) {
-            subscriptionRemoved = clearSignalEffects(subscriber, value, seenSet);
-        }
-        else if (container.$storeProxyMap$.has(subscriber)) {
-            const store = container.$storeProxyMap$.get(subscriber);
-            const handler = getStoreHandler(store);
-            subscriptionRemoved = clearStoreEffects(handler, value);
-        }
-        if (subscriptionRemoved) {
-            effectArray.splice(indexToRemove, 1);
-        }
-    }
-    function clearSignalEffects(subscriber, value, seenSet) {
-        const effectSubscriptions = subscriber.$effects$;
-        let subscriptionRemoved = false;
-        if (effectSubscriptions) {
-            for (let i = effectSubscriptions.length - 1; i >= 0; i--) {
-                const effect = effectSubscriptions[i];
-                if (effect[EffectSubscriptionsProp.EFFECT] === value) {
-                    effectSubscriptions.splice(i, 1);
-                    subscriptionRemoved = true;
+            for (const producer of backRefs) {
+                if (producer instanceof Signal) {
+                    clearSignal(container, producer, effect);
                 }
-            }
-        }
-        if (subscriber instanceof WrappedSignal) {
-            const hostElement = subscriber.$hostElement$;
-            if (hostElement && hostElement === value) {
-                subscriber.$hostElement$ = null;
-            }
-            // clear the effects of the arguments
-            const args = subscriber.$args$;
-            if (args) {
-                clearArgsEffects(args, subscriber, seenSet);
-            }
-        }
-        return subscriptionRemoved;
-    }
-    function clearStoreEffects(storeHandler, value) {
-        const effectSubscriptions = storeHandler.$effects$;
-        if (!effectSubscriptions) {
-            return false;
-        }
-        let subscriptionRemoved = false;
-        for (const key in effectSubscriptions) {
-            const effects = effectSubscriptions[key];
-            for (let i = effects.length - 1; i >= 0; i--) {
-                const effect = effects[i];
-                if (effect[EffectSubscriptionsProp.EFFECT] === value) {
-                    effects.splice(i, 1);
-                    subscriptionRemoved = true;
+                else if (container.$storeProxyMap$.has(producer)) {
+                    const target = container.$storeProxyMap$.get(producer);
+                    const storeHandler = getStoreHandler(target);
+                    clearStore(storeHandler, effect);
                 }
             }
-            if (effects.length === 0) {
-                delete effectSubscriptions[key];
-            }
-        }
-        return subscriptionRemoved;
-    }
-    function clearArgsEffects(args, subscriber, seenSet) {
-        for (let i = args.length - 1; i >= 0; i--) {
-            const arg = args[i];
-            clearArgEffect(arg, subscriber, seenSet);
         }
     }
-    function clearArgEffect(arg, subscriber, seenSet) {
-        if (seenSet.has(arg)) {
-            return;
+    function clearSignal(container, producer, effect) {
+        const effects = producer.$effects$;
+        if (effects) {
+            effects.delete(effect);
         }
-        seenSet.add(arg);
-        if (isSignal(arg)) {
-            clearSignalEffects(arg, subscriber, seenSet);
+        if (producer instanceof WrappedSignal) {
+            producer.$hostElement$ = null;
+            clearAllEffects(container, producer);
         }
-        else if (typeof arg === 'object' && arg !== null) {
-            if (isStore(arg)) {
-                clearStoreEffects(getStoreHandler(arg), subscriber);
-            }
-            else if (isPropsProxy(arg)) {
-                // Separate check for props proxy, because props proxy getter could call signal getter.
-                // To avoid that we need to get the constProps and varProps directly
-                // from the props proxy object and loop over them.
-                const constProps = arg[_CONST_PROPS];
-                const varProps = arg[_VAR_PROPS];
-                if (constProps) {
-                    for (const key in constProps) {
-                        clearArgEffect(constProps[key], subscriber, seenSet);
-                    }
-                }
-                for (const key in varProps) {
-                    clearArgEffect(varProps[key], subscriber, seenSet);
-                }
-            }
-            else {
-                for (const key in arg) {
-                    clearArgEffect(arg[key], subscriber, seenSet);
-                }
+    }
+    function clearStore(producer, effect) {
+        const effects = producer?.$effects$;
+        if (effects) {
+            for (const propEffects of effects.values()) {
+                propEffects.delete(effect);
             }
         }
-        else if (Array.isArray(arg)) {
-            clearArgsEffects(arg, subscriber, seenSet);
-        }
-        else ;
     }
 
-    /** @internal */
-    const useResourceQrl = (qrl, opts) => {
-        const { val, set, i, iCtx } = useSequentialScope();
-        if (val != null) {
-            return val;
-        }
-        assertQrl(qrl);
-        const container = iCtx.$container$;
-        const resource = createResourceReturn(container, opts);
-        const el = iCtx.$hostElement$;
-        const task = new Task(TaskFlags.DIRTY | TaskFlags.RESOURCE, i, el, qrl, resource, null);
-        runResource(task, container, iCtx.$hostElement$);
-        set(resource);
-        return resource;
-    };
-    // <docs markdown="../readme.md#useResource">
+    // <docs markdown="../../readme.md#implicit$FirstArg">
     // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-    // (edit ../readme.md#useResource instead and run `pnpm docs.sync`)
+    // (edit ../../readme.md#implicit$FirstArg instead and run `pnpm docs.sync`)
     /**
-     * This method works like an async memoized function that runs whenever some tracked value changes
-     * and returns some data.
+     * Create a `____$(...)` convenience method from `___(...)`.
      *
-     * `useResource` however returns immediate a `ResourceReturn` object that contains the data and a
-     * state that indicates if the data is available or not.
+     * It is very common for functions to take a lazy-loadable resource as a first argument. For this
+     * reason, the Qwik Optimizer automatically extracts the first argument from any function which ends
+     * in `$`.
      *
-     * The status can be one of the following:
+     * This means that `foo$(arg0)` and `foo($(arg0))` are equivalent with respect to Qwik Optimizer.
+     * The former is just a shorthand for the latter.
      *
-     * - `pending` - the data is not yet available.
-     * - `resolved` - the data is available.
-     * - `rejected` - the data is not available due to an error or timeout.
+     * For example, these function calls are equivalent:
      *
-     * Be careful when using a `try/catch` statement in `useResource$`. If you catch the error and don't
-     * re-throw it (or a new Error), the resource status will never be `rejected`.
+     * - `component$(() => {...})` is same as `component($(() => {...}))`
      *
-     * ### Example
+     * ```tsx
+     * export function myApi(callback: QRL<() => void>): void {
+     *   // ...
+     * }
      *
-     * Example showing how `useResource` to perform a fetch to request the weather, whenever the input
-     * city name changes.
+     * export const myApi$ = implicit$FirstArg(myApi);
+     * // type of myApi$: (callback: () => void): void
      *
-     * ```tsx
-     * const Cmp = component$(() => {
-     *   const cityS = useSignal('');
+     * // can be used as:
+     * myApi$(() => console.log('callback'));
      *
-     *   const weatherResource = useResource$(async ({ track, cleanup }) => {
-     *     const cityName = track(cityS);
-     *     const abortController = new AbortController();
-     *     cleanup(() => abortController.abort('cleanup'));
-     *     const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
-     *       signal: abortController.signal,
-     *     });
-     *     const data = await res.json();
-     *     return data as { temp: number };
-     *   });
+     * // will be transpiled to:
+     * // FILE: <current file>
+     * myApi(qrl('./chunk-abc.js', 'callback'));
      *
-     *   return (
-     *     <div>
-     *       <input name="city" bind:value={cityS} />
-     *       <Resource
-     *         value={weatherResource}
-     *         onResolved={(weather) => {
-     *           return <div>Temperature: {weather.temp}</div>;
-     *         }}
-     *       />
-     *     </div>
-     *   );
-     * });
+     * // FILE: chunk-abc.js
+     * export const callback = () => console.log('callback');
      * ```
      *
+     * @param fn - A function that should have its first argument automatically `$`.
      * @public
-     * @see Resource
-     * @see ResourceReturn
      */
     // </docs>
-    const Resource = (props) => {
-        // Resource path
-        return _jsxSorted(Fragment, null, null, getResourceValueAsPromise(props), 0, null);
+    const implicit$FirstArg = (fn) => {
+        return function (first, ...rest) {
+            return fn.call(null, dollar(first), ...rest);
+        };
     };
-    function getResourceValueAsPromise(props) {
-        const resource = props.value;
-        if (isResourceReturn(resource)) {
-            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));
-                }
-                else if (state === 'rejected' && props.onRejected) {
-                    return Promise.resolve(resource._error).then(useBindInvokeContext(props.onRejected));
-                }
-                else {
-                    const resolvedValue = untrack(() => resource._resolved);
-                    if (resolvedValue !== undefined) {
-                        // resolved, pending without onPending prop or rejected without onRejected prop
-                        return Promise.resolve(resolvedValue).then(useBindInvokeContext(props.onResolved));
-                    }
-                }
-            }
-            return resource.value.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
-        }
-        else if (isPromise(resource)) {
-            return resource.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+
+    const createSignal$1 = (value) => {
+        return new Signal(null, value);
+    };
+    const createComputedSignal = (qrl) => {
+        throwIfQRLNotResolved(qrl);
+        return new ComputedSignal(null, qrl);
+    };
+
+    /**
+     * Creates a Signal with the given value. If no value is given, the signal is created with
+     * `undefined`.
+     *
+     * @public
+     */
+    const createSignal = createSignal$1;
+    /** @internal */
+    const createComputedQrl = createComputedSignal;
+    /**
+     * Create a computed signal which is calculated from the given QRL. A computed signal is a signal
+     * which is calculated from other signals. When the signals change, the computed signal is
+     * recalculated.
+     *
+     * The QRL must be a function which returns the value of the signal. The function must not have side
+     * effects, and it mus be synchronous.
+     *
+     * If you need the function to be async, use `useSignal` and `useTask$` instead.
+     *
+     * @public
+     */
+    const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedQrl);
+
+    /**
+     * @internal
+     * The storage provider for hooks. Each invocation increases index i. Data is stored in an array.
+     */
+    const useSequentialScope = () => {
+        const iCtx = useInvokeContext();
+        const hostElement = iCtx.$hostElement$;
+        const host = hostElement;
+        let seq = iCtx.$container$.getHostProp(host, ELEMENT_SEQ);
+        if (seq === null) {
+            seq = [];
+            iCtx.$container$.setHostProp(host, ELEMENT_SEQ, seq);
         }
-        else if (isSignal(resource)) {
-            return Promise.resolve(resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        let seqIdx = iCtx.$container$.getHostProp(host, ELEMENT_SEQ_IDX);
+        if (seqIdx === null) {
+            seqIdx = 0;
         }
-        else {
-            return Promise.resolve(resource).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        iCtx.$container$.setHostProp(host, ELEMENT_SEQ_IDX, seqIdx + 1);
+        while (seq.length <= seqIdx) {
+            seq.push(undefined);
         }
-    }
-    const _createResourceReturn = (opts) => {
-        const resource = {
-            __brand: 'resource',
-            value: undefined,
-            loading: isServerPlatform() ? false : true,
-            _resolved: undefined,
-            _error: undefined,
-            _state: 'pending',
-            _timeout: opts?.timeout ?? -1,
-            _cache: 0,
+        const set = (value) => {
+            if (qDev && qSerialize) {
+                verifySerializable(value);
+            }
+            return (seq[seqIdx] = value);
+        };
+        return {
+            val: seq[seqIdx],
+            set,
+            i: seqIdx,
+            iCtx,
         };
-        return resource;
-    };
-    const createResourceReturn = (container, opts, initialPromise) => {
-        const result = _createResourceReturn(opts);
-        result.value = initialPromise;
-        return createStore(container, result, StoreFlags.RECURSIVE);
     };
-    const isResourceReturn = (obj) => {
-        return isObject(obj) && (getStoreTarget(obj) || obj).__brand === 'resource';
+
+    function getSubscriber(effect, prop, data) {
+        if (!effect[_EFFECT_BACK_REF]) {
+            if (build.isServer && isSsrNode(effect)) {
+                effect.setProp(QBackRefs, new Map());
+            }
+            else {
+                effect[_EFFECT_BACK_REF] = new Map();
+            }
+        }
+        const subMap = effect[_EFFECT_BACK_REF];
+        let sub = subMap.get(prop);
+        if (!sub) {
+            sub = [effect, prop];
+            subMap.set(prop, sub);
+        }
+        if (data) {
+            sub[EffectSubscriptionProp.DATA] = data;
+        }
+        return sub;
+    }
+    function isSsrNode(value) {
+        return '__brand__' in value && 'currentComponentNode' in value;
+    }
+
+    var TaskFlags;
+    (function (TaskFlags) {
+        TaskFlags[TaskFlags["VISIBLE_TASK"] = 1] = "VISIBLE_TASK";
+        TaskFlags[TaskFlags["TASK"] = 2] = "TASK";
+        TaskFlags[TaskFlags["RESOURCE"] = 4] = "RESOURCE";
+        TaskFlags[TaskFlags["DIRTY"] = 8] = "DIRTY";
+    })(TaskFlags || (TaskFlags = {}));
+    /** @internal */
+    const useTaskQrl = (qrl) => {
+        const { val, set, iCtx, i } = useSequentialScope();
+        if (val) {
+            return;
+        }
+        assertQrl(qrl);
+        set(1);
+        const task = new Task(TaskFlags.DIRTY | TaskFlags.TASK, i, iCtx.$hostElement$, qrl, undefined, null);
+        // In V2 we add the task to the sequential scope. We need to do this
+        // in order to be able to retrieve it later when the parent element is
+        // deleted and we need to be able to release the task subscriptions.
+        set(task);
+        const container = iCtx.$container$;
+        const promise = container.$scheduler$(ChoreType.TASK, task);
+        if (isPromise(promise)) {
+            // TODO: should we handle this differently?
+            promise.catch(() => { });
+        }
     };
-    const runResource = (task, container, host) => {
+    const runTask = (task, container, host) => {
         task.$flags$ &= ~TaskFlags.DIRTY;
         cleanupTask(task);
-        const iCtx = newInvokeContext(container.$locale$, host, undefined, ResourceEvent);
+        const iCtx = newInvokeContext(container.$locale$, host, undefined, TaskEvent);
         iCtx.$container$ = container;
-        const taskFn = task.$qrl$.getFn(iCtx, () => clearSubscriberEffectDependencies(container, task));
-        const resource = task.$state$;
-        assertDefined(resource, 'useResource: when running a resource, "task.resource" must be a defined.', task);
+        const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
         const track = (obj, prop) => {
             const ctx = newInvokeContext();
-            ctx.$effectSubscriber$ = [task, EffectProperty.COMPONENT];
+            ctx.$effectSubscriber$ = getSubscriber(task, EffectProperty.COMPONENT);
             ctx.$container$ = container;
             return invoke(ctx, () => {
                 if (isFunction(obj)) {
@@ -1562,115 +1593,85 @@
                     return obj.value;
                 }
                 else {
-                    return obj;
+                    throw qError(QError.trackObjectWithoutProp);
                 }
             });
         };
         const handleError = (reason) => container.handleError(reason, host);
-        const cleanups = [];
-        task.$destroy$ = noSerialize(() => {
-            cleanups.forEach((fn) => {
-                try {
-                    fn();
-                }
-                catch (err) {
-                    handleError(err);
+        let cleanupFns = null;
+        const cleanup = (fn) => {
+            if (typeof fn == 'function') {
+                if (!cleanupFns) {
+                    cleanupFns = [];
+                    task.$destroy$ = noSerialize(() => {
+                        task.$destroy$ = null;
+                        cleanupFns.forEach((fn) => {
+                            try {
+                                fn();
+                            }
+                            catch (err) {
+                                handleError(err);
+                            }
+                        });
+                    });
                 }
-            });
-            done = true;
+                cleanupFns.push(fn);
+            }
+        };
+        const taskApi = { track, cleanup };
+        const result = 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));
+            }
+            else {
+                throw err;
+            }
         });
-        const resourceTarget = unwrapStore(resource);
-        const opts = {
-            track,
-            cleanup(fn) {
-                if (typeof fn === 'function') {
-                    cleanups.push(fn);
-                }
-            },
-            cache(policy) {
-                let milliseconds = 0;
-                if (policy === 'immutable') {
-                    milliseconds = Infinity;
-                }
-                else {
-                    milliseconds = policy;
-                }
-                resource._cache = milliseconds;
-            },
-            previous: resourceTarget._resolved,
-        };
-        let resolve;
-        let reject;
-        let done = false;
-        const setState = (resolved, value) => {
-            if (!done) {
-                done = true;
-                if (resolved) {
-                    done = true;
-                    resource.loading = false;
-                    resource._state = 'resolved';
-                    resource._resolved = value;
-                    resource._error = undefined;
-                    resolve(value);
-                }
-                else {
-                    done = true;
-                    resource.loading = false;
-                    resource._state = 'rejected';
-                    resource._error = value;
-                    reject(value);
-                }
-                return true;
-            }
-            return false;
-        };
-        /**
-         * Add cleanup to resolve the resource if we are trying to run the same resource again while the
-         * previous one is not resolved yet. The next `runResource` run will call this cleanup
-         */
-        cleanups.push(() => {
-            if (untrack(() => resource.loading) === true) {
-                const value = untrack(() => resource._resolved);
-                setState(true, value);
-            }
-        });
-        // Execute mutation inside empty invocation
-        invoke(iCtx, () => {
-            // console.log('RESOURCE.pending: ');
-            resource._state = 'pending';
-            resource.loading = !isServerPlatform();
-            const promise = (resource.value = new Promise((r, re) => {
-                resolve = r;
-                reject = re;
-            }));
-            promise.catch(ignoreErrorToPreventNodeFromCrashing);
-        });
-        const promise = safeCall(() => Promise.resolve(taskFn(opts)), (value) => {
-            setState(true, value);
-        }, (err) => {
-            if (isPromise(err)) {
-                return err.then(() => runResource(task, container, host));
+        return result;
+    };
+    const cleanupTask = (task) => {
+        const destroy = task.$destroy$;
+        if (destroy) {
+            task.$destroy$ = null;
+            try {
+                destroy();
             }
-            else {
-                setState(false, err);
+            catch (err) {
+                logError(err);
             }
-        });
-        const timeout = resourceTarget._timeout;
-        if (timeout > 0) {
-            return Promise.race([
-                promise,
-                delay(timeout).then(() => {
-                    if (setState(false, new Error('timeout'))) {
-                        cleanupTask(task);
-                    }
-                }),
-            ]);
         }
-        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.
+    class Task extends BackRef {
+        $flags$;
+        $index$;
+        $el$;
+        $qrl$;
+        $state$;
+        $destroy$;
+        constructor($flags$, $index$, $el$, $qrl$, $state$, $destroy$) {
+            super();
+            this.$flags$ = $flags$;
+            this.$index$ = $index$;
+            this.$el$ = $el$;
+            this.$qrl$ = $qrl$;
+            this.$state$ = $state$;
+            this.$destroy$ = $destroy$;
+        }
+    }
+    const isTask = (value) => {
+        return value instanceof Task;
+    };
+    /**
+     * Used internally as a qrl event handler to schedule a task.
+     *
+     * @internal
+     */
+    const scheduleTask = (_event, element) => {
+        const [task] = useLexicalScope();
+        const type = task.$flags$ & TaskFlags.VISIBLE_TASK ? ChoreType.VISIBLE : ChoreType.TASK;
+        const container = getDomContainer(element);
+        container.$scheduler$(type, task);
     };
 
     /** @file Public types for the client deserialization */
@@ -1748,22 +1749,67 @@
         VirtualVNodeProps[VirtualVNodeProps["PROPS_OFFSET"] = 6] = "PROPS_OFFSET";
     })(VirtualVNodeProps || (VirtualVNodeProps = {}));
 
-    const isForeignObjectElement = (elementName) => elementName.toLowerCase() === 'foreignobject';
+    const mapApp_findIndx = (elementVNode, key, start) => {
+        assertTrue(start % 2 === 0, 'Expecting even number.');
+        let bottom = start >> 1;
+        let top = (elementVNode.length - 2) >> 1;
+        while (bottom <= top) {
+            const mid = bottom + ((top - bottom) >> 1);
+            const midKey = elementVNode[mid << 1];
+            if (midKey === key) {
+                return mid << 1;
+            }
+            if (midKey < key) {
+                bottom = mid + 1;
+            }
+            else {
+                top = mid - 1;
+            }
+        }
+        return (bottom << 1) ^ -1;
+    };
+    const mapArray_set = (elementVNode, key, value, start) => {
+        const indx = mapApp_findIndx(elementVNode, key, start);
+        if (indx >= 0) {
+            if (value == null) {
+                elementVNode.splice(indx, 2);
+            }
+            else {
+                elementVNode[indx + 1] = value;
+            }
+        }
+        else if (value != null) {
+            elementVNode.splice(indx ^ -1, 0, key, value);
+        }
+    };
+    const mapArray_get = (elementVNode, key, start) => {
+        const indx = mapApp_findIndx(elementVNode, key, start);
+        if (indx >= 0) {
+            return elementVNode[indx + 1];
+        }
+        else {
+            return null;
+        }
+    };
+
+    const isForeignObjectElement = (elementName) => {
+        return build.isDev ? elementName.toLowerCase() === 'foreignobject' : elementName === 'foreignObject';
+    };
     const isSvgElement = (elementName) => elementName === 'svg' || isForeignObjectElement(elementName);
     const isMathElement = (elementName) => elementName === 'math';
     const vnode_isDefaultNamespace = (vnode) => {
         const flags = vnode[VNodeProps.flags];
         return (flags & VNodeFlags.NAMESPACE_MASK) === 0;
     };
-    const vnode_getElementNamespaceFlags = (elementName) => {
-        if (isSvgElement(elementName)) {
-            return VNodeFlags.NS_svg;
-        }
-        else if (isMathElement(elementName)) {
-            return VNodeFlags.NS_math;
-        }
-        else {
-            return VNodeFlags.NS_html;
+    const vnode_getElementNamespaceFlags = (element) => {
+        const namespace = fastNamespaceURI(element);
+        switch (namespace) {
+            case SVG_NS:
+                return VNodeFlags.NS_svg;
+            case MATH_NS:
+                return VNodeFlags.NS_math;
+            default:
+                return VNodeFlags.NS_html;
         }
     };
     function vnode_getDomChildrenWithCorrectNamespacesToInsert(journal, domParentVNode, newChild) {
@@ -2117,19 +2163,21 @@
      * @returns
      */
     const executeComponent = (container, renderHost, subscriptionHost, componentQRL, props) => {
-        const iCtx = newInvokeContext(container.$locale$, subscriptionHost, undefined, RenderEvent);
-        iCtx.$effectSubscriber$ = [subscriptionHost, EffectProperty.COMPONENT];
-        iCtx.$container$ = container;
+        const iCtx = newInvokeContext(container.$locale$, subscriptionHost || undefined, undefined, RenderEvent);
+        if (subscriptionHost) {
+            iCtx.$effectSubscriber$ = getSubscriber(subscriptionHost, EffectProperty.COMPONENT);
+            iCtx.$container$ = container;
+        }
         let componentFn;
         container.ensureProjectionResolved(renderHost);
         let isInlineComponent = false;
         if (componentQRL === null) {
-            componentQRL = componentQRL || container.getHostProp(renderHost, OnRenderProp);
+            componentQRL = container.getHostProp(renderHost, OnRenderProp);
             assertDefined(componentQRL, 'No Component found at this location');
         }
-        if (isQrl(componentQRL)) {
+        if (isQrl$1(componentQRL)) {
             props = props || container.getHostProp(renderHost, ELEMENT_PROPS) || EMPTY_OBJ;
-            if (props && props.children) {
+            if (props.children) {
                 delete props.children;
             }
             componentFn = componentQRL.getFn(iCtx);
@@ -2147,18 +2195,16 @@
             if (!isInlineComponent) {
                 container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
                 container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
-                if (container.getHostProp(renderHost, ELEMENT_PROPS) !== props) {
-                    container.setHostProp(renderHost, ELEMENT_PROPS, props);
-                }
+                container.setHostProp(renderHost, ELEMENT_PROPS, props);
             }
             if (vnode_isVNode(renderHost)) {
-                clearVNodeEffectDependencies(container, renderHost);
+                clearAllEffects(container, renderHost);
             }
             return componentFn(props);
         }, (jsx) => {
             const useOnEvents = container.getHostProp(renderHost, USE_ON_LOCAL);
             if (useOnEvents) {
-                return maybeThen(addUseOnEvents(jsx, useOnEvents), () => jsx);
+                return addUseOnEvents(jsx, useOnEvents);
             }
             return jsx;
         }, (err) => {
@@ -2184,6 +2230,7 @@
      */
     function addUseOnEvents(jsx, useOnEvents) {
         const jsxElement = findFirstStringJSX(jsx);
+        let jsxResult = jsx;
         return maybeThen(jsxElement, (jsxElement) => {
             let isInvisibleComponent = false;
             if (!jsxElement) {
@@ -2202,13 +2249,15 @@
                 if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) {
                     if (isInvisibleComponent) {
                         if (key === 'onQvisible$') {
-                            jsxElement = addScriptNodeForInvisibleComponents(jsx);
+                            const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
+                            jsxResult = jsx;
                             if (jsxElement) {
                                 addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]);
                             }
                         }
                         else if (key.startsWith('document:') || key.startsWith('window:')) {
-                            jsxElement = addScriptNodeForInvisibleComponents(jsx);
+                            const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
+                            jsxResult = jsx;
                             if (jsxElement) {
                                 addUseOnEvent(jsxElement, key, useOnEvents[key]);
                             }
@@ -2226,7 +2275,7 @@
                     }
                 }
             }
-            return jsxElement;
+            return jsxResult;
         });
     }
     function addUseOnEvent(jsxElement, key, value) {
@@ -2272,6 +2321,9 @@
                 type: 'placeholder',
                 hidden: '',
             }, null, 3);
+            if (jsx.type === Slot) {
+                return [jsxElement, _jsxSorted(Fragment, null, null, [jsx, jsxElement], 0, null)];
+            }
             if (jsx.children == null) {
                 jsx.children = jsxElement;
             }
@@ -2281,15 +2333,23 @@
             else {
                 jsx.children = [jsx.children, jsxElement];
             }
-            return jsxElement;
+            return [jsxElement, jsx];
         }
         else if (Array.isArray(jsx) && jsx.length) {
             // get first element
-            return addScriptNodeForInvisibleComponents(jsx[0]);
+            const [jsxElement, _] = addScriptNodeForInvisibleComponents(jsx[0]);
+            return [jsxElement, jsx];
         }
-        return null;
+        return [null, null];
     }
 
+    /** @internal */
+    const _CONST_PROPS = Symbol('CONST');
+    /** @internal */
+    const _VAR_PROPS = Symbol('VAR');
+    /** @internal @deprecated v1 compat */
+    const _IMMUTABLE = Symbol('IMMUTABLE');
+
     function isSlotProp(prop) {
         return !prop.startsWith('q:') && !prop.startsWith(NON_SERIALIZABLE_MARKER_PREFIX);
     }
@@ -2298,12 +2358,24 @@
     }
     /** @internal */
     const _restProps = (props, omit, target = {}) => {
-        for (const key in props) {
+        let constPropsTarget = null;
+        const constProps = props[_CONST_PROPS];
+        if (constProps) {
+            for (const key in constProps) {
+                if (!omit.includes(key)) {
+                    constPropsTarget ||= {};
+                    constPropsTarget[key] = constProps[key];
+                }
+            }
+        }
+        const varPropsTarget = target;
+        const varProps = props[_VAR_PROPS];
+        for (const key in varProps) {
             if (!omit.includes(key)) {
-                target[key] = props[key];
+                varPropsTarget[key] = varProps[key];
             }
         }
-        return target;
+        return createPropsProxy(varPropsTarget, constPropsTarget);
     };
 
     function escapeHTML(html) {
@@ -2345,17 +2417,6 @@
         }
     }
 
-    function getFileLocationFromJsx(jsxDev) {
-        if (!jsxDev) {
-            return null;
-        }
-        const sanitizedFileName = jsxDev.fileName?.replace(/\\/g, '/');
-        if (sanitizedFileName) {
-            return `${sanitizedFileName}:${jsxDev.lineNumber}:${jsxDev.columnNumber}`;
-        }
-        return null;
-    }
-
     const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         let journal = container.$journal$;
         /**
@@ -2374,9 +2435,9 @@
         /// (Node can be null, if we are at the end of the list.)
         let vCurrent = null;
         /// When we insert new node we start it here so that we can descend into it.
-        /// NOTE: it can't be stored in `vCurrent` because `vNewCurrent` is in journal
+        /// NOTE: it can't be stored in `vCurrent` because `vNewNode` is in journal
         /// and is not connected to the tree.
-        let vNewNode = null; // TODO: delete, because journal is on vNode, the above comment no longer applies
+        let vNewNode = null;
         /// When elements have keys they can be consumed out of order and therefore we can't use nextSibling.
         /// In such a case this array will contain the elements after the current location.
         /// The array even indices will contains keys and odd indices the vNode.
@@ -2429,7 +2490,7 @@
                         }
                         else if (isSignal(jsxValue)) {
                             if (vCurrent) {
-                                clearVNodeEffectDependencies(container, vCurrent);
+                                clearAllEffects(container, vCurrent);
                             }
                             expectVirtual(VirtualType.WrappedSignal, null);
                             descend(trackSignalAndAssignHost(jsxValue, (vNewNode || vCurrent), EffectProperty.VNODE, container), true);
@@ -2644,9 +2705,10 @@
             };
             const projections = [];
             if (host) {
+                const props = vnode_getProps(host);
                 // we need to create empty projections for all the slots to remove unused slots content
-                for (let i = vnode_getPropStartIndex(host); i < host.length; i = i + 2) {
-                    const prop = host[i];
+                for (let i = 0; i < props.length; i = i + 2) {
+                    const prop = props[i];
                     if (isSlotProp(prop)) {
                         const slotName = prop;
                         projections.push(slotName);
@@ -2814,10 +2876,19 @@
                         // But we need to mark them so that they don't get pulled into the diff.
                         const eventName = getEventNameFromJsxProp(key);
                         const scope = getEventNameScopeFromJsxProp(key);
-                        vnode_setProp(vNewNode, HANDLER_PREFIX + ':' + scope + ':' + eventName, value);
                         if (eventName) {
+                            vnode_setProp(vNewNode, HANDLER_PREFIX + ':' + scope + ':' + eventName, value);
                             registerQwikLoaderEvent(eventName);
                         }
+                        if (scope) {
+                            // add an event attr with empty value for qwikloader element selector.
+                            // We don't need value here. For ssr this value is a QRL,
+                            // but for CSR value should be just empty
+                            const htmlEvent = convertEventNameFromJsxPropToHtmlAttr(key);
+                            if (htmlEvent) {
+                                vnode_setAttr(journal, vNewNode, htmlEvent, '');
+                            }
+                        }
                         needsQDispatchEventPatch = true;
                         continue;
                     }
@@ -2830,12 +2901,15 @@
                             value(element);
                             continue;
                         }
+                        else if (value == null) {
+                            continue;
+                        }
                         else {
                             throw qError(QError.invalidRefValue, [currentFile]);
                         }
                     }
                     if (isSignal(value)) {
-                        const signalData = new EffectPropData({
+                        const signalData = new SubscriptionData({
                             $scopedStyleIdPrefix$: scopedStyleIdPrefix,
                             $isConst$: true,
                         });
@@ -2939,7 +3013,7 @@
                         let returnValue = false;
                         qrls.flat(2).forEach((qrl) => {
                             if (qrl) {
-                                const value = qrl(event, element);
+                                const value = container.$scheduler$(ChoreType.RUN_QRL, vNode, qrl, [event, element]);
                                 returnValue = returnValue || value === true;
                             }
                         });
@@ -2951,10 +3025,10 @@
         /** @param tag Returns true if `qDispatchEvent` needs patching */
         function setBulkProps(vnode, srcAttrs, currentFile) {
             vnode_ensureElementInflated(vnode);
-            const dstAttrs = vnode;
+            const dstAttrs = vnode_getProps(vnode);
             let srcIdx = 0;
             const srcLength = srcAttrs.length;
-            let dstIdx = ElementVNodeProps.PROPS_OFFSET;
+            let dstIdx = 0;
             let dstLength = dstAttrs.length;
             let srcKey = srcIdx < srcLength ? srcAttrs[srcIdx++] : null;
             let dstKey = dstIdx < dstLength ? dstAttrs[dstIdx++] : null;
@@ -2974,12 +3048,15 @@
                         value(element);
                         return;
                     }
+                    else if (value == null) {
+                        return;
+                    }
                     else {
                         throw qError(QError.invalidRefValue, [currentFile]);
                     }
                 }
                 if (isSignal(value)) {
-                    const signalData = new EffectPropData({
+                    const signalData = new SubscriptionData({
                         $scopedStyleIdPrefix$: scopedStyleIdPrefix,
                         $isConst$: false,
                     });
@@ -2993,21 +3070,21 @@
             };
             const recordJsxEvent = (key, value) => {
                 const eventName = getEventNameFromJsxProp(key);
+                const scope = getEventNameScopeFromJsxProp(key);
                 if (eventName) {
-                    const scope = getEventNameScopeFromJsxProp(key);
                     record(':' + scope + ':' + eventName, value);
-                }
-                // add an event attr with empty value for qwikloader element selector.
-                // We don't need value here. For ssr this value is a QRL,
-                // but for CSR value should be just empty
-                const htmlEvent = convertEventNameFromJsxPropToHtmlAttr(key);
-                if (htmlEvent) {
-                    record(htmlEvent, '');
-                }
-                // register an event for qwik loader
-                if (eventName) {
+                    // register an event for qwik loader
                     registerQwikLoaderEvent(eventName);
                 }
+                if (scope) {
+                    // add an event attr with empty value for qwikloader element selector.
+                    // We don't need value here. For ssr this value is a QRL,
+                    // but for CSR value should be just empty
+                    const htmlEvent = convertEventNameFromJsxPropToHtmlAttr(key);
+                    if (htmlEvent) {
+                        record(htmlEvent, '');
+                    }
+                }
             };
             while (srcKey !== null || dstKey !== null) {
                 if (dstKey?.startsWith(HANDLER_PREFIX) || dstKey?.startsWith(Q_PREFIX)) {
@@ -3203,10 +3280,6 @@
                 else if (!hashesAreEqual) {
                     insertNewComponent(host, componentQRL, jsxProps);
                     if (vNewNode) {
-                        if (host) {
-                            // TODO(varixo): not sure why we need to copy flags here.
-                            vNewNode[VNodeProps.flags] = host[VNodeProps.flags];
-                        }
                         host = vNewNode;
                         shouldRender = true;
                     }
@@ -3259,7 +3332,7 @@
         }
         function insertNewComponent(host, componentQRL, jsxProps) {
             if (host) {
-                clearVNodeEffectDependencies(container, host);
+                clearAllEffects(container, host);
             }
             vnode_insertBefore(journal, vParent, (vNewNode = vnode_newVirtual()), vCurrent && getInsertBefore());
             const jsxNode = jsxValue;
@@ -3347,8 +3420,8 @@
         if (!src || !dst) {
             return true;
         }
-        let srcKeys = removePropsKeys(Object.keys(src), ['children', QSubscribers]);
-        let dstKeys = removePropsKeys(Object.keys(dst), ['children', QSubscribers]);
+        let srcKeys = removePropsKeys(Object.keys(src), ['children', QBackRefs]);
+        let dstKeys = removePropsKeys(Object.keys(dst), ['children', QBackRefs]);
         if (srcKeys.length !== dstKeys.length) {
             return true;
         }
@@ -3394,7 +3467,7 @@
         do {
             const type = vCursor[VNodeProps.flags];
             if (type & VNodeFlags.ELEMENT_OR_VIRTUAL_MASK) {
-                clearVNodeEffectDependencies(container, vCursor);
+                clearAllEffects(container, vCursor);
                 markVNodeAsDeleted(vCursor);
                 // Only elements and virtual nodes need to be traversed for children
                 if (type & VNodeFlags.Virtual) {
@@ -3404,7 +3477,7 @@
                             const obj = seq[i];
                             if (isTask(obj)) {
                                 const task = obj;
-                                clearSubscriberEffectDependencies(container, task);
+                                clearAllEffects(container, task);
                                 if (task.$flags$ & TaskFlags.VISIBLE_TASK) {
                                     container.$scheduler$(ChoreType.CLEANUP_VISIBLE, task);
                                 }
@@ -3419,8 +3492,8 @@
                     vnode_getProp(vCursor, OnRenderProp, null) !== null;
                 if (isComponent) {
                     // SPECIAL CASE: If we are a component, we need to descend into the projected content and release the content.
-                    const attrs = vCursor;
-                    for (let i = VirtualVNodeProps.PROPS_OFFSET; i < attrs.length; i = i + 2) {
+                    const attrs = vnode_getProps(vCursor);
+                    for (let i = 0; i < attrs.length; i = i + 2) {
                         const key = attrs[i];
                         if (!isParentSlotProp(key) && isSlotProp(key)) {
                             const value = attrs[i + 1];
@@ -3528,82 +3601,270 @@
         SiblingsArray[SiblingsArray["NextVNode"] = 5] = "NextVNode";
     })(SiblingsArray || (SiblingsArray = {}));
 
-    // <docs markdown="../../readme.md#implicit$FirstArg">
+    /** @internal */
+    const useResourceQrl = (qrl, opts) => {
+        const { val, set, i, iCtx } = useSequentialScope();
+        if (val != null) {
+            return val;
+        }
+        assertQrl(qrl);
+        const container = iCtx.$container$;
+        const resource = createResourceReturn(container, opts);
+        const el = iCtx.$hostElement$;
+        const task = new Task(TaskFlags.DIRTY | TaskFlags.RESOURCE, i, el, qrl, resource, null);
+        container.$scheduler$(ChoreType.TASK, task);
+        set(resource);
+        return resource;
+    };
+    // <docs markdown="../readme.md#useResource">
     // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-    // (edit ../../readme.md#implicit$FirstArg instead and run `pnpm docs.sync`)
+    // (edit ../readme.md#useResource instead and run `pnpm docs.sync`)
     /**
-     * Create a `____$(...)` convenience method from `___(...)`.
+     * This method works like an async memoized function that runs whenever some tracked value changes
+     * and returns some data.
      *
-     * It is very common for functions to take a lazy-loadable resource as a first argument. For this
-     * reason, the Qwik Optimizer automatically extracts the first argument from any function which ends
-     * in `$`.
+     * `useResource` however returns immediate a `ResourceReturn` object that contains the data and a
+     * state that indicates if the data is available or not.
      *
-     * This means that `foo$(arg0)` and `foo($(arg0))` are equivalent with respect to Qwik Optimizer.
-     * The former is just a shorthand for the latter.
+     * The status can be one of the following:
      *
-     * For example, these function calls are equivalent:
+     * - `pending` - the data is not yet available.
+     * - `resolved` - the data is available.
+     * - `rejected` - the data is not available due to an error or timeout.
      *
-     * - `component$(() => {...})` is same as `component($(() => {...}))`
+     * Be careful when using a `try/catch` statement in `useResource$`. If you catch the error and don't
+     * re-throw it (or a new Error), the resource status will never be `rejected`.
      *
-     * ```tsx
-     * export function myApi(callback: QRL<() => void>): void {
-     *   // ...
-     * }
+     * ### Example
      *
-     * export const myApi$ = implicit$FirstArg(myApi);
-     * // type of myApi$: (callback: () => void): void
+     * Example showing how `useResource` to perform a fetch to request the weather, whenever the input
+     * city name changes.
      *
-     * // can be used as:
-     * myApi$(() => console.log('callback'));
+     * ```tsx
+     * const Cmp = component$(() => {
+     *   const cityS = useSignal('');
      *
-     * // will be transpiled to:
-     * // FILE: <current file>
-     * myApi(qrl('./chunk-abc.js', 'callback'));
+     *   const weatherResource = useResource$(async ({ track, cleanup }) => {
+     *     const cityName = track(cityS);
+     *     const abortController = new AbortController();
+     *     cleanup(() => abortController.abort('cleanup'));
+     *     const res = await fetch(`http://weatherdata.com?city=${cityName}`, {
+     *       signal: abortController.signal,
+     *     });
+     *     const data = await res.json();
+     *     return data as { temp: number };
+     *   });
      *
-     * // FILE: chunk-abc.js
-     * export const callback = () => console.log('callback');
+     *   return (
+     *     <div>
+     *       <input name="city" bind:value={cityS} />
+     *       <Resource
+     *         value={weatherResource}
+     *         onResolved={(weather) => {
+     *           return <div>Temperature: {weather.temp}</div>;
+     *         }}
+     *       />
+     *     </div>
+     *   );
+     * });
      * ```
      *
-     * @param fn - A function that should have its first argument automatically `$`.
      * @public
+     * @see Resource
+     * @see ResourceReturn
      */
     // </docs>
-    const implicit$FirstArg = (fn) => {
-        return function (first, ...rest) {
-            return fn.call(null, dollar(first), ...rest);
+    const Resource = (props) => {
+        // Resource path
+        return _jsxSorted(Fragment, null, null, getResourceValueAsPromise(props), 0, null);
+    };
+    function getResourceValueAsPromise(props) {
+        const resource = props.value;
+        if (isResourceReturn(resource) && resource.value) {
+            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));
+                }
+                else if (state === 'rejected' && props.onRejected) {
+                    return Promise.resolve(resource._error).then(useBindInvokeContext(props.onRejected));
+                }
+                else {
+                    const resolvedValue = untrack(() => resource._resolved);
+                    if (resolvedValue !== undefined) {
+                        // resolved, pending without onPending prop or rejected without onRejected prop
+                        return Promise.resolve(resolvedValue).then(useBindInvokeContext(props.onResolved));
+                    }
+                }
+            }
+            return resource.value.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        }
+        else if (isPromise(resource)) {
+            return resource.then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        }
+        else if (isSignal(resource)) {
+            return Promise.resolve(resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        }
+        else {
+            return Promise.resolve(resource).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+        }
+    }
+    const _createResourceReturn = (opts) => {
+        const resource = {
+            __brand: 'resource',
+            value: undefined,
+            loading: isServerPlatform() ? false : true,
+            _resolved: undefined,
+            _error: undefined,
+            _state: 'pending',
+            _timeout: opts?.timeout ?? -1,
+            _cache: 0,
         };
+        return resource;
     };
-
-    const createSignal$1 = (value) => {
-        return new Signal(null, value);
+    const createResourceReturn = (container, opts, initialPromise) => {
+        const result = _createResourceReturn(opts);
+        result.value = initialPromise;
+        return createStore(container, result, StoreFlags.RECURSIVE);
     };
-    const createComputedSignal = (qrl) => {
-        throwIfQRLNotResolved(qrl);
-        return new ComputedSignal(null, qrl);
+    const isResourceReturn = (obj) => {
+        return isObject(obj) && (getStoreTarget(obj) || obj).__brand === 'resource';
+    };
+    const runResource = (task, container, host) => {
+        task.$flags$ &= ~TaskFlags.DIRTY;
+        cleanupTask(task);
+        const iCtx = newInvokeContext(container.$locale$, host, undefined, ResourceEvent);
+        iCtx.$container$ = container;
+        const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
+        const resource = task.$state$;
+        assertDefined(resource, 'useResource: when running a resource, "task.resource" must be a defined.', task);
+        const track = (obj, prop) => {
+            const ctx = newInvokeContext();
+            ctx.$effectSubscriber$ = getSubscriber(task, EffectProperty.COMPONENT);
+            ctx.$container$ = container;
+            return invoke(ctx, () => {
+                if (isFunction(obj)) {
+                    return obj();
+                }
+                if (prop) {
+                    return obj[prop];
+                }
+                else if (isSignal(obj)) {
+                    return obj.value;
+                }
+                else {
+                    return obj;
+                }
+            });
+        };
+        const handleError = (reason) => container.handleError(reason, host);
+        const cleanups = [];
+        task.$destroy$ = noSerialize(() => {
+            cleanups.forEach((fn) => {
+                try {
+                    fn();
+                }
+                catch (err) {
+                    handleError(err);
+                }
+            });
+            done = true;
+        });
+        const resourceTarget = unwrapStore(resource);
+        const opts = {
+            track,
+            cleanup(fn) {
+                if (typeof fn === 'function') {
+                    cleanups.push(fn);
+                }
+            },
+            cache(policy) {
+                let milliseconds = 0;
+                if (policy === 'immutable') {
+                    milliseconds = Infinity;
+                }
+                else {
+                    milliseconds = policy;
+                }
+                resource._cache = milliseconds;
+            },
+            previous: resourceTarget._resolved,
+        };
+        let resolve;
+        let reject;
+        let done = false;
+        const setState = (resolved, value) => {
+            if (!done) {
+                done = true;
+                if (resolved) {
+                    done = true;
+                    resource.loading = false;
+                    resource._state = 'resolved';
+                    resource._resolved = value;
+                    resource._error = undefined;
+                    resolve(value);
+                }
+                else {
+                    done = true;
+                    resource.loading = false;
+                    resource._state = 'rejected';
+                    resource._error = value;
+                    reject(value);
+                }
+                return true;
+            }
+            return false;
+        };
+        /**
+         * Add cleanup to resolve the resource if we are trying to run the same resource again while the
+         * previous one is not resolved yet. The next `runResource` run will call this cleanup
+         */
+        cleanups.push(() => {
+            if (untrack(() => resource.loading) === true) {
+                const value = untrack(() => resource._resolved);
+                setState(true, value);
+            }
+        });
+        // Execute mutation inside empty invocation
+        invoke(iCtx, () => {
+            // console.log('RESOURCE.pending: ');
+            resource._state = 'pending';
+            resource.loading = !isServerPlatform();
+            const promise = (resource.value = new Promise((r, re) => {
+                resolve = r;
+                reject = re;
+            }));
+            promise.catch(ignoreErrorToPreventNodeFromCrashing);
+        });
+        const promise = safeCall(() => Promise.resolve(taskFn(opts)), (value) => {
+            setState(true, value);
+        }, (err) => {
+            if (isPromise(err)) {
+                return err.then(() => runResource(task, container, host));
+            }
+            else {
+                setState(false, err);
+            }
+        });
+        const timeout = resourceTarget._timeout;
+        if (timeout > 0) {
+            return Promise.race([
+                promise,
+                delay(timeout).then(() => {
+                    if (setState(false, new Error('timeout'))) {
+                        cleanupTask(task);
+                    }
+                }),
+            ]);
+        }
+        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.
     };
-
-    /**
-     * Creates a Signal with the given value. If no value is given, the signal is created with
-     * `undefined`.
-     *
-     * @public
-     */
-    const createSignal = createSignal$1;
-    /** @internal */
-    const createComputedQrl = createComputedSignal;
-    /**
-     * Create a computed signal which is calculated from the given QRL. A computed signal is a signal
-     * which is calculated from other signals. When the signals change, the computed signal is
-     * recalculated.
-     *
-     * The QRL must be a function which returns the value of the signal. The function must not have side
-     * effects, and it mus be synchronous.
-     *
-     * If you need the function to be async, use `useSignal` and `useTask$` instead.
-     *
-     * @public
-     */
-    const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedQrl);
 
     /// These global variables are used to avoid creating new arrays for each call to `vnode_documentPosition`.
     const aVNodePath = [];
@@ -3788,38 +4049,29 @@
      * - Visible Tasks are sorted afterJournalFlush, than depth first on component and finally in
      *   declaration order within component.
      */
-    var ChoreType;
-    (function (ChoreType) {
-        /// MASKS defining three levels of sorting
-        ChoreType[ChoreType["MACRO"] = 240] = "MACRO";
-        /* order of elements (not encoded here) */
-        ChoreType[ChoreType["MICRO"] = 15] = "MICRO";
-        /** Ensure tha the QRL promise is resolved before processing next chores in the queue */
-        ChoreType[ChoreType["QRL_RESOLVE"] = 1] = "QRL_RESOLVE";
-        ChoreType[ChoreType["RESOURCE"] = 2] = "RESOURCE";
-        ChoreType[ChoreType["TASK"] = 3] = "TASK";
-        ChoreType[ChoreType["NODE_DIFF"] = 4] = "NODE_DIFF";
-        ChoreType[ChoreType["NODE_PROP"] = 5] = "NODE_PROP";
-        ChoreType[ChoreType["COMPONENT_SSR"] = 6] = "COMPONENT_SSR";
-        ChoreType[ChoreType["COMPONENT"] = 7] = "COMPONENT";
-        ChoreType[ChoreType["RECOMPUTE_AND_SCHEDULE_EFFECTS"] = 8] = "RECOMPUTE_AND_SCHEDULE_EFFECTS";
-        ChoreType[ChoreType["JOURNAL_FLUSH"] = 16] = "JOURNAL_FLUSH";
-        ChoreType[ChoreType["VISIBLE"] = 32] = "VISIBLE";
-        ChoreType[ChoreType["CLEANUP_VISIBLE"] = 48] = "CLEANUP_VISIBLE";
-        ChoreType[ChoreType["WAIT_FOR_ALL"] = 255] = "WAIT_FOR_ALL";
-    })(ChoreType || (ChoreType = {}));
+    // Turn this on to get debug output of what the scheduler is doing.
+    const DEBUG$1 = false;
+    const getPromise = (chore) => (chore.$promise$ ||= new Promise((resolve) => {
+        chore.$resolve$ = resolve;
+    }));
     const createScheduler = (container, scheduleDrain, journalFlush) => {
         const choreQueue = [];
+        const qrlRuns = [];
         let currentChore = null;
-        let journalFlushScheduled = false;
+        let drainScheduled = false;
         return schedule;
         ///// IMPLEMENTATION /////
         function schedule(type, hostOrTask = null, targetOrQrl = null, payload = null) {
-            const runLater = type !== ChoreType.WAIT_FOR_ALL && type !== ChoreType.COMPONENT_SSR;
-            const isTask = type === ChoreType.TASK ||
-                type === ChoreType.VISIBLE ||
-                type === ChoreType.RESOURCE ||
-                type === ChoreType.CLEANUP_VISIBLE;
+            const isServer = !isDomContainer(container);
+            const isComponentSsr = isServer && type === ChoreType.COMPONENT;
+            const runLater = type !== ChoreType.WAIT_FOR_ALL && !isComponentSsr && type !== ChoreType.RUN_QRL;
+            const isTask = type === ChoreType.TASK || type === ChoreType.VISIBLE || type === ChoreType.CLEANUP_VISIBLE;
+            const isClientOnly = type === ChoreType.JOURNAL_FLUSH ||
+                type === ChoreType.NODE_DIFF ||
+                type === ChoreType.NODE_PROP;
+            if (isServer && isClientOnly) {
+                return;
+            }
             if (isTask) {
                 hostOrTask.$flags$ |= TaskFlags.DIRTY;
             }
@@ -3838,192 +4090,234 @@
                 $returnValue$: null,
                 $executed$: false,
             };
-            chore.$promise$ = new Promise((resolve) => (chore.$resolve$ = resolve));
             chore = sortedInsert(choreQueue, chore, container.rootVNode || null);
-            if (!journalFlushScheduled && runLater) {
+            if (!drainScheduled && runLater) {
                 // If we are not currently draining, we need to schedule a drain.
-                journalFlushScheduled = true;
+                drainScheduled = true;
                 schedule(ChoreType.JOURNAL_FLUSH);
-                scheduleDrain();
+                // Catch here to avoid unhandled promise rejection
+                scheduleDrain()?.catch?.(() => { });
             }
+            // TODO figure out what to do with chore errors
             if (runLater) {
-                return chore.$promise$;
+                return getPromise(chore);
             }
             else {
-                return drainUpTo(chore, container.rootVNode || null);
+                return drainUpTo(chore, isServer);
             }
         }
-        /**
-         * Execute all of the chores up to and including the given chore.
-         *
-         * @param runUptoChore
-         */
-        function drainUpTo(runUptoChore, rootVNode) {
-            // If it already ran, it's not in the queue
-            if (runUptoChore.$executed$) {
-                return runUptoChore.$returnValue$;
-            }
-            if (currentChore) {
-                // Already running chore, which means we're waiting for async completion
-                return runUptoChore.$promise$;
-            }
+        /** Execute all of the chores up to and including the given chore. */
+        function drainUpTo(runUptoChore, isServer) {
+            let maxRetries = 5000;
             while (choreQueue.length) {
-                const nextChore = choreQueue.shift();
-                const order = choreComparator(nextChore, runUptoChore, rootVNode);
-                if (order === null) {
-                    continue;
+                if (maxRetries-- < 0) {
+                    throw new Error('drainUpTo: max retries reached');
                 }
-                if (order > 0) {
-                    // we have processed all of the chores up to and including the given chore.
-                    break;
+                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$);
+                    });
+                }
+                const nextChore = choreQueue[0];
+                if (nextChore.$executed$) {
+                    choreQueue.shift();
+                    if (nextChore === runUptoChore) {
+                        break;
+                    }
+                    continue;
                 }
-                const isDeletedVNode = vNodeAlreadyDeleted(nextChore);
-                if (isDeletedVNode &&
+                if (vNodeAlreadyDeleted(nextChore) &&
                     // we need to process cleanup tasks for deleted nodes
                     nextChore.$type$ !== ChoreType.CLEANUP_VISIBLE) {
+                    choreQueue.shift();
                     continue;
                 }
-                const returnValue = executeChore(nextChore);
-                if (isPromise(returnValue)) {
-                    const promise = returnValue.then(() => drainUpTo(runUptoChore, rootVNode));
-                    return promise;
-                }
+                executeChore(nextChore, isServer);
             }
             return runUptoChore.$returnValue$;
         }
-        function executeChore(chore) {
+        function executeChore(chore, isServer) {
             const host = chore.$host$;
             assertEqual(currentChore, null, 'Chore already running.');
             currentChore = chore;
             let returnValue = null;
-            switch (chore.$type$) {
-                case ChoreType.JOURNAL_FLUSH:
-                    returnValue = journalFlush();
-                    journalFlushScheduled = false;
-                    break;
-                case ChoreType.COMPONENT:
-                case ChoreType.COMPONENT_SSR:
-                    returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
-                        if (chore.$type$ === ChoreType.COMPONENT) {
-                            const styleScopedId = container.getHostProp(host, QScopedStyle);
-                            return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
+            try {
+                switch (chore.$type$) {
+                    case ChoreType.WAIT_FOR_ALL:
+                        {
+                            if (isServer) {
+                                drainScheduled = false;
+                            }
                         }
-                        else {
-                            return jsx;
+                        break;
+                    case ChoreType.JOURNAL_FLUSH:
+                        {
+                            returnValue = journalFlush();
+                            drainScheduled = false;
+                        }
+                        break;
+                    case ChoreType.COMPONENT:
+                        {
+                            returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
+                                if (isServer) {
+                                    return jsx;
+                                }
+                                else {
+                                    const styleScopedId = container.getHostProp(host, QScopedStyle);
+                                    return retryOnPromise(() => vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId)));
+                                }
+                            }, (err) => container.handleError(err, host));
+                        }
+                        break;
+                    case 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$1 &&
+                                    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 ChoreType.TASK:
+                    case ChoreType.VISIBLE:
+                        {
+                            const payload = chore.$payload$;
+                            if (payload.$flags$ & 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 {
+                                returnValue = runTask(payload, container, host);
+                            }
+                        }
+                        break;
+                    case ChoreType.CLEANUP_VISIBLE:
+                        {
+                            const task = chore.$payload$;
+                            cleanupTask(task);
+                        }
+                        break;
+                    case 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 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 (isConst) {
+                                const element = virtualNode[ElementVNodeProps.element];
+                                journal.push(VNodeJournalOpCode.SetAttribute, element, property, serializedValue);
+                            }
+                            else {
+                                vnode_setAttr(journal, virtualNode, property, serializedValue);
+                            }
+                        }
+                        break;
+                    case ChoreType.QRL_RESOLVE: {
+                        {
+                            const target = chore.$target$;
+                            returnValue = !target.resolved ? target.resolve() : null;
                         }
-                    }, (err) => container.handleError(err, host));
-                    break;
-                case ChoreType.RESOURCE:
-                    // 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.
-                    const result = runResource(chore.$payload$, container, host);
-                    returnValue = isDomContainer(container) ? null : result;
-                    break;
-                case ChoreType.TASK:
-                    returnValue = runTask(chore.$payload$, container, host);
-                    break;
-                case ChoreType.VISIBLE:
-                    returnValue = runTask(chore.$payload$, container, host);
-                    break;
-                case ChoreType.CLEANUP_VISIBLE:
-                    const task = chore.$payload$;
-                    cleanupTask(task);
-                    break;
-                case 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 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 (isConst) {
-                        const element = virtualNode[ElementVNodeProps.element];
-                        journal.push(VNodeJournalOpCode.SetAttribute, element, property, serializedValue);
-                    }
-                    else {
-                        vnode_setAttr(journal, virtualNode, property, serializedValue);
-                    }
-                    break;
-                case ChoreType.QRL_RESOLVE: {
-                    const target = chore.$target$;
-                    returnValue = !target.resolved ? target.resolve() : null;
-                    break;
-                }
-                case ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS: {
-                    const target = chore.$target$;
-                    const forceRunEffects = target.$forceRunEffects$;
-                    target.$forceRunEffects$ = false;
-                    if (!target.$effects$?.length) {
                         break;
                     }
-                    returnValue = retryOnPromise(() => {
-                        if (target.$computeIfNeeded$() || forceRunEffects) {
-                            triggerEffects(container, target, target.$effects$);
+                    case ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS: {
+                        {
+                            const target = chore.$target$;
+                            const forceRunEffects = target.$forceRunEffects$;
+                            target.$forceRunEffects$ = false;
+                            if (!target.$effects$?.size) {
+                                break;
+                            }
+                            returnValue = retryOnPromise(() => {
+                                if (target.$computeIfNeeded$() || forceRunEffects) {
+                                    triggerEffects(container, target, target.$effects$);
+                                }
+                            });
                         }
-                    });
-                    break;
+                        break;
+                    }
                 }
             }
-            return maybeThenPassError(returnValue, (value) => {
-                if (currentChore) {
-                    currentChore.$executed$ = true;
-                    currentChore.$resolve$?.(value);
-                }
+            catch (e) {
+                returnValue = Promise.reject(e);
+            }
+            const after = (value, error) => {
                 currentChore = null;
-                return (chore.$returnValue$ = value);
-            });
-        }
-    };
-    const toNumber = (value) => {
-        return typeof value === 'number' ? value : -1;
-    };
-    /**
-     * When a derived signal is update we need to run vnode_diff. However the signal can update multiple
-     * times during component execution. For this reason it is necessary for us to update the schedule
-     * work with the latest result of the signal.
-     */
-    const choreUpdate = (existing, newChore) => {
-        if (existing.$type$ === ChoreType.NODE_DIFF) {
-            existing.$payload$ = newChore.$payload$;
-        }
-    };
-    function vNodeAlreadyDeleted(chore) {
-        return !!(chore.$host$ &&
-            vnode_isVNode(chore.$host$) &&
-            chore.$host$[VNodeProps.flags] & VNodeFlags.Deleted);
-    }
-    /**
-     * Compares two chores to determine their execution order in the scheduler's queue.
-     *
-     * @param a - The first chore to compare
-     * @param b - The second chore to compare
-     * @returns A number indicating the relative order of the chores. A negative number means `a` runs
-     *   before `b`.
-     */
-    function choreComparator(a, b, rootVNode) {
-        const macroTypeDiff = (a.$type$ & ChoreType.MACRO) - (b.$type$ & ChoreType.MACRO);
-        if (macroTypeDiff !== 0) {
-            return macroTypeDiff;
+                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);
+            }
         }
-        // JOURNAL_FLUSH does not have a host or $idx$, so we can't compare it.
-        if (a.$type$ !== ChoreType.JOURNAL_FLUSH) {
+        /**
+         * Compares two chores to determine their execution order in the scheduler's queue.
+         *
+         * @param a - The first chore to compare
+         * @param b - The second chore to compare
+         * @returns A number indicating the relative order of the chores. A negative number means `a` runs
+         *   before `b`.
+         */
+        function choreComparator(a, b, rootVNode) {
+            const macroTypeDiff = (a.$type$ & ChoreType.MACRO) - (b.$type$ & ChoreType.MACRO);
+            if (macroTypeDiff !== 0) {
+                return macroTypeDiff;
+            }
             const aHost = a.$host$;
             const bHost = b.$host$;
-            // QRL_RESOLVE does not have a host.
             if (aHost !== bHost && aHost !== null && bHost !== null) {
                 if (vnode_isVNode(aHost) && vnode_isVNode(bHost)) {
                     // we are running on the client.
@@ -4033,6 +4327,8 @@
                     }
                 }
                 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
@@ -4052,247 +4348,114 @@
             if (microTypeDiff !== 0) {
                 return microTypeDiff;
             }
+            // types are the same
             const idxDiff = toNumber(a.$idx$) - toNumber(b.$idx$);
-            if (idxDiff !== 0) {
-                return idxDiff;
-            }
-            // If the host is the same, we need to compare the target.
-            if (a.$target$ !== b.$target$ &&
-                ((a.$type$ === ChoreType.QRL_RESOLVE && b.$type$ === ChoreType.QRL_RESOLVE) ||
-                    (a.$type$ === ChoreType.NODE_PROP && b.$type$ === ChoreType.NODE_PROP) ||
-                    (a.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS &&
-                        b.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS))) {
-                // 1 means that we are going to process chores as FIFO
-                return 1;
-            }
-        }
-        return 0;
-    }
-    function sortedFindIndex(sortedArray, value, rootVNode) {
-        /// We need to ensure that the `queue` is sorted by priority.
-        /// 1. Find a place where to insert into.
-        let bottom = 0;
-        let top = sortedArray.length;
-        while (bottom < top) {
-            const middle = bottom + ((top - bottom) >> 1);
-            const midChore = sortedArray[middle];
-            const comp = choreComparator(value, midChore, rootVNode);
-            if (comp < 0) {
-                top = middle;
-            }
-            else if (comp > 0) {
-                bottom = middle + 1;
-            }
-            else {
-                // We already have the host in the queue.
-                return middle;
-            }
-        }
-        return ~bottom;
-    }
-    function sortedInsert(sortedArray, value, rootVNode) {
-        /// 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) {
-            /// 2. Insert the chore into the queue.
-            sortedArray.splice(~idx, 0, value);
-            return value;
-        }
-        const existing = sortedArray[idx];
-        choreUpdate(existing, value);
-        return existing;
-    }
-
-    // <docs markdown="../readme.md#useLexicalScope">
-    // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-    // (edit ../readme.md#useLexicalScope instead and run `pnpm docs.sync`)
-    /**
-     * Used by the Qwik Optimizer to restore the lexically scoped variables.
-     *
-     * This method should not be present in the application source code.
-     *
-     * NOTE: `useLexicalScope` method can only be used in the synchronous portion of the callback
-     * (before any `await` statements.)
-     *
-     * @internal
-     */
-    // </docs>
-    const useLexicalScope = () => {
-        const context = getInvokeContext();
-        let qrl = context.$qrl$;
-        if (!qrl) {
-            const el = context.$element$;
-            assertDefined(el, 'invoke: element must be defined inside useLexicalScope()', context);
-            const containerElement = _getQContainerElement(el);
-            assertDefined(containerElement, `invoke: cant find parent q:container of`, el);
-            const container = getDomContainer(containerElement);
-            qrl = container.parseQRL(decodeURIComponent(String(context.$url$)));
-        }
-        else {
-            assertQrl(qrl);
-            assertDefined(qrl.$captureRef$, 'invoke: qrl $captureRef$ must be defined inside useLexicalScope()', qrl);
-        }
-        return qrl.$captureRef$;
-    };
-
-    var TaskFlags;
-    (function (TaskFlags) {
-        TaskFlags[TaskFlags["VISIBLE_TASK"] = 1] = "VISIBLE_TASK";
-        TaskFlags[TaskFlags["TASK"] = 2] = "TASK";
-        TaskFlags[TaskFlags["RESOURCE"] = 4] = "RESOURCE";
-        TaskFlags[TaskFlags["DIRTY"] = 8] = "DIRTY";
-    })(TaskFlags || (TaskFlags = {}));
-    /** @internal */
-    const useTaskQrl = (qrl, opts) => {
-        const { val, set, iCtx, i } = useSequentialScope();
-        if (val) {
-            return;
-        }
-        assertQrl(qrl);
-        set(1);
-        const host = iCtx.$hostElement$;
-        const task = new Task(TaskFlags.DIRTY | TaskFlags.TASK, i, iCtx.$hostElement$, qrl, undefined, null);
-        // In V2 we add the task to the sequential scope. We need to do this
-        // in order to be able to retrieve it later when the parent element is
-        // deleted and we need to be able to release the task subscriptions.
-        set(task);
-        const result = runTask(task, iCtx.$container$, host);
-        if (isPromise(result)) {
-            throw result;
-        }
-        qrl.$resolveLazy$(iCtx.$element$);
-        if (isServerPlatform()) {
-            useRunTask(task, opts?.eagerness);
-        }
-    };
-    const runTask = (task, container, host) => {
-        task.$flags$ &= ~TaskFlags.DIRTY;
-        cleanupTask(task);
-        const iCtx = newInvokeContext(container.$locale$, host, undefined, TaskEvent);
-        iCtx.$container$ = container;
-        const taskFn = task.$qrl$.getFn(iCtx, () => clearSubscriberEffectDependencies(container, task));
-        const track = (obj, prop) => {
-            const ctx = newInvokeContext();
-            ctx.$effectSubscriber$ = [task, EffectProperty.COMPONENT];
-            ctx.$container$ = container;
-            return invoke(ctx, () => {
-                if (isFunction(obj)) {
-                    return obj();
-                }
-                if (prop) {
-                    return obj[prop];
-                }
-                else if (isSignal(obj)) {
-                    return obj.value;
-                }
-                else {
-                    return obj;
-                }
-            });
-        };
-        const handleError = (reason) => container.handleError(reason, host);
-        let cleanupFns = null;
-        const cleanup = (fn) => {
-            if (typeof fn == 'function') {
-                if (!cleanupFns) {
-                    cleanupFns = [];
-                    task.$destroy$ = noSerialize(() => {
-                        task.$destroy$ = null;
-                        cleanupFns.forEach((fn) => {
-                            try {
-                                fn();
-                            }
-                            catch (err) {
-                                handleError(err);
-                            }
-                        });
-                    });
-                }
-                cleanupFns.push(fn);
-            }
-        };
-        const taskApi = { track, cleanup };
-        const result = safeCall(() => taskFn(taskApi), cleanup, (err) => {
-            if (isPromise(err)) {
-                return err.then(() => runTask(task, container, host));
-            }
-            else {
-                return handleError(err);
+            if (idxDiff !== 0) {
+                return idxDiff;
             }
-        });
-        return result;
-    };
-    const cleanupTask = (task) => {
-        const destroy = task.$destroy$;
-        if (destroy) {
-            task.$destroy$ = null;
-            try {
-                destroy();
+            // If the host is the same (or missing), and the type is the same,  we need to compare the target.
+            if (a.$target$ !== b.$target$ || a.$payload$ !== b.$payload$) {
+                // 1 means that we are going to process chores as FIFO
+                return 1;
             }
-            catch (err) {
-                logError(err);
+            // If the chore is the same as the current chore, we will run it again
+            if (b === currentChore) {
+                return 1;
             }
+            // The chores are the same and will run only once
+            return 0;
         }
-    };
-    const useRunTask = (task, eagerness) => {
-        if (eagerness === 'visible' || eagerness === 'intersection-observer') {
-            useOn('qvisible', getTaskHandlerQrl(task));
-        }
-        else if (eagerness === 'load' || eagerness === 'document-ready') {
-            useOnDocument('qinit', getTaskHandlerQrl(task));
+        function sortedFindIndex(sortedArray, value, rootVNode) {
+            /// We need to ensure that the `queue` is sorted by priority.
+            /// 1. Find a place where to insert into.
+            let bottom = 0;
+            let top = sortedArray.length;
+            while (bottom < top) {
+                const middle = bottom + ((top - bottom) >> 1);
+                const midChore = sortedArray[middle];
+                const comp = choreComparator(value, midChore, rootVNode);
+                if (comp < 0) {
+                    top = middle;
+                }
+                else if (comp > 0) {
+                    bottom = middle + 1;
+                }
+                else {
+                    // We already have the host in the queue.
+                    return middle;
+                }
+            }
+            return ~bottom;
         }
-        else if (eagerness === 'idle' || eagerness === 'document-idle') {
-            useOnDocument('qidle', getTaskHandlerQrl(task));
+        function sortedInsert(sortedArray, value, rootVNode) {
+            /// 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) {
+                /// 2. Insert the chore into the queue.
+                sortedArray.splice(~idx, 0, value);
+                return value;
+            }
+            const existing = sortedArray[idx];
+            /**
+             * When a derived signal is updated we need to run vnode_diff. However the signal can update
+             * multiple times during component execution. For this reason it is necessary for us to update
+             * the chore with the latest result of the signal.
+             */
+            if (existing.$type$ === ChoreType.NODE_DIFF) {
+                existing.$payload$ = value.$payload$;
+            }
+            if (existing.$executed$) {
+                existing.$executed$ = false;
+            }
+            return existing;
         }
     };
-    const getTaskHandlerQrl = (task) => {
-        const taskQrl = task.$qrl$;
-        const taskHandler = createQRL(taskQrl.$chunk$, '_hW', _hW, null, null, [task], taskQrl.$symbol$);
-        // Needed for chunk lookup in dev mode
-        if (taskQrl.dev) {
-            taskHandler.dev = taskQrl.dev;
-        }
-        return taskHandler;
+    const toNumber = (value) => {
+        return typeof value === 'number' ? value : -1;
     };
-    class Task extends Subscriber {
-        $flags$;
-        $index$;
-        $el$;
-        $qrl$;
-        $state$;
-        $destroy$;
-        constructor($flags$, $index$, $el$, $qrl$, $state$, $destroy$) {
-            super();
-            this.$flags$ = $flags$;
-            this.$index$ = $index$;
-            this.$el$ = $el$;
-            this.$qrl$ = $qrl$;
-            this.$state$ = $state$;
-            this.$destroy$ = $destroy$;
+    function vNodeAlreadyDeleted(chore) {
+        return !!(chore.$host$ &&
+            vnode_isVNode(chore.$host$) &&
+            chore.$host$[VNodeProps.flags] & VNodeFlags.Deleted);
+    }
+    function debugChoreTypeToString(type) {
+        return ({
+            [ChoreType.QRL_RESOLVE]: 'QRL_RESOLVE',
+            [ChoreType.RUN_QRL]: 'RUN_QRL',
+            [ChoreType.TASK]: 'TASK',
+            [ChoreType.NODE_DIFF]: 'NODE_DIFF',
+            [ChoreType.NODE_PROP]: 'NODE_PROP',
+            [ChoreType.COMPONENT]: 'COMPONENT',
+            [ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS]: 'RECOMPUTE_SIGNAL',
+            [ChoreType.JOURNAL_FLUSH]: 'JOURNAL_FLUSH',
+            [ChoreType.VISIBLE]: 'VISIBLE',
+            [ChoreType.CLEANUP_VISIBLE]: 'CLEANUP_VISIBLE',
+            [ChoreType.WAIT_FOR_ALL]: 'WAIT_FOR_ALL',
+        }[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$ === ChoreType.QRL_RESOLVE || chore.$type$ === 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));
+            });
         }
+        // eslint-disable-next-line no-console
+        console.log(lines.join('\n') + '\n');
     }
-    const isTask = (value) => {
-        return value instanceof Task;
-    };
-    /**
-     * Low-level API used by the Optimizer to process `useTask$()` API. This method is not intended to
-     * be used by developers.
-     *
-     * @internal
-     */
-    const _hW = () => {
-        const [task] = useLexicalScope();
-        const container = getDomContainer(task.$el$);
-        const type = task.$flags$ & TaskFlags.VISIBLE_TASK ? ChoreType.VISIBLE : ChoreType.TASK;
-        container.$scheduler$(type, task);
-    };
-
-    /**
-     * Special value used to mark that a given signal needs to be computed. This is essentially a
-     * "marked as dirty" flag.
-     */
-    const NEEDS_COMPUTATION = Symbol('invalid');
 
     /**
      * @file
@@ -4326,18 +4489,19 @@
         return value instanceof Signal;
     };
     /** @internal */
-    class EffectPropData {
+    class SubscriptionData {
         data;
         constructor(data) {
             this.data = data;
         }
     }
-    var EffectSubscriptionsProp;
-    (function (EffectSubscriptionsProp) {
-        EffectSubscriptionsProp[EffectSubscriptionsProp["EFFECT"] = 0] = "EFFECT";
-        EffectSubscriptionsProp[EffectSubscriptionsProp["PROPERTY"] = 1] = "PROPERTY";
-        EffectSubscriptionsProp[EffectSubscriptionsProp["FIRST_BACK_REF_OR_DATA"] = 2] = "FIRST_BACK_REF_OR_DATA";
-    })(EffectSubscriptionsProp || (EffectSubscriptionsProp = {}));
+    var EffectSubscriptionProp;
+    (function (EffectSubscriptionProp) {
+        EffectSubscriptionProp[EffectSubscriptionProp["CONSUMER"] = 0] = "CONSUMER";
+        EffectSubscriptionProp[EffectSubscriptionProp["PROPERTY"] = 1] = "PROPERTY";
+        EffectSubscriptionProp[EffectSubscriptionProp["BACK_REF"] = 2] = "BACK_REF";
+        EffectSubscriptionProp[EffectSubscriptionProp["DATA"] = 3] = "DATA";
+    })(EffectSubscriptionProp || (EffectSubscriptionProp = {}));
     var EffectProperty;
     (function (EffectProperty) {
         EffectProperty["COMPONENT"] = ":";
@@ -4374,19 +4538,16 @@
                 }
                 const effectSubscriber = ctx.$effectSubscriber$;
                 if (effectSubscriber) {
-                    const effects = (this.$effects$ ||= []);
+                    const effects = (this.$effects$ ||= new Set());
                     // Let's make sure that we have a reference to this effect.
                     // Adding reference is essentially adding a subscription, so if the signal
                     // changes we know who to notify.
-                    ensureContainsEffect(effects, effectSubscriber);
+                    ensureContainsSubscription(effects, effectSubscriber);
                     // But when effect is scheduled in needs to be able to know which signals
                     // to unsubscribe from. So we need to store the reference from the effect back
                     // to this signal.
-                    ensureContains(effectSubscriber, this);
-                    if (isSubscriber(this)) {
-                        // We need to add the subscriber to the effect so that we can clean it up later
-                        ensureEffectContainsSubscriber(effectSubscriber[EffectSubscriptionsProp.EFFECT], this, this.$container$);
-                    }
+                    ensureContainsBackRef(effectSubscriber, this);
+                    addQrlToSerializationCtx(effectSubscriber, this.$container$);
                 }
             }
             return this.untrackedValue;
@@ -4405,122 +4566,97 @@
         }
         toString() {
             return (`[${this.constructor.name}${this.$invalid$ ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
-                (this.$effects$?.map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    ')).join('\n') || ''));
+                (Array.from(this.$effects$ || [])
+                    .map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    '))
+                    .join('\n') || ''));
         }
         toJSON() {
             return { value: this.$untrackedValue$ };
         }
     }
-    /** Ensure the item is in array (do nothing if already there) */
-    const ensureContains = (array, value) => {
-        const isMissing = array.indexOf(value) === -1;
-        if (isMissing) {
-            array.push(value);
-        }
-    };
-    const ensureContainsEffect = (array, effectSubscriptions) => {
-        for (let i = 0; i < array.length; i++) {
-            const existingEffect = array[i];
-            if (existingEffect[0] === effectSubscriptions[0] &&
-                existingEffect[1] === effectSubscriptions[1]) {
-                return;
-            }
-        }
-        array.push(effectSubscriptions);
+    const ensureContainsSubscription = (array, effectSubscription) => {
+        array.add(effectSubscription);
     };
-    const ensureEffectContainsSubscriber = (effect, subscriber, container) => {
-        if (isSubscriber(effect)) {
-            effect.$effectDependencies$ ||= [];
-            if (subscriberExistInSubscribers(effect.$effectDependencies$, subscriber)) {
-                return;
+    /** Ensure the item is in back refs set */
+    const ensureContainsBackRef = (array, value) => {
+        array[EffectSubscriptionProp.BACK_REF] ||= new Set();
+        array[EffectSubscriptionProp.BACK_REF].add(value);
+    };
+    const addQrlToSerializationCtx = (effectSubscriber, container) => {
+        if (!!container && !isDomContainer(container)) {
+            const effect = effectSubscriber[EffectSubscriptionProp.CONSUMER];
+            const property = effectSubscriber[EffectSubscriptionProp.PROPERTY];
+            let qrl = null;
+            if (isTask(effect)) {
+                qrl = effect.$qrl$;
             }
-            effect.$effectDependencies$.push(subscriber);
-        }
-        else if (vnode_isVNode(effect) && !vnode_isTextVNode(effect)) {
-            let subscribers = vnode_getProp(effect, QSubscribers, container ? container.$getObjectById$ : null);
-            subscribers ||= [];
-            if (subscriberExistInSubscribers(subscribers, subscriber)) {
-                return;
+            else if (effect instanceof ComputedSignal) {
+                qrl = effect.$computeQrl$;
             }
-            subscribers.push(subscriber);
-            vnode_setProp(effect, QSubscribers, subscribers);
-        }
-        else if (isSSRNode(effect)) {
-            let subscribers = effect.getProp(QSubscribers);
-            subscribers ||= [];
-            if (subscriberExistInSubscribers(subscribers, subscriber)) {
-                return;
+            else if (property === EffectProperty.COMPONENT) {
+                qrl = container.getHostProp(effect, OnRenderProp);
             }
-            subscribers.push(subscriber);
-            effect.setProp(QSubscribers, subscribers);
-        }
-    };
-    const isSSRNode = (effect) => {
-        return 'setProp' in effect && 'getProp' in effect && 'removeProp' in effect && 'id' in effect;
-    };
-    const subscriberExistInSubscribers = (subscribers, subscriber) => {
-        for (let i = 0; i < subscribers.length; i++) {
-            if (subscribers[i] === subscriber) {
-                return true;
+            if (qrl) {
+                container.serializationCtx.$eventQrls$.add(qrl);
             }
         }
-        return false;
     };
     const triggerEffects = (container, signal, effects) => {
+        const isBrowser = isDomContainer(container);
         if (effects) {
-            const scheduleEffect = (effectSubscriptions) => {
-                const effect = effectSubscriptions[EffectSubscriptionsProp.EFFECT];
-                const property = effectSubscriptions[EffectSubscriptionsProp.PROPERTY];
+            const scheduleEffect = (effectSubscription) => {
+                const consumer = effectSubscription[EffectSubscriptionProp.CONSUMER];
+                const property = effectSubscription[EffectSubscriptionProp.PROPERTY];
                 assertDefined(container, 'Container must be defined.');
-                if (isTask(effect)) {
-                    effect.$flags$ |= TaskFlags.DIRTY;
+                if (isTask(consumer)) {
+                    consumer.$flags$ |= TaskFlags.DIRTY;
                     let choreType = ChoreType.TASK;
-                    if (effect.$flags$ & TaskFlags.VISIBLE_TASK) {
+                    if (consumer.$flags$ & TaskFlags.VISIBLE_TASK) {
                         choreType = ChoreType.VISIBLE;
                     }
-                    else if (effect.$flags$ & TaskFlags.RESOURCE) {
-                        choreType = ChoreType.RESOURCE;
-                    }
-                    container.$scheduler$(choreType, effect);
+                    container.$scheduler$(choreType, consumer);
                 }
-                else if (effect instanceof Signal) {
+                else if (consumer instanceof Signal) {
                     // we don't schedule ComputedSignal/DerivedSignal directly, instead we invalidate it and
                     // and schedule the signals effects (recursively)
-                    if (effect instanceof ComputedSignal) {
+                    if (consumer instanceof ComputedSignal) {
                         // Ensure that the computed signal's QRL is resolved.
                         // If not resolved schedule it to be resolved.
-                        if (!effect.$computeQrl$.resolved) {
-                            container.$scheduler$(ChoreType.QRL_RESOLVE, null, effect.$computeQrl$);
+                        if (!consumer.$computeQrl$.resolved) {
+                            container.$scheduler$(ChoreType.QRL_RESOLVE, null, consumer.$computeQrl$);
                         }
                     }
-                    effect.$invalidate$();
+                    consumer.$invalidate$();
                 }
                 else if (property === EffectProperty.COMPONENT) {
-                    const host = effect;
+                    const host = consumer;
                     const qrl = container.getHostProp(host, OnRenderProp);
                     assertDefined(qrl, 'Component must have QRL');
                     const props = container.getHostProp(host, ELEMENT_PROPS);
                     container.$scheduler$(ChoreType.COMPONENT, host, qrl, props);
                 }
-                else if (property === EffectProperty.VNODE) {
-                    const host = effect;
-                    const target = host;
-                    container.$scheduler$(ChoreType.NODE_DIFF, host, target, signal);
-                }
-                else {
-                    const host = effect;
-                    const effectData = effectSubscriptions[EffectSubscriptionsProp.FIRST_BACK_REF_OR_DATA];
-                    if (effectData instanceof EffectPropData) {
-                        const data = effectData.data;
-                        const payload = {
-                            ...data,
-                            $value$: signal,
-                        };
-                        container.$scheduler$(ChoreType.NODE_PROP, host, property, payload);
+                else if (isBrowser) {
+                    if (property === EffectProperty.VNODE) {
+                        const host = consumer;
+                        container.$scheduler$(ChoreType.NODE_DIFF, host, host, signal);
+                    }
+                    else {
+                        const host = consumer;
+                        const effectData = effectSubscription[EffectSubscriptionProp.DATA];
+                        if (effectData instanceof SubscriptionData) {
+                            const data = effectData.data;
+                            const payload = {
+                                ...data,
+                                $value$: signal,
+                            };
+                            container.$scheduler$(ChoreType.NODE_PROP, host, property, payload);
+                        }
                     }
                 }
             };
-            effects.forEach(scheduleEffect);
+            for (const effect of effects) {
+                scheduleEffect(effect);
+            }
         }
     };
     /**
@@ -4578,7 +4714,7 @@
             throwIfQRLNotResolved(computeQrl);
             const ctx = tryGetInvokeContext();
             const previousEffectSubscription = ctx?.$effectSubscriber$;
-            ctx && (ctx.$effectSubscriber$ = [this, EffectProperty.VNODE]);
+            ctx && (ctx.$effectSubscriber$ = getSubscriber(this, EffectProperty.VNODE));
             try {
                 const untrackedValue = computeQrl.getFn(ctx)();
                 if (isPromise(untrackedValue)) {
@@ -4616,9 +4752,9 @@
         // 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
         $invalid$ = true;
-        $effectDependencies$ = null;
         $hostElement$ = null;
         $forceRunEffects$ = false;
+        [_EFFECT_BACK_REF] = null;
         constructor(container, fn, args, fnStr) {
             super(container, NEEDS_COMPUTATION);
             this.$args$ = args;
@@ -4686,7 +4822,7 @@
         if (jsx.key !== null) {
             host.setProp(ELEMENT_KEY, jsx.key);
         }
-        return scheduler(ChoreType.COMPONENT_SSR, host, componentQrl, srcProps);
+        return scheduler(ChoreType.COMPONENT, host, componentQrl, srcProps);
     };
 
     class ParentComponentData {
@@ -4698,21 +4834,10 @@
         }
     }
     /** @internal */
-    function _walkJSX(ssr, value, options) {
+    async function _walkJSX(ssr, value, options) {
         const stack = [value];
-        let resolveDrain;
-        let rejectDrain;
-        const drained = options.allowPromises &&
-            new Promise((res, rej) => {
-                resolveDrain = res;
-                rejectDrain = rej;
-            });
         const enqueue = (value) => stack.push(value);
-        const resolveValue = (value) => {
-            stack.push(value);
-            drain();
-        };
-        const drain = () => {
+        const drain = async () => {
             while (stack.length) {
                 const value = stack.pop();
                 if (value instanceof ParentComponentData) {
@@ -4722,20 +4847,10 @@
                 }
                 else if (typeof value === 'function') {
                     if (value === Promise) {
-                        if (!options.allowPromises) {
-                            throw qError(QError.promisesNotExpected);
-                        }
-                        stack.pop().then(resolveValue, rejectDrain);
-                        return;
-                    }
-                    const waitOn = value.apply(ssr);
-                    if (waitOn) {
-                        if (!options.allowPromises) {
-                            throw qError(QError.promisesNotExpected);
-                        }
-                        waitOn.then(drain, rejectDrain);
-                        return;
+                        stack.push(await stack.pop());
+                        continue;
                     }
+                    await value.apply(ssr);
                     continue;
                 }
                 processJSXNode(ssr, enqueue, value, {
@@ -4743,12 +4858,8 @@
                     parentComponentFrame: options.parentComponentFrame,
                 });
             }
-            if (stack.length === 0 && options.allowPromises) {
-                resolveDrain();
-            }
         };
-        drain();
-        return drained;
+        await drain();
     }
     function processJSXNode(ssr, enqueue, value, options) {
         // console.log('processJSXNode', value);
@@ -4787,7 +4898,6 @@
                 enqueue(async () => {
                     for await (const chunk of value) {
                         await _walkJSX(ssr, chunk, {
-                            allowPromises: true,
                             currentStyleScoped: options.styleScoped,
                             parentComponentFrame: options.parentComponentFrame,
                         });
@@ -4874,7 +4984,6 @@
                             value = generator({
                                 async write(chunk) {
                                     await _walkJSX(ssr, chunk, {
-                                        allowPromises: true,
                                         currentStyleScoped: options.styleScoped,
                                         parentComponentFrame: options.parentComponentFrame,
                                     });
@@ -5031,11 +5140,23 @@
         const appendToValue = (valueToAppend) => {
             value = (value == null ? '' : value + '\n') + valueToAppend;
         };
+        const getQrlString = (qrl) => {
+            /**
+             * If there are captures we need to schedule so everything is executed in the right order + qrls
+             * are resolved.
+             *
+             * For internal qrls (starting with `_`) we assume that they do the right thing.
+             */
+            if (!qrl.$symbol$.startsWith('_') && (qrl.$captureRef$ || qrl.$capture$)) {
+                qrl = createQRL(null, '_run', queueQRL, null, null, [qrl]);
+            }
+            return qrlToString(serializationCtx, qrl);
+        };
         if (Array.isArray(qrls)) {
             for (let i = 0; i <= qrls.length; i++) {
                 const qrl = qrls[i];
-                if (isQrl(qrl)) {
-                    appendToValue(qrlToString(serializationCtx, qrl));
+                if (isQrl$1(qrl)) {
+                    appendToValue(getQrlString(qrl));
                     addQwikEventToSerializationContext(serializationCtx, key, qrl);
                 }
                 else if (qrl != null) {
@@ -5047,8 +5168,8 @@
                 }
             }
         }
-        else if (isQrl(qrls)) {
-            value = qrlToString(serializationCtx, qrls);
+        else if (isQrl$1(qrls)) {
+            value = getQrlString(qrls);
             addQwikEventToSerializationContext(serializationCtx, key, qrls);
         }
         return value;
@@ -5098,7 +5219,7 @@
      *
      * @public
      */
-    const version = "2.0.0-alpha.6-dev+d848ba5";
+    const version = "2.0.0-alpha.7-dev+a26598a";
 
     /** @internal */
     class _SharedContainer {
@@ -5130,13 +5251,6 @@
         }
     }
 
-    /** @internal */
-    const _CONST_PROPS = Symbol('CONST');
-    /** @internal */
-    const _VAR_PROPS = Symbol('VAR');
-    /** @internal @deprecated v1 compat */
-    const _IMMUTABLE = Symbol('IMMUTABLE');
-
     // Keep these properties named like this so they're the same as from wrapSignal
     const getValueProp = (p0) => p0.value;
     const getProp = (p0, p1) => p0[p1];
@@ -5548,7 +5662,7 @@
         else if (isTask(value)) {
             return `Task(${qwikDebugToString(value.$qrl$)})`;
         }
-        else if (isQrl$1(value)) {
+        else if (isQrl(value)) {
             return `Qrl(${value.$symbol$})`;
         }
         else if (typeof value === 'object' || typeof value === 'function') {
@@ -5702,14 +5816,21 @@
         CONTEXT_CHAR: /* **** */ ']',
         SEQ_IDX: /* ************ */ 94, // `^` - `q:seqIdx' - Sequential scope id
         SEQ_IDX_CHAR: /* **** */ '^',
-        SUBS: /* *************** */ 96, // '`' - `q:subs' - Effect dependencies/subscriptions
-        SUBS_CHAR: /* ******* */ '`',
+        BACK_REFS: /* ********** */ 96, // '`' - `q:brefs' - Effect dependencies/subscriptions
+        BACK_REFS_CHAR: /* ** */ '`',
         SEPARATOR: /* ********* */ 124, // `|` - Separator char to encode any key/value pairs.
         SEPARATOR_CHAR: /* ** */ '|',
         SLOT: /* ************** */ 126, // `~` - `q:slot' - Slot name
         SLOT_CHAR: /* ******* */ '~',
     };
 
+    const mergeMaps = (map1, map2) => {
+        for (const [k, v] of map2) {
+            map1.set(k, v);
+        }
+        return map1;
+    };
+
     /**
      * @file
      *
@@ -5965,6 +6086,7 @@
             elementVNode[VNodeProps.flags] ^= VNodeFlags.Inflated;
             const element = elementVNode[ElementVNodeProps.element];
             const attributes = element.attributes;
+            const props = vnode_getProps(elementVNode);
             for (let idx = 0; idx < attributes.length; idx++) {
                 const attr = attributes[idx];
                 const key = attr.name;
@@ -5975,15 +6097,15 @@
                 }
                 else if (key.startsWith(QContainerAttr)) {
                     if (attr.value === QContainerValue.HTML) {
-                        mapArray_set(elementVNode, dangerouslySetInnerHTML, element.innerHTML, ElementVNodeProps.PROPS_OFFSET);
+                        mapArray_set(props, dangerouslySetInnerHTML, element.innerHTML, 0);
                     }
                     else if (attr.value === QContainerValue.TEXT && 'value' in element) {
-                        mapArray_set(elementVNode, 'value', element.value, ElementVNodeProps.PROPS_OFFSET);
+                        mapArray_set(props, 'value', element.value, 0);
                     }
                 }
                 else if (!key.startsWith('on:')) {
                     const value = attr.value;
-                    mapArray_set(elementVNode, key, value, ElementVNodeProps.PROPS_OFFSET);
+                    mapArray_set(props, key, value, 0);
                 }
             }
         }
@@ -6419,54 +6541,16 @@
         journal.length = 0;
     };
     //////////////////////////////////////////////////////////////////////////////////////////////////////
-    const mapApp_findIndx = (elementVNode, key, start) => {
-        assertTrue(start % 2 === 0, 'Expecting even number.');
-        let bottom = start >> 1;
-        let top = (elementVNode.length - 2) >> 1;
-        while (bottom <= top) {
-            const mid = bottom + ((top - bottom) >> 1);
-            const midKey = elementVNode[mid << 1];
-            if (midKey === key) {
-                return mid << 1;
-            }
-            if (midKey < key) {
-                bottom = mid + 1;
-            }
-            else {
-                top = mid - 1;
-            }
-        }
-        return (bottom << 1) ^ -1;
-    };
-    const mapArray_set = (elementVNode, key, value, start) => {
-        const indx = mapApp_findIndx(elementVNode, key, start);
-        if (indx >= 0) {
-            if (value == null) {
-                elementVNode.splice(indx, 2);
-            }
-            else {
-                elementVNode[indx + 1] = value;
-            }
-        }
-        else if (value != null) {
-            elementVNode.splice(indx ^ -1, 0, key, value);
-        }
-    };
-    const mapArray_get = (elementVNode, key, start) => {
-        const indx = mapApp_findIndx(elementVNode, key, start);
-        if (indx >= 0) {
-            return elementVNode[indx + 1];
-        }
-        else {
-            return null;
-        }
-    };
-    //////////////////////////////////////////////////////////////////////////////////////////////////////
     const vnode_insertBefore = (journal, parent, newChild, insertBefore) => {
         ensureElementOrVirtualVNode(parent);
         if (vnode_isElementVNode(parent)) {
             ensureMaterialized(parent);
         }
+        if (newChild === insertBefore) {
+            // invalid insertBefore. We can't insert before self reference
+            // prevent infinity loop and putting self reference to next sibling
+            insertBefore = null;
+        }
         let adjustedInsertBefore = null;
         if (insertBefore == null) {
             if (vnode_isVirtualVNode(parent)) {
@@ -6590,9 +6674,10 @@
         const elementVNode = ensureElementVNode(vnode);
         let elementName = elementVNode[ElementVNodeProps.elementName];
         if (elementName === undefined) {
-            elementName = elementVNode[ElementVNodeProps.elementName] =
-                elementVNode[ElementVNodeProps.element].nodeName.toLowerCase();
-            elementVNode[VNodeProps.flags] |= vnode_getElementNamespaceFlags(elementName);
+            const element = elementVNode[ElementVNodeProps.element];
+            const nodeName = build.isDev ? fastNodeName(element).toLowerCase() : fastNodeName(element);
+            elementName = elementVNode[ElementVNodeProps.elementName] = nodeName;
+            elementVNode[VNodeProps.flags] |= vnode_getElementNamespaceFlags(element);
         }
         return elementName;
     };
@@ -6774,6 +6859,20 @@
         }
         return node;
     };
+    let _fastNamespaceURI = null;
+    const fastNamespaceURI = (element) => {
+        if (!_fastNamespaceURI) {
+            _fastNamespaceURI = fastGetter(element, 'namespaceURI');
+        }
+        return _fastNamespaceURI.call(element);
+    };
+    let _fastNodeName = null;
+    const fastNodeName = (element) => {
+        if (!_fastNodeName) {
+            _fastNodeName = fastGetter(element, 'nodeName');
+        }
+        return _fastNodeName.call(element);
+    };
     const fastGetter = (prototype, name) => {
         let getter;
         while (prototype && !(getter = Object.getOwnPropertyDescriptor(prototype, name)?.get)) {
@@ -6840,8 +6939,11 @@
                     container.$setRawState$(parseInt(id), vParent);
                     build.isDev && vnode_setAttr(null, vParent, ELEMENT_ID, id);
                 }
-                else if (peek() === VNodeDataChar.SUBS) {
-                    vnode_setProp(vParent, QSubscribers, consumeValue());
+                else if (peek() === VNodeDataChar.BACK_REFS) {
+                    if (!container) {
+                        container = getDomContainer(vParent[ElementVNodeProps.element]);
+                    }
+                    setEffectBackRefFromVNodeData(vParent, consumeValue(), container);
                 }
                 else {
                     // prevent infinity loop if there are some characters outside the range
@@ -6851,6 +6953,18 @@
         }
         return vFirstChild;
     };
+    function setEffectBackRefFromVNodeData(vParent, value, container) {
+        const deserializedSubMap = container.$getObjectById$(value);
+        if (!vParent[_EFFECT_BACK_REF]) {
+            Object.defineProperty(vParent, _EFFECT_BACK_REF, {
+                value: deserializedSubMap,
+            });
+        }
+        else {
+            const subMap = vParent[_EFFECT_BACK_REF];
+            mergeMaps(subMap, deserializedSubMap);
+        }
+    }
     const processVNodeData$1 = (vData, callback) => {
         let nextToConsumeIdx = 0;
         let ch = 0;
@@ -6895,8 +7009,9 @@
         if ((type & VNodeFlags.ELEMENT_OR_VIRTUAL_MASK) !== 0) {
             vnode_ensureElementInflated(vnode);
             const keys = [];
-            for (let i = vnode_getPropStartIndex(vnode); i < vnode.length; i = i + 2) {
-                const key = vnode[i];
+            const props = vnode_getProps(vnode);
+            for (let i = 0; i < props.length; i = i + 2) {
+                const key = props[i];
                 if (!key.startsWith(Q_PROPS_SEPARATOR)) {
                     keys.push(key);
                 }
@@ -6909,22 +7024,23 @@
         const type = vnode[VNodeProps.flags];
         if ((type & VNodeFlags.ELEMENT_OR_VIRTUAL_MASK) !== 0) {
             vnode_ensureElementInflated(vnode);
-            const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
+            const props = vnode_getProps(vnode);
+            const idx = mapApp_findIndx(props, key, 0);
             if (idx >= 0) {
-                if (vnode[idx + 1] != value && (type & VNodeFlags.Element) !== 0) {
+                if (props[idx + 1] != value && (type & VNodeFlags.Element) !== 0) {
                     // Values are different, update DOM
                     const element = vnode[ElementVNodeProps.element];
                     journal && journal.push(VNodeJournalOpCode.SetAttribute, element, key, value);
                 }
                 if (value == null) {
-                    vnode.splice(idx, 2);
+                    props.splice(idx, 2);
                 }
                 else {
-                    vnode[idx + 1] = value;
+                    props[idx + 1] = value;
                 }
             }
             else if (value != null) {
-                vnode.splice(idx ^ -1, 0, key, value);
+                props.splice(idx ^ -1, 0, key, value);
                 if ((type & VNodeFlags.Element) !== 0) {
                     // New value, update DOM
                     const element = vnode[ElementVNodeProps.element];
@@ -6937,7 +7053,8 @@
         const type = vnode[VNodeProps.flags];
         if ((type & VNodeFlags.ELEMENT_OR_VIRTUAL_MASK) !== 0) {
             vnode_ensureElementInflated(vnode);
-            return mapArray_get(vnode, key, vnode_getPropStartIndex(vnode));
+            const props = vnode_getProps(vnode);
+            return mapArray_get(props, key, 0);
         }
         return null;
     };
@@ -6945,11 +7062,12 @@
         const type = vnode[VNodeProps.flags];
         if ((type & VNodeFlags.ELEMENT_OR_VIRTUAL_MASK) !== 0) {
             type & VNodeFlags.Element && vnode_ensureElementInflated(vnode);
-            const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
+            const props = vnode_getProps(vnode);
+            const idx = mapApp_findIndx(props, key, 0);
             if (idx >= 0) {
-                let value = vnode[idx + 1];
+                let value = props[idx + 1];
                 if (typeof value === 'string' && getObject) {
-                    vnode[idx + 1] = value = getObject(value);
+                    props[idx + 1] = value = getObject(value);
                 }
                 return value;
             }
@@ -6958,12 +7076,13 @@
     };
     const vnode_setProp = (vnode, key, value) => {
         ensureElementOrVirtualVNode(vnode);
-        const idx = mapApp_findIndx(vnode, key, vnode_getPropStartIndex(vnode));
+        const props = vnode_getProps(vnode);
+        const idx = mapApp_findIndx(props, key, 0);
         if (idx >= 0) {
-            vnode[idx + 1] = value;
+            props[idx + 1] = value;
         }
         else if (value != null) {
-            vnode.splice(idx ^ -1, 0, key, value);
+            props.splice(idx ^ -1, 0, key, value);
         }
     };
     const vnode_getPropStartIndex = (vnode) => {
@@ -6976,6 +7095,9 @@
         }
         throw qError(QError.invalidVNodeType, [type]);
     };
+    const vnode_getProps = (vnode) => {
+        return vnode[vnode_getPropStartIndex(vnode)];
+    };
     const vnode_getParent = (vnode) => {
         return vnode[VNodeProps.parent] || null;
     };
@@ -7139,8 +7261,11 @@
             else if (peek() === VNodeDataChar.SEQ_IDX) {
                 vnode_setAttr(null, vParent, ELEMENT_SEQ_IDX, consumeValue());
             }
-            else if (peek() === VNodeDataChar.SUBS) {
-                vnode_setProp(vParent, QSubscribers, consumeValue());
+            else if (peek() === VNodeDataChar.BACK_REFS) {
+                if (!container) {
+                    container = getDomContainer(element);
+                }
+                setEffectBackRefFromVNodeData(vParent, consumeValue(), container);
             }
             else if (peek() === VNodeDataChar.CONTEXT) {
                 vnode_setAttr(null, vParent, QCtxAttr, consumeValue());
@@ -7248,23 +7373,20 @@
     };
     const VNodeArray = class VNode extends Array {
         static createElement(flags, parent, previousSibling, nextSibling, firstChild, lastChild, element, elementName) {
-            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-            vnode.push(firstChild, lastChild, element, elementName);
+            const vnode = new VNode(flags, parent, previousSibling, nextSibling, firstChild, lastChild, element, elementName, []);
             return vnode;
         }
         static createText(flags, parent, previousSibling, nextSibling, textNode, text) {
-            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-            vnode.push(textNode, text);
+            const vnode = new VNode(flags, parent, previousSibling, nextSibling, textNode, text);
             return vnode;
         }
         static createVirtual(flags, parent, previousSibling, nextSibling, firstChild, lastChild) {
-            const vnode = new VNode(flags, parent, previousSibling, nextSibling);
-            vnode.push(firstChild, lastChild);
+            const vnode = new VNode(flags, parent, previousSibling, nextSibling, firstChild, lastChild, []);
             return vnode;
         }
-        constructor(flags, parent, previousSibling, nextSibling) {
-            super();
-            this.push(flags, parent, previousSibling, nextSibling);
+        constructor(flags, parent, previousSibling, nextSibling, ...rest) {
+            // @ts-expect-error
+            super(flags, parent, previousSibling, nextSibling, ...rest);
             if (build.isDev) {
                 this.toString = vnode_toString;
             }
@@ -7329,10 +7451,12 @@
         return returnValue;
     }
     const newInvokeContextFromTuple = ([element, event, url]) => {
-        const container = element.closest(QContainerSelector);
+        const domContainer = getDomContainer(element);
+        const container = domContainer.element;
+        const vNode = container ? vnode_locate(domContainer.rootVNode, element) : undefined;
         const locale = container?.getAttribute(QLocaleAttr) || undefined;
         locale && setLocale(locale);
-        return newInvokeContext(locale, undefined, element, event, url);
+        return newInvokeContext(locale, vNode, element, event, url);
     };
     // TODO how about putting url and locale (and event/custom?) in to a "static" object
     const newInvokeContext = (locale, hostElement, element, event, url) => {
@@ -7367,16 +7491,14 @@
      * @param property `true` - subscriber is component `false` - subscriber is VNode `string` -
      *   subscriber is property
      * @param container
+     * @param data - Additional subscription data
      * @returns
      */
     const trackSignal = (fn, subscriber, property, container, data) => {
         const previousSubscriber = trackInvocation.$effectSubscriber$;
         const previousContainer = trackInvocation.$container$;
         try {
-            trackInvocation.$effectSubscriber$ = [subscriber, property];
-            if (data) {
-                trackInvocation.$effectSubscriber$.push(data);
-            }
+            trackInvocation.$effectSubscriber$ = getSubscriber(subscriber, property, data);
             trackInvocation.$container$ = container;
             return invoke(trackInvocation, fn);
         }
@@ -7397,8 +7519,16 @@
         if (iCtx) {
             const hostElement = iCtx.$hostElement$;
             let element = null;
-            if (vnode_isVNode(hostElement) && vnode_isElementVNode(hostElement)) {
-                element = vnode_getNode(hostElement);
+            if (hostElement != null) {
+                if (vnode_isVNode(hostElement)) {
+                    if (vnode_isElementVNode(hostElement)) {
+                        element = vnode_getNode(hostElement);
+                    }
+                }
+                else {
+                    // isSSRnode
+                    element = hostElement;
+                }
             }
             return element ?? iCtx.$qrl$?.$setContainer$(undefined);
         }
@@ -8034,9 +8164,9 @@
         $storeProxyMap$ = new WeakMap();
         $qFuncs$;
         $instanceHash$;
-        stateData;
+        vNodeLocate = (id) => vnode_locate(this.rootVNode, id);
+        $stateData$;
         $styleIds$ = null;
-        $vnodeLocate$ = (id) => vnode_locate(this.rootVNode, id);
         $renderCount$ = 0;
         constructor(element) {
             super(() => this.scheduleRender(), () => vnode_applyJournal(this.$journal$), {}, element.getAttribute('q:locale'));
@@ -8062,29 +8192,29 @@
             this.rootVNode = vnode_newUnMaterializedElement(this.element);
             // These are here to initialize all properties at once for single class transition
             this.$rawStateData$ = null;
-            this.stateData = null;
+            this.$stateData$ = null;
             const document = this.element.ownerDocument;
             if (!document.qVNodeData) {
                 processVNodeData(document);
             }
             this.$rawStateData$ = [];
-            this.stateData = [];
+            this.$stateData$ = [];
             const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
             if (qwikStates.length !== 0) {
                 const lastState = qwikStates[qwikStates.length - 1];
                 this.$rawStateData$ = JSON.parse(lastState.textContent);
-                this.stateData = wrapDeserializerProxy(this, this.$rawStateData$);
+                this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$);
             }
             this.$qFuncs$ = getQFuncs(document, this.$instanceHash$) || EMPTY_ARRAY;
         }
         $setRawState$(id, vParent) {
-            this.stateData[id] = vParent;
+            this.$stateData$[id] = vParent;
         }
         parseQRL(qrl) {
             return inflateQRL(this, parseQRL(qrl));
         }
         handleError(err, host) {
-            if (qDev) {
+            if (qDev && host) {
                 // Clean vdom
                 if (typeof document !== 'undefined') {
                     const vHost = host;
@@ -8108,7 +8238,7 @@
                     throw err;
                 }
             }
-            const errorStore = this.resolveContext(host, ERROR_CONTEXT);
+            const errorStore = host && this.resolveContext(host, ERROR_CONTEXT);
             if (!errorStore) {
                 throw err;
             }
@@ -8144,7 +8274,7 @@
                     vNode =
                         vnode_getParent(vNode) ||
                             // If virtual node, than it could be a slot so we need to read its parent.
-                            vnode_getProp(vNode, QSlotParent, this.$vnodeLocate$);
+                            vnode_getProp(vNode, QSlotParent, this.vNodeLocate);
                 }
                 else {
                     vNode = vnode_getParent(vNode);
@@ -8164,7 +8294,7 @@
                 case ELEMENT_PROPS:
                 case OnRenderProp:
                 case QCtxAttr:
-                case QSubscribers:
+                case QBackRefs:
                     getObjectById = this.$getObjectById$;
                     break;
                 case ELEMENT_SEQ_IDX:
@@ -8177,7 +8307,7 @@
         scheduleRender() {
             this.$renderCount$++;
             this.renderDone ||= getPlatform().nextTick(() => this.processChores());
-            return this.renderDone;
+            return this.renderDone.finally(() => emitEvent('qrender', { instanceHash: this.$instanceHash$, renderCount: this.$renderCount$ }));
         }
         processChores() {
             let renderCount = this.$renderCount$;
@@ -8200,12 +8330,13 @@
         ensureProjectionResolved(vNode) {
             if ((vNode[VNodeProps.flags] & VNodeFlags.Resolved) === 0) {
                 vNode[VNodeProps.flags] |= VNodeFlags.Resolved;
-                for (let i = vnode_getPropStartIndex(vNode); i < vNode.length; i = i + 2) {
-                    const prop = vNode[i];
+                const props = vnode_getProps(vNode);
+                for (let i = 0; i < props.length; i = i + 2) {
+                    const prop = props[i];
                     if (isSlotProp(prop)) {
-                        const value = vNode[i + 1];
+                        const value = props[i + 1];
                         if (typeof value == 'string') {
-                            vNode[i + 1] = this.$vnodeLocate$(value);
+                            props[i + 1] = this.vNodeLocate(value);
                         }
                     }
                 }
@@ -8216,7 +8347,7 @@
                 id = parseFloat(id);
             }
             assertTrue(id < this.$rawStateData$.length / 2, `Invalid reference: ${id} >= ${this.$rawStateData$.length / 2}`);
-            return this.stateData[id];
+            return this.$stateData$[id];
         };
         getSyncFn(id) {
             const fn = this.$qFuncs$[id];
@@ -8288,8 +8419,7 @@
                     ? parseInt(property, 10)
                     : NaN;
             if (Number.isNaN(i) || i < 0 || i >= this.$length$) {
-                const out = Reflect.get(target, property, receiver);
-                return out;
+                return Reflect.get(target, property, receiver);
             }
             // The serialized data is an array with 2 values for each item
             const idx = i * 2;
@@ -8355,6 +8485,7 @@
         switch (typeId) {
             case TypeIds.Object:
                 // We use getters for making complex values lazy
+                // TODO scan the data for computeQRLs and schedule resolve chores
                 for (let i = 0; i < data.length; i += 4) {
                     const key = deserializeData(container, data[i], data[i + 1]);
                     const valType = data[i + 2];
@@ -8394,7 +8525,7 @@
                 task.$flags$ = v[1];
                 task.$index$ = v[2];
                 task.$el$ = v[3];
-                task.$effectDependencies$ = v[4];
+                task[_EFFECT_BACK_REF] = v[4];
                 task.$state$ = v[5];
                 break;
             case TypeIds.Resource:
@@ -8417,12 +8548,9 @@
                 break;
             case TypeIds.Store:
             case TypeIds.StoreArray: {
-                const [value, flags, effects, storeEffect] = data;
+                const [value, flags, effects] = data;
                 const store = getOrCreateStore(value, flags, container);
                 const storeHandler = getStoreHandler(store);
-                if (storeEffect) {
-                    effects[STORE_ARRAY_PROP] = storeEffect;
-                }
                 storeHandler.$effects$ = effects;
                 target = store;
                 break;
@@ -8431,7 +8559,7 @@
                 const signal = target;
                 const d = data;
                 signal.$untrackedValue$ = d[0];
-                signal.$effects$ = d.slice(1);
+                signal.$effects$ = new Set(d.slice(1));
                 break;
             }
             case TypeIds.WrappedSignal: {
@@ -8439,10 +8567,10 @@
                 const d = data;
                 signal.$func$ = container.getSyncFn(d[0]);
                 signal.$args$ = d[1];
-                signal.$effectDependencies$ = d[2];
+                signal[_EFFECT_BACK_REF] = d[2];
                 signal.$untrackedValue$ = d[3];
                 signal.$hostElement$ = d[4];
-                signal.$effects$ = d.slice(5);
+                signal.$effects$ = new Set(d.slice(5));
                 break;
             }
             case TypeIds.ComputedSignal: {
@@ -8562,6 +8690,7 @@
         EMPTY_ARRAY,
         EMPTY_OBJ,
         NEEDS_COMPUTATION,
+        STORE_ARRAY_PROP,
         Slot,
         Fragment,
         NaN,
@@ -8642,6 +8771,8 @@
                     reject = rej;
                 });
                 resolvers.set(promise, [resolve, reject]);
+                // Don't leave unhandled promise rejections
+                promise.catch(() => { });
                 return promise;
             case TypeIds.Uint8Array:
                 const encodedLength = value.length;
@@ -8651,12 +8782,9 @@
                 return new Uint8Array(decodedLength);
             case TypeIds.PropsProxy:
                 return createPropsProxy(null, null);
-            case TypeIds.RefVNode:
             case TypeIds.VNode:
-                const vnodeOrDocument = retrieveVNodeOrDocument(container, value);
-                if (typeId === TypeIds.VNode) {
-                    return vnodeOrDocument;
-                }
+                return retrieveVNodeOrDocument(container, value);
+            case TypeIds.RefVNode:
                 const vNode = retrieveVNodeOrDocument(container, value);
                 if (vnode_isVNode(vNode)) {
                     return vnode_getNode(vNode);
@@ -8665,7 +8793,7 @@
                     throw qError(QError.serializeErrorExpectedVNode, [typeof vNode]);
                 }
             case TypeIds.EffectData:
-                return new EffectPropData({});
+                return new SubscriptionData({});
             default:
                 throw qError(QError.serializeErrorCannotAllocate, [typeId]);
         }
@@ -8697,7 +8825,7 @@
             assertDefined(backChannel, 'Missing QRL_RUNTIME_CHUNK');
             qrlRef = backChannel.get(symbol);
         }
-        return createQRL(chunk, symbol, qrlRef, null, captureIds, null, null);
+        return createQRL(chunk, symbol, qrlRef, null, captureIds, null);
     }
     function inflateQRL(container, qrl) {
         const captureIds = qrl.$capture$;
@@ -8815,7 +8943,7 @@
             /** Visit an object, adding anything that will be serialized as to scan */
             const visit = (obj) => {
                 if (typeof obj === 'function') {
-                    if (isQrl(obj)) {
+                    if (isQrl$1(obj)) {
                         if (obj.$captureRef$) {
                             discoveredValues.push(...obj.$captureRef$);
                         }
@@ -8834,6 +8962,7 @@
                     obj instanceof RegExp ||
                     obj instanceof Uint8Array ||
                     obj instanceof URLSearchParams ||
+                    vnode_isVNode(obj) ||
                     (typeof FormData !== 'undefined' && obj instanceof FormData) ||
                     // Ignore the no serialize objects
                     fastSkipSerialize(obj)) ;
@@ -8843,8 +8972,7 @@
                 else if (isStore(obj)) {
                     const target = getStoreTarget(obj);
                     const effects = getStoreHandler(obj).$effects$;
-                    const storeEffect = effects?.[STORE_ARRAY_PROP] ?? null;
-                    discoveredValues.push(target, effects, storeEffect);
+                    discoveredValues.push(target, effects);
                     for (const prop in target) {
                         const propValue = target[prop];
                         if (storeProxyMap.has(propValue)) {
@@ -8878,9 +9006,7 @@
                     }
                     // WrappedSignal uses syncQrl which has no captured refs
                     if (obj instanceof WrappedSignal) {
-                        if (obj.$effectDependencies$) {
-                            discoveredValues.push(...obj.$effectDependencies$);
-                        }
+                        discoverEffectBackRefs(obj[_EFFECT_BACK_REF], discoveredValues);
                         if (obj.$args$) {
                             discoveredValues.push(...obj.$args$);
                         }
@@ -8893,7 +9019,8 @@
                     }
                 }
                 else if (obj instanceof Task) {
-                    discoveredValues.push(obj.$el$, obj.$qrl$, obj.$state$, obj.$effectDependencies$);
+                    discoveredValues.push(obj.$el$, obj.$qrl$, obj.$state$);
+                    discoverEffectBackRefs(obj[_EFFECT_BACK_REF], discoveredValues);
                 }
                 else if (isSsrNode(obj)) {
                     discoverValuesForVNodeData(obj.vnodeData, discoveredValues);
@@ -8912,7 +9039,7 @@
                 else if (Array.isArray(obj)) {
                     discoveredValues.push(...obj);
                 }
-                else if (isQrl(obj)) {
+                else if (isQrl$1(obj)) {
                     obj.$captureRef$ && obj.$captureRef$.length && discoveredValues.push(...obj.$captureRef$);
                 }
                 else if (isPropsProxy(obj)) {
@@ -8928,7 +9055,7 @@
                     });
                     promises.push(obj);
                 }
-                else if (obj instanceof EffectPropData) {
+                else if (obj instanceof SubscriptionData) {
                     discoveredValues.push(obj.data);
                 }
                 else if (isObjectLiteral(obj)) {
@@ -8973,15 +9100,31 @@
         for (const value of vnodeData) {
             if (isSsrAttrs(value)) {
                 for (let i = 1; i < value.length; i += 2) {
-                    if (value[i - 1] === ELEMENT_KEY) {
+                    const attrValue = value[i];
+                    if (typeof attrValue === 'string') {
                         continue;
                     }
-                    const attrValue = value[i];
                     discoveredValues.push(attrValue);
                 }
             }
         }
     };
+    const discoverEffectBackRefs = (effectsBackRefs, discoveredValues) => {
+        if (effectsBackRefs) {
+            // We need serialize effect subscriptions with back refs
+            let hasBackRefs = false;
+            for (const [, effect] of effectsBackRefs) {
+                const backRefs = effect[EffectSubscriptionProp.BACK_REF];
+                if (backRefs) {
+                    hasBackRefs = true;
+                    break;
+                }
+            }
+            if (hasBackRefs) {
+                discoveredValues.push(effectsBackRefs);
+            }
+        }
+    };
     const promiseResults = new WeakMap();
     /**
      * Format:
@@ -9053,7 +9196,7 @@
                 else if (value === Fragment) {
                     output(TypeIds.Constant, Constants.Fragment);
                 }
-                else if (isQrl(value)) {
+                else if (isQrl$1(value)) {
                     const qrl = qrlToString(serializationContext, value);
                     const id = serializationContext.$addRoot$(qrl);
                     output(TypeIds.QRL, id);
@@ -9128,6 +9271,9 @@
             else if (value === NEEDS_COMPUTATION) {
                 output(TypeIds.Constant, Constants.NEEDS_COMPUTATION);
             }
+            else if (value === STORE_ARRAY_PROP) {
+                output(TypeIds.Constant, Constants.STORE_ARRAY_PROP);
+            }
             else {
                 throw qError(QError.serializeErrorUnknownType, [typeof value]);
             }
@@ -9164,7 +9310,7 @@
                         : 0;
                 output(TypeIds.PropsProxy, out);
             }
-            else if (value instanceof EffectPropData) {
+            else if (value instanceof SubscriptionData) {
                 output(TypeIds.EffectData, [value.data.$scopedStyleIdPrefix$, value.data.$isConst$]);
             }
             else if (isStore(value)) {
@@ -9175,6 +9321,7 @@
                     if (!res) {
                         throw qError(QError.serializeErrorUnvisited, ['resource']);
                     }
+                    // TODO the effects include the resourcereturn which has duplicate data
                     output(TypeIds.Resource, [...res, getStoreHandler(value).$effects$]);
                 }
                 else {
@@ -9182,7 +9329,6 @@
                     const storeTarget = getStoreTarget(value);
                     const flags = storeHandler.$flags$;
                     const effects = storeHandler.$effects$;
-                    const storeEffect = effects?.[STORE_ARRAY_PROP] ?? null;
                     const innerStores = [];
                     for (const prop in storeTarget) {
                         const propValue = storeTarget[prop];
@@ -9192,7 +9338,7 @@
                             serializationContext.$addRoot$(innerStore);
                         }
                     }
-                    const out = [storeTarget, flags, effects, storeEffect, ...innerStores];
+                    const out = [storeTarget, flags, effects, ...innerStores];
                     while (out[out.length - 1] == null) {
                         out.pop();
                     }
@@ -9231,7 +9377,7 @@
                 if (value instanceof WrappedSignal) {
                     output(TypeIds.WrappedSignal, [
                         ...serializeWrappingFn(serializationContext, value),
-                        value.$effectDependencies$,
+                        filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                         v,
                         value.$hostElement$,
                         ...(value.$effects$ || []),
@@ -9338,7 +9484,7 @@
                     value.$flags$,
                     value.$index$,
                     value.$el$,
-                    value.$effectDependencies$,
+                    value[_EFFECT_BACK_REF],
                     value.$state$,
                 ];
                 while (out[out.length - 1] == null) {
@@ -9361,12 +9507,27 @@
                 const out = btoa(buf).replace(/=+$/, '');
                 output(TypeIds.Uint8Array, out);
             }
+            else if (vnode_isVNode(value)) {
+                output(TypeIds.Constant, Constants.Undefined);
+            }
             else {
                 throw qError(QError.serializeErrorUnknownType, [typeof value]);
             }
         };
         writeValue(serializationContext.$roots$, -1);
     }
+    function filterEffectBackRefs(effectBackRef) {
+        let effectBackRefToSerialize = null;
+        if (effectBackRef) {
+            for (const [effectProp, effect] of effectBackRef) {
+                if (effect[EffectSubscriptionProp.BACK_REF]) {
+                    effectBackRefToSerialize ||= new Map();
+                    effectBackRefToSerialize.set(effectProp, effect);
+                }
+            }
+        }
+        return effectBackRefToSerialize;
+    }
     function serializeWrappingFn(serializationContext, value) {
         // if value is an object then we need to wrap this in ()
         if (value.$funcStr$ && value.$funcStr$[0] === '{') {
@@ -9379,15 +9540,12 @@
     function qrlToString(serializationContext, value) {
         let symbol = value.$symbol$;
         let chunk = value.$chunk$;
-        const refSymbol = value.$refSymbol$ ?? symbol;
         const platform = getPlatform();
         if (platform) {
-            const result = platform.chunkForSymbol(refSymbol, chunk, value.dev?.file);
+            const result = platform.chunkForSymbol(symbol, chunk, value.dev?.file);
             if (result) {
                 chunk = result[1];
-                if (!value.$refSymbol$) {
-                    symbol = result[0];
-                }
+                symbol = result[0];
             }
         }
         const isSync = isSyncQrl(value);
@@ -9564,9 +9722,9 @@
         return ((typeof obj === 'object' &&
             obj !== null &&
             (obj instanceof Signal || obj instanceof Task || isJSXNode(obj))) ||
-            isQrl(obj));
+            isQrl$1(obj));
     };
-    const canSerialize = (value) => {
+    const canSerialize = (value, seen = new WeakSet()) => {
         if (value == null ||
             typeof value === 'string' ||
             typeof value === 'number' ||
@@ -9575,6 +9733,10 @@
             return true;
         }
         else if (typeof value === 'object') {
+            if (seen.has(value)) {
+                return true;
+            }
+            seen.add(value);
             const proto = Object.getPrototypeOf(value);
             if (isStore(value)) {
                 value = getStoreTarget(value);
@@ -9583,7 +9745,7 @@
                 for (const key in value) {
                     // if the value is a props proxy, then sometimes we could create a component-level subscription,
                     // so we should call untrack here to avoid tracking the value
-                    if (!canSerialize(untrack(() => value[key]))) {
+                    if (!canSerialize(untrack(() => value[key]), seen)) {
                         return false;
                     }
                 }
@@ -9591,7 +9753,7 @@
             }
             else if (proto == Array.prototype) {
                 for (let i = 0; i < value.length; i++) {
-                    if (!canSerialize(value[i])) {
+                    if (!canSerialize(value[i], seen)) {
                         return false;
                     }
                 }
@@ -9641,7 +9803,7 @@
             }
         }
         else if (typeof value === 'function') {
-            if (isQrl(value) || isQwikComponent(value)) {
+            if (isQrl$1(value) || isQwikComponent(value)) {
                 return true;
             }
         }
@@ -9694,20 +9856,21 @@
         Constants[Constants["EMPTY_ARRAY"] = 5] = "EMPTY_ARRAY";
         Constants[Constants["EMPTY_OBJ"] = 6] = "EMPTY_OBJ";
         Constants[Constants["NEEDS_COMPUTATION"] = 7] = "NEEDS_COMPUTATION";
-        Constants[Constants["Slot"] = 8] = "Slot";
-        Constants[Constants["Fragment"] = 9] = "Fragment";
-        Constants[Constants["NaN"] = 10] = "NaN";
-        Constants[Constants["PositiveInfinity"] = 11] = "PositiveInfinity";
-        Constants[Constants["NegativeInfinity"] = 12] = "NegativeInfinity";
-        Constants[Constants["MaxSafeInt"] = 13] = "MaxSafeInt";
+        Constants[Constants["STORE_ARRAY_PROP"] = 8] = "STORE_ARRAY_PROP";
+        Constants[Constants["Slot"] = 9] = "Slot";
+        Constants[Constants["Fragment"] = 10] = "Fragment";
+        Constants[Constants["NaN"] = 11] = "NaN";
+        Constants[Constants["PositiveInfinity"] = 12] = "PositiveInfinity";
+        Constants[Constants["NegativeInfinity"] = 13] = "NegativeInfinity";
+        Constants[Constants["MaxSafeInt"] = 14] = "MaxSafeInt";
         // used for close fragment
-        Constants[Constants["AlmostMaxSafeInt"] = 14] = "AlmostMaxSafeInt";
-        Constants[Constants["MinSafeInt"] = 15] = "MinSafeInt";
+        Constants[Constants["AlmostMaxSafeInt"] = 15] = "AlmostMaxSafeInt";
+        Constants[Constants["MinSafeInt"] = 16] = "MinSafeInt";
     })(Constants || (Constants = {}));
 
     /** @internal */
     const verifySerializable = (value, preMessage) => {
-        const seen = new Set();
+        const seen = new WeakSet();
         return _verifySerializable(value, seen, '_', preMessage);
     };
     const _verifySerializable = (value, seen, ctx, preMessage) => {
@@ -9716,10 +9879,12 @@
             return value;
         }
         if (shouldSerialize(unwrapped)) {
-            if (seen.has(unwrapped)) {
-                return value;
+            if (typeof unwrapped === 'object') {
+                if (seen.has(unwrapped)) {
+                    return value;
+                }
+                seen.add(unwrapped);
             }
-            seen.add(unwrapped);
             if (isSignal(unwrapped)) {
                 return value;
             }
@@ -9823,16 +9988,7 @@
         return input;
     };
 
-    const isQrl = (value) => {
-        return typeof value === 'function' && typeof value.getSymbol === 'function';
-    };
-    // Make sure this value is same as value in `platform.ts`
-    const SYNC_QRL = '<sync>';
-    /** Sync QRL is a function which is serialized into `<script q:func="qwik/json">` tag. */
-    const isSyncQrl = (value) => {
-        return isQrl(value) && value.$symbol$ == SYNC_QRL;
-    };
-    const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refSymbol) => {
+    const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         if (qDev && qSerialize) {
             if (captureRef) {
                 for (const item of captureRef) {
@@ -9854,9 +10010,14 @@
         };
         function bindFnToContext(currentCtx, beforeFn) {
             // Note that we bind the current `this`
-            return (...args) => maybeThen(resolveLazy(), (fn) => {
-                if (!isFunction(fn)) {
-                    throw qError(QError.qrlIsNotFunction);
+            const bound = (...args) => {
+                if (!qrl.resolved) {
+                    return qrl.resolve().then((fn) => {
+                        if (!isFunction(fn)) {
+                            throw qError(QError.qrlIsNotFunction);
+                        }
+                        return bound(...args);
+                    });
                 }
                 if (beforeFn && beforeFn() === false) {
                     return;
@@ -9869,13 +10030,14 @@
                 context.$qrl$ = qrl;
                 context.$event$ ||= this;
                 try {
-                    return invoke.call(this, context, fn, ...args);
+                    return invoke.call(this, context, symbolRef, ...args);
                 }
                 finally {
                     context.$qrl$ = prevQrl;
                     context.$event$ = prevEvent;
                 }
-            });
+            };
+            return bound;
         }
         const resolveLazy = (containerEl) => {
             return symbolRef !== null ? symbolRef : resolve(containerEl);
@@ -9887,8 +10049,20 @@
             }
             return function (...args) {
                 let context = tryGetInvokeContext();
+                // use the given qrl if it is the right one
                 if (context) {
-                    return fn.apply(this, args);
+                    // TODO check if this is necessary in production
+                    if (context.$qrl$?.$symbol$ === qrl.$symbol$) {
+                        return fn.apply(this, args);
+                    }
+                    const prevQrl = context.$qrl$;
+                    context.$qrl$ = qrl;
+                    try {
+                        return fn.apply(this, args);
+                    }
+                    finally {
+                        context.$qrl$ = prevQrl;
+                    }
                 }
                 context = newInvokeContext();
                 context.$qrl$ = qrl;
@@ -9916,11 +10090,11 @@
             const start = now();
             const ctx = tryGetInvokeContext();
             if (symbolFn !== null) {
-                symbolRef = symbolFn().then((module) => (qrl.resolved = symbolRef = wrapFn(module[symbol])));
+                symbolRef = symbolFn().then((module) => (qrl.resolved = wrapFn((symbolRef = module[symbol]))));
             }
             else {
                 const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-                symbolRef = maybeThen(imported, (ref) => (qrl.resolved = symbolRef = wrapFn(ref)));
+                symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
             }
             if (typeof symbolRef === 'object' && isPromise(symbolRef)) {
                 symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), (err) => {
@@ -9943,10 +10117,9 @@
                 return invoke;
             }
         };
-        const resolvedSymbol = refSymbol ?? symbol;
-        const hash = getSymbolHash(resolvedSymbol);
+        const hash = getSymbolHash(symbol);
         Object.assign(qrl, {
-            getSymbol: () => resolvedSymbol,
+            getSymbol: () => symbol,
             getHash: () => hash,
             getCaptured: () => captureRef,
             resolve,
@@ -9954,7 +10127,6 @@
             $setContainer$: setContainer,
             $chunk$: chunk,
             $symbol$: symbol,
-            $refSymbol$: refSymbol,
             $hash$: hash,
             getFn: bindFnToContext,
             $capture$: capture,
@@ -9963,8 +10135,8 @@
             resolved: undefined,
         });
         if (symbolRef) {
-            // Replace symbolRef with (a promise for) the value or wrapped function
-            symbolRef = maybeThen(symbolRef, (resolved) => (qrl.resolved = symbolRef = wrapFn(resolved)));
+            // Unwrap any promises
+            symbolRef = maybeThen(symbolRef, (resolved) => (qrl.resolved = wrapFn((symbolRef = resolved))));
         }
         if (build.isDev) {
             Object.defineProperty(qrl, '_devOnlySymbolRef', {
@@ -9978,20 +10150,6 @@
         }
         return qrl;
     };
-    const getSymbolHash = (symbolName) => {
-        const index = symbolName.lastIndexOf('_');
-        if (index > -1) {
-            return symbolName.slice(index + 1);
-        }
-        return symbolName;
-    };
-    function assertQrl(qrl) {
-        if (qDev) {
-            if (!isQrl(qrl)) {
-                throw new Error('Not a QRL');
-            }
-        }
-    }
     const EMITTED = /*#__PURE__*/ new Set();
     const emitUsedSymbol = (symbol, element, reqTime) => {
         if (!EMITTED.has(symbol)) {
@@ -10104,7 +10262,7 @@
         if (!qRuntimeQrl && qDev) {
             throw new Error('Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.');
         }
-        return createQRL(null, 's' + runtimeSymbolId++, expression, null, null, null, null);
+        return createQRL(null, 's' + runtimeSymbolId++, expression, null, null, null);
     };
     /** @private Use To avoid optimizer replacement */
     const dollar = $;
@@ -10130,7 +10288,7 @@
             // eslint-disable-next-line no-new-func
             fn = new Function('return ' + fn.toString())();
         }
-        return createQRL('', SYNC_QRL, fn, null, null, null, null);
+        return createQRL('', SYNC_QRL, fn, null, null, null);
     };
     /**
      * Extract function into a synchronously loadable QRL.
@@ -10147,7 +10305,7 @@
             serializedFn = fn.toString();
         }
         fn.serialized = serializedFn;
-        return createQRL('', SYNC_QRL, fn, null, null, null, null);
+        return createQRL('', SYNC_QRL, fn, null, null, null);
     };
 
     /** @internal */
@@ -10866,6 +11024,21 @@
             iCtx.$container$.$scheduler$(ChoreType.VISIBLE, task);
         }
     };
+    const useRunTask = (task, eagerness) => {
+        if (eagerness === 'intersection-observer') {
+            useOn('qvisible', getTaskHandlerQrl(task));
+        }
+        else if (eagerness === 'document-ready') {
+            useOnDocument('qinit', getTaskHandlerQrl(task));
+        }
+        else if (eagerness === 'document-idle') {
+            useOnDocument('qidle', getTaskHandlerQrl(task));
+        }
+    };
+    const getTaskHandlerQrl = (task) => {
+        const taskHandler = createQRL(null, '_task', scheduleTask, null, null, [task]);
+        return taskHandler;
+    };
 
     // <docs markdown="../readme.md#useResource">
     // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
@@ -11202,8 +11375,9 @@
     exports.Slot = Slot;
     exports._CONST_PROPS = _CONST_PROPS;
     exports._DomContainer = DomContainer;
+    exports._EFFECT_BACK_REF = _EFFECT_BACK_REF;
     exports._EMPTY_ARRAY = EMPTY_ARRAY;
-    exports._EffectData = EffectPropData;
+    exports._EffectData = SubscriptionData;
     exports._IMMUTABLE = _IMMUTABLE;
     exports._SharedContainer = _SharedContainer;
     exports._VAR_PROPS = _VAR_PROPS;
@@ -11213,7 +11387,6 @@
     exports._getContextEvent = _getContextEvent;
     exports._getDomContainer = getDomContainer;
     exports._getQContainerElement = _getQContainerElement;
-    exports._hW = _hW;
     exports._isJSXNode = isJSXNode;
     exports._isStringifiable = isStringifiable;
     exports._jsxBranch = _jsxBranch;
@@ -11227,7 +11400,9 @@
     exports._qrlSync = _qrlSync;
     exports._regSymbol = _regSymbol;
     exports._restProps = _restProps;
+    exports._run = queueQRL;
     exports._serialize = _serialize;
+    exports._task = scheduleTask;
     exports._verifySerializable = verifySerializable;
     exports._waitUntilRendered = _waitUntilRendered;
     exports._walkJSX = _walkJSX;