Use Tag-String in JS to support SXML like syntax and derive string intuitively

[GHolk]

I'm going to discuss 2 ideas here. Both of them are related to the Tag-String feature in JS.
They are also similar to another discuss #10 about lit-html.

SXML

SXML is an idea to write html/xml in Lisp's S-Expression.

Eg: <p>hello <strong>world</strong></p> become (p "hello " (strong "world")) in sxml.

In fact, VanJS syntax is very similar to the S-Expression; we just need to shift the paren of function before the function name: p(strong()) -> (p (strong))

I wrote a SXML like library named tsjson with variable expansion feature, and I can write html like this:

let field = tsj.html `
(label (:id "my-radio-label")
  (input (:type "radio" :name "${o.prefix}-radio" :value "radio-1"
          :onchange ${evt => ui.radioHandler(evt)}))
  "radio 1")`
form.appendChild(field)

In my library tsjson, variable are insert into the corresponding place, and so does the event handler.
If the variable is a state object, it will work like add a state object in VanJS, too.

Build a VanJS extension with my tsjson will not take a lot of work,
and personally I prefer the sxml syntax to the VanJS syntax or JSX syntax.

Derive string with Tag-string

I also propose a tag string trick to derive string state.
The motivation is to make fromating string from state object more concise.

For example:

van.derive(() => `hey ${name.val}, this is your ${counter.val} times visit`)

become

van.deriveStrf `hey ${name}, this is your ${counter} times visit`
// or
van.derive(() => van.strf `hey ${name}, this is your ${counter} times visit`)

The idea is easy:

Detect whether the variable is a state object and stringify its value, or the stringify whole variable if it is not a state.
Finally, maybe wrap the whole string as a derived state is usefull.

combine with sxml

Moreover, it would be usefull if the sxml parser can detect the variable in string and wrap the string as a state.

Therefore,

tsj.html `(strong "hey ${user}")`

will be equal to

tsj.html `(strong ${van.derive(() => `hey ${user.val}`)})`

In addition, bind a state object to an element's properties is also possible in SXML syntax.
(though it is a 1-direction binding.)

Future work

I have written a PoC in my tsjson's repository .

I feel these ideas are interesting so I share them here,
but I'm not going to build a new extension now, since, in fact, I don't need a UI library.

If anyone is interested in this, feel free to work on it.
By the way, htm in #11 look good, too.