noSerialize usage

[tepid sonnet]

I'm struggling to grasp the applications of "noSerialize," and I'm keen on gaining a better understanding of when it should be employed. The documentation mentions the following: "For instance, a reference to a third-party library like Monaco editor will invariably require 'noSerialize()' because it is non-serializable." Can someone explain why this is the case?

Is it safe to say that, in most cases, only primitive data types are considered 'serializable,' while imports from external libraries are not?

If that's the case, does it make sense to utilize a 'noSerialize' signal? Such as :

interface State {
scene: NoSerialize<THREE.Scene>,
camera: NoSerialize<THREE.PerspectiveCamera>,
renderer: NoSerialize<THREE.WebGLRenderer>,
}

export default component$(() => {
const bg = useSignal<HTMLCanvasElement>()
const state = useStore<State>({
scene: noSerialize(undefined),
camera: noSerialize(undefined),
renderer: noSerialize(undefined),
})

useClientEffect$(() => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: bg.value,
});

state.scene = noSerialize(scene);
state.camera = noSerialize(camera);
state.renderer = noSerialize(renderer);

}

[limpid delta]

I think you are right. More complex things like classes are not serializable. (Hopefully there will be the possibility of custom serializer). The thing i guess is mostly about server side rendering and then transferring state to the browser. So if you use a nonSerializable on the browser only there should be no difference. Thats my understanding of why signals and stores want to be serializable

[tepid sonnet]

Thank you for your input. What I'm actually aiming to achieve is using the store called "state" as a context for child components. However, I need to declare THREE.js elements inside the 'useVisibleTask$.' I believe this approach is valid, but do you have any other tips or suggestions that could assist me in achieving this?

[limpid delta]

I don't fully understand what you mean by achieving, maybe some code could provide more clarity. But it sounds all good.

This is e.g. how i lazy load a third party lib like Three.js on the browser only when needed: useVisibleTask$(async () => { if (!window['cytoscape']) await import('../../../../node_modules/cytoscape/dist/cytoscape.umd'); const cytoscape = window['cytoscape'];