JSX Preact

Create pages and layouts with JSX (Preact).

Installation

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

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

const site = lume();

site.use(jsx({/* your config here */}));

export default site;

See all available options in Deno Doc.

Configuration

You might want to add the following fields to deno.json and import_map.json in order to configure Deno to use Preact as the JSX library:

{
  "importMap": "import_map.json",
  "tasks": {
    "lume": "deno eval \"import 'lume/task.ts'\" --",
    "build": "deno task lume",
    "serve": "deno task lume -s"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

Go to Using TypeScript for more info about using TypeScript with Lume.

Description

This plugin works exactly like JSX but using Preact (a 3kb React alternative with the same API but faster and lighter) to render the JSX.

Creating pages

To create a page with this format, just add a file with .jsx or .tsx extension to your site. 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.njk";

export default (data) => (
  <>
    <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.njk layout to wrap the content. (You can mix different template languages like Nunjucks and JSX.)

Creating layouts

To create layouts in JSX, just add .jsx or .tsx files to the _includes directory. Note that we need to use the variable children to render the page content instead of content. The difference is that content is a string and cannot be easily used in JSX because it's escaped, and children is the JSX object un-rendered.

export default ({ title, children }) => (
  <html>
    <head>
      <title>{title}</title>
    </head>
    <body>
      {children}
    </body>
  </html>
);

Lume will automatically add the missing <!DOCTYPE html> to the generated .html pages.