Rocket Counter Pro

Rocket is currently in alpha – available in the Datastar Pro repo.

Demo

Explanation #

A minimal Rocket component showing local actions. The increment action is registered with action({ name, apply }) inside the component and is called from data-on:click. Each instance keeps its own $$count.

Usage Example #

1<my-counter></my-counter>
2<my-counter></my-counter>

Rocket Component #

 1<template data-rocket:my-counter>
 2  <script>
 3    $$count = 0;
 4    action({
 5      name: 'increment',
 6      apply() {
 7        $$count = $$count + 1;
 8      },
 9    });
10  </script>
11  <button data-on:click="@increment()">
12    Count: <span data-text="$$count"></span>
13  </button>
14</template>

Declarative Variant #

The declarative version is preferred for simple cases. The script-based version above illustrates how to expose custom actions when you need them.

Demo

Usage Example #

1<my-counter-declarative count="3"></my-counter-declarative>

Rocket Component #

1<template data-rocket:my-counter-declarative 
2          data-props:count="int|min=0|=0"
3>
4  <button data-on:click="$$count++">
5    Count: <span data-text="$$count"></span>
6  </button>
7</template>