Impure JSX calls are poorly supported in the JS ecosystem

[jonikorpi]

The new JSX API may have been a bad call. Using this to ponder the issue and review the (awkward) alternatives.

// breaks editor autocomplete hints
this(Something, {key}, …args) // bad for GC
this.run(Something, {key}, …args) // better: can be reused and pooled
run([this, key], Something, …args) // best for all performance

// also causes `this` collision bug
(run(this, key), Something(…args))
Something(this, key)(…args)

// breaks autocomplete and loses names for debugging
Something([id, key], …args)
Something = component(function (id, someArg) {})
// VS Code can be tricked like this though, lol
export let Something = function () {};
Something = component(Something);

// none of the above but requires boilerplate at start and end of Something
Something([id, key], …args)
Something = async function (parent, someArg, otherArg) { 
  const id = await start(Something, parent); 
  if(unchanged(id, arguments)) return lastValue(id); 
  … 
  return end(id, result) 
}

[jonikorpi]

Esbuild added an option (jsxSideEffects) for avoiding this issue. ❤️

Will still keep this issue around for now, as esbuild isn't the entire ecosystem!

[jonikorpi]

Draft idea for an API based on pure components:

• a component instance can be mounted in multiple places at once: same args = same instance
  • an alternative to matching args is to require a key for every instance call
• means no need for identifying instances by exactly where in the app we currently are?
• state needs a unique key or other mechanism
• global state can just be a component with state(s) inside
• ”context” or ”prop drilling” no longer needed because components can just be called again where they’re needed
• DOM components need to return some kind of React-style values, instead of real elements
• not sure how to do cleanups or unmounting or updating