Handle putting JSX elements into observables

[rileymiller]

Hey! Been doing some exploring into legend and we're super excited about it!

During our initial exploration I wanted to try and convert our dialog system to use Legend since it's pretty straightforward and ran into some issues (probably due to my misunderstanding of how legend works).

I tried two approaches, the first works great but I was curious if there's a way to get approach #2 to work since it's similar to how our team has used observables in React w/ our hand-rolled solution in the past.

Approach #1 - Working
Using observable
Here's a link to the sandbox: https://codesandbox.io/s/legend-w-observable-osyjnj

Was able to import the dialogObs created through the observable fn and access the observable directly inside any child components, didn't run into any issues w/ this.

Approach #2 - Borked
Using useObservable

Link to the sandbox: https://codesandbox.io/s/legend-useobservable-uwj1cu?file=/src/App.tsx:85-98

Wanted to see if we could pass down the dialogObs directly through a line of child components via props and it's throwing a TypeError:

'getOwnPropertyDescriptor' on proxy: trap reported non-configurability for property '$$typeof' which is either non-existent or configurable in the proxy target

Is there an issue w/ the way I'm trying to use useObservable or is there something else going on?

[jmeistrich]

Oh wow, I had not considered putting ReactNodes directly into observables. I would approach it by putting a lighter object that describes the dialog into the observable, like { title, type, info } etc... Then have your Dialog component use those details to render. Something like this: https://codesandbox.io/s/legend-w-observable-forked-o4zzxp?file=/src/App.tsx

That said though, the actual problem is when you call set, legend-state iterates through all child nodes to see if there's any listeners to notify. Since the JSX object is quite large that's not great, but the crashing problem in the useObservable version is it includes an observable in a prop.

I think the fix is to skip proxying ReactNodes and just treat them as opaque objects. I will try to get a fix into an update soon. For now I'd suggest avoiding putting ReactNodes directly into observables.

[rileymiller]

Ah gotcha, thanks for taking a look at this!

[jmeistrich]

Version 0.18 will handle this better and also show console warnings. There's some other big changes in 0.18 so we're testing it in 0.18.0@next first, but it's looking good so you can try it now if you'd like, or 0.18 should be released shortly.