@qwik.dev/core 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.2-dev+3ddc6c7
+ * @qwik.dev/core 2.0.0-beta.3-dev+aa098fc
  * 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
@@ -642,8 +642,6 @@ class WrappedSignalImpl extends SignalImpl {
     $invalidate$() {
         this.$flags$ |= 1 /* SignalFlags.INVALID */;
         this.$forceRunEffects$ = false;
-        // We should only call subscribers if the calculation actually changed.
-        // Therefore, we need to calculate the value now.
         this.$container$?.$scheduler$(7 /* ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS */, this.$hostElement$, this, this.$effects$);
     }
     /**
@@ -1230,7 +1228,7 @@ const isRecoverable = (err) => {
  *
  * @public
  */
-const version = "2.0.0-beta.2-dev+3ddc6c7";
+const version = "2.0.0-beta.3-dev+aa098fc";
 
 /** @internal */
 const EMPTY_ARRAY = [];
@@ -2421,7 +2419,6 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         if (!isInlineComponent) {
             container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
             container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
-            container.setHostProp(renderHost, ELEMENT_PROPS, props);
         }
         if (vnode_isVNode(renderHost)) {
             clearAllEffects(container, renderHost);
@@ -4540,16 +4537,36 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                 shouldRender = true;
             }
             if (host) {
-                const vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
-                shouldRender = shouldRender || propsDiffer(jsxProps, vNodeProps);
+                let vNodeProps = vnode_getProp(host, ELEMENT_PROPS, container.$getObjectById$);
+                const propsAreDifferent = propsDiffer(jsxProps, vNodeProps);
+                shouldRender = shouldRender || propsAreDifferent;
                 if (shouldRender) {
+                    if (propsAreDifferent) {
+                        if (vNodeProps) {
+                            // Reuse the same props instance, qrls can use the current props instance
+                            // as a capture ref, so we can't change it.
+                            // We need to do this directly, because normally we would subscribe to the signals
+                            // if any signal is there.
+                            vNodeProps[_CONST_PROPS] = jsxProps[_CONST_PROPS];
+                            vNodeProps[_VAR_PROPS] = jsxProps[_VAR_PROPS];
+                        }
+                        else if (jsxProps) {
+                            // If there is no props instance, create a new one.
+                            // We can do this because we are not using the props instance for anything else.
+                            vnode_setProp(host, ELEMENT_PROPS, jsxProps);
+                            vNodeProps = jsxProps;
+                        }
+                    }
+                    // Assign the new QRL instance to the host.
+                    // Unfortunately it is created every time, something to fix in the optimizer.
+                    vnode_setProp(host, OnRenderProp, componentQRL);
                     /**
                      * Mark host as not deleted. The host could have been marked as deleted if it there was a
                      * cleanup run. Now we found it and want to reuse it, so we need to mark it as not
                      * deleted.
                      */
                     host[0 /* VNodeProps.flags */] &= -33 /* VNodeFlags.Deleted */;
-                    container.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQRL, jsxProps);
+                    container.$scheduler$(6 /* ChoreType.COMPONENT */, host, componentQRL, vNodeProps);
                 }
             }
             descendContentToProject(jsxNode.children, host);
