WIP: serialization weak ref

Co-authored-by: Wout Mertens <[email protected]>

Author: Varixo

eslint.config.js

@@ -104,7 +104,7 @@ export default tseslint.config(
     },
   },
   {
-    files: ['packages/docs/**/*.{ts,tsx}'],
+    files: ['packages/docs/demo/**/*.{ts,tsx}'],
     rules: {
       'no-console': 'off',
     },

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

@@ -324,20 +324,6 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts",
       "mdFile": "core.computedfn.md"
     },
-    {
-      "name": "ComputedReturnType",
-      "id": "computedreturntype",
-      "hierarchy": [
-        {
-          "name": "ComputedReturnType",
-          "id": "computedreturntype"
-        }
-      ],
-      "kind": "TypeAlias",
-      "content": "```typescript\nexport type ComputedReturnType<T> = T extends Promise<infer T> ? ReadonlySignal<T> : ReadonlySignal<T>;\n```\n**References:** [ReadonlySignal](#readonlysignal)",
-      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts",
-      "mdFile": "core.computedreturntype.md"
-    },
     {
       "name": "ComputedSignal",
       "id": "computedsignal",
@@ -686,20 +672,6 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts",
       "mdFile": "core.h.md"
     },
-    {
-      "name": "HTMLElementAttrs",
-      "id": "htmlelementattrs",
-      "hierarchy": [
-        {
-          "name": "HTMLElementAttrs",
-          "id": "htmlelementattrs"
-        }
-      ],
-      "kind": "Interface",
-      "content": "```typescript\nexport interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase<HTMLElement> \n```\n**Extends:** HTMLAttributesBase, FilterBase&lt;HTMLElement&gt;",
-      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts",
-      "mdFile": "core.htmlelementattrs.md"
-    },
     {
       "name": "implicit$FirstArg",
       "id": "implicit_firstarg",
@@ -1332,7 +1304,7 @@
         }
       ],
       "kind": "TypeAlias",
-      "content": "The DOM props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikHTMLElements = {\n    [tag in keyof HTMLElementTagNameMap]: Augmented<HTMLElementTagNameMap[tag], SpecialAttrs[tag]> & HTMLElementAttrs & QwikAttributes<HTMLElementTagNameMap[tag]>;\n};\n```\n**References:** [HTMLElementAttrs](#htmlelementattrs)<!-- -->, [QwikAttributes](#qwikattributes)",
+      "content": "The DOM props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikHTMLElements = {\n    [tag in keyof HTMLElementTagNameMap]: Augmented<HTMLElementTagNameMap[tag], SpecialAttrs[tag]> & HTMLElementAttrs & QwikAttributes<HTMLElementTagNameMap[tag]>;\n};\n```\n**References:** [QwikAttributes](#qwikattributes)",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts",
       "mdFile": "core.qwikhtmlelements.md"
     },
@@ -1472,7 +1444,7 @@
         }
       ],
       "kind": "TypeAlias",
-      "content": "The SVG props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikSVGElements = {\n    [K in keyof Omit<SVGElementTagNameMap, keyof HTMLElementTagNameMap>]: SVGProps<SVGElementTagNameMap[K]>;\n};\n```\n**References:** [SVGProps](#svgprops)",
+      "content": "The SVG props without plain handlers, for use inside functions\n\n\n```typescript\nexport type QwikSVGElements = {\n    [K in keyof Omit<SVGElementTagNameMap, keyof HTMLElementTagNameMap>]: SVGProps<SVGElementTagNameMap[K]>;\n};\n```",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts",
       "mdFile": "core.qwiksvgelements.md"
     },
@@ -2022,20 +1994,6 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts",
       "mdFile": "core.svgattributes.md"
     },
