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

package/dist/core.mjs

@@ -1,11 +1,11 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.5-dev+cb53bbd
+ * @qwik.dev/core 2.0.0-alpha.7-dev+a26598a
  * Copyright QwikDev. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
  */
-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,13 +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
-            'SsrError: {{0}}', // 45
-            '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) {
@@ -190,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";
@@ -234,19 +232,153 @@ var QError;
     QError[QError["elementWithoutContainer"] = 42] = "elementWithoutContainer";
     QError[QError["invalidVNodeType"] = 43] = "invalidVNodeType";
     QError[QError["materializeVNodeDataError"] = 44] = "materializeVNodeDataError";
-    QError[QError["serverHostMismatch"] = 45] = "serverHostMismatch";
-    QError[QError["cannotCoerceSignal"] = 46] = "cannotCoerceSignal";
-    QError[QError["computedNotSync"] = 47] = "computedNotSync";
-    QError[QError["computedReadOnly"] = 48] = "computedReadOnly";
-    QError[QError["wrappedReadOnly"] = 49] = "wrappedReadOnly";
-    QError[QError["promisesNotExpected"] = 50] = "promisesNotExpected";
-    QError[QError["unsafeAttr"] = 51] = "unsafeAttr";
+    QError[QError["cannotCoerceSignal"] = 45] = "cannotCoerceSignal";
+    QError[QError["computedNotSync"] = 46] = "computedNotSync";
+    QError[QError["computedReadOnly"] = 47] = "computedReadOnly";
+    QError[QError["wrappedReadOnly"] = 48] = "wrappedReadOnly";
+    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.
+ *
+ * Theses are used to give a name to a VirtualVNode. This is useful for debugging and testing.
+ *
+ * The name is only added in development mode and is not included in production builds.
+ */
+const DEBUG_TYPE = 'q:type';
+var VirtualType;
+(function (VirtualType) {
+    VirtualType["Virtual"] = "V";
+    VirtualType["Fragment"] = "F";
+    VirtualType["WrappedSignal"] = "S";
+    VirtualType["Awaited"] = "A";
+    VirtualType["Component"] = "C";
+    VirtualType["InlineComponent"] = "I";
+    VirtualType["Projection"] = "P";
+})(VirtualType || (VirtualType = {}));
+const START = '\x1b[34m';
+const END = '\x1b[0m';
+const VirtualTypeName = {
+    [VirtualType.Virtual]: /* ********* */ START + 'Virtual' + END, //
+    [VirtualType.Fragment]: /* ******** */ START + 'Fragment' + END, //
+    [VirtualType.WrappedSignal]: /* *** */ START + 'Signal' + END, //
+    [VirtualType.Awaited]: /* ********* */ START + 'Awaited' + END, //
+    [VirtualType.Component]: /* ******* */ START + 'Component' + END, //
+    [VirtualType.InlineComponent]: /* * */ START + 'InlineComponent' + END, //
+    [VirtualType.Projection]: /* ****** */ START + 'Projection' + END, //
+};
+var QContainerValue;
+(function (QContainerValue) {
+    QContainerValue["PAUSED"] = "paused";
+    QContainerValue["RESUMED"] = "resumed";
+    // these values below are used in the qwik loader as a plain text for the q:container selector
+    // standard dangerouslySetInnerHTML
+    QContainerValue["HTML"] = "html";
+    // textarea
+    QContainerValue["TEXT"] = "text";
+})(QContainerValue || (QContainerValue = {}));
+
+/** State factory of the component. */
+const OnRenderProp = 'q:renderFn';
+/** Component style content prefix */
+const ComponentStylesPrefixContent = '⚡️';
+/** `<some-element q:slot="...">` */
+const QSlot = 'q:slot';
+const QSlotParent = ':';
+const QSlotRef = 'q:sref';
+const QSlotS = 'q:s';
+const QStyle = 'q:style';
+const QStyleSelector = 'style[q\\:style]';
+const QStyleSSelector = 'style[q\\:sstyle]';
+const QStylesAllSelector = QStyleSelector + ',' + QStyleSSelector;
+const QScopedStyle = 'q:sstyle';
+const QCtxAttr = 'q:ctx';
+const QBackRefs = 'q:brefs';
+const QFuncsPrefix = 'qFuncs_';
+const getQFuncs = (document, hash) => {
+    return document[QFuncsPrefix + hash] || [];
+};
+const QBaseAttr = 'q:base';
+const QLocaleAttr = 'q:locale';
+const QManifestHashAttr = 'q:manifest-hash';
+const QInstanceAttr = 'q:instance';
+const QContainerIsland = 'q:container-island';
+const QContainerIslandEnd = '/' + QContainerIsland;
+const QIgnore = 'q:ignore';
+const QIgnoreEnd = '/' + QIgnore;
+const QContainerAttr = 'q:container';
+const QContainerAttrEnd = '/' + QContainerAttr;
+const QTemplate = 'q:template';
+// the same selector should be inside the qwik loader
+// and the same selector should be inside the qwik router spa-shim and spa-init
+const QContainerSelector = '[q\\:container]:not([q\\:container=' +
+    QContainerValue.HTML +
+    ']):not([q\\:container=' +
+    QContainerValue.TEXT +
+    '])';
+const HTML_NS = 'http://www.w3.org/1999/xhtml';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
+const ResourceEvent = 'qResource';
+const RenderEvent = 'qRender';
+const TaskEvent = 'qTask';
+const QDefaultSlot = '';
+/**
+ * Attribute to mark that this VNode has a pointer to itself from the `qwik/json` state.
+ *
+ * As the VNode get materialized the vnode now becomes eligible for mutation. Once the vnode mutates
+ * the `VNode` references from the `qwik/json` may become invalid. For this reason, these references
+ * need to be eagerly resolved. `VNODE_REF` stores a pointer to "this" vnode. This allows the system
+ * to eagerly resolve these pointes as the vnodes are materialized.
+ */
+const ELEMENT_ID = 'q:id';
+const ELEMENT_KEY = 'q:key';
+const ELEMENT_PROPS = 'q:props';
+const ELEMENT_SEQ = 'q:seq';
+const ELEMENT_SEQ_IDX = 'q:seqIdx';
+const Q_PREFIX = 'q:';
+/** Non serializable markers - always begins with `:` character */
+const NON_SERIALIZABLE_MARKER_PREFIX = ':';
+const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
+const USE_ON_LOCAL_SEQ_IDX = NON_SERIALIZABLE_MARKER_PREFIX + 'onIdx';
+const USE_ON_LOCAL_FLAGS = NON_SERIALIZABLE_MARKER_PREFIX + 'onFlags';
+// comment nodes
+const FLUSH_COMMENT = 'qkssr-f';
+const STREAM_BLOCK_START_COMMENT = 'qkssr-pu';
+const STREAM_BLOCK_END_COMMENT = 'qkssr-po';
+const Q_PROPS_SEPARATOR = ':';
+const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
+const qwikInspectorAttr = 'data-qwik-inspector';
+
 // keep this import from core/build so the cjs build works
 const createPlatform = () => {
     return {
@@ -307,7 +439,7 @@ const createPlatform = () => {
  */
 const toUrl = (doc, containerEl, url) => {
     const baseURI = doc.baseURI;
-    const base = new URL(containerEl.getAttribute('q:base') ?? baseURI, baseURI);
+    const base = new URL(containerEl.getAttribute(QBaseAttr) ?? baseURI, baseURI);
     return new URL(url, base);
 };
 let _platform = /*#__PURE__ */ createPlatform();
@@ -386,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);
 };
@@ -399,15 +526,24 @@ const delay = (timeout) => {
         setTimeout(resolve, timeout);
     });
 };
