@resin-js/render v0.1.2

@resin-js/render

Optional rendering utilities for Resin.js. Build reactive components without the framework complexity.

Features

• 🎨 Component-style rendering
• 📝 Template syntax
• 🔄 List rendering
• ⚡ Conditional rendering
• 🎯 Event handling

Installation

npm install @resin-js/core @resin-js/render

Usage

Basic Rendering

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

const greeting = resin('Hello World')
    .build()
    .classList('greeting')
    .render(ctx => `<h1>${ctx.value}</h1>`);

greeting.appendTo(document.body);

List Rendering

const todos = resin([
    { id: 1, text: 'Learn Resin', done: false },
    { id: 2, text: 'Write docs', done: false }
])
    .build()
    .filter(todo => !todo.done)
    .for((todo, ctx) => 
        todo
            .classList('todo-item')
            .render(ctx => `
                <li>${ctx.value.text}</li>
            `)
    )
    .render({
        element: 'ul',
        classList: ['todo-list']
    });

Components

import { component } from '@resin-js/render';

const TodoItem = component<{ text: string, done: boolean }>(props => {
    return resin(props)
        .build()
        .classList('todo-item', () => props.done && 'completed')
        .render(ctx => `
            <li>
                <span>${ctx.value.text}</span>
                <span>${ctx.value.done ? '✓' : '◯'}</span>
            </li>
        `);
});

API Reference

build<T>(resin: Resin<T>): Renderable<T>

Creates a renderable from a resin value.

Renderable<T>

• if(condition: Resin<boolean>): Conditional rendering
• classList(...classes): Add CSS classes
• render(template): Render content
• appendTo(element): Mount to DOM

component<Props>(render: (props: Props) => Renderable<any>)

Create reusable components.

License

MIT