Raynos / mercury

A truly modular frontend framework
http://raynos.github.io/mercury/
MIT License
2.82k stars 143 forks source link

syntax of h #199

Closed caub closed 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' })
);

@Raynos (sorry to ping you:), would appreciate your input)

gcallaghan commented 8 years ago

Isn't this really more of a hyperscript question?

caub commented 8 years ago

sorry I realized it too, will move it there, thanks

https://github.com/Matt-Esch/virtual-dom/issues/364