use-memo-map 0.0.0-main.ec78c8b → 0.0.0-main.ff61b2d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,30 +4,9 @@ Memoizes calls to array map function similar to `React.useMemo`. Memoized result
4
4
 
5
5
  ## Background
6
6
 
7
- tl;dr, `React.useMemo()` cache a single call. `useMemoAll()` cache multiple calls.
7
+ tl;dr, `React.useMemo()` cache a single call. `useMemoMap()` cache multiple calls.
8
8
 
9
- If you have a variable-length array and would like to cache `Array.map` like `useMemo`, you can use `useMemoAll` to cache all calls.
10
-
11
- ## API
12
-
13
- ```ts
14
- type UseMemoMapOptions<T> = {
15
- itemEquality?: (this: readonly T[], x: T, y: T) => boolean;
16
- };
17
-
18
- function useMemoMap<T = unknown, R = unknown>(
19
- mapper: (this: readonly T[], item: T, index: -1, array: readonly T[]) => R,
20
- { itemEquality = Object.is }: UseMemoMapOptions<T> = {}
21
- ): (array: readonly T[]) => readonly R[] {}
22
- ```
23
-
24
- For example, converting a `number` array into a `string` array.
25
-
26
- ```ts
27
- function useMemoMap(
28
- mapper: (item: number, index: -1, array: readonly number[]) => string
29
- ): (array: readonly number[]) => readonly string[];
30
- ```
9
+ If you have a variable-length array and would like to cache `Array.map` like `useMemo`, you can use `useMemoMap` to cache all calls.
31
10
 
32
11
  ## How to use
33
12
 
@@ -41,7 +20,7 @@ const MyComponent = () => {
41
20
  return value * 10;
42
21
  }, []);
43
22
 
44
- // useMemoMap() will return a function similar to Array.map().
23
+ // useMemoMap() will return a function that take an array.
45
24
  const map = useMemoMap(multiplyBy10);
46
25
 
47
26
  const output = map([1, 2, 3]); // Returns [10, 20, 30].
