@qwik.dev/core 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.1-dev+10f5414
+ * @qwik.dev/core 2.0.0-alpha.3-dev+418fd6d
  * 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
@@ -1264,6 +1264,12 @@ function clearEffects(subscriber, value) {
     return subscriptionRemoved;
 }
 
+/**
+ * Special value used to mark that a given signal needs to be computed. This is essentially a
+ * "marked as dirty" flag.
+ */
+const NEEDS_COMPUTATION = Symbol('invalid');
+
 /**
  * @file
  *
@@ -1278,11 +1284,6 @@ function clearEffects(subscriber, value) {
  *   - It is `Readonly` because it is computed.
  */
 const DEBUG = false;
-/**
- * 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');
 // eslint-disable-next-line no-console
 const log = (...args) => console.log('SIGNAL', ...args.map(qwikDebugToString));
 const throwIfQRLNotResolved = (qrl) => {
@@ -2176,6 +2177,15 @@ class StoreHandler {
         if (prop === STORE_TARGET) {
             return true;
         }
+        if (typeof prop === 'string') {
+            const ctx = tryGetInvokeContext();
+            if (ctx) {
+                const effectSubscriber = ctx.$effectSubscriber$;
+                if (effectSubscriber) {
+                    addEffect(target, Array.isArray(target) ? STORE_ARRAY_PROP : prop, this, effectSubscriber);
+                }
+            }
+        }
         return Object.prototype.hasOwnProperty.call(target, prop);
     }
     ownKeys(target) {
@@ -3282,48 +3292,48 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
     /////////////////////////////////////////////////////////////////////////////
     /////////////////////////////////////////////////////////////////////////////
     function descendContentToProject(children, host) {
-        if (!Array.isArray(children)) {
-            children = [children];
-        }
-        if (children.length) {
-            const createProjectionJSXNode = (slotName) => {
-                return new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
-            };
-            const projections = [];
-            if (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];
-                    if (isSlotProp(prop)) {
-                        const slotName = prop;
-                        projections.push(slotName);
-                        projections.push(createProjectionJSXNode(slotName));
-                    }
+        const projectionChildren = Array.isArray(children) ? children : [children];
+        const createProjectionJSXNode = (slotName) => {
+            return new JSXNodeImpl(Projection, EMPTY_OBJ, null, [], 0, slotName);
+        };
+        const projections = [];
+        if (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];
+                if (isSlotProp(prop)) {
+                    const slotName = prop;
+                    projections.push(slotName);
+                    projections.push(createProjectionJSXNode(slotName));
                 }
             }
-            /// STEP 1: Bucketize the children based on the projection name.
-            for (let i = 0; i < children.length; i++) {
-                const child = children[i];
-                const slotName = String((isJSXNode(child) && directGetPropsProxyProp(child, QSlot)) || QDefaultSlot);
-                const idx = mapApp_findIndx(projections, slotName, 0);
-                let jsxBucket;
-                if (idx >= 0) {
-                    jsxBucket = projections[idx + 1];
-                }
-                else {
-                    projections.splice(~idx, 0, slotName, (jsxBucket = createProjectionJSXNode(slotName)));
-                }
-                const removeProjection = child === false;
-                if (!removeProjection) {
-                    jsxBucket.children.push(child);
-                }
+        }
+        if (projections.length === 0 && children == null) {
+            // We did not find any existing slots and we don't have any children to project.
+            return;
+        }
+        /// STEP 1: Bucketize the children based on the projection name.
+        for (let i = 0; i < projectionChildren.length; i++) {
+            const child = projectionChildren[i];
+            const slotName = String((isJSXNode(child) && directGetPropsProxyProp(child, QSlot)) || QDefaultSlot);
+            const idx = mapApp_findIndx(projections, slotName, 0);
+            let jsxBucket;
+            if (idx >= 0) {
+                jsxBucket = projections[idx + 1];
             }
-            /// STEP 2: remove the names
-            for (let i = projections.length - 2; i >= 0; i = i - 2) {
-                projections.splice(i, 1);
+            else {
+                projections.splice(~idx, 0, slotName, (jsxBucket = createProjectionJSXNode(slotName)));
             }
-            descend(projections, true);
+            const removeProjection = child === false;
+            if (!removeProjection) {
+                jsxBucket.children.push(child);
+            }
+        }
+        /// STEP 2: remove the names
+        for (let i = projections.length - 2; i >= 0; i = i - 2) {
+            projections.splice(i, 1);
         }
+        descend(projections, true);
     }
     function expectProjection() {
         const jsxNode = jsxValue;
@@ -3845,7 +3855,7 @@ const vnode_diff = (container, jsxNode, vStartNode, scopedStyleIdPrefix) => {
                     container.$scheduler$(ChoreType.COMPONENT, host, componentQRL, jsxProps);
                 }
             }
-            jsxNode.children != null && descendContentToProject(jsxNode.children, host);
+            descendContentToProject(jsxNode.children, host);
         }
         else {
             const lookupKey = jsxNode.key;
@@ -4346,9 +4356,13 @@ const createScheduler = (container, scheduleDrain, journalFlush) => {
             case ChoreType.COMPONENT:
             case ChoreType.COMPONENT_SSR:
                 returnValue = safeCall(() => executeComponent(container, host, host, chore.$target$, chore.$payload$), (jsx) => {
-                    return chore.$type$ === ChoreType.COMPONENT
-                        ? maybeThen(container.processJsx(host, jsx), () => jsx)
-                        : jsx;
+                    if (chore.$type$ === ChoreType.COMPONENT) {
+                        const styleScopedId = container.getHostProp(host, QScopedStyle);
+                        return vnode_diff(container, jsx, host, addComponentStylePrefix(styleScopedId));
+                    }
+                    else {
+                        return jsx;
+                    }
                 }, (err) => container.handleError(err, host));
                 break;
             case ChoreType.RESOURCE:
@@ -4453,7 +4467,10 @@ function choreComparator(a, b, shouldThrowOnHostMismatch) {
                 // On server we can't schedule task for a different host!
                 // Server is SSR, and therefore scheduling for anything but the current host
                 // implies that things need to be re-run nad that is not supported because of streaming.
-                const errorMessage = 'SERVER: during HTML streaming, it is not possible to cause a re-run of tasks on a different host';
+                const errorMessage = `SERVER: during HTML streaming, re-running tasks on a different host is not allowed.
+          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) {
                     throwErrorAndStop(errorMessage);
                 }
@@ -4520,7 +4537,7 @@ function sortedInsert(sortedArray, value) {
  *
  * @public
  */
