Plugin System Architecture

import { EUIXEngineCore } from 'euixjs/core';
import { EUIXApiPlugin } from 'euixjs/api';
import { EUIXStoragePlugin } from 'euixjs/storage';
import { EUIXDialogPlugin } from 'euixjs/dialog';

// Register plugins on Lite Core
EUIXEngineCore
  .use(EUIXApiPlugin)
  .use(EUIXStoragePlugin)
  .use(EUIXDialogPlugin);

// Mount your application
const engine = EUIXEngineCore.mount(xmlString, '#app');

export const MyCustomPlugin = {
  name: 'my-custom-plugin',
  
  install(engine, options) {
    // 1. Register custom declarative actions
    engine.registerAction('NOTIFY', async (step, ctx) => {
      alert(step.message || 'Notification');
    });

    // 2. Intercept lifecycle hooks
    engine.on('mount', (instance) => {
      console.log('Component mounted:', instance);
    });

    // 3. Register custom tag renderers
    engine.registerTag('banner', (node, renderer) => {
      const el = document.createElement('div');
      el.className = 'app-banner';
      el.textContent = node.text;
      return el;
    });
  }
};