@xstate/react
Advanced tools
Comparing version 1.6.2 to 1.6.3
# Changelog | ||
## 1.6.3 | ||
### Patch Changes | ||
- [#2767](https://github.com/statelyai/xstate/pull/2767) [`c1503b121`](https://github.com/statelyai/xstate/commit/c1503b1219d995ebf0f45de46036c5a1d7e6442f) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an over-rendering issue in the `useSelector`. | ||
## 1.6.2 | ||
@@ -4,0 +10,0 @@ |
@@ -1,2 +0,2 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("xstate"),require("xstate/lib/behaviors")):"function"==typeof define&&define.amd?define(["exports","react","xstate","xstate/lib/behaviors"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).XStateReact={},e.React,e.XState,e.behaviors)}(this,(function(e,t,n,r){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i,o=u(t),c=function(){return(c=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var u in t=arguments[n])Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u]);return e}).apply(this,arguments)}; | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("xstate"),require("xstate/lib/behaviors")):"function"==typeof define&&define.amd?define(["exports","react","xstate","xstate/lib/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";function u(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,o=u(e),c=function(){return(c=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)}; | ||
/*! ***************************************************************************** | ||
@@ -15,3 +15,3 @@ Copyright (c) Microsoft Corporation. | ||
PERFORMANCE OF THIS SOFTWARE. | ||
***************************************************************************** */function a(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,u,i=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(e){u={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(u)throw u.error}}return o}function f(e,t){for(var n=0,r=t.length,u=e.length;n<r;n++,u++)e[u]=t[n];return e}!function(e){e[e.Effect=1]="Effect",e[e.LayoutEffect=2]="LayoutEffect"}(i||(i={}));var s=t.useLayoutEffect;function l(e){var n=t.useRef();return n.current||(n.current={v:e()}),n.current.v}function v(e,t){var n,r,u=a([[],[]],2),i=u[0],o=u[1];try{for(var c=function(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}(e),f=c.next();!f.done;f=c.next()){var s=f.value;t(s)?i.push(s):o.push(s)}}catch(e){n={error:e}}finally{try{f&&!f.done&&(r=c.return)&&r.call(c)}finally{if(n)throw n.error}}return[i,o]}function b(e,t){(0,e.exec)(t.context,t._event.data,{action:e,state:t,_event:t._event})()}function p(e,r,u){void 0===r&&(r={});var o=l((function(){return"function"==typeof e?e():e})),p=r.context,d=r.guards,h=r.actions,y=r.activities,g=r.services,O=r.delays,j=r.state,m=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(e);u<r.length;u++)t.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(e,r[u])&&(n[r[u]]=e[r[u]])}return n}(r,["context","guards","actions","activities","services","delays","state"]),x=l((function(){var e={context:p,guards:d,actions:h,activities:y,services:g,delays:O},t=o.withConfig(e,(function(){return c(c({},o.context),p)}));return n.interpret(t,c({deferEvents:!0},m))}));return s((function(){var e;return u&&(e=x.subscribe(function(e,t,n){if("object"==typeof e)return e;var r=function(){};return{next:e,error:t||r,complete:n||r}}(u))),function(){null==e||e.unsubscribe()}}),[u]),s((function(){return x.start(j?n.State.create(j):void 0),function(){x.stop()}}),[]),s((function(){Object.assign(x.machine.options.actions,h),Object.assign(x.machine.options.guards,d),Object.assign(x.machine.options.activities,y),Object.assign(x.machine.options.services,g),Object.assign(x.machine.options.delays,O)}),[h,d,y,g,O]),function(e){var n=t.useRef([]),r=t.useRef([]);s((function(){var t=e.subscribe((function(e){var t,u;if(e.actions.length){var o=a(v(e.actions.filter((function(e){return"function"==typeof e.exec&&"__effect"in e.exec})),(function(e){return e.exec.__effect===i.Effect})),2),c=o[0],s=o[1];(t=n.current).push.apply(t,f([],a(c.map((function(t){return[t,e]}))))),(u=r.current).push.apply(u,f([],a(s.map((function(t){return[t,e]})))))}}));return function(){t.unsubscribe()}}),[]),s((function(){for(;r.current.length;){var e=a(r.current.shift(),2);b(e[0],e[1])}})),t.useEffect((function(){for(;n.current.length;){var e=a(n.current.shift(),2);b(e[0],e[1])}}))}(x),x}function d(e,t){var n=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return function(){return e.apply(void 0,f([],a(t)))}};return Object.defineProperties(n,{name:{value:"effect:"+e.name},__effect:{value:t}}),n}function h(e){return"state"in e}function y(e){return"deferred"in e}var g=function(){};function O(e){return"getSnapshot"in e?e.getSnapshot():h(e)?e.state:void 0}function j(e,n){void 0===n&&(n=O);var r=t.useRef(e),u=t.useRef([]),i=a(t.useState((function(){return n(e)})),2),o=i[0],c=i[1],f=l((function(){return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=e[0],i=r.current;y(i)&&i.deferred?u.current.push(n):i.send(n)}}));return s((function(){r.current=e,c(n(e));for(var t=e.subscribe({next:function(e){return c(e)},error:g,complete:g});u.current.length>0;){var i=u.current.shift();e.send(i)}return function(){t.unsubscribe()}}),[e]),[o,f]}function m(e){var t={exports:{}};return e(t,t.exports),t.exports | ||
***************************************************************************** */function a(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 f(t,e,n){if(n||2===arguments.length)for(var r,u=0,i=e.length;u<i;u++)!r&&u in e||(r||(r=Array.prototype.slice.call(e,0,u)),r[u]=e[u]);return t.concat(r||Array.prototype.slice.call(e))}!function(t){t[t.Effect=1]="Effect",t[t.LayoutEffect=2]="LayoutEffect"}(i||(i={}));var s=e.useLayoutEffect;function l(t){var n=e.useRef();return n.current||(n.current={v:t()}),n.current.v}function v(t,e){var n,r,u=a([[],[]],2),i=u[0],o=u[1];try{for(var c=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),f=c.next();!f.done;f=c.next()){var s=f.value;e(s)?i.push(s):o.push(s)}}catch(t){n={error:t}}finally{try{f&&!f.done&&(r=c.return)&&r.call(c)}finally{if(n)throw n.error}}return[i,o]}function p(t,e){(0,t.exec)(e.context,e._event.data,{action:t,state:e,_event:e._event})()}function b(t,r,u){void 0===r&&(r={});var o=l((function(){return"function"==typeof t?t():t})),b=r.context,d=r.guards,y=r.actions,h=r.activities,g=r.services,O=r.delays,j=r.state,m=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"]),x=l((function(){var t={context:b,guards:d,actions:y,activities:h,services:g,delays:O},e=o.withConfig(t,(function(){return c(c({},o.context),b)}));return n.interpret(e,c({deferEvents:!0},m))}));return s((function(){var t;return u&&(t=x.subscribe(function(t,e,n){if("object"==typeof t)return t;var r=function(){};return{next:t,error:e||r,complete:n||r}}(u))),function(){null==t||t.unsubscribe()}}),[u]),s((function(){return x.start(j?n.State.create(j):void 0),function(){x.stop()}}),[]),s((function(){Object.assign(x.machine.options.actions,y),Object.assign(x.machine.options.guards,d),Object.assign(x.machine.options.activities,h),Object.assign(x.machine.options.services,g),Object.assign(x.machine.options.delays,O)}),[y,d,h,g,O]),function(t){var n=e.useRef([]),r=e.useRef([]);s((function(){var e=t.subscribe((function(t){var e,u;if(t.actions.length){var o=a(v(t.actions.filter((function(t){return"function"==typeof t.exec&&"__effect"in t.exec})),(function(t){return t.exec.__effect===i.Effect})),2),c=o[0],s=o[1];(e=n.current).push.apply(e,f([],a(c.map((function(e){return[e,t]}))),!1)),(u=r.current).push.apply(u,f([],a(s.map((function(e){return[e,t]}))),!1))}}));return function(){e.unsubscribe()}}),[]),s((function(){for(;r.current.length;){var t=a(r.current.shift(),2);p(t[0],t[1])}})),e.useEffect((function(){for(;n.current.length;){var t=a(n.current.shift(),2);p(t[0],t[1])}}))}(x),x}function d(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,f([],a(e),!1))}};return Object.defineProperties(n,{name:{value:"effect:".concat(t.name)},__effect:{value:e}}),n}function y(t){return"state"in t}function h(t){return"deferred"in t}var g=function(){};function O(t){return"getSnapshot"in t?t.getSnapshot():y(t)?t.state:void 0}function j(t,n){void 0===n&&(n=O);var r=e.useRef(t),u=e.useRef([]),i=a(e.useState((function(){return n(t)})),2),o=i[0],c=i[1],f=l((function(){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],i=r.current;h(i)&&i.deferred?u.current.push(n):i.send(n)}}));return s((function(){r.current=t,c(n(t));for(var e=t.subscribe({next:function(t){return c(t)},error:g,complete:g});u.current.length>0;){var i=u.current.shift();t.send(i)}return function(){e.unsubscribe()}}),[t]),[o,f]}function m(t){var e={exports:{}};return t(e,e.exports),e.exports | ||
/* | ||
@@ -21,3 +21,3 @@ object-assign | ||
@license MIT | ||
*/}var x=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;function E(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var _=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,r,u=E(e),i=1;i<arguments.length;i++){for(var o in n=Object(arguments[i]))S.call(n,o)&&(u[o]=n[o]);if(x){r=x(n);for(var c=0;c<r.length;c++)w.call(n,r[c])&&(u[r[c]]=n[r[c]])}}return u},C={useSubscription:function(e){var t=e.getCurrentValue,n=e.subscribe,r=o.default.useState((function(){return{getCurrentValue:t,subscribe:n,value:t()}}));e=r[0];var u=r[1];return r=e.value,e.getCurrentValue===t&&e.subscribe===n||(r=t(),u({getCurrentValue:t,subscribe:n,value:r})),o.default.useDebugValue(r),o.default.useEffect((function(){function e(){if(!r){var e=t();u((function(r){return r.getCurrentValue!==t||r.subscribe!==n||r.value===e?r:_({},r,{value:e})}))}}var r=!1,i=n(e);return e(),function(){r=!0,i()}}),[t,n]),r}},P=(m((function(e,t){})),m((function(e){e.exports=C}))); | ||
*/}var x=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;function E(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}var _=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map((function(t){return e[t]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(t){r[t]=t})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var n,r,u=E(t),i=1;i<arguments.length;i++){for(var o in n=Object(arguments[i]))S.call(n,o)&&(u[o]=n[o]);if(x){r=x(n);for(var c=0;c<r.length;c++)w.call(n,r[c])&&(u[r[c]]=n[r[c]])}}return u},C={useSubscription:function(t){var e=t.getCurrentValue,n=t.subscribe,r=o.default.useState((function(){return{getCurrentValue:e,subscribe:n,value:e()}}));t=r[0];var u=r[1];return r=t.value,t.getCurrentValue===e&&t.subscribe===n||(r=e(),u({getCurrentValue:e,subscribe:n,value:r})),o.default.useDebugValue(r),o.default.useEffect((function(){function t(){if(!r){var t=e();u((function(r){return r.getCurrentValue!==e||r.subscribe!==n||r.value===t?r:_({},r,{value:t})}))}}var r=!1,i=n(t);return t(),function(){r=!0,i()}}),[e,n]),r}},P=(m((function(t,e){})),m((function(t){t.exports=C}))); | ||
/** @license React vundefined | ||
@@ -30,2 +30,2 @@ * use-subscription.production.min.js | ||
* LICENSE file in the root directory of this source tree. | ||
*/var V=function(e,t){return e===t},R=function(e){return"state"in(n=e)&&"machine"in n?0!==("status"in(t=e)?t.status:t._status)?t.state:t.machine.initialState:h(e)?e.state:void 0;var t,n};e.asEffect=function(e){return d(e,i.Effect)},e.asLayoutEffect=function(e){return d(e,i.LayoutEffect)},e.useActor=j,e.useInterpret=p,e.useMachine=function(e,r){void 0===r&&(r={});var u=t.useCallback((function(e){var t=void 0===e.changed&&Object.keys(e.children).length;(e.changed||t)&&f(e)}),[]),i=p(e,r,u),o=a(t.useState((function(){var e=i.machine.initialState;return r.state?n.State.create(r.state):e})),2),c=o[0],f=o[1];return[c,i.send,i]},e.useSelector=function(e,n,r,u){void 0===r&&(r=V),void 0===u&&(u=R);var i=t.useRef(n),o=t.useMemo((function(){var t,o=u(e),c=n(o);return{getSnapshot:function(){return o},getCurrentValue:function(){return c},setCurrentValue:function(e){c=e,null==t||t()},subscribe:function(n){t=n;var u=e.subscribe((function(e){o=e;var t=i.current(e);r(c,t)||(c=t,n())}));return function(){u.unsubscribe()}}}}),[e]),c=P.useSubscription(o);if(i.current!==n){var a=n(o.getSnapshot());r(c,a)||(c=a)}return s((function(){i.current=n,o.setCurrentValue(c)})),c},e.useService=function(e){return[a(j(e),1)[0],e.send]},e.useSpawn=function(e){return l((function(){return r.spawnBehavior(e)}))},Object.defineProperty(e,"__esModule",{value:!0})})); | ||
*/var V=function(t,e){return t===e},R=function(t){return"state"in(n=t)&&"machine"in n?0!==("status"in(e=t)?e.status:e._status)?e.state:e.machine.initialState:y(t)?t.state:void 0;var e,n};t.asEffect=function(t){return d(t,i.Effect)},t.asLayoutEffect=function(t){return d(t,i.LayoutEffect)},t.useActor=j,t.useInterpret=b,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)&&f(t)}),[]),i=b(t,r,u),o=a(e.useState((function(){var t=i.machine.initialState;return r.state?n.State.create(r.state):t})),2),c=o[0],f=o[1];return[c,i.send,i]},t.useSelector=function(t,n,r,u){void 0===r&&(r=V),void 0===u&&(u=R);var i=e.useRef(n),o=e.useMemo((function(){var e,o=u(t),c=n(o);return{getSnapshot:function(){return o},getCurrentValue:function(){return c},setCurrentValue:function(t){c=t,null==e||e()},subscribe:function(n){e=n;var u=t.subscribe((function(t){o=t;var e=i.current(t);r(c,e)||(c=e,n())}));return function(){u.unsubscribe()}}}}),[t]),c=P.useSubscription(o),a=!1;if(i.current!==n){var f=n(o.getSnapshot());r(c,f)||(a=!0,c=f)}return s((function(){i.current=n,a&&o.setCurrentValue(c)})),c},t.useService=function(t){return[a(j(t),1)[0],t.send]},t.useSpawn=function(t){return l((function(){return r.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})})); |
@@ -48,3 +48,3 @@ var __read = (this && this.__read) || function (o, n) { | ||
if (process.env.NODE_ENV !== 'production' && args.length > 1) { | ||
console.warn("Unexpected payload: " + JSON.stringify(args[1]) + ". Only a single event object can be sent to actor send() functions."); | ||
console.warn("Unexpected payload: ".concat(JSON.stringify(args[1]), ". Only a single event object can be sent to actor send() functions.")); | ||
} | ||
@@ -51,0 +51,0 @@ var currentActorRef = actorRefRef.current; |
@@ -17,6 +17,10 @@ var __read = (this && this.__read) || function (o, n) { | ||
}; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from) { | ||
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) | ||
to[j] = from[i]; | ||
return to; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
}; | ||
@@ -35,7 +39,7 @@ import { useCallback, useState } from 'react'; | ||
return function () { | ||
return exec.apply(void 0, __spreadArray([], __read(args))); | ||
return exec.apply(void 0, __spreadArray([], __read(args), false)); | ||
}; | ||
}; | ||
Object.defineProperties(effectExec, { | ||
name: { value: "effect:" + exec.name }, | ||
name: { value: "effect:".concat(exec.name) }, | ||
__effect: { value: tag } | ||
@@ -42,0 +46,0 @@ }); |
@@ -17,6 +17,10 @@ var __read = (this && this.__read) || function (o, n) { | ||
}; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from) { | ||
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) | ||
to[j] = from[i]; | ||
return to; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
}; | ||
@@ -50,4 +54,4 @@ import { useEffect, useRef } from 'react'; | ||
}), 2), effectActions = _c[0], layoutEffectActions = _c[1]; | ||
(_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })))); | ||
(_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })))); | ||
(_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false)); | ||
(_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false)); | ||
} | ||
@@ -54,0 +58,0 @@ }); |
@@ -52,5 +52,7 @@ import { useMemo, useRef } from 'react'; | ||
var currentSelected = useSubscription(subscription); | ||
var currentChanged = false; | ||
if (latestSelectorRef.current !== selector) { | ||
var selected = selector(subscription.getSnapshot()); | ||
if (!compare(currentSelected, selected)) { | ||
currentChanged = true; | ||
currentSelected = selected; | ||
@@ -61,7 +63,10 @@ } | ||
latestSelectorRef.current = selector; | ||
// required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors) | ||
// at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value | ||
subscription.setCurrentValue(currentSelected); | ||
// this condition should not be required, but setState bailouts are currently buggy: https://github.com/facebook/react/issues/22654 | ||
if (currentChanged) { | ||
// required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors) | ||
// at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value | ||
subscription.setCurrentValue(currentSelected); | ||
} | ||
}); | ||
return currentSelected; | ||
} |
@@ -35,3 +35,3 @@ "use strict"; | ||
if (process.env.NODE_ENV !== 'production') { | ||
var _a = __read(react_1.useState(stateMachine), 1), initialMachine = _a[0]; | ||
var _a = __read((0, react_1.useState)(stateMachine), 1), initialMachine = _a[0]; | ||
if (stateMachine !== initialMachine) { | ||
@@ -42,7 +42,7 @@ console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' + | ||
} | ||
var service = useConstant_1.default(function () { | ||
return fsm_1.interpret(fsm_1.createMachine(stateMachine.config, options ? options : stateMachine._options)).start(); | ||
var service = (0, useConstant_1.default)(function () { | ||
return (0, fsm_1.interpret)((0, fsm_1.createMachine)(stateMachine.config, options ? options : stateMachine._options)).start(); | ||
}); | ||
var _b = __read(react_1.useState(function () { return getServiceState(service); }), 2), state = _b[0], setState = _b[1]; | ||
react_1.useEffect(function () { | ||
var _b = __read((0, react_1.useState)(function () { return getServiceState(service); }), 2), state = _b[0], setState = _b[1]; | ||
(0, react_1.useEffect)(function () { | ||
if (options) { | ||
@@ -52,3 +52,3 @@ service._machine._options = options; | ||
}); | ||
react_1.useEffect(function () { | ||
(0, react_1.useEffect)(function () { | ||
service.subscribe(setState); | ||
@@ -63,3 +63,3 @@ return function () { | ||
function useService(service) { | ||
var subscription = react_1.useMemo(function () { | ||
var subscription = (0, react_1.useMemo)(function () { | ||
var currentState = getServiceState(service); | ||
@@ -79,5 +79,5 @@ return { | ||
}, [service]); | ||
var state = use_subscription_1.useSubscription(subscription); | ||
var state = (0, use_subscription_1.useSubscription)(subscription); | ||
return [state, service.send, service]; | ||
} | ||
exports.useService = useService; |
@@ -42,6 +42,6 @@ "use strict"; | ||
if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; } | ||
var actorRefRef = react_1.useRef(actorRef); | ||
var deferredEventsRef = react_1.useRef([]); | ||
var _a = __read(react_1.useState(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1]; | ||
var send = useConstant_1.default(function () { return function () { | ||
var actorRefRef = (0, react_1.useRef)(actorRef); | ||
var deferredEventsRef = (0, react_1.useRef)([]); | ||
var _a = __read((0, react_1.useState)(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1]; | ||
var send = (0, useConstant_1.default)(function () { return function () { | ||
var args = []; | ||
@@ -53,3 +53,3 @@ for (var _i = 0; _i < arguments.length; _i++) { | ||
if (process.env.NODE_ENV !== 'production' && args.length > 1) { | ||
console.warn("Unexpected payload: " + JSON.stringify(args[1]) + ". Only a single event object can be sent to actor send() functions."); | ||
console.warn("Unexpected payload: ".concat(JSON.stringify(args[1]), ". Only a single event object can be sent to actor send() functions.")); | ||
} | ||
@@ -67,3 +67,3 @@ var currentActorRef = actorRefRef.current; | ||
}; }); | ||
use_isomorphic_layout_effect_1.default(function () { | ||
(0, use_isomorphic_layout_effect_1.default)(function () { | ||
actorRefRef.current = actorRef; | ||
@@ -70,0 +70,0 @@ setCurrent(getSnapshot(actorRef)); |
@@ -62,3 +62,3 @@ "use strict"; | ||
if (options === void 0) { options = {}; } | ||
var machine = useConstant_1.default(function () { | ||
var machine = (0, useConstant_1.default)(function () { | ||
return typeof getMachine === 'function' ? getMachine() : getMachine; | ||
@@ -68,3 +68,3 @@ }); | ||
typeof getMachine !== 'function') { | ||
var _a = __read(react_1.useState(machine), 1), initialMachine = _a[0]; | ||
var _a = __read((0, react_1.useState)(machine), 1), initialMachine = _a[0]; | ||
if (getMachine !== initialMachine) { | ||
@@ -76,3 +76,3 @@ console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' + | ||
var context = options.context, guards = options.guards, actions = options.actions, activities = options.activities, services = options.services, delays = options.delays, rehydratedState = options.state, interpreterOptions = __rest(options, ["context", "guards", "actions", "activities", "services", "delays", "state"]); | ||
var service = useConstant_1.default(function () { | ||
var service = (0, useConstant_1.default)(function () { | ||
var machineConfig = { | ||
@@ -87,5 +87,5 @@ context: context, | ||
var machineWithConfig = machine.withConfig(machineConfig, function () { return (__assign(__assign({}, machine.context), context)); }); | ||
return xstate_1.interpret(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions)); | ||
return (0, xstate_1.interpret)(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions)); | ||
}); | ||
use_isomorphic_layout_effect_1.default(function () { | ||
(0, use_isomorphic_layout_effect_1.default)(function () { | ||
var sub; | ||
@@ -99,3 +99,3 @@ if (observerOrListener) { | ||
}, [observerOrListener]); | ||
use_isomorphic_layout_effect_1.default(function () { | ||
(0, use_isomorphic_layout_effect_1.default)(function () { | ||
service.start(rehydratedState ? xstate_1.State.create(rehydratedState) : undefined); | ||
@@ -109,3 +109,3 @@ return function () { | ||
// in one place -- this hook's caller. | ||
use_isomorphic_layout_effect_1.default(function () { | ||
(0, use_isomorphic_layout_effect_1.default)(function () { | ||
Object.assign(service.machine.options.actions, actions); | ||
@@ -117,5 +117,5 @@ Object.assign(service.machine.options.guards, guards); | ||
}, [actions, guards, activities, services, delays]); | ||
useReactEffectActions_1.useReactEffectActions(service); | ||
(0, useReactEffectActions_1.useReactEffectActions)(service); | ||
return service; | ||
} | ||
exports.useInterpret = useInterpret; |
@@ -18,6 +18,10 @@ "use strict"; | ||
}; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from) { | ||
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) | ||
to[j] = from[i]; | ||
return to; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
}; | ||
@@ -38,7 +42,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); | ||
return function () { | ||
return exec.apply(void 0, __spreadArray([], __read(args))); | ||
return exec.apply(void 0, __spreadArray([], __read(args), false)); | ||
}; | ||
}; | ||
Object.defineProperties(effectExec, { | ||
name: { value: "effect:" + exec.name }, | ||
name: { value: "effect:".concat(exec.name) }, | ||
__effect: { value: tag } | ||
@@ -58,3 +62,3 @@ }); | ||
if (options === void 0) { options = {}; } | ||
var listener = react_1.useCallback(function (nextState) { | ||
var listener = (0, react_1.useCallback)(function (nextState) { | ||
// Only change the current state if: | ||
@@ -71,4 +75,4 @@ // - the incoming state is the "live" initial state (since it might have new actors) | ||
}, []); | ||
var service = useInterpret_1.useInterpret(getMachine, options, listener); | ||
var _a = __read(react_1.useState(function () { | ||
var service = (0, useInterpret_1.useInterpret)(getMachine, options, listener); | ||
var _a = __read((0, react_1.useState)(function () { | ||
var initialState = service.machine.initialState; | ||
@@ -75,0 +79,0 @@ return (options.state |
@@ -18,6 +18,10 @@ "use strict"; | ||
}; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from) { | ||
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) | ||
to[j] = from[i]; | ||
return to; | ||
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { | ||
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { | ||
if (ar || !(i in from)) { | ||
if (!ar) ar = Array.prototype.slice.call(from, 0, i); | ||
ar[i] = from[i]; | ||
} | ||
} | ||
return to.concat(ar || Array.prototype.slice.call(from)); | ||
}; | ||
@@ -40,5 +44,5 @@ Object.defineProperty(exports, "__esModule", { value: true }); | ||
function useReactEffectActions(service) { | ||
var effectActionsRef = react_1.useRef([]); | ||
var layoutEffectActionsRef = react_1.useRef([]); | ||
use_isomorphic_layout_effect_1.default(function () { | ||
var effectActionsRef = (0, react_1.useRef)([]); | ||
var layoutEffectActionsRef = (0, react_1.useRef)([]); | ||
(0, use_isomorphic_layout_effect_1.default)(function () { | ||
var sub = service.subscribe(function (currentState) { | ||
@@ -51,7 +55,7 @@ var _a, _b; | ||
}); | ||
var _c = __read(utils_1.partition(reactEffectActions, function (action) { | ||
var _c = __read((0, utils_1.partition)(reactEffectActions, function (action) { | ||
return action.exec.__effect === types_1.ReactEffectType.Effect; | ||
}), 2), effectActions = _c[0], layoutEffectActions = _c[1]; | ||
(_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })))); | ||
(_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })))); | ||
(_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false)); | ||
(_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false)); | ||
} | ||
@@ -66,3 +70,3 @@ }); | ||
// so we have to use `useIsomorphicLayoutEffect` to silence those warnings | ||
use_isomorphic_layout_effect_1.default(function () { | ||
(0, use_isomorphic_layout_effect_1.default)(function () { | ||
while (layoutEffectActionsRef.current.length) { | ||
@@ -73,3 +77,3 @@ var _a = __read(layoutEffectActionsRef.current.shift(), 2), layoutEffectAction = _a[0], effectState = _a[1]; | ||
}); // https://github.com/davidkpiano/xstate/pull/1202#discussion_r429677773 | ||
react_1.useEffect(function () { | ||
(0, react_1.useEffect)(function () { | ||
while (effectActionsRef.current.length) { | ||
@@ -76,0 +80,0 @@ var _a = __read(effectActionsRef.current.shift(), 2), effectAction = _a[0], effectState = _a[1]; |
@@ -15,4 +15,4 @@ "use strict"; | ||
return isService(a) | ||
? useService_1.getServiceSnapshot(a) | ||
: useActor_1.isActorWithState(a) | ||
? (0, useService_1.getServiceSnapshot)(a) | ||
: (0, useActor_1.isActorWithState)(a) | ||
? a.state | ||
@@ -24,4 +24,4 @@ : undefined; | ||
if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; } | ||
var latestSelectorRef = react_1.useRef(selector); | ||
var subscription = react_1.useMemo(function () { | ||
var latestSelectorRef = (0, react_1.useRef)(selector); | ||
var subscription = (0, react_1.useMemo)(function () { | ||
var snapshot = getSnapshot(actor); | ||
@@ -56,14 +56,19 @@ var current = selector(snapshot); | ||
}, [actor]); | ||
var currentSelected = use_subscription_1.useSubscription(subscription); | ||
var currentSelected = (0, use_subscription_1.useSubscription)(subscription); | ||
var currentChanged = false; | ||
if (latestSelectorRef.current !== selector) { | ||
var selected = selector(subscription.getSnapshot()); | ||
if (!compare(currentSelected, selected)) { | ||
currentChanged = true; | ||
currentSelected = selected; | ||
} | ||
} | ||
use_isomorphic_layout_effect_1.default(function () { | ||
(0, use_isomorphic_layout_effect_1.default)(function () { | ||
latestSelectorRef.current = selector; | ||
// required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors) | ||
// at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value | ||
subscription.setCurrentValue(currentSelected); | ||
// this condition should not be required, but setState bailouts are currently buggy: https://github.com/facebook/react/issues/22654 | ||
if (currentChanged) { | ||
// required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors) | ||
// at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value | ||
subscription.setCurrentValue(currentSelected); | ||
} | ||
}); | ||
@@ -70,0 +75,0 @@ return currentSelected; |
@@ -38,5 +38,5 @@ "use strict"; | ||
} | ||
var _a = __read(useActor_1.useActor(service), 1), state = _a[0]; | ||
var _a = __read((0, useActor_1.useActor)(service), 1), state = _a[0]; | ||
return [state, service.send]; | ||
} | ||
exports.useService = useService; |
@@ -14,4 +14,4 @@ "use strict"; | ||
function useSpawn(behavior) { | ||
var actorRef = useConstant_1.default(function () { | ||
return behaviors_1.spawnBehavior(behavior); | ||
var actorRef = (0, useConstant_1.default)(function () { | ||
return (0, behaviors_1.spawnBehavior)(behavior); | ||
}); | ||
@@ -18,0 +18,0 @@ return actorRef; |
{ | ||
"name": "@xstate/react", | ||
"version": "1.6.2", | ||
"version": "1.6.3", | ||
"description": "XState tools for React", | ||
@@ -83,5 +83,5 @@ "keywords": [ | ||
"ts-jest": "^26.5.6", | ||
"typescript": "^4.3.5", | ||
"typescript": "^4.5.2", | ||
"xstate": "*" | ||
} | ||
} |
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
104421
1668
0