Getting Started

To start using a.js, include the library in your project by adding the following script tag to your HTML file:

<script src="path/to/a.js"></script>

Replace path/to/a.js with the actual path to the a.js file in your project.

Minimal Setup

Here is a minimal example of using a.js to create a reactive component:

<html>
<head>
    <script src="a.js"></script>
</head>
<body>
    <a-closure>
        <let>
            global watched g.message
        </let>
        g.message = "Hello, a.js!"
        {(<p>${g.message}</p>)}
        {(<button onclick="g.message = 'Message Updated!'">Update Message</button>)}
    </a-closure>
</body>
</html>

This example demonstrates how to:

Core Concepts

The core concepts of a.js revolve around enhancing native web development with custom elements and reactivity. Below are the foundational ideas:

Custom Elements with <a-tagDef>

<a-tagDef> is a key feature that allows you to define reusable custom components. Here’s an example:

<a-tagDef fortag="custom-element">
    {(<div>This is a custom element</div>)}
</a-tagDef>
<custom-element></custom-element>

In this example, <custom-element> renders the content defined in <a-tagDef>.

Scoped Execution with <a-closure>

The <a-closure> tag creates a self-contained scope for variables and DOM manipulation:

<a-closure>
    <let>
        global watched g.counter = 0;
    </let>
    {(<p>Counter: ${g.counter}</p>)}
    {(<button onclick="g.counter++">Increment</button>)}
</a-closure>

In this example:

Reactivity with watched Variables

Reactive variables defined with watched automatically update the DOM when their values change. This is a core feature of a.js and is illustrated in the examples above.

Tip: Combine <a-closure> and watched variables for highly interactive and modular web components.
> Custom tags