janovekj / fini Goto Github PK
View Code? Open in Web Editor NEWSmall and simple state machines for React
License: MIT License
Small and simple state machines for React
License: MIT License
Suggested API:
useMachine({
state1: [
// effect to run when state is entered
({ state, context, dispatch }, event) => { console.log("entered state1") },
{
event1: () => "state1",
event2: () => "state1"
},
// effect to run when state is exited
({ state, context, dispatch }, event) => { console.log("exited state1") }
]
})
Where event
is a plain old event object:
{ type: "somethingHappened", payload: 12345 }
Consider prevState
in entry
and nextState
in exit
?
Document effect execution order
Line 223 in 630cfeb
Is currently // @ts-ignore
'd. Can it be easily fixed?
Could allow use of more generic functions across states
Suggested API:
useMachine({
state1: [
{
event1: ({ context, state }) => state // "state1"
},
]
})
Given the following machine
type M = Machine<{
state1: State<{
event1: never
}>;
state2: {}
}>
const [state, dispatch] = useMachine<M>(...)
Should attempting the following give an TS error?
if (state.state2) {
dispatch.event1();
}
Is it possible to also keep all events defined on dispatch
when state has not been checked?
const [state, dispatch] = useMachine({
state1: {
event1: "state1"
}
}, "state1")
dispatch.event1() // Property 'event1' does not exist on type '{}'.ts(2339)
There is little to no system in the tests. Could be structured in a more meaningful way, and better centered around the various features
Instead of
const [state, dispatch] = useMachine()
would a better API be
const machine = useMachine()
where machine
's type is
{
current: "state1"|"state2";
context: { ... };
state1: boolean;
state2: boolean;
someEvent: () => void;
someOtherEvent: (payload: string) => void;
}
or
{
current: "state1"|"state2";
context: { ... };
state1: boolean;
state2: boolean;
dispatch: {
someEvent: () => void;
someOtherEvent: (payload: string) => void;
}
}
?
Should be figured out before 1.0
Some event handlers may only be used to fire side-effects with exec
, and should stay in the current state.
useMachine({
state1: {
event1: ({exec}) => {
exec(() => console.log("event with no return value"))
}
}
})
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.