Rocket Counter Pro

Rocket is currently in beta.

Demo

Explanation #

A minimal Rocket component showing local state. Each instance creates its own counter in setup(), seeds it from the typed count prop, and renders that local value directly from Rocket state.

Usage Example #

1<my-counter count="7"></my-counter>
2<my-counter count="11"></my-counter>

Rocket Component #

 1import { rocket } from 'datastar'
 2
 3rocket('my-counter', {
 4  mode: 'light',
 5  props: ({ number }) => ({
 6    count: number.step(1).min(0),
 7  }),
 8  setup: ({ $$, observeProps, props }) => {
 9    $$.counter = props.count
10    observeProps(() => {
11      $$.counter = props.count
12    }, 'count')
13  },
14  render: ({ html }) => html`
15    <button
16      data-on:click="$$counter++"
17      data-text="'Count: ' + $$counter"
18    ></button>
19  `,
20})