Using virtual DOM for progressive enhancement

config.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",
    "core-js": "npm:[email protected]",
    "redux": "npm:[email protected]",
    "udc": "npm:[email protected]",
    "vdom-virtualize": "npm:[email protected]",
    "virtual-dom": "npm:[email protected]",
    "vtree-select": "npm:[email protected]",
    "github:jspm/[email protected]": {
      "assert": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "buffer": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "events": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "path-browserify": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "process": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "stream-browserify": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "util": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "util": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "base64-js": "npm:[email protected]",
      "child_process": "github:jspm/[email protected]",
      "fs": "github:jspm/[email protected]",
      "ieee754": "npm:[email protected]",
      "isarray": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "path": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "buffer": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "through": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "assert": "github:jspm/[email protected]",
      "camelize": "npm:[email protected]",
      "string-template": "npm:[email protected]",
      "xtend": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "individual": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "process": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "util": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "js-tokens": "npm:[email protected]",
      "process": "github:jspm/[email protected]",
      "stream": "github:jspm/[email protected]",
      "util": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "assert": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "buffer": "github:jspm/[email protected]",
      "core-util-is": "npm:[email protected]",
      "events": "github:jspm/[email protected]",
      "inherits": "npm:[email protected]",
      "isarray": "npm:[email protected]",
      "process": "github:jspm/[email protected]",
      "stream-browserify": "npm:[email protected]",
      "string_decoder": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "lodash": "npm:[email protected]",
      "lodash-es": "npm:[email protected]",
      "loose-envify": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "events": "github:jspm/[email protected]",
      "inherits": "npm:[email protected]",
      "readable-stream": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "buffer": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]",
      "stream": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "inherits": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "virtual-dom": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "browser-split": "npm:[email protected]",
      "error": "npm:[email protected]",
      "ev-store": "npm:[email protected]",
      "global": "npm:[email protected]",
      "is-object": "npm:[email protected]",
      "next-tick": "npm:[email protected]",
      "x-is-array": "npm:[email protected]",
      "x-is-string": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "assert": "github:jspm/[email protected]",
      "cssauron": "npm:[email protected]"
    }
  }
});

index.html

<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
    System.import('main');
</script>
<p>The server rendered element below will be enhanced to a counter.</p>
<hr>
<div id="root">Enhanced: <span class="enhanced-status">no</span></div>

main.js

const udc = require('udc')
const h = require('virtual-dom/h');
const diff = require('virtual-dom/diff');
const patch = require('virtual-dom/patch');
const VText = require('virtual-dom/vnode/vtext');
const virtualizeDom = require('vdom-virtualize');
const select = require('vtree-select');
const Redux = require('redux');
const { createStore } = Redux;

const counter = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}

const store = createStore(counter)

// 1: Create a function that declares the delta
const render = (currentTree, count) => {
    // Ultra deep clone then mutate. I wish we had an immutable virtual dom
    const tree = udc(currentTree);
    const enhancedStatusT = select('.enhanced-status')(tree)[0];

    enhancedStatusT.children = [new VText('yes')]
    tree.children[2] = h('div', [
        h('p', `Counter: ${count}`),
        h('button', { onclick: () => store.dispatch({ type: 'INCREMENT' }) }, 'Increment'),
        h('button', { onclick: () => store.dispatch({ type: 'DECREMENT' }) }, 'Decrement')
    ]);

    return tree;
}

// 2: Initialise the document
let count = 0;
let rootNode = document.querySelector('#root'); // Create an initial root DOM node ...
let tree = virtualizeDom(rootNode) // We need an initial tree

// 3: Wire up the update logic
const updateDom = function (state) {
    const newTree = render(tree, state);
    const patches = diff(tree, newTree);
    rootNode = patch(rootNode, patches);
    tree = newTree;
};

updateDom(store.getState());
store.subscribe(() => updateDom(store.getState()));

package.json

{
  "dependencies": {
    "jspm": "^0.16.27"
  },
  "jspm": {
    "dependencies": {
      "redux": "npm:redux@^3.3.1",
      "udc": "npm:udc@^1.0.1",
      "vdom-virtualize": "npm:vdom-virtualize@^1.0.5",
      "virtual-dom": "npm:virtual-dom@^2.1.1",
      "vtree-select": "npm:vtree-select@^2.0.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  }
}