-    {
-      "name": "SVGProps",
-      "id": "svgprops",
-      "hierarchy": [
-        {
-          "name": "SVGProps",
-          "id": "svgprops"
-        }
-      ],
-      "kind": "Interface",
-      "content": "```typescript\nexport interface SVGProps<T extends Element> extends SVGAttributes, QwikAttributes<T> \n```\n**Extends:** [SVGAttributes](#svgattributes)<!-- -->, [QwikAttributes](#qwikattributes)<!-- -->&lt;T&gt;",
-      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts",
-      "mdFile": "core.svgprops.md"
-    },
     {
       "name": "sync$",
       "id": "sync_",
@@ -2144,7 +2102,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Creates a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.\n\nThe function must be synchronous and must not have any side effects.\n\n\n```typescript\nuseComputed$: <T>(qrl: ComputedFn<T>) => ComputedReturnType<T>\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\nqrl\n\n\n</td><td>\n\n[ComputedFn](#computedfn)<!-- -->&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[ComputedReturnType](#computedreturntype)<!-- -->&lt;T&gt;",
+      "content": "Creates a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.\n\nThe function must be synchronous and must not have any side effects.\n\n\n```typescript\nuseComputed$: <T>(qrl: ComputedFn<T>) => ComputedReturnType<T>\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\nqrl\n\n\n</td><td>\n\n[ComputedFn](#computedfn)<!-- -->&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nComputedReturnType&lt;T&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts",
       "mdFile": "core.usecomputed_.md"
     },

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

@@ -353,17 +353,6 @@ export type ComputedFn<T> = () => T;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
 
-## ComputedReturnType
-
-```typescript
-export type ComputedReturnType<T> =
-  T extends Promise<infer T> ? ReadonlySignal<T> : ReadonlySignal<T>;
-```
-
-**References:** [ReadonlySignal](#readonlysignal)
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
-
 ## ComputedSignal
 
 A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.
@@ -1344,16 +1333,6 @@ any[]
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/jsx-runtime.ts)
 
-## HTMLElementAttrs
-
-```typescript
-export interface HTMLElementAttrs extends HTMLAttributesBase, FilterBase<HTMLElement>
-```
-
-**Extends:** HTMLAttributesBase, FilterBase&lt;HTMLElement&gt;
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts)
-
 ## implicit$FirstArg
 
 Create a `____$(...)` convenience method from `___(...)`.
@@ -2597,7 +2576,7 @@ export type QwikHTMLElements = {
 };
 ```
 
-**References:** [HTMLElementAttrs](#htmlelementattrs), [QwikAttributes](#qwikattributes)
+**References:** [QwikAttributes](#qwikattributes)
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts)
 
@@ -2795,8 +2774,6 @@ export type QwikSVGElements = {
 };
 ```
 
-**References:** [SVGProps](#svgprops)
-
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts)
 
 ## QwikSymbolEvent
@@ -8132,16 +8109,6 @@ _(Optional)_
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts)
 
-## SVGProps
-
-```typescript
-export interface SVGProps<T extends Element> extends SVGAttributes, QwikAttributes<T>
-```
-
-**Extends:** [SVGAttributes](#svgattributes), [QwikAttributes](#qwikattributes)&lt;T&gt;
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-generated.ts)
-
 ## sync$
 
 Extract function into a synchronously loadable QRL.
@@ -8481,7 +8448,7 @@ qrl
 </tbody></table>
 **Returns:**
 
-[ComputedReturnType](#computedreturntype)&lt;T&gt;
+ComputedReturnType&lt;T&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-computed.ts)
 

packages/qwik-router/src/middleware/request-handler/resolve-request-handlers.ts

@@ -1,5 +1,4 @@
 import { type QRL } from '@qwik.dev/core';