@@ -5509,22 +5526,23 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
                     {
                         const target = chore.$target$;
                         const effects = chore.$payload$;
+                        const ctx = newInvokeContext();
+                        ctx.$container$ = container;
                         if (target instanceof ComputedSignalImpl || target instanceof WrappedSignalImpl) {
                             const forceRunEffects = target.$forceRunEffects$;
                             target.$forceRunEffects$ = false;
-                            if (!target.$effects$?.size) {
+                            if (!effects?.size) {
                                 break;
                             }
-                            returnValue = retryOnPromise(() => {
-                                if (target.$computeIfNeeded$() || forceRunEffects) {
-                                    triggerEffects(container, target, effects);
+                            // needed for computed signals and throwing QRLs
+                            returnValue = maybeThen(retryOnPromise(() => invoke.call(target, ctx, target.$computeIfNeeded$)), (didChange) => {
+                                if (didChange || forceRunEffects) {
+                                    return retryOnPromise(() => triggerEffects(container, target, effects));
                                 }
                             });
                         }
                         else {
-                            returnValue = retryOnPromise(() => {
-                                triggerEffects(container, target, effects);
-                            });
+                            returnValue = retryOnPromise(() => triggerEffects(container, target, effects));
                         }
                     }
                     break;
@@ -5606,7 +5624,10 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             return idxDiff;
         }
         // If the host is the same (or missing), and the type is the same,  we need to compare the target.
-        if (a.$target$ !== b.$target$ || a.$payload$ !== b.$payload$) {
+        if (a.$target$ !== b.$target$) {
+            if (isQrl(a.$target$) && isQrl(b.$target$) && a.$target$.$hash$ === b.$target$.$hash$) {
+                return 0;
+            }
             // 1 means that we are going to process chores as FIFO
             return 1;
         }
@@ -5654,7 +5675,7 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
          * 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$ === 4 /* ChoreType.NODE_DIFF */) {
+        if (existing.$payload$ !== value.$payload$) {
             existing.$payload$ = value.$payload$;
         }
         if (existing.$executed$) {
@@ -7786,12 +7807,15 @@ const processVNodeData = (vData, callback) => {
     let nextToConsumeIdx = 0;
     let ch = 0;
     let peekCh = 0;
+    const getChar = (idx) => {
+        return idx < vData.length ? vData.charCodeAt(idx) : 0;
+    };
     const peek = () => {
         if (peekCh !== 0) {
             return peekCh;
         }
         else {
-            return (peekCh = nextToConsumeIdx < vData.length ? vData.charCodeAt(nextToConsumeIdx) : 0);
+            return (peekCh = getChar(nextToConsumeIdx));
         }
     };
     const consume = () => {
@@ -7812,7 +7836,7 @@ const processVNodeData = (vData, callback) => {
         return vData.substring(start, nextToConsumeIdx);
     };
     while (peek() !== 0) {
-        callback(peek, consumeValue, consume, nextToConsumeIdx);
+        callback(peek, consumeValue, consume, getChar, nextToConsumeIdx);
     }
 };
 const vnode_getNextSibling = (vnode) => {
@@ -8026,21 +8050,19 @@ function materializeFromVNodeData(vParent, vData, element, child) {
     let textIdx = 0;
     let combinedText = null;
     let container = null;
-    processVNodeData(vData, (peek, consumeValue, consume, nextToConsumeIdx) => {
+    processVNodeData(vData, (peek, consumeValue, consume, getChar, nextToConsumeIdx) => {
         if (isNumber(peek())) {
             // Element counts get encoded as numbers.
-            while (!isElement(child)) {
+            while (!isElement(child) ||
+                // We pretend that style element's don't exist as they can get moved out.
+                // skip over style elements, as those need to be moved to the head
+                // and are not included in the counts.
+                isQStyleElement(child)) {
                 child = fastNextSibling(child);
                 if (!child) {
                     throw qError(27 /* QError.materializeVNodeDataError */, [vData, peek(), nextToConsumeIdx]);
                 }
             }
-            // We pretend that style element's don't exist as they can get moved out.
-            while (isQStyleElement(child)) {
-                // skip over style elements, as those need to be moved to the head
-                // and are not included in the counts.
-                child = fastNextSibling(child);
-            }
             combinedText = null;
             previousTextNode = null;
             let value = 0;
@@ -8072,7 +8094,17 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             vnode_setAttr(null, vParent, ELEMENT_PROPS, consumeValue());
         }
         else if (peek() === VNodeDataChar.KEY) {
-            vnode_setAttr(null, vParent, ELEMENT_KEY, consumeValue());
+            const isEscapedValue = getChar(nextToConsumeIdx + 1) === VNodeDataChar.SEPARATOR;
+            let value;
+            if (isEscapedValue) {
+                consume();
+                value = decodeURI(consumeValue());
+                consume();
+            }
+            else {
+                value = consumeValue();
+            }
+            vnode_setAttr(null, vParent, ELEMENT_KEY, value);
         }
         else if (peek() === VNodeDataChar.SEQ) {
             vnode_setAttr(null, vParent, ELEMENT_SEQ, consumeValue());
@@ -8118,6 +8150,10 @@ function materializeFromVNodeData(vParent, vData, element, child) {
             vnode_setAttr(null, vParent, QSlot, consumeValue());
         }
         else {
+            // skip over style elements in front of text nodes, where text node is the first child (except the style node)
+            while (isQStyleElement(child)) {
+                child = fastNextSibling(child);
+            }
             const textNode = child && fastNodeType(child) === /* Node.TEXT_NODE */ 3 ? child : null;
             // must be alphanumeric
             if (combinedText === null) {
@@ -10076,6 +10112,7 @@ const NoSerializeSymbol = Symbol('noSerialize');
 const SerializerSymbol = Symbol('serialize');
 
 // keep these imports above the rest to prevent circular dep issues
+const resolvedSymbol = Symbol('resolved');
 const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
     if (qDev && qSerialize) {
         if (captureRef) {
@@ -10128,9 +10165,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         };
         return bound;
     }
-    const resolveLazy = (containerEl) => {
-        return symbolRef !== null ? symbolRef : resolve(containerEl);
-    };
     // Wrap functions to provide their lexical scope
     const wrapFn = (fn) => {
         if (typeof fn !== 'function' || (!capture?.length && !captureRef?.length)) {
@@ -10159,45 +10193,58 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
             return invoke.call(this, context, fn, ...args);
         };
     };
-    const resolve = async (containerEl) => {
-        if (symbolRef !== null) {
-            // Resolving (Promise) or already resolved (value)
+    // Retrieve memoized result from symbolFn
+    if (symbolFn && resolvedSymbol in symbolFn) {
+        symbolRef = symbolFn[resolvedSymbol];
+    }
+    const resolve = symbolRef
+        ? async () => symbolRef
+        : async (containerEl) => {
+            if (symbolRef !== null) {
+                // Resolving (Promise) or already resolved (value)
+                return symbolRef;
+            }
+            if (containerEl) {
+                setContainer(containerEl);
+            }
+            if (chunk === '') {
+                // Sync QRL
+                assertDefined(_containerEl, 'Sync QRL must have container element');
+                const hash = _containerEl.getAttribute(QInstanceAttr);
+                const doc = _containerEl.ownerDocument;
+                const qFuncs = getQFuncs(doc, hash);
+                // No need to wrap, syncQRLs can't have captured scope
+                return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
+            }
+            if (isBrowser && chunk) {
+                /** We run the QRL, so now the probability of the chunk is 100% */
+                p(chunk, 1);
+            }
+            const start = now();
+            const ctx = tryGetInvokeContext();
+            if (symbolFn !== null) {
+                symbolRef = symbolFn().then((module) => {
+                    const resolved = wrapFn((symbolRef = module[symbol]));
+                    // We memoize the result on the symbolFn
+                    symbolFn[resolvedSymbol] = resolved;
+                    qrl.resolved = resolved;
+                    return resolved;
+                });
+            }
+            else {
+                // TODO cache the imported symbol but watch out for dev mode
+                const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
+                symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
+            }
+            if (isPromise(symbolRef)) {
+                symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), (err) => {
+                    console.error(`qrl ${symbol} failed to load`, err);
+                    // We shouldn't cache rejections, we can try again later
+                    symbolRef = null;
+                });
+            }
             return symbolRef;
-        }
-        if (containerEl) {
-            setContainer(containerEl);
-        }
-        if (chunk === '') {
-            // Sync QRL
-            assertDefined(_containerEl, 'Sync QRL must have container element');
-            const hash = _containerEl.getAttribute(QInstanceAttr);
-            const doc = _containerEl.ownerDocument;
-            const qFuncs = getQFuncs(doc, hash);
-            // No need to wrap, syncQRLs can't have captured scope
-            return (qrl.resolved = symbolRef = qFuncs[Number(symbol)]);
-        }
-        if (isBrowser && chunk) {
-            /** We run the QRL, so now the probability of the chunk is 100% */
-            p(chunk, 1);
-        }
-        const start = now();
-        const ctx = tryGetInvokeContext();
-        if (symbolFn !== null) {
-            symbolRef = symbolFn().then((module) => (qrl.resolved = wrapFn((symbolRef = module[symbol]))));
-        }
-        else {
-            const imported = getPlatform().importSymbol(_containerEl, chunk, symbol);
-            symbolRef = maybeThen(imported, (ref) => (qrl.resolved = wrapFn((symbolRef = ref))));
-        }
-        if (typeof symbolRef === 'object' && isPromise(symbolRef)) {
-            symbolRef.then(() => emitUsedSymbol(symbol, ctx?.$element$, start), (err) => {
-                console.error(`qrl ${symbol} failed to load`, err);
-                // We shouldn't cache rejections, we can try again later
-                symbolRef = null;
-            });
-        }
-        return symbolRef;
-    };
+        };
     const createOrReuseInvocationContext = (invoke) => {
         if (invoke == null) {
             return newInvokeContext();
@@ -10215,7 +10262,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef) => {
         getHash: () => hash,
         getCaptured: () => captureRef,
         resolve,
-        $resolveLazy$: resolveLazy,
         $setContainer$: setContainer,
         $chunk$: chunk,
         $symbol$: symbol,
@@ -11056,13 +11102,13 @@ const _useStyles = (styleQrl, transform, scoped) => {
     const styleId = styleKey(styleQrl, i);
     const host = iCtx.$hostElement$;
     set(styleId);
-    const value = styleQrl.$resolveLazy$(iCtx.$element$);
-    if (isPromise(value)) {
-        value.then((val) => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped));
-        throw value;
+    if (styleQrl.resolved) {
+        iCtx.$container$.$appendStyle$(transform(styleQrl.resolved, styleId), styleId, host, scoped);
     }
     else {
-        iCtx.$container$.$appendStyle$(transform(value, styleId), styleId, host, scoped);
+        throw styleQrl
+            .resolve()
+            .then((val) => iCtx.$container$.$appendStyle$(transform(val, styleId), styleId, host, scoped));
     }
     return styleId;
 };
@@ -11353,7 +11399,7 @@ const useVisibleTaskQrl = (qrl, opts) => {
     set(task);
     useRunTask(task, eagerness);
     if (!isServerPlatform()) {
-        qrl.$resolveLazy$(iCtx.$element$);
+        qrl.resolve(iCtx.$element$);
         iCtx.$container$.$scheduler$(32 /* ChoreType.VISIBLE */, task);
     }
 };