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

package/dist/core.mjs

@@ -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
@@ -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) {
@@ -2793,6 +2803,7 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
     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');
@@ -2809,13 +2820,18 @@ const executeComponent = (container, renderHost, subscriptionHost, componentQRL,
         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);
         }
@@ -4447,7 +4463,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);
                 }
@@ -4514,7 +4533,7 @@ function sortedInsert(sortedArray, value) {
  *
  * @public
  */
-const version = "2.0.0-alpha.0-dev+dd93926";
+const version = "2.0.0-alpha.2-dev+58b6f8d";
 
 /** @internal */
 class _SharedContainer {
@@ -4541,8 +4560,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);
     }
 }
 
@@ -8372,13 +8391,6 @@ function inflateQRL(container, qrl) {
     }
     return qrl;
 }
-/** A ref to a DOM element */
-class DomVRef {
-    id;
-    constructor(id) {
-        this.id = id;
-    }
-}
 const createSerializationContext = (
 /**
  * Node constructor, for instanceof checks.
@@ -8386,7 +8398,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) {
@@ -8412,11 +8426,13 @@ prepVNodeData) => {
         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,
@@ -8562,6 +8578,9 @@ prepVNodeData) => {
             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);
             }
@@ -8635,7 +8654,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;
@@ -8857,7 +8876,7 @@ function serialize(serializationContext) {
                 output(TypeIds.Object, out);
             }
         }
-        else if (value instanceof DomVRef) {
+        else if ($isDomRef$(value)) {
             output(TypeIds.RefVNode, value.id);
         }
         else if (value instanceof Signal) {
@@ -8865,15 +8884,10 @@ function serialize(serializationContext) {
              * 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),
@@ -9090,7 +9104,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);
     }
@@ -9485,8 +9499,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) => {
@@ -9495,6 +9509,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)) {
@@ -9547,34 +9589,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();
@@ -9599,7 +9613,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,