Create a new tagged template string vnode factory function: Codename: hypertag

I think we could benefit from another hyperx-like template literal. Perhaps I should look into https://github.com/hyperapp/hyperapp/issues/88 before I do this, or maybe not, programming is fun.

1

import { html, app } from "hyperapp"

const Hello = ({ name }) => html`<h1>{name}</h1>`

app({ 
  view: model => html`
    <Hello name="world" />
  `
})

2

import { h, app } from "hyperapp"
import { html } from "hypertag"

const Hello = ({ name }) => html`<h1>{name}</h1>`

app({ 
  view: model => html`
    <Hello name="world" />
  `
})

About JSX/Hyperx and some things that I’d like to explore:

• JSX works great and has the best support (that’s why it’s the most popular option despite “breaking” JavaScript). See: https://github.com/substack/hyperx/issues/2
• Currently you use babel to transform JSX into vanilla JS.
• Currently you use hyperxify to transform hyperx into vanilla JS (this involves a boilerplate that some people dislike @ngryman, but there’s no way around it unless hyperxify changes: see https://github.com/substack/hyperxify/pull/8)
• Rolling our own tagged literal means better synergy between both projects.

Of course, if anyone wants to go ahead and work on this, just do it.

See Also:

• https://github.com/hyperapp/hyperapp/issues/85
• https://github.com/hyperapp/hyperapp/issues/123

[rbiggs]

That is neat and evil, sadly. I’d be afraid to use eval in production. Would be so nice to have a Hyperx type template literal solution that didn’t require Hyperxify, it just converted to what you needed at the end automatically, sigh.

[jorgebucaran]

@dschep Also check https://github.com/hyperapp/html.