virtual-domhyperscript

How to wire up virtual-hyperscript, hyperscript-helpers, and main-loop

I'm looking at an example by substack of using hyperscript, main-loop, and hyperx.

I'd like to recreate this example using hyperscript-helpers to get code similar to Elm. That module says it supports both hyperscript and virtual-hyperscript, so I'm trying virtual-hyperscript.

My code looks like this:

var vdom = require('virtual-dom')
var vh = require('virtual-hyperscript');
var hh = require('hyperscript-helpers')(vh);
var main = require('main-loop')

var div  = hh.div;
var span = hh.span;
var h1   = hh.h1;

var loop = main({ times: 0 }, render, vdom)
document.querySelector('#content').appendChild(loop.target)

function render(state) {
  return h1('title');
}

And it gives me an error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

What's going wrong? I assume something's not wired up correctly because

console.log(loop.target) //null

If it helps, I can post my html and the browserify build command I'm using

Solution

  • virtual-hyperscript is moved to https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript

    See README at https://github.com/Raynos/virtual-hyperscript

    The virtual-dom/h is just a new version of virtual-hyperscript.