Q: JSX on Scaja.js

The most popular web UI frameworks leverage html in js, naming a few

Historically JSX has been a sugar syntax for UI tree description objects

let foo = <div id="foo">Hello!</div>

compiles to

let foo = h('div', {id:"foo"}, 'Hello!')

However new technologies leverage JSX as the start of another whole different pipeline, examples

  • React 19 optimizing compiler will take JSX and transform components into an auto optimized version, dropping the need of useMemo , useCallback or React.memo
  • Solid.js, transforms JSX into signal based reactive dom operations

If possible to use JSX on scala.js and preserve the JSX as it is on the generated js files, would allow to use babel plugins like the react optimizing compiler babel plugin or solidjs

Any ideas if this would be even possible?, a note is that Scala XML literals and JSX are different concepts, event thought similar

Do you know that you can already do this in Scala? And its valid syntax

var foo = <div id="foo">Hello!</div>

JSX has been added to javascript because the language lacked features; Scala has other features that make JSX on Scala obsolete. Also, scala-js is just a compiler of scala to js. JSX works on Javascript only. So I suggest using some kind of library in scala to make things you want to do with JSX, for example you can use laminar, which gives you roughly the same features as JSX. Scala has so many features and syntax shugars that if javascript supported those, JSX would not exist.

The need for code optimization steps like Babel is eliminated with Scala-js compiler. The compiler is adept at optimizing the code, performing all tasks’ in-house’ with remarkable efficiency. It outperforms any Babel optimization.

1 Like

XML in Scala is deprecated

1 Like

Oron, it’s not deprecated, just moved out to a library. (As it should be.)

1 Like

Im taking about generating output as JSX not as JS, to use JSX syntax on Scala code it’s another theme, but not the main one

Does not seem we are taking on the same page, im taking about framework specific transformations like the ones from react 19 optimizing compiler and solidjs reactivity compiler, and not language level like scala.js or Google closure compiler

Also highlighting this one, JSX allows to embed functions and objects into HTML, not just strings like in bare XML

1 Like


XML Literals are still supported, but will be dropped in the near future, to be replaced with XML string interpolation