@xstate/react 4.0.0-alpha.1 → 4.0.0-beta.10

package/README.md

@@ -21,14 +21,6 @@ npm i xstate @xstate/react
 
 By using the global variable `XStateReact`
 
-or
-
-```html
-<script src="https://unpkg.com/@xstate/react/dist/xstate-react-fsm.umd.min.js"></script>
-```
-
-By using the global variable `XStateReactFSM`
-
 2. Import the `useMachine` hook:
 
 ```js

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ActorRefFrom, AnyStateMachine, SnapshotFrom, ActorOptions, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } from 'xstate';
+type ToMachinesWithProvidedImplementations<TMachine extends AnyStateMachine> = TMachine extends StateMachine<infer TContext, infer TEvent, infer TActor, infer TAction, infer TGuard, infer TDelay, infer TTag, infer TInput, infer TOutput, infer TResolvedTypesMeta> ? StateMachine<TContext, TEvent, TActor, TAction, TGuard, TDelay, TTag, TInput, TOutput, AreAllImplementationsAssumedToBeProvided<TResolvedTypesMeta> extends false ? MarkAllImplementationsAsProvided<TResolvedTypesMeta> : TResolvedTypesMeta> : never;
+export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, interpreterOptions?: ActorOptions<TLogic>): {
+    useSelector: <T>(selector: (snapshot: SnapshotFrom<TLogic>) => T, compare?: (a: T, b: T) => boolean) => T;
+    useActorRef: () => ActorRefFrom<TLogic>;
+    Provider: (props: {
+        children: React.ReactNode;
+        options?: ActorOptions<TLogic>;
+    } & (TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends true ? {
+        logic?: TLogic;
+    } : {
+        logic: ToMachinesWithProvidedImplementations<TLogic>;
+    } : {
+        logic?: TLogic;
+    })) => React.ReactElement<any, any>;
+};
+export {};

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

@@ -1,6 +1,6 @@
-export { useMachine } from './useMachine';
-export { useActor } from './useActor';
-export { useInterpret } from './useInterpret';
-export { useSelector } from './useSelector';
-export { useSpawn } from './useSpawn';
-export { shallowEqual } from './shallowEqual';
+export { useActor } from "./useActor.js";
+export { useActorRef } from "./useActorRef.js";
+export { useSelector } from "./useSelector.js";
+export { shallowEqual } from "./shallowEqual.js";
+export { createActorContext } from "./createActorContext.js";
+export { useMachine } from "./useMachine.js";

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

@@ -1,3 +1,2 @@
-import { ActorRef, EventObject, SnapshotFrom } from 'xstate';
-export declare function useActor<TActor extends ActorRef<any, any>>(actorRef: TActor): [SnapshotFrom<TActor>, TActor['send']];
-export declare function useActor<TEvent extends EventObject, TSnapshot>(actorRef: ActorRef<TEvent, TSnapshot>): [TSnapshot, (event: TEvent) => void];
+import { ActorRefFrom, AnyActorLogic, ActorOptions, SnapshotFrom } from 'xstate';
+export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, options?: ActorOptions<TLogic>): [SnapshotFrom<TLogic>, ActorRefFrom<TLogic>['send'], ActorRefFrom<TLogic>];

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

@@ -0,0 +1,14 @@
+import { AnyActorLogic, AnyActor, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, ActorRefFrom, ActorOptions, Observer, StateFrom, SnapshotFrom, TODO } from 'xstate';
+export declare function useIdleInterpreter(machine: AnyActorLogic, options: Partial<ActorOptions<AnyActorLogic>>): AnyActor;
+type RestParams<TLogic extends AnyActorLogic> = TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends false ? [
+    options: ActorOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TODO, TODO, TODO, TLogic['__TResolvedTypesMeta'], true>,
+    observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
+] : [
+    options?: ActorOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TODO, TODO, TODO, TLogic['__TResolvedTypesMeta']>,
+    observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
+] : [
+    options?: ActorOptions<TLogic>,
+    observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
+];
+export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: RestParams<TLogic>): ActorRefFrom<TLogic>;
+export {};

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

@@ -1,21 +1,9 @@
-import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineImplementations, InterpreterFrom, InterpreterOptions, MachineContext, StateConfig, StateFrom } from 'xstate';
-import { MaybeLazy, Prop } from './types';
-export interface UseMachineOptions<TContext extends MachineContext, TEvent extends EventObject> {
-    /**
-     * If provided, will be merged with machine's `context`.
-     */
-    context?: Partial<TContext>;
-    /**
-     * The state to rehydrate the machine to. The machine will
-     * start at this state instead of its `initialState`.
-     */
-    state?: StateConfig<TContext, TEvent>;
-}
-declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
-    options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>
-] : [
-    options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineImplementations<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
+import { ActorRefFrom, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, ActorOptions, MissingImplementationsError, StateFrom } from 'xstate';
+/**
+ * @alias useActor
+ */
+export declare function useMachine<TMachine extends AnyStateMachine>(machine: AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? TMachine : MissingImplementationsError<TMachine['__TResolvedTypesMeta']>, options?: ActorOptions<TMachine>): [
+    StateFrom<TMachine>,
+    ActorRefFrom<TMachine>['send'],
+    ActorRefFrom<TMachine>
 ];
-declare type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
-export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
-export {};

package/dist/xstate-react.cjs.d.mts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=xstate-react.cjs.d.mts.map

package/dist/xstate-react.cjs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xstate-react.cjs.d.mts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

package/dist/xstate-react.cjs.d.ts

@@ -1 +1,2 @@
 export * from "./declarations/src/index";
+//# sourceMappingURL=xstate-react.cjs.d.ts.map

package/dist/xstate-react.cjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xstate-react.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}

package/dist/xstate-react.cjs.js

@@ -1,7 +1,190 @@
 'use strict';
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./xstate-react.cjs.prod.js");
-} else {
-  module.exports = require("./xstate-react.cjs.dev.js");
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var shim = require('use-sync-external-store/shim');
+var xstate = require('xstate');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var withSelector = require('use-sync-external-store/shim/with-selector');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
+
+function useConstant(fn) {
+  const ref = React__namespace.useRef();
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+  return ref.current.v;
+}
+
+function useIdleInterpreter(machine, options) {
+  const actorRef = useConstant(() => {
+    return xstate.createActor(machine, options);
+  });
+
+  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
+  useIsomorphicLayoutEffect__default["default"](() => {
+    actorRef.logic.implementations = machine.implementations;
+  });
+  return actorRef;
+}
+function useActorRef(machine, ...[options = {}, observerOrListener]) {
+  const actorRef = useIdleInterpreter(machine, options);
+  React.useEffect(() => {
+    if (!observerOrListener) {
+      return;
+    }
+    let sub = actorRef.subscribe(xstate.toObserver(observerOrListener));
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [observerOrListener]);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      actorRef.stop();
+      actorRef.status = xstate.ActorStatus.NotStarted;
+      actorRef._initState();
+    };
+  }, []);
+  return actorRef;
+}
+
+function useActor(logic, options = {}) {
+  const actorRef = useIdleInterpreter(logic, options);
+  const getSnapshot = React.useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      actorRef.stop();
+      actorRef.status = xstate.ActorStatus.NotStarted;
+      actorRef._initState();
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
 }
+
+function defaultCompare(a, b) {
+  return a === b;
+}
+function useSelector(actor, selector, compare = defaultCompare) {
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actor.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actor]);
+  const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
+  const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+  return selectedSnapshot;
+}
+
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function createActorContext(actorLogic, interpreterOptions) {
+  const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
+  const OriginalProvider = ReactContext.Provider;
+  function Provider({
+    children,
+    logic: providedLogic = actorLogic,
+    machine,
+    options: providedOptions = interpreterOptions
+  }) {
+    if (machine) {
+      throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
+    }
+    const actor = useActorRef(providedLogic, providedOptions);
+    return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
+      value: actor,
+      children
+    });
+  }
+
+  // TODO: add properties to actor ref to make more descriptive
+  Provider.displayName = `ActorProvider`;
+  function useContext() {
+    const actor = React__namespace.useContext(ReactContext);
+    if (!actor) {
+      throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
+    }
+    return actor;
+  }
+  function useSelector$1(selector, compare) {
+    const actor = useContext();
+    return useSelector(actor, selector, compare);
+  }
+  return {
+    Provider: Provider,
+    useActorRef: useContext,
+    useSelector: useSelector$1
+  };
+}
+
+/**
+ * @alias useActor
+ */
+function useMachine(machine, options = {}) {
+  return useActor(machine, options);
+}
+
+exports.createActorContext = createActorContext;
+exports.shallowEqual = shallowEqual;
+exports.useActor = useActor;
+exports.useActorRef = useActorRef;
+exports.useMachine = useMachine;
+exports.useSelector = useSelector;

package/dist/xstate-react.cjs.mjs

@@ -0,0 +1,8 @@
+export {
+  createActorContext,
+  shallowEqual,
+  useActor,
+  useActorRef,
+  useMachine,
+  useSelector
+} from "./xstate-react.cjs.js";

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

@@ -0,0 +1,199 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var shim = require('use-sync-external-store/shim');
+var xstate = require('xstate');
+var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
+var withSelector = require('use-sync-external-store/shim/with-selector');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
+
+function useConstant(fn) {
+  const ref = React__namespace.useRef();
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+  return ref.current.v;
+}
+
+function useIdleInterpreter(machine, options) {
+  {
+    const [initialMachine] = React.useState(machine);
+    if (machine.config !== initialMachine.config) {
+      console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
+    }
+  }
+  const actorRef = useConstant(() => {
+    return xstate.createActor(machine, options);
+  });
+
+  // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
+  useIsomorphicLayoutEffect__default["default"](() => {
+    actorRef.logic.implementations = machine.implementations;
+  });
+  return actorRef;
+}
+function useActorRef(machine, ...[options = {}, observerOrListener]) {
+  const actorRef = useIdleInterpreter(machine, options);
+  React.useEffect(() => {
+    if (!observerOrListener) {
+      return;
+    }
+    let sub = actorRef.subscribe(xstate.toObserver(observerOrListener));
+    return () => {
+      sub.unsubscribe();
+    };
+  }, [observerOrListener]);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      actorRef.stop();
+      actorRef.status = xstate.ActorStatus.NotStarted;
+      actorRef._initState();
+    };
+  }, []);
+  return actorRef;
+}
+
+function useActor(logic, options = {}) {
+  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
+    throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
+  }
+  const actorRef = useIdleInterpreter(logic, options);
+  const getSnapshot = React.useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      actorRef.stop();
+      actorRef.status = xstate.ActorStatus.NotStarted;
+      actorRef._initState();
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+function defaultCompare(a, b) {
+  return a === b;
+}
+function useSelector(actor, selector, compare = defaultCompare) {
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actor.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actor]);
+  const boundGetSnapshot = React.useCallback(() => actor.getSnapshot(), [actor]);
+  const selectedSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+  return selectedSnapshot;
+}
+
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function createActorContext(actorLogic, interpreterOptions) {
+  const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
+  const OriginalProvider = ReactContext.Provider;
+  function Provider({
+    children,
+    logic: providedLogic = actorLogic,
+    machine,
+    options: providedOptions = interpreterOptions
+  }) {
+    if (machine) {
+      throw new Error(`The "machine" prop has been deprecated. Please use "logic" instead.`);
+    }
+    const actor = useActorRef(providedLogic, providedOptions);
+    return /*#__PURE__*/React__namespace.createElement(OriginalProvider, {
+      value: actor,
+      children
+    });
+  }
+
+  // TODO: add properties to actor ref to make more descriptive
+  Provider.displayName = `ActorProvider`;
+  function useContext() {
+    const actor = React__namespace.useContext(ReactContext);
+    if (!actor) {
+      throw new Error(`You used a hook from "${Provider.displayName}" but it's not inside a <${Provider.displayName}> component.`);
+    }
+    return actor;
+  }
+  function useSelector$1(selector, compare) {
+    const actor = useContext();
+    return useSelector(actor, selector, compare);
+  }
+  return {
+    Provider: Provider,
+    useActorRef: useContext,
+    useSelector: useSelector$1
+  };
+}
+
+/**
+ * @alias useActor
+ */
+function useMachine(machine, options = {}) {
+  return useActor(machine, options);
+}
+
+exports.createActorContext = createActorContext;
+exports.shallowEqual = shallowEqual;
+exports.useActor = useActor;
+exports.useActorRef = useActorRef;
+exports.useMachine = useMachine;
+exports.useSelector = useSelector;

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

@@ -0,0 +1,8 @@
+export {
+  createActorContext,
+  shallowEqual,
+  useActor,
+  useActorRef,
+  useMachine,
+  useSelector
+} from "./xstate-react.development.cjs.js";