@vielzeug/ore

Functional web-component authoring on top of ripple

Installation

pnpm add @vielzeug/ore @vielzeug/ripple
npm install @vielzeug/ore @vielzeug/ripple
yarn add @vielzeug/ore @vielzeug/ripple

Quick Start

import { computed, signal } from '@vielzeug/ripple';
import { bind, css, define, html, onMounted, prop } from '@vielzeug/ore';

define('my-counter', {
  props: {
    label: prop.string('Count'),
    step: prop.number(1),
  },
  styles: [
    css`
      :host {
        display: inline-grid;
        gap: 0.5rem;
      }
    `,
  ],
  setup(props) {
    const count = signal(0);
    const doubled = computed(() => count.value * 2);

    bind({ class: { 'is-positive': () => count.value > 0 } });

    onMounted(() => console.log('mounted'));

    return html`
      <button @click=${() => (count.value += props.step.value)}>${props.label}: ${count}</button>
      <p>Doubled: ${doubled}</p>
    `;
  },
});

Features

• prop.oneOf(allowed, defaultValue?) restricts string or number props to a runtime-checked set.
• model(signal, options?) binds a form control's value or checked state in both directions.
• Event bindings support .stop, .prevent, .once, and .capture modifiers.
• each() preserves the last successful list when a render callback fails.

Documentation

• Overview
• Usage Guide
• API Reference
• Examples
• Migration Guide

License

MIT © Helmuth Saatkamp: part of the Vielzeug monorepo.