Skip to content

Instantly share code, notes, and snippets.

Avatar
🎹
Working on XState Dev Tools

David Khourshid davidkpiano

🎹
Working on XState Dev Tools
View GitHub Profile
@davidkpiano
davidkpiano / poc.js
Last active Oct 2, 2021
xstate query ideas
View poc.js
function Example() {
const [{ isLoading, error, data }] = useMachine(
createQuery('repoData', () => fetch('...').then((res) => res.json()))
);
}
View machine.js
const machine = Machine({
id: 'ATM',
initial: 'idle',
states: {
idle: {
on: {
INSERT_CARD: 'authenticating',
}
},
authenticating: {
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
Machine({
id: 'donut',
initial: 'ingredients',
states: {
ingredients: {
on: {
NEXT: 'directions',
},
},
directions: {
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
const auth = Machine({
id: 'auth',
initial: 'authenticating',
states: {
authenticating: {
after: {
1000: 'authenticated'
}
},
View machine.js
const pongMachine = Machine({
initial: 'waiting',
states: {
waiting: {
on: {
PING: {
actions: sendParent('PONG', { delay: 1000 })
}
}
}
View machine.js
const A1 = () => console.log('Action A1');
const machine = Machine({
initial: 's1',
states: {
h: { type: 'history' },
s1: {on: {E11: 's2'}},
s2: {on: {E11: 's3'}},
s3: {on: {E11: 's4'}},
s4: {/* ... */}
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
Machine({
id: 'planet',
initial: 'unknown',
states: {
unknown: {
on: {
PROBE: 'probing',
},
},
probing: {