@qwik.dev/core 2.0.0-beta.13 → 2.0.0-beta.14

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.13-dev+cb19ff7
+ * @qwik.dev/core 2.0.0-beta.14-dev+1e7496d
  * 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
@@ -14,7 +14,7 @@ import { p } from '@qwik.dev/core/preloader';
  *
  * @public
  */
-const version = "2.0.0-beta.13-dev+cb19ff7";
+const version = "2.0.0-beta.14-dev+1e7496d";
 
 // same as isDev but separate so we can test
 const qDev = globalThis.qDev !== false;
@@ -1141,23 +1141,16 @@ class PropsProxyHandler {
                 }
             }
             if (this.owner.constProps && prop in this.owner.constProps) {
-                this.owner.constProps[prop] = undefined;
-                if (!(prop in this.owner.varProps)) {
-                    this.owner.toSort = true;
-                }
-                this.owner.varProps[prop] = value;
+                // delete the prop from the const props first
+                delete this.owner.constProps[prop];
             }
-            else {
-                if (this.owner.varProps === EMPTY_OBJ) {
-                    this.owner.varProps = {};
-                }
-                else {
-                    if (!(prop in this.owner.varProps)) {
-                        this.owner.toSort = true;
-                    }
-                }
-                this.owner.varProps[prop] = value;
+            if (this.owner.varProps === EMPTY_OBJ) {
+                this.owner.varProps = {};
             }
+            else if (!(prop in this.owner.varProps)) {
+                this.owner.toSort = true;
+            }
+            this.owner.varProps[prop] = value;
         }
         return true;
     }
@@ -1245,6 +1238,19 @@ const isPropsProxy = (obj) => {
     return obj && _VAR_PROPS in obj;
 };
 
