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.5 pre-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>) {
    return <div>{...props.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>
}