JSX

Options

extensions string[]

Default:

[ ".jsx", ".tsx" ]

pageSubExtension string

Default:

".page"

includes string

Description

JSX (or the equivalent TSX for TypeScript) is a template language to create and render HTML code, very popular in some frameworks. This plugin adds support for JSX / TSX to create pages and layouts, using the library SSX to render.

Note that this plugin only provides JSX support to generate the pages at building time. This means that client-side properties like onClick won't work. If you want to use a JSX library like React, Preact, etc for creating code for the browser (like SPAs), use the ESbuild plugin.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx.ts";

const site = lume();

site.use(jsx(/* Options */));

export default site;

Configuration

Make sure you have the following compilerOptions to deno.json in order to configure the JSX transform:

{
  // ...
  "imports": {
    //...
    "lume/jsx-runtime": "https://cdn.jsdelivr.net/gh/oscarotero/ssx@0.1.16/jsx-runtime.ts"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "lume"
    //...
  }
}

Creating pages

To create a page with this format, just add a file with .page.jsx or .page.tsx extension to your site. The .page subextension is required to differentiate JSX/TSX files that generate HTML pages from other files to be executed in the browser. This format works exactly the same as JavaScript/TypeScript files, but with the addition of the ability to export JSX code in the default export:

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data: Lume.Data, helpers: Lume.Helpers) => (
  <>
    <h1>{data.title}</h1>
    <p>This is my first post using lume. I hope you like it!</p>
  </>
);

Note that this page uses the layouts/main.vto Vento layout to wrap the content. Lume allows to mix different template languages like Vento and JSX.

Creating layouts

To create layouts in JSX, just add .jsx or .tsx files to the _includes directory.

export default ({ title, children }: Lume.Data, helpers: Lume.Helpers) => (
  <>
    {{ __html: "<!DOCTYPE html>" }}
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>
        {children}
      </body>
    </html>
  </>
);

Components

Create a reusable JSX component in its own file:

export default function ({ children }) {
  return (
    <button class="my-button">
      {children}
    </button>
  );
}

Import it in your page and pass its content as children:

import Button from "./_components/button.tsx";

export default function () {
  return <Button>Click me!</Button>;
}

Since Lume 3.3.0 (requires Deno 2.9.0 or later), directly imported local modules inside your src folder are automatically reloaded in --serve or --watch mode. Older versions require restarting the server after changes.

Lume-managed components

Lume-managed components provide automatic CSS and JavaScript collection and inherited directory data. To use these features, render the component through the comp variable instead of importing it:

export default function ({ comp }) {
  return (<comp.Button>Click me!</comp.Button>);
}