+const cleanupDestroyable = (destroyable) => {
+    const destroy = destroyable.$destroy$;
+    if (destroy) {
+        destroyable.$destroy$ = null;
+        try {
+            destroy();
+        }
+        catch (err) {
+            logError(err);
+        }
+    }
+};
+
 function getSubscriber(effect, prop, data) {
     if (!effect[_EFFECT_BACK_REF]) {
         if (isServer && isSsrNode(effect)) {
@@ -1301,14 +1307,14 @@ const cleanupFn = (target, handleError) => {
                 cleanupFns = [];
                 target.$destroy$ = noSerialize(() => {
                     target.$destroy$ = null;
-                    cleanupFns.forEach((fn) => {
+                    for (const fn of cleanupFns) {
                         try {
                             fn();
                         }
                         catch (err) {
                             handleError(err);
                         }
-                    });
+                    }
                 });
             }
             cleanupFns.push(fn);
@@ -1421,6 +1427,7 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
     $errorEffects$ = null;
     $destroy$;
     $promiseValue$ = NEEDS_COMPUTATION;
+    $promise$ = null;
     [_EFFECT_BACK_REF] = null;
     constructor(container, fn, flags = 1 /* SignalFlags.INVALID */) {
         super(container, fn, flags);
@@ -1456,9 +1463,12 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
     }
     invalidate() {
         super.invalidate();
-        this.$promiseValue$ = NEEDS_COMPUTATION;
+        // clear the promise, we need to get function again
+        this.$promise$ = null;
     }
-    async resolve() {
+    async promise() {
+        // make sure we get a new promise during the next computation
+        this.$promise$ = null;
         await retryOnPromise(() => this.$computeIfNeeded$());
         return this.$untrackedValue$;
     }
@@ -1466,34 +1476,69 @@ class AsyncComputedSignalImpl extends ComputedSignalImpl {
         if (!(this.$flags$ & 1 /* SignalFlags.INVALID */)) {
             return;
         }
-        const [cleanup] = cleanupFn(this, (err) => this.$container$?.handleError(err, null));
-        const untrackedValue = this.$promiseValue$ === NEEDS_COMPUTATION
-            ? this.$computeQrl$.getFn()({
-                track: trackFn(this, this.$container$),
-                cleanup,
-            })
+        const untrackedValue = 
+        // first time
+        this.$promiseValue$ === NEEDS_COMPUTATION ||
+            // or after invalidation
+            this.$promise$ === null
+            ? this.$promiseComputation$()
             : this.$promiseValue$;
         if (isPromise(untrackedValue)) {
+            const isFirstComputation = this.$promiseValue$ === NEEDS_COMPUTATION;
             this.untrackedLoading = true;
             this.untrackedError = null;
-            throw untrackedValue
+            if (this.$promiseValue$ !== NEEDS_COMPUTATION) {
+                // skip cleanup after resuming
+                cleanupDestroyable(this);
+            }
+            const promise = untrackedValue
                 .then((promiseValue) => {
                 this.$promiseValue$ = promiseValue;
                 this.untrackedLoading = false;
                 this.untrackedError = null;
+                if (this.setValue(promiseValue)) {
+                    scheduleEffects(this.$container$, this, this.$effects$);
+                }
             })
                 .catch((err) => {
+                if (isPromise(err)) {
+                    // ignore promise errors, they will be handled
+                    return;
+                }
                 this.$promiseValue$ = err;
                 this.untrackedLoading = false;
                 this.untrackedError = err;
             });
+            if (isFirstComputation) {
+                // we want to throw only the first time
+                // the next time we will return stale value
+                throw promise;
+            }
+            else {
+                // Return the promise so the scheduler can track it as a running chore
+                return promise;
+            }
+        }
+        else {
+            this.setValue(untrackedValue);
+        }
+    }
+    async $promiseComputation$() {
+        if (!this.$promise$) {
+            const [cleanup] = cleanupFn(this, (err) => this.$container$?.handleError(err, null));
+            this.$promise$ = this.$computeQrl$.getFn()({
+                track: trackFn(this, this.$container$),
+                cleanup,
+            });
         }
-        this.$promiseValue$ = NEEDS_COMPUTATION;
+        return this.$promise$;
+    }
+    setValue(value) {
         this.$flags$ &= -2 /* SignalFlags.INVALID */;
-        const didChange = untrackedValue !== this.$untrackedValue$;
+        const didChange = value !== this.$untrackedValue$;
         if (didChange) {
+            this.$untrackedValue$ = value;
             this.$flags$ |= 2 /* SignalFlags.RUN_EFFECTS */;
-            this.$untrackedValue$ = untrackedValue;
         }
         return didChange;
     }
@@ -1849,9 +1894,12 @@ function clearAsyncComputedSignal(producer, effect) {
 function clearStore(producer, effect) {
     const effects = producer?.$effects$;
     if (effects) {
-        for (const propEffects of effects.values()) {
+        for (const [propKey, propEffects] of effects.entries()) {
             if (propEffects.has(effect)) {
                 propEffects.delete(effect);
+                if (propEffects.size === 0) {
+                    effects.delete(propKey);
+                }
             }
         }
     }
@@ -4370,14 +4418,17 @@ const RenderOnce = (props, key) => {
 };
 
 /** @internal */
-const useTaskQrl = (qrl) => {
+const useTaskQrl = (qrl, opts) => {
     const { val, set, iCtx, i } = useSequentialScope();
     if (val) {
         return;
     }
     assertQrl(qrl);
     set(1);
-    const task = new Task(8 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */, i, iCtx.$hostElement$, qrl, undefined, null);
+    const taskFlags = 
+    // enabled by default
+    opts?.deferUpdates === false ? 0 : 16 /* TaskFlags.RENDER_BLOCKING */;
+    const task = new Task(8 /* TaskFlags.DIRTY */ | 2 /* TaskFlags.TASK */ | taskFlags, 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.
@@ -4390,7 +4441,7 @@ const useTaskQrl = (qrl) => {
 };
 const runTask = (task, container, host) => {
     task.$flags$ &= -9 /* TaskFlags.DIRTY */;
-    cleanupTask(task);
+    cleanupDestroyable(task);
     const iCtx = newInvokeContext(container.$locale$, host, undefined, TaskEvent);
     iCtx.$container$ = container;
     const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
@@ -4407,18 +4458,6 @@ const runTask = (task, container, host) => {
         }
     });
 };
-const cleanupTask = (task) => {
-    const destroy = task.$destroy$;
-    if (destroy) {
-        task.$destroy$ = null;
-        try {
-            destroy();
-        }
-        catch (err) {
-            logError(err);
-        }
-    }
-};
 class Task extends BackRef$1 {
     $flags$;
     $index$;
@@ -4587,7 +4626,7 @@ const isResourceReturn = (obj) => {
 };
 const runResource = (task, container, host) => {
     task.$flags$ &= -9 /* TaskFlags.DIRTY */;
-    cleanupTask(task);
+    cleanupDestroyable(task);
     const iCtx = newInvokeContext(container.$locale$, host, undefined, ResourceEvent);
     iCtx.$container$ = container;
     const taskFn = task.$qrl$.getFn(iCtx, () => clearAllEffects(container, task));
@@ -4676,7 +4715,7 @@ const runResource = (task, container, host) => {
             promise,
             delay(timeout).then(() => {
                 if (setState(false, new Error('timeout'))) {
-                    cleanupTask(task);
+                    cleanupDestroyable(task);
                 }
             }),
         ]);
@@ -4814,16 +4853,17 @@ function qrlToString(serializationContext, value, raw) {
         // TODO test that provided stringified fn is used
         symbol = String(serializationContext.$addSyncFn$(null, 0, fn));
     }
-    if (!value.$capture$ && Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0) {
+    let capturedIds = null;
+    if (Array.isArray(value.$captureRef$) && value.$captureRef$.length > 0) {
         // We refer by id so every capture needs to be a root
-        value.$capture$ = value.$captureRef$.map((ref) => `${serializationContext.$addRoot$(ref)}`);
+        capturedIds = value.$captureRef$.map((ref) => `${serializationContext.$addRoot$(ref)}`);
     }
     if (raw) {
-        return [chunk, symbol, value.$capture$];
+        return [chunk, symbol, capturedIds];
     }
     let qrlStringInline = `${chunk}#${symbol}`;
-    if (value.$capture$ && value.$capture$.length > 0) {
-        qrlStringInline += `[${value.$capture$.join(' ')}]`;
+    if (capturedIds && capturedIds.length > 0) {
+        qrlStringInline += `[${capturedIds.join(' ')}]`;
     }
     return qrlStringInline;
 }
@@ -5664,6 +5704,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
      */
     const stack = [];
     const asyncQueue = [];
+    const asyncAttributePromises = [];
     ////////////////////////////////
     //// Traverse state variables
     ////////////////////////////////
@@ -6077,6 +6118,14 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 diff(jsxNode, vHostNode);
             }
         }
+        // Wait for all async attribute promises to complete, then check for more work
+        if (asyncAttributePromises.length) {
+            const promises = asyncAttributePromises.splice(0);
+            return Promise.all(promises).then(() => {
+                // After attributes are set, check if there's more work in the queue
+                return drainAsyncQueue();
+            });
+        }
     }
     function expectNoChildren() {
         const vFirstChild = vCurrent && vnode_getFirstChild(vCurrent);
@@ -6128,11 +6177,11 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     // only svg elements can have namespace attributes
                     const namespace = getAttributeNamespace(key);
                     if (namespace) {
-                        element.setAttributeNS(namespace, key, String(value));
+                        element.setAttributeNS(namespace, key, value);
                         return;
                     }
                 }
-                element.setAttribute(key, String(value));
+                element.setAttribute(key, value);
             }
         }
         const { constProps } = jsx;
@@ -6183,7 +6232,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 }
                 if (isPromise(value)) {
                     const vHost = vNewNode;
-                    value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                    const attributePromise = value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                    asyncAttributePromises.push(attributePromise);
                     continue;
                 }
                 if (key === dangerouslySetInnerHTML) {
@@ -6355,7 +6405,8 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
             }
             if (isPromise(value)) {
                 const vHost = vnode;
-                value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                const attributePromise = value.then((resolvedValue) => setAttribute(key, resolvedValue, vHost));
+                asyncAttributePromises.push(attributePromise);
                 return;
             }
             setAttribute(key, value, vnode);
@@ -6877,28 +6928,30 @@ function cleanup(container, vNode) {
         if (type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) {
             clearAllEffects(container, vCursor);
             markVNodeAsDeleted(vCursor);
-            // Only elements and virtual nodes need to be traversed for children
-            if (type & 2 /* VNodeFlags.Virtual */) {
+            const isComponent = type & 2 /* VNodeFlags.Virtual */ &&
+                vCursor.getProp(OnRenderProp, null) !== null;
+            if (isComponent) {
+                // cleanup q:seq content
                 const seq = container.getHostProp(vCursor, ELEMENT_SEQ);
                 if (seq) {
                     for (let i = 0; i < seq.length; i++) {
                         const obj = seq[i];
-                        if (isTask(obj)) {
-                            const task = obj;
-                            clearAllEffects(container, task);
-                            if (task.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
-                                container.$scheduler$(32 /* ChoreType.CLEANUP_VISIBLE */, task);
+                        if (isObject(obj)) {
+                            const objIsTask = isTask(obj);
+                            if (objIsTask && obj.$flags$ & 1 /* TaskFlags.VISIBLE_TASK */) {
+                                container.$scheduler$(32 /* ChoreType.CLEANUP_VISIBLE */, obj);
+                                // don't call cleanupDestroyable yet, do it by the scheduler
+                                continue;
                             }
-                            else {
-                                cleanupTask(task);
+                            else if (obj instanceof SignalImpl || isStore(obj)) {
+                                clearAllEffects(container, obj);
+                            }
+                            if (objIsTask || obj instanceof AsyncComputedSignalImpl) {
+                                cleanupDestroyable(obj);
                             }
                         }
                     }
                 }
-            }
-            const isComponent = type & 2 /* VNodeFlags.Virtual */ &&
-                vCursor.getProp(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 = vnode_getProps(vCursor);
                 for (let i = 0; i < attrs.length; i = i + 2) {
@@ -7547,6 +7600,8 @@ const createScheduler = (container, journalFlush, choreQueue, blockedChores, run
     let currentTime = performance.now();
     const nextTick = createNextTick(drainChoreQueue);
     let flushTimerId = null;
+    let blockingChoresCount = 0;
+    let currentChore = null;
     function drainInNextTick() {
         if (!drainScheduled) {
             drainScheduled = true;
@@ -7620,6 +7675,10 @@ Problematic chore:
 
 This is often caused by modifying a signal in an already rendered component during SSR.`;
                     logWarn(warningMessage);
+                    // Decrement counter if this was a blocking chore that we're skipping
+                    if (isRenderBlocking(type)) {
+                        blockingChoresCount--;
+                    }
                     return chore;
                 }
             }
@@ -7637,7 +7696,7 @@ This is often caused by modifying a signal in an already rendered component duri
                 return chore;
             }
         }
-        addChore(chore, choreQueue);
+        addChoreAndIncrementBlockingCounter(chore, choreQueue);
         const runImmediately = (isServer && type === 6 /* ChoreType.COMPONENT */) || type === 2 /* ChoreType.RUN_QRL */;
         if (runImmediately && !isDraining) {
             immediateDrain();
@@ -7686,6 +7745,9 @@ This is often caused by modifying a signal in an already rendered component duri
         }, delay);
     }
     function applyJournalFlush() {
+        if (blockingChoresCount > 0) {
+            return;
+        }
         if (!isJournalFlushRunning) {
             // prevent multiple journal flushes from running at the same time
             isJournalFlushRunning = true;
@@ -7752,7 +7814,7 @@ This is often caused by modifying a signal in an already rendered component duri
                         if (vnode_isVNode(blockedChore.$host$)) {
                             blockedChore.$host$.blockedChores?.delete(blockedChore);
                         }
-                        addChore(blockedChore, choreQueue);
+                        addChoreAndIncrementBlockingCounter(blockedChore, choreQueue);
                         blockedChoresScheduled = true;
                     }
                 }
@@ -7762,12 +7824,12 @@ This is often caused by modifying a signal in an already rendered component duri
                 drainInNextTick();
             }
         };
-        let currentChore = null;
         try {
             while (choreQueue.length) {
                 currentTime = performance.now();
                 const chore = (currentChore = choreQueue.shift());
                 if (chore.$state$ !== ChoreState.NONE) {
+                    // Chore was already processed, counter already decremented in finishChore/handleError
                     continue;
                 }
                 if (vNodeAlreadyDeleted(chore) &&
@@ -7778,6 +7840,10 @@ This is often caused by modifying a signal in an already rendered component duri
                     if (vnode_isVNode(chore.$host$)) {
                         chore.$host$.chores?.delete(chore);
                     }
+                    // Decrement counter if this was a blocking chore that we're skipping
+                    if (isRenderBlocking(chore.$type$)) {
+                        blockingChoresCount--;
+                    }
                     continue;
                 }
                 if (chore.$type$ === 16 /* ChoreType.VISIBLE */) {
@@ -7853,10 +7919,18 @@ This is often caused by modifying a signal in an already rendered component duri
         if (vnode_isVNode(chore.$host$)) {
             chore.$host$.chores?.delete(chore);
         }
+        // Decrement blocking counter if this chore was blocking journal flush
+        if (isRenderBlocking(chore.$type$)) {
+            blockingChoresCount--;
+        }
     }
     function handleError(chore, e) {
         chore.$endTime$ = performance.now();
         chore.$state$ = ChoreState.FAILED;
+        // Decrement blocking counter if this chore was blocking journal flush
+        if (isRenderBlocking(chore.$type$)) {
+            blockingChoresCount--;
+        }
         // If we used the result as promise, this won't exist
         chore.$reject$?.(e);
         container.handleError(e, chore.$host$);
@@ -7894,14 +7968,21 @@ This is often caused by modifying a signal in an already rendered component duri
                         returnValue = runResource(payload, container, host);
                     }
                     else {
-                        returnValue = runTask(payload, container, host);
+                        const task = payload;
+                        returnValue = runTask(task, container, host);
+                        if (task.$flags$ & 16 /* TaskFlags.RENDER_BLOCKING */) {
+                            blockingChoresCount++;
+                            returnValue = maybeThen(returnValue, () => {
+                                blockingChoresCount--;
+                            });
+                        }
                     }
                 }
                 break;
             case 32 /* ChoreType.CLEANUP_VISIBLE */:
                 {
                     const task = chore.$payload$;
-                    cleanupTask(task);
+                    cleanupDestroyable(task);
                 }
                 break;
             case 4 /* ChoreType.NODE_DIFF */:
@@ -7995,7 +8076,22 @@ This is often caused by modifying a signal in an already rendered component duri
         }
         return null;
     }
+    function addChoreAndIncrementBlockingCounter(chore, choreArray) {
+        if (addChore(chore, choreArray)) {
+            blockingChoresCount++;
+        }
+    }
 };
+function addChore(chore, choreArray) {
+    const idx = choreArray.add(chore);
+    if (idx < 0) {
+        if (vnode_isVNode(chore.$host$)) {
+            (chore.$host$.chores ||= new ChoreArray()).add(chore);
+        }
+        return isRenderBlocking(chore.$type$);
+    }
+    return false;
+}
 function vNodeAlreadyDeleted(chore) {
     return !!(chore.$host$ && vnode_isVNode(chore.$host$) && chore.$host$.flags & 32 /* VNodeFlags.Deleted */);
 }
@@ -8006,11 +8102,8 @@ function addBlockedChore(blockedChore, blockingChore, blockedChores) {
         (blockedChore.$host$.blockedChores ||= new ChoreArray()).add(blockedChore);
     }
 }
-function addChore(chore, choreArray) {
-    const idx = choreArray.add(chore);
-    if (idx < 0 && vnode_isVNode(chore.$host$)) {
-        (chore.$host$.chores ||= new ChoreArray()).add(chore);
-    }
+function isRenderBlocking(type) {
+    return type === 4 /* ChoreType.NODE_DIFF */ || type === 6 /* ChoreType.COMPONENT */;
 }
 function choreTypeToName(type) {
     return ({
@@ -9344,7 +9437,7 @@ function setEvent(serializationCtx, key, rawValue) {
          *
          * For internal qrls (starting with `_`) we assume that they do the right thing.
          */
-        if (!qrl.$symbol$.startsWith('_') && (qrl.$captureRef$ || qrl.$capture$)) {
+        if (!qrl.$symbol$.startsWith('_') && qrl.$captureRef$?.length) {
             qrl = createQRL(null, '_run', _run, null, null, [qrl]);
         }
         return qrlToString(serializationCtx, qrl);
@@ -9524,6 +9617,7 @@ const inflate = (container, target, typeId, data) => {
             const hasValue = d.length > 6;
             if (hasValue) {
                 asyncComputed.$untrackedValue$ = d[6];
+                asyncComputed.$promiseValue$ = d[6];
             }
             asyncComputed.$flags$ |= 1 /* SignalFlags.INVALID */;
             break;
@@ -10178,6 +10272,9 @@ class DomContainer extends _SharedContainer {
         this.$setServerData$();
         element.setAttribute(QContainerAttr, "resumed" /* QContainerValue.RESUMED */);
         element.qContainer = this;
+        if (!qTest && element.isConnected) {
+            element.dispatchEvent(new CustomEvent('qresume', { bubbles: true }));
+        }
         const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
         if (qwikStates.length !== 0) {
             const lastState = qwikStates[qwikStates.length - 1];