Plugins

Plugins in Nijor let you define custom behavior at compile time. Many built-in features such as n:loop, on:event, and reactive variables are internally powered by plugins, making Nijor flexible and modular.

Using Plugins

Before creating your own plugins, you can use existing ones by importing them into nijor.config.js and adding them to the plugins array.

        import plugin1 from "@/plugins/plugin1.js"
        import plugin2 from "@/plugins/plugin2.js"

        export const plugins = [ plugin1(), plugin2() ];
    

Nijor will run these plugins during compilation in the order they appear in the array.

Plugin Development

A Nijor plugin exports a default async function. This function receives a single object containing document, scope, props, scripts, filename, and module_type.

        export async function plugin(properties){

            return async function ({ document, scope, props, scripts, filename, module_type }) {
                // Plugin logic

                return {
                    name: "Plugin Name",
                    body: document.body.innerHTML,
                    ...scripts
                };
            }
        
        }
    

Plugin Arguments

The plugin function receives the parsed document, the current scope, component props, the generated scripts object, the current filename, and the module_type.

The module_type can be component, layout, page.

The scope is a random string unique to a particular component, layout or page.

The scripts object contains three properties: main, global, and defer.

Do not overwrite scripts.main directly unless absolutely necessary. Prefer appending to it instead :

        scripts.main += "// additional code"
    

Since these fields contain generated script code, replacing them carelessly may break compilation output.

Internal Compilation

Internally, a .nijor file is compiled into a structure similar to this:

        // scripts.global
        const x = new component(templateFn, callbackFn);
    

scripts.global contains top-level code such as component initialization. templateFn returns the template output. Code written inside the <script> tag is placed inside templateFn, except for imports, which are moved to the top level. callbackFn runs immediately after templateFn renders the template, including child component rendering. scripts.defer is injected inside templateFn.