SpikiJS Framework

SpikiJS is an ultra-lightweight (~5KB), high-performance JavaScript framework designed for building reactive user interfaces directly in HTML without complex build tooling or transpilation steps.

Installation

Quick Start

Define components with s-data="name", register state logic using spiki.data(), and start the engine.

<div s-data="counterApp">
    <button s-click="decrement">-1</button>
    <span s-text="count"></span>
    <button s-click="increment">+1</button>
</div>

<script type="module">
    import spiki from 'spikijs';

    // 1. Register Component State & Methods
    spiki.data('counterApp', () => ({
        count: 0,
        increment() { this.count++; },
        decrement() { this.count--; }
    }));

    // 2. Start Engine
    document.addEventListener('DOMContentLoaded', () => {
        spiki.start();
    });
</script>

Directives Reference Summary

s-data Component Scope

s-data="componentName" marks an element as the root of a Spiki component. State returned by the component factory function becomes reactive.

spiki.data('myApp', () => ({
    title: 'Hello Spiki',
    user: { name: 'Alice' }
}));

s-text & s-html

Use s-text for safe text insertion and s-html for rendering raw HTML. Functions passed to s-text receive the element instance el as the first parameter.

spiki.data('textDemo', () => ({
    message: 'Reactive Text Content',
    richHtml: '<span class="text-emerald-500 font-bold">Safe HTML Content</span>',
    upperMessage(el) {
        return this.message.toUpperCase();
    }
}));

:[attr] & :class

Prefix any standard HTML or SVG attribute with : for dynamic binding. :class accepts string class names or objects with boolean values, fully safe for both HTML and SVG elements.

// HTML & SVG binding
<svg :class="svgClass" viewBox="0 0 24 24">...</svg>

spiki.data('attrDemo', () => ({
    isActive: false,
    toggleActive() { this.isActive = !this.isActive; },
    get activeClass() {
        return this.isActive ? 'bg-emerald-500 text-white' : 'bg-slate-200 text-slate-700';
    },
    get svgClass() {
        return this.isActive ? 'stroke-indigo-500 text-indigo-500' : 'stroke-slate-400 text-slate-400';
    }
}));

s-click & s-[event] Event Handling

Attach standard DOM event listeners using s-click, s-input, s-submit, s-keyup, etc. Event handlers receive the native Event object e without inline arguments.

spiki.data('eventDemo', () => ({
    lastLog: 'None',
    handleClick(e) {
        this.lastLog = 'Clicked button at x: ' + e.clientX;
    },
    handleKeyup(e) {
        if (e.key === 'Enter') this.lastLog = 'Enter pressed!';
        else this.lastLog = 'Key pressed: ' + e.key;
    }
}));

s-model & s-value

s-model creates two-way bindings for inputs, textareas, checkboxes, and radios. s-value provides one-way value binding.

spiki.data('formDemo', () => ({
    name: 'Alice',
    isSubscribed: true,
    get displayName() { return this.name || 'Anonymous'; },
    get formattedName() { return this.name ? `Developer: ${this.name}` : ''; }
}));

s-if Conditional Mounting

s-if="condition" conditionally mounts or completely unmounts DOM nodes from the tree based on boolean evaluation. Supports negation using ! prefix.

<!-- Mounted when show is true -->
<div s-if="show">Mounted when true</div>

<!-- Mounted when show is false (negation) -->
<div s-if="!show">Mounted when false</div>

:hidden Dynamic Visibility

Spiki uses native HTML attribute binding :hidden="!condition" as a high-performance hide-show. The element remains in the DOM tree while toggling display visibility. Fully supports ! negation.

<!-- Visible when isVisible is true -->
<div :hidden="!isVisible">Visible when true</div>

<!-- Visible when isVisible is false (negation) -->
<div :hidden="isVisible">Visible when false</div>

s-for & s-key

Render lists by placing s-for="item in array" on a <template> element. Always supply a unique key with s-key="id" for optimal DOM reuse. Inside loop event handlers, Spiki automatically provides this.item.

<template s-for="(fruit, idx) in fruits" s-key="id">
    <li>
        <span s-text="fruit.name"></span>
        <!-- Notice: No arguments passed to removeItem! -->
        <button s-click="removeItem">Remove</button>
    </li>
</template>

spiki.data('listDemo', () => ({
    fruits: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' } ],
    removeItem() {
        // 'this.fruit' and 'this.idx' are automatically injected into 'this'!
        this.fruits.splice(this.idx, 1);
    }
}));

s-init & s-destroy

s-init="onMount" executes immediately when the component mounts. s-destroy="onUnmount" runs when the component is unmounted from DOM tree to prevent memory leaks. Both functions receive the DOM element el as parameter.

<div s-data="userApp" s-init="onMount" s-destroy="onUnmount">
    <span s-text="status"></span>
</div>

spiki.data('userApp', () => ({
    status: 'Booting...',
    onMount(el) {
        console.log('Component mounted on element:', el);
        this.status = 'Ready';
    },
    onUnmount(el) {
        console.log('Cleaning up resources...');
    }
}));

s-effect Reactive Side Effects

s-effect="handler" registers an automatic reactive watcher function. Spiki automatically tracks all reactive state properties accessed inside the handler function and re-runs it whenever those properties mutate!

<div s-data="noteApp" s-effect="autoSave">
    <textarea s-model="note"></textarea>
</div>

spiki.data('noteApp', () => ({
    note: '',
    autoSave() {
        // Read reactive state (this.note) and save to external storage
        localStorage.setItem('user_note', this.note);
    }
}));