@delpi/zen-plugins

Plugin system for Zen. Allows registering plugins that can extend the runtime with features or services.

LIVE DEMO

Installation

npm install @delpi/zen-plugins
# or
pnpm add @delpi/zen-plugins

Usage

main.tsx

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ZenProvider } from '@delpi/zen-react';
import { Runtime } from '@delpi/zen-core';
import App from './App';

// Import plugins
import { loggerPlugin, analyticsPlugin, notificationPlugin } from '@delpi/zen-plugins';

// Create runtime
const runtime = new Runtime();

// Register and run plugins
runtime.runPlugin(loggerPlugin);
runtime.runPlugin(analyticsPlugin);
runtime.runPlugin(notificationPlugin);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <ZenProvider runtime={runtime}>
    <App />
  </ZenProvider>
);

App.tsx

// App.tsx
import React, { useContext, useEffect, useState } from 'react';
import { RuntimeContext } from '@delpi/zen-react';

export default function App() {
  const runtime = useContext(RuntimeContext)!;
  const [notifications, setNotifications] = useState<string[]>([]);
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    // Listen notification events
    const notifyHandler = (payload: any) => {
      setNotifications(prev => [...prev, `${payload.type || 'info'}: ${payload.message}`]);
    };
    runtime.on('notify', notifyHandler);

    return () => {
      runtime.off('notify', notifyHandler);
    };
  }, [runtime]);

  const emitIntent = () => {
    runtime.emit('intent:TEST_INTENT', { foo: 'bar' });
  };

  const notify = () => {
    runtime.get('notify')?.({ message: 'Hello from NotificationPlugin!', type: 'success' });
  };

  const increment = () => {
    const newCount = counter + 1;
    setCounter(newCount);
    runtime.setState({ count: newCount });
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>Zen Plugin Example</h1>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment & Update State</button>
      <button onClick={emitIntent}>Emit Intent</button>
      <button onClick={notify}>Send Notification</button>

      <h2>Notifications:</h2>
      <ul>
        {notifications.map((n, i) => (
          <li key={i}>{n}</li>
        ))}
      </ul>
    </div>
  );
}

License

MIT