@qwik.dev/core 2.0.0-alpha.0 → 2.0.0-alpha.2

package/dist/core-internal.d.ts

@@ -552,6 +552,10 @@ declare interface Container {
             nodeType: number;
             id: string;
         };
+    } | null, DomRefConstructor: {
+        new (...rest: any[]): {
+            id: string;
+        };
     } | null, symbolToChunkResolver: SymbolToChunkResolver, writer?: StreamWriter): SerializationContext;
 }
 
@@ -800,7 +804,7 @@ export declare const createSignal: {
 };
 
 /** @public */
-declare interface CSSProperties extends CSS_2.Properties<string | number>, CSS_2.PropertiesHyphen<string | number> {
+export declare interface CSSProperties extends CSS_2.Properties<string | number>, CSS_2.PropertiesHyphen<string | number> {
     /**
      * The index signature was removed to enable closed typing for style using CSSType. You're able to
      * use type assertion or module augmentation to add properties or an index signature of your own.
@@ -885,6 +889,10 @@ declare class DomContainer extends _SharedContainer implements ClientContainer {
 export { DomContainer }
 export { DomContainer as _DomContainer }
 
+declare type DomRef = {
+    id: string;
+};
+
 /** @public */
 export declare type EagernessOptions = 'visible' | 'load' | 'idle';
 
@@ -2278,6 +2286,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,6 +2336,10 @@ export declare abstract class _SharedContainer implements Container {
             nodeType: number;
             id: string;
         };
+    } | null, DomRefConstructor: {
+        new (...rest: any[]): {
+            id: string;
+        };
     } | null, symbolToChunkResolver: SymbolToChunkResolver, writer?: StreamWriter, prepVNodeData?: (vNode: any) => void): SerializationContext;
     abstract ensureProjectionResolved(host: HostElement): void;
     abstract processJsx(host: HostElement, jsx: JSXOutput): ValueOrPromise<void>;
@@ -3708,7 +3721,7 @@ export declare const _VAR_PROPS: unique symbol;
 export declare const _verifySerializable: <T>(value: T, preMessage?: string) => T;
 
 /**
- * 2.0.0-alpha.0-dev+dd93926
+ * 2.0.0-alpha.2-dev+58b6f8d
  *
  * @public
  */

package/dist/core.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-alpha.0-dev+dd93926
+ * @qwik.dev/core 2.0.0-alpha.2-dev+58b6f8d
  * 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) {
@@ -2796,6 +2806,7 @@
         iCtx.$container$ = container;
         let componentFn;
         container.ensureProjectionResolved(renderHost);
+        let isInlineComponent = false;
         if (componentQRL === null) {
             componentQRL = componentQRL || container.getHostProp(renderHost, OnRenderProp);
             assertDefined(componentQRL, 'No Component found at this location');
@@ -2812,13 +2823,18 @@
             componentFn = () => invokeApply(iCtx, qComponentFn, [props || EMPTY_OBJ, null, 0]);
         }
         else {
+            isInlineComponent = true;
             const inlineComponent = componentQRL;
             componentFn = () => invokeApply(iCtx, inlineComponent, [props || EMPTY_OBJ]);
         }
         const executeComponentWithPromiseExceptionRetry = (retryCount = 0) => safeCall(() => {
-            container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null);
-            container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null);
-            container.setHostProp(renderHost, ELEMENT_PROPS, props);
+            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);
+                }
+            }
             if (vnode_isVNode(renderHost)) {
                 clearVNodeEffectDependencies(renderHost);
             }
@@ -4450,7 +4466,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);
                     }
@@ -4517,7 +4536,7 @@
      *
      * @public
      */
-    const version = "2.0.0-alpha.0-dev+dd93926";
+    const version = "2.0.0-alpha.2-dev+58b6f8d";
 
     /** @internal */
     class _SharedContainer {
@@ -4544,8 +4563,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);
         }
     }
 
@@ -8375,13 +8394,6 @@
         }
         return qrl;
     }
-    /** A ref to a DOM element */
-    class DomVRef {
-        id;
-        constructor(id) {
-            this.id = id;
-        }
-    }
     const createSerializationContext = (
     /**
      * Node constructor, for instanceof checks.
@@ -8389,7 +8401,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) {
@@ -8415,11 +8429,13 @@
             return id;
         };
         const isSsrNode = (NodeConstructor ? (obj) => obj instanceof NodeConstructor : () => false);
+        const isDomRef = (DomRefConstructor ? (obj) => obj instanceof DomRefConstructor : () => false);
         return {
             $serialize$() {
                 serialize(this);
             },
             $isSsrNode$: isSsrNode,
+            $isDomRef$: isDomRef,
             $symbolToChunkResolver$: symbolToChunkResolver,
             $wasSeen$,
             $roots$: roots,
@@ -8565,6 +8581,9 @@
                 else if (isSsrNode(obj)) {
                     discoveredValues.push(obj.vnodeData);
                 }
+                else if (isDomRef(obj)) {
+                    discoveredValues.push(obj.id);
+                }
                 else if (isJSXNode(obj)) {
                     discoveredValues.push(obj.type, obj.props, obj.constProps, obj.children);
                 }
@@ -8638,7 +8657,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;
@@ -8860,7 +8879,7 @@
                     output(TypeIds.Object, out);
                 }
             }
-            else if (value instanceof DomVRef) {
+            else if ($isDomRef$(value)) {
                 output(TypeIds.RefVNode, value.id);
             }
             else if (value instanceof Signal) {
@@ -8868,15 +8887,10 @@
                  * 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),
@@ -9093,7 +9107,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);
         }
@@ -9488,8 +9502,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) => {
@@ -9498,6 +9512,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)) {
@@ -9550,34 +9592,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();
@@ -9602,7 +9616,7 @@
             $symbol$: symbol,
             $refSymbol$: refSymbol,
             $hash$: hash,
-            getFn: invokeFn,
+            getFn: bindFnToContext,
             $capture$: capture,
             $captureRef$: captureRef,
             dev: null,