@bffr/hooks - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/use-animation-phase.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAnimationPhase = void 0;
+const tools_1 = require("@bffr/tools");
 const react_1 = require("react");
 const defaultEdges = {
     entering: 200,
+    pending: 100,
     leaving: 200,
@@ -17,11 +19,15 @@ };
 function useAnimationPhase(loading, edges = defaultEdges) {
-    const [mode, setMode] = (0, react_1.useReducer)((phase, loading) => phaseMap[phase][loading == null ? 2 : loading ? 1 : 0] ?? phase, loading ? 'entering' : 'idle');
-    // begin or end loading, do nothing on undefined
-    (0, react_1.useEffect)(() => setMode(loading), [loading]);
+    const [mode, next] = (0, react_1.useReducer)((phase, loading) => 
+    // we map loading state to an index to get the next phase
+    phaseMap[phase][loading == null ? 2 : loading ? 1 : 0] ?? phase, 
+    // start in the correct state
+    loading ? 'entering' : 'idle');
+    // begin or end loading
+    (0, react_1.useEffect)(() => next(loading), [loading]);
     (0, react_1.useEffect)(() => {
         const duration = edges?.[mode] ?? defaultEdges[mode];
-        if (duration != null) {
-            const id = setTimeout(() => setMode(undefined), duration);
-            return () => clearTimeout(id);
-        }
+        // setting a duration of zero will trigger the timeout
+        return duration == null
+            ? next(undefined)
+            : (0, tools_1.createTimeout)(() => next(undefined), duration);
     }, [mode, edges[mode]]);
@@ -28,0 +34,0 @@ return mode;

dist/use-meta-effect.d.ts

@@ -6,3 +6,11 @@ import { DependencyList } from 'react';
 declare type Destructor = (() => void) | void | undefined;
+/**
+ * A value returning effect
+ * … I guess meta was for sharing an ongoing process? 🤔
+ *
+ * @param effect () => value | destructor | [value, destructor]
+ * @param deps [changes to effect] or nothing
+ * @returns
+ */
 export declare function useMetaEffect<T>(effect: MetaEffectCallback<T>, deps?: DependencyList): T | undefined;
 export {};

dist/use-meta-effect.js

@@ -7,2 +7,10 @@ "use strict";
 const use_mounted_ref_1 = require("./use-mounted-ref");
+/**
+ * A value returning effect
+ * … I guess meta was for sharing an ongoing process? 🤔
+ *
+ * @param effect () => value | destructor | [value, destructor]
+ * @param deps [changes to effect] or nothing
+ * @returns
+ */
 function useMetaEffect(effect, deps) {
@@ -9,0 +17,0 @@ const [value, setValue] = (0, react_1.useState)();

package.json

 {
   "name": "@bffr/hooks",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "The definitive collection of idiomatic hooks 👀",
@@ -30,7 +30,8 @@ "main": "./dist/index.js",
     "@bffr/preset": "workspace:*",
+    "@bffr/tools": "workspace:^",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.1.2",
     "@types/react": "^18.0.21",
-    "typescript": "^4.6.2",
-    "react": "^18.1.0"
+    "react": "^18.1.0",
+    "typescript": "^4.6.2"
   },
@@ -41,3 +42,3 @@ "peerDependencies": {
   "dependencies": {
-    "@bffr/tools": "^0.0.5",
+    "@bffr/tools": "^0.0.8",
     "@evanrs/fetch": "^0.2.0",
@@ -44,0 +45,0 @@ "@sindresorhus/is": "4.6.0"

src/use-animation-phase.ts

@@ -0,1 +1,2 @@
+import { createTimeout, createTimer } from '@bffr/tools';
 import { useEffect, useReducer } from 'react';
@@ -7,2 +8,3 @@
   entering: 200,
+  pending: 100,
   leaving: 200,
@@ -20,16 +22,18 @@ };
 export function useAnimationPhase(loading: boolean, edges = defaultEdges) {
-  const [mode, setMode] = useReducer(
+  const [mode, next] = useReducer(
     (phase: Phase, loading: undefined | boolean): Phase =>
+      // we map loading state to an index to get the next phase
       phaseMap[phase][loading == null ? 2 : loading ? 1 : 0] ?? phase,
+    // start in the correct state
     loading ? 'entering' : 'idle',
   );
 
-  // begin or end loading, do nothing on undefined
-  useEffect(() => setMode(loading), [loading]);
+  // begin or end loading
+  useEffect(() => next(loading), [loading]);
   useEffect(() => {
     const duration = edges?.[mode] ?? defaultEdges[mode];
-    if (duration != null) {
-      const id = setTimeout(() => setMode(undefined), duration);
-      return () => clearTimeout(id);
-    }
+    // setting a duration of zero will trigger the timeout
+    return duration == null
+      ? next(undefined)
+      : createTimeout(() => next(undefined), duration);
   }, [mode, edges[mode]]);
@@ -36,0 +40,0 @@

src/use-meta-effect.ts

@@ -9,2 +9,10 @@ import { useEffect, useState, DependencyList } from 'react';
 
+/**
+ * A value returning effect
+ * … I guess meta was for sharing an ongoing process? 🤔
+ *
+ * @param effect () => value | destructor | [value, destructor]
+ * @param deps [changes to effect] or nothing
+ * @returns
+ */
 export function useMetaEffect<T>(
@@ -11,0 +19,0 @@ effect: MetaEffectCallback<T>,

No alert changes

Improved metrics

Total package byte prevSize

88087

increased by8.77%

Number of package files

115

increased by7.48%

Lines of code

1729

increased by10.48%

Worsened metrics

Dev dependency count

7

increased by16.67%

Dependency changes

• + Added@bffr/tools@0.0.8(transitive)

• - Removed@bffr/tools@0.0.5(transitive)

• Updated@bffr/tools@^0.0.8