[release] Enable async handler

README.md

@@ -234,10 +234,6 @@ export function TodoApp(props: TodoAppProps) {
     },
   ]);
 
-  const handleToggleTodo = (id: number) => {
-    dispatch('ToggleTodo', { id });
-  };
-
   return (
     <div>
       <h2>Todo List:</h2>
@@ -246,7 +242,7 @@ export function TodoApp(props: TodoAppProps) {
           <li
             key={todo.id}
             style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
-            onClick={() => handleToggleTodo(todo.id)}
+            onClick={() => dispatch('ToggleTodo', { id })}
           >
             {todo.text}
           </li>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@revskill10/use-state",
   "description": "",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "",
   "license": "MIT",
   "keywords": [],

src/CONTRIBUTING.md

@@ -0,0 +1,9 @@
+# How to contribute
+
+## Develop locally with storybook
+
+```js
+pnpm dev
+```
+
+## Create pull request

src/examples/Async.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { state$ } from '../hooks';
+
+export type ExampleProps = {
+  text?: String;
+};
+interface Message {
+  Decrement: {
+    amount: number;
+  };
+  Increment: {};
+}
+interface AppState {
+  loading?: boolean;
+  value: number;
+}
+export function AsyncExample(props: ExampleProps) {
+  const [count, dispatch] = state$<AppState, Message>({ value: 0 }, [
+    {
+      messages: ['Increment'],
+      handler: async (c) => {
+        c.loading.set(true);
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1000);
+        });
+        c.loading.set(false);
+        c.value.set(c.value.get() + 1);
+      },
+      onChange: (c) => {
+        // eslint-disable-next-line no-console
+        console.log(`current count is ${c.get()}`);
+      },
+    },
+    {
+      messages: ['Decrement'],
+      handler: (c, payload) => {
+        if ('amount' in payload) {
+          c.value.set(c.value.get() - payload.amount ?? 1);
+        }
+      },
+    },
+  ]);
+  return (
+    <>
+      {`${props.text} ${count.value}`}
+      <button
+        onClick={() => dispatch('Increment', {})}
+        type="button"
+        id="increment-button"
+        disabled={count.loading}
+      >
+        Increment
+      </button>
+      <button
+        onClick={() => dispatch('Decrement', { amount: 3 })}
+        type="button"
+        id="decrement-button"
+      >
+        Decrement
+      </button>
+    </>
+  );
+}

src/hooks/use-state/hook.ts

@@ -9,7 +9,7 @@ type HandlerCreator<State, T> = (
   state: Observable<State>,
   message: T[keyof T],
   bus?: EventBus<T>
-) => void;
+) => void | Promise<void>;
 type Listener = {
   unsubscribe: () => void;
 };

src/stories/Async.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { AsyncExample as Example } from '../examples/Async';
+
+export default {
+  title: 'AsyncExample',
+  component: Example,
+  argTypes: {},
+} as Meta<typeof Example>;
+
+const Template: StoryFn<typeof Example> = (args) => <Example {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  text: 'Clicked this many times:',
+};