@slimr/react 3.0.63 → 3.0.67
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/cjs/index.d.ts +10 -10
- package/cjs/index.ts +10 -10
- package/cjs/merge-refs.js +3 -3
- package/cjs/merge-refs.js.map +1 -1
- package/cjs/merge-refs.ts +10 -10
- package/cjs/useColorScheme.js +4 -4
- package/cjs/useColorScheme.js.map +1 -1
- package/cjs/useColorScheme.ts +13 -13
- package/cjs/useMemos.js.map +1 -1
- package/cjs/useMemos.ts +16 -16
- package/cjs/useSet2.d.ts +3 -3
- package/cjs/useSet2.js +3 -3
- package/cjs/useSet2.js.map +1 -1
- package/cjs/useSet2.ts +56 -56
- package/esm/index.d.ts +10 -10
- package/esm/index.js +10 -10
- package/esm/index.ts +10 -10
- package/esm/merge-refs.js +3 -3
- package/esm/merge-refs.js.map +1 -1
- package/esm/merge-refs.ts +10 -10
- package/esm/useColorScheme.js +5 -5
- package/esm/useColorScheme.js.map +1 -1
- package/esm/useColorScheme.ts +13 -13
- package/esm/useMemos.js +2 -2
- package/esm/useMemos.js.map +1 -1
- package/esm/useMemos.ts +16 -16
- package/esm/useSet2.d.ts +3 -3
- package/esm/useSet2.js +5 -5
- package/esm/useSet2.js.map +1 -1
- package/esm/useSet2.ts +56 -56
- package/package.json +7 -7
- package/src/index.ts +10 -10
- package/src/merge-refs.ts +10 -10
- package/src/useColorScheme.ts +13 -13
- package/src/useMemos.ts +16 -16
- package/src/useSet2.ts +56 -56
- package/tsconfig.json +5 -5
package/cjs/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
8
|
-
export * from
|
|
9
|
-
export * from
|
|
10
|
-
export * from
|
|
1
|
+
export * from "@slimr/forms";
|
|
2
|
+
export * from "@slimr/markdown";
|
|
3
|
+
export * from "@slimr/router";
|
|
4
|
+
export * from "@slimr/styled";
|
|
5
|
+
export * from "@slimr/swr";
|
|
6
|
+
export * from "react-use";
|
|
7
|
+
export * from "./merge-refs.js";
|
|
8
|
+
export * from "./useColorScheme.js";
|
|
9
|
+
export * from "./useMemos.js";
|
|
10
|
+
export * from "./useSet2.js";
|
package/cjs/index.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
1
|
+
export * from "@slimr/forms"
|
|
2
|
+
export * from "@slimr/markdown"
|
|
3
|
+
export * from "@slimr/router"
|
|
4
|
+
export * from "@slimr/styled"
|
|
5
|
+
export * from "@slimr/swr"
|
|
6
|
+
export * from "react-use"
|
|
7
7
|
|
|
8
|
-
export * from
|
|
9
|
-
export * from
|
|
10
|
-
export * from
|
|
11
|
-
export * from
|
|
8
|
+
export * from "./merge-refs.js"
|
|
9
|
+
export * from "./useColorScheme.js"
|
|
10
|
+
export * from "./useMemos.js"
|
|
11
|
+
export * from "./useSet2.js"
|
package/cjs/merge-refs.js
CHANGED
|
@@ -16,9 +16,9 @@ exports.mergeRefs = mergeRefs;
|
|
|
16
16
|
* ```
|
|
17
17
|
**/
|
|
18
18
|
function mergeRefs(refs) {
|
|
19
|
-
return value => {
|
|
20
|
-
refs.forEach(ref => {
|
|
21
|
-
if (typeof ref ===
|
|
19
|
+
return (value) => {
|
|
20
|
+
refs.forEach((ref) => {
|
|
21
|
+
if (typeof ref === "function") {
|
|
22
22
|
ref(value);
|
|
23
23
|
}
|
|
24
24
|
else if (ref != null) {
|
package/cjs/merge-refs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-refs.js","sourceRoot":"","sources":["../src/merge-refs.ts"],"names":[],"mappings":";;AAcA,8BAYC;AA1BD;;;;;;;;;;;;;IAaI;AACJ,SAAgB,SAAS,
|
|
1
|
+
{"version":3,"file":"merge-refs.js","sourceRoot":"","sources":["../src/merge-refs.ts"],"names":[],"mappings":";;AAcA,8BAYC;AA1BD;;;;;;;;;;;;;IAaI;AACJ,SAAgB,SAAS,CACxB,IAA2D;IAE3D,OAAO,CAAC,KAAK,EAAE,EAAE;QAChB,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACpB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC/B,GAAG,CAAC,KAAK,CAAC,CAAA;YACX,CAAC;iBAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;gBACxB,CAAC;gBAAC,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAA;YAC3D,CAAC;QACF,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;AACF,CAAC"}
|
package/cjs/merge-refs.ts
CHANGED
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
* ```
|
|
14
14
|
**/
|
|
15
15
|
export function mergeRefs<T = any>(
|
|
16
|
-
|
|
16
|
+
refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
|
|
17
17
|
): React.RefCallback<T> {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
return (value) => {
|
|
19
|
+
refs.forEach((ref) => {
|
|
20
|
+
if (typeof ref === "function") {
|
|
21
|
+
ref(value)
|
|
22
|
+
} else if (ref != null) {
|
|
23
|
+
;(ref as React.MutableRefObject<T | null>).current = value
|
|
24
|
+
}
|
|
25
|
+
})
|
|
26
|
+
}
|
|
27
27
|
}
|
package/cjs/useColorScheme.js
CHANGED
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useColorScheme = useColorScheme;
|
|
4
4
|
const react_1 = require("react");
|
|
5
|
-
const matchMediaPrefersDark = matchMedia?.(
|
|
5
|
+
const matchMediaPrefersDark = matchMedia?.("(prefers-color-scheme:dark)");
|
|
6
6
|
function useColorScheme() {
|
|
7
7
|
const [dark, setDark] = (0, react_1.useState)(!!matchMediaPrefersDark?.matches);
|
|
8
8
|
(0, react_1.useEffect)(() => {
|
|
9
9
|
const updateColorScheme = () => {
|
|
10
10
|
setDark(!!matchMediaPrefersDark?.matches);
|
|
11
11
|
};
|
|
12
|
-
matchMediaPrefersDark.addEventListener(
|
|
12
|
+
matchMediaPrefersDark.addEventListener("change", updateColorScheme);
|
|
13
13
|
return () => {
|
|
14
|
-
matchMediaPrefersDark.removeEventListener(
|
|
14
|
+
matchMediaPrefersDark.removeEventListener("change", updateColorScheme);
|
|
15
15
|
};
|
|
16
16
|
}, []);
|
|
17
|
-
return { dark, light: !dark, scheme: dark ?
|
|
17
|
+
return { dark, light: !dark, scheme: dark ? "dark" : "light" };
|
|
18
18
|
}
|
|
19
19
|
//# sourceMappingURL=useColorScheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorScheme.js","sourceRoot":"","sources":["../src/useColorScheme.ts"],"names":[],"mappings":";;AAIA,wCAcC;AAlBD,
|
|
1
|
+
{"version":3,"file":"useColorScheme.js","sourceRoot":"","sources":["../src/useColorScheme.ts"],"names":[],"mappings":";;AAIA,wCAcC;AAlBD,iCAA2C;AAE3C,MAAM,qBAAqB,GAAG,UAAU,EAAE,CAAC,6BAA6B,CAAC,CAAA;AAEzE,SAAgB,cAAc;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;IAElE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC9B,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;QAC1C,CAAC,CAAA;QACD,qBAAqB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACnE,OAAO,GAAG,EAAE;YACX,qBAAqB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACvE,CAAC,CAAA;IACF,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,CAAA;AAC/D,CAAC"}
|
package/cjs/useColorScheme.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {useEffect, useState} from
|
|
1
|
+
import { useEffect, useState } from "react"
|
|
2
2
|
|
|
3
|
-
const matchMediaPrefersDark = matchMedia?.(
|
|
3
|
+
const matchMediaPrefersDark = matchMedia?.("(prefers-color-scheme:dark)")
|
|
4
4
|
|
|
5
5
|
export function useColorScheme() {
|
|
6
|
-
|
|
6
|
+
const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const updateColorScheme = () => {
|
|
10
|
+
setDark(!!matchMediaPrefersDark?.matches)
|
|
11
|
+
}
|
|
12
|
+
matchMediaPrefersDark.addEventListener("change", updateColorScheme)
|
|
13
|
+
return () => {
|
|
14
|
+
matchMediaPrefersDark.removeEventListener("change", updateColorScheme)
|
|
15
|
+
}
|
|
16
|
+
}, [])
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
return { dark, light: !dark, scheme: dark ? "dark" : "light" }
|
|
19
19
|
}
|
package/cjs/useMemos.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMemos.js","sourceRoot":"","sources":["../src/useMemos.ts"],"names":[],"mappings":";;AAUA,gDAQC;AAOD,sDAQC;AAjCD,
|
|
1
|
+
{"version":3,"file":"useMemos.js","sourceRoot":"","sources":["../src/useMemos.ts"],"names":[],"mappings":";;AAUA,gDAQC;AAOD,sDAQC;AAjCD,sCAA6C;AAC7C,iCAAoD;AAIpD;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,QAAa,EAAE,WAAkB;IACnE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAA;IAC/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,IAAA,sBAAe,EAAC,WAAW,EAAE,aAAa,CAAC,EAAE,CAAC;YACjD,gBAAgB,CAAC,WAAW,CAAC,CAAA;QAC9B,CAAC;IACF,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,IAAA,eAAO,EAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC1C,CAAC;AAED;;;;GAIG;AACH,SAAgB,qBAAqB,CAAC,QAAa,EAAE,WAAkB;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,CAAC,CAAA;IAC/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,IAAA,sBAAe,EAAC,WAAW,EAAE,aAAa,CAAC,EAAE,CAAC;YACjD,gBAAgB,CAAC,WAAW,CAAC,CAAA;QAC9B,CAAC;IACF,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,IAAA,eAAO,EAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC1C,CAAC"}
|
package/cjs/useMemos.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {areNotEqualDeep} from
|
|
2
|
-
import {useEffect, useMemo, useState} from
|
|
1
|
+
import { areNotEqualDeep } from "@slimr/util"
|
|
2
|
+
import { useEffect, useMemo, useState } from "react"
|
|
3
3
|
|
|
4
4
|
type Fnc = (...args: any[]) => any
|
|
5
5
|
|
|
@@ -9,13 +9,13 @@ type Fnc = (...args: any[]) => any
|
|
|
9
9
|
* so use it intensionally.
|
|
10
10
|
*/
|
|
11
11
|
export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
|
|
15
|
+
setLastSeenProps(varsToWatch)
|
|
16
|
+
}
|
|
17
|
+
}, varsToWatch)
|
|
18
|
+
return useMemo(callback, [lastSeenProps])
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -24,11 +24,11 @@ export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
|
24
24
|
* less than useDeepCompareMemo, so use it intentionally.
|
|
25
25
|
*/
|
|
26
26
|
export function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
|
|
30
|
+
setLastSeenProps(varsToWatch)
|
|
31
|
+
}
|
|
32
|
+
}, varsToWatch)
|
|
33
|
+
return useMemo(callback, [lastSeenProps])
|
|
34
34
|
}
|
package/cjs/useSet2.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export interface UseSet2<T> extends Set<T> {
|
|
2
|
-
_add: Set<T>[
|
|
3
|
-
_clear: Set<T>[
|
|
4
|
-
_delete: Set<T>[
|
|
2
|
+
_add: Set<T>["add"];
|
|
3
|
+
_clear: Set<T>["clear"];
|
|
4
|
+
_delete: Set<T>["delete"];
|
|
5
5
|
toggle(v: T): void;
|
|
6
6
|
reset(): void;
|
|
7
7
|
_union<U>(other: ReadonlySetLike<U>): Set<T | U>;
|
package/cjs/useSet2.js
CHANGED
|
@@ -23,7 +23,7 @@ function useSet2(initial = new Set()) {
|
|
|
23
23
|
const set = setRef.current;
|
|
24
24
|
if (!set._add) {
|
|
25
25
|
set._add = set.add;
|
|
26
|
-
set.add = v => {
|
|
26
|
+
set.add = (v) => {
|
|
27
27
|
set._add(v);
|
|
28
28
|
rerender();
|
|
29
29
|
return set;
|
|
@@ -35,7 +35,7 @@ function useSet2(initial = new Set()) {
|
|
|
35
35
|
return set;
|
|
36
36
|
};
|
|
37
37
|
set._delete = set.delete;
|
|
38
|
-
set.delete = v => {
|
|
38
|
+
set.delete = (v) => {
|
|
39
39
|
const res = set._delete(v);
|
|
40
40
|
rerender();
|
|
41
41
|
return res;
|
|
@@ -46,7 +46,7 @@ function useSet2(initial = new Set()) {
|
|
|
46
46
|
rerender();
|
|
47
47
|
return set;
|
|
48
48
|
};
|
|
49
|
-
set.toggle = v => {
|
|
49
|
+
set.toggle = (v) => {
|
|
50
50
|
if (set.has(v))
|
|
51
51
|
set._delete(v);
|
|
52
52
|
else
|
package/cjs/useSet2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSet2.js","sourceRoot":"","sources":["../src/useSet2.ts"],"names":[],"mappings":";;AA2BA,0BAwDC;AAnFD,
|
|
1
|
+
{"version":3,"file":"useSet2.js","sourceRoot":"","sources":["../src/useSet2.ts"],"names":[],"mappings":";;AA2BA,0BAwDC;AAnFD,iCAA8B;AAC9B,yCAAqC;AAYrC;;;;;;;;;;;;;GAaG;AACH,SAAgB,OAAO,CAAI,UAAkB,IAAI,GAAG,EAAE;IACrD,MAAM,QAAQ,GAAG,IAAA,qBAAS,GAAE,CAAA;IAC5B,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,OAAgC,CAAC,CAAA;IACvD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAA;IAE1B,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QACf,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAA;QAClB,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,EAAE;YACf,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YACX,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAA;QACtB,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YAChB,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,MAAM,CAAA;QACxB,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;YAClB,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YAChB,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;YAClB,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;;gBACzB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YAChB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAI,KAAyB,EAAc,EAAE;YACzD,KAAK,MAAM,IAAI,IAAI,KAA0B,EAAE,CAAC;gBAC/C,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACf,CAAC;YACD,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,CAAI,KAAyB,EAAc,EAAE;YACxD,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACjB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;IACF,CAAC;IAED,OAAO,GAAG,CAAA;AACX,CAAC"}
|
package/cjs/useSet2.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import {useRef} from
|
|
2
|
-
import {useUpdate} from
|
|
1
|
+
import { useRef } from "react"
|
|
2
|
+
import { useUpdate } from "react-use"
|
|
3
3
|
|
|
4
4
|
export interface UseSet2<T> extends Set<T> {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
_add: Set<T>["add"]
|
|
6
|
+
_clear: Set<T>["clear"]
|
|
7
|
+
_delete: Set<T>["delete"]
|
|
8
|
+
toggle(v: T): void
|
|
9
|
+
reset(): void
|
|
10
|
+
_union<U>(other: ReadonlySetLike<U>): Set<T | U>
|
|
11
|
+
union<U>(other: ReadonlySetLike<U>): Set<T | U>
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -26,59 +26,59 @@ export interface UseSet2<T> extends Set<T> {
|
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
28
|
export function useSet2<T>(initial: Set<T> = new Set()) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
const rerender = useUpdate()
|
|
30
|
+
const setRef = useRef(initial as unknown as UseSet2<T>)
|
|
31
|
+
const set = setRef.current
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
if (!set._add) {
|
|
34
|
+
set._add = set.add
|
|
35
|
+
set.add = (v) => {
|
|
36
|
+
set._add(v)
|
|
37
|
+
rerender()
|
|
38
|
+
return set
|
|
39
|
+
}
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
set._clear = set.clear
|
|
42
|
+
set.clear = () => {
|
|
43
|
+
set._clear()
|
|
44
|
+
rerender()
|
|
45
|
+
return set
|
|
46
|
+
}
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
set._delete = set.delete
|
|
49
|
+
set.delete = (v) => {
|
|
50
|
+
const res = set._delete(v)
|
|
51
|
+
rerender()
|
|
52
|
+
return res
|
|
53
|
+
}
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
set.reset = () => {
|
|
56
|
+
set._clear()
|
|
57
|
+
set._union(initial)
|
|
58
|
+
rerender()
|
|
59
|
+
return set
|
|
60
|
+
}
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
set.toggle = (v) => {
|
|
63
|
+
if (set.has(v)) set._delete(v)
|
|
64
|
+
else set._add(v)
|
|
65
|
+
rerender()
|
|
66
|
+
return set
|
|
67
|
+
}
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
set._union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {
|
|
70
|
+
for (const elem of other as unknown as Set<T>) {
|
|
71
|
+
set._add(elem)
|
|
72
|
+
}
|
|
73
|
+
return set
|
|
74
|
+
}
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
76
|
+
set.union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {
|
|
77
|
+
set._union(other)
|
|
78
|
+
rerender()
|
|
79
|
+
return set
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
return set
|
|
84
84
|
}
|
package/esm/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
8
|
-
export * from
|
|
9
|
-
export * from
|
|
10
|
-
export * from
|
|
1
|
+
export * from "@slimr/forms";
|
|
2
|
+
export * from "@slimr/markdown";
|
|
3
|
+
export * from "@slimr/router";
|
|
4
|
+
export * from "@slimr/styled";
|
|
5
|
+
export * from "@slimr/swr";
|
|
6
|
+
export * from "react-use";
|
|
7
|
+
export * from "./merge-refs.js";
|
|
8
|
+
export * from "./useColorScheme.js";
|
|
9
|
+
export * from "./useMemos.js";
|
|
10
|
+
export * from "./useSet2.js";
|
package/esm/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
8
|
-
export * from
|
|
9
|
-
export * from
|
|
10
|
-
export * from
|
|
1
|
+
export * from "@slimr/forms";
|
|
2
|
+
export * from "@slimr/markdown";
|
|
3
|
+
export * from "@slimr/router";
|
|
4
|
+
export * from "@slimr/styled";
|
|
5
|
+
export * from "@slimr/swr";
|
|
6
|
+
export * from "react-use";
|
|
7
|
+
export * from "./merge-refs.js";
|
|
8
|
+
export * from "./useColorScheme.js";
|
|
9
|
+
export * from "./useMemos.js";
|
|
10
|
+
export * from "./useSet2.js";
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
package/esm/index.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
1
|
+
export * from "@slimr/forms"
|
|
2
|
+
export * from "@slimr/markdown"
|
|
3
|
+
export * from "@slimr/router"
|
|
4
|
+
export * from "@slimr/styled"
|
|
5
|
+
export * from "@slimr/swr"
|
|
6
|
+
export * from "react-use"
|
|
7
7
|
|
|
8
|
-
export * from
|
|
9
|
-
export * from
|
|
10
|
-
export * from
|
|
11
|
-
export * from
|
|
8
|
+
export * from "./merge-refs.js"
|
|
9
|
+
export * from "./useColorScheme.js"
|
|
10
|
+
export * from "./useMemos.js"
|
|
11
|
+
export * from "./useSet2.js"
|
package/esm/merge-refs.js
CHANGED
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
* ```
|
|
14
14
|
**/
|
|
15
15
|
export function mergeRefs(refs) {
|
|
16
|
-
return value => {
|
|
17
|
-
refs.forEach(ref => {
|
|
18
|
-
if (typeof ref ===
|
|
16
|
+
return (value) => {
|
|
17
|
+
refs.forEach((ref) => {
|
|
18
|
+
if (typeof ref === "function") {
|
|
19
19
|
ref(value);
|
|
20
20
|
}
|
|
21
21
|
else if (ref != null) {
|
package/esm/merge-refs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-refs.js","sourceRoot":"","sources":["../src/merge-refs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;IAaI;AACJ,MAAM,UAAU,SAAS,
|
|
1
|
+
{"version":3,"file":"merge-refs.js","sourceRoot":"","sources":["../src/merge-refs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;IAaI;AACJ,MAAM,UAAU,SAAS,CACxB,IAA2D;IAE3D,OAAO,CAAC,KAAK,EAAE,EAAE;QAChB,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACpB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC/B,GAAG,CAAC,KAAK,CAAC,CAAA;YACX,CAAC;iBAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;gBACxB,CAAC;gBAAC,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAA;YAC3D,CAAC;QACF,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;AACF,CAAC"}
|
package/esm/merge-refs.ts
CHANGED
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
* ```
|
|
14
14
|
**/
|
|
15
15
|
export function mergeRefs<T = any>(
|
|
16
|
-
|
|
16
|
+
refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
|
|
17
17
|
): React.RefCallback<T> {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
return (value) => {
|
|
19
|
+
refs.forEach((ref) => {
|
|
20
|
+
if (typeof ref === "function") {
|
|
21
|
+
ref(value)
|
|
22
|
+
} else if (ref != null) {
|
|
23
|
+
;(ref as React.MutableRefObject<T | null>).current = value
|
|
24
|
+
}
|
|
25
|
+
})
|
|
26
|
+
}
|
|
27
27
|
}
|
package/esm/useColorScheme.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useEffect, useState } from
|
|
2
|
-
const matchMediaPrefersDark = matchMedia?.(
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
const matchMediaPrefersDark = matchMedia?.("(prefers-color-scheme:dark)");
|
|
3
3
|
export function useColorScheme() {
|
|
4
4
|
const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches);
|
|
5
5
|
useEffect(() => {
|
|
6
6
|
const updateColorScheme = () => {
|
|
7
7
|
setDark(!!matchMediaPrefersDark?.matches);
|
|
8
8
|
};
|
|
9
|
-
matchMediaPrefersDark.addEventListener(
|
|
9
|
+
matchMediaPrefersDark.addEventListener("change", updateColorScheme);
|
|
10
10
|
return () => {
|
|
11
|
-
matchMediaPrefersDark.removeEventListener(
|
|
11
|
+
matchMediaPrefersDark.removeEventListener("change", updateColorScheme);
|
|
12
12
|
};
|
|
13
13
|
}, []);
|
|
14
|
-
return { dark, light: !dark, scheme: dark ?
|
|
14
|
+
return { dark, light: !dark, scheme: dark ? "dark" : "light" };
|
|
15
15
|
}
|
|
16
16
|
//# sourceMappingURL=useColorScheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorScheme.js","sourceRoot":"","sources":["../src/useColorScheme.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useColorScheme.js","sourceRoot":"","sources":["../src/useColorScheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,qBAAqB,GAAG,UAAU,EAAE,CAAC,6BAA6B,CAAC,CAAA;AAEzE,MAAM,UAAU,cAAc;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;IAElE,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC9B,OAAO,CAAC,CAAC,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAA;QAC1C,CAAC,CAAA;QACD,qBAAqB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACnE,OAAO,GAAG,EAAE;YACX,qBAAqB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAA;QACvE,CAAC,CAAA;IACF,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,CAAA;AAC/D,CAAC"}
|
package/esm/useColorScheme.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {useEffect, useState} from
|
|
1
|
+
import { useEffect, useState } from "react"
|
|
2
2
|
|
|
3
|
-
const matchMediaPrefersDark = matchMedia?.(
|
|
3
|
+
const matchMediaPrefersDark = matchMedia?.("(prefers-color-scheme:dark)")
|
|
4
4
|
|
|
5
5
|
export function useColorScheme() {
|
|
6
|
-
|
|
6
|
+
const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const updateColorScheme = () => {
|
|
10
|
+
setDark(!!matchMediaPrefersDark?.matches)
|
|
11
|
+
}
|
|
12
|
+
matchMediaPrefersDark.addEventListener("change", updateColorScheme)
|
|
13
|
+
return () => {
|
|
14
|
+
matchMediaPrefersDark.removeEventListener("change", updateColorScheme)
|
|
15
|
+
}
|
|
16
|
+
}, [])
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
return { dark, light: !dark, scheme: dark ? "dark" : "light" }
|
|
19
19
|
}
|
package/esm/useMemos.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { areNotEqualDeep } from
|
|
2
|
-
import { useEffect, useMemo, useState } from
|
|
1
|
+
import { areNotEqualDeep } from "@slimr/util";
|
|
2
|
+
import { useEffect, useMemo, useState } from "react";
|
|
3
3
|
/**
|
|
4
4
|
* Like useMemo, but does a deep compare instead default compare
|
|
5
5
|
* to avoid misfires. Is more expensive than useMemo though,
|
package/esm/useMemos.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMemos.js","sourceRoot":"","sources":["../src/useMemos.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useMemos.js","sourceRoot":"","sources":["../src/useMemos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIpD;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,QAAa,EAAE,WAAkB;IACnE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC/D,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,eAAe,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE,CAAC;YACjD,gBAAgB,CAAC,WAAW,CAAC,CAAA;QAC9B,CAAC;IACF,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,OAAO,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC1C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,QAAa,EAAE,WAAkB;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC/D,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,eAAe,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE,CAAC;YACjD,gBAAgB,CAAC,WAAW,CAAC,CAAA;QAC9B,CAAC;IACF,CAAC,EAAE,WAAW,CAAC,CAAA;IACf,OAAO,OAAO,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;AAC1C,CAAC"}
|
package/esm/useMemos.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {areNotEqualDeep} from
|
|
2
|
-
import {useEffect, useMemo, useState} from
|
|
1
|
+
import { areNotEqualDeep } from "@slimr/util"
|
|
2
|
+
import { useEffect, useMemo, useState } from "react"
|
|
3
3
|
|
|
4
4
|
type Fnc = (...args: any[]) => any
|
|
5
5
|
|
|
@@ -9,13 +9,13 @@ type Fnc = (...args: any[]) => any
|
|
|
9
9
|
* so use it intensionally.
|
|
10
10
|
*/
|
|
11
11
|
export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
|
|
15
|
+
setLastSeenProps(varsToWatch)
|
|
16
|
+
}
|
|
17
|
+
}, varsToWatch)
|
|
18
|
+
return useMemo(callback, [lastSeenProps])
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -24,11 +24,11 @@ export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
|
24
24
|
* less than useDeepCompareMemo, so use it intentionally.
|
|
25
25
|
*/
|
|
26
26
|
export function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
|
|
30
|
+
setLastSeenProps(varsToWatch)
|
|
31
|
+
}
|
|
32
|
+
}, varsToWatch)
|
|
33
|
+
return useMemo(callback, [lastSeenProps])
|
|
34
34
|
}
|
package/esm/useSet2.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export interface UseSet2<T> extends Set<T> {
|
|
2
|
-
_add: Set<T>[
|
|
3
|
-
_clear: Set<T>[
|
|
4
|
-
_delete: Set<T>[
|
|
2
|
+
_add: Set<T>["add"];
|
|
3
|
+
_clear: Set<T>["clear"];
|
|
4
|
+
_delete: Set<T>["delete"];
|
|
5
5
|
toggle(v: T): void;
|
|
6
6
|
reset(): void;
|
|
7
7
|
_union<U>(other: ReadonlySetLike<U>): Set<T | U>;
|
package/esm/useSet2.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useRef } from
|
|
2
|
-
import { useUpdate } from
|
|
1
|
+
import { useRef } from "react";
|
|
2
|
+
import { useUpdate } from "react-use";
|
|
3
3
|
/**
|
|
4
4
|
* Returns a set-like object that intercepts the setter function to
|
|
5
5
|
* trigger re-renders on change. Also adds a toggle and reset method.
|
|
@@ -20,7 +20,7 @@ export function useSet2(initial = new Set()) {
|
|
|
20
20
|
const set = setRef.current;
|
|
21
21
|
if (!set._add) {
|
|
22
22
|
set._add = set.add;
|
|
23
|
-
set.add = v => {
|
|
23
|
+
set.add = (v) => {
|
|
24
24
|
set._add(v);
|
|
25
25
|
rerender();
|
|
26
26
|
return set;
|
|
@@ -32,7 +32,7 @@ export function useSet2(initial = new Set()) {
|
|
|
32
32
|
return set;
|
|
33
33
|
};
|
|
34
34
|
set._delete = set.delete;
|
|
35
|
-
set.delete = v => {
|
|
35
|
+
set.delete = (v) => {
|
|
36
36
|
const res = set._delete(v);
|
|
37
37
|
rerender();
|
|
38
38
|
return res;
|
|
@@ -43,7 +43,7 @@ export function useSet2(initial = new Set()) {
|
|
|
43
43
|
rerender();
|
|
44
44
|
return set;
|
|
45
45
|
};
|
|
46
|
-
set.toggle = v => {
|
|
46
|
+
set.toggle = (v) => {
|
|
47
47
|
if (set.has(v))
|
|
48
48
|
set._delete(v);
|
|
49
49
|
else
|
package/esm/useSet2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSet2.js","sourceRoot":"","sources":["../src/useSet2.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useSet2.js","sourceRoot":"","sources":["../src/useSet2.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAYrC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,OAAO,CAAI,UAAkB,IAAI,GAAG,EAAE;IACrD,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAA;IAC5B,MAAM,MAAM,GAAG,MAAM,CAAC,OAAgC,CAAC,CAAA;IACvD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAA;IAE1B,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QACf,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,CAAA;QAClB,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,EAAE;YACf,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YACX,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAA;QACtB,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YAChB,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,MAAM,CAAA;QACxB,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;YAClB,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE;YAChB,GAAG,CAAC,MAAM,EAAE,CAAA;YACZ,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;YAClB,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;gBAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;;gBACzB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YAChB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,MAAM,GAAG,CAAI,KAAyB,EAAc,EAAE;YACzD,KAAK,MAAM,IAAI,IAAI,KAA0B,EAAE,CAAC;gBAC/C,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACf,CAAC;YACD,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;QAED,GAAG,CAAC,KAAK,GAAG,CAAI,KAAyB,EAAc,EAAE;YACxD,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACjB,QAAQ,EAAE,CAAA;YACV,OAAO,GAAG,CAAA;QACX,CAAC,CAAA;IACF,CAAC;IAED,OAAO,GAAG,CAAA;AACX,CAAC"}
|
package/esm/useSet2.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import {useRef} from
|
|
2
|
-
import {useUpdate} from
|
|
1
|
+
import { useRef } from "react"
|
|
2
|
+
import { useUpdate } from "react-use"
|
|
3
3
|
|
|
4
4
|
export interface UseSet2<T> extends Set<T> {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
_add: Set<T>["add"]
|
|
6
|
+
_clear: Set<T>["clear"]
|
|
7
|
+
_delete: Set<T>["delete"]
|
|
8
|
+
toggle(v: T): void
|
|
9
|
+
reset(): void
|
|
10
|
+
_union<U>(other: ReadonlySetLike<U>): Set<T | U>
|
|
11
|
+
union<U>(other: ReadonlySetLike<U>): Set<T | U>
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -26,59 +26,59 @@ export interface UseSet2<T> extends Set<T> {
|
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
28
|
export function useSet2<T>(initial: Set<T> = new Set()) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
const rerender = useUpdate()
|
|
30
|
+
const setRef = useRef(initial as unknown as UseSet2<T>)
|
|
31
|
+
const set = setRef.current
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
if (!set._add) {
|
|
34
|
+
set._add = set.add
|
|
35
|
+
set.add = (v) => {
|
|
36
|
+
set._add(v)
|
|
37
|
+
rerender()
|
|
38
|
+
return set
|
|
39
|
+
}
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
set._clear = set.clear
|
|
42
|
+
set.clear = () => {
|
|
43
|
+
set._clear()
|
|
44
|
+
rerender()
|
|
45
|
+
return set
|
|
46
|
+
}
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
set._delete = set.delete
|
|
49
|
+
set.delete = (v) => {
|
|
50
|
+
const res = set._delete(v)
|
|
51
|
+
rerender()
|
|
52
|
+
return res
|
|
53
|
+
}
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
set.reset = () => {
|
|
56
|
+
set._clear()
|
|
57
|
+
set._union(initial)
|
|
58
|
+
rerender()
|
|
59
|
+
return set
|
|
60
|
+
}
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
set.toggle = (v) => {
|
|
63
|
+
if (set.has(v)) set._delete(v)
|
|
64
|
+
else set._add(v)
|
|
65
|
+
rerender()
|
|
66
|
+
return set
|
|
67
|
+
}
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
set._union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {
|
|
70
|
+
for (const elem of other as unknown as Set<T>) {
|
|
71
|
+
set._add(elem)
|
|
72
|
+
}
|
|
73
|
+
return set
|
|
74
|
+
}
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
76
|
+
set.union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {
|
|
77
|
+
set._union(other)
|
|
78
|
+
rerender()
|
|
79
|
+
return set
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
return set
|
|
84
84
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slimr/react",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.67",
|
|
4
4
|
"author": "Brian Dombrowski",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"private": false,
|
|
@@ -31,12 +31,12 @@
|
|
|
31
31
|
"start": "nodemon -w src -e '*' -x 'npm run build && cd ../demo && npm start'"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@slimr/forms": "^5.0.
|
|
35
|
-
"@slimr/markdown": "^2.1.
|
|
36
|
-
"@slimr/router": "^2.1.
|
|
37
|
-
"@slimr/styled": "^2.1.
|
|
38
|
-
"@slimr/swr": "^2.1.
|
|
39
|
-
"@slimr/util": "^3.2.
|
|
34
|
+
"@slimr/forms": "^5.0.41",
|
|
35
|
+
"@slimr/markdown": "^2.1.83",
|
|
36
|
+
"@slimr/router": "^2.1.69",
|
|
37
|
+
"@slimr/styled": "^2.1.80",
|
|
38
|
+
"@slimr/swr": "^2.1.68",
|
|
39
|
+
"@slimr/util": "^3.2.69",
|
|
40
40
|
"react-use": "17"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
package/src/index.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
1
|
+
export * from "@slimr/forms"
|
|
2
|
+
export * from "@slimr/markdown"
|
|
3
|
+
export * from "@slimr/router"
|
|
4
|
+
export * from "@slimr/styled"
|
|
5
|
+
export * from "@slimr/swr"
|
|
6
|
+
export * from "react-use"
|
|
7
7
|
|
|
8
|
-
export * from
|
|
9
|
-
export * from
|
|
10
|
-
export * from
|
|
11
|
-
export * from
|
|
8
|
+
export * from "./merge-refs.js"
|
|
9
|
+
export * from "./useColorScheme.js"
|
|
10
|
+
export * from "./useMemos.js"
|
|
11
|
+
export * from "./useSet2.js"
|
package/src/merge-refs.ts
CHANGED
|
@@ -13,15 +13,15 @@
|
|
|
13
13
|
* ```
|
|
14
14
|
**/
|
|
15
15
|
export function mergeRefs<T = any>(
|
|
16
|
-
|
|
16
|
+
refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
|
|
17
17
|
): React.RefCallback<T> {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
return (value) => {
|
|
19
|
+
refs.forEach((ref) => {
|
|
20
|
+
if (typeof ref === "function") {
|
|
21
|
+
ref(value)
|
|
22
|
+
} else if (ref != null) {
|
|
23
|
+
;(ref as React.MutableRefObject<T | null>).current = value
|
|
24
|
+
}
|
|
25
|
+
})
|
|
26
|
+
}
|
|
27
27
|
}
|
package/src/useColorScheme.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {useEffect, useState} from
|
|
1
|
+
import { useEffect, useState } from "react"
|
|
2
2
|
|
|
3
|
-
const matchMediaPrefersDark = matchMedia?.(
|
|
3
|
+
const matchMediaPrefersDark = matchMedia?.("(prefers-color-scheme:dark)")
|
|
4
4
|
|
|
5
5
|
export function useColorScheme() {
|
|
6
|
-
|
|
6
|
+
const [dark, setDark] = useState(!!matchMediaPrefersDark?.matches)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const updateColorScheme = () => {
|
|
10
|
+
setDark(!!matchMediaPrefersDark?.matches)
|
|
11
|
+
}
|
|
12
|
+
matchMediaPrefersDark.addEventListener("change", updateColorScheme)
|
|
13
|
+
return () => {
|
|
14
|
+
matchMediaPrefersDark.removeEventListener("change", updateColorScheme)
|
|
15
|
+
}
|
|
16
|
+
}, [])
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
return { dark, light: !dark, scheme: dark ? "dark" : "light" }
|
|
19
19
|
}
|
package/src/useMemos.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {areNotEqualDeep} from
|
|
2
|
-
import {useEffect, useMemo, useState} from
|
|
1
|
+
import { areNotEqualDeep } from "@slimr/util"
|
|
2
|
+
import { useEffect, useMemo, useState } from "react"
|
|
3
3
|
|
|
4
4
|
type Fnc = (...args: any[]) => any
|
|
5
5
|
|
|
@@ -9,13 +9,13 @@ type Fnc = (...args: any[]) => any
|
|
|
9
9
|
* so use it intensionally.
|
|
10
10
|
*/
|
|
11
11
|
export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
|
|
15
|
+
setLastSeenProps(varsToWatch)
|
|
16
|
+
}
|
|
17
|
+
}, varsToWatch)
|
|
18
|
+
return useMemo(callback, [lastSeenProps])
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
@@ -24,11 +24,11 @@ export function useDeepCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
|
24
24
|
* less than useDeepCompareMemo, so use it intentionally.
|
|
25
25
|
*/
|
|
26
26
|
export function useShallowCompareMemo(callback: Fnc, varsToWatch: any[]) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
const [lastSeenProps, setLastSeenProps] = useState(varsToWatch)
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (areNotEqualDeep(varsToWatch, lastSeenProps)) {
|
|
30
|
+
setLastSeenProps(varsToWatch)
|
|
31
|
+
}
|
|
32
|
+
}, varsToWatch)
|
|
33
|
+
return useMemo(callback, [lastSeenProps])
|
|
34
34
|
}
|
package/src/useSet2.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import {useRef} from
|
|
2
|
-
import {useUpdate} from
|
|
1
|
+
import { useRef } from "react"
|
|
2
|
+
import { useUpdate } from "react-use"
|
|
3
3
|
|
|
4
4
|
export interface UseSet2<T> extends Set<T> {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
_add: Set<T>["add"]
|
|
6
|
+
_clear: Set<T>["clear"]
|
|
7
|
+
_delete: Set<T>["delete"]
|
|
8
|
+
toggle(v: T): void
|
|
9
|
+
reset(): void
|
|
10
|
+
_union<U>(other: ReadonlySetLike<U>): Set<T | U>
|
|
11
|
+
union<U>(other: ReadonlySetLike<U>): Set<T | U>
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -26,59 +26,59 @@ export interface UseSet2<T> extends Set<T> {
|
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
28
|
export function useSet2<T>(initial: Set<T> = new Set()) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
const rerender = useUpdate()
|
|
30
|
+
const setRef = useRef(initial as unknown as UseSet2<T>)
|
|
31
|
+
const set = setRef.current
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
if (!set._add) {
|
|
34
|
+
set._add = set.add
|
|
35
|
+
set.add = (v) => {
|
|
36
|
+
set._add(v)
|
|
37
|
+
rerender()
|
|
38
|
+
return set
|
|
39
|
+
}
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
set._clear = set.clear
|
|
42
|
+
set.clear = () => {
|
|
43
|
+
set._clear()
|
|
44
|
+
rerender()
|
|
45
|
+
return set
|
|
46
|
+
}
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
set._delete = set.delete
|
|
49
|
+
set.delete = (v) => {
|
|
50
|
+
const res = set._delete(v)
|
|
51
|
+
rerender()
|
|
52
|
+
return res
|
|
53
|
+
}
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
set.reset = () => {
|
|
56
|
+
set._clear()
|
|
57
|
+
set._union(initial)
|
|
58
|
+
rerender()
|
|
59
|
+
return set
|
|
60
|
+
}
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
set.toggle = (v) => {
|
|
63
|
+
if (set.has(v)) set._delete(v)
|
|
64
|
+
else set._add(v)
|
|
65
|
+
rerender()
|
|
66
|
+
return set
|
|
67
|
+
}
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
set._union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {
|
|
70
|
+
for (const elem of other as unknown as Set<T>) {
|
|
71
|
+
set._add(elem)
|
|
72
|
+
}
|
|
73
|
+
return set
|
|
74
|
+
}
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
76
|
+
set.union = <U>(other: ReadonlySetLike<U>): Set<T | U> => {
|
|
77
|
+
set._union(other)
|
|
78
|
+
rerender()
|
|
79
|
+
return set
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
return set
|
|
84
84
|
}
|
package/tsconfig.json
CHANGED