Merge pull request #8121 from QwikDev/v2-fix-preload-qrls

fix(serdes): preload qrls work again

Author: wmertens

packages/docs/src/routes/playground/parser/state/index.tsx

@@ -47,7 +47,6 @@ export default component$(() => {
         getSyncFn: (id: number) => () => {},
         $storeProxyMap$: new WeakMap(),
         $forwardRefs$: null,
-        $initialQRLsIndexes$: null,
         $scheduler$: null,
       };
 
@@ -78,7 +77,6 @@ export default component$(() => {
             getSyncFn: (id: number) => () => {},
             $storeProxyMap$: new WeakMap(),
             $forwardRefs$: null,
-            $initialQRLsIndexes$: null,
             $scheduler$: null,
           };
           _preprocessState(stateData, container as any);

packages/qwik/src/core/client/dom-container.ts

@@ -105,7 +105,6 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
   public $qFuncs$: Array<(...args: unknown[]) => unknown>;
   public $instanceHash$: string;
   public $forwardRefs$: Array<number> | null = null;
-  public $initialQRLs$: Array<string> | null = null;
   public vNodeLocate: (id: string | Element) => VNode = (id) => vnode_locate(this.rootVNode, id);
 
   private $stateData$: unknown[];
@@ -156,7 +155,6 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
       this.$rawStateData$ = JSON.parse(lastState.textContent!);
       preprocessState(this.$rawStateData$, this);
       this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$) as unknown[];
-      this.$scheduleInitialQRLs$();
     }
   }
 
@@ -327,33 +325,4 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     }
     this.$serverData$ = { containerAttributes };
   }
-
-  /**
-   * Schedule the initial QRLs to be resolved.
-   *
-   * Schedules the QRLs that are defined in the state data as `PreloadQRL`.
-   *
-   * This is done because when computed and custom serializer QRLs are called they need QRL to work.
-   * If the QRL is not resolved at this point, it will be resolved by throwing a promise and
-   * rerunning the whole wrapping function again. We want to avoid that, because it means that the
-   * function can execute twice.
-   *
-   * ```ts
-   * useVisibleTask$(() => {
-   *   runHeavyLogic(); // This will be called again if the QRL of `computedOrCustomSerializer` is not resolved.
-   *   console.log(computedOrCustomSerializer.value); // Throw a promise if QRL not resolved and execute visible task again.
-   * });
-   * ```
-   */
-  private $scheduleInitialQRLs$(): void {
-    if (this.$initialQRLs$) {
-      for (const qrl of this.$initialQRLs$) {
-        const match = /#(.*)_([a-zA-Z0-9]+)(\[|$)/.exec(qrl);
-        if (match) {
-          preload(match[2], 0.3);
-        }
-      }
-      this.$initialQRLs$ = null;
-    }
-  }
 }

packages/qwik/src/core/qwik.core.api.md

@@ -221,8 +221,6 @@ class DomContainer extends _SharedContainer implements ClientContainer {
     // (undocumented)
     $getObjectById$: (id: number | string) => unknown;
     // (undocumented)
-    $initialQRLs$: Array<string> | null;
-    // (undocumented)
     $instanceHash$: string;
     // (undocumented)
     $journal$: VNodeJournal;

packages/qwik/src/core/shared/serdes/preprocess-state.ts

@@ -1,3 +1,6 @@
+import { isServer } from '@qwik.dev/core/build';
+// @ts-expect-error we don't have types for the preloader
+import { p as preload } from '@qwik.dev/core/preloader';
 import type { DeserializeContainer } from '../types';
 import { TypeIds } from './constants';
 
@@ -95,14 +98,49 @@ export function preprocessState(data: unknown[], container: DeserializeContainer
     data[index + 1] = object;
   };
 
+  const toPreload: number[] | undefined = isServer ? undefined : [];
   for (let i = 0; i < data.length; i += 2) {
     if (isRootDeepRef(data[i] as TypeIds, data[i + 1])) {
       processRootRef(i);
     } else if (isForwardRefsMap(data[i] as TypeIds)) {
       container.$forwardRefs$ = data[i + 1] as number[];
-    } else if (isPreloadQrlType(data[i] as TypeIds)) {
+    } else if (!isServer && isPreloadQrlType(data[i] as TypeIds)) {
+      // preload QRLs are always serialized as strings with chunk and symbol ids
       const qrl = data[i + 1] as string;
-      (container.$initialQRLs$ ||= []).push(qrl);
+      const chunkIdx = Number(qrl.split(' ')[0]);
+      toPreload!.push(chunkIdx);
+    }
+  }
+
+  /**
+   * Preloads QRLs that are defined in the state data as `PreloadQRL`.
+   *
+   * This is done because when computed and custom serializer QRLs are called they need QRL to work.
+   * If the QRL is not resolved at this point, it will be resolved by throwing a promise and
+   * rerunning the whole wrapping function again. We want to avoid that, because it means that the
+   * function can execute twice.
+   *
+   * ```ts
+   * useVisibleTask$(() => {
+   *   runHeavyLogic(); // This will be called again if the QRL of `computedOrCustomSerializer` is not resolved.
+   *   console.log(computedOrCustomSerializer.value); // Throw a promise if QRL not resolved and execute visible task again.
+   * });
+   * ```
+   */
+  if (!isServer) {
+    for (const idx of toPreload!) {
+      // we preload the chunk instead of the symbol so it also works in dev
+      const chunkType = data[idx * 2] as TypeIds;
+      let chunk: string;
+      if (chunkType === TypeIds.Plain) {
+        chunk = data[idx * 2 + 1] as string;
+      } else if (chunkType === TypeIds.RootRef) {
+        const refIdx = data[idx * 2 + 1] as number;
+        chunk = data[refIdx * 2 + 1] as string;
+      } else {
+        continue;
+      }
+      preload(chunk, 0.3);
     }
   }
 }