+// Retries a function that throws a promise.
 function retryOnPromise(fn, retryCount = 0) {
-    try {
-        return fn();
-    }
-    catch (e) {
+    const retryOrThrow = (e) => {
         if (isPromise(e) && retryCount < MAX_RETRY_ON_PROMISE_COUNT) {
             return e.then(retryOnPromise.bind(null, fn, retryCount++));
         }
         throw e;
+    };
+    try {
+        const result = fn();
+        if (isPromise(result)) {
+            // not awaited promise is not caught by try/catch block
+            return result.catch((e) => retryOrThrow(e));
+        }
+        return result;
+    }
+    catch (e) {
+        return retryOrThrow(e);
     }
 }
 
@@ -450,118 +586,6 @@ var VNodeDataFlag;
     VNodeDataFlag[VNodeDataFlag["SERIALIZE"] = 16] = "SERIALIZE";
 })(VNodeDataFlag || (VNodeDataFlag = {}));
 
-/**
- * A friendly name tag for a VirtualVNode.
- *
- * Theses are used to give a name to a VirtualVNode. This is useful for debugging and testing.
- *
- * The name is only added in development mode and is not included in production builds.
- */
-const DEBUG_TYPE = 'q:type';
-var VirtualType;
-(function (VirtualType) {
-    VirtualType["Virtual"] = "V";
-    VirtualType["Fragment"] = "F";
-    VirtualType["WrappedSignal"] = "S";
-    VirtualType["Awaited"] = "A";
-    VirtualType["Component"] = "C";
-    VirtualType["InlineComponent"] = "I";
-    VirtualType["Projection"] = "P";
-})(VirtualType || (VirtualType = {}));
-const START = '\x1b[34m';
-const END = '\x1b[0m';
-const VirtualTypeName = {
-    [VirtualType.Virtual]: /* ********* */ START + 'Virtual' + END, //
-    [VirtualType.Fragment]: /* ******** */ START + 'Fragment' + END, //
-    [VirtualType.WrappedSignal]: /* *** */ START + 'Signal' + END, //
-    [VirtualType.Awaited]: /* ********* */ START + 'Awaited' + END, //
-    [VirtualType.Component]: /* ******* */ START + 'Component' + END, //
-    [VirtualType.InlineComponent]: /* * */ START + 'InlineComponent' + END, //
-    [VirtualType.Projection]: /* ****** */ START + 'Projection' + END, //
-};
-var QContainerValue;
-(function (QContainerValue) {
-    QContainerValue["PAUSED"] = "paused";
-    QContainerValue["RESUMED"] = "resumed";
-    // these values below are used in the qwik loader as a plain text for the q:container selector
-    // standard dangerouslySetInnerHTML
-    QContainerValue["HTML"] = "html";
-    // textarea
-    QContainerValue["TEXT"] = "text";
-})(QContainerValue || (QContainerValue = {}));
-
-/** State factory of the component. */
-const OnRenderProp = 'q:renderFn';
-/** Component style content prefix */
-const ComponentStylesPrefixContent = '⭐️';
-/** `<some-element q:slot="...">` */
-const QSlot = 'q:slot';
-const QSlotParent = ':';
-const QSlotRef = 'q:sref';
-const QSlotS = 'q:s';
-const QStyle = 'q:style';
-const QStyleSelector = 'style[q\\:style]';
-const QStyleSSelector = 'style[q\\:sstyle]';
-const QStylesAllSelector = QStyleSelector + ',' + QStyleSSelector;
-const QScopedStyle = 'q:sstyle';
-const QCtxAttr = 'q:ctx';
-const QSubscribers = 'q:subs';
-const QFuncsPrefix = 'qFuncs_';
-const getQFuncs = (document, hash) => {
-    return document[QFuncsPrefix + hash] || [];
-};
-const QBaseAttr = 'q:base';
-const QLocaleAttr = 'q:locale';
-const QManifestHashAttr = 'q:manifest-hash';
-const QInstanceAttr = 'q:instance';
-const QContainerIsland = 'q:container-island';
-const QContainerIslandEnd = '/' + QContainerIsland;
-const QIgnore = 'q:ignore';
-const QIgnoreEnd = '/' + QIgnore;
-const QContainerAttr = 'q:container';
-const QContainerAttrEnd = '/' + QContainerAttr;
-const QTemplate = 'q:template';
-// the same selector should be inside the qwik loader
-// and the same selector should be inside the qwik router spa-shim and spa-init
-const QContainerSelector = '[q\\:container]:not([q\\:container=' +
-    QContainerValue.HTML +
-    ']):not([q\\:container=' +
-    QContainerValue.TEXT +
-    '])';
-const HTML_NS = 'http://www.w3.org/1999/xhtml';
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
-const ResourceEvent = 'qResource';
-const RenderEvent = 'qRender';
-const TaskEvent = 'qTask';
-const QDefaultSlot = '';
-/**
- * Attribute to mark that this VNode has a pointer to itself from the `qwik/json` state.
- *
- * As the VNode get materialized the vnode now becomes eligible for mutation. Once the vnode mutates
- * the `VNode` references from the `qwik/json` may become invalid. For this reason, these references
- * need to be eagerly resolved. `VNODE_REF` stores a pointer to "this" vnode. This allows the system
- * to eagerly resolve these pointes as the vnodes are materialized.
- */
-const ELEMENT_ID = 'q:id';
-const ELEMENT_KEY = 'q:key';
-const ELEMENT_PROPS = 'q:props';
-const ELEMENT_SEQ = 'q:seq';
-const ELEMENT_SEQ_IDX = 'q:seqIdx';
-const Q_PREFIX = 'q:';
-/** Non serializable markers - always begins with `:` character */
-const NON_SERIALIZABLE_MARKER_PREFIX = ':';
-const USE_ON_LOCAL = NON_SERIALIZABLE_MARKER_PREFIX + 'on';
-const USE_ON_LOCAL_SEQ_IDX = NON_SERIALIZABLE_MARKER_PREFIX + 'onIdx';
-const USE_ON_LOCAL_FLAGS = NON_SERIALIZABLE_MARKER_PREFIX + 'onFlags';
-// comment nodes
-const FLUSH_COMMENT = 'qkssr-f';
-const STREAM_BLOCK_START_COMMENT = 'qkssr-pu';
-const STREAM_BLOCK_END_COMMENT = 'qkssr-po';
-const Q_PROPS_SEPARATOR = ':';
-const dangerouslySetInnerHTML = 'dangerouslySetInnerHTML';
-const qwikInspectorAttr = 'data-qwik-inspector';
-
 let _locale = undefined;
 /**
  * Retrieve the current locale.
@@ -611,7 +635,7 @@ function setLocale(locale) {
     _locale = locale;
 }
 
-const isQrl$1 = (value) => {
+const isQrl = (value) => {
     return typeof value === 'function' && typeof value.getSymbol === 'function';
 };
 
@@ -683,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) => {
@@ -726,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$`.
@@ -850,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',
@@ -1008,36 +1147,6 @@ 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');
@@ -1182,8 +1291,12 @@ class StoreHandler {
         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,
@@ -1191,39 +1304,185 @@ 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 addEffect(target, prop, store, effectSubscription) {
+    const effectsMap = (store.$effects$ ||= new Map());
+    let effects = effectsMap.get(prop);
+    if (!effects) {
+        effects = new Set();
+        effectsMap.set(prop, effects);
+    }
     // Let's make sure that we have a reference to this effect.
     // Adding reference is essentially adding a subscription, so if the signal
     // changes we know who to notify.
-    ensureContainsEffect(effects, effectSubscriber);
+    ensureContainsSubscription(effects, effectSubscription);
     // But when effect is scheduled in needs to be able to know which signals
     // to unsubscribe from. So we need to store the reference from the effect back
     // to this signal.
-    ensureContains(effectSubscriber, target);
-    // We need to add the subscriber to the effect so that we can clean it up later
-    ensureEffectContainsSubscriber(effectSubscriber[EffectSubscriptionsProp.EFFECT], target, store.$container$);
+    ensureContainsBackRef(effectSubscription, target);
+    addQrlToSerializationCtx(effectSubscription, store.$container$);
 }
 function setNewValueAndTriggerEffects(prop, value, target, currentStore) {
     target[prop] = value;
     triggerEffects(currentStore.$container$, currentStore, getEffects(target, prop, currentStore.$effects$));
 }
 function getEffects(target, prop, storeEffects) {
-    let effectsToTrigger = storeEffects
-        ? Array.isArray(target)
-            ? Object.values(storeEffects).flatMap((effects) => effects)
-            : storeEffects[prop]
-        : null;
-    const storeArrayValue = storeEffects?.[STORE_ARRAY_PROP];
+    let effectsToTrigger;
+    if (storeEffects) {
+        if (Array.isArray(target)) {
+            for (const effects of storeEffects.values()) {
+                effectsToTrigger ||= new Set();
+                for (const effect of effects) {
+                    effectsToTrigger.add(effect);
+                }
+            }
+        }
+        else {
+            effectsToTrigger = storeEffects.get(prop);
+        }
+    }
+    const storeArrayValue = storeEffects?.get(STORE_ARRAY_PROP);
     if (storeArrayValue) {
-        effectsToTrigger ||= [];
-        effectsToTrigger.push(...storeArrayValue);
+        effectsToTrigger ||= new Set();
+        for (const effect of storeArrayValue) {
+            effectsToTrigger.add(effect);
+        }
+    }
+    return effectsToTrigger || null;
+}
+
+/**
+ * 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');
+/** @internal */
+const _EFFECT_BACK_REF = Symbol('backRef');
+
+/** Class for back reference to the EffectSubscription */
+class BackRef {
+    [_EFFECT_BACK_REF] = null;
+}
+function clearAllEffects(container, consumer) {
+    if (vnode_isVNode(consumer) && vnode_isElementVNode(consumer)) {
+        ensureMaterialized(consumer);
+    }
+    const effects = consumer[_EFFECT_BACK_REF];
+    if (!effects) {
+        return;
+    }
+    for (const [, effect] of effects) {
+        const backRefs = effect[EffectSubscriptionProp.BACK_REF];
+        if (!backRefs) {
+            return;
+        }
+        for (const producer of backRefs) {
+            if (producer instanceof Signal) {
+                clearSignal(container, producer, effect);
+            }
+            else if (container.$storeProxyMap$.has(producer)) {
+                const target = container.$storeProxyMap$.get(producer);
+                const storeHandler = getStoreHandler(target);
+                clearStore(storeHandler, effect);
+            }
+        }
+    }
+}
+function clearSignal(container, producer, effect) {
+    const effects = producer.$effects$;
+    if (effects) {
+        effects.delete(effect);
+    }
+    if (producer instanceof WrappedSignal) {
+        producer.$hostElement$ = null;
+        clearAllEffects(container, producer);
+    }
+}
+function clearStore(producer, effect) {
+    const effects = producer?.$effects$;
+    if (effects) {
+        for (const propEffects of effects.values()) {
+            propEffects.delete(effect);
+        }
     }
-    return effectsToTrigger;
 }
 
