feat: use custom serialization

Author: Varixo

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

@@ -1,4 +1,5 @@
-import type { QRL } from '@qwik.dev/core';
+import { type QRL } from '@qwik.dev/core';
+import { _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 {
@@ -30,7 +31,6 @@ import {
 import { getQwikRouterServerData } from './response-page';
 import type { QwikSerializer, RequestEvent, RequestEventBase, RequestHandler } from './types';
 import { IsQData, QDATA_JSON } from './user-response';
-import { _UNINITIALIZED } from '@qwik.dev/core/internal';
 
 export const resolveRequestHandlers = (
   serverPlugins: RouteModule[] | undefined,

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

@@ -1,3 +1,5 @@
+import { SerializerSymbol } from '@qwik.dev/core';
+import { _UNINITIALIZED } from '@qwik.dev/core/internal';
 import type { QwikRouterEnvData } from '../../runtime/src/types';
 import {
   getRequestLoaders,
@@ -30,6 +32,21 @@ export function getQwikRouterServerData(requestEv: RequestEvent) {
     reconstructedUrl.protocol = protocol;
   }
 
+  const loaders = getRequestLoaders(requestEv);
+
+  // shallow serialize loaders data
+  (loaders as any)[SerializerSymbol] = (loaders: Record<string, unknown>) => {
+    const result: Record<string, unknown> = {};
+    for (const key in loaders) {
+      const loader = loaders[key];
+      if (typeof loader === 'object' && loader !== null) {
+        (loader as any)[SerializerSymbol] = () => _UNINITIALIZED;
+      }
+      result[key] = _UNINITIALIZED;
+    }
+    return result;
+  };
+
   return {
     url: reconstructedUrl.href,
     requestHeaders,
@@ -45,7 +62,7 @@ export function getQwikRouterServerData(requestEv: RequestEvent) {
       loadedRoute: getRequestRoute(requestEv),
       response: {
         status: status(),
-        loaders: getRequestLoaders(requestEv),
+        loaders,
         action,
         formData,
       },

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

@@ -20,7 +20,6 @@ import {
   _getContextElement,
   _getQContainerElement,
   _waitUntilRendered,
-  _weakSerialize,
   type _ElementVNode,
 } from '@qwik.dev/core/internal';
 import { clientNavigate } from './client-navigate';
@@ -146,7 +145,7 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
     { deep: false }
   );
   const navResolver: { r?: () => void } = {};
-  const loaderState = useStore(_weakSerialize(env.response.loaders), { deep: false });
+  const loaderState = useStore(env.response.loaders, { deep: false });
   const routeInternal = useSignal<RouteStateInternal>({
     type: 'initial',
     dest: url,

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

@@ -7,13 +7,16 @@ import {
   type ValueOrPromise,
   untrack,
   isBrowser,
+  isDev,
+  isServer,
 } from '@qwik.dev/core';
 import {
   _deserialize,
   _getContextElement,
   _getContextEvent,
   _serialize,
   _wrapStore,
+  _useInvokeContext,
   _UNINITIALIZED,
 } from '@qwik.dev/core/internal';
 
@@ -54,9 +57,6 @@ import type {
 } from './types';
 import { useAction, useLocation, useQwikRouterEnv } from './use-functions';
 
-import { isDev, isServer } from '@qwik.dev/core';
-import { _useInvokeContext } from '@qwik.dev/core/internal';
-
 import type { FormSubmitCompletedDetail } from './form-component';
 import { deepFreeze } from './utils';
 import { loadClientData } from './use-endpoint';

packages/qwik/src/core/api.md

@@ -1773,9 +1773,6 @@ export function _walkJSX(ssr: SSRContainer, value: JSXOutput, options: {
     parentComponentFrame: ISsrComponentFrame | null;
 }): Promise<void>;
 
-// @internal (undocumented)
-export const _weakSerialize: <T extends object>(input: T) => Partial<T>;
-
 // @public
 export function withLocale<T>(locale: string, fn: () => T): T;
 

packages/qwik/src/core/internal.ts

@@ -7,7 +7,6 @@ export { _wrapSignal, _wrapProp, _wrapStore } from './signal/signal-utils';
 export { _restProps } from './shared/utils/prop';
 export { _IMMUTABLE, _UNINITIALIZED } from './shared/utils/constants';
 export { _CONST_PROPS, _VAR_PROPS } from './shared/utils/constants';
-export { _weakSerialize } from './shared/utils/serialize-utils';
 export { verifySerializable as _verifySerializable } from './shared/utils/serialize-utils';
 export {
   _getContextElement,
@@ -21,6 +20,7 @@ export { _fnSignal } from './shared/qrl/inlined-fn';
 export type {
   ContainerElement as _ContainerElement,
   VNode as _VNode,
+  VNodeFlags as _VNodeFlags,
   VirtualVNode as _VirtualVNode,
   TextVNode as _TextVNode,
   QDocument as _QDocument,

packages/qwik/src/core/shared/shared-serialization.ts

@@ -56,7 +56,7 @@ import { isElement, isNode } from './utils/element';
 import { EMPTY_ARRAY, EMPTY_OBJ } from './utils/flyweight';
 import { ELEMENT_ID } from './utils/markers';
 import { isPromise } from './utils/promises';
-import { SerializerSymbol, fastSkipSerialize, fastWeakSerialize } from './utils/serialize-utils';
+import { SerializerSymbol, fastSkipSerialize } from './utils/serialize-utils';
 import { type ValueOrPromise } from './utils/types';
 
 const deserializedProxyMap = new WeakMap<object, unknown[]>();
@@ -400,16 +400,6 @@ const inflate = (
       effectData.data.$isConst$ = (data as any[])[1];
       break;
     }
-    case TypeIds.WeakObject: {
-      const objectKeys = data as string[];
-      target = Object.fromEntries(
-        objectKeys.map((v) =>
-          // initialize values with null
-          [v, _UNINITIALIZED]
-        )
-      );
-      break;
-    }
     default:
       throw qError(QError.serializeErrorNotImplemented, [typeId]);
   }
@@ -472,7 +462,6 @@ const allocate = (container: DeserializeContainer, typeId: number, value: unknow
     case TypeIds.Array:
       return wrapDeserializerProxy(container as any, value as any[]);
     case TypeIds.Object:
-    case TypeIds.WeakObject:
       return {};
     case TypeIds.QRL:
       const qrl = container.$getObjectById$(value as number);
@@ -827,20 +816,15 @@ export const createSerializationContext = (
         vnode_isVNode(obj) ||
         (typeof FormData !== 'undefined' && obj instanceof FormData) ||
         // Ignore the no serialize objects
-        fastSkipSerialize(obj as object) ||
-        // only keys will be serialized
-        fastWeakSerialize(obj)
+        fastSkipSerialize(obj as object)
       ) {
         // ignore
       } else if (obj instanceof Error) {
         discoveredValues.push(...Object.values(obj));
       } else if (isStore(obj)) {
         const target = getStoreTarget(obj)!;
         const effects = getStoreHandler(obj)!.$effects$;
-        if (!fastWeakSerialize(target)) {
-          discoveredValues.push(target);
-        }
-        discoveredValues.push(effects);
+        discoveredValues.push(target, effects);
 
         for (const prop in target) {
           const propValue = (target as any)[prop];
@@ -936,8 +920,6 @@ export const createSerializationContext = (
           }
         );
         promises.push(obj);
-      } else if (obj instanceof SubscriptionData) {
-        discoveredValues.push(obj.data);
       } else if (Array.isArray(obj)) {
         discoveredValues.push(...obj);
       } else if (isSerializerObj(obj)) {
@@ -1225,8 +1207,6 @@ function serialize(serializationContext: SerializationContext): void {
     } else if (isObjectLiteral(value)) {
       if (Array.isArray(value)) {
         output(TypeIds.Array, value);
-      } else if (fastWeakSerialize(value)) {
-        output(TypeIds.WeakObject, Object.keys(value));
       } else {
         const out: any[] = [];
         for (const key in value) {
@@ -1744,7 +1724,6 @@ export const enum TypeIds {
   JSXNode,
   PropsProxy,
   SubscriptionData,
-  WeakObject,
 }
 export const _typeIdNames = [
   'RootRef',
@@ -1779,7 +1758,6 @@ export const _typeIdNames = [
   'JSXNode',
   'PropsProxy',
   'SubscriptionData',
-  'WeakObject',
 ];
 
 export const enum Constants {

packages/qwik/src/core/shared/shared-serialization.unit.ts

@@ -1,4 +1,4 @@
-import { $, _weakSerialize, component$, noSerialize } from '@qwik.dev/core';
+import { $, component$, noSerialize } from '@qwik.dev/core';
 import { describe, expect, it, vi } from 'vitest';
 import { _fnSignal, _wrapProp } from '../internal';
 import { SubscriptionData, type SignalImpl } from '../signal/signal';
@@ -63,15 +63,16 @@ describe('shared-serialization', () => {
         6 Constant EMPTY_OBJ
         7 Constant NEEDS_COMPUTATION
         8 Constant STORE_ALL_PROPS
-        9 Constant Slot
-        10 Constant Fragment
-        11 Constant NaN
-        12 Constant Infinity
-        13 Constant -Infinity
-        14 Constant MAX_SAFE_INTEGER
-        15 Constant MAX_SAFE_INTEGER-1
-        16 Constant MIN_SAFE_INTEGER
-        (76 chars)"
+        9 Constant _UNINITIALIZED
+        10 Constant Slot
+        11 Constant Fragment
+        12 Constant NaN
+        13 Constant Infinity
+        14 Constant -Infinity
+        15 Constant MAX_SAFE_INTEGER
+        16 Constant MAX_SAFE_INTEGER-1
+        17 Constant MIN_SAFE_INTEGER
+        (81 chars)"
       `);
     });
     it(title(TypeIds.Number), async () => {
@@ -484,7 +485,7 @@ describe('shared-serialization', () => {
       expect(await dump(new SubscriptionData({ $isConst$: true, $scopedStyleIdPrefix$: null })))
         .toMatchInlineSnapshot(`
         "
-        0 EffectData [
+        0 SubscriptionData [
           Constant null
           Constant true
         ]

packages/qwik/src/core/shared/utils/serialize-utils.ts

@@ -90,7 +90,6 @@ const _verifySerializable = <T>(
   return value;
 };
 const noSerializeSet = /*#__PURE__*/ new WeakSet<object>();
-const weakSerializeSet = /*#__PURE__*/ new WeakSet<object>();
 
 export const shouldSerialize = (obj: unknown): boolean => {
   if (isObject(obj) || isFunction(obj)) {
@@ -103,10 +102,6 @@ export const fastSkipSerialize = (obj: object): boolean => {
   return typeof obj === 'object' && obj && (NoSerializeSymbol in obj || noSerializeSet.has(obj));
 };
 
-export const fastWeakSerialize = (obj: object): boolean => {
-  return weakSerializeSet.has(obj);
-};
-
 /**
  * Returned type of the `noSerialize()` function. It will be TYPE or undefined.
  *
@@ -142,20 +137,6 @@ export const noSerialize = <T extends object | undefined>(input: T): NoSerialize
   return input as any;
 };
 
-/** @internal */
-export const _weakSerialize = <T extends object>(input: T): Partial<T> => {
-  weakSerializeSet.add(input);
-  if (isObject(input)) {
-    for (const key in input) {
-      const value = input[key];
-      if (isObject(value)) {
-        noSerializeSet.add(value);
-      }
-    }
-  }
-  return input;
-};
-
 /**
  * If an object has this property, it will not be serialized. Use this on prototypes to avoid having
  * to call `noSerialize()` on every object.

starters/apps/qwikrouter-test/src/routes/loaders-serialization/index.tsx

@@ -2,7 +2,7 @@ import { component$, useSignal } from "@qwik.dev/core";
 import { routeLoader$ } from "@qwik.dev/router";
 
 export const useTestLoader = routeLoader$(async () => {
-  return { test: "some test value", notUsed: "should not serialize this" };
+  return { test: "some test value", abcd: "should not serialize this" };
 });
 
 export default component$(() => {
@@ -21,5 +21,10 @@ export default component$(() => {
 
 export const Child = component$(() => {
   const testSignal = useTestLoader();
-  return <div id="prop">{testSignal.value.test}</div>;
+  return (
+    <>
+      <div id="prop1">{testSignal.value.test}</div>
+      <div id="prop2">{testSignal.value.abcd}</div>
+    </>
+  );
 });