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

[cloudspeech]

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?

[artydev]

Hy Cloudspeech,

I personnaly love the tiny size of VanJS and would'nt want to see it growing...
There are many other librairies which can offer what you want.

Is this code really hard to read for React users ? :

Demo

import v from "./van.js"

const {span, h1, div, img } = v.tags

const add = (base) => (elt) => v.add(base, elt)

const target = document.getElementById("app")
const title = document.getElementById("title")

const style_user_pict = `
  border:1px solid orange;
  padding: 3px;
  margin:10px`;

function User (user) {
  return (   
      // User wrapper
      div ({style:"display:flex; align-items:center;width:90%;"},
        // User picture
        div({style:"margin-right:10px"},     
          img({style:style_user_pict, src:user.picture.thumbnail})
        ),
        // User name
        div (
          span(user.name.first, " "),         
          span(user.name.last)
        )
      )
    )
}

function toJson(r) {
  return r.json()
}

function displayUsers (users) {
   add(title)(div("Random Users API")) 
   users.results.map(user => add(target)(
      User(user))
   )  
}  

fetch("https://randomuser.me/api?results=5")
  .then(toJson)
  .then(displayUsers)

And this one ? Demo

import van from "./van.js"

const {button,span, div, pre, h1} = van.tags

const elapsed = van.state("0.00")

const Stopwatch = () => {
  let id;
  const start = () => id = id || setInterval(() =>
    elapsed.val = (Number(elapsed.val) + 0.01).toFixed(2), 10)
  return span(
    button({onclick: start}, "Start"),
    button({onclick: () => (clearInterval(id), id = 0)}, "Stop"),
    button({onclick: () =>
      (clearInterval(id), id = 0, elapsed.val = "0.00")}, "Reset"),
  )
}

const Screendisplay = () =>  h1(elapsed, " s")

van.add(app, div(
  h1("A Simple Stopwatch"),
  div ({class:"stopwatch"},
    div({class:"content"},
      Screendisplay(),
      Stopwatch())      
    )
  )
)

VanJS is very orignal like it is.
Using it with templates would make ressembles to any other libraries.

The risk of creating addons is to lost new users, and finish like the Jquery Plugins, with all
the versionning problems, and plethora choices....
But Tao can have a very different vision...

Let us keep VanJS thin (and even thiner if possioble :-)) and performant

Look at HyperApp, it started thin, and now :....

No offense

Regards

[cloudspeech]

@artydev Yes, the code is really hard to read for React users - did you meet any lately? You underestimate the lock-in that JSX has caused in the wider community. JSX/lit-html templates allows to leverage HTML-like notation, so not only React, but anybody who knows HTML will feel at home.
@Tao-VanJS My motive is to prevent your really nice project from oblivion by an unfortunate choice of syntax. I stressed it should be an add-on/plug-in/extension, which maps to your original style under the hood, so nothing is destroyed and people are given a choice of surface syntax to program in.

[Tao-VanJS]

Thanks @cloudspeech for the suggestion! I am currently considering an add-on model where 3rd-party contributors can contribute code via VanJS add-ons. New features of VanJS can be considered to be added as add-ons first. This allows us to see users' reception about the feature. If the users' reception is good, we can consider merging the feature to core van.js. To provide a feature as an add-on, we can implement a library that takes van.js as a dependency, and exposes the additional APIs. You can implement the library in a subdirectory under addons/.... A README.md file can be provided for the instructions of using the add-on. And in VanJS home page, we can have a dedicated section to talk about all VanJS add-ons implemented by 3rd-party contributors. If you're interested in contributing to VanJS with an add-on, we can talk about the details of the logistics.

[artydev]

@cloudspeech

OlivMenier made a nice suggestion : 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)

You can test it here VanHTM

[efpage]

A simple HTML to DOM conversion can be provided like this:

function html(s) {
    let el = document.createElement('template');
    el.innerHTML = s;
    return el.content;
}

I´m just not sure if that plays well with Van states...

[jfloresremar]

Hello @artydev, coul'd you please tell me which IDE are you using to keep this format?:

I use vscode with prettier extension and i don't know how to keep code formatting like your example. I have "format on save" enabled and this is the result (difficult to read)

export const Home = (app: Elysia) => app.get("/", () => van.html(head(title("SSR")), body(div({ id: "app" }, h1("Titulo")))) )
Thank you!

[yerlaser]

Very bad suggestion. Almost all other JS frameworks use JSX and it's ugly, too verbose, too much noise vs data.
If you're using some editor plugin, it can save some typing by auto-closing tags, but the noise remains.
Still with many editors syntax highlighting breaks, things like commenting, auto-identation, linting etc. would need more and more plugins leading to growing bloat.
XML/HTML tag syntax is so bad for humans that people started to create alternative markup syntaxes, Markdown, YAML, TOML, JSON etc.
Familiarity with HTML should not be an impediment for JS progress.

[cqh963852]

@Tao-VanJS Hi, Can you check our repo a jsx-runtime powerd by VanJS.

I think this implementation nicely solves the problem under discussion

[Tao-VanJS]

Thanks! This is nice! Could you add some instructions on how to use the runtime in README.md file? I can add a link to the repo from VanJS homepage if it's usable. If you want to port the code to addons/... of the VanJS repo, you are very much welcome:-)

[cqh963852]

The README.md has been updated. Create A New Project describes how to create a project using @idealjs/van-jsx

[cqh963852]

At present, it seems that the addons/... is not suitable for placing a van-jsx.

Since it needs package.json to tweak some exports, I don't know how to make sure it's published in the addons/... folder as well

[Tao-VanJS]

Hi @cqh963852,

package.json file can be under a sub-directory of a repo. I did that in many sub-directories of VanJS, like this one: https://github.com/vanjs-org/van/tree/main/components.

I added the link to your project as a community add-on: https://github.com/vanjs-org/van#community-add-ons.

Thank you so much for your contribution!