Getting Started

Installation

npm install @rimitive/core @rimitive/signals @rimitive/view

Your First App

Create a counter with reactive state and DOM rendering:

import { compose } from '@rimitive/core';
import { SignalModule, ComputedModule, EffectModule } from '@rimitive/signals/extend';
import { createDOMAdapter } from '@rimitive/view/adapters/dom';
import { createElModule } from '@rimitive/view/el';
import { MountModule } from '@rimitive/view/deps/mount';

// 1. Create the adapter
const adapter = createDOMAdapter();

// 2. Compose your service
const svc = compose(
  SignalModule,
  ComputedModule,
  EffectModule,
  createElModule(adapter),
  MountModule
);

// 3. Destructure the primitives
const { signal, computed, el, mount } = svc;

// 4. Create reactive state
const count = signal(0);
const doubled = computed(() => count() * 2);

// 5. Build the UI
const App = () =>
  el('div')(
    el('h1')('Counter'),
    el('p')(computed(() => `Count: ${count()}`)),
    el('p')(computed(() => `Doubled: ${doubled()}`)),
    el('button').props({
      onclick: () => count(count() + 1)
    })('Increment')
  );

// 6. Mount it
const app = mount(App());
document.body.appendChild(app.element!);

That’s it. Click the button, the count updates, the DOM updates automatically.

What Just Happened?

1. compose() wires modules together into a service
2. signal() creates reactive state — read with count(), write with count(newValue)
3. computed() derives values that update when dependencies change
4. el() creates DOM elements with reactive children and props
5. mount() attaches the element tree to the DOM

When count changes, only the parts that depend on it re-render. No virtual DOM diffing, no re-rendering the whole tree.

Next Steps

• Composing Signals — Understand the reactive primitives
• Creating a Behavior — Extract reusable logic
• Adding View — Deep dive into el() and rendering
• Dynamic Views — Lists with map(), conditionals with match()