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

package/dist/core-internal.d.ts

@@ -530,7 +530,6 @@ declare interface Container {
     readonly $getObjectById$: (id: number | string) => any;
     readonly $serverData$: Record<string, any>;
     $currentUniqueId$: number;
-    processJsx(host: HostElement, jsx: JSXOutput): ValueOrPromise<void>;
     handleError(err: any, $host$: HostElement): void;
     getParentHost(host: HostElement): HostElement | null;
     setContext<T>(host: HostElement, context: ContextId<T>, value: T): void;
@@ -552,6 +551,10 @@ declare interface Container {
             nodeType: number;
             id: string;
         };
+    } | null, DomRefConstructor: {
+        new (...rest: any[]): {
+            $ssrNode$: ISsrNode;
+        };
     } | null, symbolToChunkResolver: SymbolToChunkResolver, writer?: StreamWriter): SerializationContext;
 }
 
@@ -868,7 +871,6 @@ declare class DomContainer extends _SharedContainer implements ClientContainer {
     constructor(element: _ContainerElement);
     $setRawState$(id: number, vParent: _ElementVNode | _VirtualVNode): void;
     parseQRL<T = unknown>(qrl: string): QRL<T>;
-    processJsx(host: HostElement, jsx: JSXOutput): ValueOrPromise<void>;
     handleError(err: any, host: HostElement): void;
     setContext<T>(host: HostElement, context: ContextId<T>, value: T): void;
     resolveContext<T>(host: HostElement, contextId: ContextId<T>): T | undefined;
@@ -885,6 +887,10 @@ declare class DomContainer extends _SharedContainer implements ClientContainer {
 export { DomContainer }
 export { DomContainer as _DomContainer }
 
+declare type DomRef = {
+    $ssrNode$: SsrNode;
+};
+
 /** @public */
 export declare type EagernessOptions = 'visible' | 'load' | 'idle';
 
@@ -2278,6 +2284,7 @@ declare interface SerializationContext {
     $addSyncFn$($funcStr$: string | null, argsCount: number, fn: Function): number;
     $breakCircularDepsAndAwaitPromises$: () => ValueOrPromise<void>;
     $isSsrNode$: (obj: unknown) => obj is SsrNode;
+    $isDomRef$: (obj: unknown) => obj is DomRef;
     $writer$: StreamWriter_2;
     $syncFns$: string[];
     $eventQrls$: Set<QRL>;
@@ -2327,9 +2334,12 @@ export declare abstract class _SharedContainer implements Container {
             nodeType: number;
             id: string;
         };
+    } | null, DomRefConstructor: {
+        new (...rest: any[]): {
+            $ssrNode$: ISsrNode;
+        };
     } | null, symbolToChunkResolver: SymbolToChunkResolver, writer?: StreamWriter, prepVNodeData?: (vNode: any) => void): SerializationContext;
     abstract ensureProjectionResolved(host: HostElement): void;
-    abstract processJsx(host: HostElement, jsx: JSXOutput): ValueOrPromise<void>;
     abstract handleError(err: any, $host$: HostElement): void;
     abstract getParentHost(host: HostElement): HostElement | null;
     abstract setContext<T>(host: HostElement, context: ContextId<T>, value: T): void;
@@ -3708,7 +3718,7 @@ export declare const _VAR_PROPS: unique symbol;
 export declare const _verifySerializable: <T>(value: T, preMessage?: string) => T;
 
 /**
- * 2.0.0-alpha.1-dev+10f5414
+ * 2.0.0-alpha.3-dev+418fd6d
  *
  * @public
  */

package/dist/core.cjs

@@ -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
@@ -1267,6 +1267,12 @@
         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
      *
@@ -1281,11 +1287,6 @@
      *   - 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) => {
@@ -2179,6 +2180,15 @@
             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) {
@@ -3285,48 +3295,48 @@
         /////////////////////////////////////////////////////////////////////////////
         /////////////////////////////////////////////////////////////////////////////
         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;
@@ -3848,7 +3858,7 @@
                         container.$scheduler$(ChoreType.COMPONENT, host, componentQRL, jsxProps);
                     }
                 }
-                jsxNode.children != null && descendContentToProject(jsxNode.children, host);
+                descendContentToProject(jsxNode.children, host);
             }
             else {
                 const lookupKey = jsxNode.key;
@@ -4349,9 +4359,13 @@
                 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:
@@ -4456,7 +4470,10 @@
                     // 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);
                     }
@@ -4523,7 +4540,7 @@
      *
      * @public
      */
-    const version = "2.0.0-alpha.1-dev+10f5414";
+    const version = "2.0.0-alpha.3-dev+418fd6d";
 
     /** @internal */
     class _SharedContainer {
@@ -4550,8 +4567,8 @@
         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);
         }
     }
 
@@ -5073,11 +5090,6 @@
         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
@@ -8039,7 +8051,10 @@
                     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, {
@@ -8381,13 +8396,7 @@
         }
         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.
@@ -8395,7 +8404,9 @@
      * 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) {
@@ -8421,11 +8432,13 @@
             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,
@@ -8571,6 +8584,9 @@
                 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);
                 }
@@ -8644,7 +8660,7 @@
      * - 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;
@@ -8866,23 +8882,19 @@
                     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),
@@ -9099,7 +9111,7 @@
      * @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);
         }
@@ -9290,6 +9302,9 @@
             else if (value instanceof Uint8Array) {
                 return true;
             }
+            else if (isDomRef?.(value)) {
+                return true;
+            }
         }
         else if (typeof value === 'function') {
             if (isQrl(value) || isQwikComponent(value)) {
@@ -9494,8 +9509,8 @@
         }
         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) => {
@@ -9504,6 +9519,34 @@
             }
             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)) {
@@ -9556,34 +9599,6 @@
             }
             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();
@@ -9608,7 +9623,7 @@
             $symbol$: symbol,
             $refSymbol$: refSymbol,
             $hash$: hash,
-            getFn: invokeFn,
+            getFn: bindFnToContext,
             $capture$: capture,
             $captureRef$: captureRef,
             dev: null,