@xstate/react
Advanced tools
Comparing version 1.4.0 to 1.5.0
# Changelog | ||
## 1.5.0 | ||
### Minor Changes | ||
- [`432b60f7`](https://github.com/statelyai/xstate/commit/432b60f7bcbcee9510e0d86311abbfd75b1a674e) [#2280](https://github.com/statelyai/xstate/pull/2280) Thanks [@davidkpiano](https://github.com/davidkpiano)! - Just like `useInvoke(...)`, other types of actors can now be spawned from _behaviors_ using `useSpawn(...)`: | ||
```tsx | ||
import { fromReducer } from 'xstate/lib/behaviors'; | ||
import { useActor, useSpawn } from '@xstate/react'; | ||
type CountEvent = { type: 'INC' } | { type: 'DEC' }; | ||
const countBehavior = fromReducer( | ||
(count: number, event: CountEvent): number => { | ||
if (event.type === 'INC') { | ||
return count + 1; | ||
} else if (event.type === 'DEC') { | ||
return count - 1; | ||
} | ||
return count; | ||
}, | ||
0 // initial state | ||
); | ||
const countMachine = createMachine({ | ||
invoke: { | ||
id: 'count', | ||
src: () => fromReducer(countReducer, 0) | ||
}, | ||
on: { | ||
INC: { | ||
actions: forwardTo('count') | ||
}, | ||
DEC: { | ||
actions: forwardTo('count') | ||
} | ||
} | ||
}); | ||
const Component = () => { | ||
const countActorRef = useSpawn(countBehavior); | ||
const [count, send] = useActor(countActorRef); | ||
return ( | ||
<div> | ||
Count: {count} | ||
<button onClick={() => send({ type: 'INC' })}>Increment</button> | ||
<button onClick={() => send({ type: 'DEC' })}>Decrement</button> | ||
</div> | ||
); | ||
}; | ||
``` | ||
## 1.4.0 | ||
@@ -4,0 +58,0 @@ |
@@ -1,2 +0,2 @@ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("xstate")):"function"==typeof define&&define.amd?define(["exports","react","xstate"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).XStateReact={},t.React,t.XState)}(this,(function(t,e,n){"use strict"; | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("xstate"),require("xstate/src/behaviors")):"function"==typeof define&&define.amd?define(["exports","react","xstate","xstate/src/behaviors"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).XStateReact={},t.React,t.XState,t.behaviors)}(this,(function(t,e,n,r){"use strict"; | ||
/*! ***************************************************************************** | ||
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation. | ||
PERFORMANCE OF THIS SOFTWARE. | ||
***************************************************************************** */var r,u=function(){return(u=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};function o(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,u,o=n.call(t),i=[];try{for(;(void 0===e||e-- >0)&&!(r=o.next()).done;)i.push(r.value)}catch(t){u={error:t}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(u)throw u.error}}return i}function i(t,e){for(var n=0,r=e.length,u=t.length;n<r;n++,u++)t[u]=e[n];return t}!function(t){t[t.Effect=1]="Effect",t[t.LayoutEffect=2]="LayoutEffect"}(r||(r={}));var c=e.useLayoutEffect;function f(t){var n=e.useRef();return n.current||(n.current={v:t()}),n.current.v}function a(t,e){var n,r,u=o([[],[]],2),i=u[0],c=u[1];try{for(var f=function(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}(t),a=f.next();!a.done;a=f.next()){var s=a.value;e(s)?i.push(s):c.push(s)}}catch(t){n={error:t}}finally{try{a&&!a.done&&(r=f.return)&&r.call(f)}finally{if(n)throw n.error}}return[i,c]}function s(t,e){(0,t.exec)(e.context,e._event.data,{action:t,state:e,_event:e._event})()}function l(t,l,v){void 0===l&&(l={});var p=f((function(){return"function"==typeof t?t():t})),d=l.context,y=l.guards,h=l.actions,b=l.activities,g=l.services,m=l.delays,x=l.state,S=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(t);u<r.length;u++)e.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(t,r[u])&&(n[r[u]]=t[r[u]])}return n}(l,["context","guards","actions","activities","services","delays","state"]),O=f((function(){var t={context:d,guards:y,actions:h,activities:b,services:g,delays:m},e=p.withConfig(t,u(u({},p.context),d));return n.interpret(e,u({deferEvents:!0},S))}));return c((function(){var t;return v&&(t=O.subscribe(function(t,e,n){if("object"==typeof t)return t;var r=function(){};return{next:t,error:e||r,complete:n||r}}(v))),function(){null==t||t.unsubscribe()}}),[v]),c((function(){return O.start(x?n.State.create(x):void 0),function(){O.stop()}}),[]),c((function(){Object.assign(O.machine.options.actions,h)}),[h]),c((function(){Object.assign(O.machine.options.services,g)}),[g]),function(t){var n=e.useRef([]),u=e.useRef([]);c((function(){var e=t.subscribe((function(t){var e,c;if(t.actions.length){var f=o(a(t.actions.filter((function(t){return"function"==typeof t.exec&&"__effect"in t.exec})),(function(t){return t.exec.__effect===r.Effect})),2),s=f[0],l=f[1];(e=n.current).push.apply(e,i([],o(s.map((function(e){return[e,t]}))))),(c=u.current).push.apply(c,i([],o(l.map((function(e){return[e,t]})))))}}));return function(){e.unsubscribe()}}),[]),c((function(){for(;u.current.length;){var t=o(u.current.shift(),2);s(t[0],t[1])}})),e.useEffect((function(){for(;n.current.length;){var t=o(n.current.shift(),2);s(t[0],t[1])}}))}(O),O}function v(t,e){var n=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return function(){return t.apply(void 0,i([],o(e)))}};return Object.defineProperties(n,{name:{value:"effect:"+t.name},__effect:{value:e}}),n}function p(t){return"state"in t}var d=function(){};function y(t){return"getSnapshot"in t?t.getSnapshot():p(t)?t.state:void 0}function h(t,n){void 0===n&&(n=y);var r=e.useRef(t),u=e.useRef([]),i=o(e.useState((function(){return n(t)})),2),a=i[0],s=i[1],l=f((function(){return function(t){var e=r.current;(function(t){return"deferred"in t})(e)&&e.deferred?u.current.push(t):e.send(t)}}));return c((function(){r.current=t,s(n(t));for(var e=t.subscribe({next:function(t){return s(t)},error:d,complete:d});u.current.length>0;){var o=u.current.shift();t.send(o)}return function(){e.unsubscribe()}}),[t]),[a,l]}var b=function(t,e){return t===e},g=function(t){return"state"in(n=t)&&"machine"in n?0!==("status"in(e=t)?e.status:e._status)?e.state:e.machine.initialState:p(t)?t.state:void 0;var e,n};t.asEffect=function(t){return v(t,r.Effect)},t.asLayoutEffect=function(t){return v(t,r.LayoutEffect)},t.useActor=h,t.useInterpret=l,t.useMachine=function(t,r){void 0===r&&(r={});var u=e.useCallback((function(t){var e=void 0===t.changed&&Object.keys(t.children).length;(t.changed||e)&&a(t)}),[]),i=l(t,r,u),c=o(e.useState((function(){var t=i.machine.initialState;return r.state?n.State.create(r.state):t})),2),f=c[0],a=c[1];return[f,i.send,i]},t.useSelector=function(t,n,r,u){void 0===r&&(r=b),void 0===u&&(u=g);var i=o(e.useState((function(){return n(u(t))})),2),c=i[0],f=i[1],a=e.useRef(c);return e.useEffect((function(){var e=function(t){r(a.current,t)||(f(t),a.current=t)},o=n(u(t));e(o);var i=t.subscribe((function(t){var r=n(t);e(r)}));return function(){return i.unsubscribe()}}),[n,r]),c},t.useService=function(t){return[o(h(t),1)[0],t.send]},Object.defineProperty(t,"__esModule",{value:!0})})); | ||
***************************************************************************** */var u,i=function(){return(i=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};function o(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,u,i=n.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(t){u={error:t}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(u)throw u.error}}return o}function c(t,e){for(var n=0,r=e.length,u=t.length;n<r;n++,u++)t[u]=e[n];return t}!function(t){t[t.Effect=1]="Effect",t[t.LayoutEffect=2]="LayoutEffect"}(u||(u={}));var f=e.useLayoutEffect;function a(t){var n=e.useRef();return n.current||(n.current={v:t()}),n.current.v}function s(t,e){var n,r,u=o([[],[]],2),i=u[0],c=u[1];try{for(var f=function(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}(t),a=f.next();!a.done;a=f.next()){var s=a.value;e(s)?i.push(s):c.push(s)}}catch(t){n={error:t}}finally{try{a&&!a.done&&(r=f.return)&&r.call(f)}finally{if(n)throw n.error}}return[i,c]}function v(t,e){(0,t.exec)(e.context,e._event.data,{action:t,state:e,_event:e._event})()}function l(t,r,l){void 0===r&&(r={});var p=a((function(){return"function"==typeof t?t():t})),d=r.context,y=r.guards,h=r.actions,b=r.activities,g=r.services,x=r.delays,m=r.state,S=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(t);u<r.length;u++)e.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(t,r[u])&&(n[r[u]]=t[r[u]])}return n}(r,["context","guards","actions","activities","services","delays","state"]),O=a((function(){var t={context:d,guards:y,actions:h,activities:b,services:g,delays:x},e=p.withConfig(t,i(i({},p.context),d));return n.interpret(e,i({deferEvents:!0},S))}));return f((function(){var t;return l&&(t=O.subscribe(function(t,e,n){if("object"==typeof t)return t;var r=function(){};return{next:t,error:e||r,complete:n||r}}(l))),function(){null==t||t.unsubscribe()}}),[l]),f((function(){return O.start(m?n.State.create(m):void 0),function(){O.stop()}}),[]),f((function(){Object.assign(O.machine.options.actions,h)}),[h]),f((function(){Object.assign(O.machine.options.services,g)}),[g]),function(t){var n=e.useRef([]),r=e.useRef([]);f((function(){var e=t.subscribe((function(t){var e,i;if(t.actions.length){var f=o(s(t.actions.filter((function(t){return"function"==typeof t.exec&&"__effect"in t.exec})),(function(t){return t.exec.__effect===u.Effect})),2),a=f[0],v=f[1];(e=n.current).push.apply(e,c([],o(a.map((function(e){return[e,t]}))))),(i=r.current).push.apply(i,c([],o(v.map((function(e){return[e,t]})))))}}));return function(){e.unsubscribe()}}),[]),f((function(){for(;r.current.length;){var t=o(r.current.shift(),2);v(t[0],t[1])}})),e.useEffect((function(){for(;n.current.length;){var t=o(n.current.shift(),2);v(t[0],t[1])}}))}(O),O}function p(t,e){var n=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return function(){return t.apply(void 0,c([],o(e)))}};return Object.defineProperties(n,{name:{value:"effect:"+t.name},__effect:{value:e}}),n}function d(t){return"state"in t}var y=function(){};function h(t){return"getSnapshot"in t?t.getSnapshot():d(t)?t.state:void 0}function b(t,n){void 0===n&&(n=h);var r=e.useRef(t),u=e.useRef([]),i=o(e.useState((function(){return n(t)})),2),c=i[0],s=i[1],v=a((function(){return function(t){var e=r.current;(function(t){return"deferred"in t})(e)&&e.deferred?u.current.push(t):e.send(t)}}));return f((function(){r.current=t,s(n(t));for(var e=t.subscribe({next:function(t){return s(t)},error:y,complete:y});u.current.length>0;){var i=u.current.shift();t.send(i)}return function(){e.unsubscribe()}}),[t]),[c,v]}var g=function(t,e){return t===e},x=function(t){return"state"in(n=t)&&"machine"in n?0!==("status"in(e=t)?e.status:e._status)?e.state:e.machine.initialState:d(t)?t.state:void 0;var e,n};t.asEffect=function(t){return p(t,u.Effect)},t.asLayoutEffect=function(t){return p(t,u.LayoutEffect)},t.useActor=b,t.useInterpret=l,t.useMachine=function(t,r){void 0===r&&(r={});var u=e.useCallback((function(t){var e=void 0===t.changed&&Object.keys(t.children).length;(t.changed||e)&&a(t)}),[]),i=l(t,r,u),c=o(e.useState((function(){var t=i.machine.initialState;return r.state?n.State.create(r.state):t})),2),f=c[0],a=c[1];return[f,i.send,i]},t.useSelector=function(t,n,r,u){void 0===r&&(r=g),void 0===u&&(u=x);var i=o(e.useState((function(){return n(u(t))})),2),c=i[0],f=i[1],a=e.useRef(c);return e.useEffect((function(){var e=function(t){r(a.current,t)||(f(t),a.current=t)},i=n(u(t));e(i);var o=t.subscribe((function(t){var r=n(t);e(r)}));return function(){return o.unsubscribe()}}),[n,r]),c},t.useService=function(t){return[o(b(t),1)[0],t.send]},t.useSpawn=function(t){return a((function(){return r.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})})); |
@@ -6,2 +6,3 @@ export { useMachine, asEffect, asLayoutEffect } from './useMachine'; | ||
export { useSelector } from './useSelector'; | ||
export { useSpawn } from './useSpawn'; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -6,1 +6,2 @@ export { useMachine, asEffect, asLayoutEffect } from './useMachine'; | ||
export { useSelector } from './useSelector'; | ||
export { useSpawn } from './useSpawn'; |
@@ -6,2 +6,3 @@ export { useMachine, asEffect, asLayoutEffect } from './useMachine'; | ||
export { useSelector } from './useSelector'; | ||
export { useSpawn } from './useSpawn'; | ||
//# sourceMappingURL=index.d.ts.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useSelector = exports.useInterpret = exports.useActor = exports.useService = exports.asLayoutEffect = exports.asEffect = exports.useMachine = void 0; | ||
exports.useSpawn = exports.useSelector = exports.useInterpret = exports.useActor = exports.useService = exports.asLayoutEffect = exports.asEffect = exports.useMachine = void 0; | ||
var useMachine_1 = require("./useMachine"); | ||
@@ -16,1 +16,3 @@ Object.defineProperty(exports, "useMachine", { enumerable: true, get: function () { return useMachine_1.useMachine; } }); | ||
Object.defineProperty(exports, "useSelector", { enumerable: true, get: function () { return useSelector_1.useSelector; } }); | ||
var useSpawn_1 = require("./useSpawn"); | ||
Object.defineProperty(exports, "useSpawn", { enumerable: true, get: function () { return useSpawn_1.useSpawn; } }); |
{ | ||
"name": "@xstate/react", | ||
"version": "1.4.0", | ||
"version": "1.5.0", | ||
"description": "XState tools for React", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
# @xstate/react | ||
<!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
[[toc]] | ||
- [Quick Start](#quick-start) | ||
- [Examples](#examples) | ||
- [API](#api) | ||
- [`useMachine(machine, options?)`](#usemachinemachine-options) | ||
- [`useService(service)`](#useserviceservice) | ||
- [`useActor(actor, getSnapshot)`](#useactoractor-getsnapshot) | ||
- [`useInterpret(machine, options?, observer?)`](#useinterpretmachine-options-observer) | ||
- [`useSelector(actor, selector, compare?, getSnapshot?)`](#useselectoractor-selector-compare-getsnapshot) | ||
- [`asEffect(action)`](#aseffectaction) | ||
- [`asLayoutEffect(action)`](#aslayouteffectaction) | ||
- [`useMachine(machine)` with `@xstate/fsm`](#usemachinemachine-with-xstatefsm) | ||
- [Configuring Machines](#configuring-machines) | ||
- [Matching States](#matching-states) | ||
- [Persisted and Rehydrated State](#persisted-and-rehydrated-state) | ||
- [Services](#services) | ||
- [Migration from 0.x](#migration-from-0x) | ||
- [Resources](#resources) | ||
<!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
## Quick Start | ||
@@ -27,0 +6,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
105925
55
1578
562