Spikijs

~5 KB (Gzip): Reactive JavaScript micro-framework

Documentation

Read the full documentation on GitHub

Directives Reference

| Directive | Description | Example | | --- | --- | --- | | s-data | Defines component scope. | <div s-data="app"> | | s-text | Sets text content (Safe). | <span s-text="msg"> | | s-html | Sets innerHTML (Use carefully). | <div s-html="htmlContent"> | | s-if | Conditional rendering. | <p s-if="showMe"> | | s-for | Loops content (requires <template>). | <template s-for="item in list"> | | s-key | Unique key for loops (Performance). | <template ... s-key="id"> | | s-model | Two-way binding (Inputs). | <input s-model="text"> | | s-value | One-way value binding. | <input s-value="text"> | | s-effect | Runs function on data change. | <div s-effect="autoSave"> | | s-ref | Stores DOM reference in $refs. | <input s-ref="myInput"> | | s-init | Runs on mount. | <div s-init="onLoad"> | | s-destroy | Runs on unmount. | <div s-destroy="onRemove"> | | s-ignore | Skips compilation (Static content). | <div s-ignore> | | :[attr] | Dynamic attribute binding. | <img :src="imgUrl"> | | :class | Dynamic class toggling. | <div :class="classConfig"> | | s-[event] | Event listener. | <button s-click="save"> | | this.$root | Access the root elm. | this.$root.classList.add('loaded'); | | this.$store | Access the global store. | this.$store.theme | | spiki.store() | Get or set global store. | spiki.store('theme', 'dark') | | spiki.raw() | Proxy to original object. | spiki.raw(this.users) |

Installation

via NPM

npm install spikijs

via CDN

You can use the CDN directly in your HTML using a standard script tag:

<script src="//unpkg.com/spikijs"></script>

Quick Start

Here is a simple "Counter" example to show how Spikijs works.

1. HTML Layout

Use special s- attributes to bind data and events to your HTML.

<div s-data="counter">
    <h1 s-text="title"></h1>
    <h2 s-text="count"></h2>
    
    <button s-click="decrement">-</button>
    <button s-click="increment">+</button>
</div>

2. JavaScript Logic

Register your component logic and start the framework.

import spiki from 'spikijs'; // required in script module

// Register the 'counter' component
spiki.data('counter', () => ({
    count: 0,
    title: 'Hello Spiki',
    
    increment() {
        this.count++;
    },
    decrement() {
        this.count--;
    }
}));

// Initialize the framework
spiki.start();

License

MIT