@xstate/react 4.0.3 → 4.1.1

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains utilities for using [XState](https://github.com/statelyai/xstate) with [React](https://github.com/facebook/react/).
 
-- [Read the full documentation in the XState docs](https://xstate.js.org/docs/packages/xstate-react/).
+- [Read the full documentation in the XState docs](https://stately.ai/docs/xstate-react).
 - [Read our contribution guidelines](https://github.com/statelyai/xstate/blob/main/CONTRIBUTING.md).
 
 ## Quick start
@@ -15,7 +15,7 @@ npm i xstate @xstate/react
 
 2. Import the `useMachine` hook:
 
-```js
+```tsx
 import { useMachine } from '@xstate/react';
 import { createMachine } from 'xstate';
 
@@ -36,7 +36,7 @@ export const Toggler = () => {
   const [state, send] = useMachine(toggleMachine);
 
   return (
-    <button onClick={() => send('TOGGLE')}>
+    <button onClick={() => send({ type: 'TOGGLE' })}>
       {state.value === 'inactive'
         ? 'Click to activate'
         : 'Active! Click to deactivate'}

package/dist/declarations/src/useSelector.d.ts

@@ -1,2 +1,4 @@
-import { ActorRef, SnapshotFrom } from 'xstate';
-export declare function useSelector<TActor extends ActorRef<any, any>, T>(actor: TActor, selector: (emitted: SnapshotFrom<TActor>) => T, compare?: (a: T, b: T) => boolean): T;
+import { AnyActorRef } from 'xstate';
+export declare function useSelector<TActor extends Pick<AnyActorRef, 'subscribe' | 'getSnapshot'> | undefined, T>(actor: TActor, selector: (snapshot: TActor extends {
+    getSnapshot(): infer TSnapshot;
+} ? TSnapshot : undefined) => T, compare?: (a: T, b: T) => boolean): T;

package/dist/xstate-react.cjs.js

@@ -131,12 +131,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = React.useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = React.useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }

package/dist/xstate-react.development.cjs.js

@@ -134,12 +134,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = React.useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = React.useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }

package/dist/xstate-react.development.esm.js

@@ -108,12 +108,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }

package/dist/xstate-react.esm.js

@@ -105,12 +105,15 @@ function defaultCompare(a, b) {
 }
 function useSelector(actor, selector, compare = defaultCompare) {
   const subscribe = useCallback(handleStoreChange => {
+    if (!actor) {
+      return () => {};
+    }
     const {
       unsubscribe
     } = actor.subscribe(handleStoreChange);
     return unsubscribe;
   }, [actor]);
-  const boundGetSnapshot = useCallback(() => actor.getSnapshot(), [actor]);
+  const boundGetSnapshot = useCallback(() => actor?.getSnapshot(), [actor]);
   const selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
   return selectedSnapshot;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "4.0.3",
+  "version": "4.1.1",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -55,7 +55,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.5.2"
+    "xstate": "^5.11.0"
   },
   "peerDependenciesMeta": {
     "xstate": {
@@ -64,10 +64,10 @@
   },
   "dependencies": {
     "use-isomorphic-layout-effect": "^1.1.2",
-    "use-sync-external-store": "^1.0.0"
+    "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.2.1",
     "@types/jsdom": "^12.2.3",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
@@ -76,6 +76,6 @@
     "jsdom-global": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "xstate": "5.5.2"
+    "xstate": "5.11.0"
   }
 }