Plugin System

Extend the core PawaJS engine with custom attributes and lifecycle middleware.

Registering a Plugin

Plugins can intercept element creation, attribute processing, and component calls.

js

                 
import { PluginSystem } from 'pawajs';

PluginSystem(() => ({
    // Add custom attribute directives
    attribute: {
        register: [{
            fullName: 'my-tooltip',
            mode: 'client',
            plugin: (el, attr) => {
                el.title = attr.value;
                el.style.textDecoration = 'underline dotted';
            }
        }]
    },
    // Hook into component lifecycles globally
    component: {
        beforeCall: (stateContext, app) => {
            console.log('Rendering component:', stateContext._name);
        }
    }
})); 

        

Rendering Hooks

You can also hook into the rendering system itself to manipulate elements before or after PawaJS processes them.

js

                 
PluginSystem(() => ({
    renderSystem: {
        beforePawa: (el, context) => {
            // Element is about to be processed
        },
        afterPawa: (el) => {
            // PawaJS has finished processing this element
        }
    }
}));