@xstate/react - npm Package Compare versions

Comparing version 4.0.0-beta.6 to 4.0.0-beta.7

dist/declarations/src/createActorContext.d.ts

 import * as React from 'react';
-import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, Observer, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } from 'xstate';
+import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } from 'xstate';
 type ToMachinesWithProvidedImplementations<TMachine extends AnyStateMachine> = TMachine extends StateMachine<infer TContext, infer TEvent, infer TAction, infer TActorMap, infer TResolvedTypesMeta> ? StateMachine<TContext, TEvent, TAction, TActorMap, AreAllImplementationsAssumedToBeProvided<TResolvedTypesMeta> extends false ? MarkAllImplementationsAsProvided<TResolvedTypesMeta> : TResolvedTypesMeta> : never;
-export declare function createActorContext<TMachine extends AnyActorLogic>(actorLogic: TMachine, interpreterOptions?: InterpreterOptions<TMachine>, observerOrListener?: Observer<SnapshotFrom<TMachine>> | ((value: SnapshotFrom<TMachine>) => void)): {
-    useSelector: <T>(selector: (snapshot: SnapshotFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
-    useActorRef: () => ActorRefFrom<TMachine>;
+export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, interpreterOptions?: InterpreterOptions<TLogic>): {
+    useSelector: <T>(selector: (snapshot: SnapshotFrom<TLogic>) => T, compare?: (a: T, b: T) => boolean) => T;
+    useActorRef: () => ActorRefFrom<TLogic>;
     Provider: (props: {
         children: React.ReactNode;
-    } & (TMachine extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? {
-        logic?: TMachine;
+        options?: InterpreterOptions<TLogic>;
+    } & (TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends true ? {
+        logic?: TLogic;
     } : {
-        logic: ToMachinesWithProvidedImplementations<TMachine>;
+        logic: ToMachinesWithProvidedImplementations<TLogic>;
     } : {
-        logic?: TMachine;
+        logic?: TLogic;
     })) => React.ReactElement<any, any>;
 };
 export {};

dist/xstate-react.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 var React = require('react');
-var withSelector = require('use-sync-external-store/shim/with-selector');
+var shim = require('use-sync-external-store/shim');
 var xstate = require('xstate');
@@ -12,2 +12,3 @@ var useConstant = require('./useConstant-2ee82f84.cjs.js');
 require('xstate/actors');
+var withSelector = require('use-sync-external-store/shim/with-selector');
 
@@ -44,3 +45,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.options = machine.options;
+    actorRef.logic.implementations = machine.implementations;
   });
@@ -50,3 +51,3 @@ return actorRef;
 function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const service = useIdleInterpreter(machine, options);
+  const actorRef = useIdleInterpreter(machine, options);
   React.useEffect(() => {
@@ -56,3 +57,3 @@ if (!observerOrListener) {
     }
-    let sub = service.subscribe(xstate.toObserver(observerOrListener));
+    let sub = actorRef.subscribe(xstate.toObserver(observerOrListener));
     return () => {
@@ -63,18 +64,12 @@ sub.unsubscribe();
   React.useEffect(() => {
-    service.start();
+    actorRef.start();
     return () => {
-      service.stop();
-      service.status = xstate.InterpreterStatus.NotStarted;
-      service._initState();
+      actorRef.stop();
+      actorRef.status = xstate.InterpreterStatus.NotStarted;
+      actorRef._initState();
     };
   }, []);
-  return service;
+  return actorRef;
 }
 
-function identity(a) {
-  return a;
-}
-const isEqual = (prevState, nextState) => {
-  return prevState === nextState || nextState.changed === false;
-};
 function useActor(logic, options = {}) {
@@ -91,3 +86,3 @@ const actorRef = useIdleInterpreter(logic, options);
   }, [actorRef]);
-  const actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   React.useEffect(() => {
@@ -143,3 +138,3 @@ actorRef.start();
 
-function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
+function createActorContext(actorLogic, interpreterOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
@@ -150,3 +145,4 @@ const OriginalProvider = ReactContext.Provider;
     logic: providedLogic = actorLogic,
-    machine
+    machine,
+    options: providedOptions = interpreterOptions
   }) {
@@ -156,3 +152,3 @@ if (machine) {
     }
-    const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
+    const actor = useActorRef(providedLogic, providedOptions);
     return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
@@ -159,0 +155,0 @@ value: actor,

dist/xstate-react.development.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 var React = require('react');
-var withSelector = require('use-sync-external-store/shim/with-selector');
+var shim = require('use-sync-external-store/shim');
 var xstate = require('xstate');
@@ -12,2 +12,3 @@ var useConstant = require('./useConstant-ae6dceac.development.cjs.js');
 var actors = require('xstate/actors');
+var withSelector = require('use-sync-external-store/shim/with-selector');
 
@@ -50,3 +51,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.options = machine.options;
+    actorRef.logic.implementations = machine.implementations;
   });
@@ -56,3 +57,3 @@ return actorRef;
 function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const service = useIdleInterpreter(machine, options);
+  const actorRef = useIdleInterpreter(machine, options);
   React.useEffect(() => {
@@ -62,3 +63,3 @@ if (!observerOrListener) {
     }
-    let sub = service.subscribe(xstate.toObserver(observerOrListener));
+    let sub = actorRef.subscribe(xstate.toObserver(observerOrListener));
     return () => {
@@ -69,18 +70,12 @@ sub.unsubscribe();
   React.useEffect(() => {
-    service.start();
+    actorRef.start();
     return () => {
-      service.stop();
-      service.status = xstate.InterpreterStatus.NotStarted;
-      service._initState();
+      actorRef.stop();
+      actorRef.status = xstate.InterpreterStatus.NotStarted;
+      actorRef._initState();
     };
   }, []);
-  return service;
+  return actorRef;
 }
 
-function identity(a) {
-  return a;
-}
-const isEqual = (prevState, nextState) => {
-  return prevState === nextState || nextState.changed === false;
-};
 function useActor(logic, options = {}) {
@@ -100,3 +95,3 @@ if (actors.isActorRef(logic)) {
   }, [actorRef]);
-  const actorSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   React.useEffect(() => {
@@ -152,3 +147,3 @@ actorRef.start();
 
-function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
+function createActorContext(actorLogic, interpreterOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
@@ -159,3 +154,4 @@ const OriginalProvider = ReactContext.Provider;
     logic: providedLogic = actorLogic,
-    machine
+    machine,
+    options: providedOptions = interpreterOptions
   }) {
@@ -165,3 +161,3 @@ if (machine) {
     }
-    const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
+    const actor = useActorRef(providedLogic, providedOptions);
     return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
@@ -168,0 +164,0 @@ value: actor,

dist/xstate-react.development.esm.js

 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { toObserver, InterpreterStatus, interpret } from 'xstate';
@@ -8,2 +8,3 @@ import { u as useConstant } from './useConstant-bac83df4.development.esm.js';
 import { isActorRef } from 'xstate/actors';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
@@ -23,3 +24,3 @@ function useIdleInterpreter(machine, options) {
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.options = machine.options;
+    actorRef.logic.implementations = machine.implementations;
   });
@@ -29,3 +30,3 @@ return actorRef;
 function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const service = useIdleInterpreter(machine, options);
+  const actorRef = useIdleInterpreter(machine, options);
   useEffect(() => {
@@ -35,3 +36,3 @@ if (!observerOrListener) {
     }
-    let sub = service.subscribe(toObserver(observerOrListener));
+    let sub = actorRef.subscribe(toObserver(observerOrListener));
     return () => {
@@ -42,18 +43,12 @@ sub.unsubscribe();
   useEffect(() => {
-    service.start();
+    actorRef.start();
     return () => {
-      service.stop();
-      service.status = InterpreterStatus.NotStarted;
-      service._initState();
+      actorRef.stop();
+      actorRef.status = InterpreterStatus.NotStarted;
+      actorRef._initState();
     };
   }, []);
-  return service;
+  return actorRef;
 }
 
-function identity(a) {
-  return a;
-}
-const isEqual = (prevState, nextState) => {
-  return prevState === nextState || nextState.changed === false;
-};
 function useActor(logic, options = {}) {
@@ -73,3 +68,3 @@ if (isActorRef(logic)) {
   }, [actorRef]);
-  const actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   useEffect(() => {
@@ -125,3 +120,3 @@ actorRef.start();
 
-function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
+function createActorContext(actorLogic, interpreterOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
@@ -132,3 +127,4 @@ const OriginalProvider = ReactContext.Provider;
     logic: providedLogic = actorLogic,
-    machine
+    machine,
+    options: providedOptions = interpreterOptions
   }) {
@@ -138,3 +134,3 @@ if (machine) {
     }
-    const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
+    const actor = useActorRef(providedLogic, providedOptions);
     return /*#__PURE__*/React.createElement(OriginalProvider, {
@@ -141,0 +137,0 @@ value: actor,

dist/xstate-react.esm.js

 import * as React from 'react';
 import { useEffect, useCallback } from 'react';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { toObserver, InterpreterStatus, interpret } from 'xstate';
@@ -8,2 +8,3 @@ import { u as useConstant } from './useConstant-c7ec0fdd.esm.js';
 import 'xstate/actors';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
@@ -17,3 +18,3 @@ function useIdleInterpreter(machine, options) {
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.options = machine.options;
+    actorRef.logic.implementations = machine.implementations;
   });
@@ -23,3 +24,3 @@ return actorRef;
 function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const service = useIdleInterpreter(machine, options);
+  const actorRef = useIdleInterpreter(machine, options);
   useEffect(() => {
@@ -29,3 +30,3 @@ if (!observerOrListener) {
     }
-    let sub = service.subscribe(toObserver(observerOrListener));
+    let sub = actorRef.subscribe(toObserver(observerOrListener));
     return () => {
@@ -36,18 +37,12 @@ sub.unsubscribe();
   useEffect(() => {
-    service.start();
+    actorRef.start();
     return () => {
-      service.stop();
-      service.status = InterpreterStatus.NotStarted;
-      service._initState();
+      actorRef.stop();
+      actorRef.status = InterpreterStatus.NotStarted;
+      actorRef._initState();
     };
   }, []);
-  return service;
+  return actorRef;
 }
 
-function identity(a) {
-  return a;
-}
-const isEqual = (prevState, nextState) => {
-  return prevState === nextState || nextState.changed === false;
-};
 function useActor(logic, options = {}) {
@@ -64,3 +59,3 @@ const actorRef = useIdleInterpreter(logic, options);
   }, [actorRef]);
-  const actorSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   useEffect(() => {
@@ -116,3 +111,3 @@ actorRef.start();
 
-function createActorContext(actorLogic, interpreterOptions, observerOrListener) {
+function createActorContext(actorLogic, interpreterOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
@@ -123,3 +118,4 @@ const OriginalProvider = ReactContext.Provider;
     logic: providedLogic = actorLogic,
-    machine
+    machine,
+    options: providedOptions = interpreterOptions
   }) {
@@ -129,3 +125,3 @@ if (machine) {
     }
-    const actor = useActorRef(providedLogic, interpreterOptions, observerOrListener);
+    const actor = useActorRef(providedLogic, providedOptions);
     return /*#__PURE__*/React.createElement(OriginalProvider, {
@@ -132,0 +128,0 @@ value: actor,

package.json

 {
   "name": "@xstate/react",
-  "version": "4.0.0-beta.6",
+  "version": "4.0.0-beta.7",
   "description": "XState tools for React",
@@ -74,3 +74,3 @@ "keywords": [
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.0.0-beta.14"
+    "xstate": "^5.0.0-beta.16"
   },
@@ -100,3 +100,3 @@ "peerDependenciesMeta": {
     "react-dom": "^18.0.0",
-    "xstate": "5.0.0-beta.14"
+    "xstate": "5.0.0-beta.16"
   },
@@ -103,0 +103,0 @@ "preconstruct": {

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

44201

decreased by-1.01%

Lines of code

1044

decreased by-1.42%

No dependency changes