Support typed events in hook send() (#235)

* Support typed events in hook send()

* Add changeset

.changeset/green-pants-search.md

@@ -0,0 +1,16 @@
+---
+"robot-hooks": minor
+"haunted-robot": minor
+"preact-robot": minor
+"react-robot": minor
+---
+
+Typed event for send() in hooks
+
+This adds the same typed event support for `send()` from hooks, for ex in React:
+
+```ts
+const [state, send] = useMachine(machine);
+
+send('this-is-typed');
+```

packages/robot-hooks/index.d.ts

@@ -1,11 +1,11 @@
 declare module 'robot-hooks' {
-  import type {Machine, SendFunction, Service} from 'robot3';
+  import type {Machine, SendFunction, Service, GetMachineTransitions} from 'robot3';
   function useMachine<M extends Machine>(
     machine: M,
     initialContext?: M['context']
   ): [
     M['state'] & {context: M['context']},
-    SendFunction,
+    SendFunction<GetMachineTransitions<M>>,
     Service<typeof machine>
   ];
 

packages/robot-hooks/package.json

@@ -11,6 +11,8 @@
   ],
   "scripts": {
     "test": "wireit",
+    "test:browser": "wireit",
+    "test:types": "wireit",
     "build": "wireit"
   },
   "repository": {
@@ -33,6 +35,16 @@
   },
   "wireit": {
     "test": {
+      "dependencies": [
+        "test:types",
+        "test:browser"
+      ]
+    },
+    "test:types": {
+      "command": "tsc -p test/types/tsconfig.json",
+      "files": []
+    },
+    "test:browser": {
       "command": "node-qunit-puppeteer http://localhost:1965/packages/robot-hooks/test/test.html 10000",
       "dependencies": [
         "../..:server"

packages/robot-hooks/test/types/send.ts

@@ -0,0 +1,29 @@
+import { expectTypeOf } from 'expect-type';
+import { test } from 'node:test';
+import {
+  createMachine,
+  transition,
+  state,
+} from 'robot3';
+import {
+  createUseMachine
+} from 'robot-hooks';
+
+test('send(event) is typed', () => {
+  const useMachine = createUseMachine(null, null);
+  const machine = createMachine({
+    one: state(transition('go-two', 'two')),
+    two: state(transition('go-one', 'one')),
+    three: state()
+  });
+
+  const [_state, send] = useMachine(machine);
+
+  type Params = Parameters<typeof send>;
+  type EventParam = Params[0];
+  type StringParams = Extract<EventParam, string>;
+  expectTypeOf<StringParams>().toEqualTypeOf<'go-one' | 'go-two'>();
+
+  type ObjectParams = Extract<EventParam, { type: string; }>;
+  expectTypeOf<ObjectParams['type']>().toEqualTypeOf<'go-one' | 'go-two'>();
+});

packages/robot-hooks/test/types/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "include": ["../..", "."],
+  "exclude": ["../../node_modules"],
+  "compilerOptions": {
+    /* Base Options: */
+    "esModuleInterop": true,
+    "skipLibCheck": false,
+    "target": "es2022",
+    "allowJs": false,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "moduleResolution": "nodenext",
+
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    /* AND if you're building for a library: */
+    "declaration": true,
+
+    /* AND if you're building for a library in a monorepo: */
+    "composite": true,
+    "declarationMap": true,
+
+    /* If NOT transpiling with TypeScript: */
+    "module": "nodenext",
+    "noEmit": true,
+
+    /* If your code runs in the DOM: */
+    "lib": ["es2022", "dom", "dom.iterable"]
+  }
+}