@fringeworks/react-utils 0.9.1 → 0.10.0
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.ja.md +123 -10
- package/README.md +123 -10
- package/_helpers/_useExecutionHandler.cjs +37 -0
- package/_helpers/_useExecutionHandler.d.cts +18 -0
- package/_helpers/_useExecutionHandler.d.mts +18 -0
- package/_helpers/_useExecutionHandler.mjs +36 -0
- package/hooks/index.cjs +17 -2
- package/hooks/index.d.cts +8 -3
- package/hooks/index.d.mts +8 -3
- package/hooks/index.mjs +13 -3
- package/hooks/useExecutionEffect/index.cjs +5 -0
- package/hooks/useExecutionEffect/index.d.cts +2 -0
- package/hooks/useExecutionEffect/index.d.mts +2 -0
- package/hooks/useExecutionEffect/index.mjs +3 -0
- package/hooks/useExecutionEffect/useExecutionEffect.cjs +37 -0
- package/hooks/useExecutionEffect/useExecutionEffect.d.cts +27 -0
- package/hooks/useExecutionEffect/useExecutionEffect.d.mts +27 -0
- package/hooks/useExecutionEffect/useExecutionEffect.mjs +36 -0
- package/hooks/useExecutionLayoutEffect/index.cjs +5 -0
- package/hooks/useExecutionLayoutEffect/index.d.cts +2 -0
- package/hooks/useExecutionLayoutEffect/index.d.mts +2 -0
- package/hooks/useExecutionLayoutEffect/index.mjs +3 -0
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs +24 -0
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.cts +14 -0
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.mts +14 -0
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs +23 -0
- package/hooks/useIsHydrated/index.cjs +5 -0
- package/hooks/useIsHydrated/index.d.cts +2 -0
- package/hooks/useIsHydrated/index.d.mts +2 -0
- package/hooks/useIsHydrated/index.mjs +3 -0
- package/hooks/useIsHydrated/useIsHydrated.cjs +28 -0
- package/hooks/useIsHydrated/useIsHydrated.d.cts +15 -0
- package/hooks/useIsHydrated/useIsHydrated.d.mts +15 -0
- package/hooks/useIsHydrated/useIsHydrated.mjs +27 -0
- package/hooks/useRerender/index.cjs +5 -0
- package/hooks/useRerender/index.d.cts +2 -0
- package/hooks/useRerender/index.d.mts +2 -0
- package/hooks/useRerender/index.mjs +3 -0
- package/hooks/useRerender/useRerender.cjs +19 -0
- package/hooks/useRerender/useRerender.d.cts +11 -0
- package/hooks/useRerender/useRerender.d.mts +11 -0
- package/hooks/useRerender/useRerender.mjs +18 -0
- package/hooks/useStableCallback/index.cjs +5 -0
- package/hooks/useStableCallback/index.d.cts +2 -0
- package/hooks/useStableCallback/index.d.mts +2 -0
- package/hooks/useStableCallback/index.mjs +3 -0
- package/hooks/useStableCallback/useStableCallback.cjs +25 -0
- package/hooks/useStableCallback/useStableCallback.d.cts +15 -0
- package/hooks/useStableCallback/useStableCallback.d.mts +15 -0
- package/hooks/useStableCallback/useStableCallback.mjs +24 -0
- package/index.cjs +13 -1
- package/index.d.cts +9 -3
- package/index.d.mts +9 -3
- package/index.mjs +8 -2
- package/package.json +61 -1
- package/utils/getComponentName/getComponentName.cjs +18 -0
- package/utils/getComponentName/getComponentName.d.cts +12 -0
- package/utils/getComponentName/getComponentName.d.mts +12 -0
- package/utils/getComponentName/getComponentName.mjs +17 -0
- package/utils/getComponentName/index.cjs +5 -0
- package/utils/getComponentName/index.d.cts +2 -0
- package/utils/getComponentName/index.d.mts +2 -0
- package/utils/getComponentName/index.mjs +3 -0
- package/utils/index.cjs +2 -0
- package/utils/index.d.cts +3 -1
- package/utils/index.d.mts +3 -1
- package/utils/index.mjs +2 -1
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ExecutionRequest } from "../useExecutionAt/types.cjs";
|
|
2
|
+
//#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
|
|
5
|
+
*
|
|
6
|
+
* `useExecutionAt` と対になる、受け取る側のフック。
|
|
7
|
+
* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
|
|
8
|
+
* 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
|
|
9
|
+
*
|
|
10
|
+
* - `at` が変わったときだけ実行する(`payload` は比べない)
|
|
11
|
+
* - マウントより前に出た要求(マウントしたときにすでに渡されていた要求を含む)は実行しない
|
|
12
|
+
* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
|
|
13
|
+
* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
|
|
14
|
+
*
|
|
15
|
+
* @param request 受け取った Execution Request。undefined の場合は要求なし
|
|
16
|
+
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
17
|
+
* @example
|
|
18
|
+
* // 呼び出す側
|
|
19
|
+
* const [undoAt, undo] = useExecutionAt<string>();
|
|
20
|
+
* <WrappedImperativeComponent undoAt={undoAt} />
|
|
21
|
+
* // 受け取る側(WrappedImperativeComponent の中)
|
|
22
|
+
* useExecutionEffect(props.undoAt, (payload) => {
|
|
23
|
+
* instance.undo(payload);
|
|
24
|
+
* });
|
|
25
|
+
*/
|
|
26
|
+
declare function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
27
|
+
export = useExecutionEffect;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ExecutionRequest } from "../useExecutionAt/types.mjs";
|
|
2
|
+
//#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
|
|
5
|
+
*
|
|
6
|
+
* `useExecutionAt` と対になる、受け取る側のフック。
|
|
7
|
+
* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
|
|
8
|
+
* 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
|
|
9
|
+
*
|
|
10
|
+
* - `at` が変わったときだけ実行する(`payload` は比べない)
|
|
11
|
+
* - マウントより前に出た要求(マウントしたときにすでに渡されていた要求を含む)は実行しない
|
|
12
|
+
* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
|
|
13
|
+
* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
|
|
14
|
+
*
|
|
15
|
+
* @param request 受け取った Execution Request。undefined の場合は要求なし
|
|
16
|
+
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
17
|
+
* @example
|
|
18
|
+
* // 呼び出す側
|
|
19
|
+
* const [undoAt, undo] = useExecutionAt<string>();
|
|
20
|
+
* <WrappedImperativeComponent undoAt={undoAt} />
|
|
21
|
+
* // 受け取る側(WrappedImperativeComponent の中)
|
|
22
|
+
* useExecutionEffect(props.undoAt, (payload) => {
|
|
23
|
+
* instance.undo(payload);
|
|
24
|
+
* });
|
|
25
|
+
*/
|
|
26
|
+
export default function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
27
|
+
//#endregion
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import useExecutionHandler from "../../_helpers/_useExecutionHandler.mjs";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/hooks/useExecutionEffect/useExecutionEffect.ts
|
|
5
|
+
/**
|
|
6
|
+
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
|
|
7
|
+
*
|
|
8
|
+
* `useExecutionAt` と対になる、受け取る側のフック。
|
|
9
|
+
* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
|
|
10
|
+
* 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
|
|
11
|
+
*
|
|
12
|
+
* - `at` が変わったときだけ実行する(`payload` は比べない)
|
|
13
|
+
* - マウントより前に出た要求(マウントしたときにすでに渡されていた要求を含む)は実行しない
|
|
14
|
+
* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
|
|
15
|
+
* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
|
|
16
|
+
*
|
|
17
|
+
* @param request 受け取った Execution Request。undefined の場合は要求なし
|
|
18
|
+
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
19
|
+
* @example
|
|
20
|
+
* // 呼び出す側
|
|
21
|
+
* const [undoAt, undo] = useExecutionAt<string>();
|
|
22
|
+
* <WrappedImperativeComponent undoAt={undoAt} />
|
|
23
|
+
* // 受け取る側(WrappedImperativeComponent の中)
|
|
24
|
+
* useExecutionEffect(props.undoAt, (payload) => {
|
|
25
|
+
* instance.undo(payload);
|
|
26
|
+
* });
|
|
27
|
+
*/
|
|
28
|
+
function useExecutionEffect(request, callback) {
|
|
29
|
+
const handle = useExecutionHandler(request, callback);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
handle();
|
|
32
|
+
}, [handle]);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
//#endregion
|
|
36
|
+
export { useExecutionEffect as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./useExecutionLayoutEffect.cjs");
|
|
3
|
+
|
|
4
|
+
exports.default = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
|
|
5
|
+
exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require__helpers__useExecutionHandler = require("../../_helpers/_useExecutionHandler.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
|
|
5
|
+
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
|
|
6
|
+
/**
|
|
7
|
+
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
|
|
8
|
+
*
|
|
9
|
+
* `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
|
|
10
|
+
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
11
|
+
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
12
|
+
*
|
|
13
|
+
* @param request 受け取った Execution Request。undefined の場合は要求なし
|
|
14
|
+
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
15
|
+
*/
|
|
16
|
+
function useExecutionLayoutEffect(request, callback) {
|
|
17
|
+
const handle = require__helpers__useExecutionHandler.default(request, callback);
|
|
18
|
+
(0, react.useLayoutEffect)(() => {
|
|
19
|
+
handle();
|
|
20
|
+
}, [handle]);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
exports.default = useExecutionLayoutEffect;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ExecutionRequest } from "../useExecutionAt/types.cjs";
|
|
2
|
+
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
|
|
5
|
+
*
|
|
6
|
+
* `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
|
|
7
|
+
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
8
|
+
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
9
|
+
*
|
|
10
|
+
* @param request 受け取った Execution Request。undefined の場合は要求なし
|
|
11
|
+
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
12
|
+
*/
|
|
13
|
+
declare function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
14
|
+
export = useExecutionLayoutEffect;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ExecutionRequest } from "../useExecutionAt/types.mjs";
|
|
2
|
+
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
|
|
5
|
+
*
|
|
6
|
+
* `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
|
|
7
|
+
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
8
|
+
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
9
|
+
*
|
|
10
|
+
* @param request 受け取った Execution Request。undefined の場合は要求なし
|
|
11
|
+
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
12
|
+
*/
|
|
13
|
+
export default function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
14
|
+
//#endregion
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import useExecutionHandler from "../../_helpers/_useExecutionHandler.mjs";
|
|
2
|
+
import { useLayoutEffect } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
|
|
5
|
+
/**
|
|
6
|
+
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
|
|
7
|
+
*
|
|
8
|
+
* `useExecutionEffect` の、処理を `useLayoutEffect` で実行する版。
|
|
9
|
+
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
10
|
+
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
11
|
+
*
|
|
12
|
+
* @param request 受け取った Execution Request。undefined の場合は要求なし
|
|
13
|
+
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
14
|
+
*/
|
|
15
|
+
function useExecutionLayoutEffect(request, callback) {
|
|
16
|
+
const handle = useExecutionHandler(request, callback);
|
|
17
|
+
useLayoutEffect(() => {
|
|
18
|
+
handle();
|
|
19
|
+
}, [handle]);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
//#endregion
|
|
23
|
+
export { useExecutionLayoutEffect as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require_hooks_useIsHydrated_useIsHydrated = require("./useIsHydrated.cjs");
|
|
3
|
+
|
|
4
|
+
exports.default = require_hooks_useIsHydrated_useIsHydrated.default;
|
|
5
|
+
exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
let react = require("react");
|
|
3
|
+
|
|
4
|
+
//#region src/hooks/useIsHydrated/useIsHydrated.ts
|
|
5
|
+
/**
|
|
6
|
+
* 購読しない(値が変わることは無い)
|
|
7
|
+
*/
|
|
8
|
+
const subscribe = () => () => {};
|
|
9
|
+
const getSnapshot = () => true;
|
|
10
|
+
const getServerSnapshot = () => false;
|
|
11
|
+
/**
|
|
12
|
+
* ハイドレーションが終わっているかを返すフック
|
|
13
|
+
*
|
|
14
|
+
* - サーバーの描画とハイドレーション中は false、その後は true を返す
|
|
15
|
+
* - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
|
|
16
|
+
*
|
|
17
|
+
* クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
|
|
18
|
+
* `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
|
|
19
|
+
* `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
|
|
20
|
+
*
|
|
21
|
+
* @returns ハイドレーションが終わっている場合は true
|
|
22
|
+
*/
|
|
23
|
+
function useIsHydrated() {
|
|
24
|
+
return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
//#endregion
|
|
28
|
+
exports.default = useIsHydrated;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//#region src/hooks/useIsHydrated/useIsHydrated.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* ハイドレーションが終わっているかを返すフック
|
|
4
|
+
*
|
|
5
|
+
* - サーバーの描画とハイドレーション中は false、その後は true を返す
|
|
6
|
+
* - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
|
|
7
|
+
*
|
|
8
|
+
* クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
|
|
9
|
+
* `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
|
|
10
|
+
* `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
|
|
11
|
+
*
|
|
12
|
+
* @returns ハイドレーションが終わっている場合は true
|
|
13
|
+
*/
|
|
14
|
+
declare function useIsHydrated(): boolean;
|
|
15
|
+
export = useIsHydrated;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//#region src/hooks/useIsHydrated/useIsHydrated.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* ハイドレーションが終わっているかを返すフック
|
|
4
|
+
*
|
|
5
|
+
* - サーバーの描画とハイドレーション中は false、その後は true を返す
|
|
6
|
+
* - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
|
|
7
|
+
*
|
|
8
|
+
* クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
|
|
9
|
+
* `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
|
|
10
|
+
* `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
|
|
11
|
+
*
|
|
12
|
+
* @returns ハイドレーションが終わっている場合は true
|
|
13
|
+
*/
|
|
14
|
+
export default function useIsHydrated(): boolean;
|
|
15
|
+
//#endregion
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useSyncExternalStore } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/useIsHydrated/useIsHydrated.ts
|
|
4
|
+
/**
|
|
5
|
+
* 購読しない(値が変わることは無い)
|
|
6
|
+
*/
|
|
7
|
+
const subscribe = () => () => {};
|
|
8
|
+
const getSnapshot = () => true;
|
|
9
|
+
const getServerSnapshot = () => false;
|
|
10
|
+
/**
|
|
11
|
+
* ハイドレーションが終わっているかを返すフック
|
|
12
|
+
*
|
|
13
|
+
* - サーバーの描画とハイドレーション中は false、その後は true を返す
|
|
14
|
+
* - ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から true を返す
|
|
15
|
+
*
|
|
16
|
+
* クライアントにしか無い値(`window`・`localStorage`・画面の幅など)を、ハイドレーションの不一致を起こさずに描画するために使う。
|
|
17
|
+
* `typeof window` による判定と違い、クライアントでもハイドレーション中は false になる。
|
|
18
|
+
* `useSyncExternalStore` の、サーバーとハイドレーション中は `getServerSnapshot` の値を使う性質を利用している。
|
|
19
|
+
*
|
|
20
|
+
* @returns ハイドレーションが終わっている場合は true
|
|
21
|
+
*/
|
|
22
|
+
function useIsHydrated() {
|
|
23
|
+
return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
//#endregion
|
|
27
|
+
export { useIsHydrated as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require_hooks_useRerender_useRerender = require("./useRerender.cjs");
|
|
3
|
+
|
|
4
|
+
exports.default = require_hooks_useRerender_useRerender.default;
|
|
5
|
+
exports.useRerender = require_hooks_useRerender_useRerender.default;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
let react = require("react");
|
|
3
|
+
|
|
4
|
+
//#region src/hooks/useRerender/useRerender.ts
|
|
5
|
+
/**
|
|
6
|
+
* 再レンダリングだけを起こす関数を返すフック
|
|
7
|
+
*
|
|
8
|
+
* 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
|
|
9
|
+
* `useReducer` のカウンターを進めることで、再レンダリングを要求する。
|
|
10
|
+
*
|
|
11
|
+
* @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
|
|
12
|
+
*/
|
|
13
|
+
function useRerender() {
|
|
14
|
+
const [, rerender] = (0, react.useReducer)((count) => count + 1, 0);
|
|
15
|
+
return rerender;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
//#endregion
|
|
19
|
+
exports.default = useRerender;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region src/hooks/useRerender/useRerender.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* 再レンダリングだけを起こす関数を返すフック
|
|
4
|
+
*
|
|
5
|
+
* 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
|
|
6
|
+
* `useReducer` のカウンターを進めることで、再レンダリングを要求する。
|
|
7
|
+
*
|
|
8
|
+
* @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
|
|
9
|
+
*/
|
|
10
|
+
declare function useRerender(): () => void;
|
|
11
|
+
export = useRerender;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region src/hooks/useRerender/useRerender.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* 再レンダリングだけを起こす関数を返すフック
|
|
4
|
+
*
|
|
5
|
+
* 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
|
|
6
|
+
* `useReducer` のカウンターを進めることで、再レンダリングを要求する。
|
|
7
|
+
*
|
|
8
|
+
* @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
|
|
9
|
+
*/
|
|
10
|
+
export default function useRerender(): () => void;
|
|
11
|
+
//#endregion
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useReducer } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/hooks/useRerender/useRerender.ts
|
|
4
|
+
/**
|
|
5
|
+
* 再レンダリングだけを起こす関数を返すフック
|
|
6
|
+
*
|
|
7
|
+
* 値を持たずに描画し直したい場合(外部の状態を読み直して表示するときなど)に使う。
|
|
8
|
+
* `useReducer` のカウンターを進めることで、再レンダリングを要求する。
|
|
9
|
+
*
|
|
10
|
+
* @returns 呼ぶと再レンダリングを要求する関数。参照は常に同じ
|
|
11
|
+
*/
|
|
12
|
+
function useRerender() {
|
|
13
|
+
const [, rerender] = useReducer((count) => count + 1, 0);
|
|
14
|
+
return rerender;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
//#endregion
|
|
18
|
+
export { useRerender as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require_hooks_useStableCallback_useStableCallback = require("./useStableCallback.cjs");
|
|
3
|
+
|
|
4
|
+
exports.default = require_hooks_useStableCallback_useStableCallback.default;
|
|
5
|
+
exports.useStableCallback = require_hooks_useStableCallback_useStableCallback.default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require_hooks_useLatestRef_useLatestRef = require("../useLatestRef/useLatestRef.cjs");
|
|
3
|
+
require("../useLatestRef/index.cjs");
|
|
4
|
+
let react = require("react");
|
|
5
|
+
|
|
6
|
+
//#region src/hooks/useStableCallback/useStableCallback.ts
|
|
7
|
+
/**
|
|
8
|
+
* 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
|
|
9
|
+
*
|
|
10
|
+
* 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
|
|
11
|
+
* React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
|
|
12
|
+
*
|
|
13
|
+
* 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
|
|
14
|
+
* イベントハンドラーやエフェクトの中から呼ぶ。
|
|
15
|
+
*
|
|
16
|
+
* @param callback コールバック
|
|
17
|
+
* @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
|
|
18
|
+
*/
|
|
19
|
+
function useStableCallback(callback) {
|
|
20
|
+
const latestRef = require_hooks_useLatestRef_useLatestRef.default(callback);
|
|
21
|
+
return (0, react.useCallback)((...args) => latestRef.current(...args), [latestRef]);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
//#endregion
|
|
25
|
+
exports.default = useStableCallback;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//#region src/hooks/useStableCallback/useStableCallback.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
|
|
4
|
+
*
|
|
5
|
+
* 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
|
|
6
|
+
* React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
|
|
7
|
+
*
|
|
8
|
+
* 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
|
|
9
|
+
* イベントハンドラーやエフェクトの中から呼ぶ。
|
|
10
|
+
*
|
|
11
|
+
* @param callback コールバック
|
|
12
|
+
* @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
|
|
13
|
+
*/
|
|
14
|
+
declare function useStableCallback<A extends unknown[], R>(callback: (...args: A) => R): (...args: A) => R;
|
|
15
|
+
export = useStableCallback;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//#region src/hooks/useStableCallback/useStableCallback.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
|
|
4
|
+
*
|
|
5
|
+
* 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
|
|
6
|
+
* React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
|
|
7
|
+
*
|
|
8
|
+
* 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
|
|
9
|
+
* イベントハンドラーやエフェクトの中から呼ぶ。
|
|
10
|
+
*
|
|
11
|
+
* @param callback コールバック
|
|
12
|
+
* @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
|
|
13
|
+
*/
|
|
14
|
+
export default function useStableCallback<A extends unknown[], R>(callback: (...args: A) => R): (...args: A) => R;
|
|
15
|
+
//#endregion
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import useLatestRef from "../useLatestRef/useLatestRef.mjs";
|
|
2
|
+
import "../useLatestRef/index.mjs";
|
|
3
|
+
import { useCallback } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/hooks/useStableCallback/useStableCallback.ts
|
|
6
|
+
/**
|
|
7
|
+
* 参照が変わらず、呼ぶと最新のコールバックを実行する関数を返すフック
|
|
8
|
+
*
|
|
9
|
+
* 子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使う。
|
|
10
|
+
* React 19.2 の `useEffectEvent` と違い、子のコンポーネントに渡せる。
|
|
11
|
+
*
|
|
12
|
+
* 最新のコールバックはコミット時に反映されるため、レンダリング中には呼ばないこと(古いコールバックが呼ばれる)。
|
|
13
|
+
* イベントハンドラーやエフェクトの中から呼ぶ。
|
|
14
|
+
*
|
|
15
|
+
* @param callback コールバック
|
|
16
|
+
* @returns 最新のコールバックを呼ぶ関数。参照は常に同じ
|
|
17
|
+
*/
|
|
18
|
+
function useStableCallback(callback) {
|
|
19
|
+
const latestRef = useLatestRef(callback);
|
|
20
|
+
return useCallback((...args) => latestRef.current(...args), [latestRef]);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { useStableCallback as default };
|
package/index.cjs
CHANGED
|
@@ -5,15 +5,21 @@ const require_hooks_useCombinedRefs_useCombinedRefs = require("./hooks/useCombin
|
|
|
5
5
|
const require_hooks_useConstant_useConstant = require("./hooks/useConstant/useConstant.cjs");
|
|
6
6
|
const require_utils_markAt_markAt = require("./utils/markAt/markAt.cjs");
|
|
7
7
|
const require_hooks_useExecutionAt_useExecutionAt = require("./hooks/useExecutionAt/useExecutionAt.cjs");
|
|
8
|
-
const require_hooks_useIsMounted_useIsMounted = require("./hooks/useIsMounted/useIsMounted.cjs");
|
|
9
8
|
const require_hooks_useLatestRef_useLatestRef = require("./hooks/useLatestRef/useLatestRef.cjs");
|
|
9
|
+
const require_hooks_useExecutionEffect_useExecutionEffect = require("./hooks/useExecutionEffect/useExecutionEffect.cjs");
|
|
10
|
+
const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs");
|
|
11
|
+
const require_hooks_useIsHydrated_useIsHydrated = require("./hooks/useIsHydrated/useIsHydrated.cjs");
|
|
12
|
+
const require_hooks_useIsMounted_useIsMounted = require("./hooks/useIsMounted/useIsMounted.cjs");
|
|
10
13
|
const require_hooks_usePreviousValue_usePreviousValue = require("./hooks/usePreviousValue/usePreviousValue.cjs");
|
|
14
|
+
const require_hooks_useRerender_useRerender = require("./hooks/useRerender/useRerender.cjs");
|
|
15
|
+
const require_hooks_useStableCallback_useStableCallback = require("./hooks/useStableCallback/useStableCallback.cjs");
|
|
11
16
|
require("./hooks/index.cjs");
|
|
12
17
|
const require_utils_applyDefaultProps_applyDefaultProps = require("./utils/applyDefaultProps/applyDefaultProps.cjs");
|
|
13
18
|
const require_utils_ensureComponent_ensureComponent = require("./utils/ensureComponent/ensureComponent.cjs");
|
|
14
19
|
const require_utils_extendElement_extendElement = require("./utils/extendElement/extendElement.cjs");
|
|
15
20
|
const require_utils_forEachContent_forEachContent = require("./utils/forEachContent/forEachContent.cjs");
|
|
16
21
|
const require_utils_forEachElement_forEachElement = require("./utils/forEachElement/forEachElement.cjs");
|
|
22
|
+
const require_utils_getComponentName_getComponentName = require("./utils/getComponentName/getComponentName.cjs");
|
|
17
23
|
const require_utils_transformContent_transformContent = require("./utils/transformContent/transformContent.cjs");
|
|
18
24
|
const require_utils_transformElement_transformElement = require("./utils/transformElement/transformElement.cjs");
|
|
19
25
|
require("./utils/index.cjs");
|
|
@@ -23,6 +29,7 @@ exports.ensureComponent = require_utils_ensureComponent_ensureComponent.default;
|
|
|
23
29
|
exports.extendElement = require_utils_extendElement_extendElement.default;
|
|
24
30
|
exports.forEachContent = require_utils_forEachContent_forEachContent.default;
|
|
25
31
|
exports.forEachElement = require_utils_forEachElement_forEachElement.default;
|
|
32
|
+
exports.getComponentName = require_utils_getComponentName_getComponentName.default;
|
|
26
33
|
exports.markAt = require_utils_markAt_markAt.default;
|
|
27
34
|
exports.setRefCurrent = require_utils_setRefCurrent_setRefCurrent.default;
|
|
28
35
|
exports.transformContent = require_utils_transformContent_transformContent.default;
|
|
@@ -30,7 +37,12 @@ exports.transformElement = require_utils_transformElement_transformElement.defau
|
|
|
30
37
|
exports.useCombinedRefs = require_hooks_useCombinedRefs_useCombinedRefs.default;
|
|
31
38
|
exports.useConstant = require_hooks_useConstant_useConstant.default;
|
|
32
39
|
exports.useExecutionAt = require_hooks_useExecutionAt_useExecutionAt.default;
|
|
40
|
+
exports.useExecutionEffect = require_hooks_useExecutionEffect_useExecutionEffect.default;
|
|
41
|
+
exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
|
|
42
|
+
exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
|
|
33
43
|
exports.useIsMounted = require_hooks_useIsMounted_useIsMounted.default;
|
|
34
44
|
exports.useLatestRef = require_hooks_useLatestRef_useLatestRef.default;
|
|
35
45
|
exports.usePreviousValue = require_hooks_usePreviousValue_usePreviousValue.default;
|
|
46
|
+
exports.useRerender = require_hooks_useRerender_useRerender.default;
|
|
47
|
+
exports.useStableCallback = require_hooks_useStableCallback_useStableCallback.default;
|
|
36
48
|
exports.useStableLength = require_hooks_useStableLength_useStableLength.default;
|
package/index.d.cts
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.cjs";
|
|
2
|
-
import useConstant from "./hooks/useConstant/useConstant.cjs";
|
|
3
1
|
import { MarkAtResult } from "./utils/markAt/types.cjs";
|
|
4
2
|
import markAt from "./utils/markAt/markAt.cjs";
|
|
5
3
|
import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./hooks/useExecutionAt/types.cjs";
|
|
6
4
|
import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.cjs";
|
|
5
|
+
import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.cjs";
|
|
6
|
+
import useConstant from "./hooks/useConstant/useConstant.cjs";
|
|
7
|
+
import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.cjs";
|
|
8
|
+
import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs";
|
|
9
|
+
import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.cjs";
|
|
7
10
|
import useIsMounted from "./hooks/useIsMounted/useIsMounted.cjs";
|
|
8
11
|
import { LatestRef } from "./hooks/useLatestRef/types.cjs";
|
|
9
12
|
import useLatestRef from "./hooks/useLatestRef/useLatestRef.cjs";
|
|
10
13
|
import { UsePreviousValueOptions } from "./hooks/usePreviousValue/types.cjs";
|
|
11
14
|
import usePreviousValue from "./hooks/usePreviousValue/usePreviousValue.cjs";
|
|
15
|
+
import useRerender from "./hooks/useRerender/useRerender.cjs";
|
|
16
|
+
import useStableCallback from "./hooks/useStableCallback/useStableCallback.cjs";
|
|
12
17
|
import useStableLength from "./hooks/useStableLength/useStableLength.cjs";
|
|
13
18
|
import "./hooks/index.cjs";
|
|
14
19
|
import { CSSPropertiesWithVars } from "./types.cjs";
|
|
@@ -19,8 +24,9 @@ import { ExtendableProps } from "./utils/extendElement/types.cjs";
|
|
|
19
24
|
import extendElement from "./utils/extendElement/extendElement.cjs";
|
|
20
25
|
import forEachContent from "./utils/forEachContent/forEachContent.cjs";
|
|
21
26
|
import forEachElement from "./utils/forEachElement/forEachElement.cjs";
|
|
27
|
+
import getComponentName from "./utils/getComponentName/getComponentName.cjs";
|
|
22
28
|
import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.cjs";
|
|
23
29
|
import transformContent from "./utils/transformContent/transformContent.cjs";
|
|
24
30
|
import transformElement from "./utils/transformElement/transformElement.cjs";
|
|
25
31
|
import "./utils/index.cjs";
|
|
26
|
-
export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
|
|
32
|
+
export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
|
package/index.d.mts
CHANGED
|
@@ -1,14 +1,19 @@
|
|
|
1
|
-
import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
|
|
2
|
-
import useConstant from "./hooks/useConstant/useConstant.mjs";
|
|
3
1
|
import { MarkAtResult } from "./utils/markAt/types.mjs";
|
|
4
2
|
import markAt from "./utils/markAt/markAt.mjs";
|
|
5
3
|
import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./hooks/useExecutionAt/types.mjs";
|
|
6
4
|
import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.mjs";
|
|
5
|
+
import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.mjs";
|
|
6
|
+
import useConstant from "./hooks/useConstant/useConstant.mjs";
|
|
7
|
+
import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.mjs";
|
|
8
|
+
import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
|
|
9
|
+
import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.mjs";
|
|
7
10
|
import useIsMounted from "./hooks/useIsMounted/useIsMounted.mjs";
|
|
8
11
|
import { LatestRef } from "./hooks/useLatestRef/types.mjs";
|
|
9
12
|
import useLatestRef from "./hooks/useLatestRef/useLatestRef.mjs";
|
|
10
13
|
import { UsePreviousValueOptions } from "./hooks/usePreviousValue/types.mjs";
|
|
11
14
|
import usePreviousValue from "./hooks/usePreviousValue/usePreviousValue.mjs";
|
|
15
|
+
import useRerender from "./hooks/useRerender/useRerender.mjs";
|
|
16
|
+
import useStableCallback from "./hooks/useStableCallback/useStableCallback.mjs";
|
|
12
17
|
import useStableLength from "./hooks/useStableLength/useStableLength.mjs";
|
|
13
18
|
import "./hooks/index.mjs";
|
|
14
19
|
import { CSSPropertiesWithVars } from "./types.mjs";
|
|
@@ -19,8 +24,9 @@ import { ExtendableProps } from "./utils/extendElement/types.mjs";
|
|
|
19
24
|
import extendElement from "./utils/extendElement/extendElement.mjs";
|
|
20
25
|
import forEachContent from "./utils/forEachContent/forEachContent.mjs";
|
|
21
26
|
import forEachElement from "./utils/forEachElement/forEachElement.mjs";
|
|
27
|
+
import getComponentName from "./utils/getComponentName/getComponentName.mjs";
|
|
22
28
|
import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.mjs";
|
|
23
29
|
import transformContent from "./utils/transformContent/transformContent.mjs";
|
|
24
30
|
import transformElement from "./utils/transformElement/transformElement.mjs";
|
|
25
31
|
import "./utils/index.mjs";
|
|
26
|
-
export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
|
|
32
|
+
export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type ExecutionRequest, type ExtendableProps, type LatestRef, type MarkAtResult, type SkippedDefaults, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
|