-import { SerializerSymbol, _UNINITIALIZED } from '@qwik.dev/core/internal';
 import type { Render, RenderToStringResult } from '@qwik.dev/core/server';
 import { QACTION_KEY, QFN_KEY, QLOADER_KEY } from '../../runtime/src/constants';
 import {
@@ -598,9 +597,6 @@ export async function renderQData(requestEv: RequestEvent) {
   for (const loaderId in allLoaders) {
     const loader = allLoaders[loaderId];
     if (loader !== null) {
-      if (typeof loader === 'object' && SerializerSymbol in loader) {
-        (loader as any)[SerializerSymbol] = undefined;
-      }
       loaders[loaderId] = loader;
     }
   }

packages/qwik-router/src/middleware/request-handler/response-page.ts

@@ -1,5 +1,3 @@
-import { SerializerSymbol } from '@qwik.dev/core';
-import { _UNINITIALIZED } from '@qwik.dev/core/internal';
 import type { QwikRouterEnvData } from '../../runtime/src/types';
 import {
   getRequestLoaders,
@@ -35,14 +33,6 @@ export function getQwikRouterServerData(requestEv: RequestEvent) {
 
   const loaders = getRequestLoaders(requestEv);
 
-  // shallow serialize loaders data
-  for (const key in loaders) {
-    const loader = loaders[key];
-    if (typeof loader === 'object' && loader !== null) {
-      (loader as any)[SerializerSymbol] = () => _UNINITIALIZED;
-    }
-  }
-
   return {
     url: reconstructedUrl.href,
     requestHeaders,

packages/qwik-router/src/runtime/src/contexts.ts

@@ -10,7 +10,8 @@ import type {
   RouteStateInternal,
 } from './types';
 
-export const RouteStateContext = /*#__PURE__*/ createContextId<Record<string, any>>('qc-s');
+export const RouteStateContext =
+  /*#__PURE__*/ createContextId<Record<string, Signal<unknown>>>('qc-s');
 
 export const ContentContext = /*#__PURE__*/ createContextId<ContentState>('qc-c');
 export const ContentInternalContext =

packages/qwik-router/src/runtime/src/qwik-router-component.tsx

@@ -19,8 +19,13 @@ import {
 import {
   _getContextElement,
   _getQContainerElement,
+  _UNINITIALIZED,
   _waitUntilRendered,
+  SerializerSymbol,
+  _serializationWeakRef,
   type _ElementVNode,
+  createSignal,
+  type Signal,
 } from '@qwik.dev/core/internal';
 import { clientNavigate } from './client-navigate';
 import { CLIENT_DATA_CACHE, Q_ROUTE } from './constants';
@@ -145,7 +150,21 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
     { deep: false }
   );
   const navResolver: { r?: () => void } = {};
-  const loaderState = useStore(env.response.loaders, { deep: false });
+  const loaderState = Object.fromEntries(
+    Object.entries(env.response.loaders).map(([k, v]) => {
+      const value = createSignal(v);
+      return [k, value];
+    })
+  );
+
+  (loaderState as any)[SerializerSymbol] = async (o: Record<string, unknown>) => {
+    const resultPs = Object.entries(o).map(async ([k, val]) => {
+      const v = await val;
+      return [k, _serializationWeakRef(v)];
+    });
+    return Object.fromEntries(await Promise.all(resultPs));
+  };
+
   const routeInternal = useSignal<RouteStateInternal>({
     type: 'initial',
     dest: url,
@@ -278,7 +297,7 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
         let scroller = document.getElementById(QWIK_ROUTER_SCROLLER);
         if (!scroller) {
           scroller = document.getElementById(QWIK_CITY_SCROLLER);
-          if (scroller) {
+          if (scroller && isDev) {
             console.warn(
               `Please update your scroller ID to "${QWIK_ROUTER_SCROLLER}" as "${QWIK_CITY_SCROLLER}" is deprecated and will be removed in V3`
             );
@@ -460,12 +479,17 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
           }
 
           const loaders = clientPageData?.loaders;
-          const win = window as ClientSPAWindow;
           if (loaders) {
-            Object.assign(loaderState, loaders);
+            for (const [key, value] of Object.entries(loaders)) {
+              const signal = loaderState[key] as Signal<unknown> | typeof _UNINITIALIZED;
+              if (signal && signal !== _UNINITIALIZED) {
+                signal.value = value;
+              }
+            }
           }
           CLIENT_DATA_CACHE.clear();
 
+          const win = window as ClientSPAWindow;
           if (!win._qRouterSPA) {
             // only add event listener once
             win._qRouterSPA = true;
@@ -698,7 +722,7 @@ export const QwikRouterMockProvider = component$<QwikRouterMockProps>((props) =>
     { deep: false }
   );
 
-  const loaderState = useSignal({});
+  const loaderState = {};
   const routeInternal = useSignal<RouteStateInternal>({ type: 'initial', dest: url });
 
   const goto: RouteNavigate =

packages/qwik-router/src/runtime/src/server-functions.ts

@@ -15,7 +15,6 @@ import {
   _getContextElement,
   _getContextEvent,
   _serialize,
-  _wrapStore,
   _useInvokeContext,
   _UNINITIALIZED,
 } from '@qwik.dev/core/internal';
@@ -209,15 +208,17 @@ export const routeLoaderQrl = ((
     If your are managing reusable logic or a library it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
     For more information check: https://qwik.dev/docs/re-exporting-loaders/`);
     }
-    const data = untrack(() => state[id]);
-    if (data === _UNINITIALIZED && isBrowser) {
+    const loaderData = untrack(() => state[id].value);
+    if (loaderData === _UNINITIALIZED && isBrowser) {
+      // Request the loader data from the server and throw the Promise
+      // so the client can load it synchronously.
       throw loadClientData(location.url, iCtx.$hostElement$, {
         loaderIds: [id],
-      }).then((data) => {
-        state[id] = data?.loaders[id];
+      }).then((clientData) => {
+        state[id].value = clientData?.loaders[id];
       });
     }
-    return _wrapStore(state, id);
+    return state[id];
   }
   loader.__brand = 'server_loader' as const;
   loader.__qrl = loaderQrl;

packages/qwik-router/src/runtime/src/types.ts

@@ -401,6 +401,7 @@ export type GetValidatorType<VALIDATOR extends TypedDataValidator> =
 export interface CommonLoaderActionOptions {
   readonly id?: string;
   readonly validation?: DataValidator[];
+  readonly persist?: boolean;
 }
 
 /** @public */