Preact

Since v0.101.0, Trilium integrates Preact for front-end scripting, including support for JSX.

Preact can be used for:

Render Note, where a JSX code note is used instead of a HTML one.
Custom Widgets, where JSX can be used to replace the old, jQuery-based mechanism.

To get started, the first step is to enable JSX in the list of Code languages. Go to Options → Code Notes and check the “JSX” language. Afterwards, proceed with the documentation in either Render Note or Custom Widgets, which will both have a section on how to use the new Preact integration.

Important

The documentation assumes prior knowledge with React or Preact. As a starting point, consider the FreeCodeCamp course on Front End Development Libraries or the Preact Tutorial.

Import/exports

When using Preact with JSX, there is a special syntax which provides ES-like imports. This import syntax makes way for a more intuitive that doesn't make use of global objects and paves the way for better auto-completion support that might be introduced in the future.

API imports

Instead of:

api.showMessage("Hello");

the JSX version looks like this:

import { showMessage } from "trilium:api";
showMessage("hello");

Preact API imports (hooks, components)

There's a new Script API dedicated to Preact, which provides shared components that are also used by Trilium internally as well as hooks, for example.

import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi");

Exporting

JSX notes can export a component for use in Render Note or for Component libraries:

export default function() {
    return (
        <>
            <p>Hello world.</p>
        </>
    );
}

Import/export are not required

These imports are syntactic sugar meant to replace the usage for the api global object (see Script API).

Note

The import and export syntax work only for JSX notes. Standard/jQuery code notes still need to use the api global and module.exports.

Under the hood

Unlike JavaScript, JSX requires pre-processing to turn it into JavaScript (just like TypeScript). To do so, Trilium uses Sucrase, a JavaScript library which processes the JSX to pure JavaScript. The processing is done each time a script is run (for widgets this happens at every program startup). If you notice any performance degradation due to long compilation, consider reporting the issue to us.

3.1 KiB Vendored Raw Blame History Unescape Escape