TSX

TSX is fully supported in elegance. The build simply goes through a transformation to translate the JSX calls into elegance-style calls.

So, a page like this:

export default function page() { return <h1>Hello, World!</h1> }

Becomes like so during the build step:

export default function page() { return h1({}, "Hello, World!"); }

Using TSX

Using TSX is as simple as changing the filename of a file from .ts to .tsx.

You can still of course use Elegance-style element calls in .tsx files.

Opting-in incurs a flat 1.5pre-processing cost, which is paid at initial build. Unlike some frameworks, there is no Factory, and thus TSX doesnt incur a runtime penalty.

Output

It might be useful to note that in regular Elegance-style element calls, you typically pass in children as a spread array like so:

h1(1, 2, 3, 4)

The equivalent output for TSX would however be:

h1({}, [1, 2, 3, 4])

This is so that we by-default protect from the ~65,534 call size limit; which the Elegance-style user would have to simply wrap their children in an array for.

The first parameter in the generated output is also always an object to simulate a props object.

Custom Components

You can create custom components similar to how you could in regular TSX.

function Component(props: Record<string, unknown>, children: Array<VirtualNode>) { return <div>{...children}</div> } export default function page() { return <Component>Hello, World!</Component> }

You can also call Elegance components like so:

const MyComponent = component({ view({ children }) { return <div>{...children}</div> } }); export default function page() { return <MyComponent>Hello, World!</MyComponent> }

Elegance components in TSX mode also support typed props:

const MyComponent = component<{ title: string, }>({ view({ children }) { return <div>{title}{...children}</div> } }); export default function page() { return <MyComponent title={"My Title #123"}>Hello, World!</MyComponent> }