packages/qwik/src/core/shared/serdes/serdes.public.ts

@@ -82,7 +82,6 @@ export function _createDeserializeContainer(
     $storeProxyMap$: new WeakMap(),
     element: null,
     $forwardRefs$: null,
-    $initialQRLs$: null,
     $scheduler$: null,
   };
   preprocessState(stateData, container);

packages/qwik/src/core/shared/serdes/serialize.ts

@@ -30,7 +30,7 @@ import { Fragment } from '../jsx/jsx-runtime';
 import { isPropsProxy } from '../jsx/props-proxy';
 import { Slot } from '../jsx/slot.public';
 import type { QRLInternal } from '../qrl/qrl-class';
-import { isQrl } from '../qrl/qrl-utils';
+import { isQrl, isSyncQrl } from '../qrl/qrl-utils';
 import { _OWNER, _UNINITIALIZED } from '../utils/constants';
 import { EMPTY_ARRAY, EMPTY_OBJ } from '../utils/flyweight';
 import { ELEMENT_ID, ELEMENT_PROPS, QBackRefs } from '../utils/markers';
@@ -121,8 +121,10 @@ export async function serialize(serializationContext: SerializationContext): Pro
   };
 
   const addPreloadQrl = (qrl: QRLInternal) => {
-    preloadQrls.add(qrl);
-    serializationContext.$addRoot$(qrl);
+    if (!isSyncQrl(qrl)) {
+      preloadQrls.add(qrl);
+      serializationContext.$addRoot$(qrl);
+    }
   };
 
   const getSeenRefOrOutput = (
@@ -241,6 +243,7 @@ export async function serialize(serializationContext: SerializationContext): Pro
             if (getSeenRefOrOutput(value, index)) {
               const [chunk, symbol, captureIds] = qrlToString(serializationContext, value, true);
               let data: string | number;
+              let type: TypeIds;
               if (chunk !== '') {
                 // not a sync QRL, replace all parts with string references
                 data = `${$addRoot$(chunk)} ${$addRoot$(symbol)}${captureIds ? ' ' + captureIds.join(' ') : ''}`;
@@ -254,11 +257,12 @@ export async function serialize(serializationContext: SerializationContext): Pro
                 } else {
                   qrlMap.set(data, value);
                 }
+                type = preloadQrls.has(value) ? TypeIds.PreloadQRL : TypeIds.QRL;
               } else {
                 data = Number(symbol);
+                type = TypeIds.QRL;
               }
 
-              const type = preloadQrls.has(value) ? TypeIds.PreloadQRL : TypeIds.QRL;
               output(type, data);
             }
           } else if (isQwikComponent(value)) {

packages/qwik/src/core/shared/types.ts

@@ -11,7 +11,6 @@ export interface DeserializeContainer {
   $state$?: unknown[];
   $storeProxyMap$: ObjToProxyMap;
   $forwardRefs$: Array<number> | null;
-  $initialQRLs$: Array<string> | null;
   readonly $scheduler$: Scheduler | null;
 }