@intlayer/editor-react 5.0.2 → 5.0.3

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.
@@ -28,7 +28,10 @@ var import_useCrossFrameMessageListener = require('./useCrossFrameMessageListene
28
28
  const resolveState = (state, prevState) => typeof state === "function" ? state(prevState) : state;
29
29
  const useCrossFrameState = (key, initialState, options) => {
30
30
  const { postMessage } = (0, import_CommunicatorContext.useCommunicator)();
31
- const { emit, receive } = options ?? { emit: true, receive: true };
31
+ const { emit, receive } = (0, import_react.useMemo)(
32
+ () => options ?? { emit: true, receive: true },
33
+ [options]
34
+ );
32
35
  const handleStateChange = (0, import_react.useCallback)(
33
36
  (state2, prevState) => {
34
37
  const resolvedState = resolveState(state2, prevState);
@@ -61,7 +64,7 @@ const useCrossFrameState = (key, initialState, options) => {
61
64
  if (receive && typeof postMessage === "function") {
62
65
  postMessage({ type: `${key}/get` });
63
66
  }
64
- }, [postMessage, receive, key]);
67
+ }, []);
65
68
  return (0, import_react.useMemo)(() => [state, setStateWrapper], [state, setStateWrapper]);
66
69
  };
67
70
  // Annotate the CommonJS export names for ESM import in node:
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n type Dispatch,\n type SetStateAction,\n} from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\nconst resolveState = <S,>(state?: SetStateAction<S>, prevState?: S): S =>\n typeof state === 'function'\n ? (state as (prevState?: S) => S)(prevState)\n : (state as S);\n\n/**\n * Configuration options for `useCrossFrameState`.\n * @typedef {Object} CrossFrameStateOptions\n * @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.\n * @property {boolean} [receive=true] - Whether to listen for state updates from other instances.\n */\n\n/**\n * useCrossFrameState\n *\n * This React hook synchronizes state across multiple instances (e.g., different iframes or windows).\n * It uses the `postMessage` API to communicate state changes and updates between instances.\n *\n * @template S - The type of the state.\n * @param {`${MessageKey}`} key - A unique identifier for the state to synchronize.\n * @param {S | (() => S)} [initialState] - The initial state value or a function to compute it lazily.\n * @param {CrossFrameStateOptions} [options] - Configuration options to control emitting and receiving messages.\n * - `emit` (default: true): Whether to broadcast state changes to other instances.\n * - `receive` (default: true): Whether to listen for state updates from other instances.\n *\n * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>] => {\n const { postMessage } = useCommunicator();\n\n const { emit, receive } = options ?? { emit: true, receive: true };\n\n const handleStateChange = useCallback(\n (state?: SetStateAction<S>, prevState?: S) => {\n // Initialize state from the provided initial value, if defined\n const resolvedState: S = resolveState(state, prevState);\n\n // Emit the initial state if `emit` is enabled and initial state is defined\n if (\n emit &&\n typeof postMessage === 'function' &&\n typeof resolvedState !== 'undefined'\n ) {\n postMessage({ type: `${key}/post`, data: resolvedState });\n }\n\n return resolvedState;\n },\n [postMessage, emit, key]\n );\n\n const [state, setState] = useState<S>(() => handleStateChange(initialState));\n\n /**\n * A wrapper function around the `setState` function to handle messaging efficiently.\n *\n * This approach has several advantages over using an additional `useEffect`:\n * - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,\n * it prevents the extra render cycle that would be triggered when using `useEffect`.\n * - **Consistency:** Ensures the message is emitted immediately when the state is updated,\n * avoiding potential delays caused by the asynchronous nature of `useEffect`.\n *\n * This function keeps the same API as `setState` and is memoized using `useCallback`\n * to prevent unnecessary re-renders of dependent components.\n *\n * @template S - The type of the state.\n * @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.\n * @returns {void}\n */\n const setStateWrapper: Dispatch<SetStateAction<S>> = useCallback(\n (valueOrUpdater) =>\n setState((prevState) => handleStateChange(valueOrUpdater, prevState)),\n [handleStateChange]\n );\n\n /**\n * Listen for messages with the specified key and update the state accordingly.\n */\n useCrossFrameMessageListener<S>(\n `${key}/post`,\n // Only activate the state listener if the `receive` option is true\n receive ? setState : undefined\n );\n\n /**\n * Listen for messages request to get the state content and send it back.\n */\n useCrossFrameMessageListener<S>(\n `${key}/get`,\n // Only activate the state listener if the `emit` option is true\n emit\n ? () => {\n if (typeof state === 'undefined') return;\n\n postMessage({ type: `${key}/post`, data: state });\n }\n : undefined\n );\n\n useEffect(() => {\n // If the component is mounted and the hook in receive mode,\n // Request the state from the other instance\n if (receive && typeof postMessage === 'function') {\n postMessage({ type: `${key}/get` });\n }\n }, [postMessage, receive, key]);\n\n // Return the useState state and setter\n return useMemo(() => [state, setStateWrapper], [state, setStateWrapper]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAOO;AACP,iCAAgC;AAEhC,0CAA6C;AAO7C,MAAM,eAAe,CAAK,OAA2B,cACnD,OAAO,UAAU,aACZ,MAA+B,SAAS,IACxC;AAwBA,MAAM,qBAAqB,CAChC,KACA,cACA,YACqC;AACrC,QAAM,EAAE,YAAY,QAAI,4CAAgB;AAExC,QAAM,EAAE,MAAM,QAAQ,IAAI,WAAW,EAAE,MAAM,MAAM,SAAS,KAAK;AAEjE,QAAM,wBAAoB;AAAA,IACxB,CAACA,QAA2B,cAAkB;AAE5C,YAAM,gBAAmB,aAAaA,QAAO,SAAS;AAGtD,UACE,QACA,OAAO,gBAAgB,cACvB,OAAO,kBAAkB,aACzB;AACA,oBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,cAAc,CAAC;AAAA,MAC1D;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,aAAa,MAAM,GAAG;AAAA,EACzB;AAEA,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAY,MAAM,kBAAkB,YAAY,CAAC;AAkB3E,QAAM,sBAA+C;AAAA,IACnD,CAAC,mBACC,SAAS,CAAC,cAAc,kBAAkB,gBAAgB,SAAS,CAAC;AAAA,IACtE,CAAC,iBAAiB;AAAA,EACpB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,UAAU,WAAW;AAAA,EACvB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,OACI,MAAM;AACJ,UAAI,OAAO,UAAU,YAAa;AAElC,kBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,MAAM,CAAC;AAAA,IAClD,IACA;AAAA,EACN;AAEA,8BAAU,MAAM;AAGd,QAAI,WAAW,OAAO,gBAAgB,YAAY;AAChD,kBAAY,EAAE,MAAM,GAAG,GAAG,OAAO,CAAC;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,GAAG,CAAC;AAG9B,aAAO,sBAAQ,MAAM,CAAC,OAAO,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC;AACzE;","names":["state"]}
1
+ {"version":3,"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n type Dispatch,\n type SetStateAction,\n} from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\nconst resolveState = <S,>(state?: SetStateAction<S>, prevState?: S): S =>\n typeof state === 'function'\n ? (state as (prevState?: S) => S)(prevState)\n : (state as S);\n\n/**\n * Configuration options for `useCrossFrameState`.\n * @typedef {Object} CrossFrameStateOptions\n * @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.\n * @property {boolean} [receive=true] - Whether to listen for state updates from other instances.\n */\n\n/**\n * useCrossFrameState\n *\n * This React hook synchronizes state across multiple instances (e.g., different iframes or windows).\n * It uses the `postMessage` API to communicate state changes and updates between instances.\n *\n * @template S - The type of the state.\n * @param {`${MessageKey}`} key - A unique identifier for the state to synchronize.\n * @param {S | (() => S)} [initialState] - The initial state value or a function to compute it lazily.\n * @param {CrossFrameStateOptions} [options] - Configuration options to control emitting and receiving messages.\n * - `emit` (default: true): Whether to broadcast state changes to other instances.\n * - `receive` (default: true): Whether to listen for state updates from other instances.\n *\n * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>] => {\n const { postMessage } = useCommunicator();\n\n const { emit, receive } = useMemo(\n () => options ?? { emit: true, receive: true },\n [options]\n );\n\n const handleStateChange = useCallback(\n (state?: SetStateAction<S>, prevState?: S) => {\n // Initialize state from the provided initial value, if defined\n const resolvedState: S = resolveState(state, prevState);\n\n // Emit the initial state if `emit` is enabled and initial state is defined\n if (\n emit &&\n typeof postMessage === 'function' &&\n typeof resolvedState !== 'undefined'\n ) {\n postMessage({ type: `${key}/post`, data: resolvedState });\n }\n\n return resolvedState;\n },\n [postMessage, emit, key]\n );\n\n const [state, setState] = useState<S>(() => handleStateChange(initialState));\n\n /**\n * A wrapper function around the `setState` function to handle messaging efficiently.\n *\n * This approach has several advantages over using an additional `useEffect`:\n * - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,\n * it prevents the extra render cycle that would be triggered when using `useEffect`.\n * - **Consistency:** Ensures the message is emitted immediately when the state is updated,\n * avoiding potential delays caused by the asynchronous nature of `useEffect`.\n *\n * This function keeps the same API as `setState` and is memoized using `useCallback`\n * to prevent unnecessary re-renders of dependent components.\n *\n * @template S - The type of the state.\n * @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.\n * @returns {void}\n */\n const setStateWrapper: Dispatch<SetStateAction<S>> = useCallback(\n (valueOrUpdater) =>\n setState((prevState) => handleStateChange(valueOrUpdater, prevState)),\n [handleStateChange]\n );\n\n /**\n * Listen for messages with the specified key and update the state accordingly.\n */\n useCrossFrameMessageListener<S>(\n `${key}/post`,\n // Only activate the state listener if the `receive` option is true\n receive ? setState : undefined\n );\n\n /**\n * Listen for messages request to get the state content and send it back.\n */\n useCrossFrameMessageListener<S>(\n `${key}/get`,\n // Only activate the state listener if the `emit` option is true\n emit\n ? () => {\n if (typeof state === 'undefined') return;\n\n postMessage({ type: `${key}/post`, data: state });\n }\n : undefined\n );\n\n useEffect(() => {\n // If the component is mounted and the hook in receive mode,\n // Request the state from the other instance\n if (receive && typeof postMessage === 'function') {\n postMessage({ type: `${key}/get` });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Return the useState state and setter\n return useMemo(() => [state, setStateWrapper], [state, setStateWrapper]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAOO;AACP,iCAAgC;AAEhC,0CAA6C;AAO7C,MAAM,eAAe,CAAK,OAA2B,cACnD,OAAO,UAAU,aACZ,MAA+B,SAAS,IACxC;AAwBA,MAAM,qBAAqB,CAChC,KACA,cACA,YACqC;AACrC,QAAM,EAAE,YAAY,QAAI,4CAAgB;AAExC,QAAM,EAAE,MAAM,QAAQ,QAAI;AAAA,IACxB,MAAM,WAAW,EAAE,MAAM,MAAM,SAAS,KAAK;AAAA,IAC7C,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAACA,QAA2B,cAAkB;AAE5C,YAAM,gBAAmB,aAAaA,QAAO,SAAS;AAGtD,UACE,QACA,OAAO,gBAAgB,cACvB,OAAO,kBAAkB,aACzB;AACA,oBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,cAAc,CAAC;AAAA,MAC1D;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,aAAa,MAAM,GAAG;AAAA,EACzB;AAEA,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAY,MAAM,kBAAkB,YAAY,CAAC;AAkB3E,QAAM,sBAA+C;AAAA,IACnD,CAAC,mBACC,SAAS,CAAC,cAAc,kBAAkB,gBAAgB,SAAS,CAAC;AAAA,IACtE,CAAC,iBAAiB;AAAA,EACpB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,UAAU,WAAW;AAAA,EACvB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,OACI,MAAM;AACJ,UAAI,OAAO,UAAU,YAAa;AAElC,kBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,MAAM,CAAC;AAAA,IAClD,IACA;AAAA,EACN;AAEA,8BAAU,MAAM;AAGd,QAAI,WAAW,OAAO,gBAAgB,YAAY;AAChD,kBAAY,EAAE,MAAM,GAAG,GAAG,OAAO,CAAC;AAAA,IACpC;AAAA,EAEF,GAAG,CAAC,CAAC;AAGL,aAAO,sBAAQ,MAAM,CAAC,OAAO,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC;AACzE;","names":["state"]}
@@ -10,7 +10,10 @@ import { useCrossFrameMessageListener } from "./useCrossFrameMessageListener.mjs
10
10
  const resolveState = (state, prevState) => typeof state === "function" ? state(prevState) : state;
11
11
  const useCrossFrameState = (key, initialState, options) => {
12
12
  const { postMessage } = useCommunicator();
13
- const { emit, receive } = options ?? { emit: true, receive: true };
13
+ const { emit, receive } = useMemo(
14
+ () => options ?? { emit: true, receive: true },
15
+ [options]
16
+ );
14
17
  const handleStateChange = useCallback(
15
18
  (state2, prevState) => {
16
19
  const resolvedState = resolveState(state2, prevState);
@@ -43,7 +46,7 @@ const useCrossFrameState = (key, initialState, options) => {
43
46
  if (receive && typeof postMessage === "function") {
44
47
  postMessage({ type: `${key}/get` });
45
48
  }
46
- }, [postMessage, receive, key]);
49
+ }, []);
47
50
  return useMemo(() => [state, setStateWrapper], [state, setStateWrapper]);
48
51
  };