@@ -52,6 +31,27 @@ const MyComponent = () => {
52
31
  export default MyComponent;
53
32
  ```
54
33
 
34
+ ## API
35
+
36
+ ```ts
37
+ type UseMemoMapOptions<T> = {
38
+ itemEquality?: (this: readonly T[], x: T, y: T) => boolean;
39
+ };
40
+
41
+ function useMemoMap<T = unknown, R = unknown>(
42
+ mapper: (this: readonly T[], item: T, index: -1, array: readonly T[]) => R,
43
+ { itemEquality = Object.is }: UseMemoMapOptions<T> = {}
44
+ ): (array: readonly T[]) => readonly R[] {}
45
+ ```
46
+
47
+ For example, converting a `number` array into a `string` array.
48
+
49
+ ```ts
50
+ function useMemoMap(
51
+ mapper: (item: number, index: -1, array: readonly number[]) => string
52
+ ): (array: readonly number[]) => readonly string[];
53
+ ```
54
+
55
55
  ## Behaviors
56
56
 
57
57
  ### Invalidate all results when mapper function change
@@ -95,7 +95,7 @@ Note: the "cache pool" will be saved during `useEffect()` callback. This is simi
95
95
 
96
96
  ### Index is always `-1`
97
97
 
98
- Unlike `Array.map()` which pass the `index` value as second argument, `useMemoAll()` will always pass `-1`. This is by design.
98
+ Unlike `Array.map()` which pass the `index` value as second argument, `useMemoMap()` will always pass `-1`. This is by design.
99
99
 
100
100
  Calls to mapper function could be cached and will not be called again if only `index` has changed. To protect wrong use of `index` value, we pass `-1` instead.
101
101
 
@@ -6,8 +6,8 @@ _Object$defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = usePrevious;
8
8
  var _react = require("react");
9
- function usePrevious(value) {
10
- var ref = (0, _react.useRef)();
9
+ function usePrevious(value, initialValue) {
10
+ var ref = (0, _react.useRef)(initialValue);
11
11
  (0, _react.useEffect)(function () {
12
12
  ref.current = value;
13
13
  });
@@ -1 +1 @@
1
- {"version":3,"file":"usePrevious.js","names":["usePrevious","value","ref","useRef","useEffect","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":";;;;;;;AAAA;AAEe,SAASA,WAAW,CAAIC,KAAQ,EAAiB;EAC9D,IAAMC,GAAG,GAAG,IAAAC,aAAM,GAAK;EAEvB,IAAAC,gBAAS,EAAC,YAAM;IACdF,GAAG,CAACG,OAAO,GAAGJ,KAAK;EACrB,CAAC,CAAC;EAEF,OAAOC,GAAG,CAACG,OAAO;AACpB"}
1
+ {"version":3,"file":"usePrevious.js","names":["usePrevious","value","initialValue","ref","useRef","useEffect","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T, initialValue?: T): T | undefined {\n const ref = useRef<T | undefined>(initialValue);\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":";;;;;;;AAAA;AAEe,SAASA,WAAW,CAAIC,KAAQ,EAAEC,YAAgB,EAAiB;EAChF,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAgBF,YAAY,CAAC;EAE/C,IAAAG,gBAAS,EAAC,YAAM;IACdF,GAAG,CAACG,OAAO,GAAGL,KAAK;EACrB,CAAC,CAAC;EAEF,OAAOE,GAAG,CAACG,OAAO;AACpB"}
@@ -18,7 +18,7 @@ function useValueRef(value) {
18
18
  }
19
19
  }
20
20
  });
21
- }, []);
21
+ }, [ref]);
22
22
  ref.current = value;
23
23
  return readOnlyRef;
24
24
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useValueRef.js","names":["useValueRef","value","ref","useRef","readOnlyRef","useMemo","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import { RefObject, useMemo, useRef } from 'react';\n\nexport default function useValueRef<T>(value: T): RefObject<T> & { current: T } {\n const ref = useRef<T>();\n const readOnlyRef = useMemo(\n () =>\n Object.create(\n {},\n {\n current: {\n get: () => ref.current\n }\n }\n ),\n []\n );\n\n ref.current = value;\n\n return readOnlyRef;\n}\n"],"mappings":";;;;;;;;;AAAA;AAEe,SAASA,WAAW,CAAIC,KAAQ,EAAiC;EAC9E,IAAMC,GAAG,GAAG,IAAAC,aAAM,GAAK;EACvB,IAAMC,WAAW,GAAG,IAAAC,cAAO,EACzB;IAAA,OACE,qBACE,CAAC,CAAC,EACF;MACEC,OAAO,EAAE;QACPC,GAAG,EAAE;UAAA,OAAML,GAAG,CAACI,OAAO;QAAA;MACxB;IACF,CAAC,CACF;EAAA,GACH,EAAE,CACH;EAEDJ,GAAG,CAACI,OAAO,GAAGL,KAAK;EAEnB,OAAOG,WAAW;AACpB"}
1
+ {"version":3,"file":"useValueRef.js","names":["useValueRef","value","ref","useRef","readOnlyRef","useMemo","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nexport default function useValueRef<T>(value: T): RefObject<T> & { current: T } {\n const ref = useRef<T>();\n\n const readOnlyRef = useMemo(() => Object.create({}, { current: { get: () => ref.current } }), [ref]);\n\n ref.current = value;\n\n return readOnlyRef;\n}\n"],"mappings":";;;;;;;;;AAAA;AAGe,SAASA,WAAW,CAAIC,KAAQ,EAAiC;EAC9E,IAAMC,GAAG,GAAG,IAAAC,aAAM,GAAK;EAEvB,IAAMC,WAAW,GAAG,IAAAC,cAAO,EAAC;IAAA,OAAM,qBAAc,CAAC,CAAC,EAAE;MAAEC,OAAO,EAAE;QAAEC,GAAG,EAAE;UAAA,OAAML,GAAG,CAACI,OAAO;QAAA;MAAC;IAAE,CAAC,CAAC;EAAA,GAAE,CAACJ,GAAG,CAAC,CAAC;EAEpGA,GAAG,CAACI,OAAO,GAAGL,KAAK;EAEnB,OAAOG,WAAW;AACpB"}
@@ -1,6 +1,6 @@
1
1
  import { useEffect, useRef } from 'react';
2
- export default function usePrevious(value) {
3
- var ref = useRef();
2
+ export default function usePrevious(value, initialValue) {
3
+ var ref = useRef(initialValue);
4
4
  useEffect(function () {
5
5
  ref.current = value;
6
6
  });
@@ -1 +1 @@
1
- {"version":3,"file":"usePrevious.js","names":["useEffect","useRef","usePrevious","value","ref","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T): T | undefined {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEzC,eAAe,SAASC,WAAW,CAAIC,KAAQ,EAAiB;EAC9D,IAAMC,GAAG,GAAGH,MAAM,EAAK;EAEvBD,SAAS,CAAC,YAAM;IACdI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACrB,CAAC,CAAC;EAEF,OAAOC,GAAG,CAACC,OAAO;AACpB"}
1
+ {"version":3,"file":"usePrevious.js","names":["useEffect","useRef","usePrevious","value","initialValue","ref","current"],"sources":["../../../src/private/usePrevious.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport default function usePrevious<T>(value: T, initialValue?: T): T | undefined {\n const ref = useRef<T | undefined>(initialValue);\n\n useEffect(() => {\n ref.current = value;\n });\n\n return ref.current;\n}\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEzC,eAAe,SAASC,WAAW,CAAIC,KAAQ,EAAEC,YAAgB,EAAiB;EAChF,IAAMC,GAAG,GAAGJ,MAAM,CAAgBG,YAAY,CAAC;EAE/CJ,SAAS,CAAC,YAAM;IACdK,GAAG,CAACC,OAAO,GAAGH,KAAK;EACrB,CAAC,CAAC;EAEF,OAAOE,GAAG,CAACC,OAAO;AACpB"}
@@ -10,7 +10,7 @@ export default function useValueRef(value) {
10
10
  }
11
11
  }
12
12
  });
13
- }, []);
13
+ }, [ref]);
14
14
  ref.current = value;
15
15
  return readOnlyRef;
16
16
  }
@@ -1 +1 @@
1
- {"version":3,"file":"useValueRef.js","names":["useMemo","useRef","useValueRef","value","ref","readOnlyRef","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import { RefObject, useMemo, useRef } from 'react';\n\nexport default function useValueRef<T>(value: T): RefObject<T> & { current: T } {\n const ref = useRef<T>();\n const readOnlyRef = useMemo(\n () =>\n Object.create(\n {},\n {\n current: {\n get: () => ref.current\n }\n }\n ),\n []\n );\n\n ref.current = value;\n\n return readOnlyRef;\n}\n"],"mappings":";AAAA,SAAoBA,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAElD,eAAe,SAASC,WAAW,CAAIC,KAAQ,EAAiC;EAC9E,IAAMC,GAAG,GAAGH,MAAM,EAAK;EACvB,IAAMI,WAAW,GAAGL,OAAO,CACzB;IAAA,OACE,eACE,CAAC,CAAC,EACF;MACEM,OAAO,EAAE;QACPC,GAAG,EAAE;UAAA,OAAMH,GAAG,CAACE,OAAO;QAAA;MACxB;IACF,CAAC,CACF;EAAA,GACH,EAAE,CACH;EAEDF,GAAG,CAACE,OAAO,GAAGH,KAAK;EAEnB,OAAOE,WAAW;AACpB"}
1
+ {"version":3,"file":"useValueRef.js","names":["useMemo","useRef","useValueRef","value","ref","readOnlyRef","current","get"],"sources":["../../../src/private/useValueRef.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nexport default function useValueRef<T>(value: T): RefObject<T> & { current: T } {\n const ref = useRef<T>();\n\n const readOnlyRef = useMemo(() => Object.create({}, { current: { get: () => ref.current } }), [ref]);\n\n ref.current = value;\n\n return readOnlyRef;\n}\n"],"mappings":";AAAA,SAASA,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAGvC,eAAe,SAASC,WAAW,CAAIC,KAAQ,EAAiC;EAC9E,IAAMC,GAAG,GAAGH,MAAM,EAAK;EAEvB,IAAMI,WAAW,GAAGL,OAAO,CAAC;IAAA,OAAM,eAAc,CAAC,CAAC,EAAE;MAAEM,OAAO,EAAE;QAAEC,GAAG,EAAE;UAAA,OAAMH,GAAG,CAACE,OAAO;QAAA;MAAC;IAAE,CAAC,CAAC;EAAA,GAAE,CAACF,GAAG,CAAC,CAAC;EAEpGA,GAAG,CAACE,OAAO,GAAGH,KAAK;EAEnB,OAAOE,WAAW;AACpB"}
@@ -1 +1 @@
1
- export default function usePrevious<T>(value: T): T | undefined;
1
+ export default function usePrevious<T>(value: T, initialValue?: T): T | undefined;
@@ -1,4 +1,4 @@
1
- import { RefObject } from 'react';
1
+ import type { RefObject } from 'react';
2
2
  export default function useValueRef<T>(value: T): RefObject<T> & {
3
3
  current: T;
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-memo-map",
3
- "version": "0.0.0-main.ec78c8b",
3
+ "version": "0.0.0-main.ff61b2d",
4
4
  "description": "",
5
5
  "files": [
6
6
  "./lib/*"
@@ -23,6 +23,7 @@
23
23
  "build:babel:commonjs": "babel src --config-file ./babel.commonjs.config.json --extensions .ts,.tsx --out-dir ./lib/commonjs/",
24
24
  "build:babel:esmodules": "babel src --config-file ./babel.esmodules.config.json --extensions .ts,.tsx --out-dir ./lib/esmodules/",
25
25
  "build:typescript": "tsc --project ./src/tsconfig.declaration.json",
26
+ "precommit": "eslint ./src/",
26
27
  "test": "jest"
27
28
  },
28
29
  "repository": {