+// <docs markdown="../../readme.md#implicit$FirstArg">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit ../../readme.md#implicit$FirstArg instead and run `pnpm docs.sync`)
+/**
+ * Create a `____$(...)` convenience method from `___(...)`.
+ *
+ * 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 `$`.
+ *
+ * This means that `foo$(arg0)` and `foo($(arg0))` are equivalent with respect to Qwik Optimizer.
+ * The former is just a shorthand for the latter.
+ *
+ * For example, these function calls are equivalent:
+ *
+ * - `component$(() => {...})` is same as `component($(() => {...}))`
+ *
+ * ```tsx
+ * export function myApi(callback: QRL<() => void>): void {
+ *   // ...
+ * }
+ *
+ * export const myApi$ = implicit$FirstArg(myApi);
+ * // type of myApi$: (callback: () => void): void
+ *
+ * // can be used as:
+ * myApi$(() => console.log('callback'));
+ *
+ * // will be transpiled to:
+ * // FILE: <current file>
+ * myApi(qrl('./chunk-abc.js', 'callback'));
+ *
+ * // FILE: chunk-abc.js
+ * export const callback = () => console.log('callback');
+ * ```
+ *
+ * @param fn - A function that should have its first argument automatically `$`.
+ * @public
+ */
+// </docs>
+const implicit$FirstArg = (fn) => {
+    return function (first, ...rest) {
+        return fn.call(null, dollar(first), ...rest);
+    };
+};
+
+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.
@@ -1259,272 +1518,66 @@ const useSequentialScope = () => {
     };
 };
 
-class Subscriber {
-    $effectDependencies$ = null;
-}
-function isSubscriber(value) {
-    return value instanceof Subscriber || value instanceof WrappedSignal;
-}
-function clearVNodeEffectDependencies(container, value) {
-    if (vnode_isElementVNode(value)) {
-        ensureMaterialized(value);
-    }
-    const effects = vnode_getProp(value, QSubscribers, container.$getObjectById$);
-    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);
+function getSubscriber(effect, prop, data) {
+    if (!effect[_EFFECT_BACK_REF]) {
+        if (isServer && isSsrNode(effect)) {
+            effect.setProp(QBackRefs, new Map());
         }
-        if (value.$effectDependencies$.length === 0) {
-            value.$effectDependencies$ = null;
+        else {
+            effect[_EFFECT_BACK_REF] = new Map();
         }
     }
-}
-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);
+    const subMap = effect[_EFFECT_BACK_REF];
+    let sub = subMap.get(prop);
+    if (!sub) {
+        sub = [effect, prop];
+        subMap.set(prop, sub);
     }
-    if (subscriptionRemoved) {
-        effectArray.splice(indexToRemove, 1);
+    if (data) {
+        sub[EffectSubscriptionProp.DATA] = data;
     }
+    return sub;
 }
