create a vdom output type

[rgbkrk]

This implements a renderer for declarative "VDOM" style output (HTML as JSON if you will). It's not even really vdom, as you could do this with document.createElement and enough patience. Maybe sprinkling some morph dom on top. This was first done in nteract and made to be non-specific to React (phosphor should be able to handle it too). Similar PR in nteract: nteract/nteract#1866

application/vdom.v1+json Specification

The top level element must be a VDOMEl as described below:

type VDOMEl = {
  tagName: string, // Must be a valid HTMLElement (web components 👌🏻)
  children: VDOMNode,
  attributes: Object,
};

type VDOMNode = VDOMEl | string | Array<VDOMNode> | null;

Goals

The eventual goal is to be able to do display updates that keep DOM state (only changing the nodes that matter):

Here's it working in classic:

/cc @willingc @gnestor @lheagy @mariusvniekerk @Carreau @jackparmer

[rgbkrk]

nteractors have started making a vdom library as well which I'd love to collaborate on others with. It allows users to write code that has resulting output like below:

VDOM(
    div([
        h1('Now Incredibly Declarative'),
        p(['Can you believe we wrote ', bold('all this from scratch'), '?']),
        img(src="https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"),
        p('SO COOL!'),
    ])
)

Now Incredibly Declarative

Can you believe we wrote all this from scratch?

SO COOL!

[rgbkrk]

Where I'm a bit stuck is in figuring out how I could do update displays without nuking the previous element (thereby losing the actual benefit of the stateful display).

[rgbkrk]

By the way, does anyone know if there's a way to get preact as a UMD bundle we can work with require.js here rather than the assumed global that is used in other parts of the code here?

[rgbkrk]

@minrk can you think of a good strategy for how I could make update less destructive? I was confused here about the difference between toinsert and element. It looks like element is tracked, and I could reuse it for preact.render.

[takluyver]

Awesome!

[minrk]

I was confused here about the difference between toinsert and element

Generally toinsert refers to an element that's specifically not on the page yet. If you have a good idea for how to update elements in-place, that would be cool. The way it is right now, we do it in two steps:

1. create a new output
2. replace the original output via jQuery after everything else is done

I don't see an obvious way to handle the update-in-place, other than to possibly push down the possible replacement logic into each append_foo method, rather than letting them assume they always populate a new element, as they do now.

[rgbkrk]

other than to possibly push down the possible replacement logic into each append_foo method, rather than letting them assume they always populate a new element, as they do now

Ok, at first I worried about doing that. Perhaps that's ok though. I could end up making updates for the other mimetypes smoother as a result.

[minrk]

I think it's fine if you figure out a way to make it work.

[rgbkrk]

As requested by @mpacer, here's a GIF showing what happens when the update happens to the VDOM output.

I'd actually love to get this in as is then work on the update semantics later so that I'm not changing any base APIs within the outputs.

[rgbkrk]

FAIL ".CodeMirror-code" still did not exist in 10000ms
#    type: uncaughtError
#    file: /home/travis/build/jupyter/notebook/notebook/tests/base/utils.js
#    error: ".CodeMirror-code" still did not exist in 10000ms
#    stack: not provided

Is this normal?

[rgbkrk]

Looks like this is happening on master too:

 {master %=} kylek@nfml-83G ~/code/src/github.com/jupyter/notebook$ python -m notebook.jstest notebook

Test group: notebook
Running tests with notebook directory '/var/folders/kd/cylz4mhs1_9cpsjh0_c_gzfr0000gn/T/tmp_YfpvE'
Test file: /Users/kylek/code/src/github.com/jupyter/notebook/notebook/tests/notebook/attachments.js
Page Error
  Message:   Error: Script error for "components/moment/locale/en-us"
             http://requirejs.org/docs/errors.html#scripterror
  Call stack:
    line 140 of static/components/requirejs/require.js in defaultOnError
    line 544 of static/components/requirejs/require.js in onError
    line 1732 of static/components/requirejs/require.js in onScriptError
Timeout for http://localhost:8888/a@b/
Is the notebook server running?
FAIL ".CodeMirror-code" still did not exist in 10000ms
#    type: uncaughtError
#    file: /Users/kylek/code/src/github.com/jupyter/notebook/notebook/tests/notebook/attachments.js
#    error: ".CodeMirror-code" still did not exist in 10000ms

#    stack: not provided

[rgbkrk]

This is looking like components/moment/locale/en-us is missing:

$ ls notebook/static/components/moment/locale/en-*
notebook/static/components/moment/locale/en-au.js notebook/static/components/moment/locale/en-ca.js notebook/static/components/moment/locale/en-gb.js

Fixed in #2866.

[rgbkrk]

Fun fact time! It turns out you don't have to do camelCased property names for CSS. It will accept either of them if they match the CSS name:

[rgbkrk]

If possible, I'd like to merge this one as is and not worry about the display updates portion of this as it works just not as well as it could.

[gnestor]

@rgbkrk Sorry I haven't had a chance to review this yet! If you can resolve the Travis issue, then feel free to merge. Otherwise, I will have a look at it tonight 👍

[rgbkrk]

Yeah I have no idea how to resolve the issue on Travis. I'm getting a timeout error for the codemirror cell.

[gnestor]

I can't figure out this Travis issue, but I can reproduce it by running the tests locally...

@minrk Any idea what might be going on here? https://travis-ci.org/jupyter/notebook/jobs/279802361#L816

[rgbkrk]

I have this sneaky feeling that preact isn't defined on the page by the time this runs and it is currently bombing out. Perhaps the precursor to this PR should be to get react from bower (and trim out the current preact usage), then I'll have this PR do the right thing.

[Madhu94]

I hope this hasn't been dropped. What needs to be done to move this along ? @rgbkrk @gnestor

[rgbkrk]

The main blocker is the test suite, which has been a work in progress to migrate off of the old slimerjs / phantomjs setup. cc @takluyver

[rgbkrk]

At least to me, I'm dropping this PR for the time being pending classic notebook being brought to the future with npm packages. As it stands, most development is invested in all the newer frontends whether nteract or jupyterlab (or Hydrogen, Neutron, etc.). Totally cool if you bring it forward. 😄

Looking at the commits, I'd prefer to have this package be based on @nteract/transform-vdom.

[blink1073]

Closing, since we ended up not switching to npm packages. Thanks for experimenting with this @rgbkrk!