Allow lit-html-like templates as worthy, yet build-free JSX replacement

[cloudspeech]

Discussed in #10

^{Originally posted by cloudspeech May 25, 2023}
VanJS' HTML-markup-as-nested-JS-function-calls approach to templating is going to be a hard sell to the wider community, especially people that have seen React. They just want something like JSX.

Lit-html has a very nice syntax that comes very close to JSX, yet only uses browser-native means. See https://lit.dev/docs/templates/overview/.

I humbly suggest to not reinvent the wheel but provide an add-on to VanJS that supports unchanged lit-html template syntax (properties, attributes, events at minimum, perhaps also ref). This way the vanJS base size can be kept minimal for purists.

I expect the add-on's size to likewise be very small (using DOMParser).

What do you think?

[Himavanta]

Maybe you can try to combine it with htm.

[olivmonnier]

If you're interest by an example with htm:

import htm from 'https://unpkg.com/htm?module'
import van from "./van-0.11.10.min.js"

function h(type, props, ...children) {
  const tag = van.tags[type]
  if (props) return tag(props, ...children)
  return tag(...children)
}

const html = htm.bind(h)

const counter = van.state(0)

const app = html`<div>
  ❤️ ${counter}
  <button onclick="${() => ++counter.val}">👍</button>
  <button onclick="${() => --counter.val}">👎</button>
</div>`

document.body.appendChild(app)

[efpage]

You can use this approach to use template literals, which is very fast too:

    // create element from innerHTML
    function html(s) {
      let d = div()
      d.innerHTML = s
      return d.firstChild
    }

[artydev]

Thank you olivmonnier,
This could be attractive for many 'react like' users :-)

[mgttt]

You can use this approach to use template literals, which is very fast too:

    // create element from innerHTML
    function html(s) {
      let d = div()
      d.innerHTML = s
      return d.firstChild
    }

evolve to

var s2dom=(s,d=div())=>(d.innerHTML=s,d.firstChild)

[artydev]

Here is what 'htm' allows to do VanHTM :

import htm from 'https://unpkg.com/htm?module'
import van from "./van.js"

function h(type, props, ...children) {
  const tag = van.tags[type]
  if (props) return tag(props, ...children)
  return tag(...children)
}

const html = htm.bind(h)

const counter = van.state(0)


function Incer() {
  return html`<button onclick="${() => ++counter.val}">👍</button>`
}

const app = html`
  <div>
    ❤️ ${counter}
    ${Incer()}
    <button onclick="${() => --counter.val}">👎</button>
  </div>`

document.body.appendChild(app)

[cqh963852]

I tried use jsx with vite.

Change jsxImportSource to the custom package.

It works fine.

[coderbuzz]

@cqh963852 Can you share the project template?

I tried use jsx with vite.

Change jsxImportSource to the custom package.

It works fine.

[cqh963852]

@coderbuzz You can check https://github.com/vanjs-org/van/tree/main/addons/van_jsx

[tonivj5]

@coderbuzz You can check main/addons/van_jsx

wooow @cqh963852, that's amazing! Could I ask you how you generate a distributable build?

[cqh963852]

@coderbuzz You can check main/addons/van_jsx

wooow @cqh963852, that's amazing! Could I ask you how you generate a distributable build?

@tonivj5

If you mean a npm package. You can check https://www.npmjs.com/package/vanjs-jsx.

[metaleap]

If you're interest by an example with htm:

I changed the h like so:

const html = htm.bind((type: any, props: Record<string, any>, ...children: any[]) => {
  const tag = (typeof type === 'function') ? type : van.tags[type]
  if (props)
    return tag(props, ...children)
  return tag(...children)
})

and this lets you do this: