Xtyle Library for (Preact)

Xtyle

Welcome to Xtyle! Your Ultimate Directive Extension! Enabling you to effortlessly extend your functions as global directives. Say goodbye to exporting and importing components constantly. Any method or component you register globally will be readily available throughout your whole Application.

Download (TypeScript) Template

no-installation

<script src="https://unpkg.com/xtyle@latest" type="text/javascript"></script>

Description

Purpose and Goals

The purpose of the xtyle tool is to revolutionize the way you develop for the browser. Our aim is to simplify the development process while maintaining compatibility with TypeScript and modern tools like VS Code. Xtyle empowers API developers by providing them with a simpler way to connect various plugins built with TypeScript/Javascript with their corresponding APIs.

Key Features

Global Directives: Easily extend the behavior of your elements by declaring custom directives.
Simplified Components: Define custom elements without the hassle of constant exporting and importing.
Global Variables: Specify global variables that are accessible within your application's scope.
Reactive State Management: Define global state variables that can be used reactively within your application.

Plugins

With xtyle.use, you can easily . . .

Define Routes: Configure your route patterns using the routes prop to create a structured navigation flow.
Declare Directives: Extend the behavior of your elements by declaring custom directives using the directives prop.
Create Custom Elements: Define the custom elements you want to create with your plugin using the elements prop.
Set Global Variables: Specify global variables within your plugin's scope using the globals prop.
Reactive State Management: Define global state variables using the store prop to enable reactive updates.

Core API

Key	Description
`xtyle.init`	Run Application
`xtyle.use`	Plugin(s)
`xtyle.element`	Component(s)
`xtyle.directive`	Directive(s)
`xtyle.router`	Router
`xtyle.model`	Model(s)
`xtyle.base`	Only useful with `TypeScript`

`x-html` (Directive)

x-html

Converts a regular HTML element into an Xtyle <Component />.

Example:

<div x-html>Regular div becomes a (Xtyle) Component</div>

`x-slot` (Component)

x-slot

Converts a regular HTML element into an Xtyle <Fragment />.

Example:

<x-slot>
  {/*
  <!-- Content goes here... -->
  */}
</x-slot>

Creating Directives

custom <div x-custom>

Registered directives will be enforced to be lower-case. Any directive you register under any given name will be prefixed with “x-”

props Arguments for the final Component.
self Arguments that construct the Component.

Key	Description
`self.directives.custom`	Object where you can find your custom directive
`self.ref.add`	Add class(es) to the DOM element
`self.ref.remove`	Remove class(es) to the DOM element
`self.ref.toggle`	Toggle class(es) to the DOM element
`self.ref.contains`	Check if DOM element Contains a class

Example:

// "x-demo"
xtyle.directive("demo")((self, props) => {
  preact.useEffect(() => {
    // Self
    self.ref.add("class-after-init");
    self.ref.remove("class-after-init");
    self.ref.toggle(["toggled-class"], true);
    self.ref.contains("toggled-class");
  }, []);
  // Demo
  console.log("Custom Directive");
  console.log(self.directives.custom["demo"]);
  console.log(props);
});

Usage:

“x-” Prefix

<div x-demo="Hello World" x-html></div>

Directives

Directives are a powerful tool that allows developers to reuse and encapsulate logic in their code. By leveraging custom directives, developers can effectively separate and encapsulate complex logic and low-level DOM operations, resulting in more modular and maintainable code. These directives enable the reuse of specific functionalities across multiple elements or components, promoting code consistency and reducing duplication.

Custom directives provide a flexible and reusable approach to address unique requirements in web development. They can be used for a variety of purposes, such as applying specialized behaviors, manipulating the DOM, or implementing custom event handling. With custom directives, developers have the ability to create highly adaptable and reusable solutions that cater to specific needs.

Creating Components

custom <x-component>

Registered components will be enforced to be lower-case and kebab-case. Any component you register under any given name will be prefixed with “x-”

Example:

A custom component that displays a title and its children.

xtyle.element("demo")((props) => (
  <x-slot>
    <h2>{props.title}</h2>
    {props.children}
  </x-slot>
));

Usage:

title: The title for the component.

<x-demo title="Hello World">
  <h4>Content goes here...</h4>
</x-demo>

Creating Plugins

xtyle.use

Simplifying Plugin Registration:

The xtyle.use function is a powerful utility that simplifies the process of registering various elements, directives, globals, and store in a single place for your plugin. This documentation will guide you through the steps to create and register your plugins effectively.

Props:

routes: Define your route(s) pattern(s).
directives: Declare custom directives to extend the behavior of your elements.
elements: Define the custom elements you want to create with your plugin.
globals: Specify global variables accessible within your plugin's scope.
store: Define global state variables that can be used reactively within your plugin.

Example:

Below is an example of how to create and register a custom plugin using xtyle.use:

const myPlugin = {
  /** @Routes */
  routes: ["/my-app/", "/my-app/{path*}"],

  /** @Directives */
  directives: {
    html(self, props) {
      // Logic to handle the 'html' directive
      // ...
    },
  },

  /** @Elements */
  elements: {
    button(props) {
      return <button>Click Me | {props.children}</button>;
    },
  },

  /** @Globals */
  globals: {
    title: "Xtyle Project",
  },

  /** @Store */
  store: {
    count: xtyle.signal(0),
  },
};

// Register the plugin
xtyle.use(myPlugin);

By following this example, you've successfully created a plugin that includes:

a custom x-html directive.
a x-button element.
a title global variable.
a count store global state.

These can now be used within your application.

// App (Demo)
const App = () => (
  <div x-html>
    Count is: {xtyle.store.count}
    <x-button>{xtyle.global.title}</x-button>
  </div>
);

// Reactive Count
setInterval(() => {
  xtyle.store.count.value += 1;
}, 1000);

// Render the App
preact.render(preact.h(App), document.body);

Warning

The x-html directive is a built-in directive.

INIT Run Application

import myPlugin from "./plugin.ts";
import Main from "./main.tsx";

/**
 * @Register <Plugin>
 */
xtyle.use(myPlugin);

/**
 * @Router
 */
const router = {
  history: false,
  baseURL: null,
};

/**
 * @Render
 */
xtyle.init(Main, document.body, router);

Main Properties

Key	Description
`xtyle.global`	Object where you can find your custom directive
`xtyle.store`	Object where you can find your custom directive
`xtyle.router`	Object where you can find your custom directive

(App) Preview Variables

/**
 * @Router
 */
const router = {
  history: false,
  baseURL: null,
};

/**
 * @StartApp
 */
xtyle.init(Preview, document.body, router);

/**
 * @Previews
 */

/* Actions */
console.log("Actions: ", xtyle.action.keys());

/* Directives */
console.log("Directives: ", Object.keys(xtyle.allDirectives));

/* Globals */
console.log("Globals: ", xtyle.global);

/* Models */
console.log("Models: ", xtyle.models.keys());

/* Routes */
console.log("Routes: ", xtyle.router.keys());

/* Store */
console.log("Store: ", xtyle.store);

Xtyle Library for (Preact)

Description

Key Features

Core API

x-html (Directive)

x-slot (Component)

Creating Directives

Creating Components

Creating Plugins

Props:

Example:

INIT Run Application

Main Properties

(App) Preview Variables

`x-html` (Directive)

`x-slot` (Component)