[idea] declarative JS about solid

[ryansolid]

Hmm.. it is interesting idea. I'm going to think outloud here for a second.

I mean technically there is a JS runtime API that the JSX gets compiled down to, I just never considered it very human useable although I've used it directly when testing performance. As I cleanup the compiler it seems reasonable to approach this I suppose. The challenge is how different that API currently is than say Hyperscript. There is a reason fine grained libraries usually use full string templates. The JS would require the end users to write a lot of closing functions.

It's a bit trickier than all that mind you since the compiler currently not only generates all the binding but converts the JSX back into HTML Templates since node.cloneNode is more performant than document.createElement.

So in theory all compiled versions can use the same runtime, it's just a matter of wrapping it and different versions will compile to less optimized versions. How generalizeable is this runtime? Right now I use basically the same runtime for S, Knockout, and MobX. I think it is though. It means the runtime module both can be customized and that the Babel compiler is just one of many. It's ambitious but I like it.

Ok, having worked through that I do think string templates are a better fit as they could almost be "compiled" to the same as the JSX. Perhaps Tagged Template literals like litHTML. But nothing stops there being a hyperscript like API with pure JS as well it just isn't as simple as it is for Virtual DOM library like React. This does seem like an inevitability but I'm a ways off. I still need to do lot of refinement on the current compiler. It's definitely on the list.

[trusktr]

The main thought here, is that this would be an alternative to solid-standalone, but without the parsing/compiling overhead of Babel. It would be a lot lighter to take a structure made of references (f.e. the arrays or objects depending on which approach is taken) and traverse them in the "compile" step.

[ryansolid]

Tagged Template Literals basically don't work unless you wrap everything in function either. So really a string template is the best for having a sub in for the JSX. But then there is a bunch of expression parsing you need to do that isn't so lightweight. I think a hyperscript is the lightest option. Then perhaps for your desired syntax something like https://github.com/ohanhi/hyperscript-helpers would do the trick over-top.

The only real inconsistency with the JSX is that with the JSX I have the ability to indicate what gets wrapped and what doesn't and here I don't. Since I can't compile wrapping the functions I could take it that if it's a function wrap it otherwise don't. However if you are attempting to pass a function as an JSX attribute you'd have to wrap it to prevent it from being executed as a computation. A little awkward. In any case it actually probably isn't that hard to write the h function(likely only like 120 LOC or so) so I think I will give it a shot.

[ryansolid]

Hey here's a proof of concept on Codepen tell me what you think:

https://codepen.io/ryansolid/pen/WPGobB?editors=0010

[ryansolid]

I played around with it more and took it past proof of concept. I've incorporated it into the core rendering library so that MobX-JSX and KO-JSX can use HyperScript as well.

I've update the example on codepen to show it's usage in Solid-StandAlone (I made the Babel dep optional). I also tried out HyperScript Helpers and coded out the JS Frameworks Benchmark for fun. Definitely noticeably slower. More comparable to Preact in performance. I'm sure I can make it faster but I doubt I'm going to spend time at this point optimizing this. I think the syntax is more inline with what you are thinking. It looks like:

import { useState } from 'solid-js';
import { h, selectWhen } from 'solid-js/dom';
import hh from 'hyperscript-helpers';

const { div, style, h1, span, a, button, table, tbody, tr, td } = hh(h);

const Button = (id, text, fn) =>
  div('.col-sm-6.smallpad', [
    button(`#${id}.btn.btn-primary.btn-block`, {
      type: 'button', onclick: fn
    }, text)
  ])

const RowInsert = () => {
  const [ state, setState ] = useState({ data: [], selected: null });

  /* Snip ....handler functions.... */

  return div('.container', [
      div('.jumbotron', div('.row', [
        div('.col-md-6', h1('SolidJS Keyed')),
        div('.col-md-6', div('.row', [
          Button('run', 'Create 1,000 rows', run),
          Button('runlots', 'Create 10,000 rows', runLots),
          Button('add', 'Append 1,000 rows', add),
          Button('update', 'Update every 10th row', update),
          Button('clear', 'Clear', clear),
          Button('swaprows', 'Swap Rows', swapRows)
        ]))
      ])),
      table('.table.table-hover.table-striped.test-data', tbody({onclick: clickRow}, [
        h.each(() => state.data, row =>
          tr({model: row.id}, [
            td('.col-md-1', row.id),
            td('.col-md-4', a(() => row.label)),
            td('.col-md-1', a({action: 'remove'}, span('.glyphicon.glyphicon-remove'))),
            td('.col-md-6')
          ])
        , selectWhen(() => state.selected, 'danger'))
      ])),
      span('.preloadicon.glyphicon.glyphicon-remove', {attrs: {'aria-hidden': true}})
    ]);
}

In any case I think I've resolved this issue. Thanks for suggesting it. It wasn't as hard as I anticipated and I think it brings some real value.

[ryansolid]

Updating on this I've figured out a way to use Tagged Template Literals that should have much less overhead than the HyperScript version. I will tuning it in the coming weeks but I imagine it should run close to JSX in performance. It is still early but you can check it out here. https://github.com/ryansolid/lit-dom-expressions