-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;
-            }
-        }
-    }
-    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;
-            }
-        }
-        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;
-    }
-    seenSet.add(arg);
-    if (isSignal(arg)) {
-        clearSignalEffects(arg, subscriber, seenSet);
-    }
-    else if (typeof arg === 'object' && arg !== null) {
-        if (isStore(arg)) {
-            clearStoreEffects(getStoreHandler(arg), subscriber);
-        }
-        else {
-            for (const key in arg) {
-                clearArgEffect(arg[key], subscriber, seenSet);
-            }
-        }
-    }
-    else if (Array.isArray(arg)) {
-        clearArgsEffects(arg, subscriber, seenSet);
-    }
-    else ;
+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 useResourceQrl = (qrl, opts) => {
-    const { val, set, i, iCtx } = useSequentialScope();
-    if (val != null) {
-        return val;
+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 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">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../readme.md#useResource 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.
- *
- * `useResource` however returns immediate a `ResourceReturn` object that contains the data and a
- * state that indicates if the data is available or not.
- *
- * The status can be one of the following:
- *
- * - `pending` - the data is not yet available.
- * - `resolved` - the data is available.
- * - `rejected` - the data is not available due to an error or timeout.
- *
- * 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`.
- *
- * ### Example
- *
- * Example showing how `useResource` to perform a fetch to request the weather, whenever the input
- * city name changes.
- *
- * ```tsx
- * const Cmp = component$(() => {
- *   const cityS = useSignal('');
- *
- *   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 };
- *   });
- *
- *   return (
- *     <div>
- *       <input name="city" bind:value={cityS} />
- *       <Resource
- *         value={weatherResource}
- *         onResolved={(weather) => {
- *           return <div>Temperature: {weather.temp}</div>;
- *         }}
- *       />
- *     </div>
- *   );
- * });
- * ```
- *
- * @public
- * @see Resource
- * @see ResourceReturn
- */
-// </docs>
-const Resource = (props) => {
-    // Resource path
-    return _jsxSorted(Fragment, null, null, getResourceValueAsPromise(props), 0, null);
-};
-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));
-    }
-    else if (isSignal(resource)) {
-        return Promise.resolve(resource.value).then(useBindInvokeContext(props.onResolved), useBindInvokeContext(props.onRejected));
+    const promise = container.$scheduler$(ChoreType.TASK, task);
+    if (isPromise(promise)) {
+        // TODO: should we handle this differently?
+        promise.catch(() => { });
     }
-    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 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';
-};
-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)) {
@@ -1537,115 +1590,85 @@ const runResource = (task, container, host) => {
                 return obj.value;
             }
             else {
-                return obj;
+                throw qError(QError.trackObjectWithoutProp);
             }
         });
     };
     const handleError = (reason) => container.handleError(reason, host);
-    const cleanups = [];
-    task.$destroy$ = noSerialize(() => {
-        cleanups.forEach((fn) => {
-            try {
-                fn();
-            }
-            catch (err) {
-                handleError(err);
-            }
-        });
-        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);
+    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);
+                        }
+                    });
+                });
             }
-            return true;
+            cleanupFns.push(fn);
         }
-        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) => {
+    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(() => runResource(task, container, host));
+            return err.then(() => runTask(task, container, host));
         }
         else {
-            setState(false, err);
+            throw err;
         }
     });
-    const timeout = resourceTarget._timeout;
-    if (timeout > 0) {
-        return Promise.race([
-            promise,
-            delay(timeout).then(() => {
-                if (setState(false, new Error('timeout'))) {
-                    cleanupTask(task);
-                }
-            }),
-        ]);
+    return result;
+};
+const cleanupTask = (task) => {
+    const destroy = task.$destroy$;
+    if (destroy) {
+        task.$destroy$ = null;
+        try {
+            destroy();
+        }
+        catch (err) {
+            logError(err);
+        }
     }
-    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 */
@@ -1723,22 +1746,67 @@ var VirtualVNodeProps;
     VirtualVNodeProps[VirtualVNodeProps["PROPS_OFFSET"] = 6] = "PROPS_OFFSET";
 })(VirtualVNodeProps || (VirtualVNodeProps = {}));
 
-const isForeignObjectElement = (elementName) => elementName.toLowerCase() === 'foreignobject';
+const mapApp_findIndx = (elementVNode, key, start) => {
+    assertTrue(start % 2 === 0, 'Expecting even number.');
+    let bottom = start >> 1;
+    let top = (elementVNode.length - 2) >> 1;
+    while (bottom <= top) {
+        const mid = bottom + ((top - bottom) >> 1);
+        const midKey = elementVNode[mid << 1];
+        if (midKey === key) {
+            return mid << 1;
+        }
+        if (midKey < key) {
+            bottom = mid + 1;
+        }
+        else {
+            top = mid - 1;
+        }
+    }
+    return (bottom << 1) ^ -1;
+};
+const mapArray_set = (elementVNode, key, value, start) => {
+    const indx = mapApp_findIndx(elementVNode, key, start);
+    if (indx >= 0) {
+        if (value == null) {
+            elementVNode.splice(indx, 2);
+        }
+        else {
+            elementVNode[indx + 1] = value;
+        }
+    }
+    else if (value != null) {
+        elementVNode.splice(indx ^ -1, 0, key, value);
+    }
+};
+const mapArray_get = (elementVNode, key, start) => {
+    const indx = mapApp_findIndx(elementVNode, key, start);
+    if (indx >= 0) {
+        return elementVNode[indx + 1];
+    }
+    else {
+        return null;
+    }
+};
+
+const isForeignObjectElement = (elementName) => {
+    return 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) {
@@ -2092,19 +2160,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);
@@ -2122,18 +2192,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) => {
@@ -2159,6 +2227,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) {
@@ -2177,13 +2246,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]);
                         }
@@ -2201,7 +2272,7 @@ function addUseOnEvents(jsx, useOnEvents) {
                 }
             }
         }
-        return jsxElement;
+        return jsxResult;
     });
 }
 function addUseOnEvent(jsxElement, key, value) {
@@ -2247,6 +2318,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;
         }
@@ -2256,15 +2330,23 @@ 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);
 }
@@ -2273,12 +2355,24 @@ function isParentSlotProp(prop) {
 }
 /** @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) {
@@ -2320,17 +2414,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$;
     /**
@@ -2349,9 +2432,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.
@@ -2404,7 +2487,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);
@@ -2619,9 +2702,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);
@@ -2789,10 +2873,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;
                 }
@@ -2805,12 +2898,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,
                     });
@@ -2914,7 +3010,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;
                         }
                     });
@@ -2926,10 +3022,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;
@@ -2949,12 +3045,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,
                 });
@@ -2968,21 +3067,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)) {
@@ -3178,10 +3277,6 @@ 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;
                 }
@@ -3234,7 +3329,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;
@@ -3322,8 +3417,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;
     }
@@ -3369,7 +3464,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) {
@@ -3379,7 +3474,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);
                             }
@@ -3394,8 +3489,8 @@ 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)) {
                         const value = attrs[i + 1];
@@ -3455,130 +3550,420 @@ function cleanup(container, vNode) {
                 // We are back where we started, we are done.
                 return;
             }
-            const vNextParentSibling = vnode_getNextSibling(vParent);
-            if (vNextParentSibling) {
-                vCursor = vNextParentSibling;
-                break;
+            const vNextParentSibling = vnode_getNextSibling(vParent);
+            if (vNextParentSibling) {
+                vCursor = vNextParentSibling;
+                break;
+            }
+            vParent = vnode_getParent(vParent);
+        }
+        if (vParent == null) {
+            // We are done.
+            return;
+        }
+    } while (true);
+}
+function cleanupStaleUnclaimedProjection(journal, projection) {
+    // we are removing a node where the projection would go after slot render.
+    // This is not needed, so we need to cleanup still unclaimed projection
+    const projectionParent = vnode_getParent(projection);
+    if (projectionParent) {
+        const projectionParentType = projectionParent[VNodeProps.flags];
+        if (projectionParentType & VNodeFlags.Element &&
+            vnode_getElementName(projectionParent) === QTemplate) {
+            // if parent is the q:template element then projection is still unclaimed - remove it
+            vnode_remove(journal, projectionParent, projection, true);
+        }
+    }
+}
+function markVNodeAsDeleted(vCursor) {
+    /**
+     * Marks vCursor as deleted. We need to do this to prevent chores from running after the vnode is
+     * removed. (for example signal subscriptions)
+     */
+    vCursor[VNodeProps.flags] |= VNodeFlags.Deleted;
+}
+/**
+ * This marks the property as immutable. It is needed for the QRLs so that QwikLoader can get a hold
+ * of them. This character must be `:` so that the `vnode_getAttr` can ignore them.
+ */
+const HANDLER_PREFIX = ':';
+let count = 0;
+var SiblingsArray;
+(function (SiblingsArray) {
+    SiblingsArray[SiblingsArray["Name"] = 0] = "Name";
+    SiblingsArray[SiblingsArray["Key"] = 1] = "Key";
+    SiblingsArray[SiblingsArray["VNode"] = 2] = "VNode";
+    SiblingsArray[SiblingsArray["Size"] = 3] = "Size";
+    SiblingsArray[SiblingsArray["NextVNode"] = 5] = "NextVNode";
+})(SiblingsArray || (SiblingsArray = {}));
+
+/** @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#useResource 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.
+ *
+ * `useResource` however returns immediate a `ResourceReturn` object that contains the data and a
+ * state that indicates if the data is available or not.
+ *
+ * The status can be one of the following:
+ *
+ * - `pending` - the data is not yet available.
+ * - `resolved` - the data is available.
+ * - `rejected` - the data is not available due to an error or timeout.
+ *
+ * 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`.
+ *
+ * ### Example
+ *
+ * Example showing how `useResource` to perform a fetch to request the weather, whenever the input
+ * city name changes.
+ *
+ * ```tsx
+ * const Cmp = component$(() => {
+ *   const cityS = useSignal('');
+ *
+ *   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 };
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <input name="city" bind:value={cityS} />
+ *       <Resource
+ *         value={weatherResource}
+ *         onResolved={(weather) => {
+ *           return <div>Temperature: {weather.temp}</div>;
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * });
+ * ```
+ *
+ * @public
+ * @see Resource
+ * @see ResourceReturn
+ */
+// </docs>
+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 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';
+};
+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);
             }
