feat: custom serialization #7223

wmertens · 2025-01-02T12:26:30Z

This PR adds symbols to mark objects as (no/yes)serializable via symbols instead of via a Set, adds a symbol prop that will get called on serialization for custom serialization, and provides a new Signal type that lazily manages a non-serializable value.

Note that this is basically the same as useComputed$, except that it is invalidated during SSR so that when the value gets read on the client it will always run the compute function.

Also note that useComputed$ now passes the previous value to the compute function, to keep the implementation compact. This seems like it might be useful, should we document this?

Everything works, looking for comments on implementation, naming etc.

changeset-bot · 2025-01-02T12:26:33Z

🦋 Changeset detected

Latest commit: 9070c30

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@qwik.dev/core	Major
eslint-plugin-qwik	Major
@qwik.dev/react	Major
@qwik.dev/router	Major
create-qwik	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Varixo · 2025-01-02T13:43:24Z

Looks great, but what about deserialization those objects?

wmertens · 2025-01-02T20:03:33Z

Looks great, but what about deserialization those objects?

That's what the createSerialized$ does

thejackshelton · 2025-01-02T22:33:56Z

Does this mean we might be able to serialize functions from other libraries, like vanilla js?

wmertens · 2025-01-03T07:27:47Z

@Varixo @thejackshelton gaah I had forgotten to push the actual commit 😅

wmertens · 2025-01-03T07:29:55Z

Does this mean we might be able to serialize functions from other libraries, like vanilla js?

Yes exactly. You need to add a symbol prop that serializes the value and then provide a deserializer that will get called lazily.

pkg-pr-new · 2025-01-03T08:10:03Z

Open in Stackblitz

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@7223

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@7223

npm i https://pkg.pr.new/QwikDev/qwik/eslint-plugin-qwik@7223

npm i https://pkg.pr.new/QwikDev/qwik/create-qwik@7223

commit: 9070c30

github-actions · 2025-01-03T08:10:21Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
qwik-docs	✅ Ready (View Log)	Visit Preview	`9070c30`

packages/qwik/src/core/use/use-serializer.ts

packages/qwik/src/core/tests/use-computed.spec.tsx

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

FEAT: `NoSerializeSymbol`: objects that have this defined will not be serialized FEAT: `SerializerSymbol`: objects that have this defined as a function will get it called with the object as a parameter during serialization. The function should return the data that should be serialized. Use this to remove cached data, consolidate things etc.

Varixo · 2025-02-07T16:13:34Z

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