49
52
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n type Dispatch,\n type SetStateAction,\n} from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\nconst resolveState = <S,>(state?: SetStateAction<S>, prevState?: S): S =>\n typeof state === 'function'\n ? (state as (prevState?: S) => S)(prevState)\n : (state as S);\n\n/**\n * Configuration options for `useCrossFrameState`.\n * @typedef {Object} CrossFrameStateOptions\n * @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.\n * @property {boolean} [receive=true] - Whether to listen for state updates from other instances.\n */\n\n/**\n * useCrossFrameState\n *\n * This React hook synchronizes state across multiple instances (e.g., different iframes or windows).\n * It uses the `postMessage` API to communicate state changes and updates between instances.\n *\n * @template S - The type of the state.\n * @param {`${MessageKey}`} key - A unique identifier for the state to synchronize.\n * @param {S | (() => S)} [initialState] - The initial state value or a function to compute it lazily.\n * @param {CrossFrameStateOptions} [options] - Configuration options to control emitting and receiving messages.\n * - `emit` (default: true): Whether to broadcast state changes to other instances.\n * - `receive` (default: true): Whether to listen for state updates from other instances.\n *\n * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>] => {\n const { postMessage } = useCommunicator();\n\n const { emit, receive } = options ?? { emit: true, receive: true };\n\n const handleStateChange = useCallback(\n (state?: SetStateAction<S>, prevState?: S) => {\n // Initialize state from the provided initial value, if defined\n const resolvedState: S = resolveState(state, prevState);\n\n // Emit the initial state if `emit` is enabled and initial state is defined\n if (\n emit &&\n typeof postMessage === 'function' &&\n typeof resolvedState !== 'undefined'\n ) {\n postMessage({ type: `${key}/post`, data: resolvedState });\n }\n\n return resolvedState;\n },\n [postMessage, emit, key]\n );\n\n const [state, setState] = useState<S>(() => handleStateChange(initialState));\n\n /**\n * A wrapper function around the `setState` function to handle messaging efficiently.\n *\n * This approach has several advantages over using an additional `useEffect`:\n * - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,\n * it prevents the extra render cycle that would be triggered when using `useEffect`.\n * - **Consistency:** Ensures the message is emitted immediately when the state is updated,\n * avoiding potential delays caused by the asynchronous nature of `useEffect`.\n *\n * This function keeps the same API as `setState` and is memoized using `useCallback`\n * to prevent unnecessary re-renders of dependent components.\n *\n * @template S - The type of the state.\n * @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.\n * @returns {void}\n */\n const setStateWrapper: Dispatch<SetStateAction<S>> = useCallback(\n (valueOrUpdater) =>\n setState((prevState) => handleStateChange(valueOrUpdater, prevState)),\n [handleStateChange]\n );\n\n /**\n * Listen for messages with the specified key and update the state accordingly.\n */\n useCrossFrameMessageListener<S>(\n `${key}/post`,\n // Only activate the state listener if the `receive` option is true\n receive ? setState : undefined\n );\n\n /**\n * Listen for messages request to get the state content and send it back.\n */\n useCrossFrameMessageListener<S>(\n `${key}/get`,\n // Only activate the state listener if the `emit` option is true\n emit\n ? () => {\n if (typeof state === 'undefined') return;\n\n postMessage({ type: `${key}/post`, data: state });\n }\n : undefined\n );\n\n useEffect(() => {\n // If the component is mounted and the hook in receive mode,\n // Request the state from the other instance\n if (receive && typeof postMessage === 'function') {\n postMessage({ type: `${key}/get` });\n }\n }, [postMessage, receive, key]);\n\n // Return the useState state and setter\n return useMemo(() => [state, setStateWrapper], [state, setStateWrapper]);\n};\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,uBAAuB;AAEhC,SAAS,oCAAoC;AAO7C,MAAM,eAAe,CAAK,OAA2B,cACnD,OAAO,UAAU,aACZ,MAA+B,SAAS,IACxC;AAwBA,MAAM,qBAAqB,CAChC,KACA,cACA,YACqC;AACrC,QAAM,EAAE,YAAY,IAAI,gBAAgB;AAExC,QAAM,EAAE,MAAM,QAAQ,IAAI,WAAW,EAAE,MAAM,MAAM,SAAS,KAAK;AAEjE,QAAM,oBAAoB;AAAA,IACxB,CAACA,QAA2B,cAAkB;AAE5C,YAAM,gBAAmB,aAAaA,QAAO,SAAS;AAGtD,UACE,QACA,OAAO,gBAAgB,cACvB,OAAO,kBAAkB,aACzB;AACA,oBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,cAAc,CAAC;AAAA,MAC1D;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,aAAa,MAAM,GAAG;AAAA,EACzB;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAY,MAAM,kBAAkB,YAAY,CAAC;AAkB3E,QAAM,kBAA+C;AAAA,IACnD,CAAC,mBACC,SAAS,CAAC,cAAc,kBAAkB,gBAAgB,SAAS,CAAC;AAAA,IACtE,CAAC,iBAAiB;AAAA,EACpB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,UAAU,WAAW;AAAA,EACvB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,OACI,MAAM;AACJ,UAAI,OAAO,UAAU,YAAa;AAElC,kBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,MAAM,CAAC;AAAA,IAClD,IACA;AAAA,EACN;AAEA,YAAU,MAAM;AAGd,QAAI,WAAW,OAAO,gBAAgB,YAAY;AAChD,kBAAY,EAAE,MAAM,GAAG,GAAG,OAAO,CAAC;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,GAAG,CAAC;AAG9B,SAAO,QAAQ,MAAM,CAAC,OAAO,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC;AACzE;","names":["state"]}
1
+ {"version":3,"sources":["../../src/useCrossFrameState.tsx"],"sourcesContent":["'use client';\n\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n type Dispatch,\n type SetStateAction,\n} from 'react';\nimport { useCommunicator } from './CommunicatorContext';\nimport { type MessageKey } from './messageKey';\nimport { useCrossFrameMessageListener } from './useCrossFrameMessageListener';\n\nexport type CrossFrameStateOptions = {\n emit?: boolean;\n receive?: boolean;\n};\n\nconst resolveState = <S,>(state?: SetStateAction<S>, prevState?: S): S =>\n typeof state === 'function'\n ? (state as (prevState?: S) => S)(prevState)\n : (state as S);\n\n/**\n * Configuration options for `useCrossFrameState`.\n * @typedef {Object} CrossFrameStateOptions\n * @property {boolean} [emit=true] - Whether to broadcast state changes to other instances.\n * @property {boolean} [receive=true] - Whether to listen for state updates from other instances.\n */\n\n/**\n * useCrossFrameState\n *\n * This React hook synchronizes state across multiple instances (e.g., different iframes or windows).\n * It uses the `postMessage` API to communicate state changes and updates between instances.\n *\n * @template S - The type of the state.\n * @param {`${MessageKey}`} key - A unique identifier for the state to synchronize.\n * @param {S | (() => S)} [initialState] - The initial state value or a function to compute it lazily.\n * @param {CrossFrameStateOptions} [options] - Configuration options to control emitting and receiving messages.\n * - `emit` (default: true): Whether to broadcast state changes to other instances.\n * - `receive` (default: true): Whether to listen for state updates from other instances.\n *\n * @returns {[S, Dispatch<SetStateAction<S>>]} An array containing the current state and a setter function.\n */\nexport const useCrossFrameState = <S,>(\n key: `${MessageKey}`,\n initialState?: S | (() => S),\n options?: CrossFrameStateOptions\n): [S, Dispatch<SetStateAction<S>>] => {\n const { postMessage } = useCommunicator();\n\n const { emit, receive } = useMemo(\n () => options ?? { emit: true, receive: true },\n [options]\n );\n\n const handleStateChange = useCallback(\n (state?: SetStateAction<S>, prevState?: S) => {\n // Initialize state from the provided initial value, if defined\n const resolvedState: S = resolveState(state, prevState);\n\n // Emit the initial state if `emit` is enabled and initial state is defined\n if (\n emit &&\n typeof postMessage === 'function' &&\n typeof resolvedState !== 'undefined'\n ) {\n postMessage({ type: `${key}/post`, data: resolvedState });\n }\n\n return resolvedState;\n },\n [postMessage, emit, key]\n );\n\n const [state, setState] = useState<S>(() => handleStateChange(initialState));\n\n /**\n * A wrapper function around the `setState` function to handle messaging efficiently.\n *\n * This approach has several advantages over using an additional `useEffect`:\n * - **Avoid Redundant Re-renders:** By emitting the message directly within the `setState` logic,\n * it prevents the extra render cycle that would be triggered when using `useEffect`.\n * - **Consistency:** Ensures the message is emitted immediately when the state is updated,\n * avoiding potential delays caused by the asynchronous nature of `useEffect`.\n *\n * This function keeps the same API as `setState` and is memoized using `useCallback`\n * to prevent unnecessary re-renders of dependent components.\n *\n * @template S - The type of the state.\n * @param {SetStateAction<S>} valueOrUpdater - The new state or a function to produce it.\n * @returns {void}\n */\n const setStateWrapper: Dispatch<SetStateAction<S>> = useCallback(\n (valueOrUpdater) =>\n setState((prevState) => handleStateChange(valueOrUpdater, prevState)),\n [handleStateChange]\n );\n\n /**\n * Listen for messages with the specified key and update the state accordingly.\n */\n useCrossFrameMessageListener<S>(\n `${key}/post`,\n // Only activate the state listener if the `receive` option is true\n receive ? setState : undefined\n );\n\n /**\n * Listen for messages request to get the state content and send it back.\n */\n useCrossFrameMessageListener<S>(\n `${key}/get`,\n // Only activate the state listener if the `emit` option is true\n emit\n ? () => {\n if (typeof state === 'undefined') return;\n\n postMessage({ type: `${key}/post`, data: state });\n }\n : undefined\n );\n\n useEffect(() => {\n // If the component is mounted and the hook in receive mode,\n // Request the state from the other instance\n if (receive && typeof postMessage === 'function') {\n postMessage({ type: `${key}/get` });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Return the useState state and setter\n return useMemo(() => [state, setStateWrapper], [state, setStateWrapper]);\n};\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,uBAAuB;AAEhC,SAAS,oCAAoC;AAO7C,MAAM,eAAe,CAAK,OAA2B,cACnD,OAAO,UAAU,aACZ,MAA+B,SAAS,IACxC;AAwBA,MAAM,qBAAqB,CAChC,KACA,cACA,YACqC;AACrC,QAAM,EAAE,YAAY,IAAI,gBAAgB;AAExC,QAAM,EAAE,MAAM,QAAQ,IAAI;AAAA,IACxB,MAAM,WAAW,EAAE,MAAM,MAAM,SAAS,KAAK;AAAA,IAC7C,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAACA,QAA2B,cAAkB;AAE5C,YAAM,gBAAmB,aAAaA,QAAO,SAAS;AAGtD,UACE,QACA,OAAO,gBAAgB,cACvB,OAAO,kBAAkB,aACzB;AACA,oBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,cAAc,CAAC;AAAA,MAC1D;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,aAAa,MAAM,GAAG;AAAA,EACzB;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAY,MAAM,kBAAkB,YAAY,CAAC;AAkB3E,QAAM,kBAA+C;AAAA,IACnD,CAAC,mBACC,SAAS,CAAC,cAAc,kBAAkB,gBAAgB,SAAS,CAAC;AAAA,IACtE,CAAC,iBAAiB;AAAA,EACpB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,UAAU,WAAW;AAAA,EACvB;AAKA;AAAA,IACE,GAAG,GAAG;AAAA;AAAA,IAEN,OACI,MAAM;AACJ,UAAI,OAAO,UAAU,YAAa;AAElC,kBAAY,EAAE,MAAM,GAAG,GAAG,SAAS,MAAM,MAAM,CAAC;AAAA,IAClD,IACA;AAAA,EACN;AAEA,YAAU,MAAM;AAGd,QAAI,WAAW,OAAO,gBAAgB,YAAY;AAChD,kBAAY,EAAE,MAAM,GAAG,GAAG,OAAO,CAAC;AAAA,IACpC;AAAA,EAEF,GAAG,CAAC,CAAC;AAGL,SAAO,QAAQ,MAAM,CAAC,OAAO,eAAe,GAAG,CAAC,OAAO,eAAe,CAAC;AACzE;","names":["state"]}
@@ -1 +1 @@
1
- {"version":3,"file":"useCrossFrameState.d.ts","sourceRoot":"","sources":["../../src/useCrossFrameState.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAOF;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,OAC7B,GAAG,UAAU,EAAE,iBACL,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,YAClB,sBAAsB,KAC/B,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAkFjC,CAAC"}
1
+ {"version":3,"file":"useCrossFrameState.d.ts","sourceRoot":"","sources":["../../src/useCrossFrameState.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAOF;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,OAC7B,GAAG,UAAU,EAAE,iBACL,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,YAClB,sBAAsB,KAC/B,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAsFjC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intlayer/editor-react",
3
- "version": "5.0.2",
3
+ "version": "5.0.3",
4
4
  "private": false,
5
5
  "description": "Provides the states, contexts, hooks and components to interact with the Intlayer editor for a React application",
6
6
  "keywords": [
@@ -51,9 +51,9 @@
51
51
  "./package.json"
52
52
  ],
53
53
  "dependencies": {
54
- "@intlayer/config": "^5.0.2",
55
- "@intlayer/core": "5.0.2",
56
- "@intlayer/editor": "5.0.2"
54
+ "@intlayer/config": "^5.0.3",
55
+ "@intlayer/core": "5.0.3",
56
+ "@intlayer/editor": "5.0.3"
57
57
  },
58
58
  "devDependencies": {
59
59
  "@types/node": "^22.10.6",
@@ -75,9 +75,9 @@
75
75
  "peerDependencies": {
76
76
  "react": ">=16.0.0",
77
77
  "react-dom": ">=16.0.0",
78
- "@intlayer/config": "5.0.2",
79
- "@intlayer/core": "^5.0.2",
80
- "@intlayer/editor": "5.0.2"
78
+ "@intlayer/config": "5.0.3",
79
+ "@intlayer/editor": "5.0.3",
80
+ "@intlayer/core": "^5.0.3"
81
81
  },
82
82
  "engines": {
83
83
  "node": ">=14.18"