Resin.js

A lightweight reactive library for native web development. Resin provides reactivity, enhancing vanilla JavaScript applications.

Features

• 🎯 Zero-dependency DOM binding
• 🔄 Simple, powerful state management
• 📦 No build step required
• 🎨 Framework-agnostic
• 🚀 Predictable performance
• 🎭 TypeScript-first

Installation

npm install @resin-js/core

Basic Usage

import { resin, bind } from '@resin-js/core';

// Create reactive state
const counter = resin(0);

// Bind to DOM
bind(document.querySelector('.counter'), counter);

// Updates automatically
counter.value++; // DOM updates instantly

Core Concepts

State Management

// Simple values
const count = resin(0);

// Complex objects
const user = resin({
    name: 'John',
    settings: {
        theme: 'dark',
        notifications: true
    }
});

// Arrays
const todos = resin([
    { id: 1, text: 'Learn Resin', done: false }
]);

// Maps
const userMap = resin(new Map());

DOM Binding

// Basic binding
bind(element, state);

// Conditional rendering
bind(element, state, {
    if: value => value > 0
});

// Value transformation
bind(element, state, {
    map: value => `Count: ${value}`
});

// Class bindings
bind(element, state, {
    class: {
        'active': value => value.isActive,
        'disabled': value => !value.isEnabled
    }
});

// Attribute bindings
bind(element, state, {
    attr: {
        'disabled': value => !value.isValid,
        'aria-expanded': value => value.isOpen
    }
});

Array Operations

const todos = resin([
    { id: 1, text: 'Learn Resin', done: false },
    { id: 2, text: 'Build app', done: true }
]);

// Reactive filtering
const activeTodos = todos.filterResin(todo => !todo.done);

// Reactive mapping
const todoTexts = todos.mapResin(todo => todo.text);

// Reactive find
const firstActive = todos.findResin(todo => !todo.done);

// Sorted view
const sortedTodos = todos.sortedResin((a, b) => a.id - b.id);

// Regular array operations work too
todos.value.push({ id: 3, text: 'New todo', done: false });

Map Operations

const users = resin(new Map([
    ['user1', { name: 'John', age: 30 }]
]));

// Reactive get
const user1 = users.getResin('user1');

// Reactive entries
const entries = users.entriesResin();

// Regular Map operations work
users.value.set('user2', { name: 'Jane', age: 25 });

Event Handling

state.on('init', ({ value }) => {
    console.log('Initial value:', value);
});

state.on('change', ({ value, oldValue }) => {
    console.log('Value changed:', oldValue, '->', value);
});

state.on('error', ({ error }) => {
    console.error('Error occurred:', error);
});

Computed Values

import { computed } from '@resin-js/core';

const firstName = resin('John');
const lastName = resin('Doe');

const fullName = computed(() => 
    `${firstName.value} ${lastName.value}`
);

Batch Updates

import { batch } from '@resin-js/core';

batch(() => {
    state1.value = newValue1;
    state2.value = newValue2;
    // DOM updates once at the end
});

Advanced Features

Persistence

const settings = resin({
    theme: 'light'
}, {
    persist: {
        key: 'app-settings',
        // Optional custom serialization
        serialize: JSON.stringify,
        deserialize: JSON.parse
    }
});

Validation

const form = resin({
    email: ''
}, {
    validate: value => ({
        valid: value.email.includes('@'),
        error: 'Invalid email format'
    })
});

Transform Pipeline

const input = resin('', {
    transform: [
        value => value.trim(),
        value => value.toLowerCase()
    ]
});

Use Cases

• Enhanced vanilla JavaScript applications
• Progressive enhancement of existing sites
• Small to medium web applications
• Form handling
• Dynamic UI updates
• Real-time data display
• Interactive components

Why Resin?

• Simple Mental Model: Just state and bindings
• Progressive Enhancement: Add reactivity where needed
• Framework Freedom: Works with any JavaScript code
• Type Safety: Full TypeScript support
• Predictable Updates: Direct DOM manipulation
• Small Learning Curve: Familiar JavaScript patterns

Browser Support

Supports all modern browsers (ES2015+).

License

MIT

Contributing

Contributions welcome! Please read our contributing guidelines and code of conduct.

Packages

• @resin-js/core: Core reactivity system