[thi.ng/atom] - Extending classes for Observablehq

[den1k]

I extended umbrella/atom to work idiomatically with observable (e.g. viewof and reactive cells), result here - this now works with deeply nested objects!

extended Atom code here

But I'm struggling to get cursors to work, I think because I can't pass my the extended Atom class in the Cursor impl: https://github.com/thi-ng/umbrella/blob/master/packages/atom/src/cursor.ts#L97

If successful, I'd love to do the same for rstream and derived libs!

[den1k]

It looks like extending reactive parts of umbrella w/ the EventTarget interface will do the trick: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget - reactiveness comes from dispatchEvent which needs to run whenever values are updated, e.g. for update, reset, resetIn in atoms and next in streams and subscriptions.

Can this be done without overriding/redefining existing methods on Atom and Stream?

[den1k]

Some progress with Stream's but couldn't get Subscription's to work

https://beta.observablehq.com/d/d18d32f9c8545c65

[postspectacular]

Hi @den1k - happy new year & apols for slower than usual response...

I have to admit from those examples, I'm not sure what you're trying to do here, maybe also because both examples are also broken due to JS errors in the notebook...

I guess, my main issue is that I'm still not familiar how observable's dataflow model works in detail (e.g. no idea what this viewof construct does). All I remember is that they're forming a DAG of promises to achieve reactivity... any pointers for further reading?

For atoms/views/cursors can't you just use .addWatch() and dispatch any required custom events from there (can you also explain what ? Likewise, for streams/subscriptions, why not just .subscribe() to (or .transform()) them and again add additional event logic there (instead of extending classes). You could publish some small wrapper function/syntax sugar in one of your notebooks and then re-use it...

In general, maybe the issues you're running into have to do with trying to bridge/shoehorn two different approaches into one? Your current solution seems overly complex to me - but again (see above), I'm really not too familiar with observable, so might misunderstand...

[den1k]

HNY! Fixed the first notebook... bundle.run is not very reliable.

The error in the second notebook is intentional, since I got stuck at that point.

Re: viewof here's a notebook explaining it:https://beta.observablehq.com/@mbostock/a-brief-introduction-to-viewof

You're right I could just use addWatch or subscribe/transform (and I tried that) but observable is all about seeing values update in realtime. Currently I can declare an atom or stream but would need to deref it to see changes. Or a separate cell with an add-watch, as well as one for every cursor and derived subscription. This gets very verbose over time.

By implementing EventTarget which I did successfully for atoms I can use viewof to get the atom, and otherwise automatically get the deref'd value of it, all while seeing values update reactively in the UI.

[den1k]

Here is Atom, extended: https://beta.observablehq.com/@den1k/atom

The main difference is that this.dispatchEvent (part of the EventTarget interface) is called during updates (e.g. a.resetIn). This triggers a UI update in observable.

So I'm wondering whether it would be problematic / undesired to add these to umbrella's reactive classes or if there's a way to optionally extend these classes since the above is a hack.

[xtuc]

HNY! Fixed the first notebook... bundle.run is not very reliable.

What's the issue you're seeing on bundle.run?

[den1k]

@xtuc not sure this is the same issue, but packages simply don't seem to resolve sometimes: https://talk.observablehq.com/t/bundle-run-errors-breaking-notebooks/1050