-            vParent = vnode_getParent(vParent);
+            return true;
         }
-        if (vParent == null) {
-            // We are done.
-            return;
+        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);
         }
-    } while (true);
-}
-function cleanupStaleUnclaimedProjection(journal, projection) {
-    // we are removing a node where the projection would go after slot render.
-    // This is not needed, so we need to cleanup still unclaimed projection
-    const projectionParent = vnode_getParent(projection);
-    if (projectionParent) {
-        const projectionParentType = projectionParent[VNodeProps.flags];
-        if (projectionParentType & VNodeFlags.Element &&
-            vnode_getElementName(projectionParent) === QTemplate) {
-            // if parent is the q:template element then projection is still unclaimed - remove it
-            vnode_remove(journal, projectionParent, projection, true);
+    });
+    // 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);
+                }
+            }),
+        ]);
     }
-}
-function markVNodeAsDeleted(vCursor) {
-    /**
-     * Marks vCursor as deleted. We need to do this to prevent chores from running after the vnode is
-     * removed. (for example signal subscriptions)
-     */
-    vCursor[VNodeProps.flags] |= VNodeFlags.Deleted;
-}
-/**
- * This marks the property as immutable. It is needed for the QRLs so that QwikLoader can get a hold
- * of them. This character must be `:` so that the `vnode_getAttr` can ignore them.
- */
-const HANDLER_PREFIX = ':';
-let count = 0;
-var SiblingsArray;
-(function (SiblingsArray) {
-    SiblingsArray[SiblingsArray["Name"] = 0] = "Name";
-    SiblingsArray[SiblingsArray["Key"] = 1] = "Key";
-    SiblingsArray[SiblingsArray["VNode"] = 2] = "VNode";
-    SiblingsArray[SiblingsArray["Size"] = 3] = "Size";
-    SiblingsArray[SiblingsArray["NextVNode"] = 5] = "NextVNode";
-})(SiblingsArray || (SiblingsArray = {}));
-
-// <docs markdown="../../readme.md#implicit$FirstArg">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../../readme.md#implicit$FirstArg instead and run `pnpm docs.sync`)
-/**
- * Create a `____$(...)` convenience method from `___(...)`.
- *
- * 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 `$`.
- *
- * This means that `foo$(arg0)` and `foo($(arg0))` are equivalent with respect to Qwik Optimizer.
- * The former is just a shorthand for the latter.
- *
- * For example, these function calls are equivalent:
- *
- * - `component$(() => {...})` is same as `component($(() => {...}))`
- *
- * ```tsx
- * export function myApi(callback: QRL<() => void>): void {
- *   // ...
- * }
- *
- * export const myApi$ = implicit$FirstArg(myApi);
- * // type of myApi$: (callback: () => void): void
- *
- * // can be used as:
- * myApi$(() => console.log('callback'));
- *
- * // will be transpiled to:
- * // FILE: <current file>
- * myApi(qrl('./chunk-abc.js', 'callback'));
- *
- * // FILE: chunk-abc.js
- * export const callback = () => console.log('callback');
- * ```
- *
- * @param fn - A function that should have its first argument automatically `$`.
- * @public
- */
-// </docs>
-const implicit$FirstArg = (fn) => {
-    return function (first, ...rest) {
-        return fn.call(null, dollar(first), ...rest);
-    };
-};
-
-const createSignal$1 = (value) => {
-    return new Signal(null, value);
+    return promise;
 };
-const createComputedSignal = (qrl) => {
-    throwIfQRLNotResolved(qrl);
-    return new ComputedSignal(null, qrl);
+const ignoreErrorToPreventNodeFromCrashing = (err) => {
+    // ignore error to prevent node from crashing
+    // node will crash in promise is rejected and no one is listening to the rejection.
 };
 
+/// These global variables are used to avoid creating new arrays for each call to `vnode_documentPosition`.
+const aVNodePath = [];
+const bVNodePath = [];
 /**
- * Creates a Signal with the given value. If no value is given, the signal is created with
- * `undefined`.
+ * Compare two VNodes and determine their document position relative to each other.
  *
- * @public
+ * @param a VNode to compare
+ * @param b VNode to compare
+ * @param rootVNode - Root VNode of a container
+ * @returns -1 if `a` is before `b`, 0 if `a` is the same as `b`, 1 if `a` is after `b`.
  */
-const createSignal = createSignal$1;
-/** @internal */
-const createComputedQrl = createComputedSignal;
+const vnode_documentPosition = (a, b, rootVNode) => {
+    if (a === b) {
+        return 0;
+    }
+    let aDepth = -1;
+    let bDepth = -1;
+    while (a) {
+        const vNode = (aVNodePath[++aDepth] = a);
+        a = (vNode[VNodeProps.parent] ||
+            (rootVNode && vnode_getProp(a, QSlotParent, (id) => vnode_locate(rootVNode, id))));
+    }
+    while (b) {
+        const vNode = (bVNodePath[++bDepth] = b);
+        b = (vNode[VNodeProps.parent] ||
+            (rootVNode && vnode_getProp(b, QSlotParent, (id) => vnode_locate(rootVNode, id))));
+    }
+    while (aDepth >= 0 && bDepth >= 0) {
+        a = aVNodePath[aDepth];
+        b = bVNodePath[bDepth];
+        if (a === b) {
+            // if the nodes are the same, we need to check the next level.
+            aDepth--;
+            bDepth--;
+        }
+        else {
+            // We found a difference so we need to scan nodes at this level.
+            let cursor = b;
+            do {
+                cursor = vnode_getNextSibling(cursor);
+                if (cursor === a) {
+                    return 1;
+                }
+            } while (cursor);
+            cursor = b;
+            do {
+                cursor = vnode_getPreviousSibling(cursor);
+                if (cursor === a) {
+                    return -1;
+                }
+            } while (cursor);
+            if (rootVNode && vnode_getProp(b, QSlotParent, (id) => vnode_locate(rootVNode, id))) {
+                // The "b" node is a projection, so we need to set it after "a" node,
+                // because the "a" node could be a context provider.
+                return -1;
+            }
+            // The node is not in the list of siblings, that means it must be disconnected.
+            return 1;
+        }
+    }
+    return aDepth < bDepth ? -1 : 1;
+};
+/// These global variables are used to avoid creating new arrays for each call to `ssrNodeDocumentPosition`.
+const aSsrNodePath = [];
+const bSsrNodePath = [];
 /**
- * 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.
+ * Compare two SSR nodes and determine their document position relative to each other. Compares only
+ * position between parent and child.
  *
- * If you need the function to be async, use `useSignal` and `useTask$` instead.
- *
- * @public
+ * @param a SSR node to compare
+ * @param b SSR node to compare
+ * @returns -1 if `a` is before `b`, 0 if `a` is the same as `b`, 1 if `a` is after `b`.
  */
-const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedQrl);
+const ssrNodeDocumentPosition = (a, b) => {
+    if (a === b) {
+        return 0;
+    }
+    let aDepth = -1;
+    let bDepth = -1;
+    while (a) {
+        const ssrNode = (aSsrNodePath[++aDepth] = a);
+        a = ssrNode.currentComponentNode;
+    }
+    while (b) {
+        const ssrNode = (bSsrNodePath[++bDepth] = b);
+        b = ssrNode.currentComponentNode;
+    }
+    while (aDepth >= 0 && bDepth >= 0) {
+        a = aSsrNodePath[aDepth];
+        b = bSsrNodePath[bDepth];
+        if (a === b) {
+            // if the nodes are the same, we need to check the next level.
+            aDepth--;
+            bDepth--;
+        }
+        else {
+            return 1;
+        }
+    }
+    return aDepth < bDepth ? -1 : 1;
+};
 
 /**
  * Scheduler is responsible for running application code in predictable order.
@@ -3661,38 +4046,29 @@ const createComputed$ = /*#__PURE__*/ implicit$FirstArg(createComputedQrl);
  * - 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;
         }
