JSX is terrible for frontend. But it's an acceptable way to create HTML code in server side, specially if it's supported by default by TypeScript and Deno.
Most of the current JSX libraries are designed to work in server and client sides. They do complicated things like a virtual DOM, reactivity, hooks, hydration, events, etc, in order to create interactive user interfaces.
SSX is a minimal JSX library designed to be used ONLY in server side and output plain HTML code.
precompile
option7-20x faster rendering times and a 50% reduction in Garbage Collection times.
className
).<!doctype html>
declaration.In your deno.json
file:
{
"compilerOptions": {
"jsx": "precompile",
"jsxImportSource": "ssx"
},
"imports": {
"ssx/jsx-runtime": "https://deno.land/x/ssx/jsx-runtime.ts"
}
}
// Main component
function Main() {
return (
<html lang="en">
<body>
<custom-element />
<p>Example:</p>
<Header name="World">
Welcome to SSX
<br />
{{ __html: "Raw <b>HTML</b> code" }}
</Header>
</body>
</html>
);
}
// Async component
async function Header(
{ name, children }: { name: string; children: JSX.Children },
) {
const res = await fetch(
`https://api.dictionaryapi.dev/api/v2/entries/en/${name}`,
);
const json = await res.json();
return (
<>
<h1>Hello {name}</h1>
<h2>Os: {Deno.build.os}</h2>
<p>
Definition of {name}:{" "}
{json[0]?.meanings[0]?.definitions[0]?.definition ||
"Definition not found"}
</p>
{children}
</>
);
}
// String with the HTML code
console.log(await Main());
Any children content with the type { __html: string }
is considered raw HTML
code that won't be escaped. You can use it to add the <!doctype html>
declaration (something not possible in other JSX libraries):
{{ __html: "<!doctype html>" }}
<html>
...
</html>;