Bare UI Patterns

A lightweight, reactive library for building dynamic UIs with fine-grained reactivity and practical DOM access.

Installation

npm bup.js

Example

    import { signal, query } from 'bup.js';

    const [count, setCount] = signal(0);

    query('#counter').text(() => `Count: ${count()}`);
    query('#increment').on('click', () => setCount(count() + 1));

Reactivity API

bup's reactivity is inspired by solid.js. Here is how it works:

signal(initialValue) Creates a reactive signal and returns getter and setter.

const [count, setCount] = signal(0);
setCount(5);
setCount(n => n + 1);

console.log(`Count: ${count()}`); // "Count: 6"

effect(cb) Runs a callback when dependencies (used signals) change.

const [count, setCount] = signal(0);

effect(() => {
  console.log('Count:', count()); // "Count: 0"
  return () => console.log('Cleanup'); // Optional cleanup
});

setCount(1) // "Count: 1"

DOM API

query(selector) / queryAll(selector) Finds elements and returns a chainable ElementSet.

query('#app').text(() => 'Hello');
queryAll('.item').attr('value': () => 'active');

create(tagName, attributes?) Creates a new HTML element.

const button = create('button', { class: 'btn', id: 'submit' });

ElementSet:

.text(getter) Sets reactive text content.

query('#greeting').text(() => `Hello ${name()}!`);

.attr(name, getter) Sets a reactive attribute.

query('button').attr('disabled', () => isDisabled() ? 'true' : null);

.show(getter) Reactively shows or hides elements.

query('.modal').show(() => isOpen());

.on(eventName, callback) Attaches an event listener.

query('button').on('click', () => console.log('clicked'));

Examples

Counter

const [count, setCount] = signal(0);
query('#counter').text(() => count());
query('button').on('click', () => setCount(prev => prev + 1));

Todo List

const [todos, setTodos] = signal([]);
query('ul').children(
  () => todos(),
  (parent, todo) => {
    const div = create('div');
    div.textContent = todo.text;
    parent.appendChild(div);
  }
);

License

MIT