Matt-Esch / virtual-dom

A Virtual DOM and diffing algorithm
MIT License
11.66k stars 779 forks source link

about the syntax #364

Open caub opened 8 years ago

caub commented 8 years ago

Hi, what are your sights on the syntax:

h('html', [
  h('head', [
    h('title', 'Server side rendering')
    ]),
  h('body', [
    content,
    h('script', JSONGlobals({
      state: state
    })),
    h('script', {
      src: 'bundle.js'
    })
    ])
  ]);

// vs

h('html').add(
  h('head').add(
    h('title').text('Server side rendering')
  ),
  h('body').add(
    content,
    h('script').add(JSONGlobals({
      state: state
    })),
    h('script').attr({
      src: 'bundle.js'
    })
  )
);

personally I prefer the second, even if slightly more verbose it's a bit more clear, .text is a shortcut for .attr({text..: ..})

var tree = h('div.foo#some-id', [
    h('span', 'some text'),
    h('input', { type: 'text', value: 'foo' })
]);

would be

var tree = h('div.foo#some-id').add(
    h('span').text('some text'),
    h('input').attr({ type: 'text', value: 'foo' })
);
emilbayes commented 8 years ago

I don't see what hinders you from implementing this yourself, instead of changing and extending a stable API. All you have to do is return VNodes in the end

caub commented 8 years ago

ok, I see, thanks