Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@xstate/react

Package Overview
Dependencies
Maintainers
1
Versions
79
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@xstate/react - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

es/useSpawn.d.ts

54

CHANGELOG.md
# 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 @@

4

dist/xstate-react.umd.min.js

@@ -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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc