Merge pull request #8012 from QwikDev/v2-serdes-dedupe

perf(serdes): improve deduping

Author: wmertens

packages/docs/src/routes/api/qwik-testing/api.json

@@ -74,7 +74,7 @@
         }
       ],
       "kind": "Function",
-      "content": "```typescript\nexport declare function domRender(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n}): Promise<{\n    document: Document;\n    container: import(\"@qwik.dev/core/internal\").ClientContainer;\n    vNode: _VNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ document: Document; container: import(\"@qwik.dev/core/internal\").ClientContainer; vNode: \\_VNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
+      "content": "```typescript\nexport declare function domRender(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n}): Promise<{\n    document: Document;\n    container: import(\"@qwik.dev/core\").ClientContainer;\n    vNode: _VNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ document: Document; container: import(\"@qwik.dev/core\").ClientContainer; vNode: \\_VNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx",
       "mdFile": "core.domrender.md"
     },

packages/docs/src/routes/api/qwik-testing/index.mdx

@@ -121,7 +121,7 @@ export declare function domRender(
   },
 ): Promise<{
   document: Document;
-  container: import("@qwik.dev/core/internal").ClientContainer;
+  container: import("@qwik.dev/core").ClientContainer;
   vNode: _VNode | null;
   getStyles: () => Record<string, string | string[]>;
 }>;
@@ -168,7 +168,7 @@ _(Optional)_
 
 **Returns:**
 
-Promise&lt;\{ document: Document; container: import("@qwik.dev/core/internal").ClientContainer; vNode: \_VNode \| null; getStyles: () =&gt; Record&lt;string, string \| string[]&gt;; }&gt;
+Promise&lt;\{ document: Document; container: import("@qwik.dev/core").ClientContainer; vNode: \_VNode \| null; getStyles: () =&gt; Record&lt;string, string \| string[]&gt;; }&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx)
 

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