+            : obj instanceof ComputedSignal &&
+                !(obj instanceof SerializerSignal) &&
+                (obj.$invalid$ || fastSkipSerialize(obj))
              ? NEEDS_COMPUTATION
              : obj.$untrackedValue$;
        if (v !== NEEDS_COMPUTATION) {
-          discoveredValues.push(v);
+          if (obj instanceof SerializerSignal) {
+            promises.push(
+              (obj.$computeQrl$ as any as QRLInternal<SerializerArg<any, any>>)
+                .resolve()
+                .then((arg) => {
+                  let data;
+                  if ((arg as any).serialize) {
+                    data = (arg as any).serialize(v);
+                  }
+                  if (data === undefined) {
+                    data = NEEDS_COMPUTATION;
+                  }
+                  serializationResults.set(obj, data);
+                  discoveredValues.push(data);
+                })
+            );
+          } else {
+            discoveredValues.push(v);
+          }


I wonder if we could organise it somehow? It is very complicated right now.
What about doing just

if (obj instanceof WrappedSignal) { } else if (obj instanceof ComputedSignal) { } else if ...

thejackshelton

Very thorough PR. Awesome work ⚡

thejackshelton · 2025-02-06T16:53:39Z

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

@@ -4386,7 +4447,7 @@ Creates a computed signal which is calculated from the given function. A compute
 The function must be synchronous and must not have any side effects.

 ```typescript
-useComputed$: <T>(qrl: import("./use-computed").ComputedFn<T>) => T extends Promise<any> ? never : import("..").ReadonlySignal<T>
+useComputed$: <T>(qrl: ComputedFn<T>) => T extends Promise<any> ? never : ReadonlySignal<T>


Any reason on why the useComputed$ type changes here with useSerializer$?

thejackshelton · 2025-02-07T16:10:51Z

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

-            : obj instanceof ComputedSignal && (obj.$invalid$ || fastSkipSerialize(obj))
+            : obj instanceof ComputedSignal &&
+                !(obj instanceof SerializerSignal) &&
+                (obj.$invalid$ || fastSkipSerialize(obj))


The nested ternaries here were a bit difficult to understand.

It looks to me like computed signal now checks if it's not a serializer signal, if so then if the object is invalid, or can skip serialization, then it needs computation. otherwise it grabs the untracked values.

Also what is v? The current value?

thejackshelton · 2025-02-07T17:09:04Z

packages/qwik/src/core/signal/signal.ts

+       *
+       * This function must not return a promise.
+       */
+      deserialize: (data: S | undefined, previous: T | undefined) => T;


So on first render, the previous param is -> initial data / inital (3rd argument param of useSerializer$)?

thejackshelton · 2025-02-07T17:10:46Z

packages/qwik/src/core/signal/signal.ts

+       *
+       * If you do not provide it, the object will be serialized as `undefined`.
+       */
+      serialize?: (customObject: T) => S | Promise<S>;


What's an example of when you may need the deserialize function but not the serialize function?

thejackshelton-kunaico

wrong account 😓

wmertens force-pushed the custom-serialize branch from aca1de8 to 47942f4 Compare January 3, 2025 07:27

wmertens force-pushed the custom-serialize branch from 47942f4 to 9009520 Compare January 3, 2025 07:56

Varixo reviewed Jan 3, 2025

View reviewed changes

packages/qwik/src/core/use/use-serializer.ts Outdated Show resolved Hide resolved

packages/qwik/src/core/tests/use-computed.spec.tsx Outdated Show resolved Hide resolved

packages/qwik/src/core/shared/shared-serialization.ts Show resolved Hide resolved

wmertens force-pushed the custom-serialize branch from 9009520 to 103e3c1 Compare January 4, 2025 10:44

wmertens mentioned this pull request Jan 7, 2025

RFC: useSerialized$/createSerialized$ + SerializeSymbol QwikDev/qwik-evolution#204

Open

wmertens force-pushed the custom-serialize branch 2 times, most recently from 165ac6d to 804f01d Compare January 27, 2025 23:32

wmertens added 7 commits February 6, 2025 16:15

chore(core signals): cleanup

e7991f6

feat(core): use/createSerialized$

dee9c04

feat(custom serdes): allow Promise serialization

1badea0

chore(serialized$): clean up/types

ed307f3

fix(core): correct diagnostics type

be14361

chore(serdes): rename serialize(d=>r), new api

9070c30

wmertens force-pushed the custom-serialize branch from 804f01d to 9070c30 Compare February 6, 2025 15:50

wmertens marked this pull request as ready for review February 6, 2025 15:50

wmertens requested review from a team as code owners February 6, 2025 15:50

Varixo reviewed Feb 7, 2025

View reviewed changes

thejackshelton approved these changes Feb 7, 2025

View reviewed changes

thejackshelton-kunaico suggested changes Feb 7, 2025

View reviewed changes

thejackshelton-kunaico approved these changes Feb 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: custom serialization #7223

feat: custom serialization #7223

wmertens commented Jan 2, 2025 •

edited

Loading

changeset-bot bot commented Jan 2, 2025 •

edited

Loading

Varixo commented Jan 2, 2025

wmertens commented Jan 2, 2025

thejackshelton commented Jan 2, 2025

wmertens commented Jan 3, 2025

wmertens commented Jan 3, 2025

pkg-pr-new bot commented Jan 3, 2025 •

edited

Loading

github-actions bot commented Jan 3, 2025 •

edited

Loading

Varixo Feb 7, 2025

thejackshelton left a comment

thejackshelton Feb 6, 2025

thejackshelton Feb 7, 2025

thejackshelton Feb 7, 2025

thejackshelton Feb 7, 2025

thejackshelton Feb 7, 2025

thejackshelton-kunaico left a comment •

edited

Loading

feat: custom serialization #7223

Are you sure you want to change the base?

feat: custom serialization #7223

Conversation

wmertens commented Jan 2, 2025 • edited Loading

changeset-bot bot commented Jan 2, 2025 • edited Loading

🦋 Changeset detected

Varixo commented Jan 2, 2025

wmertens commented Jan 2, 2025

thejackshelton commented Jan 2, 2025

wmertens commented Jan 3, 2025

wmertens commented Jan 3, 2025

pkg-pr-new bot commented Jan 3, 2025 • edited Loading

github-actions bot commented Jan 3, 2025 • edited Loading

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Varixo Feb 7, 2025

Choose a reason for hiding this comment

thejackshelton left a comment

Choose a reason for hiding this comment

thejackshelton Feb 6, 2025

Choose a reason for hiding this comment

thejackshelton Feb 7, 2025

Choose a reason for hiding this comment

thejackshelton Feb 7, 2025

Choose a reason for hiding this comment

thejackshelton Feb 7, 2025

Choose a reason for hiding this comment

thejackshelton Feb 7, 2025

Choose a reason for hiding this comment

thejackshelton-kunaico left a comment • edited Loading

Choose a reason for hiding this comment

wmertens commented Jan 2, 2025 •

edited

Loading

changeset-bot bot commented Jan 2, 2025 •

edited

Loading

pkg-pr-new bot commented Jan 3, 2025 •

edited

Loading

github-actions bot commented Jan 3, 2025 •

edited

Loading

thejackshelton-kunaico left a comment •

edited

Loading