How to use the snabbdom/h function in snabbdom

it('should return an array of vNodes that match selector', () => {
      const vNode = h('div#test', {}, [
        h('p.first', {}, []),
        h('p.second', {}, []),
        h('p.third', {}, []),
      ]);

      const result = select('p', vNode);

      assert.strictEqual(Array.isArray(result), true);
      assert.strictEqual(result.length, 3);
      assert.strictEqual(result[0].sel, 'p.first');
      assert.strictEqual(result[1].sel, 'p.second');
      assert.strictEqual(result[2].sel, 'p.third');
    });

it('should return a vNode by ID from selector', () => {
      const vNode = div([
        h('h1#test', {}, []),
      ]);

      const result = select('#test', vNode);
      assert.strictEqual(result[0].sel, 'h1#test');
    });

export default () => {

  const Component = ({ name }) =>
    h('div', {}, ["Hello ", name])

  return Component({ name: "toto" }, [
    h('span', {}, "Done")
  ])

}

		children.map((child, index) => h("div.split", {
			class: { ["split-" + opts.direction]: true },
			hook: {
				insert: (vnode) => {
					childElms[index] = vnode.elm;
					if(++count == childElms.length) {
						Split(childElms, opts);
					}
				}
			}
		}, [child]))
	);

export const render = (collapsed, actions$, heading, body) =>
	h("div.collapsible", { class: { "collapsed": collapsed } }, [
		h("div.collapsible-heading.pure-menu-heading", {
			on: { click: [ actions$, Action.SetCollapsed(!collapsed) ] }
		}, heading),
		h("div.collapsible-body", body)
	]);

(() => {
        if (m.lorempixel == 'fetching')
          return  h('span', {style: styles.image}, 'fetching...')
        if (m.lorempixel == 'success')
          return  h('img', {style: styles.image, attrs: {src: m.loremsrc}})
        if (m.lorempixel == 'error')
          return  h('span', {style: styles.image}, 'error')
      })(),
      h('button', {style: styles.button, on: {click: i.fetchImage}}, 'Reload'),

(() => {
          if (m.lorempixel == 'fetching')
            return  h('span', {style: {'margin-left': '10px'}}, 'fetching...')
          if (m.lorempixel == 'success')
            return  h('img', {style: {'margin-left': '10px'}, attrs: {src: m.loremsrc}})
          if (m.lorempixel == 'error')
            return  h('span', {style: {'margin-left': '10px'}}, 'error')
        })(),
        h('br'),

(() => {
          if (m.lorempixel == 'fetching')
            return  h('span', {style: {'margin-left': '10px'}}, 'fetching...')
          if (m.lorempixel == 'success')
            return  h('img', {style: {'margin-left': '10px'}, attrs: {src: m.loremsrc}})
          if (m.lorempixel == 'error')
            return  h('span', {style: {'margin-left': '10px'}}, 'error')
        })(),
        h('br'),

export default function Paper ({
  elevation = 1,
  hook = {},
  noPadding = false,
  style
}, children = '') {
  const styles = getStyle('paper', style)

  return h('div', {
    hook,
    style: Object.assign({}, styles.paper, styles.elevation[elevation], noPadding ? {} : styles.padded)
  }, children)
}

view: (ctx, i, m) => h('div', [
      h('div', {style: styles.title}, [
        'FractalChat',
        h('div', {style: styles.connection.c(m.connected)}),
      ]),
      h('div', {style: styles.mainContainer}, [
        h('div', {style: styles.row}, [
          h('label', {style: styles.label}, 'Server: '),
          h('input', {
            style: styles.input,
            props: {value: m.server},
            on: {change: (ev) => i.textChange('server', ev.target.value)}
          }),
          h('button', {on: {click: () => i.connectServer(m.server)}}, 'Connect to server ...'),
        ]),
        h('div', {style: styles.row}, [
          h('label', {style: styles.label}, 'Username: '),
          h('input', {style: styles.input, on: {change: ev => i._action('TextChange', {
            controlName: 'username',
            text: ev.target.value,
          })}}),
        ]),
        h('div', {style: styles.messageContainer},
          m.messages.map(
            msgObj => (msgObj.sender == '@@owner') ? h('div', {style: styles.messageSended}, [
              h('span', 'You :  ' + msgObj.content),
            ]) : h('div', {style: styles.messageReceived}, [
              h('span', msgObj.sender + ' :  ' + msgObj.content),
            ])
          )