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

package/dist/core.mjs

@@ -1,11 +1,11 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.6-dev+d848ba5
+ * @qwik.dev/core 2.0.0-alpha.8-dev+66037b5
  * 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
  */
-import { isServer, isDev } from '@qwik.dev/core/build';
+import { isDev, isServer } from '@qwik.dev/core/build';
 export { isBrowser, isDev, isServer } from '@qwik.dev/core/build';
 
 // same as isDev but separate so we can test
@@ -118,8 +118,8 @@ const codeToText = (code, ...parts) => {
         // 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
@@ -162,12 +162,11 @@ const codeToText = (code, ...parts) => {
             "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) {
@@ -189,8 +188,8 @@ const codeToText = (code, ...parts) => {
 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";
@@ -237,14 +236,37 @@ var QError;
     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 (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.
  *
@@ -288,11 +310,10 @@ var QContainerValue;
 /** 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 = ':';
-const QSlotRef = 'q:sref';
+const QSlotParent = 'q:sparent';
 const QSlotS = 'q:s';
 const QStyle = 'q:style';
 const QStyleSelector = 'style[q\\:style]';
@@ -300,7 +321,7 @@ const QStyleSSelector = 'style[q\\:sstyle]';
 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] || [];
@@ -329,6 +350,7 @@ const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
 const ResourceEvent = 'qResource';
 const RenderEvent = 'qRender';
 const TaskEvent = 'qTask';
+/** `<q:slot name="...">` */
 const QDefaultSlot = '';
 /**
  * Attribute to mark that this VNode has a pointer to itself from the `qwik/json` state.
@@ -496,11 +518,6 @@ const maybeThen = (valueOrPromise, thenFn) => {
         ? valueOrPromise.then(thenFn, shouldNotError)
         : thenFn(valueOrPromise);
 };
-const maybeThenPassError = (valueOrPromise, thenFn) => {
-    return isPromise(valueOrPromise)
-        ? valueOrPromise.then(thenFn)
-        : thenFn(valueOrPromise);
-};
 const shouldNotError = (reason) => {
     throwErrorAndStop(reason);
 };
@@ -618,7 +635,7 @@ function setLocale(locale) {
     _locale = locale;
 }
 
-const isQrl$1 = (value) => {
+const isQrl = (value) => {
     return typeof value === 'function' && typeof value.getSymbol === 'function';
 };
 
@@ -690,21 +707,21 @@ const qrl = (chunkOrFn, symbol, lexicalScopeCapture = EMPTY_ARRAY, stackOffset =
         // 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) => {
@@ -733,6 +750,80 @@ const _regSymbol = (symbol, hash) => {
     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$`.
@@ -857,6 +948,47 @@ function isPreventDefault(key) {
     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',
@@ -1015,40 +1147,10 @@ const styleKey = (qStyles, index) => {
     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');
-const STORE_ARRAY_PROP = Symbol('store.array');
+const STORE_ALL_PROPS = Symbol('store.all');
 var StoreFlags;
 (function (StoreFlags) {
     StoreFlags[StoreFlags["NONE"] = 0] = "NONE";
@@ -1123,7 +1225,7 @@ class StoreHandler {
             }
             const effectSubscriber = ctx.$effectSubscriber$;
             if (effectSubscriber) {
-                addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
+                addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber);
             }
         }
         if (prop === 'toString' && value === Object.prototype.toString) {
@@ -1174,7 +1276,7 @@ class StoreHandler {
             if (ctx) {
                 const effectSubscriber = ctx.$effectSubscriber$;
                 if (effectSubscriber) {
-                    addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
+                    addStoreEffect(target, Array.isArray(target) ? STORE_ALL_PROPS : prop, this, effectSubscriber);
                 }
             }
         }
@@ -1184,13 +1286,17 @@ class StoreHandler {
         const ctx = tryGetInvokeContext();
         const effectSubscriber = ctx?.$effectSubscriber$;
         if (effectSubscriber) {
-            addEffect(target, STORE_ARRAY_PROP, this, effectSubscriber);
+            addStoreEffect(target, STORE_ALL_PROPS, this, effectSubscriber);
         }
         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,
@@ -1198,355 +1304,280 @@ class StoreHandler {
         };
     }
 }
-function addEffect(target, prop, store, effectSubscriber) {
-    const effectsMap = (store.$effects$ ||= {});
-    const effects = (Object.prototype.hasOwnProperty.call(effectsMap, prop) && effectsMap[prop]) ||
-        (effectsMap[prop] = []);
+function addStoreEffect(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_ALL_PROPS);
     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 (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)) {
@@ -1558,116 +1589,91 @@ const runResource = (task, container, host) => {
             else if (isSignal(obj)) {
                 return obj.value;
             }
-            else {
+            else if (isStore(obj)) {
+                // track whole store
+                addStoreEffect(getStoreTarget(obj), STORE_ALL_PROPS, getStoreHandler(obj), ctx.$effectSubscriber$);
                 return obj;
             }
+            else {
+                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 */
@@ -1745,22 +1751,67 @@ var VirtualVNodeProps;
     VirtualVNodeProps[VirtualVNodeProps["PROPS_OFFSET"] = 6] = "PROPS_OFFSET";
 })(VirtualVNodeProps || (VirtualVNodeProps = {}));
 
-const isForeignObjectElement = (elementName) => elementName.toLowerCase() === 'foreignobject';
+const mapApp_findIndx = (array, key, start) => {
+    assertTrue(start % 2 === 0, 'Expecting even number.');
+    let bottom = start >> 1;
+    let top = (array.length - 2) >> 1;
+    while (bottom <= top) {
+        const mid = bottom + ((top - bottom) >> 1);
+        const midKey = array[mid << 1];
+        if (midKey === key) {
+            return mid << 1;
+        }
+        if (midKey < key) {
+            bottom = mid + 1;
+        }
+        else {
+            top = mid - 1;
+        }
+    }
+    return (bottom << 1) ^ -1;
+};
+const mapArray_set = (array, key, value, start) => {
+    const indx = mapApp_findIndx(array, key, start);
+    if (indx >= 0) {
+        if (value == null) {
+            array.splice(indx, 2);
+        }
+        else {
+            array[indx + 1] = value;
+        }
+    }
+    else if (value != null) {
+        array.splice(indx ^ -1, 0, key, value);
+    }
+};
+const mapArray_get = (array, key, start) => {
+    const indx = mapApp_findIndx(array, key, start);
+    if (indx >= 0) {
+        return array[indx + 1];
+    }
+    else {
+        return null;
+    }
+};
+
+const isForeignObjectElement = (elementName) => {
+    return 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) {
@@ -2114,19 +2165,21 @@ const useOnEventsSequentialScope = () => {
  * @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);
@@ -2144,18 +2197,16 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         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) => {
@@ -2181,6 +2232,7 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
  */
 function addUseOnEvents(jsx, useOnEvents) {
     const jsxElement = findFirstStringJSX(jsx);
+    let jsxResult = jsx;
     return maybeThen(jsxElement, (jsxElement) => {
         let isInvisibleComponent = false;
         if (!jsxElement) {
@@ -2199,13 +2251,15 @@ function addUseOnEvents(jsx, useOnEvents) {
             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]);
                         }
@@ -2223,7 +2277,7 @@ function addUseOnEvents(jsx, useOnEvents) {
                 }
             }
         }
-        return jsxElement;
+        return jsxResult;
     });
 }
 function addUseOnEvent(jsxElement, key, value) {
@@ -2269,6 +2323,9 @@ function addScriptNodeForInvisibleComponents(jsx) {
             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;
         }
@@ -2278,29 +2335,46 @@ function addScriptNodeForInvisibleComponents(jsx) {
         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);
 }
