@fringeworks/react-utils 0.10.0 → 0.12.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 +118 -43
- package/README.md +118 -43
- package/{_helpers → _internal}/_traverseChildren.cjs +1 -1
- package/{_helpers → _internal}/_traverseChildren.d.cts +1 -1
- package/{_helpers → _internal}/_traverseChildren.d.mts +1 -1
- package/{_helpers → _internal}/_traverseChildren.mjs +1 -1
- package/_internal/_useChangeHandler.cjs +48 -0
- package/_internal/_useChangeHandler.d.cts +18 -0
- package/_internal/_useChangeHandler.d.mts +18 -0
- package/_internal/_useChangeHandler.mjs +47 -0
- package/{_helpers → _internal}/_useExecutionHandler.cjs +13 -12
- package/{_helpers → _internal}/_useExecutionHandler.d.cts +7 -4
- package/{_helpers → _internal}/_useExecutionHandler.d.mts +7 -4
- package/_internal/_useExecutionHandler.mjs +37 -0
- package/hooks/index.cjs +11 -2
- package/hooks/index.d.cts +11 -2
- package/hooks/index.d.mts +11 -2
- package/hooks/index.mjs +9 -3
- package/hooks/useChangeEffect/index.cjs +5 -0
- package/hooks/useChangeEffect/index.d.cts +3 -0
- package/hooks/useChangeEffect/index.d.mts +3 -0
- package/hooks/useChangeEffect/index.mjs +3 -0
- package/hooks/useChangeEffect/types.d.cts +11 -0
- package/hooks/useChangeEffect/types.d.mts +11 -0
- package/hooks/useChangeEffect/useChangeEffect.cjs +37 -0
- package/hooks/useChangeEffect/useChangeEffect.d.cts +27 -0
- package/hooks/useChangeEffect/useChangeEffect.d.mts +27 -0
- package/hooks/useChangeEffect/useChangeEffect.mjs +36 -0
- package/hooks/useChangeLayoutEffect/index.cjs +5 -0
- package/hooks/useChangeLayoutEffect/index.d.cts +2 -0
- package/hooks/useChangeLayoutEffect/index.d.mts +2 -0
- package/hooks/useChangeLayoutEffect/index.mjs +3 -0
- package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.cjs +24 -0
- package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.cts +14 -0
- package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.d.mts +14 -0
- package/hooks/useChangeLayoutEffect/useChangeLayoutEffect.mjs +23 -0
- package/hooks/useCombinedRefs/useCombinedRefs.cjs +2 -0
- package/hooks/useCombinedRefs/useCombinedRefs.d.cts +3 -1
- package/hooks/useCombinedRefs/useCombinedRefs.d.mts +3 -1
- package/hooks/useCombinedRefs/useCombinedRefs.mjs +2 -0
- package/hooks/useExecutionAt/index.d.cts +2 -2
- package/hooks/useExecutionAt/index.d.mts +2 -2
- package/hooks/useExecutionAt/types.d.cts +2 -11
- package/hooks/useExecutionAt/types.d.mts +2 -11
- package/hooks/useExecutionAt/useExecutionAt.cjs +2 -3
- package/hooks/useExecutionAt/useExecutionAt.d.cts +2 -3
- package/hooks/useExecutionAt/useExecutionAt.d.mts +2 -3
- package/hooks/useExecutionAt/useExecutionAt.mjs +2 -3
- package/hooks/useExecutionEffect/useExecutionEffect.cjs +8 -6
- package/hooks/useExecutionEffect/useExecutionEffect.d.cts +9 -5
- package/hooks/useExecutionEffect/useExecutionEffect.d.mts +9 -5
- package/hooks/useExecutionEffect/useExecutionEffect.mjs +7 -5
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs +3 -3
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.cts +4 -2
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.mts +4 -2
- package/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.mjs +2 -2
- package/hooks/useExecutionMark/index.cjs +5 -0
- package/hooks/useExecutionMark/index.d.cts +3 -0
- package/hooks/useExecutionMark/index.d.mts +3 -0
- package/hooks/useExecutionMark/index.mjs +3 -0
- package/hooks/useExecutionMark/types.cjs +1 -0
- package/hooks/useExecutionMark/types.d.cts +7 -0
- package/hooks/useExecutionMark/types.d.mts +7 -0
- package/hooks/useExecutionMark/types.mjs +1 -0
- package/hooks/useExecutionMark/useExecutionMark.cjs +29 -0
- package/hooks/useExecutionMark/useExecutionMark.d.cts +19 -0
- package/hooks/useExecutionMark/useExecutionMark.d.mts +19 -0
- package/hooks/useExecutionMark/useExecutionMark.mjs +28 -0
- package/index.cjs +7 -1
- package/index.d.cts +9 -5
- package/index.d.mts +9 -5
- package/index.mjs +5 -2
- package/package.json +32 -2
- package/types.d.cts +10 -0
- package/types.d.mts +10 -0
- package/utils/forEachContent/forEachContent.cjs +2 -2
- package/utils/forEachContent/forEachContent.mjs +1 -1
- package/utils/forEachElement/forEachElement.cjs +2 -2
- package/utils/forEachElement/forEachElement.mjs +1 -1
- package/utils/index.d.cts +3 -3
- package/utils/index.d.mts +3 -3
- package/utils/markAt/index.d.cts +1 -2
- package/utils/markAt/index.d.mts +1 -2
- package/utils/markAt/markAt.cjs +2 -2
- package/utils/markAt/markAt.d.cts +4 -4
- package/utils/markAt/markAt.d.mts +4 -4
- package/utils/markAt/markAt.mjs +2 -2
- package/utils/transformContent/transformContent.cjs +2 -2
- package/utils/transformContent/transformContent.mjs +1 -1
- package/utils/transformElement/transformElement.cjs +2 -2
- package/utils/transformElement/transformElement.mjs +1 -1
- package/_helpers/_useExecutionHandler.mjs +0 -36
- package/utils/markAt/types.d.cts +0 -3
- package/utils/markAt/types.d.mts +0 -3
- /package/{utils/markAt → hooks/useChangeEffect}/types.cjs +0 -0
- /package/{utils/markAt → hooks/useChangeEffect}/types.mjs +0 -0
|
@@ -2,8 +2,10 @@ import { Ref, RefCallback } from "react";
|
|
|
2
2
|
//#region src/hooks/useCombinedRefs/useCombinedRefs.d.ts
|
|
3
3
|
/**
|
|
4
4
|
* 複数のrefに纏めて値を渡すことができるRefCallbackを取得する
|
|
5
|
+
*
|
|
6
|
+
* null・undefined のrefは無視する(省略できる `ref` のプロパティをそのまま渡せる)
|
|
5
7
|
* @param refs
|
|
6
8
|
* @returns
|
|
7
9
|
*/
|
|
8
|
-
export default function useCombinedRefs<T = unknown>(...refs: Ref<T>[]): RefCallback<T>;
|
|
10
|
+
export default function useCombinedRefs<T = unknown>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;
|
|
9
11
|
//#endregion
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ExecutionFunction, ExecutionRequest,
|
|
1
|
+
import { ExecutionFunction, ExecutionRequest, UseExecutionAtResult } from "./types.cjs";
|
|
2
2
|
import useExecutionAt from "./useExecutionAt.cjs";
|
|
3
|
-
export { type ExecutionFunction, type ExecutionRequest, type
|
|
3
|
+
export { type ExecutionFunction, type ExecutionRequest, type UseExecutionAtResult, useExecutionAt as default, useExecutionAt };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ExecutionFunction, ExecutionRequest,
|
|
1
|
+
import { ExecutionFunction, ExecutionRequest, UseExecutionAtResult } from "./types.mjs";
|
|
2
2
|
import useExecutionAt from "./useExecutionAt.mjs";
|
|
3
|
-
export { type ExecutionFunction, type ExecutionRequest, type
|
|
3
|
+
export { type ExecutionFunction, type ExecutionRequest, type UseExecutionAtResult, useExecutionAt as default, useExecutionAt };
|
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ExecutionMark } from "../../types.cjs";
|
|
2
2
|
//#region src/hooks/useExecutionAt/types.d.ts
|
|
3
|
-
/**
|
|
4
|
-
* オプション
|
|
5
|
-
*/
|
|
6
|
-
export type UseExecutionAtOptions<P = void> = {
|
|
7
|
-
/**
|
|
8
|
-
* ペイロードの初期値
|
|
9
|
-
*/
|
|
10
|
-
initialPayload?: P;
|
|
11
|
-
};
|
|
12
3
|
/**
|
|
13
4
|
* 戻り値
|
|
14
5
|
*/
|
|
@@ -20,7 +11,7 @@ export type ExecutionRequest<P = void> = {
|
|
|
20
11
|
/**
|
|
21
12
|
* 実行される度に増加する値
|
|
22
13
|
*/
|
|
23
|
-
readonly at:
|
|
14
|
+
readonly at: ExecutionMark;
|
|
24
15
|
/**
|
|
25
16
|
* ペイロード
|
|
26
17
|
* 初期値や実行時の引数を省略した場合は undefined
|
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ExecutionMark } from "../../types.mjs";
|
|
2
2
|
//#region src/hooks/useExecutionAt/types.d.ts
|
|
3
|
-
/**
|
|
4
|
-
* オプション
|
|
5
|
-
*/
|
|
6
|
-
export type UseExecutionAtOptions<P = void> = {
|
|
7
|
-
/**
|
|
8
|
-
* ペイロードの初期値
|
|
9
|
-
*/
|
|
10
|
-
initialPayload?: P;
|
|
11
|
-
};
|
|
12
3
|
/**
|
|
13
4
|
* 戻り値
|
|
14
5
|
*/
|
|
@@ -20,7 +11,7 @@ export type ExecutionRequest<P = void> = {
|
|
|
20
11
|
/**
|
|
21
12
|
* 実行される度に増加する値
|
|
22
13
|
*/
|
|
23
|
-
readonly at:
|
|
14
|
+
readonly at: ExecutionMark;
|
|
24
15
|
/**
|
|
25
16
|
* ペイロード
|
|
26
17
|
* 初期値や実行時の引数を省略した場合は undefined
|
|
@@ -10,7 +10,6 @@ let react = require("react");
|
|
|
10
10
|
* プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
|
|
11
11
|
*
|
|
12
12
|
* @template P 実行時にExecution Requestプロパティに渡すペイロードの型
|
|
13
|
-
* @param options オプション
|
|
14
13
|
* @returns [request, execute]
|
|
15
14
|
* - `request`: 現在のリクエスト
|
|
16
15
|
* - `execute`: 新しいリクエストを発行する関数
|
|
@@ -22,10 +21,10 @@ let react = require("react");
|
|
|
22
21
|
* // 3. 処理を実行するコンポーネント
|
|
23
22
|
* <WrappedImperativeComponent undoAt={undoAt} />
|
|
24
23
|
*/
|
|
25
|
-
function useExecutionAt(
|
|
24
|
+
function useExecutionAt() {
|
|
26
25
|
const [executionRequest, setExecutionRequest] = (0, react.useState)({
|
|
27
26
|
at: 0,
|
|
28
|
-
payload:
|
|
27
|
+
payload: void 0
|
|
29
28
|
});
|
|
30
29
|
return [executionRequest, (0, react.useCallback)((payload) => {
|
|
31
30
|
setExecutionRequest({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { UseExecutionAtResult } from "./types.cjs";
|
|
2
2
|
//#region src/hooks/useExecutionAt/useExecutionAt.d.ts
|
|
3
3
|
/**
|
|
4
4
|
* Execution Requestプロパティ(xxxxxAt)へ渡す値と、\
|
|
@@ -7,7 +7,6 @@ import { UseExecutionAtOptions, UseExecutionAtResult } from "./types.cjs";
|
|
|
7
7
|
* プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
|
|
8
8
|
*
|
|
9
9
|
* @template P 実行時にExecution Requestプロパティに渡すペイロードの型
|
|
10
|
-
* @param options オプション
|
|
11
10
|
* @returns [request, execute]
|
|
12
11
|
* - `request`: 現在のリクエスト
|
|
13
12
|
* - `execute`: 新しいリクエストを発行する関数
|
|
@@ -19,5 +18,5 @@ import { UseExecutionAtOptions, UseExecutionAtResult } from "./types.cjs";
|
|
|
19
18
|
* // 3. 処理を実行するコンポーネント
|
|
20
19
|
* <WrappedImperativeComponent undoAt={undoAt} />
|
|
21
20
|
*/
|
|
22
|
-
declare function useExecutionAt<P = void>(
|
|
21
|
+
declare function useExecutionAt<P = void>(): UseExecutionAtResult<P>;
|
|
23
22
|
export = useExecutionAt;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { UseExecutionAtResult } from "./types.mjs";
|
|
2
2
|
//#region src/hooks/useExecutionAt/useExecutionAt.d.ts
|
|
3
3
|
/**
|
|
4
4
|
* Execution Requestプロパティ(xxxxxAt)へ渡す値と、\
|
|
@@ -7,7 +7,6 @@ import { UseExecutionAtOptions, UseExecutionAtResult } from "./types.mjs";
|
|
|
7
7
|
* プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
|
|
8
8
|
*
|
|
9
9
|
* @template P 実行時にExecution Requestプロパティに渡すペイロードの型
|
|
10
|
-
* @param options オプション
|
|
11
10
|
* @returns [request, execute]
|
|
12
11
|
* - `request`: 現在のリクエスト
|
|
13
12
|
* - `execute`: 新しいリクエストを発行する関数
|
|
@@ -19,5 +18,5 @@ import { UseExecutionAtOptions, UseExecutionAtResult } from "./types.mjs";
|
|
|
19
18
|
* // 3. 処理を実行するコンポーネント
|
|
20
19
|
* <WrappedImperativeComponent undoAt={undoAt} />
|
|
21
20
|
*/
|
|
22
|
-
export default function useExecutionAt<P = void>(
|
|
21
|
+
export default function useExecutionAt<P = void>(): UseExecutionAtResult<P>;
|
|
23
22
|
//#endregion
|
|
@@ -9,7 +9,6 @@ import { useCallback, useState } from "react";
|
|
|
9
9
|
* プロパティを通じて命令的コンポーネントのメソッドを実行する仕組みを提供する。
|
|
10
10
|
*
|
|
11
11
|
* @template P 実行時にExecution Requestプロパティに渡すペイロードの型
|
|
12
|
-
* @param options オプション
|
|
13
12
|
* @returns [request, execute]
|
|
14
13
|
* - `request`: 現在のリクエスト
|
|
15
14
|
* - `execute`: 新しいリクエストを発行する関数
|
|
@@ -21,10 +20,10 @@ import { useCallback, useState } from "react";
|
|
|
21
20
|
* // 3. 処理を実行するコンポーネント
|
|
22
21
|
* <WrappedImperativeComponent undoAt={undoAt} />
|
|
23
22
|
*/
|
|
24
|
-
function useExecutionAt(
|
|
23
|
+
function useExecutionAt() {
|
|
25
24
|
const [executionRequest, setExecutionRequest] = useState({
|
|
26
25
|
at: 0,
|
|
27
|
-
payload:
|
|
26
|
+
payload: void 0
|
|
28
27
|
});
|
|
29
28
|
return [executionRequest, useCallback((payload) => {
|
|
30
29
|
setExecutionRequest({
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
-
const
|
|
2
|
+
const require__internal__useExecutionHandler = require("../../_internal/_useExecutionHandler.cjs");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
|
|
5
5
|
//#region src/hooks/useExecutionEffect/useExecutionEffect.ts
|
|
6
6
|
/**
|
|
7
7
|
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
|
|
8
8
|
*
|
|
9
|
-
* `useExecutionAt` と対になる、受け取る側のフック。
|
|
9
|
+
* `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
|
|
10
10
|
* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
|
|
11
11
|
* 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
|
|
12
12
|
*
|
|
13
|
-
* -
|
|
14
|
-
* -
|
|
13
|
+
* - 印(`at`、または ExecutionMark の値)が変わったときだけ実行する(`payload` は比べない)
|
|
14
|
+
* - マウントしたときに渡されていた要求は実行しない(マウントしたときの印を基準にする)
|
|
15
|
+
* - 印が `0`(まだ要求していない)や undefined の場合は実行しない
|
|
16
|
+
* - ExecutionMark を受け取った場合、コールバックの payload は undefined
|
|
15
17
|
* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
|
|
16
18
|
* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
|
|
17
19
|
*
|
|
18
|
-
* @param request 受け取った Execution Request
|
|
20
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
19
21
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
20
22
|
* @example
|
|
21
23
|
* // 呼び出す側
|
|
@@ -27,7 +29,7 @@ let react = require("react");
|
|
|
27
29
|
* });
|
|
28
30
|
*/
|
|
29
31
|
function useExecutionEffect(request, callback) {
|
|
30
|
-
const handle =
|
|
32
|
+
const handle = require__internal__useExecutionHandler.default(request, callback);
|
|
31
33
|
(0, react.useEffect)(() => {
|
|
32
34
|
handle();
|
|
33
35
|
}, [handle]);
|
|
@@ -1,18 +1,22 @@
|
|
|
1
|
+
import { ExecutionMark } from "../../types.cjs";
|
|
1
2
|
import { ExecutionRequest } from "../useExecutionAt/types.cjs";
|
|
3
|
+
import "../useExecutionAt/index.cjs";
|
|
2
4
|
//#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
|
|
3
5
|
/**
|
|
4
6
|
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
|
|
5
7
|
*
|
|
6
|
-
* `useExecutionAt` と対になる、受け取る側のフック。
|
|
8
|
+
* `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
|
|
7
9
|
* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
|
|
8
10
|
* 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
|
|
9
11
|
*
|
|
10
|
-
* -
|
|
11
|
-
* -
|
|
12
|
+
* - 印(`at`、または ExecutionMark の値)が変わったときだけ実行する(`payload` は比べない)
|
|
13
|
+
* - マウントしたときに渡されていた要求は実行しない(マウントしたときの印を基準にする)
|
|
14
|
+
* - 印が `0`(まだ要求していない)や undefined の場合は実行しない
|
|
15
|
+
* - ExecutionMark を受け取った場合、コールバックの payload は undefined
|
|
12
16
|
* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
|
|
13
17
|
* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
|
|
14
18
|
*
|
|
15
|
-
* @param request 受け取った Execution Request
|
|
19
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
16
20
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
17
21
|
* @example
|
|
18
22
|
* // 呼び出す側
|
|
@@ -23,5 +27,5 @@ import { ExecutionRequest } from "../useExecutionAt/types.cjs";
|
|
|
23
27
|
* instance.undo(payload);
|
|
24
28
|
* });
|
|
25
29
|
*/
|
|
26
|
-
declare function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
30
|
+
declare function useExecutionEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
|
|
27
31
|
export = useExecutionEffect;
|
|
@@ -1,18 +1,22 @@
|
|
|
1
|
+
import { ExecutionMark } from "../../types.mjs";
|
|
1
2
|
import { ExecutionRequest } from "../useExecutionAt/types.mjs";
|
|
3
|
+
import "../useExecutionAt/index.mjs";
|
|
2
4
|
//#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
|
|
3
5
|
/**
|
|
4
6
|
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
|
|
5
7
|
*
|
|
6
|
-
* `useExecutionAt` と対になる、受け取る側のフック。
|
|
8
|
+
* `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
|
|
7
9
|
* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
|
|
8
10
|
* 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
|
|
9
11
|
*
|
|
10
|
-
* -
|
|
11
|
-
* -
|
|
12
|
+
* - 印(`at`、または ExecutionMark の値)が変わったときだけ実行する(`payload` は比べない)
|
|
13
|
+
* - マウントしたときに渡されていた要求は実行しない(マウントしたときの印を基準にする)
|
|
14
|
+
* - 印が `0`(まだ要求していない)や undefined の場合は実行しない
|
|
15
|
+
* - ExecutionMark を受け取った場合、コールバックの payload は undefined
|
|
12
16
|
* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
|
|
13
17
|
* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
|
|
14
18
|
*
|
|
15
|
-
* @param request 受け取った Execution Request
|
|
19
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
16
20
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
17
21
|
* @example
|
|
18
22
|
* // 呼び出す側
|
|
@@ -23,5 +27,5 @@ import { ExecutionRequest } from "../useExecutionAt/types.mjs";
|
|
|
23
27
|
* instance.undo(payload);
|
|
24
28
|
* });
|
|
25
29
|
*/
|
|
26
|
-
export default function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
30
|
+
export default function useExecutionEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
|
|
27
31
|
//#endregion
|
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
import useExecutionHandler from "../../
|
|
1
|
+
import useExecutionHandler from "../../_internal/_useExecutionHandler.mjs";
|
|
2
2
|
import { useEffect } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/hooks/useExecutionEffect/useExecutionEffect.ts
|
|
5
5
|
/**
|
|
6
6
|
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに処理を実行するフック
|
|
7
7
|
*
|
|
8
|
-
* `useExecutionAt` と対になる、受け取る側のフック。
|
|
8
|
+
* `useExecutionAt`・`useExecutionMark` と対になる、受け取る側のフック。
|
|
9
9
|
* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
|
|
10
10
|
* 処理は画面に表示した後(`useEffect`)に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
|
|
11
11
|
*
|
|
12
|
-
* -
|
|
13
|
-
* -
|
|
12
|
+
* - 印(`at`、または ExecutionMark の値)が変わったときだけ実行する(`payload` は比べない)
|
|
13
|
+
* - マウントしたときに渡されていた要求は実行しない(マウントしたときの印を基準にする)
|
|
14
|
+
* - 印が `0`(まだ要求していない)や undefined の場合は実行しない
|
|
15
|
+
* - ExecutionMark を受け取った場合、コールバックの payload は undefined
|
|
14
16
|
* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
|
|
15
17
|
* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
|
|
16
18
|
*
|
|
17
|
-
* @param request 受け取った Execution Request
|
|
19
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
18
20
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
19
21
|
* @example
|
|
20
22
|
* // 呼び出す側
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
-
const
|
|
2
|
+
const require__internal__useExecutionHandler = require("../../_internal/_useExecutionHandler.cjs");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
|
|
5
5
|
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
|
|
@@ -10,11 +10,11 @@ let react = require("react");
|
|
|
10
10
|
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
11
11
|
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
12
12
|
*
|
|
13
|
-
* @param request 受け取った Execution Request
|
|
13
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
14
14
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
15
15
|
*/
|
|
16
16
|
function useExecutionLayoutEffect(request, callback) {
|
|
17
|
-
const handle =
|
|
17
|
+
const handle = require__internal__useExecutionHandler.default(request, callback);
|
|
18
18
|
(0, react.useLayoutEffect)(() => {
|
|
19
19
|
handle();
|
|
20
20
|
}, [handle]);
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { ExecutionMark } from "../../types.cjs";
|
|
1
2
|
import { ExecutionRequest } from "../useExecutionAt/types.cjs";
|
|
3
|
+
import "../useExecutionAt/index.cjs";
|
|
2
4
|
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
|
|
3
5
|
/**
|
|
4
6
|
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
|
|
@@ -7,8 +9,8 @@ import { ExecutionRequest } from "../useExecutionAt/types.cjs";
|
|
|
7
9
|
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
8
10
|
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
9
11
|
*
|
|
10
|
-
* @param request 受け取った Execution Request
|
|
12
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
11
13
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
12
14
|
*/
|
|
13
|
-
declare function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
15
|
+
declare function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
|
|
14
16
|
export = useExecutionLayoutEffect;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { ExecutionMark } from "../../types.mjs";
|
|
1
2
|
import { ExecutionRequest } from "../useExecutionAt/types.mjs";
|
|
3
|
+
import "../useExecutionAt/index.mjs";
|
|
2
4
|
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.d.ts
|
|
3
5
|
/**
|
|
4
6
|
* Execution Request プロパティ(xxxAt)を受け取り、要求があったときに画面に表示する前に処理を実行するフック
|
|
@@ -7,8 +9,8 @@ import { ExecutionRequest } from "../useExecutionAt/types.mjs";
|
|
|
7
9
|
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
8
10
|
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
9
11
|
*
|
|
10
|
-
* @param request 受け取った Execution Request
|
|
12
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
11
13
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
12
14
|
*/
|
|
13
|
-
export default function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
|
|
15
|
+
export default function useExecutionLayoutEffect<P = void>(request: ExecutionRequest<P> | ExecutionMark | undefined, callback: (payload: P | undefined) => void): void;
|
|
14
16
|
//#endregion
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import useExecutionHandler from "../../
|
|
1
|
+
import useExecutionHandler from "../../_internal/_useExecutionHandler.mjs";
|
|
2
2
|
import { useLayoutEffect } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.ts
|
|
@@ -9,7 +9,7 @@ import { useLayoutEffect } from "react";
|
|
|
9
9
|
* スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使う。
|
|
10
10
|
* 要求の扱いは `useExecutionEffect` と同じ。
|
|
11
11
|
*
|
|
12
|
-
* @param request 受け取った Execution Request
|
|
12
|
+
* @param request 受け取った Execution Request(`useExecutionAt` の値、または payload の無い ExecutionMark)。undefined の場合は要求なし
|
|
13
13
|
* @param callback 要求があったときに実行する処理。要求の payload を受け取る
|
|
14
14
|
*/
|
|
15
15
|
function useExecutionLayoutEffect(request, callback) {
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require_hooks_useExecutionMark_useExecutionMark = require("./useExecutionMark.cjs");
|
|
3
|
+
|
|
4
|
+
exports.default = require_hooks_useExecutionMark_useExecutionMark.default;
|
|
5
|
+
exports.useExecutionMark = require_hooks_useExecutionMark_useExecutionMark.default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
2
|
+
const require_utils_markAt_markAt = require("../../utils/markAt/markAt.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
|
|
5
|
+
//#region src/hooks/useExecutionMark/useExecutionMark.ts
|
|
6
|
+
/**
|
|
7
|
+
* payload の無い Execution Request(実行の印)と、要求する関数を返すフック
|
|
8
|
+
*
|
|
9
|
+
* `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
|
|
10
|
+
* 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
|
|
11
|
+
*
|
|
12
|
+
* - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
|
|
13
|
+
* - `execute` の参照は常に同じ
|
|
14
|
+
*
|
|
15
|
+
* @returns [mark, execute]
|
|
16
|
+
* @example
|
|
17
|
+
* const [focusAt, focus] = useExecutionMark();
|
|
18
|
+
* <button onClick={focus}>Focus</button>
|
|
19
|
+
* <WrappedImperativeComponent focusAt={focusAt} />
|
|
20
|
+
*/
|
|
21
|
+
function useExecutionMark() {
|
|
22
|
+
const [mark, setMark] = (0, react.useState)(0);
|
|
23
|
+
return [mark, (0, react.useCallback)(() => {
|
|
24
|
+
setMark(require_utils_markAt_markAt.default());
|
|
25
|
+
}, [])];
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
//#endregion
|
|
29
|
+
exports.default = useExecutionMark;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { UseExecutionMarkResult } from "./types.cjs";
|
|
2
|
+
//#region src/hooks/useExecutionMark/useExecutionMark.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* payload の無い Execution Request(実行の印)と、要求する関数を返すフック
|
|
5
|
+
*
|
|
6
|
+
* `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
|
|
7
|
+
* 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
|
|
8
|
+
*
|
|
9
|
+
* - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
|
|
10
|
+
* - `execute` の参照は常に同じ
|
|
11
|
+
*
|
|
12
|
+
* @returns [mark, execute]
|
|
13
|
+
* @example
|
|
14
|
+
* const [focusAt, focus] = useExecutionMark();
|
|
15
|
+
* <button onClick={focus}>Focus</button>
|
|
16
|
+
* <WrappedImperativeComponent focusAt={focusAt} />
|
|
17
|
+
*/
|
|
18
|
+
declare function useExecutionMark(): UseExecutionMarkResult;
|
|
19
|
+
export = useExecutionMark;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { UseExecutionMarkResult } from "./types.mjs";
|
|
2
|
+
//#region src/hooks/useExecutionMark/useExecutionMark.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* payload の無い Execution Request(実行の印)と、要求する関数を返すフック
|
|
5
|
+
*
|
|
6
|
+
* `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
|
|
7
|
+
* 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
|
|
8
|
+
*
|
|
9
|
+
* - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
|
|
10
|
+
* - `execute` の参照は常に同じ
|
|
11
|
+
*
|
|
12
|
+
* @returns [mark, execute]
|
|
13
|
+
* @example
|
|
14
|
+
* const [focusAt, focus] = useExecutionMark();
|
|
15
|
+
* <button onClick={focus}>Focus</button>
|
|
16
|
+
* <WrappedImperativeComponent focusAt={focusAt} />
|
|
17
|
+
*/
|
|
18
|
+
export default function useExecutionMark(): UseExecutionMarkResult;
|
|
19
|
+
//#endregion
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import markAt from "../../utils/markAt/markAt.mjs";
|
|
2
|
+
import { useCallback, useState } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/hooks/useExecutionMark/useExecutionMark.ts
|
|
5
|
+
/**
|
|
6
|
+
* payload の無い Execution Request(実行の印)と、要求する関数を返すフック
|
|
7
|
+
*
|
|
8
|
+
* `useExecutionAt` の payload を持たない版。命令的なコンポーネントの `focus()`・`reset()` のような、
|
|
9
|
+
* 引数の要らないメソッドを、プロパティを通じて実行する場合に使う。
|
|
10
|
+
*
|
|
11
|
+
* - 印は初期状態では `0`(まだ要求していない)で、`execute` を呼ぶたびに `markAt()` で作った新しい値になる
|
|
12
|
+
* - `execute` の参照は常に同じ
|
|
13
|
+
*
|
|
14
|
+
* @returns [mark, execute]
|
|
15
|
+
* @example
|
|
16
|
+
* const [focusAt, focus] = useExecutionMark();
|
|
17
|
+
* <button onClick={focus}>Focus</button>
|
|
18
|
+
* <WrappedImperativeComponent focusAt={focusAt} />
|
|
19
|
+
*/
|
|
20
|
+
function useExecutionMark() {
|
|
21
|
+
const [mark, setMark] = useState(0);
|
|
22
|
+
return [mark, useCallback(() => {
|
|
23
|
+
setMark(markAt());
|
|
24
|
+
}, [])];
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
//#endregion
|
|
28
|
+
export { useExecutionMark as default };
|
package/index.cjs
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_hooks_useLatestRef_useLatestRef = require("./hooks/useLatestRef/useLatestRef.cjs");
|
|
3
|
+
const require_hooks_useChangeEffect_useChangeEffect = require("./hooks/useChangeEffect/useChangeEffect.cjs");
|
|
4
|
+
const require_hooks_useChangeLayoutEffect_useChangeLayoutEffect = require("./hooks/useChangeLayoutEffect/useChangeLayoutEffect.cjs");
|
|
2
5
|
const require_utils_setRefCurrent_setRefCurrent = require("./utils/setRefCurrent/setRefCurrent.cjs");
|
|
3
6
|
const require_hooks_useStableLength_useStableLength = require("./hooks/useStableLength/useStableLength.cjs");
|
|
4
7
|
const require_hooks_useCombinedRefs_useCombinedRefs = require("./hooks/useCombinedRefs/useCombinedRefs.cjs");
|
|
5
8
|
const require_hooks_useConstant_useConstant = require("./hooks/useConstant/useConstant.cjs");
|
|
6
9
|
const require_utils_markAt_markAt = require("./utils/markAt/markAt.cjs");
|
|
7
10
|
const require_hooks_useExecutionAt_useExecutionAt = require("./hooks/useExecutionAt/useExecutionAt.cjs");
|
|
8
|
-
const require_hooks_useLatestRef_useLatestRef = require("./hooks/useLatestRef/useLatestRef.cjs");
|
|
9
11
|
const require_hooks_useExecutionEffect_useExecutionEffect = require("./hooks/useExecutionEffect/useExecutionEffect.cjs");
|
|
10
12
|
const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs");
|
|
13
|
+
const require_hooks_useExecutionMark_useExecutionMark = require("./hooks/useExecutionMark/useExecutionMark.cjs");
|
|
11
14
|
const require_hooks_useIsHydrated_useIsHydrated = require("./hooks/useIsHydrated/useIsHydrated.cjs");
|
|
12
15
|
const require_hooks_useIsMounted_useIsMounted = require("./hooks/useIsMounted/useIsMounted.cjs");
|
|
13
16
|
const require_hooks_usePreviousValue_usePreviousValue = require("./hooks/usePreviousValue/usePreviousValue.cjs");
|
|
@@ -34,11 +37,14 @@ exports.markAt = require_utils_markAt_markAt.default;
|
|
|
34
37
|
exports.setRefCurrent = require_utils_setRefCurrent_setRefCurrent.default;
|
|
35
38
|
exports.transformContent = require_utils_transformContent_transformContent.default;
|
|
36
39
|
exports.transformElement = require_utils_transformElement_transformElement.default;
|
|
40
|
+
exports.useChangeEffect = require_hooks_useChangeEffect_useChangeEffect.default;
|
|
41
|
+
exports.useChangeLayoutEffect = require_hooks_useChangeLayoutEffect_useChangeLayoutEffect.default;
|
|
37
42
|
exports.useCombinedRefs = require_hooks_useCombinedRefs_useCombinedRefs.default;
|
|
38
43
|
exports.useConstant = require_hooks_useConstant_useConstant.default;
|
|
39
44
|
exports.useExecutionAt = require_hooks_useExecutionAt_useExecutionAt.default;
|
|
40
45
|
exports.useExecutionEffect = require_hooks_useExecutionEffect_useExecutionEffect.default;
|
|
41
46
|
exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
|
|
47
|
+
exports.useExecutionMark = require_hooks_useExecutionMark_useExecutionMark.default;
|
|
42
48
|
exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
|
|
43
49
|
exports.useIsMounted = require_hooks_useIsMounted_useIsMounted.default;
|
|
44
50
|
exports.useLatestRef = require_hooks_useLatestRef_useLatestRef.default;
|
package/index.d.cts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import { ExecutionFunction, ExecutionRequest,
|
|
1
|
+
import { ChangeDependencies } from "./hooks/useChangeEffect/types.cjs";
|
|
2
|
+
import { CSSPropertiesWithVars, ExecutionMark } from "./types.cjs";
|
|
3
|
+
import { ExecutionFunction, ExecutionRequest, UseExecutionAtResult } from "./hooks/useExecutionAt/types.cjs";
|
|
4
4
|
import useExecutionAt from "./hooks/useExecutionAt/useExecutionAt.cjs";
|
|
5
|
+
import useChangeEffect from "./hooks/useChangeEffect/useChangeEffect.cjs";
|
|
6
|
+
import useChangeLayoutEffect from "./hooks/useChangeLayoutEffect/useChangeLayoutEffect.cjs";
|
|
5
7
|
import useCombinedRefs from "./hooks/useCombinedRefs/useCombinedRefs.cjs";
|
|
6
8
|
import useConstant from "./hooks/useConstant/useConstant.cjs";
|
|
7
9
|
import useExecutionEffect from "./hooks/useExecutionEffect/useExecutionEffect.cjs";
|
|
8
10
|
import useExecutionLayoutEffect from "./hooks/useExecutionLayoutEffect/useExecutionLayoutEffect.cjs";
|
|
11
|
+
import { UseExecutionMarkResult } from "./hooks/useExecutionMark/types.cjs";
|
|
12
|
+
import useExecutionMark from "./hooks/useExecutionMark/useExecutionMark.cjs";
|
|
9
13
|
import useIsHydrated from "./hooks/useIsHydrated/useIsHydrated.cjs";
|
|
10
14
|
import useIsMounted from "./hooks/useIsMounted/useIsMounted.cjs";
|
|
11
15
|
import { LatestRef } from "./hooks/useLatestRef/types.cjs";
|
|
@@ -16,7 +20,6 @@ import useRerender from "./hooks/useRerender/useRerender.cjs";
|
|
|
16
20
|
import useStableCallback from "./hooks/useStableCallback/useStableCallback.cjs";
|
|
17
21
|
import useStableLength from "./hooks/useStableLength/useStableLength.cjs";
|
|
18
22
|
import "./hooks/index.cjs";
|
|
19
|
-
import { CSSPropertiesWithVars } from "./types.cjs";
|
|
20
23
|
import { AppliedProps, SkippedDefaults } from "./utils/applyDefaultProps/types.cjs";
|
|
21
24
|
import applyDefaultProps from "./utils/applyDefaultProps/applyDefaultProps.cjs";
|
|
22
25
|
import ensureComponent from "./utils/ensureComponent/ensureComponent.cjs";
|
|
@@ -25,8 +28,9 @@ import extendElement from "./utils/extendElement/extendElement.cjs";
|
|
|
25
28
|
import forEachContent from "./utils/forEachContent/forEachContent.cjs";
|
|
26
29
|
import forEachElement from "./utils/forEachElement/forEachElement.cjs";
|
|
27
30
|
import getComponentName from "./utils/getComponentName/getComponentName.cjs";
|
|
31
|
+
import markAt from "./utils/markAt/markAt.cjs";
|
|
28
32
|
import setRefCurrent from "./utils/setRefCurrent/setRefCurrent.cjs";
|
|
29
33
|
import transformContent from "./utils/transformContent/transformContent.cjs";
|
|
30
34
|
import transformElement from "./utils/transformElement/transformElement.cjs";
|
|
31
35
|
import "./utils/index.cjs";
|
|
32
|
-
export { type AppliedProps, type CSSPropertiesWithVars, type ExecutionFunction, type
|
|
36
|
+
export { type AppliedProps, type CSSPropertiesWithVars, type ChangeDependencies, type ExecutionFunction, type ExecutionMark, type ExecutionRequest, type ExtendableProps, type LatestRef, type SkippedDefaults, type UseExecutionAtResult, type UseExecutionMarkResult, type UsePreviousValueOptions, applyDefaultProps, ensureComponent, extendElement, forEachContent, forEachElement, getComponentName, markAt, setRefCurrent, transformContent, transformElement, useChangeEffect, useChangeLayoutEffect, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useExecutionMark, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };
|