The Compiler

The esbuild powered compiler is responsible for creating a JavaScript bundle running in the browser.

Static analysis

Since certain data of your AdonisJS application (think flash messages, translation messages and routes) needs to be available client-side, it must be sent there somehow. This is where the Manifest comes in. However, always sending everything to the client is not the best idea: If your application has 200 translation messages, all 200 translation messages would be sent to the client, on every page.

Conventions

The dollar sign $ seen in certain places in the Radonis API has a special meaning: Functions, Object properties and JSX properties ending with it are analyzed by the Radonis compiler. This is necessary for Radonis to know which JavaScript file served to the client references which flash messages, translation messages or routes. String values extracted by the compiler are called tokens and are stored in a file next to the build output.

Take the following code snippet as an example:

import { useI18n, useUrlBuilder } from "@microeinhundert/radonis"


function SomeComponent() {
    // The compiler extracts the token `hello`
    return <SomeOtherComponent message$="hello" />
}


function SomeOtherComponent({ message$ }: { message$: string }) {
    const { formatMessage$ } = useI18n()
    const { make$ } = useUrlBuilder()


    return (
        <div>
            {/* The compiler can't extract a token from here, but can from the property `message$` in `SomeComponent` */}
            <h1>{formatMessage$(message$)}</h1>
            {/* The compiler extracts the token `signUp` */}
            <a href={make$('signUp')}>Sign Up</a>
        </div>
    )
}

Radonis analyzes the above code and extracts the tokens hello and signUp.

Breaking out of conventions

For cases where a token can't be detected by static analysis, it can be wrapped with token$.

import { token$ } from "@microeinhundert/radonis"


function SomeComponent() {
    // The compiler extracts the token `hello`
    const message = token$("hello")


    return <SomeOtherComponent message={message} />
}


function SomeOtherComponent({ message }: { message: string }) {
    const { formatMessage$ } = useI18n()


    return (
        <div>
            {/* The compiler can't extract a token from here, but can from the variable `message` in `SomeComponent` */}
            <h1>{formatMessage$(message)}</h1>
        </div>
    )
}

Client-side environment variables

Environment variables prefixed with PUBLIC_ are also available client-side. Make sure these variables don't contain sensitive information!