-function isParentSlotProp(prop) {
-    return prop.startsWith(QSlotParent);
-}
 /** @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) {
@@ -2342,17 +2416,6 @@ function escapeHTML(html) {
     }
 }
 
-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$;
     /**
@@ -2371,9 +2434,9 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     /// (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.
@@ -2426,7 +2489,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     }
                     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);
@@ -2641,9 +2704,10 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         };
         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);
@@ -2684,6 +2748,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         // console.log('expectProjection', JSON.stringify(slotName));
         vCurrent = vnode_getProp(vParent, // The parent is the component and it should have our portal.
         slotName, (id) => vnode_locate(container.rootVNode, id));
+        // if projection is marked as deleted then we need to create a new one
+        vCurrent = vCurrent && vCurrent[VNodeProps.flags] & VNodeFlags.Deleted ? null : vCurrent;
         if (vCurrent == null) {
             vNewNode = vnode_newVirtual();
             // you may be tempted to add the projection into the current parent, but
@@ -2720,6 +2786,19 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         }
         else if (vProjectedNode === vCurrent) ;
         else {
+            const parent = vnode_getParent(vProjectedNode);
+            const isAlreadyProjected = !!parent && !(vnode_isElementVNode(parent) && vnode_getElementName(parent) === QTemplate);
+            if (isAlreadyProjected && vParent !== parent) {
+                /**
+                 * The node is already projected, but structure has been changed. In next steps we will
+                 * insert the vProjectedNode at the end. However we will find existing projection elements
+                 * (from already projected THE SAME projection as vProjectedNode!) during
+                 * vnode_insertBefore. We need to remove vnode from the vnode tree to avoid referencing it
+                 * to self and cause infinite loop. Don't remove it from DOM to avoid additional operations
+                 * and flickering.
+                 */
+                vnode_remove(journal, parent, vProjectedNode, false);
+            }
             // move from q:template to the target node
             vnode_insertBefore(journal, vParent, (vNewNode = vProjectedNode), vCurrent && getInsertBefore());
             vnode_setProp(vNewNode, QSlot, slotNameKey);
@@ -2773,8 +2852,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             while (vCurrent) {
                 const toRemove = vCurrent;
                 advanceToNextSibling();
-                cleanup(container, toRemove);
                 if (vParent === vnode_getParent(toRemove)) {
+                    cleanup(container, toRemove);
                     // If we are diffing projection than the parent is not the parent of the node.
                     // If that is the case we don't want to remove the node from the parent.
                     vnode_remove(journal, vParent, toRemove, true);
@@ -2811,10 +2890,19 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     // 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;
                 }
@@ -2827,12 +2915,15 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                         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,
                     });
@@ -2936,7 +3027,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     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;
                         }
                     });
