RFC: useSerialized$/createSerialized$ + SerializeSymbol

[wmertens]

Champion

@wmertens

What's the motivation for this proposal?

Problems you are trying to solve:

• third-party libraries with non-serializable objects

---

Proposed Solution / Feature

What do you propose?

1. a Symbol prop, SerializerSymbol, you can attach to an object that will serialize the object
2. a Signal that holds the object and will lazily recreate it when needed

Code examples

Providing its own data:

class MyCustomSerializable {
  constructor(public n: number) {}
  inc() {
    this.n++;
  }
}
const Cmp = component$(() => {
  const custom = useSerialized$({
    deserialize: (n) => new MyCustomSerializable(n),
    serialize: (obj) => obj.n,
    initial: 3
  );
  return <div onClick$={() => custom.value.inc()}>{custom.value.n}</div>;
});

Getting the data from a signal:

import {makeThing} from 'things'

const serializer = (thing) => thing.toJSON()

const Cmp = component$(() => {
  const myData = useSignal(3);
  const custom = useSerialized$(() => ({
    deserialize() { return makeThing(myData.value); }
    update(current) {
      current.update(myData.value);
      return current;
    }
  }));
  return <div onClick$={() => custom.value.doThing()}>{custom.value.stuff}</div>;
});

In detail

• you must provide a deserialize function that gets the data and the current object. It gets called to create the value the first time, to update when signals change, and to recreate the value with serialized data
• useSerialized$() {deserialize, initial, update, serialize} that will be executed on the server as well as the browser to create the object, and it returns a Signal
  • the Signal works exactly like ComputedSignal, except that it will always be marked to-calculate in the browser, and it passes the serialized value + the previous value to the compute function
• bonus: you can add [SerializeSymbol]: (obj) => serialize(obj) to any object that needs custom serialization (but not deser)
  • note that this can also used on regular objects to do housekeeping before serialization
  • Promise results are awaited so you can even e.g. save a reference number to a db

---

PRs/ Links / References

QwikDev/qwik#7223

[GrandSchtroumpf]

I think this is a great addition to Qwik. On a devX point of view I find it a little difficult to understand because serialize & deserialize don't have the same mecanism (serialize -> SerializeSymbol / deserialize -> useSerialized$).
Maybe something like that :

const custom = useSerialized(new MyCustomClass(), {
  serialize: $((instance) => instance.toJSON()),
  deserialize: $((json) => MyCustomClass.fromJSON(json))
});

Also scoping it into a use hook limit its usage inside components, while it could be useful outside too. It won't be lazy, but as long as the dev is aware of that, I think it would be a good tool.

import { MemoryDB } from 'third-party';
export const db = serialize(new MemoryDB(), {
  serialize: (instance) => instance.getState(),
  deserialize: (state) => new MemoryDB(state)
});

// Create API
export const addFoo = $(async (foo: Foo) => {
  await db.store('foo').add(foo);
  // Do additionaly logic here
})

[wmertens]

The first interface can work (the serializer doesn't need to be qrl but can be). I think I'd still like to keep the symbol interface for cleanup before serialization etc.

For the use issue, there's also createSerialized$ which you can use anywhere, so that's not an issue.

[wmertens]

Oh but the creation needs to be a function and the deserializer does the same, so it could be like

const createSerialized$((data) => new MyCustomClass(data), (obj) => obj.toJSON())

, with the serializer optional.

EDIT: actually this would mean keeping a a WeakMap for the serialization functions, instead of the single prototype object with the serializer. So I'm not a fan.

[GrandSchtroumpf]

I'm not sure to understand how the createSerialized$ works. Could you share a compete example ?
Let's say I want to create a MemoryDB instance on the server and pick it up in the client, how would it work ?

import { MemoryDB } from 'third-party';

// Create global instance that I can access in both server & client
export const db = ... ;

// Use instance in either server or client
export const addFoo = $(async (foo: Foo) => {
  // db.add(...)
})

[wmertens]

That won't work, the db connection won't be initialized in the client.

addFoo would be a method of an object you create, and you'd use it like signal.value.addFoo, and it would create its db connection if needed.

[GrandSchtroumpf]

Let's say MemoryDB is something that doesn't require any connection, something dummy, but unserializable, like that :

class MemoryDB {
  state = {};
  add(store, value) {
    const id = randomUUID();
    this.state[store] ||= {};
    this.state[store][id] = value;
  }
  get(store, id) {
    return this.state[store][id];
  }
  ...
}

How can I use createSerialized$ to serialize it on the server and deserialize it on the client ?
(I understand I could achieve that with useStore, it's just to have some code example to better understand how it would work.)

[wmertens]

@GrandSchtroumpf something like

class MemoryDB {
  constructor(public state = {}) {}
  add(store, value) {
    const id = randomUUID();
    this.state[store] ||= {};
    this.state[store][id] = value;
  }
  get(store, id) {
    return this.state[store][id];
  }
  [SerializeSymbol]() { return this.state }
  ...
}

const dbSig = createSerialized$((data) => new MemoryDB(data))