@reach/machine - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

dist/index.d.ts

@@ -24,3 +24,3 @@ /// <reference types="react" />
  */
-export declare function useMachine<TC extends object, TE extends MachineEventWithRefs = MachineEventWithRefs, TS extends Typestate<TC> = any>(initialMachine: StateMachine.Machine<TC, TE, TS>, refs: MachineToReactRefMap<TE>): [StateMachine.State<TC, TE, TS>, StateMachine.Service<TC, DistributiveOmit<TE, "refs">>["send"], StateMachine.Service<TC, TE>];
+export declare function useMachine<TC extends object, TE extends MachineEventWithRefs = MachineEventWithRefs, TS extends Typestate<TC> = any>(initialMachine: StateMachine.Machine<TC, TE, TS>, refs: MachineToReactRefMap<TE>, DEBUG?: boolean): [Omit<StateMachine.State<TC, TE, TS>, "actions">, StateMachine.Service<TC, DistributiveOmit<TE, "refs">>["send"], StateMachine.Service<TC, TE>];
 /**
@@ -34,11 +34,2 @@ * Converts an object with React refs into an object with the same keys and
 /**
- * Wraps useMachine to log events as they are sent in dev mode.
- *
- * @param machineTuple The tuple returned by useMachine (current state, the send
- *                     function, and the machine service object)
- * @param DEBUG        Whether or not to activate logging (we can't call hooks
- *                     conditionally, fam)
- */
-export declare function useMachineLogger<TC extends object, TE extends MachineEventWithRefs = MachineEventWithRefs>([current, send, service]: [MachineState<TC, TE>, MachineSend<TC, TE>, MachineService<TC, TE>], DEBUG?: boolean): [MachineState<TC, TE>, MachineSend<TC, TE>, MachineService<TC, TE>];
-/**
  * Most of the time you want to create a static state machine outside of your
@@ -45,0 +36,0 @@ * component, but in some cases we may need data from props in the first render

dist/machine.cjs.development.js

@@ -27,2 +27,9 @@ 'use strict';
 
+var getServiceState = function getServiceState(service) {
+  var currentValue;
+  service.subscribe(function (state) {
+    currentValue = state;
+  }).unsubscribe();
+  return currentValue;
+};
 /**
@@ -49,18 +56,23 @@ * This `useMachine` works very similiarly to what you get from `@xstate/react`
 
-function useMachine(initialMachine, refs) {
-  /*
-   * State machine should not change between renders, so let's store it in a
-   * ref. This should also help if we need to use a creator function to inject
-   * dynamic initial state values based on props.
-   */
-  var _useRef = react.useRef(initialMachine),
-      machine = _useRef.current;
 