-const version = "2.0.0-alpha.1-dev+10f5414";
+const version = "2.0.0-alpha.3-dev+418fd6d";
 
 /** @internal */
 class _SharedContainer {
@@ -4547,8 +4564,8 @@ class _SharedContainer {
     trackSignalValue(signal, subscriber, property, data) {
         return trackSignal(() => signal.value, subscriber, property, this, data);
     }
-    serializationCtxFactory(NodeConstructor, symbolToChunkResolver, writer, prepVNodeData) {
-        return createSerializationContext(NodeConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
+    serializationCtxFactory(NodeConstructor, DomRefConstructor, symbolToChunkResolver, writer, prepVNodeData) {
+        return createSerializationContext(NodeConstructor, DomRefConstructor, symbolToChunkResolver, this.getHostProp.bind(this), this.setHostProp.bind(this), this.$storeProxyMap$, writer, prepVNodeData);
     }
 }
 
@@ -5070,11 +5087,6 @@ class DomContainer extends _SharedContainer {
     parseQRL(qrl) {
         return inflateQRL(this, parseQRL(qrl));
     }
-    processJsx(host, jsx) {
-        // console.log('>>>> processJsx', String(host));
-        const styleScopedId = this.getHostProp(host, QScopedStyle);
-        return vnode_diff(this, jsx, host, addComponentStylePrefix(styleScopedId));
-    }
     handleError(err, host) {
         if (qDev) {
             // Clean vdom
@@ -8036,7 +8048,10 @@ const inflate = (container, target, typeId, data) => {
                 if (valType === TypeIds.RootRef || valType >= TypeIds.Error) {
                     Object.defineProperty(target, key, {
                         get() {
-                            return deserializeData(container, valType, valData);
+                            const value = deserializeData(container, valType, valData);
+                            // after first deserialize, we can replace the Object.defineProperty with the value
+                            target[key] = value;
+                            return value;
                         },
                         set(value) {
                             Object.defineProperty(target, key, {
@@ -8378,13 +8393,7 @@ function inflateQRL(container, qrl) {
     }
     return qrl;
 }
-/** A ref to a DOM element */
-class DomVRef {
-    id;
-    constructor(id) {
-        this.id = id;
-    }
-}
+let isDomRef = (obj) => false;
 const createSerializationContext = (
 /**
  * Node constructor, for instanceof checks.
@@ -8392,7 +8401,9 @@ const createSerializationContext = (
  * A node constructor can be null. For example on the client we can't serialize DOM nodes as
  * server will not know what to do with them.
  */
-NodeConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, 
+NodeConstructor, 
+/** DomRef constructor, for instanceof checks. */
+DomRefConstructor, symbolToChunkResolver, getProp, setProp, storeProxyMap, writer, 
 // temporary until we serdes the vnode data here
 prepVNodeData) => {
     if (!writer) {
@@ -8418,11 +8429,13 @@ prepVNodeData) => {
         return id;
     };
     const isSsrNode = (NodeConstructor ? (obj) => obj instanceof NodeConstructor : () => false);
+    isDomRef = (DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : () => false);
     return {
         $serialize$() {
             serialize(this);
         },
         $isSsrNode$: isSsrNode,
+        $isDomRef$: isDomRef,
         $symbolToChunkResolver$: symbolToChunkResolver,
         $wasSeen$,
         $roots$: roots,
@@ -8568,6 +8581,9 @@ prepVNodeData) => {
             else if (isSsrNode(obj)) {
                 discoveredValues.push(obj.vnodeData);
             }
+            else if (isDomRef(obj)) {
+                discoveredValues.push(obj.$ssrNode$.id);
+            }
             else if (isJSXNode(obj)) {
                 discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
             }
@@ -8641,7 +8657,7 @@ const promiseResults = new WeakMap();
  * - Therefore root indexes need to be doubled to get the actual index.
  */
 function serialize(serializationContext) {
-    const { $writer$, $isSsrNode$, $setProp$, $storeProxyMap$ } = serializationContext;
+    const { $writer$, $isSsrNode$, $isDomRef$, $setProp$, $storeProxyMap$ } = serializationContext;
     let depth = -1;
     // Skip the type for the roots output
     let writeType = false;
@@ -8863,23 +8879,19 @@ function serialize(serializationContext) {
                 output(TypeIds.Object, out);
             }
         }
-        else if (value instanceof DomVRef) {
-            output(TypeIds.RefVNode, value.id);
+        else if ($isDomRef$(value)) {
+            value.$ssrNode$.vnodeData[0] |= VNodeDataFlag.SERIALIZE;
+            output(TypeIds.RefVNode, value.$ssrNode$.id);
         }
         else if (value instanceof Signal) {
             /**
              * Special case: when a Signal value is an SSRNode, it always needs to be a DOM ref instead.
              * It can never be meant to become a vNode, because vNodes are internal only.
              */
-            let v = value instanceof ComputedSignal &&
+            const v = value instanceof ComputedSignal &&
                 (value.$invalid$ || fastSkipSerialize(value.$untrackedValue$))
                 ? NEEDS_COMPUTATION
                 : value.$untrackedValue$;
-            if ($isSsrNode$(v)) {
-                // TODO maybe we don't need to store all vnode data if it's only a ref
-                serializationContext.$addRoot$(v);
-                v = new DomVRef(v.id);
-            }
             if (value instanceof WrappedSignal) {
                 output(TypeIds.WrappedSignal, [
                     ...serializeWrappingFn(serializationContext, value),
@@ -9096,7 +9108,7 @@ function qrlToString(serializationContext, value) {
  * @internal
  */
 async function _serialize(data) {
-    const serializationContext = createSerializationContext(null, () => '', () => '', () => { }, new WeakMap());
+    const serializationContext = createSerializationContext(null, null, () => '', () => '', () => { }, new WeakMap());
     for (const root of data) {
         serializationContext.$addRoot$(root);
     }
@@ -9287,6 +9299,9 @@ const canSerialize = (value) => {
         else if (value instanceof Uint8Array) {
             return true;
         }
+        else if (isDomRef?.(value)) {
+            return true;
+        }
     }
     else if (typeof value === 'function') {
         if (isQrl(value) || isQwikComponent(value)) {
@@ -9491,8 +9506,8 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
     }
     let _containerEl;
     const qrl = async function (...args) {
-        const fn = invokeFn.call(this, tryGetInvokeContext());
-        const result = await fn(...args);
+        const boundedFn = bindFnToContext.call(this, tryGetInvokeContext());
+        const result = await boundedFn(...args);
         return result;
     };
     const setContainer = (el) => {
@@ -9501,6 +9516,34 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         }
         return _containerEl;
     };
+    function bindFnToContext(currentCtx, beforeFn) {
+        // Note that we bind the current `this`
+        return (...args) => maybeThen(resolveLazy(), (fn) => {
+            if (!isFunction(fn)) {
+                throw qError(QError_qrlIsNotFunction);
+            }
+            if (beforeFn && beforeFn() === false) {
+                return;
+            }
+            const context = createOrReuseInvocationContext(currentCtx);
+            const prevQrl = context.$qrl$;
+            const prevEvent = context.$event$;
+            // Note that we set the qrl here instead of in wrapFn because
+            // it is possible we're called on a copied qrl
+            context.$qrl$ = qrl;
+            context.$event$ ||= this;
+            try {
+                return invoke.call(this, context, fn, ...args);
+            }
+            finally {
+                context.$qrl$ = prevQrl;
+                context.$event$ = prevEvent;
+            }
+        });
+    }
+    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)) {
@@ -9553,34 +9596,6 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         }
         return symbolRef;
     };
-    const resolveLazy = (containerEl) => {
-        return symbolRef !== null ? symbolRef : resolve(containerEl);
-    };
-    function invokeFn(currentCtx, beforeFn) {
-        // Note that we bind the current `this`
-        return (...args) => maybeThen(resolveLazy(), (f) => {
-            if (!isFunction(f)) {
-                throw qError(QError_qrlIsNotFunction);
-            }
-            if (beforeFn && beforeFn() === false) {
-                return;
-            }
-            const context = createOrReuseInvocationContext(currentCtx);
-            const prevQrl = context.$qrl$;
-            const prevEvent = context.$event$;
-            // Note that we set the qrl here instead of in wrapFn because
-            // it is possible we're called on a copied qrl
-            context.$qrl$ = qrl;
-            context.$event$ ||= this;
-            try {
-                return invoke.call(this, context, f, ...args);
-            }
-            finally {
-                context.$qrl$ = prevQrl;
-                context.$event$ = prevEvent;
-            }
-        });
-    }
     const createOrReuseInvocationContext = (invoke) => {
         if (invoke == null) {
             return newInvokeContext();
@@ -9605,7 +9620,7 @@ const createQRL = (chunk, symbol, symbolRef, symbolFn, capture, captureRef, refS
         $symbol$: symbol,
         $refSymbol$: refSymbol,
         $hash$: hash,
-        getFn: invokeFn,
+        getFn: bindFnToContext,
         $capture$: capture,
         $captureRef$: captureRef,
         dev: null,