@lite-fsm/react 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -0
- package/dist/FSMProvider.d.cts +2 -3
- package/dist/FSMProvider.d.ts +2 -3
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/persistContext.d.cts +10 -0
- package/dist/persistContext.d.ts +10 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @lite-fsm/react
|
|
2
|
+
|
|
3
|
+
React bindings for `lite-fsm`: a context provider, selector and transition hooks, hydration helpers, and a standalone `defineMachine` hook API.
|
|
4
|
+
|
|
5
|
+
The package is marked with `"use client"`. It can be imported from SSR/RSC code, but hooks and providers must run in the client React tree.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @lite-fsm/core @lite-fsm/react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For mutable Immer-style reducers, add:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @lite-fsm/middleware immer
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick Example
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { MachineManager, createMachine, type FSMEvent } from "@lite-fsm/core";
|
|
23
|
+
import { FSMContextProvider, useSelector, useTransition } from "@lite-fsm/react";
|
|
24
|
+
|
|
25
|
+
type CounterEvent = FSMEvent<"INCREMENT"> | FSMEvent<"DECREMENT"> | FSMEvent<"RESET">;
|
|
26
|
+
|
|
27
|
+
const counter = createMachine<CounterEvent>({
|
|
28
|
+
config: {
|
|
29
|
+
IDLE: {
|
|
30
|
+
INCREMENT: null,
|
|
31
|
+
DECREMENT: null,
|
|
32
|
+
RESET: null,
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
initialState: "IDLE",
|
|
36
|
+
initialContext: { count: 0 },
|
|
37
|
+
reducer: (slice, event) => {
|
|
38
|
+
switch (event.type) {
|
|
39
|
+
case "INCREMENT":
|
|
40
|
+
return { ...slice, context: { count: slice.context.count + 1 } };
|
|
41
|
+
case "DECREMENT":
|
|
42
|
+
return { ...slice, context: { count: slice.context.count - 1 } };
|
|
43
|
+
case "RESET":
|
|
44
|
+
return { ...slice, context: { count: 0 } };
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
const manager = MachineManager({ counter });
|
|
50
|
+
|
|
51
|
+
export function App() {
|
|
52
|
+
return (
|
|
53
|
+
<FSMContextProvider machineManager={manager}>
|
|
54
|
+
<Counter />
|
|
55
|
+
</FSMContextProvider>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function Counter() {
|
|
60
|
+
const count = useSelector((state) => state.counter.context.count);
|
|
61
|
+
const transition = useTransition<CounterEvent>();
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<div>
|
|
65
|
+
<p>Count: {count}</p>
|
|
66
|
+
<button onClick={() => transition({ type: "INCREMENT" })}>+</button>
|
|
67
|
+
<button onClick={() => transition({ type: "DECREMENT" })}>-</button>
|
|
68
|
+
<button onClick={() => transition({ type: "RESET" })}>Reset</button>
|
|
69
|
+
</div>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Main Exports
|
|
75
|
+
|
|
76
|
+
- `FSMContextProvider` - provides a `MachineManager` to React hooks.
|
|
77
|
+
- `useSelector` - subscribes to a selected part of manager state.
|
|
78
|
+
- `useTransition` - returns `manager.transition`.
|
|
79
|
+
- `useManager` - returns the current manager from context.
|
|
80
|
+
- `FSMHydrationBoundary` and `useHydrateSnapshot` - React hydration helpers for snapshots.
|
|
81
|
+
- `defineMachine` - creates a standalone shared machine hook.
|
|
82
|
+
|
|
83
|
+
## Documentation
|
|
84
|
+
|
|
85
|
+
- [Full documentation](https://alexandergureev.github.io/lite-fsm/)
|
|
86
|
+
- [React package guide](https://alexandergureev.github.io/lite-fsm/packages/react)
|
|
87
|
+
- [React API reference](https://alexandergureev.github.io/lite-fsm/api/react)
|
package/dist/FSMProvider.d.cts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { AnyEvent, IMachineManager, MachinesState, MachineStore } from "@lite-fsm/core";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
};
|
|
3
|
+
import type { FSMPersistLifecycle } from "./persistContext";
|
|
4
|
+
export type { FSMPersistLifecycle } from "./persistContext";
|
|
6
5
|
export type FSMContextProviderProps<S extends MachineStore, P extends AnyEvent = AnyEvent> = React.PropsWithChildren<{
|
|
7
6
|
machineManager: IMachineManager<S, P>;
|
|
8
7
|
getServerSnapshot?: () => MachinesState<S>;
|
package/dist/FSMProvider.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { AnyEvent, IMachineManager, MachinesState, MachineStore } from "@lite-fsm/core";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
};
|
|
3
|
+
import type { FSMPersistLifecycle } from "./persistContext";
|
|
4
|
+
export type { FSMPersistLifecycle } from "./persistContext";
|
|
6
5
|
export type FSMContextProviderProps<S extends MachineStore, P extends AnyEvent = AnyEvent> = React.PropsWithChildren<{
|
|
7
6
|
machineManager: IMachineManager<S, P>;
|
|
8
7
|
getServerSnapshot?: () => MachinesState<S>;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var le=Object.create;var v=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var he=(e,r)=>{for(var t in r)v(e,t,{get:r[t],enumerable:!0})},V=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of me(r))!fe.call(e,n)&&n!==t&&v(e,n,{get:()=>r[n],enumerable:!(o=de(r,n))||o.enumerable});return e};var S=(e,r,t)=>(t=e!=null?le(Me(e)):{},V(r||!e||!e.__esModule?v(t,"default",{value:e,enumerable:!0}):t,e)),xe=e=>V(v({},"__esModule",{value:!0}),e);var Ce={};he(Ce,{FSMContext:()=>l,FSMContextProvider:()=>Q,FSMHydrationBoundary:()=>X,defineMachine:()=>ae,useHydrateSnapshot:()=>$,useManager:()=>s,useSelector:()=>te,useTransition:()=>re});module.exports=xe(Ce);var B=S(require("react"),1),_="Hooks from @lite-fsm/react must be used within FSMContextProvider.",l=B.default.createContext(null);var i=S(require("react"),1);var x=S(require("react"),1),U=x.default.createContext(null),W=U.Provider,P=()=>x.default.useContext(U),q=x.default.createContext(null),g=q.Provider,C=()=>x.default.useContext(q);var K=S(require("react"),1);var s=()=>{let e=K.default.useContext(l);if(!e)throw new Error(_);return e};var O=S(require("react"),1),F=typeof window>"u"?O.default.useEffect:O.default.useLayoutEffect;var b=require("react/jsx-runtime"),N=(e,r,t,o)=>o!==null&&e!==null&&e.snapshot===r&&e.strategy===t&&e.actions===o,X=({snapshot:e,strategy:r,transitionAfterHydrate:t,children:o})=>{let n=s(),c=P(),m=C(),a=r??"merge",R=i.default.useRef(null),[u,M]=i.default.useState(null),w=i.default.useRef(null),[se,ie]=i.default.useState(null),p=i.default.useMemo(()=>{if(!t)return null;let f=Array.isArray(t)?t:[t];return f.length>0?f:null},[t]),y=c?.getState()??n.getState(),A=i.default.useMemo(()=>n.getHydratedState(e,{baseState:y,strategy:a}),[y,a,n,e]),ce=N(se,e,a,p),Se=u!==null&&u.committedState===y&&u.snapshot===e&&u.strategy===a,H=A!==y&&!ce&&!Se,D=m?.getState()??y,L=i.default.useMemo(()=>n.getHydratedState(e,{baseState:D,strategy:a}),[a,n,D,e]);F(()=>{let f=N(w.current,e,a,p),k=p!==null&&!f,I=H&&!f;if(!I&&!k)return;let T=R.current;if(I&&!(T?.baseState===y&&T.snapshot===e&&T.strategy===a)){n.hydrate(e,{strategy:a});let h={baseState:y,committedState:n.getState(),snapshot:e,strategy:a};R.current=h,M(h)}if(k&&p!==null){for(let ue of p)n.transition(ue);let h={snapshot:e,strategy:a,actions:p};w.current=h,ie(h)}},[y,H,a,n,e,p]);let ye=i.default.useMemo(()=>({getState:()=>A}),[A]),pe=i.default.useMemo(()=>({getState:()=>L}),[L]);return(0,b.jsx)(g,{value:pe,children:H?(0,b.jsx)(W,{value:ye,children:o}):o})};var d=S(require("react"),1);var z=S(require("react"),1),Y=Symbol.for("@lite-fsm/react.persistContext"),j=globalThis,G=j[Y]??(j[Y]=z.default.createContext(null)),ve=e=>{let r=e;return typeof r.getStatus=="function"&&typeof r.subscribeStatus=="function"},J=e=>{if(!e)return null;let r=Array.isArray(e)?e:[e],t=null;for(let o of r)if(ve(o)){if(t)return null;t=o}return t};var E=require("react/jsx-runtime"),Q=({children:e,getServerSnapshot:r,machineManager:t,persist:o})=>{let n=d.default.useMemo(()=>t,[t]),c=d.default.useMemo(()=>t.getState(),[t]),m=d.default.useMemo(()=>({getState:r??(()=>c)}),[r,c]),a=d.default.useMemo(()=>J(o),[o]);return d.default.useEffect(()=>{if(!o)return;let u=(Array.isArray(o)?o:[o]).map(M=>M.start());return()=>{for(let M of u)M()}},[o]),(0,E.jsx)(l.Provider,{value:n,children:(0,E.jsx)(G.Provider,{value:a,children:(0,E.jsx)(g,{value:m,children:e})})})};var Z=require("react");var $=(e,r)=>{let t=s(),o=r?.strategy??"merge",n=(0,Z.useRef)(null);F(()=>{n.current?.snapshot===e&&n.current.strategy===o||(t.hydrate(e,{strategy:o}),n.current={snapshot:e,strategy:o})},[t,e,o])};var ee=S(require("use-sync-external-store/shim/with-selector"),1);var{useSyncExternalStoreWithSelector:Pe}=ee.default;function te(e,r){let t=s(),o=P(),n=C(),c=o?.getState??t.getState,m=n?.getState??c;return Pe(t.onTransition,c,m,e,r)}var re=()=>s().transition;var oe=S(require("use-sync-external-store/shim/with-selector"),1),ne=require("@lite-fsm/core"),{useSyncExternalStoreWithSelector:ge}=oe.default,ae=(e={})=>({create:r=>{let t=(0,ne.defineMachine)(e).create(r),o=(n,c)=>ge(t.onTransition,t.getState,t.getState,n,c);return Object.assign(o,t),o}});0&&(module.exports={FSMContext,FSMContextProvider,FSMHydrationBoundary,defineMachine,useHydrateSnapshot,useManager,useSelector,useTransition});
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import
|
|
1
|
+
"use client";import Q from"react";var D="Hooks from @lite-fsm/react must be used within FSMContextProvider.",M=Q.createContext(null);import c from"react";import h from"react";var L=h.createContext(null),k=L.Provider,x=()=>h.useContext(L),I=h.createContext(null),v=I.Provider,P=()=>h.useContext(I);import Z from"react";var i=()=>{let e=Z.useContext(M);if(!e)throw new Error(D);return e};import V from"react";var g=typeof window>"u"?V.useEffect:V.useLayoutEffect;import{jsx as _}from"react/jsx-runtime";var B=(e,n,t,r)=>r!==null&&e!==null&&e.snapshot===n&&e.strategy===t&&e.actions===r,$=({snapshot:e,strategy:n,transitionAfterHydrate:t,children:r})=>{let o=i(),s=x(),u=P(),a=n??"merge",C=c.useRef(null),[p,l]=c.useState(null),H=c.useRef(null),[N,X]=c.useState(null),y=c.useMemo(()=>{if(!t)return null;let d=Array.isArray(t)?t:[t];return d.length>0?d:null},[t]),S=s?.getState()??o.getState(),F=c.useMemo(()=>o.getHydratedState(e,{baseState:S,strategy:a}),[S,a,o,e]),Y=B(N,e,a,y),j=p!==null&&p.committedState===S&&p.snapshot===e&&p.strategy===a,E=F!==S&&!Y&&!j,T=u?.getState()??S,O=c.useMemo(()=>o.getHydratedState(e,{baseState:T,strategy:a}),[a,o,T,e]);g(()=>{let d=B(H.current,e,a,y),b=y!==null&&!d,w=E&&!d;if(!w&&!b)return;let R=C.current;if(w&&!(R?.baseState===S&&R.snapshot===e&&R.strategy===a)){o.hydrate(e,{strategy:a});let m={baseState:S,committedState:o.getState(),snapshot:e,strategy:a};C.current=m,l(m)}if(b&&y!==null){for(let J of y)o.transition(J);let m={snapshot:e,strategy:a,actions:y};H.current=m,X(m)}},[S,E,a,o,e,y]);let z=c.useMemo(()=>({getState:()=>F}),[F]),G=c.useMemo(()=>({getState:()=>O}),[O]);return _(v,{value:G,children:E?_(k,{value:z,children:r}):r})};import f from"react";import ee from"react";var U=Symbol.for("@lite-fsm/react.persistContext"),W=globalThis,q=W[U]??(W[U]=ee.createContext(null)),te=e=>{let n=e;return typeof n.getStatus=="function"&&typeof n.subscribeStatus=="function"},K=e=>{if(!e)return null;let n=Array.isArray(e)?e:[e],t=null;for(let r of n)if(te(r)){if(t)return null;t=r}return t};import{jsx as A}from"react/jsx-runtime";var re=({children:e,getServerSnapshot:n,machineManager:t,persist:r})=>{let o=f.useMemo(()=>t,[t]),s=f.useMemo(()=>t.getState(),[t]),u=f.useMemo(()=>({getState:n??(()=>s)}),[n,s]),a=f.useMemo(()=>K(r),[r]);return f.useEffect(()=>{if(!r)return;let p=(Array.isArray(r)?r:[r]).map(l=>l.start());return()=>{for(let l of p)l()}},[r]),A(M.Provider,{value:o,children:A(q.Provider,{value:a,children:A(v,{value:u,children:e})})})};import{useRef as oe}from"react";var ne=(e,n)=>{let t=i(),r=n?.strategy??"merge",o=oe(null);g(()=>{o.current?.snapshot===e&&o.current.strategy===r||(t.hydrate(e,{strategy:r}),o.current={snapshot:e,strategy:r})},[t,e,r])};import ae from"use-sync-external-store/shim/with-selector";var{useSyncExternalStoreWithSelector:se}=ae;function ie(e,n){let t=i(),r=x(),o=P(),s=r?.getState??t.getState,u=o?.getState??s;return se(t.onTransition,s,u,e,n)}var ce=()=>i().transition;import Se from"use-sync-external-store/shim/with-selector";import{defineMachine as ye}from"@lite-fsm/core";var{useSyncExternalStoreWithSelector:pe}=Se,ue=(e={})=>({create:n=>{let t=ye(e).create(n),r=(o,s)=>pe(t.onTransition,t.getState,t.getState,o,s);return Object.assign(r,t),r}});export{M as FSMContext,re as FSMContextProvider,$ as FSMHydrationBoundary,ue as defineMachine,ne as useHydrateSnapshot,i as useManager,ie as useSelector,ce as useTransition};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type FSMPersistStatusSource = {
|
|
3
|
+
getStatus(): unknown;
|
|
4
|
+
subscribeStatus(listener: () => void): () => void;
|
|
5
|
+
};
|
|
6
|
+
export type FSMPersistLifecycle = {
|
|
7
|
+
start(): () => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const FSMPersistContext: React.Context<FSMPersistStatusSource | null>;
|
|
10
|
+
export declare const resolvePersistStatusSource: (persist: FSMPersistLifecycle | ReadonlyArray<FSMPersistLifecycle> | undefined) => FSMPersistStatusSource | null;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type FSMPersistStatusSource = {
|
|
3
|
+
getStatus(): unknown;
|
|
4
|
+
subscribeStatus(listener: () => void): () => void;
|
|
5
|
+
};
|
|
6
|
+
export type FSMPersistLifecycle = {
|
|
7
|
+
start(): () => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const FSMPersistContext: React.Context<FSMPersistStatusSource | null>;
|
|
10
|
+
export declare const resolvePersistStatusSource: (persist: FSMPersistLifecycle | ReadonlyArray<FSMPersistLifecycle> | undefined) => FSMPersistStatusSource | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lite-fsm/react",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React bindings for lite-fsm",
|
|
6
6
|
"license": "MIT",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"use-sync-external-store": ">=1.2.0",
|
|
59
|
-
"@lite-fsm/core": "2.0.
|
|
59
|
+
"@lite-fsm/core": "2.0.2"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"react": ">=18.0.0"
|