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.

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). 

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.