KLL Framework Plugins

This documentation provides an overview of the plugins available for the KLL Framework. Each plugin is designed to extend the functionality of the KLL Framework, providing developers with more tools to create dynamic and interactive web applications.

Available Plugins

1. CreateComponentPlugin

Overview

The CreateComponentPlugin allows developers to dynamically create new components with specified parameters and automatically hydrates them.

Usage

To use this plugin, instantiate it with a reference to your KLL instance. You can then call its action method to create a new component.

Parameters

• templateName: The name of the template to use for the new component.
• ctrlName: The name of the controller to bind with the component.
• id: A unique identifier for the new component.
• stateAttrs: (Optional) Initial state attributes for the component.

Returns

• HTMLElement: The newly created and hydrated DOM element.

2. SmartRenderPlugin

Overview

The SmartRenderPlugin injects state into a component and renders it by replacing placeholders with the state object's corresponding values.

Usage

Instantiate the plugin with a reference to your KLL instance. Use the action method to inject and render the state into a specified element.

Parameters

• element: The HTML element to inject variables and render.
• state: The state object whose properties will be injected into the component.

Returns

• This method updates the innerHTML of the element with the injected state values.

3. ManageAttrsPlugin

Overview

The ManageAttrsPlugin provides a powerful way to manage the attributes of an HTML element, including custom data-, kll-, and aria- attributes, as well as handling element state attributes like disabled, checked, and selected.

Usage

After instantiating this plugin with your KLL instance, use its action method on an HTML element to manage its attributes.

Parameters

• element: The HTML element to manage attributes.

Returns

• A complex object containing proxies for data, kll, aria, and state attributes, allowing for dynamic management and updates of these attributes on the targeted element.

Installation

To use these plugins, include them in your project alongside the KLL Framework. Ensure that you have a KLL instance created, and then instantiate each plugin with this instance.

//main.js
import { KLL } from '@kll_/core'
import { CreateComponentPlugin, SmartRenderPlugin, ManageAttrsPlugin } from '@kll_/basic'

const config = {
  plugins: [CreateComponentPlugin, SmartRenderPlugin, ManageAttrsPlugin],
}

// Initialize KLL
const app = new KLL(config)