feat: bring back react support

README.md

@@ -126,44 +126,55 @@ You can continue to run actions on the runtime and await their resulting new sta
 
 ## React Runtime
 
-If you are using React, you can create a machine provider and access the current state with hooks.
+If you are using React, you can interact with a machine with hooks.
 
 ```typescript
-import { createFizzContext, useMachine, Enter, ActionCreatorType, createAction } from "@tdreyno/fizz"
+import {
+  useMachine,
+  Enter,
+  ActionCreatorType,
+  createAction,
+} from "@tdreyno/fizz"
 
 const finished = createAction<"Finished", string>("Finished")
 type Finished = ActionCreatorType<typeof finished>
 
 const Start = state<Enter | Finished>({
   Enter: noop,
-  Finished: () => End()
+  Finished: () => End(),
 })
 
 const End = state<Enter>({
   Enter: noop,
 })
 
-const Machine = createFizzContext({
-  Start,
-  End,
-}, {
-  finish
-})
-
-const ShowState = () => {
-  const { currentState, actions: { finished } } = useMachine(Machine)
-
-  return <div role="name">
-    <h1>{currentState.name}</h1>
-    <button onClick={() => finished()}>
-  </div>
+const useShowMachine = () => {
+  // Can store in context to better share.
+  return useMachine(
+    {
+      Start,
+      End,
+    },
+    {
+      finish,
+    },
+    Start(),
+  )
 }
 
-const App = () => (
-  <Machine.Provider initialState={States.Start()}>
-    {({ currentState, actions }) => <ShowState />}
-  </Machine.Provider>
-)
+const Show = () => {
+  const { actions, currentState } = useShowMachine()
+
+  return (
+    <div>
+      {currentState.state === Start ? (
+        <button onClick={() => actions.finished()}>Finish</button>
+      ) : (
+        <div>Finished</div>
+      )}
+    </div>
+  )
+}
 ```
 
 ## Svelte Runtime

package.json

@@ -41,6 +41,7 @@
     "@semantic-release/github": "^10.0.3",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/svelte": "^5.1.0",
+    "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.5",
     "@types/node": "^20.12.2",
     "@types/serialize-javascript": "^5.0.4",
@@ -56,6 +57,7 @@
     "prettier": "^3.2.5",
     "semantic-release": "^24.0.0",
     "serialize-javascript": "^6.0.1",
+    "react": "^18.3.1",
     "svelte": "^4.2.17",
     "svelte-jester": "^3.0.0",
     "svelte-preprocess": "^5.1.4",
@@ -64,7 +66,8 @@
     "typescript-eslint": "^8.0.0-alpha.24"
   },
   "peerDependencies": {
-    "svelte": "^4.0"
+    "svelte": "^4.0",
+    "react": "^18.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/__tests__/loadingMachine/core/states/Ready.ts

@@ -6,7 +6,7 @@ import { state } from "../../../../state"
 import { output } from "../../../../effect"
 import { hello } from "../outputActions"
 
-type Actions = Enter | Reset | World // | ReEnter
+type Actions = Enter | Reset | World
 type Data = [Shared]
 
 export default state<Actions, Data>(
@@ -18,8 +18,6 @@ export default state<Actions, Data>(
     World: ([shared], __, { update }) => {
       return update([{ ...shared, didWorld: true }])
     },
-
-    // ReEnter: (data, _, { reenter }) => reenter(data),
   },
   { name: "Ready" },
 )

src/index.ts

@@ -5,3 +5,4 @@ export * from "./errors.js"
 export * from "./runtime.js"
 export * from "./state.js"
 export * from "./svelte/index.js"
+export * from "./react/index.js"