Rocket Counter Pro

Rocket is currently in alpha – available with Datastar Pro.

Demo

Explanation #

A minimal Rocket component showing local actions. The actions.increment function lives 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    actions.increment = () => {
 5      $$count = $$count + 1;
 6    };
 7  </script>
 8  <button data-on:click="@increment()">
 9    Count: <span data-text="$$count"></span>
10  </button>
11</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>