question: inline function references

[yoshuawuyts]

I was wondering if anyone's got an idea on how to reference functions inline. What I'm trying to do is:

html`
  <div>
    <h1>clicked ${state.n} times</h1>
    <button onclick=${onclick}>click me!</button>
    ${testElement(h, state, el)}
  </div>
`

function onclick () {
  el({ n: state.n + 1 })
}

function testElement (h, state, el) { /* return vdom */ }

But this doesn't work. Does anyone have an ideas / suggestions on how to reference functions from within a string? I tried String.raw, but that seems to just stringify the function. Maybe virtual-html could be extended to allow functions to be passed in as arguments after? Maybe this isn't possible at all (and needs macros or something to work). Thanks!

See Also

• mdn/String.raw
• mdn/template-strings

[yoshuawuyts]

I was on the right track with template strings, by using tagged templates we can inline function calls.

function tag (strings, ...values) {
  return strings[0] + values[0]() + strings[1]
}

tag`Hello ${ a } world`
// hello cruel world

function a () {
  return 'cruel'
}

Since this relies on new syntax (ES6 tagged-tstrings can't be polyfilled) it should probably be released as a separate module. Hopefully that module can consume virtual-html so the transform code doesn't have to be rewritten.

There is some complexity on how to do this though; it's different from how virtual-html approaches it since values need to be injected after the transform has completed. Any ideas on how to do this are welcome!

1. replace function references (???)
2. parse html to vdom
3. reference the functions in the vdom

[yoshuawuyts]

Maybe some code can be borrowed from generate-function.

[yoshuawuyts]

Just to put it out there: I'm interested in making this work because:

1. By using HTML as the uniform interface, we can separate the interface from the engine. e.g. I'd be interested in compiling HTML to react-native for mobile, and play around with Google's incremental-dom to see how it performs. Generating engine-specific code from a DSL (HTML in this case) seems like the right abstraction.
2. JSX has the advantage of being fast, but the disadvantage that it needs to be preprocessed before working. By using template string virtual-html, we can have it work out of the box, and optimize it by writing a browserify transform. Best of both!

[yoshuawuyts]

I recommend folks use https://github.com/shama/bel instead of this package; we've been working hard on it for the past two years to make sure it has all the features you could want to write inline HTML. Hope it's good; closing for now!