@@ -3711,184 +4087,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);
-        }
-    }
-    /**
-     * 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$;
+            return drainUpTo(chore, isServer);
         }
+    }
+    /** Execute all of the chores up to and including the given chore. */
+    function drainUpTo(runUptoChore, isServer) {
+        let maxRetries = 5000;
         while (choreQueue.length) {
-            const nextChore = choreQueue.shift();
-            const order = choreComparator(nextChore, runUptoChore, rootVNode, false);
-            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 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 = 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);
-}
-function choreComparator(a, b, rootVNode, shouldThrowOnHostMismatch) {
-    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.
@@ -3898,6 +4324,8 @@ function choreComparator(a, b, rootVNode, shouldThrowOnHostMismatch) {
                 }
             }
             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
@@ -3906,258 +4334,125 @@ function choreComparator(a, b, rootVNode, shouldThrowOnHostMismatch) {
           You are attempting to change a state that has already been streamed to the client.
           This can lead to inconsistencies between Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
           Problematic Node: ${aHost.toString()}`;
-                if (shouldThrowOnHostMismatch) {
-                    throw qError(QError.serverHostMismatch, [errorMessage]);
-                }
                 logWarn(errorMessage);
-                return null;
+                const hostDiff = ssrNodeDocumentPosition(aHost, bHost);
+                if (hostDiff !== 0) {
+                    return hostDiff;
+                }
             }
         }
         const microTypeDiff = (a.$type$ & ChoreType.MICRO) - (b.$type$ & ChoreType.MICRO);
         if (microTypeDiff !== 0) {
             return microTypeDiff;
         }
+        // types are the same
         const idxDiff = toNumber(a.$idx$) - toNumber(b.$idx$);
         if (idxDiff !== 0) {
             return idxDiff;
         }
-        // If the host is the same, we need to compare the target.
-        if (a.$target$ !== b.$target$ &&
-            ((a.$type$ === ChoreType.QRL_RESOLVE && b.$type$ === ChoreType.QRL_RESOLVE) ||
-                (a.$type$ === ChoreType.NODE_PROP && b.$type$ === ChoreType.NODE_PROP) ||
-                (a.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS &&
-                    b.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS))) {
+        // 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;
         }
-    }
-    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, true);
-        if (comp < 0) {
-            top = middle;
-        }
-        else if (comp > 0) {
-            bottom = middle + 1;
-        }
-        else {
-            // We already have the host in the queue.
-            return middle;
+        // 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;
     }
-    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;
+    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 {
-                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);
-                        }
-                    });
-                });
+                // We already have the host in the queue.
+                return middle;
             }
-            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();
+        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;
         }
-        catch (err) {
-            logError(err);
+        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 useRunTask = (task, eagerness) => {
-    if (eagerness === 'visible' || eagerness === 'intersection-observer') {
-        useOn('qvisible', getTaskHandlerQrl(task));
-    }
-    else if (eagerness === 'load' || eagerness === 'document-ready') {
-        useOnDocument('qinit', getTaskHandlerQrl(task));
-    }
-    else if (eagerness === 'idle' || eagerness === 'document-idle') {
-        useOnDocument('qidle', getTaskHandlerQrl(task));
-    }
-};
-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;
-};
-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$;
-    }
-}
-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);
+const toNumber = (value) => {
+    return typeof value === 'number' ? value : -1;
 };
-
-/**
- * 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');
+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');
+}
 
 /**
  * @file
@@ -4191,18 +4486,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"] = ":";
@@ -4239,19 +4535,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;
@@ -4270,122 +4563,97 @@ class Signal {
     }
     toString() {
         return (`[${this.constructor.name}${this.$invalid$ ? ' INVALID' : ''} ${String(this.$untrackedValue$)}]` +
-            (this.$effects$?.map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    ')).join('\n') || ''));
+            (Array.from(this.$effects$ || [])
+                .map((e) => '\n -> ' + pad(qwikDebugToString(e[0]), '    '))
+                .join('\n') || ''));
     }
     toJSON() {
         return { value: this.$untrackedValue$ };
     }
 }
-/** Ensure the item is in array (do nothing if already there) */
-const ensureContains = (array, value) => {
-    const isMissing = array.indexOf(value) === -1;
-    if (isMissing) {
-        array.push(value);
-    }
-};
-const ensureContainsEffect = (array, effectSubscriptions) => {
-    for (let i = 0; i < array.length; i++) {
-        const existingEffect = array[i];
-        if (existingEffect[0] === effectSubscriptions[0] &&
-            existingEffect[1] === effectSubscriptions[1]) {
-            return;
-        }
-    }
-    array.push(effectSubscriptions);
+const ensureContainsSubscription = (array, effectSubscription) => {
+    array.add(effectSubscription);
 };
-const ensureEffectContainsSubscriber = (effect, subscriber, container) => {
-    if (isSubscriber(effect)) {
-        effect.$effectDependencies$ ||= [];
-        if (subscriberExistInSubscribers(effect.$effectDependencies$, subscriber)) {
-            return;
+/** Ensure the item is in back refs set */
+const ensureContainsBackRef = (array, value) => {
+    array[EffectSubscriptionProp.BACK_REF] ||= new Set();
+    array[EffectSubscriptionProp.BACK_REF].add(value);
+};
+const addQrlToSerializationCtx = (effectSubscriber, container) => {
+    if (!!container && !isDomContainer(container)) {
+        const effect = effectSubscriber[EffectSubscriptionProp.CONSUMER];
+        const property = effectSubscriber[EffectSubscriptionProp.PROPERTY];
+        let qrl = null;
+        if (isTask(effect)) {
+            qrl = effect.$qrl$;
         }
-        effect.$effectDependencies$.push(subscriber);
-    }
-    else if (vnode_isVNode(effect) && !vnode_isTextVNode(effect)) {
-        let subscribers = vnode_getProp(effect, QSubscribers, container ? container.$getObjectById$ : null);
-        subscribers ||= [];
-        if (subscriberExistInSubscribers(subscribers, subscriber)) {
-            return;
+        else if (effect instanceof ComputedSignal) {
+            qrl = effect.$computeQrl$;
         }
-        subscribers.push(subscriber);
-        vnode_setProp(effect, QSubscribers, subscribers);
-    }
-    else if (isSSRNode(effect)) {
-        let subscribers = effect.getProp(QSubscribers);
-        subscribers ||= [];
-        if (subscriberExistInSubscribers(subscribers, subscriber)) {
-            return;
+        else if (property === EffectProperty.COMPONENT) {
+            qrl = container.getHostProp(effect, OnRenderProp);
         }
-        subscribers.push(subscriber);
-        effect.setProp(QSubscribers, subscribers);
-    }
-};
-const isSSRNode = (effect) => {
-    return 'setProp' in effect && 'getProp' in effect && 'removeProp' in effect && 'id' in effect;
-};
-const subscriberExistInSubscribers = (subscribers, subscriber) => {
-    for (let i = 0; i < subscribers.length; i++) {
-        if (subscribers[i] === subscriber) {
-            return true;
+        if (qrl) {
+            container.serializationCtx.$eventQrls$.add(qrl);
         }
     }
-    return false;
 };
 const triggerEffects = (container, signal, effects) => {
+    const isBrowser = isDomContainer(container);
     if (effects) {
-        const scheduleEffect = (effectSubscriptions) => {
-            const effect = effectSubscriptions[EffectSubscriptionsProp.EFFECT];
-            const property = effectSubscriptions[EffectSubscriptionsProp.PROPERTY];
+        const scheduleEffect = (effectSubscription) => {
+            const consumer = effectSubscription[EffectSubscriptionProp.CONSUMER];
+            const property = effectSubscription[EffectSubscriptionProp.PROPERTY];
             assertDefined(container, 'Container must be defined.');
-            if (isTask(effect)) {
-                effect.$flags$ |= TaskFlags.DIRTY;
+            if (isTask(consumer)) {
+                consumer.$flags$ |= TaskFlags.DIRTY;
                 let choreType = ChoreType.TASK;
-                if (effect.$flags$ & TaskFlags.VISIBLE_TASK) {
+                if (consumer.$flags$ & TaskFlags.VISIBLE_TASK) {
                     choreType = ChoreType.VISIBLE;
                 }
-                else if (effect.$flags$ & TaskFlags.RESOURCE) {
-                    choreType = ChoreType.RESOURCE;
-                }
-                container.$scheduler$(choreType, effect);
+                container.$scheduler$(choreType, consumer);
             }
-            else if (effect instanceof Signal) {
+            else if (consumer instanceof Signal) {
                 // we don't schedule ComputedSignal/DerivedSignal directly, instead we invalidate it and
                 // and schedule the signals effects (recursively)
-                if (effect instanceof ComputedSignal) {
+                if (consumer instanceof ComputedSignal) {
                     // Ensure that the computed signal's QRL is resolved.
                     // If not resolved schedule it to be resolved.
-                    if (!effect.$computeQrl$.resolved) {
-                        container.$scheduler$(ChoreType.QRL_RESOLVE, null, effect.$computeQrl$);
+                    if (!consumer.$computeQrl$.resolved) {
+                        container.$scheduler$(ChoreType.QRL_RESOLVE, null, consumer.$computeQrl$);
                     }
                 }
-                effect.$invalidate$();
+                consumer.$invalidate$();
             }
             else if (property === EffectProperty.COMPONENT) {
-                const host = effect;
+                const host = consumer;
                 const qrl = container.getHostProp(host, OnRenderProp);
                 assertDefined(qrl, 'Component must have QRL');
                 const props = container.getHostProp(host, ELEMENT_PROPS);
                 container.$scheduler$(ChoreType.COMPONENT, host, qrl, props);
             }
-            else if (property === EffectProperty.VNODE) {
-                const host = effect;
-                const target = host;
-                container.$scheduler$(ChoreType.NODE_DIFF, host, target, signal);
-            }
-            else {
-                const host = effect;
-                const effectData = effectSubscriptions[EffectSubscriptionsProp.FIRST_BACK_REF_OR_DATA];
-                if (effectData instanceof EffectPropData) {
-                    const data = effectData.data;
-                    const payload = {
-                        ...data,
-                        $value$: signal,
-                    };
-                    container.$scheduler$(ChoreType.NODE_PROP, host, property, payload);
+            else if (isBrowser) {
+                if (property === EffectProperty.VNODE) {
+                    const host = consumer;
+                    container.$scheduler$(ChoreType.NODE_DIFF, host, host, signal);
+                }
+                else {
+                    const host = consumer;
+                    const effectData = effectSubscription[EffectSubscriptionProp.DATA];
+                    if (effectData instanceof SubscriptionData) {
+                        const data = effectData.data;
+                        const payload = {
+                            ...data,
+                            $value$: signal,
+                        };
+                        container.$scheduler$(ChoreType.NODE_PROP, host, property, payload);
+                    }
                 }
             }
         };
-        effects.forEach(scheduleEffect);
+        for (const effect of effects) {
+            scheduleEffect(effect);
+        }
     }
 };
 /**
@@ -4443,7 +4711,7 @@ class ComputedSignal extends Signal {
         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)) {
@@ -4481,9 +4749,9 @@ class WrappedSignal extends Signal {
     // We need a separate flag to know when the computation needs running because
     // we need the old value to know if effects need running after computation
     $invalid$ = true;
-    $effectDependencies$ = null;
     $hostElement$ = null;
     $forceRunEffects$ = false;
+    [_EFFECT_BACK_REF] = null;
     constructor(container, fn, args, fnStr) {
         super(container, NEEDS_COMPUTATION);
         this.$args$ = args;
@@ -4551,7 +4819,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 {
@@ -4563,21 +4831,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) {
@@ -4587,20 +4844,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, {
@@ -4608,12 +4855,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);
@@ -4652,7 +4895,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,
                     });
@@ -4739,7 +4981,6 @@ function processJSXNode(ssr, enqueue, value, options) {
                         value = generator({
                             async write(chunk) {
                                 await _walkJSX(ssr, chunk, {
-                                    allowPromises: true,
                                     currentStyleScoped: options.styleScoped,
                                     parentComponentFrame: options.parentComponentFrame,
                                 });
@@ -4896,11 +5137,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) {
@@ -4912,8 +5165,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;
@@ -4963,7 +5216,7 @@ function appendClassIfScopedStyleExists(jsx, styleScoped) {
  *
  * @public
  */
-const version = "2.0.0-alpha.5-dev+cb53bbd";
+const version = "2.0.0-alpha.7-dev+a26598a";
 
 /** @internal */
 class _SharedContainer {
@@ -4995,13 +5248,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];
@@ -5413,7 +5659,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') {
@@ -5567,14 +5813,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
  *
@@ -5830,6 +6083,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;
@@ -5840,15 +6094,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);
             }
         }
     }
@@ -6284,54 +6538,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)) {
@@ -6455,9 +6671,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;
 };
@@ -6639,6 +6856,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)) {
@@ -6705,8 +6936,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
@@ -6716,6 +6950,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;
@@ -6760,8 +7006,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);
             }
@@ -6774,22 +7021,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];
@@ -6802,7 +7050,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;
 };
@@ -6810,11 +7059,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;
         }
@@ -6823,12 +7073,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) => {
@@ -6841,6 +7092,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;
 };
@@ -7004,8 +7258,11 @@ 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.CONTEXT) {
             vnode_setAttr(null, vParent, QCtxAttr, consumeValue());
@@ -7071,60 +7328,6 @@ const vnode_getType = (vnode) => {
     throw qError(QError.invalidVNodeType, [type]);
 };
 const isElement = (node) => node && typeof node == 'object' && fastNodeType(node) === /** Node.ELEMENT_NODE* */ 1;
-/// These global variables are used to avoid creating new arrays for each call to `vnode_documentPosition`.
-const aPath = [];
-const bPath = [];
-const vnode_documentPosition = (a, b, rootVNode) => {
-    if (a === b) {
-        return 0;
-    }
-    let aDepth = -1;
-    let bDepth = -1;
-    while (a) {
-        const vNode = (aPath[++aDepth] = a);
-        a = (vNode[VNodeProps.parent] ||
-            (rootVNode && vnode_getProp(a, QSlotParent, (id) => vnode_locate(rootVNode, id))));
-    }
-    while (b) {
-        const vNode = (bPath[++bDepth] = b);
-        b = (vNode[VNodeProps.parent] ||
-            (rootVNode && vnode_getProp(b, QSlotParent, (id) => vnode_locate(rootVNode, id))));
-    }
-    while (aDepth >= 0 && bDepth >= 0) {
-        a = aPath[aDepth];
-        b = bPath[bDepth];
-        if (a === b) {
-            // if the nodes are the same, we need to check the next level.
-            aDepth--;
-            bDepth--;
-        }
-        else {
-            // We found a difference so we need to scan nodes at this level.
-            let cursor = b;
-            do {
-                cursor = vnode_getNextSibling(cursor);
-                if (cursor === a) {
-                    return 1;
-                }
-            } while (cursor);
-            cursor = b;
-            do {
-                cursor = vnode_getPreviousSibling(cursor);
-                if (cursor === a) {
-                    return -1;
-                }
-            } while (cursor);
-            if (rootVNode && vnode_getProp(b, QSlotParent, (id) => vnode_locate(rootVNode, id))) {
-                // The "b" node is a projection, so we need to set it after "a" node,
-                // because the "a" node could be a context provider.
-                return -1;
-            }
-            // The node is not in the list of siblings, that means it must be disconnected.
-            return 1;
-        }
-    }
-    return aDepth < bDepth ? -1 : 1;
-};
 /**
  * Use this method to find the parent component for projection.
  *
@@ -7167,23 +7370,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;
         }
@@ -7248,10 +7448,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) => {
@@ -7286,16 +7488,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);
     }
@@ -7316,8 +7516,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);
     }
@@ -7953,9 +8161,9 @@ 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'));
@@ -7981,29 +8189,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;
@@ -8027,7 +8235,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;
         }
@@ -8063,7 +8271,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);
@@ -8083,7 +8291,7 @@ class DomContainer extends _SharedContainer {
             case ELEMENT_PROPS:
             case OnRenderProp:
             case QCtxAttr:
-            case QSubscribers:
+            case QBackRefs:
                 getObjectById = this.$getObjectById$;
                 break;
             case ELEMENT_SEQ_IDX:
@@ -8096,7 +8304,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$;
@@ -8119,12 +8327,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);
                     }
                 }
             }
@@ -8135,7 +8344,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];
@@ -8207,8 +8416,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;
@@ -8274,6 +8482,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];
@@ -8313,7 +8522,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:
@@ -8336,12 +8545,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;
@@ -8350,7 +8556,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: {
@@ -8358,10 +8564,10 @@ 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.$effects$ = new Set(d.slice(5));
             break;
         }
         case TypeIds.ComputedSignal: {
@@ -8481,6 +8687,7 @@ const _constants = [
     EMPTY_ARRAY,
     EMPTY_OBJ,
     NEEDS_COMPUTATION,
+    STORE_ARRAY_PROP,
     Slot,
     Fragment,
     NaN,
@@ -8561,6 +8768,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;
@@ -8570,12 +8779,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);
@@ -8584,7 +8790,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]);
     }
@@ -8616,7 +8822,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$;
@@ -8734,7 +8940,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$);
                     }
@@ -8753,6 +8959,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)) ;
@@ -8762,8 +8969,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)) {
@@ -8797,9 +9003,7 @@ prepVNodeData) => {
                 }
                 // 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$);
                     }
@@ -8812,7 +9016,8 @@ prepVNodeData) => {
                 }
             }
             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);
@@ -8831,7 +9036,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)) {
@@ -8847,7 +9052,7 @@ prepVNodeData) => {
                 });
                 promises.push(obj);
             }
-            else if (obj instanceof EffectPropData) {
+            else if (obj instanceof SubscriptionData) {
                 discoveredValues.push(obj.data);
             }
             else if (isObjectLiteral(obj)) {
@@ -8892,15 +9097,31 @@ 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) {
+        // We need serialize effect subscriptions with back refs
+        let hasBackRefs = false;
+        for (const [, effect] of effectsBackRefs) {
+            const backRefs = effect[EffectSubscriptionProp.BACK_REF];
+            if (backRefs) {
+                hasBackRefs = true;
+                break;
+            }
+        }
+        if (hasBackRefs) {
+            discoveredValues.push(effectsBackRefs);
+        }
+    }
+};
 const promiseResults = new WeakMap();
 /**
  * Format:
@@ -8972,7 +9193,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);
@@ -9047,6 +9268,9 @@ function serialize(serializationContext) {
         else if (value === NEEDS_COMPUTATION) {
             output(TypeIds.Constant, Constants.NEEDS_COMPUTATION);
         }
+        else if (value === STORE_ARRAY_PROP) {
+            output(TypeIds.Constant, Constants.STORE_ARRAY_PROP);
+        }
         else {
             throw qError(QError.serializeErrorUnknownType, [typeof value]);
         }
@@ -9083,7 +9307,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)) {
@@ -9094,6 +9318,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 {
@@ -9101,7 +9326,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];
@@ -9111,7 +9335,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();
                 }
@@ -9150,7 +9374,7 @@ function serialize(serializationContext) {
             if (value instanceof WrappedSignal) {
                 output(TypeIds.WrappedSignal, [
                     ...serializeWrappingFn(serializationContext, value),
-                    value.$effectDependencies$,
+                    filterEffectBackRefs(value[_EFFECT_BACK_REF]),
                     v,
                     value.$hostElement$,
                     ...(value.$effects$ || []),
@@ -9257,7 +9481,7 @@ function serialize(serializationContext) {
                 value.$flags$,
                 value.$index$,
                 value.$el$,
-                value.$effectDependencies$,
+                value[_EFFECT_BACK_REF],
                 value.$state$,
             ];
             while (out[out.length - 1] == null) {
@@ -9280,12 +9504,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] === '{') {
@@ -9298,15 +9537,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);
@@ -9483,9 +9719,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' ||
@@ -9494,6 +9730,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);
@@ -9502,7 +9742,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;
                 }
             }
@@ -9510,7 +9750,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;
                 }
             }
@@ -9560,7 +9800,7 @@ const canSerialize = (value) => {
         }
     }
     else if (typeof value === 'function') {
-        if (isQrl(value) || isQwikComponent(value)) {
+        if (isQrl$1(value) || isQwikComponent(value)) {
             return true;
         }
     }
@@ -9613,20 +9853,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_ARRAY_PROP"] = 8] = "STORE_ARRAY_PROP";
+    Constants[Constants["Slot"] = 9] = "Slot";
+    Constants[Constants["Fragment"] = 10] = "Fragment";
+    Constants[Constants["NaN"] = 11] = "NaN";
+    Constants[Constants["PositiveInfinity"] = 12] = "PositiveInfinity";
+    Constants[Constants["NegativeInfinity"] = 13] = "NegativeInfinity";
+    Constants[Constants["MaxSafeInt"] = 14] = "MaxSafeInt";
     // used for close fragment
-    Constants[Constants["AlmostMaxSafeInt"] = 14] = "AlmostMaxSafeInt";
-    Constants[Constants["MinSafeInt"] = 15] = "MinSafeInt";
+    Constants[Constants["AlmostMaxSafeInt"] = 15] = "AlmostMaxSafeInt";
+    Constants[Constants["MinSafeInt"] = 16] = "MinSafeInt";
 })(Constants || (Constants = {}));
 
 /** @internal */
 const verifySerializable = (value, preMessage) => {
-    const seen = new Set();
+    const seen = new WeakSet();
     return _verifySerializable(value, seen, '_', preMessage);
 };
 const _verifySerializable = (value, seen, ctx, preMessage) => {
@@ -9635,10 +9876,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;
         }
@@ -9742,16 +9985,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) {
@@ -9773,9 +10007,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;
@@ -9788,13 +10027,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);
@@ -9806,8 +10046,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;
@@ -9835,11 +10087,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) => {
@@ -9862,10 +10114,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,
@@ -9873,7 +10124,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         $setContainer$: setContainer,
         $chunk$: chunk,
         $symbol$: symbol,
-        $refSymbol$: refSymbol,
         $hash$: hash,
         getFn: bindFnToContext,
         $capture$: capture,
@@ -9882,8 +10132,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', {
@@ -9897,20 +10147,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)) {
@@ -10023,7 +10259,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 = $;
@@ -10049,7 +10285,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.
@@ -10066,7 +10302,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 */
@@ -10785,6 +11021,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!!!
@@ -11095,5 +11346,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, 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