Plugin System

The framework provides a powerful plugin system that allows you to extend its functionality. Plugins can add custom directives, modify the state, and provide additional features to your application.

Creating a Plugin

To create a plugin, define a function that takes an object with the following properties:

• createPlugin: A function to register custom directives
• state: The reactive state object of the application
• bindings: An object containing all reactive bindings

Basic Plugin Structure

const myPlugin = ({ createPlugin, state, bindings }) => {
// Plugin logic goes here
};

Registering Custom Directives

Use the createPlugin function to register custom directives:

createPlugin("directive-name", (element, value, state) => {
// Directive logic goes here
});

• element: The DOM element the directive is applied to
• value: The value of the directive
• state: The current application state

Example Plugin

Here's an example of a plugin that adds a custom directive:

const highlightPlugin = ({ createPlugin, state, bindings }) => {
  createPlugin("highlight", (element, color, state) => {
    element.style.backgroundColor = color;
    element.style.padding = "5px";
    element.style.borderRadius = "3px";
    element.addEventListener("mouseenter", () => {
      element.style.opacity = "0.8";
    });
    element.addEventListener("mouseleave", () => {
      element.style.opacity = "1";
    });
  });
};

import { createApp } from "//unpkg.com/olova";
const app = createApp({
  // ... other app options ...
  plugins: [highlightPlugin],
});
app.mount("#app");

<div i-highlight="yellow">This text will be highlighted</div>

This markdown documentation provides a comprehensive guide on how to create and use plugins in your framework. It covers the basic structure, how to register custom directives, an example plugin, how to use plugins in an app, best practices, and advanced usage tips. You can save this as a .md file in your project repository for easy reference.

Using Plugins in Your App

To use a plugin, add it to the plugins array when creating your app:

<div i-highlight="yellow">This text will be highlighted</div>

Best Practices

1. Keep plugins focused on a single responsibility.
2. Use clear and descriptive names for your plugins and directives.
3. Document your plugins, especially if they're intended for public use.
4. Be cautious when modifying the global state within a plugin.
5. Trigger updates when modifying the state to ensure reactivity.

Advanced Usage

Plugins can also:

• Add multiple directives
• Modify the global state
• Provide utility functions
• Integrate with third-party libraries

Remember to consider performance implications when creating complex plugins.

Plugin Lifecycle

Plugins are initialized when the app is mounted. Make sure any cleanup operations (e.g., removing event listeners) are handled appropriately to prevent memory leaks.

---

By leveraging the plugin system, you can create reusable modules of functionality that can be shared across different projects or with the community.