+function useMachine(initialMachine, refs, DEBUG) {
+  // State machine should not change between renders, so let's store it in a
+  // ref. This should also help if we need to use a creator function to inject
+  // dynamic initial state values based on props.
+  var machineRef = react.useRef(initialMachine);
   var service = utils.useConstant(function () {
-    return fsm.interpret(machine).start();
+    return fsm.interpret(machineRef.current).start();
   });
 
-  var _useState = react.useState(machine.initialState),
-      current = _useState[0],
-      setCurrent = _useState[1]; // Add refs to every event so we can use them to perform actions.
+  var _useState = react.useState(function () {
+    return getServiceState(service);
+  }),
+      state = _useState[0],
+      setState = _useState[1]; // This function reference will change on every render if we just pass on
+  // current.matches, but it shouldn't change unless the current value is
+  // updated. This was causing some lagginess when profiling in Listbox but
+  // is probably an issue everywhere since the parent components that handle
+  // state logic at the top might re-create context on each render as a
+  // result of this change.
+  // Add refs to every event so we can use them to perform actions.
 
@@ -76,11 +88,46 @@
     }));
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
+
+    {
+      if (DEBUG) {
+        console.group("Event Sent");
+        console.log("Event:", event);
+        console.groupEnd();
+      }
+    }
+  }, // We can disable the lint warning here. Refs will always be refs
+  // (TypeScript enforced!) and should not trigger a re-render. The state
+  // machine service persist for the life of the component.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [DEBUG]);
   react.useEffect(function () {
-    service.subscribe(setCurrent);
+    service.subscribe(function setStateIfChanged(newState) {
+      if (newState.changed) {
+        setState(newState);
+      }
+    });
     return function () {
       service.stop();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return [current, send, service];
+    };
+  }, [service]);
+  react.useEffect(function () {
+    {
+      if (DEBUG && state.changed) {
+        console.group("State Updated");
+        console.log("State:", state);
+        console.groupEnd();
+      }
+    }
+  }, [DEBUG, state]); // We are going to pass along our state without the actions to avoid excess
+  // renders when the reference changes. We haven't really needed them at this
+  // point, but if we do we can maybe reconsider this approach.
+
+  var memoizedState = react.useMemo(function () {
+    return _extends({}, state, {
+      matches: function matches(value) {
+        return value === state.value;
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state.changed, state.context, state.value]);
+  return [memoizedState, send, service];
 }
@@ -103,36 +150,2 @@ /**
 /**
- * Wraps useMachine to log events as they are sent in dev mode.
- *
- * @param machineTuple The tuple returned by useMachine (current state, the send
- *                     function, and the machine service object)
- * @param DEBUG        Whether or not to activate logging (we can't call hooks
- *                     conditionally, fam)
- */
-
-function useMachineLogger(_ref2, DEBUG) {
-  var current = _ref2[0],
-      send = _ref2[1],
-      service = _ref2[2];
-  var eventRef = react.useRef();
-  var newSendRef = react.useRef( DEBUG ? function (event) {
-    eventRef.current = event;
-    send(event);
-  } : send);
-  react.useEffect(function () {
-    {
-      if (DEBUG) {
-        var event = eventRef.current;
-
-        if (event) {
-          console.group("Event Sent");
-          console.log("Event:", event);
-          console.log("State:", current);
-          console.groupEnd();
-        }
-      }
-    }
-  }, [DEBUG, current]);
-  return [current, newSendRef.current, service];
-}
-/**
  * Most of the time you want to create a static state machine outside of your
@@ -184,3 +197,2 @@ * component, but in some cases we may need data from props in the first render
 exports.useMachine = useMachine;
-exports.useMachineLogger = useMachineLogger;
 //# sourceMappingURL=machine.cjs.development.js.map

dist/machine.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@xstate/fsm"),r=require("@reach/utils");function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function u(e){return Object.entries(e).reduce((function(e,t){return e[t[0]]=t[1].current,e}),{})}Object.defineProperty(exports,"InterpreterStatus",{enumerable:!0,get:function(){return t.InterpreterStatus}}),Object.defineProperty(exports,"assign",{enumerable:!0,get:function(){return t.assign}}),Object.defineProperty(exports,"createMachine",{enumerable:!0,get:function(){return t.createMachine}}),Object.defineProperty(exports,"interpret",{enumerable:!0,get:function(){return t.interpret}}),exports.unwrapRefs=u,exports.useCreateMachine=function(e,n){return r.useConstant((function(){return t.createMachine(e,n)}))},exports.useMachine=function(i,s){var c=e.useRef(i).current,a=r.useConstant((function(){return t.interpret(c).start()})),o=e.useState(c.initialState),f=o[0],p=o[1],b=e.useCallback((function(e){var t=r.isString(e)?{type:e}:e,i=u(s);a.send(n({},t,{refs:i}))}),[]);return e.useEffect((function(){return a.subscribe(p),function(){a.stop()}}),[]),[f,b,a]},exports.useMachineLogger=function(t,r){var n=t[0],u=t[1],i=t[2],s=(e.useRef(),e.useRef(u));return e.useEffect((function(){}),[r,n]),[n,s.current,i]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@xstate/fsm"),r=require("@reach/utils");function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function u(e){return Object.entries(e).reduce((function(e,t){return e[t[0]]=t[1].current,e}),{})}Object.defineProperty(exports,"InterpreterStatus",{enumerable:!0,get:function(){return t.InterpreterStatus}}),Object.defineProperty(exports,"assign",{enumerable:!0,get:function(){return t.assign}}),Object.defineProperty(exports,"createMachine",{enumerable:!0,get:function(){return t.createMachine}}),Object.defineProperty(exports,"interpret",{enumerable:!0,get:function(){return t.interpret}}),exports.unwrapRefs=u,exports.useCreateMachine=function(e,n){return r.useConstant((function(){return t.createMachine(e,n)}))},exports.useMachine=function(c,i,s){var o=e.useRef(c),a=r.useConstant((function(){return t.interpret(o.current).start()})),f=e.useState((function(){return function(e){var t;return e.subscribe((function(e){t=e})).unsubscribe(),t}(a)})),p=f[0],b=f[1],l=e.useCallback((function(e){var t=r.isString(e)?{type:e}:e,c=u(i);a.send(n({},t,{refs:c}))}),[s]);return e.useEffect((function(){return a.subscribe((function(e){e.changed&&b(e)})),function(){a.stop()}}),[a]),e.useEffect((function(){}),[s,p]),[e.useMemo((function(){return n({},p,{matches:function(e){return e===p.value}})}),[p.changed,p.context,p.value]),l,a]};
 //# sourceMappingURL=machine.cjs.production.min.js.map

dist/machine.esm.js

@@ -1,2 +0,2 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { interpret, createMachine } from '@xstate/fsm';
@@ -24,2 +24,9 @@ export { InterpreterStatus, assign, createMachine, interpret } from '@xstate/fsm';
 
+var getServiceState = function getServiceState(service) {
+  var currentValue;
+  service.subscribe(function (state) {
+    currentValue = state;
+  }).unsubscribe();
+  return currentValue;
+};
 /**
@@ -46,18 +53,23 @@ * This `useMachine` works very similiarly to what you get from `@xstate/react`
 
-function useMachine(initialMachine, refs) {
-  /*
-   * State machine should not change between renders, so let's store it in a
-   * ref. This should also help if we need to use a creator function to inject
-   * dynamic initial state values based on props.
-   */
-  var _useRef = useRef(initialMachine),
-      machine = _useRef.current;
 
+function useMachine(initialMachine, refs, DEBUG) {
+  // State machine should not change between renders, so let's store it in a
+  // ref. This should also help if we need to use a creator function to inject
+  // dynamic initial state values based on props.
+  var machineRef = useRef(initialMachine);
   var service = useConstant(function () {
-    return interpret(machine).start();
+    return interpret(machineRef.current).start();
   });
 
-  var _useState = useState(machine.initialState),
-      current = _useState[0],
-      setCurrent = _useState[1]; // Add refs to every event so we can use them to perform actions.
+  var _useState = useState(function () {
+    return getServiceState(service);
+  }),
+      state = _useState[0],
+      setState = _useState[1]; // This function reference will change on every render if we just pass on
+  // current.matches, but it shouldn't change unless the current value is
+  // updated. This was causing some lagginess when profiling in Listbox but
+  // is probably an issue everywhere since the parent components that handle
+  // state logic at the top might re-create context on each render as a
+  // result of this change.
+  // Add refs to every event so we can use them to perform actions.
 
@@ -73,11 +85,46 @@
     }));
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
+
+    if (process.env.NODE_ENV !== "production") {
+      if (DEBUG) {
+        console.group("Event Sent");
+        console.log("Event:", event);
+        console.groupEnd();
+      }
+    }
+  }, // We can disable the lint warning here. Refs will always be refs
+  // (TypeScript enforced!) and should not trigger a re-render. The state
+  // machine service persist for the life of the component.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [DEBUG]);
   useEffect(function () {
-    service.subscribe(setCurrent);
+    service.subscribe(function setStateIfChanged(newState) {
+      if (newState.changed) {
+        setState(newState);
+      }
+    });
     return function () {
       service.stop();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return [current, send, service];
+    };
+  }, [service]);
+  useEffect(function () {
+    if (process.env.NODE_ENV !== "production") {
+      if (DEBUG && state.changed) {
+        console.group("State Updated");
+        console.log("State:", state);
+        console.groupEnd();
+      }
+    }
+  }, [DEBUG, state]); // We are going to pass along our state without the actions to avoid excess
+  // renders when the reference changes. We haven't really needed them at this
+  // point, but if we do we can maybe reconsider this approach.
+
+  var memoizedState = useMemo(function () {
+    return _extends({}, state, {
+      matches: function matches(value) {
+        return value === state.value;
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state.changed, state.context, state.value]);
+  return [memoizedState, send, service];
 }
@@ -100,36 +147,2 @@ /**
 /**
- * Wraps useMachine to log events as they are sent in dev mode.
- *
- * @param machineTuple The tuple returned by useMachine (current state, the send
- *                     function, and the machine service object)
- * @param DEBUG        Whether or not to activate logging (we can't call hooks
- *                     conditionally, fam)
- */
-
-function useMachineLogger(_ref2, DEBUG) {
-  var current = _ref2[0],
-      send = _ref2[1],
-      service = _ref2[2];
-  var eventRef = useRef();
-  var newSendRef = useRef(process.env.NODE_ENV !== "production" && DEBUG ? function (event) {
-    eventRef.current = event;
-    send(event);
-  } : send);
-  useEffect(function () {
-    if (process.env.NODE_ENV !== "production") {
-      if (DEBUG) {
-        var event = eventRef.current;
-
-        if (event) {
-          console.group("Event Sent");
-          console.log("Event:", event);
-          console.log("State:", current);
-          console.groupEnd();
-        }
-      }
-    }
-  }, [DEBUG, current]);
-  return [current, newSendRef.current, service];
-}
-/**
  * Most of the time you want to create a static state machine outside of your
@@ -154,3 +167,3 @@ * component, but in some cases we may need data from props in the first render
 
-export { unwrapRefs, useCreateMachine, useMachine, useMachineLogger };
+export { unwrapRefs, useCreateMachine, useMachine };
 //# sourceMappingURL=machine.esm.js.map

package.json

 {
   "name": "@reach/machine",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "State machine utilities for the Reach UI library.",
@@ -16,5 +16,5 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/utils": "^0.10.0",
-    "@xstate/fsm": "^1.3.0",
-    "tslib": "^1.10.0"
+    "@reach/utils": "^0.10.1",
+    "@xstate/fsm": "^1.4.0",
+    "tslib": "^1.11.1"
   },
@@ -32,3 +32,3 @@ "peerDependencies": {
   ],
-  "gitHead": "e95268bdcebc7f0b5311beff4b6a8e29636decfe"
+  "gitHead": "c279bc0fb9ae84aa77306c5f1a9909d088bc665c"
 }

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

Improved metrics

Total package byte prevSize

49140

increased by10.04%

Lines of code

403

increased by4.13%

Dependency changes

• Updated@reach/utils@^0.10.1

• Updated@xstate/fsm@^1.4.0

• Updatedtslib@^1.11.1