[all] Usage in beta.observablehq.com?

[postspectacular]

Discussion based on this tweet by @den1k:

do you think umbrella would play well in https://beta.observablehq.com/ ? since it has a reactive (but I think promise based) update model straightforward interpolation of HTML / svg, e.g. html<span>foo</span>

[den1k]

I'm simultaneously exploring umbrella, observablehq and getting back into javascript, where many es6 features are still opaque to me. Here's why I'm curious to combine umbrella and observable:

• [hiccup/hiccup-svg/hdom] it's possible but not common to use react on observable. most html is built stringing HTML strings together by hand. maybe hdom could capture some attention there experiment
  • I couldn't get updates to work yet
• observable's reactive bindings to vars and umbrella's various data display / viz abilities seem like a great fit. only caveat, I couldn't figure out how to get observable to update when not the entire value of the var is reset but only, say, a key on an object.

I'd love to see a small HTML app using hiccup with resolve-map or hdom / rstream is necessary.

[postspectacular]

Thanks @den1k for this initial example. Until tonight, I'd not yet used Observable myself, but your example really helped me to get started and I've created a little notebook based on your attempt.

I still have yet to figure how to actually do DOM diffing in their setup, but this might not be possible until we know how to get a handle on the actual DOM element. At the moment, I can only recreate the DOM completely using hdom.createDOM(), but it'd be nice to figure out how to get a cell's DOM element directly. Once we know, we should then be able to just use the transducers-hdom package to plug in the reactive/on-demand UI diffing.

[postspectacular]

I cracked it: The trick was to define a cell which just pre-creates a blank DOM element and then use this cell's value for the updateUI() transducer. I've created another fork of that notebook and added more comments there...

[postspectacular]

Just added a more minimal scaffolding notebook: https://beta.observablehq.com/@postspectacular/thi-ng-umbrella-scaffold

[mbostock]

Here’s another approach to diffing using this (the previous value returned by a cell):

{
  const tree = hdom.normalizeTree(root);
  const element = this ? (hdom.diffElement(this.parentNode, this._tree, tree), this) : hdom.createDOM(null, tree);
  element._tree = tree;
  return element;
}

Or, as a reusable function:

function hdomify(element, root) {
  const tree = hdom.normalizeTree(root);
  if (element) hdom.diffElement(element.parentNode, element._tree, tree);
  else element = hdom.createDOM(null, tree);
  element._tree = tree;
  return element;
}

And then to use:

hdomify(this, root)

[postspectacular]

Nice one & thank, @mbostock! - this was too trivial for me to consider :) Will update the notebook later today...

[den1k]

Nice @postspectacular & @mbostock. I made a fork with the hdomify update and using hdom for the slider: https://beta.observablehq.com/@den1k/thi-ng-umbrella-scaffold

the big open question for me is, how can we get observable to update when we're not re-assigning the var (e.g. mutable x = 10) but instead only a key on it (e.g. mutable x.foo = 10 doesn't seem to work)? In other words, how can we get reactive updates when working with data structures?

[postspectacular]

Yeah, I don't know how to get this work either, but am sure it's possible. Need to study @jashkenas' input widgets. Anyhow, forked your latest and made some interim updates:

https://beta.observablehq.com/@postspectacular/thi-ng-umbrella-scaffold-w-hdom-context

[postspectacular]

Okay, one hack later and I've got a version which kinda works (incl. undo/redo history of user interactions). Didn't fork, just updated the same notebook:

https://beta.observablehq.com/@postspectacular/thi-ng-umbrella-scaffold-w-hdom-context

[den1k]

nice hack @postspectacular