with/this/dispatch for counter

Author: anotherjesse

typescript/packages/lookslike-high-level/src/recipes/counter.tsx

@@ -1,11 +1,25 @@
 import { h } from "@commontools/common-html";
-import { Spell, type OpaqueRef } from "@commontools/common-builder";
+import { Spell, type OpaqueRef, handler } from "@commontools/common-builder";
 
 type CounterState = {
   title: string;
   count: number;
 };
 
+const thisHandler = handler<
+  {},
+  { count: number }
+>(function () {
+  this.count += 1;
+});
+
+const withHandler = handler<
+  {},
+  { count: number }
+>(function ({}, state) {
+  state.count += 1;
+});
+
 export class CounterSpell extends Spell<CounterState> {
   constructor() {
     super();
@@ -32,7 +46,9 @@ export class CounterSpell extends Spell<CounterState> {
       <div>
         <common-input value={title} oncommon-input={this.dispatch("title")} />
         <p>count: {count}</p>
-        <common-button onclick={this.dispatch("increment")}>Increment</common-button>
+        <common-button onclick={this.dispatch("increment")}>dispatch</common-button>
+        <common-button onclick={thisHandler.bind({count})}>this</common-button>
+        <common-button onclick={withHandler.with({count})}>with</common-button>
       </div>
     );
   }