Zog.js Documentation

A minimal, reactive JavaScript framework inspired by Vue.js. Declaratively render and manage your DOM with reactive data binding.

Installation

Zog.js can be used directly in the browser via CDN or installed as an npm package.

Via CDN (Recommended for Demos and Simple Projects)

Include the script tag using the CDN link in your HTML file.

import { createApp, ref, watchEffect } from 'https://cdn.zogjs.com/zog.es.js';

Via npm (Recommended for Production/Bundled Projects)

Install Zog.js using npm:

npm i zogjs

Then import the necessary functions in your JavaScript modules:

import { createApp, ref, watchEffect } from 'zogjs';

Core Concepts

1. The Reactive Data (ref)

The ref function creates a reactive variable. Whenever its value changes, any part of the DOM or any watchEffect function that relies on it will automatically update.

• Access/Mutate: Always use the .value property to access or change the data.

import { ref } from 'zogjs';

const count = ref(0);
console.log(count.value); // Access: 0

count.value = 1; // Mutation: triggers updates

2. The Application Instance (createApp)

createApp initializes the framework. It accepts a setupFunction where you define your reactive data (refs) and methods.

import { createApp, ref } from 'zogjs';

createApp(() => {
    // Define reactive state
    const message = ref("Hello Zog!");
    
    // Define methods
    const reverseMessage = () => {
        message.value = message.value.split('').reverse().join('');
    };

    // Return the state and methods you want exposed to the template
    return {
        message,
        reverseMessage
    };
}).mount('#app'); // Mounts the application to the element with id="app"

3. Automatic Effect (watchEffect)

watchEffect is used to define side effects that automatically re-run whenever any reactive dependency inside the function changes. This is useful for manual DOM manipulation or advanced logic that doesn't fit directly into a directive.

import { ref, watchEffect } from 'zogjs';

const width = ref(100);
const boxStyle = ref("");

// This effect re-runs every time 'width.value' changes
watchEffect(() => {
    boxStyle.value = `width: ${width.value}px; background: blue;`;
});

Directives Reference

Zog.js supports a minimal set of powerful directives:

1. Data Binding

2. Two-Way Binding

z-model Example:

<input type="text" z-model="userName">

<input type="checkbox" z-model="isChecked">

<input type="radio" name="theme" value="dark" z-model="theme">
<input type="radio" name="theme" value="light" z-model="theme">

<select z-model="selectedOption">
    <option value="A">Option A</option>
</select>

3. Rendering Directives

z-for Example:

<ul z-if="list.length > 0">
    <li z-for="item in list">{{ item }}</li>
</ul>
<div z-else>No items found.</div>

4. Content Directives