@@ -2948,10 +3039,10 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     /** @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;
@@ -2971,12 +3062,15 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     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,
                 });
@@ -2990,21 +3084,21 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
         };
         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)) {
@@ -3199,14 +3293,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             }
             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;
-                }
+                host = vNewNode;
+                shouldRender = true;
             }
             if (host) {
                 const vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
@@ -3227,6 +3315,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             const lookupKey = jsxNode.key;
             const vNodeLookupKey = getKey(host);
             const lookupKeysAreEqual = lookupKey === vNodeLookupKey;
+            const vNodeComponentHash = getComponentHash(host, container.$getObjectById$);
             if (!lookupKeysAreEqual) {
                 // See if we already have this inline component later on.
                 vNewNode = retrieveChildWithKey(null, lookupKey);
@@ -3240,6 +3329,11 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 }
                 host = vNewNode;
             }
+            // inline components don't have component hash - q:renderFn prop, so it should be null
+            else if (vNodeComponentHash != null) {
+                insertNewInlineComponent();
+                host = vNewNode;
+            }
             if (host) {
                 let componentHost = host;
                 // Find the closest component host which has `OnRender` prop. This is need for subscriptions context.
@@ -3256,7 +3350,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     }
     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;
@@ -3344,8 +3438,8 @@ function propsDiffer(src, dst) {
     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;
     }
@@ -3384,6 +3478,7 @@ function cleanup(container, vNode) {
     let vCursor = vNode;
     // Depth first traversal
     if (vnode_isTextVNode(vNode)) {
+        markVNodeAsDeleted(vCursor);
         // Text nodes don't have subscriptions or children;
         return;
     }
@@ -3391,7 +3486,7 @@ function cleanup(container, vNode) {
     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) {
@@ -3401,7 +3496,7 @@ function cleanup(container, vNode) {
                         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);
                             }
@@ -3416,10 +3511,10 @@ function cleanup(container, vNode) {
                 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)) {
+                    if (isSlotProp(key)) {
                         const value = attrs[i + 1];
                         if (value) {
                             attrs[i + 1] = null; // prevent infinite loop
@@ -3436,7 +3531,7 @@ function cleanup(container, vNode) {
                     }
                 }
             }
-            const isProjection = type & VNodeFlags.Virtual && vnode_getProp(vCursor, QSlot, null) !== null;
+            const isProjection = vnode_isProjection(vCursor);
             // Descend into children
             if (!isProjection) {
                 // Only if it is not a projection
@@ -3459,6 +3554,9 @@ function cleanup(container, vNode) {
                 }
             }
         }
+        else if (type & VNodeFlags.Text) {
+            markVNodeAsDeleted(vCursor);
+        }
         // Out of children
         if (vCursor === vNode) {
             // we are where we started, this means that vNode has no children, so we are done.
@@ -3525,82 +3623,270 @@ var SiblingsArray;
     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 = [];
@@ -3785,38 +4071,29 @@ const ssrNodeDocumentPosition = (a, b) => {
  * - 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;
         }
@@ -3835,192 +4112,234 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             $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.
@@ -4030,6 +4349,8 @@ function choreComparator(a, b, rootVNode) {
                 }
             }
             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
@@ -4046,250 +4367,117 @@ function choreComparator(a, b, rootVNode) {
             }
         }
         const microTypeDiff = (a.$type$ & ChoreType.MICRO) - (b.$type$ & ChoreType.MICRO);
-        if (microTypeDiff !== 0) {
-            return microTypeDiff;
-        }
-        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);
-        }
-    });
-    return result;
-};
-const cleanupTask = (task) => {
-    const destroy = task.$destroy$;
-    if (destroy) {
-        task.$destroy$ = null;
-        try {
-            destroy();
+        if (microTypeDiff !== 0) {
+            return microTypeDiff;
         }
-        catch (err) {
-            logError(err);
+        // types are the same
+        const idxDiff = toNumber(a.$idx$) - toNumber(b.$idx$);
+        if (idxDiff !== 0) {
+            return idxDiff;
         }
+        // If the host is the same (or missing), and the type is the same,  we need to compare the target.
+        if (a.$target$ !== b.$target$ || a.$payload$ !== b.$payload$) {
+            // 1 means that we are going to process chores as FIFO
+            return 1;
+        }
+        // If the chore is the same as the current chore, we will run it again
+        if (b === currentChore) {
+            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
@@ -4307,6 +4495,15 @@ const NEEDS_COMPUTATION = Symbol('invalid');
 const DEBUG = false;
 // eslint-disable-next-line no-console
 const log = (...args) => console.log('SIGNAL', ...args.map(qwikDebugToString));
+var SignalFlags;
+(function (SignalFlags) {
+    SignalFlags[SignalFlags["INVALID"] = 1] = "INVALID";
+})(SignalFlags || (SignalFlags = {}));
+var WrappedSignalFlags;
+(function (WrappedSignalFlags) {
+    // should subscribe to value and be unwrapped for PropsProxy
+    WrappedSignalFlags[WrappedSignalFlags["UNWRAP"] = 2] = "UNWRAP";
+})(WrappedSignalFlags || (WrappedSignalFlags = {}));
 const throwIfQRLNotResolved = (qrl) => {
     const resolved = qrl.resolved;
     if (!resolved) {
@@ -4323,18 +4520,19 @@ const isSignal = (value) => {
     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"] = ":";
@@ -4371,19 +4569,16 @@ class Signal {
             }
             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;
@@ -4401,123 +4596,98 @@ class Signal {
         }
     }
     toString() {
-        return (`[${this.constructor.name}${this.$invalid$ ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
-            (this.$effects$?.map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    ')).join('\n') || ''));
+        return (`[${this.constructor.name}${this.$flags$ & SignalFlags.INVALID ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
+            (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);
+        }
     }
 };
 /**
@@ -4533,18 +4703,21 @@ class ComputedSignal extends Signal {
      * resolve the QRL during the mark dirty phase so that any call to it will be synchronous). )
      */
     $computeQrl$;
