xiv-lang

v1.2.0

Published

4 months ago

XIV is a simple template engine for creating component-based HTML.

0High
0Medium
0Low

sktryo

template-engine html components

XIV

A simple, component-based template engine that evolves into a lightweight JavaScript framework.

XIV allows you to write clean, reusable HTML components and bring them to life with minimal JavaScript, all powered by the Bun runtime.

Features

XIV provides a powerful set of directives to make your HTML dynamic and interactive.

x-data: Initializes a component's state as a JavaScript object.
```
<div x-data="{ count: 0, message: 'Hello' }">...</div>
```

x-init: Runs an expression when a component is initialized.

<div x-data="{ users: [] }" x-init="users = await (await fetch('/api/users')).json()">...</div>

x-text: Binds the text content of an element to a state property.
```
<span x-text="message"></span>
```
x-on:<event>: Attaches an event listener to an element.
```
<button x-on:click="count++">Increment</button>
```
x-bind:<attribute>: Binds an element's attribute to a state property.
```
<a x-bind:href="url">Visit Site</a>
```
x-model: Creates a two-way data binding on an input element.
```
<input type="text" x-model="message">
```

x-if: Conditionally renders an element based on an expression.

<template x-if="isOpen">
  <div>Now you see me.</div>
</template>

x-for: Renders a list of elements from an array.

<template x-for="user in users">
  <div x-text="user.name"></div>
</template>

x-ref: Provides a way to directly access a DOM element within your component.

<input type="text" x-ref="myInput">
<button x-on:click="$refs.myInput.focus()">Focus Input</button>

Installation

First, ensure you have Bun installed.

# Install from the Bun package registry
bun add xiv-lang

Usage

Compiling with the CLI

Use the xiv command to compile your .xiv files into a single HTML file.

xiv <input_file> [options]

Example:

xiv docs/main.xiv -o dist/index.html

Options:

-o, --output_file <path>: Path for the output HTML file (default: ./index.html)

Creating Reusable Components

You can create reusable components and load them into your main file using the <x-temp> element.

templates/my-card.xiv:

<div class="card">
    <h2 x-text="user.name"></h2>
    <p><a x-bind:href="`mailto:${user.email}`" x-text="user.email"></a></p>
    <p><strong>Website:</strong> <a x-bind:href="`http://${user.website}`" target="_blank" x-text="user.website"></a></p>
</div>

main.xiv:

<xiv type="main">
    <body>
        <div x-data="{ users: [] }" x-init="/* fetch users from an API */">
            <h1>User Directory</h1>
            <div class="grid">
                <template x-for="user in users">
                    <!-- Pass the 'user' object to the component's scope -->
                    <div x-data="{ user: user }">
                         <x-temp src="templates/my-card.xiv"></x-temp>
                    </div>
                </template>
            </div>
        </div>
    </body>
</xiv>

Development

To contribute or run the project locally:

# Clone the repository
git clone https://github.com/sktryo/XIV.git
cd XIV

# Install dependencies
bun install

# Build the runtime (after making changes in src/runtime/)
bun run build:runtime

# Run tests
bun test

How It Works

The xiv compiler takes a main .xiv file, extracts the content from <head> and <body> tags inside a <xiv type="main"> block, and embeds it into a standard HTML5 boilerplate. It also includes the xiv.js runtime via a <script> tag, which powers all the client-side interactive features.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

XIV