@@ -1,6 +1,5 @@
-import { component$, useSignal, useComputed$, useStyles$ } from '@qwik.dev/core';
-import { _getDomContainer } from '@qwik.dev/core/internal';
-import { _dumpState, _preprocessState, _vnode_toString } from '@qwik.dev/core/internal';
+import { component$, useComputed$, useSignal, useStyles$ } from '@qwik.dev/core';
+import { _getDomContainer, _vnode_toString } from '@qwik.dev/core/internal';
 import type { DocumentHead } from '@qwik.dev/router';
 
 export default component$(() => {

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

@@ -6,9 +6,9 @@ import { assertTrue } from '../shared/error/assert';
 import { QError, qError } from '../shared/error/error';
 import { ERROR_CONTEXT, isRecoverable } from '../shared/error/error-handling';
 import type { QRL } from '../shared/qrl/qrl.public';
-import { _SharedContainer } from '../shared/shared-container';
-import { getObjectById, inflateQRL, parseQRL, preprocessState } from '../shared/serdes/index';
 import { wrapDeserializerProxy } from '../shared/serdes/deser-proxy';
+import { _inflateQRL, getObjectById, parseQRL, preprocessState } from '../shared/serdes/index';
+import { _SharedContainer } from '../shared/shared-container';
 import { QContainerValue, type HostElement, type ObjToProxyMap } from '../shared/types';
 import { EMPTY_ARRAY } from '../shared/utils/flyweight';
 import {
@@ -60,7 +60,7 @@ import {
   vnode_newUnMaterializedElement,
   type VNodeJournal,
 } from './vnode';
-import type { ElementVNode, VirtualVNode, VNode } from './vnode-impl';
+import type { ElementVNode, VNode, VirtualVNode } from './vnode-impl';
 
 /** @public */
 export function getDomContainer(element: Element | VNode): IClientContainer {
@@ -165,7 +165,7 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
   }
 
   parseQRL<T = unknown>(qrl: string): QRL<T> {
-    return inflateQRL(this, parseQRL(qrl)) as QRL<T>;
+    return _inflateQRL(this, parseQRL(qrl)) as QRL<T>;
   }
 
   handleError(err: any, host: VNode | null): void {

packages/qwik/src/core/internal.ts

@@ -55,9 +55,8 @@ export { _fnSignal } from './shared/qrl/inlined-fn';
 export { _SharedContainer } from './shared/shared-container';
 export {
   _deserialize,
-  dumpState as _dumpState,
+  _dumpState,
   preprocessState as _preprocessState,
-  _serializationWeakRef,
   _serialize,
 } from './shared/serdes/index';
 export { _CONST_PROPS, _IMMUTABLE, _VAR_PROPS, _UNINITIALIZED } from './shared/utils/constants';

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

@@ -10,7 +10,6 @@ import { isBrowser } from '@qwik.dev/core/build';
 import { isDev } from '@qwik.dev/core/build';
 import { isServer } from '@qwik.dev/core/build';
 import { QRL as QRL_2 } from './qrl.public';
-import type { StreamWriter as StreamWriter_2 } from '@qwik.dev/core';
 
 // @public
 export const $: <T>(expression: T) => QRL<T>;
@@ -900,11 +899,6 @@ export const _run: (...args: unknown[]) => ValueOrPromise<unknown>;
 // @public (undocumented)
 export type SerializationStrategy = 'never' | 'always';
 
-// Warning: (ae-forgotten-export) The symbol "SerializationWeakRef" needs to be exported by the entry point index.d.ts
-//
-// @internal (undocumented)
-export const _serializationWeakRef: (obj: unknown) => SerializationWeakRef;
-
 // @internal
 export function _serialize(data: unknown[]): Promise<string>;
 

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

@@ -1,7 +1,6 @@
-import { TypeIds, _constants, type Constants, parseQRL, resolvers } from './index';
 import type { DomContainer } from '../../client/dom-container';
+import { ensureMaterialized, vnode_getNode, vnode_isVNode, vnode_locate } from '../../client/vnode';
 import type { ElementVNode, VNode } from '../../client/vnode-impl';
-import { vnode_isVNode, ensureMaterialized, vnode_getNode, vnode_locate } from '../../client/vnode';
 import { AsyncComputedSignalImpl } from '../../reactive-primitives/impl/async-computed-signal-impl';
 import { ComputedSignalImpl } from '../../reactive-primitives/impl/computed-signal-impl';
 import { SerializerSignalImpl } from '../../reactive-primitives/impl/serializer-signal-impl';
@@ -14,12 +13,15 @@ import { createResourceReturn } from '../../use/use-resource';
 import { Task } from '../../use/use-task';
 import { componentQrl } from '../component.public';
 import { qError, QError } from '../error/error';
-import { JSXNodeImpl, createPropsProxy } from '../jsx/jsx-runtime';
+import { createPropsProxy, JSXNodeImpl } from '../jsx/jsx-runtime';
 import type { DeserializeContainer } from '../types';
 import { _UNINITIALIZED } from '../utils/constants';
+import { _constants, TypeIds, type Constants } from './constants';
 import { needsInflation } from './deser-proxy';
+import { createQRLWithBackChannel } from './qrl-to-string';
 
-export const pendingStoreTargents = new Map<object, { t: TypeIds; v: unknown }>();
+export const resolvers = new WeakMap<Promise<any>, [Function, Function]>();
+export const pendingStoreTargets = new Map<object, { t: TypeIds; v: unknown }>();
 
 export const allocate = (container: DeserializeContainer, typeId: number, value: unknown): any => {
   switch (typeId) {
@@ -46,13 +48,17 @@ export const allocate = (container: DeserializeContainer, typeId: number, value:
     case TypeIds.Object:
       return {};
     case TypeIds.QRL:
-    case TypeIds.PreloadQRL:
-      const qrl =
-        typeof value === 'number'
-          ? // root reference
-            container.$getObjectById$(value)
-          : value;
-      return parseQRL(qrl as string);
+    case TypeIds.PreloadQRL: {
+      if (typeof value === 'string') {
+        const data = value.split(' ').map(Number);
+        const chunk = container.$getObjectById$(data[0]) as string;
+        const symbol = container.$getObjectById$(data[1]) as string;
+        const captureIds = data.length > 2 ? data.slice(2) : null;
+        return createQRLWithBackChannel(chunk, symbol, captureIds);
+      } else {
+        return createQRLWithBackChannel('', String(value));
+      }
+    }
     case TypeIds.Task:
       return new Task(-1, -1, null!, null!, null!, null);
     case TypeIds.Resource: {
@@ -96,7 +102,7 @@ export const allocate = (container: DeserializeContainer, typeId: number, value:
       const storeValue = allocate(container, t, v);
       const store = getOrCreateStore(storeValue, StoreFlags.NONE, container as DomContainer);
       if (needsInflation(t)) {
-        pendingStoreTargents.set(store, { t, v });
+        pendingStoreTargets.set(store, { t, v });
       }
       // We must store the reference so it doesn't get deserialized again in inflate()
       data[0] = TypeIds.Plain;

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

@@ -0,0 +1,87 @@
+import { isDomRef } from './serialization-context';
+import { isStore, getStoreTarget } from '../../reactive-primitives/impl/store';
+import { untrack } from '../../use/use-core';
+import { isTask } from '../../use/use-task';
+import { isQwikComponent } from '../component.public';
+import { isPropsProxy, isJSXNode } from '../jsx/jsx-runtime';
+import { isQrl } from '../qrl/qrl-utils';
+import { _UNINITIALIZED } from '../utils/constants';
+import { isPromise } from '../utils/promises';
+
+export const canSerialize = (value: any, seen: WeakSet<any> = new WeakSet()): boolean => {
+  if (
+    value == null ||
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    typeof value === 'bigint'
+  ) {
+    return true;
+  } else if (typeof value === 'object') {
+    if (seen.has(value)) {
+      return true;
+    }
+    seen.add(value);
+    const proto = Object.getPrototypeOf(value);
+    if (isStore(value)) {
+      value = getStoreTarget(value);
+    }
+    if (proto == Object.prototype) {
+      for (const key in value) {
+        // if the value is a props proxy, then sometimes we could create a component-level subscription,
+        // so we should call untrack here to avoid tracking the value
+        if (
+          !canSerialize(
+            untrack(() => value[key]),
+            seen
+          )
+        ) {
+          return false;
+        }
+      }
+      return true;
+    } else if (proto == Array.prototype) {
+      for (let i = 0; i < value.length; i++) {
+        if (!canSerialize(value[i], seen)) {
+          return false;
+        }
+      }
+      return true;
+    } else if (isTask(value)) {
+      return true;
+    } else if (isPropsProxy(value)) {
+      return true;
+    } else if (isPromise(value)) {
+      return true;
+    } else if (isJSXNode(value)) {
+      return true;
+    } else if (value instanceof Error) {
+      return true;
+    } else if (value instanceof URL) {
+      return true;
+    } else if (value instanceof Date) {
+      return true;
+    } else if (value instanceof RegExp) {
+      return true;
+    } else if (value instanceof URLSearchParams) {
+      return true;
+    } else if (value instanceof FormData) {
+      return true;
+    } else if (value instanceof Set) {
+      return true;
+    } else if (value instanceof Map) {
+      return true;
+    } else if (value instanceof Uint8Array) {
+      return true;
+    } else if (isDomRef?.(value)) {
+      return true;
+    }
+  } else if (typeof value === 'function') {
+    if (isQrl(value) || isQwikComponent(value)) {
+      return true;
+    }
+  } else if (value === _UNINITIALIZED) {
+    return true;
+  }
+  return false;
+};

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

@@ -0,0 +1,149 @@
+import { NEEDS_COMPUTATION, STORE_ALL_PROPS } from '../../reactive-primitives/types';
+import { Fragment } from '../jsx/jsx-runtime';
+import { Slot } from '../jsx/slot.public';
+import { _UNINITIALIZED } from '../utils/constants';
+import { EMPTY_ARRAY, EMPTY_OBJ } from '../utils/flyweight';
+
+export const enum Constants {
+  Undefined,
+  Null,
+  True,
+  False,
+  EmptyString,
+  EMPTY_ARRAY,
+  EMPTY_OBJ,
+  NEEDS_COMPUTATION,
+  STORE_ALL_PROPS,
+  UNINITIALIZED,
+  Slot,
+  Fragment,
+  NaN,
+  PositiveInfinity,
+  NegativeInfinity,
+  MaxSafeInt,
+  // used for close fragment
+  AlmostMaxSafeInt,
+  MinSafeInt,
+}
+
+// Used for allocate, make sure they are in sync with Constants
+export const _constants = [
+  undefined,
+  null,
+  true,
+  false,
+  '',
+  EMPTY_ARRAY,
+  EMPTY_OBJ,
+  NEEDS_COMPUTATION,
+  STORE_ALL_PROPS,
+  _UNINITIALIZED,
+  Slot,
+  Fragment,
+  NaN,
+  Infinity,
+  -Infinity,
+  Number.MAX_SAFE_INTEGER,
+  Number.MAX_SAFE_INTEGER - 1,
+  Number.MIN_SAFE_INTEGER,
+] as const;
+
+// Used for dumpState, make sure they are in sync with Constants
+export const _constantNames = [
+  'undefined',
+  'null',
+  'true',
+  'false',
+  "''",
+  'EMPTY_ARRAY',
+  'EMPTY_OBJ',
+  'NEEDS_COMPUTATION',
+  'STORE_ALL_PROPS',
+  '_UNINITIALIZED',
+  'Slot',
+  'Fragment',
+  'NaN',
+  'Infinity',
+  '-Infinity',
+  'MAX_SAFE_INTEGER',
+  'MAX_SAFE_INTEGER-1',
+  'MIN_SAFE_INTEGER',
+] as const;
+
+export const enum TypeIds {
+  Plain,
+  RootRef,
+  ForwardRef,
+  /** Undefined, null, true, false, NaN, +Inf, -Inf, Slot, Fragment */
+  Constant,
+  Array,
+  Object,
+  URL,
+  Date,
+  Regex,
+  VNode,
+  /// ^ single-digit types ^
+  RefVNode,
+  BigInt,
+  URLSearchParams,
+  ForwardRefs,
+  /// All types below will be inflate()d
+  Error,
+  Promise,
+  Set,
+  Map,
+  Uint8Array,
+  QRL,
+  PreloadQRL,
+  Task,
+  Resource,
+  Component,
+  Signal,
+  WrappedSignal,
+  ComputedSignal,
+  AsyncComputedSignal,
+  SerializerSignal,
+  Store,
+  FormData,
+  JSXNode,
+  PropsProxy,
+  SubscriptionData,
+}
+
+// Used for dumpState, make sure they are in sync with TypeIds
+export const _typeIdNames = [
+  'Plain',
+  'RootRef',
+  'ForwardRef',
+  'Constant',
+  'Array',
+  'Object',
+  'URL',
+  'Date',
+  'Regex',
+  'VNode',
+  'RefVNode',
+  'BigInt',
+  'URLSearchParams',
+  'ForwardRefs',
+  'Error',
+  'Promise',
+  'Set',
+  'Map',
+  'Uint8Array',
+  'QRL',
+  'PreloadQRL',
+  'Task',
+  'Resource',
+  'Component',
+  'Signal',
+  'WrappedSignal',
+  'ComputedSignal',
+  'AsyncComputedSignal',
+  'SerializerSignal',
+  'Store',
+  'FormData',
+  'JSXNode',
+  'PropsProxy',
+  'SubscriptionData',
+];