+    $flags$;
+    $forceRunEffects$ = false;
+    [_EFFECT_BACK_REF] = null;
+    constructor(container, fn, 
     // We need a separate flag to know when the computation needs running because
     // we need the old value to know if effects need running after computation
-    $invalid$ = true;
-    $forceRunEffects$ = false;
-    constructor(container, fn) {
+    flags = SignalFlags.INVALID) {
         // The value is used for comparison when signals trigger, which can only happen
         // when it was calculated before. Therefore we can pass whatever we like.
         super(container, NEEDS_COMPUTATION);
         this.$computeQrl$ = fn;
+        this.$flags$ = flags;
     }
     $invalidate$() {
-        this.$invalid$ = true;
+        this.$flags$ |= SignalFlags.INVALID;
         this.$forceRunEffects$ = false;
         // We should only call subscribers if the calculation actually changed.
         // Therefore, we need to calculate the value now.
@@ -4555,7 +4728,7 @@ class ComputedSignal extends Signal {
      * remained the same object
      */
     force() {
-        this.$invalid$ = true;
+        this.$flags$ |= SignalFlags.INVALID;
         this.$forceRunEffects$ = false;
         triggerEffects(this.$container$, this, this.$effects$);
     }
@@ -4568,14 +4741,14 @@ class ComputedSignal extends Signal {
         return this.$untrackedValue$;
     }
     $computeIfNeeded$() {
-        if (!this.$invalid$) {
+        if (!(this.$flags$ & SignalFlags.INVALID)) {
             return false;
         }
         const computeQrl = this.$computeQrl$;
         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)) {
@@ -4585,7 +4758,7 @@ class ComputedSignal extends Signal {
                 ]);
             }
             DEBUG && log('Signal.$compute$', untrackedValue);
-            this.$invalid$ = false;
+            this.$flags$ &= ~SignalFlags.INVALID;
             const didChange = untrackedValue !== this.$untrackedValue$;
             if (didChange) {
                 this.$untrackedValue$ = untrackedValue;
@@ -4610,20 +4783,22 @@ class WrappedSignal extends Signal {
     $args$;
     $func$;
     $funcStr$;
-    // 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;
+    $flags$;
     $hostElement$ = null;
     $forceRunEffects$ = false;
-    constructor(container, fn, args, fnStr) {
+    [_EFFECT_BACK_REF] = null;
+    constructor(container, fn, args, fnStr, 
+    // We need a separate flag to know when the computation needs running because
+    // we need the old value to know if effects need running after computation
+    flags = SignalFlags.INVALID | WrappedSignalFlags.UNWRAP) {
         super(container, NEEDS_COMPUTATION);
         this.$args$ = args;
         this.$func$ = fn;
         this.$funcStr$ = fnStr;
+        this.$flags$ = flags;
     }
     $invalidate$() {
-        this.$invalid$ = true;
+        this.$flags$ |= SignalFlags.INVALID;
         this.$forceRunEffects$ = false;
         // We should only call subscribers if the calculation actually changed.
         // Therefore, we need to calculate the value now.
@@ -4634,7 +4809,7 @@ class WrappedSignal extends Signal {
      * remained the same object
      */
     force() {
-        this.$invalid$ = true;
+        this.$flags$ |= SignalFlags.INVALID;
         this.$forceRunEffects$ = false;
         triggerEffects(this.$container$, this, this.$effects$);
     }
@@ -4647,10 +4822,12 @@ class WrappedSignal extends Signal {
         return this.$untrackedValue$;
     }
     $computeIfNeeded$() {
-        if (!this.$invalid$) {
+        if (!(this.$flags$ & SignalFlags.INVALID)) {
             return false;
         }
         const untrackedValue = trackSignal(() => this.$func$(...this.$args$), this, EffectProperty.VNODE, this.$container$);
+        // TODO: we should remove invalid flag here
+        // this.$flags$ &= ~SignalFlags.INVALID;
         const didChange = untrackedValue !== this.$untrackedValue$;
         if (didChange) {
             this.$untrackedValue$ = untrackedValue;
@@ -4683,7 +4860,7 @@ const applyQwikComponentBody = (ssr, jsx, component) => {
     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 {
@@ -4695,21 +4872,10 @@ class ParentComponentData {
     }
 }
 /** @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) {
@@ -4719,20 +4885,10 @@ function _walkJSX(ssr, value, options) {
             }
             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, {
@@ -4740,12 +4896,8 @@ function _walkJSX(ssr, value, options) {
                 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);
@@ -4784,7 +4936,6 @@ function processJSXNode(ssr, enqueue, value, options) {
             enqueue(async () => {
                 for await (const chunk of value) {
                     await _walkJSX(ssr, chunk, {
-                        allowPromises: true,
                         currentStyleScoped: options.styleScoped,
                         parentComponentFrame: options.parentComponentFrame,
                     });
@@ -4838,7 +4989,7 @@ function processJSXNode(ssr, enqueue, value, options) {
                     if (componentFrame) {
                         const compId = componentFrame.componentNode.id || '';
                         const projectionAttrs = isDev ? [DEBUG_TYPE, VirtualType.Projection] : [];
-                        projectionAttrs.push(':', compId);
+                        projectionAttrs.push(QSlotParent, compId);
                         ssr.openProjection(projectionAttrs);
                         const host = componentFrame.componentNode;
                         const node = ssr.getLastNode();
@@ -4871,7 +5022,6 @@ function processJSXNode(ssr, enqueue, value, options) {
                         value = generator({
                             async write(chunk) {
                                 await _walkJSX(ssr, chunk, {
-                                    allowPromises: true,
                                     currentStyleScoped: options.styleScoped,
                                     parentComponentFrame: options.parentComponentFrame,
                                 });
@@ -5028,11 +5178,23 @@ function setEvent(serializationCtx, key, rawValue) {
     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) {
@@ -5044,8 +5206,8 @@ function setEvent(serializationCtx, key, rawValue) {
             }
         }
     }
-    else if (isQrl(qrls)) {
-        value = qrlToString(serializationCtx, qrls);
+    else if (isQrl$1(qrls)) {
+        value = getQrlString(qrls);
         addQwikEventToSerializationContext(serializationCtx, key, qrls);
     }
     return value;
@@ -5095,7 +5257,7 @@ function appendClassIfScopedStyleExists(jsx, styleScoped) {
  *
  * @public
  */
-const version = "2.0.0-alpha.6-dev+d848ba5";
+const version = "2.0.0-alpha.8-dev+66037b5";
 
 /** @internal */
 class _SharedContainer {
@@ -5127,13 +5289,6 @@ class _SharedContainer {
     }
 }
 
-/** @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];
@@ -5157,7 +5312,7 @@ const _wrapProp = (...args) => {
     }
     if (isSignal(obj)) {
         assertEqual(prop, 'value', 'Left side is a signal, prop must be value');
-        if (obj instanceof WrappedSignal) {
+        if (obj instanceof WrappedSignal && obj.flags & WrappedSignalFlags.UNWRAP) {
             return obj;
         }
         return getWrapped(args);
@@ -5183,6 +5338,17 @@ const _wrapProp = (...args) => {
     // We need to forward the access to the original object
     return getWrapped(args);
 };
+/** @internal */
+const _wrapStore = (obj, prop) => {
+    const target = getStoreTarget(obj);
+    const value = target[prop];
+    if (isSignal(value)) {
+        return value;
+    }
+    else {
+        return new WrappedSignal(null, getProp, [obj, prop], null, SignalFlags.INVALID);
+    }
+};
 /** @internal @deprecated v1 compat */
 const _wrapSignal = (obj, prop) => {
     const r = _wrapProp(obj, prop);
@@ -5453,7 +5619,9 @@ class PropsProxyHandler {
             ? this.$constProps$[prop]
             : this.$varProps$[prop];
         // a proxied value that the optimizer made
-        return value instanceof WrappedSignal ? value.value : value;
+        return value instanceof WrappedSignal && value.$flags$ & WrappedSignalFlags.UNWRAP
+            ? value.value
+            : value;
     }
     set(_, prop, value) {
         if (prop === _CONST_PROPS) {
@@ -5545,7 +5713,7 @@ function qwikDebugToString(value) {
     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') {
@@ -5687,8 +5855,8 @@ const VNodeDataChar = {
     ID_CHAR: /* ********* */ '=',
     PROPS: /* ************** */ 62, // `>` - `q:props' - Component Props
     PROPS_CHAR: /* ****** */ '>',
-    SLOT_REF: /* *********** */ 63, // `?` - `q:sref` - Slot reference.
-    SLOT_REF_CHAR: /* *** */ '?',
+    SLOT_PARENT: /* ******** */ 63, // `?` - `q:sparent` - Slot parent.
+    SLOT_PARENT_CHAR: /*  */ '?',
     KEY: /* **************** */ 64, // `@` - `q:key` - Element key.
     KEY_CHAR: /* ******** */ '@',
     SEQ: /* **************** */ 91, // `[` - `q:seq' - Seq value from `useSequentialScope()`
@@ -5699,14 +5867,21 @@ const VNodeDataChar = {
     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
  *
@@ -5929,6 +6104,12 @@ const vnode_isVirtualVNode = (vNode) => {
     const flag = vNode[VNodeProps.flags];
     return (flag & VNodeFlags.Virtual) === VNodeFlags.Virtual;
 };
+const vnode_isProjection = (vNode) => {
+    assertDefined(vNode, 'Missing vNode');
+    const flag = vNode[VNodeProps.flags];
+    return ((flag & VNodeFlags.Virtual) === VNodeFlags.Virtual &&
+        vnode_getProp(vNode, QSlot, null) !== null);
+};
 const ensureTextVNode = (vNode) => {
     assertTrue(vnode_isTextVNode(vNode), 'Expecting TextVNode was: ' + vnode_getNodeTypeName(vNode));
     return vNode;
@@ -5962,6 +6143,7 @@ const vnode_ensureElementInflated = (vnode) => {
         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;
@@ -5972,15 +6154,15 @@ const vnode_ensureElementInflated = (vnode) => {
             }
             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);
             }
         }
     }
@@ -6372,7 +6554,7 @@ const vnode_applyJournal = (journal) => {
                     element[key] = parseBoolean(value);
                 }
                 else if (key === 'value' && key in element) {
-                    element.value = escapeHTML(String(value));
+                    element.value = String(value);
                 }
                 else if (key === dangerouslySetInnerHTML) {
                     element.innerHTML = value;
@@ -6416,54 +6598,16 @@ const vnode_applyJournal = (journal) => {
     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)) {
@@ -6587,9 +6731,10 @@ const vnode_getElementName = (vnode) => {
     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 = isDev ? fastNodeName(element).toLowerCase() : fastNodeName(element);
+        elementName = elementVNode[ElementVNodeProps.elementName] = nodeName;
+        elementVNode[VNodeProps.flags] |= vnode_getElementNamespaceFlags(element);
     }
     return elementName;
 };
@@ -6771,6 +6916,20 @@ const fastFirstChild = (node) => {
     }
     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)) {
@@ -6837,8 +6996,11 @@ const materializeFromDOM = (vParent, firstChild, vData) => {
                 container.$setRawState$(parseInt(id), vParent);
                 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
@@ -6848,6 +7010,18 @@ const materializeFromDOM = (vParent, firstChild, vData) => {
     }
     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;
@@ -6892,8 +7066,9 @@ const vnode_getAttrKeys = (vnode) => {
     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);
             }
@@ -6906,22 +7081,23 @@ const vnode_setAttr = (journal, vnode, key, value) => {
     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];
@@ -6934,7 +7110,8 @@ const vnode_getAttr = (vnode, key) => {
     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;
 };
@@ -6942,11 +7119,12 @@ const vnode_getProp = (vnode, key, getObject) => {
     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;
         }
@@ -6955,12 +7133,13 @@ const vnode_getProp = (vnode, key, getObject) => {
 };
 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) => {
@@ -6973,6 +7152,9 @@ const vnode_getPropStartIndex = (vnode) => {
     }
     throw qError(QError.invalidVNodeType, [type]);
 };
+const vnode_getProps = (vnode) => {
+    return vnode[vnode_getPropStartIndex(vnode)];
+};
 const vnode_getParent = (vnode) => {
     return vnode[VNodeProps.parent] || null;
 };
@@ -7124,9 +7306,6 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         else if (peek() === VNodeDataChar.PROPS) {
             vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
         }
-        else if (peek() === VNodeDataChar.SLOT_REF) {
-            vnode_setAttr(null, vParent, QSlotRef, consumeValue());
-        }
         else if (peek() === VNodeDataChar.KEY) {
             vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
         }
@@ -7136,8 +7315,14 @@ function materializeFromVNodeData(vParent, vData, element, child) {
         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.SLOT_PARENT) {
+            vnode_setProp(vParent, QSlotParent, consumeValue());
         }
         else if (peek() === VNodeDataChar.CONTEXT) {
             vnode_setAttr(null, vParent, QCtxAttr, consumeValue());
@@ -7245,23 +7430,20 @@ const vnode_getProjectionParentComponent = (vHost, rootVNode) => {
 };
 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 (isDev) {
             this.toString = vnode_toString;
         }
@@ -7326,10 +7508,12 @@ function invokeApply(context, fn, args) {
     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) => {
@@ -7364,16 +7548,14 @@ const trackInvocation = /*#__PURE__*/ newInvokeContext(undefined, undefined, und
  * @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);
     }
@@ -7394,8 +7576,16 @@ const _getContextElement = () => {
     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);
     }
@@ -8031,12 +8221,12 @@ class DomContainer extends _SharedContainer {
     $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'));
+        super(() => this.scheduleRender(), () => vnode_applyJournal(this.$journal$), {}, element.getAttribute(QLocaleAttr));
         this.qContainer = element.getAttribute(QContainerAttr);
         if (!this.qContainer) {
             throw qError(QError.elementWithoutContainer);
@@ -8059,29 +8249,29 @@ class DomContainer extends _SharedContainer {
         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;
@@ -8105,7 +8295,7 @@ class DomContainer extends _SharedContainer {
                 throw err;
             }
         }
-        const errorStore = this.resolveContext(host, ERROR_CONTEXT);
+        const errorStore = host && this.resolveContext(host, ERROR_CONTEXT);
         if (!errorStore) {
             throw err;
         }
@@ -8141,7 +8331,7 @@ class DomContainer extends _SharedContainer {
                 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);
@@ -8161,7 +8351,7 @@ class DomContainer extends _SharedContainer {
             case ELEMENT_PROPS:
             case OnRenderProp:
             case QCtxAttr:
-            case QSubscribers:
+            case QBackRefs:
                 getObjectById = this.$getObjectById$;
                 break;
             case ELEMENT_SEQ_IDX:
@@ -8174,7 +8364,7 @@ class DomContainer extends _SharedContainer {
     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$;
@@ -8197,12 +8387,13 @@ class DomContainer extends _SharedContainer {
     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);
                     }
                 }
             }
@@ -8213,7 +8404,7 @@ class DomContainer extends _SharedContainer {
             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];
@@ -8285,8 +8476,7 @@ class DeserializationHandler {
                 ? 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;
@@ -8352,6 +8542,7 @@ const inflate = (container, target, typeId, data) => {
     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];
@@ -8391,7 +8582,7 @@ const inflate = (container, target, typeId, data) => {
             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:
@@ -8414,12 +8605,9 @@ const inflate = (container, target, typeId, data) => {
             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;
@@ -8428,7 +8616,7 @@ const inflate = (container, target, typeId, data) => {
             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: {
@@ -8436,10 +8624,11 @@ const inflate = (container, target, typeId, data) => {
             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.$flags$ = d[4];
+            signal.$hostElement$ = d[5];
+            signal.$effects$ = new Set(d.slice(6));
             break;
         }
         case TypeIds.ComputedSignal: {
@@ -8451,7 +8640,7 @@ const inflate = (container, target, typeId, data) => {
                 computed.$untrackedValue$ = d[2];
             }
             else {
-                computed.$invalid$ = true;
+                computed.$flags$ |= SignalFlags.INVALID;
                 /**
                  * If we try to compute value and the qrl is not resolved, then system throws an error with
                  * qrl promise. To prevent that we should early resolve computed qrl while computed
@@ -8559,6 +8748,7 @@ const _constants = [
     EMPTY_ARRAY,
     EMPTY_OBJ,
     NEEDS_COMPUTATION,
+    STORE_ALL_PROPS,
     Slot,
     Fragment,
     NaN,
@@ -8639,6 +8829,8 @@ const allocate = (container, typeId, value) => {
                 reject = rej;
             });
             resolvers.set(promise, [resolve, reject]);
+            // Don't leave unhandled promise rejections
+            promise.catch(() => { });
             return promise;
         case TypeIds.Uint8Array:
             const encodedLength = value.length;
@@ -8648,12 +8840,9 @@ const allocate = (container, typeId, value) => {
             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);
@@ -8662,7 +8851,7 @@ const allocate = (container, typeId, value) => {
                 throw qError(QError.serializeErrorExpectedVNode, [typeof vNode]);
             }
         case TypeIds.EffectData:
-            return new EffectPropData({});
+            return new SubscriptionData({});
         default:
             throw qError(QError.serializeErrorCannotAllocate, [typeId]);
     }
@@ -8694,7 +8883,7 @@ function parseQRL(qrl) {
         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$;
@@ -8812,7 +9001,7 @@ prepVNodeData) => {
         /** 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$);
                     }
@@ -8831,6 +9020,7 @@ prepVNodeData) => {
                 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)) ;
@@ -8840,8 +9030,7 @@ prepVNodeData) => {
             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)) {
@@ -8864,20 +9053,19 @@ prepVNodeData) => {
                  */
                 const v = obj instanceof WrappedSignal
                     ? obj.untrackedValue
-                    : obj instanceof ComputedSignal && (obj.$invalid$ || fastSkipSerialize(obj))
+                    : obj instanceof ComputedSignal &&
+                        (obj.$flags$ & SignalFlags.INVALID || fastSkipSerialize(obj))
                         ? NEEDS_COMPUTATION
                         : obj.$untrackedValue$;
                 if (v !== NEEDS_COMPUTATION) {
                     discoveredValues.push(v);
                 }
                 if (obj.$effects$) {
-                    discoveredValues.push(...obj.$effects$);
+                    discoveredValues.push(obj.$effects$);
                 }
                 // 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$);
                     }
@@ -8886,11 +9074,13 @@ prepVNodeData) => {
                     }
                 }
                 else if (obj instanceof ComputedSignal) {
+                    discoverEffectBackRefs(obj[_EFFECT_BACK_REF], discoveredValues);
                     discoveredValues.push(obj.$computeQrl$);
                 }
             }
             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);
@@ -8909,7 +9099,7 @@ prepVNodeData) => {
             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)) {
@@ -8925,7 +9115,7 @@ prepVNodeData) => {
                 });
                 promises.push(obj);
             }
-            else if (obj instanceof EffectPropData) {
+            else if (obj instanceof SubscriptionData) {
                 discoveredValues.push(obj.data);
             }
             else if (isObjectLiteral(obj)) {
@@ -8970,15 +9160,20 @@ const discoverValuesForVNodeData = (vnodeData, discoveredValues) => {
     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) {
+        discoveredValues.push(effectsBackRefs);
+    }
+};
 const promiseResults = new WeakMap();
 /**
  * Format:
@@ -9050,7 +9245,7 @@ function serialize(serializationContext) {
             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);
@@ -9125,6 +9320,9 @@ function serialize(serializationContext) {
         else if (value === NEEDS_COMPUTATION) {
             output(TypeIds.Constant, Constants.NEEDS_COMPUTATION);
         }
+        else if (value === STORE_ALL_PROPS) {
+            output(TypeIds.Constant, Constants.STORE_ALL_PROPS);
+        }
         else {
             throw qError(QError.serializeErrorUnknownType, [typeof value]);
         }
@@ -9161,7 +9359,7 @@ function serialize(serializationContext) {
                     : 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)) {
@@ -9172,6 +9370,7 @@ function serialize(serializationContext) {
                 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 {
@@ -9179,7 +9378,6 @@ function serialize(serializationContext) {
                 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];
@@ -9189,7 +9387,7 @@ function serialize(serializationContext) {
                         serializationContext.$addRoot$(innerStore);
                     }
                 }
-                const out = [storeTarget, flags, effects, storeEffect, ...innerStores];
+                const out = [storeTarget, flags, effects, ...innerStores];
                 while (out[out.length - 1] == null) {
                     out.pop();
                 }
@@ -9222,14 +9420,15 @@ function serialize(serializationContext) {
              * It can never be meant to become a vNode, because vNodes are internal only.
              */
             const v = value instanceof ComputedSignal &&
-                (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$))
+                (value.$flags$ & SignalFlags.INVALID || fastSkipSerialize(value.$untrackedValue$))
                 ? NEEDS_COMPUTATION
                 : value.$untrackedValue$;
             if (value instanceof WrappedSignal) {
                 output(TypeIds.WrappedSignal, [
                     ...serializeWrappingFn(serializationContext, value),
-                    value.$effectDependencies$,
+                    filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                     v,
+                    value.$flags$,
                     value.$hostElement$,
                     ...(value.$effects$ || []),
                 ]);
@@ -9335,7 +9534,7 @@ function serialize(serializationContext) {
                 value.$flags$,
                 value.$index$,
                 value.$el$,
-                value.$effectDependencies$,
+                value[_EFFECT_BACK_REF],
                 value.$state$,
             ];
             while (out[out.length - 1] == null) {
@@ -9358,12 +9557,27 @@ function serialize(serializationContext) {
             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] === '{') {
@@ -9376,15 +9590,12 @@ function serializeWrappingFn(serializationContext, value) {
 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);
@@ -9561,9 +9772,9 @@ const frameworkType = (obj) => {
     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' ||
@@ -9572,6 +9783,10 @@ const canSerialize = (value) => {
         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);
@@ -9580,7 +9795,7 @@ const canSerialize = (value) => {
             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;
                 }
             }
@@ -9588,7 +9803,7 @@ const canSerialize = (value) => {
         }
         else if (proto == Array.prototype) {
             for (let i = 0; i < value.length; i++) {
-                if (!canSerialize(value[i])) {
+                if (!canSerialize(value[i], seen)) {
                     return false;
                 }
             }
@@ -9638,7 +9853,7 @@ const canSerialize = (value) => {
         }
     }
     else if (typeof value === 'function') {
-        if (isQrl(value) || isQwikComponent(value)) {
+        if (isQrl$1(value) || isQwikComponent(value)) {
             return true;
         }
     }
@@ -9691,20 +9906,21 @@ var Constants;
     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_ALL_PROPS"] = 8] = "STORE_ALL_PROPS";
+    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) => {
@@ -9713,10 +9929,12 @@ const _verifySerializable = (value, seen, ctx, preMessage) => {
         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;
         }
@@ -9820,16 +10038,7 @@ const _weakSerialize = (input) => {
     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) {
@@ -9851,9 +10060,14 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
     };
     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;
@@ -9866,13 +10080,14 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
             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);
@@ -9884,8 +10099,20 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         }
         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;
@@ -9913,11 +10140,11 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         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) => {
@@ -9940,10 +10167,9 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
             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,
@@ -9951,7 +10177,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         $setContainer$: setContainer,
         $chunk$: chunk,
         $symbol$: symbol,
-        $refSymbol$: refSymbol,
         $hash$: hash,
         getFn: bindFnToContext,
         $capture$: capture,
@@ -9960,8 +10185,8 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         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 (isDev) {
         Object.defineProperty(qrl, '_devOnlySymbolRef', {
@@ -9975,20 +10200,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
     }
     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)) {
@@ -10101,7 +10312,7 @@ const $ = (expression) => {
     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 = $;
@@ -10127,7 +10338,7 @@ const sync$ = (fn) => {
         // 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.
@@ -10144,7 +10355,7 @@ const _qrlSync = function (fn, serializedFn) {
         serializedFn = fn.toString();
     }
     fn.serialized = serializedFn;
-    return createQRL('', SYNC_QRL, fn, null, null, null, null);
+    return createQRL('', SYNC_QRL, fn, null, null, null);
 };
 
 /** @internal */
@@ -10863,6 +11074,21 @@ const useVisibleTaskQrl = (qrl, opts) => {
         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!!!
@@ -11173,5 +11399,5 @@ const PrefetchGraph = (opts = {}) => {
     return _jsxSorted('script', null, props, null, 0, 'prefetch-graph');
 };
 
-export { $, Fragment, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, EMPTY_ARRAY as _EMPTY_ARRAY, EffectPropData as _EffectData, _IMMUTABLE, _SharedContainer, _VAR_PROPS, _deserialize, _fnSignal, _getContextElement, _getContextEvent, getDomContainer as _getDomContainer, _getQContainerElement, _hW, isJSXNode as _isJSXNode, isStringifiable as _isStringifiable, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, _noopQrl, _noopQrlDEV, _qrlSync, _regSymbol, _restProps, _serialize, verifySerializable as _verifySerializable, _waitUntilRendered, _walkJSX, _weakSerialize, _wrapProp, _wrapSignal, component$, componentQrl, createComputed$, createComputedQrl, createContextId, h as createElement, createSignal, event$, eventQrl, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsx as jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
+export { $, Fragment, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, SubscriptionData as _EffectData, _IMMUTABLE, _SharedContainer, _VAR_PROPS, _deserialize, _fnSignal, _getContextElement, _getContextEvent, getDomContainer as _getDomContainer, _getQContainerElement, isJSXNode as _isJSXNode, isStringifiable as _isStringifiable, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, _noopQrl, _noopQrlDEV, _qrlSync, _regSymbol, _restProps, queueQRL as _run, _serialize, scheduleTask as _task, verifySerializable as _verifySerializable, _waitUntilRendered, _walkJSX, _weakSerialize, _wrapProp, _wrapSignal, _wrapStore, component$, componentQrl, createComputed$, createComputedQrl, createContextId, h as createElement, createSignal, event$, eventQrl, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsx as jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
 //# sourceMappingURL=core.mjs.map