Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@xstate/react
Advanced tools
@xstate/react - npm Package Compare versions
Comparing version 1.3.4 to 1.4.0
| # Changelog | ||
| ## 1.4.0 | ||
| ### Minor Changes | ||
| - [`849ec56c`](https://github.com/davidkpiano/xstate/commit/849ec56c2a9db34e65a30af94e68a7a7a50b4158) [#2286](https://github.com/davidkpiano/xstate/pull/2286) Thanks [@davidkpiano](https://github.com/davidkpiano)! - The `useService(...)` hook will be deprecated, since services are also actors. In future versions, the `useActor(...)` hook should be used instead: | ||
| ```diff | ||
| -const [state, send] = useService(service); | ||
| +const [state, send] = useActor(service); | ||
| ``` | ||
| ### Patch Changes | ||
| - [`ea3aaffb`](https://github.com/davidkpiano/xstate/commit/ea3aaffb906b34a42bb2736c7b91d54ffe9ed882) [#2326](https://github.com/davidkpiano/xstate/pull/2326) Thanks [@davidkpiano](https://github.com/davidkpiano)! - The `send` type returned in the tuple from `useActor(someService)` was an incorrect `never` type; this has been fixed. | ||
| ## 1.3.4 | ||
@@ -4,0 +19,0 @@ |
@@ -15,2 +15,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"; | ||
| 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 p(t)?t.state:"getSnapshot"in t?t.getSnapshot():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]}function b(t){return 0!==("status"in t?t.status:t._status)?t.state:t.machine.initialState}var g=function(t,e){return t===e},m=function(t){return"state"in(e=t)&&"machine"in e?b(t):p(t)?t.state:void 0;var e};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=g),void 0===u&&(u=m);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,b),1)[0],t.send]},Object.defineProperty(t,"__esModule",{value:!0})})); | ||
| ***************************************************************************** */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})})); |
@@ -6,7 +6,6 @@ import { Sender } from './types'; | ||
| }; | ||
| declare type EventOfActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<infer TEvent, any> ? TEvent : never; | ||
| declare type EmittedFromActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<any, infer TEmitted> ? TEmitted : never; | ||
| export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor, getSnapshot?: (actor: TActor) => EmittedFromActorRef<TActor>): [EmittedFromActorRef<TActor>, Sender<EventOfActorRef<TActor>>]; | ||
| export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor, getSnapshot?: (actor: TActor) => EmittedFromActorRef<TActor>): [EmittedFromActorRef<TActor>, TActor['send']]; | ||
| export declare function useActor<TEvent extends EventObject, TEmitted>(actorRef: ActorRef<TEvent, TEmitted>, getSnapshot?: (actor: ActorRef<TEvent, TEmitted>) => TEmitted): [TEmitted, Sender<TEvent>]; | ||
| export {}; | ||
| //# sourceMappingURL=useActor.d.ts.map |
@@ -30,6 +30,6 @@ var __read = (this && this.__read) || function (o, n) { | ||
| function defaultGetSnapshot(actorRef) { | ||
| return isActorWithState(actorRef) | ||
| ? actorRef.state | ||
| : 'getSnapshot' in actorRef | ||
| ? actorRef.getSnapshot() | ||
| return 'getSnapshot' in actorRef | ||
| ? actorRef.getSnapshot() | ||
| : isActorWithState(actorRef) | ||
| ? actorRef.state | ||
| : undefined; | ||
@@ -36,0 +36,0 @@ } |
| import { EventObject, State, Interpreter, Typestate } from 'xstate'; | ||
| import { PayloadSender } from './types'; | ||
| export declare function getServiceSnapshot<TService extends Interpreter<any, any, any, any>>(service: TService): TService['state']; | ||
| /** | ||
| * @deprecated Use `useActor` instead. | ||
| * | ||
| * @param service The interpreted machine | ||
| * @returns A tuple of the current `state` of the service and the service's `send(event)` method | ||
| */ | ||
| export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = { | ||
@@ -5,0 +11,0 @@ value: any; |
@@ -24,2 +24,8 @@ var __read = (this && this.__read) || function (o, n) { | ||
| } | ||
| /** | ||
| * @deprecated Use `useActor` instead. | ||
| * | ||
| * @param service The interpreted machine | ||
| * @returns A tuple of the current `state` of the service and the service's `send(event)` method | ||
| */ | ||
| export function useService(service) { | ||
@@ -29,4 +35,4 @@ if (process.env.NODE_ENV !== 'production' && !('machine' in service)) { | ||
| } | ||
| var _a = __read(useActor(service, getServiceSnapshot), 1), state = _a[0]; | ||
| var _a = __read(useActor(service), 1), state = _a[0]; | ||
| return [state, service.send]; | ||
| } |
@@ -6,7 +6,6 @@ import { Sender } from './types'; | ||
| }; | ||
| declare type EventOfActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<infer TEvent, any> ? TEvent : never; | ||
| declare type EmittedFromActorRef<TActor extends ActorRef<any, any>> = TActor extends ActorRef<any, infer TEmitted> ? TEmitted : never; | ||
| export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor, getSnapshot?: (actor: TActor) => EmittedFromActorRef<TActor>): [EmittedFromActorRef<TActor>, Sender<EventOfActorRef<TActor>>]; | ||
| export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor, getSnapshot?: (actor: TActor) => EmittedFromActorRef<TActor>): [EmittedFromActorRef<TActor>, TActor['send']]; | ||
| export declare function useActor<TEvent extends EventObject, TEmitted>(actorRef: ActorRef<TEvent, TEmitted>, getSnapshot?: (actor: ActorRef<TEvent, TEmitted>) => TEmitted): [TEmitted, Sender<TEvent>]; | ||
| export {}; | ||
| //# sourceMappingURL=useActor.d.ts.map |
@@ -34,6 +34,6 @@ "use strict"; | ||
| function defaultGetSnapshot(actorRef) { | ||
| return isActorWithState(actorRef) | ||
| ? actorRef.state | ||
| : 'getSnapshot' in actorRef | ||
| ? actorRef.getSnapshot() | ||
| return 'getSnapshot' in actorRef | ||
| ? actorRef.getSnapshot() | ||
| : isActorWithState(actorRef) | ||
| ? actorRef.state | ||
| : undefined; | ||
@@ -40,0 +40,0 @@ } |
| import { EventObject, State, Interpreter, Typestate } from 'xstate'; | ||
| import { PayloadSender } from './types'; | ||
| export declare function getServiceSnapshot<TService extends Interpreter<any, any, any, any>>(service: TService): TService['state']; | ||
| /** | ||
| * @deprecated Use `useActor` instead. | ||
| * | ||
| * @param service The interpreted machine | ||
| * @returns A tuple of the current `state` of the service and the service's `send(event)` method | ||
| */ | ||
| export declare function useService<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext> = { | ||
@@ -5,0 +11,0 @@ value: any; |
@@ -28,2 +28,8 @@ "use strict"; | ||
| exports.getServiceSnapshot = getServiceSnapshot; | ||
| /** | ||
| * @deprecated Use `useActor` instead. | ||
| * | ||
| * @param service The interpreted machine | ||
| * @returns A tuple of the current `state` of the service and the service's `send(event)` method | ||
| */ | ||
| function useService(service) { | ||
@@ -33,5 +39,5 @@ if (process.env.NODE_ENV !== 'production' && !('machine' in service)) { | ||
| } | ||
| var _a = __read(useActor_1.useActor(service, getServiceSnapshot), 1), state = _a[0]; | ||
| var _a = __read(useActor_1.useActor(service), 1), state = _a[0]; | ||
| return [state, service.send]; | ||
| } | ||
| exports.useService = useService; |
| { | ||
| "name": "@xstate/react", | ||
| "version": "1.3.4", | ||
| "version": "1.4.0", | ||
| "description": "XState tools for React", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -118,2 +118,8 @@ # @xstate/react | ||
| ::: warning Deprecated | ||
| In the next major version, `useService(service)` will be replaced with `useActor(service)`. Prefer using the `useActor(service)` hook for services instead, since services are also actors. | ||
| ::: | ||
| A [React hook](https://reactjs.org/hooks) that subscribes to state changes from an existing [service](https://xstate.js.org/docs/guides/interpretation.html). | ||
@@ -130,3 +136,3 @@ | ||
| ### `useActor(actor, getSnapshot)` | ||
| ### `useActor(actor, getSnapshot?)` | ||
@@ -324,3 +330,3 @@ A [React hook](https://reactjs.org/hooks) that subscribes to emitted changes from an existing [actor](https://xstate.js.org/docs/guides/actors.html). | ||
| import { useEffect } from 'react'; | ||
| import { useMachine } from `@xstate/react/fsm`; | ||
| import { useMachine } from '@xstate/react/fsm'; | ||
| import { createMachine } from '@xstate/fsm'; | ||
@@ -354,7 +360,9 @@ | ||
| const Fetcher = ({ onFetch = () => new Promise(res => res('some data')) }) => { | ||
| const Fetcher = ({ | ||
| onFetch = () => new Promise((res) => res('some data')) | ||
| }) => { | ||
| const [state, send] = useMachine(fetchMachine, { | ||
| actions: { | ||
| load: () => { | ||
| onFetch().then(res => { | ||
| onFetch().then((res) => { | ||
| send({ type: 'RESOLVE', data: res }); | ||
@@ -368,3 +376,3 @@ }); | ||
| case 'idle': | ||
| return <button onClick={_ => send('FETCH')}>Fetch</button>; | ||
| return <button onClick={(_) => send('FETCH')}>Fetch</button>; | ||
| case 'loading': | ||
@@ -371,0 +379,0 @@ return <div>Loading...</div>; |
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by1.46%
103023
- Lines of code
- increased by1.4%
1520
- Number of lines in readme file
- increased by1.39%
583
No dependency changes