@contentful/experiences-sdk-react 1.30.0-dev-20250124T1739-560b81b.0 → 1.30.0-dev-20250128T1255-1f90987.0

package/dist/hooks/useDetectCanvasMode.js

@@ -6,7 +6,7 @@ import { sdkFeatures } from '../core/sdkFeatures.js';
 
 const useDetectCanvasMode = ({ isClientSide = false } = {}) => {
     const [mounted, setMounted] = useState(false);
-    const recievedModeMessage = useRef(false);
+    const receivedModeMessage = useRef(false);
     const [mode, setMode] = useState(() => {
         // if we are client side and running in an iframe, then initialize to read only,
         // Editor mode can be requested later.
@@ -29,7 +29,7 @@ const useDetectCanvasMode = ({ isClientSide = false } = {}) => {
         }
         const isEditorMode = eventData.eventType === INCOMING_EVENTS.RequestEditorMode;
         const mode = isEditorMode ? StudioCanvasMode.EDITOR : StudioCanvasMode.READ_ONLY;
-        recievedModeMessage.current = true;
+        receivedModeMessage.current = true;
         setMode(mode);
         if (typeof window !== 'undefined') {
             // Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made
@@ -43,7 +43,7 @@ const useDetectCanvasMode = ({ isClientSide = false } = {}) => {
     }, []);
     useEffect(() => {
         const handleHandshakeTimeout = () => {
-            if (!recievedModeMessage.current) {
+            if (!receivedModeMessage.current) {
                 setMode(StudioCanvasMode.NONE);
             }
         };
@@ -54,14 +54,19 @@ const useDetectCanvasMode = ({ isClientSide = false } = {}) => {
                 window.addEventListener('message', onMessage);
                 sendMessage(OUTGOING_EVENTS.Connected, undefined);
                 sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);
-                setTimeout(handleHandshakeTimeout, 100);
+                // FIXME: This causes a race condition by setting the mode sometimes to NONE when
+                // reloading the canvas due to a save event.
+                const handshakeTimeout = setTimeout(handleHandshakeTimeout, 100);
+                return () => {
+                    window.removeEventListener('message', onMessage);
+                    clearTimeout(handshakeTimeout);
+                };
             }
         }
         else {
             setMounted(true);
         }
-        return () => window.removeEventListener('message', onMessage);
-    }, [mounted, onMessage]);
+    }, [mode, mounted, onMessage]);
     return mode;
 };
 function inIframe() {

package/dist/hooks/useDetectCanvasMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDetectCanvasMode.js","sources":["../../../src/hooks/useDetectCanvasMode.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  doesMismatchMessageSchema,\n  sendMessage,\n  tryParseMessage,\n} from '@contentful/experiences-core';\nimport {\n  INCOMING_EVENTS,\n  OUTGOING_EVENTS,\n  StudioCanvasMode,\n} from '@contentful/experiences-core/constants';\nimport { sdkFeatures } from '../core/sdkFeatures';\n\ntype useDetectCanvasModeArgs = {\n  /** If running from a known client side only situation (ie: useFetchBySlug),\n   * set this to true to kick in editor mode check sooner (which avoids a render cycle) */\n  isClientSide?: boolean;\n};\n\nexport const useDetectCanvasMode = ({ isClientSide = false }: useDetectCanvasModeArgs = {}) => {\n  const [mounted, setMounted] = useState(false);\n  const recievedModeMessage = useRef(false);\n  const [mode, setMode] = useState<StudioCanvasMode>(() => {\n    // if we are client side and running in an iframe, then initialize to read only,\n    // Editor mode can be requested later.\n    if (isClientSide && inIframe()) {\n      return StudioCanvasMode.READ_ONLY;\n    } else {\n      return StudioCanvasMode.NONE;\n    }\n  });\n\n  const onMessage = useCallback((event: MessageEvent) => {\n    if (doesMismatchMessageSchema(event)) {\n      return;\n    }\n    const eventData = tryParseMessage(event);\n    const isRequestingCanvasMode =\n      eventData.eventType === INCOMING_EVENTS.RequestEditorMode ||\n      eventData.eventType === INCOMING_EVENTS.RequestReadOnlyMode;\n\n    if (!isRequestingCanvasMode) {\n      return;\n    }\n\n    const isEditorMode = eventData.eventType === INCOMING_EVENTS.RequestEditorMode;\n    const mode = isEditorMode ? StudioCanvasMode.EDITOR : StudioCanvasMode.READ_ONLY;\n\n    recievedModeMessage.current = true;\n    setMode(mode);\n\n    if (typeof window !== 'undefined') {\n      // Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made\n      if (!window.__EB__) {\n        window.__EB__ = {};\n      }\n      window.__EB__.isReadOnlyMode = !isEditorMode;\n      window.__EB__.isEditorMode = isEditorMode;\n    }\n\n    window.removeEventListener('message', onMessage);\n  }, []);\n\n  useEffect(() => {\n    const handleHandshakeTimeout = () => {\n      if (!recievedModeMessage.current) {\n        setMode(StudioCanvasMode.NONE);\n      }\n    };\n\n    // Only run check after component is mounted on the client to avoid hydration ssr issues\n    if (mounted) {\n      // Double check if we are in editor mode by listening to postMessage events\n      if (typeof window !== 'undefined') {\n        window.addEventListener('message', onMessage);\n        sendMessage(OUTGOING_EVENTS.Connected, undefined);\n        sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);\n\n        setTimeout(handleHandshakeTimeout, 100);\n      }\n    } else {\n      setMounted(true);\n    }\n\n    return () => window.removeEventListener('message', onMessage);\n  }, [mounted, onMessage]);\n\n  return mode;\n};\n\nfunction inIframe() {\n  try {\n    return window.self !== window.top;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAoBO;;AAEL;;;;AAIE;;;;;;AAKF;AAEA;AACE;;;AAGA;;AAGE;;;;;AAOF;AAEA;;AAGA;;AAEE;AACE;;AAEF;AACA;;AAGF;;;;AAKE;AACE;;AAEJ;;;;AAKE;AACE;AACA;AACA;AAEA;;;;;;;AAON;AAEA;AACF;AAEA;AACE;AACE;;;AAEA;;AAEJ;;"}
+{"version":3,"file":"useDetectCanvasMode.js","sources":["../../../src/hooks/useDetectCanvasMode.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  doesMismatchMessageSchema,\n  sendMessage,\n  tryParseMessage,\n} from '@contentful/experiences-core';\nimport {\n  INCOMING_EVENTS,\n  OUTGOING_EVENTS,\n  StudioCanvasMode,\n} from '@contentful/experiences-core/constants';\nimport { sdkFeatures } from '../core/sdkFeatures';\n\ntype useDetectCanvasModeArgs = {\n  /** If running from a known client side only situation (ie: useFetchBySlug),\n   * set this to true to kick in editor mode check sooner (which avoids a render cycle) */\n  isClientSide?: boolean;\n};\n\nexport const useDetectCanvasMode = ({ isClientSide = false }: useDetectCanvasModeArgs = {}) => {\n  const [mounted, setMounted] = useState(false);\n  const receivedModeMessage = useRef(false);\n  const [mode, setMode] = useState<StudioCanvasMode>(() => {\n    // if we are client side and running in an iframe, then initialize to read only,\n    // Editor mode can be requested later.\n    if (isClientSide && inIframe()) {\n      return StudioCanvasMode.READ_ONLY;\n    } else {\n      return StudioCanvasMode.NONE;\n    }\n  });\n\n  const onMessage = useCallback((event: MessageEvent) => {\n    if (doesMismatchMessageSchema(event)) {\n      return;\n    }\n    const eventData = tryParseMessage(event);\n    const isRequestingCanvasMode =\n      eventData.eventType === INCOMING_EVENTS.RequestEditorMode ||\n      eventData.eventType === INCOMING_EVENTS.RequestReadOnlyMode;\n\n    if (!isRequestingCanvasMode) {\n      return;\n    }\n\n    const isEditorMode = eventData.eventType === INCOMING_EVENTS.RequestEditorMode;\n    const mode = isEditorMode ? StudioCanvasMode.EDITOR : StudioCanvasMode.READ_ONLY;\n\n    receivedModeMessage.current = true;\n    setMode(mode);\n\n    if (typeof window !== 'undefined') {\n      // Once we definitely know that we are in editor mode, we set this flag so future postMessage connect calls are not made\n      if (!window.__EB__) {\n        window.__EB__ = {};\n      }\n      window.__EB__.isReadOnlyMode = !isEditorMode;\n      window.__EB__.isEditorMode = isEditorMode;\n    }\n\n    window.removeEventListener('message', onMessage);\n  }, []);\n\n  useEffect(() => {\n    const handleHandshakeTimeout = () => {\n      if (!receivedModeMessage.current) {\n        setMode(StudioCanvasMode.NONE);\n      }\n    };\n\n    // Only run check after component is mounted on the client to avoid hydration ssr issues\n    if (mounted) {\n      // Double check if we are in editor mode by listening to postMessage events\n      if (typeof window !== 'undefined') {\n        window.addEventListener('message', onMessage);\n        sendMessage(OUTGOING_EVENTS.Connected, undefined);\n        sendMessage(OUTGOING_EVENTS.SDKFeatures, sdkFeatures);\n\n        // FIXME: This causes a race condition by setting the mode sometimes to NONE when\n        // reloading the canvas due to a save event.\n        const handshakeTimeout = setTimeout(handleHandshakeTimeout, 100);\n\n        return () => {\n          window.removeEventListener('message', onMessage);\n          clearTimeout(handshakeTimeout);\n        };\n      }\n    } else {\n      setMounted(true);\n    }\n  }, [mode, mounted, onMessage]);\n\n  return mode;\n};\n\nfunction inIframe() {\n  try {\n    return window.self !== window.top;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAoBO;;AAEL;;;;AAIE;;;;;;AAKF;AAEA;AACE;;;AAGA;;AAGE;;;;;AAOF;AAEA;;AAGA;;AAEE;AACE;;AAEF;AACA;;AAGF;;;;AAKE;AACE;;AAEJ;;;;AAKE;AACE;AACA;AACA;;;;AAMA;AACE;;AAEF;;;;;;;AAON;AACF;AAEA;AACE;AACE;;;AAEA;;AAEJ;;"}

package/dist/hooks/useFetchByBase.js

@@ -27,6 +27,16 @@ const useFetchByBase = (fetchMethod, mode) => {
             }
         })();
     }, [fetchMethod, mode]);
+    // When a save event caused a canvas reload, the `receivedModeMessage` might time out and set the
+    // mode temporarily to NONE. If it's set to a valid mode afterward, we ignore the fetch result.
+    if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {
+        return {
+            error: undefined,
+            experience: undefined,
+            isLoading: false,
+            mode,
+        };
+    }
     return {
         error,
         experience,

package/dist/hooks/useFetchByBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchByBase.js","sources":["../../../src/hooks/useFetchByBase.ts"],"sourcesContent":["'use client';\nimport { useEffect, useState } from 'react';\nimport { EntityStore } from '@contentful/experiences-core';\nimport type { Experience } from '@contentful/experiences-core/types';\nimport { StudioCanvasMode } from '@contentful/experiences-core/constants';\n\nexport const useFetchByBase = (\n  fetchMethod: () => Promise<Experience<EntityStore> | undefined>,\n  mode: StudioCanvasMode,\n) => {\n  const [experience, setExperience] = useState<Experience<EntityStore>>();\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error>();\n\n  useEffect(() => {\n    (async () => {\n      // if we are in editor/read only mode, we don't want to fetch the experience here\n      // it is passed via postMessage instead\n      if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {\n        return;\n      }\n      setIsLoading(true);\n      setError(undefined);\n      try {\n        const exp = await fetchMethod();\n        setExperience(exp);\n      } catch (error) {\n        setError(error as Error);\n      } finally {\n        setIsLoading(false);\n      }\n    })();\n  }, [fetchMethod, mode]);\n\n  return {\n    error,\n    experience,\n    isLoading,\n    mode,\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBM;;;;;AAKA;AACE;;;;;;;;;;AAQN;;;;;;;AAQF;;"}
+{"version":3,"file":"useFetchByBase.js","sources":["../../../src/hooks/useFetchByBase.ts"],"sourcesContent":["'use client';\nimport { useEffect, useState } from 'react';\nimport { EntityStore } from '@contentful/experiences-core';\nimport type { Experience } from '@contentful/experiences-core/types';\nimport { StudioCanvasMode } from '@contentful/experiences-core/constants';\n\nexport const useFetchByBase = (\n  fetchMethod: () => Promise<Experience<EntityStore> | undefined>,\n  mode: StudioCanvasMode,\n) => {\n  const [experience, setExperience] = useState<Experience<EntityStore>>();\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error>();\n\n  useEffect(() => {\n    (async () => {\n      // if we are in editor/read only mode, we don't want to fetch the experience here\n      // it is passed via postMessage instead\n      if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {\n        return;\n      }\n      setIsLoading(true);\n      setError(undefined);\n      try {\n        const exp = await fetchMethod();\n        setExperience(exp);\n      } catch (error) {\n        setError(error as Error);\n      } finally {\n        setIsLoading(false);\n      }\n    })();\n  }, [fetchMethod, mode]);\n\n  // When a save event caused a canvas reload, the `receivedModeMessage` might time out and set the\n  // mode temporarily to NONE. If it's set to a valid mode afterward, we ignore the fetch result.\n  if (mode === StudioCanvasMode.EDITOR || mode === StudioCanvasMode.READ_ONLY) {\n    return {\n      error: undefined,\n      experience: undefined,\n      isLoading: false,\n      mode,\n    };\n  }\n\n  return {\n    error,\n    experience,\n    isLoading,\n    mode,\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBM;;;;;AAKA;AACE;;;;;;;;;;AAQN;;;AAIA;;AAEI;AACA;AACA;;;;;;;;;;AAWN;;"}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import * as _contentful_experiences_core_constants from '@contentful/experiences
 export { CF_STYLE_ATTRIBUTES, CONTENTFUL_COMPONENTS, LATEST_SCHEMA_VERSION } from '@contentful/experiences-core/constants';
 import { ContentfulClientApi } from 'contentful';
 
-declare const SDK_VERSION = "1.30.0-dev-20250124T1739-560b81b.0";
+declare const SDK_VERSION = "1.30.0-dev-20250128T1255-1f90987.0";
 
 type ExperienceRootProps = {
     experience?: Experience<EntityStore> | string | null;
@@ -25,13 +25,21 @@ type UseFetchByIdArgs = {
     hyperlinkPattern?: string;
 };
 declare const useFetchById: ({ id, localeCode, client, experienceTypeId, hyperlinkPattern, }: UseFetchByIdArgs) => {
+    experience: {
+        hyperlinkPattern: string | undefined;
+        entityStore?: _contentful_experiences_core.EntityStore | undefined;
+    };
+    error: undefined;
+    isLoading: boolean;
+    mode: _contentful_experiences_core_constants.StudioCanvasMode.READ_ONLY | _contentful_experiences_core_constants.StudioCanvasMode.EDITOR;
+} | {
     experience: {
         hyperlinkPattern: string | undefined;
         entityStore?: _contentful_experiences_core.EntityStore | undefined;
     };
     error: Error | undefined;
     isLoading: boolean;
-    mode: _contentful_experiences_core_constants.StudioCanvasMode;
+    mode: _contentful_experiences_core_constants.StudioCanvasMode.NONE;
 };
 
 type UseFetchBySlugArgs = {
@@ -43,13 +51,21 @@ type UseFetchBySlugArgs = {
     hyperlinkPattern?: string;
 };
 declare const useFetchBySlug: ({ slug, localeCode, client, experienceTypeId, hyperlinkPattern, }: UseFetchBySlugArgs) => {
+    experience: {
+        hyperlinkPattern: string | undefined;
+        entityStore?: _contentful_experiences_core.EntityStore | undefined;
+    };
+    error: undefined;
+    isLoading: boolean;
+    mode: _contentful_experiences_core_constants.StudioCanvasMode.READ_ONLY | _contentful_experiences_core_constants.StudioCanvasMode.EDITOR;
+} | {
     experience: {
         hyperlinkPattern: string | undefined;
         entityStore?: _contentful_experiences_core.EntityStore | undefined;
     };
     error: Error | undefined;
     isLoading: boolean;
-    mode: _contentful_experiences_core_constants.StudioCanvasMode;
+    mode: _contentful_experiences_core_constants.StudioCanvasMode.NONE;
 };
 
 /**

package/dist/sdkVersion.js

@@ -1,4 +1,4 @@
-const SDK_VERSION = '1.30.0-dev-20250124T1739-560b81b.0';
+const SDK_VERSION = '1.30.0-dev-20250128T1255-1f90987.0';
 
 export { SDK_VERSION };
 //# sourceMappingURL=sdkVersion.js.map

package/dist/sdkVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.30.0-dev-20250124T1739-560b81b.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}
+{"version":3,"file":"sdkVersion.js","sources":["../../src/sdkVersion.ts"],"sourcesContent":["export const SDK_VERSION = '1.30.0-dev-20250128T1255-1f90987.0';\n"],"names":[],"mappings":"AAAO,MAAM,WAAW,GAAG;;;;"}

package/dist/src/hooks/useFetchByBase.d.ts

@@ -2,8 +2,13 @@ import { EntityStore } from '@contentful/experiences-core';
 import type { Experience } from '@contentful/experiences-core/types';
 import { StudioCanvasMode } from '@contentful/experiences-core/constants';
 export declare const useFetchByBase: (fetchMethod: () => Promise<Experience<EntityStore> | undefined>, mode: StudioCanvasMode) => {
+    error: undefined;
+    experience: undefined;
+    isLoading: boolean;
+    mode: StudioCanvasMode.READ_ONLY | StudioCanvasMode.EDITOR;
+} | {
     error: Error | undefined;
     experience: Experience<EntityStore> | undefined;
     isLoading: boolean;
-    mode: StudioCanvasMode;
+    mode: StudioCanvasMode.NONE;
 };

package/dist/src/hooks/useFetchById.d.ts

@@ -7,11 +7,19 @@ export type UseFetchByIdArgs = {
     hyperlinkPattern?: string;
 };
 export declare const useFetchById: ({ id, localeCode, client, experienceTypeId, hyperlinkPattern, }: UseFetchByIdArgs) => {
+    experience: {
+        hyperlinkPattern: string | undefined;
+        entityStore?: import("@contentful/experiences-core").EntityStore | undefined;
+    };
+    error: undefined;
+    isLoading: boolean;
+    mode: import("@contentful/experiences-core/constants").StudioCanvasMode.READ_ONLY | import("@contentful/experiences-core/constants").StudioCanvasMode.EDITOR;
+} | {
     experience: {
         hyperlinkPattern: string | undefined;
         entityStore?: import("@contentful/experiences-core").EntityStore | undefined;
     };
     error: Error | undefined;
     isLoading: boolean;
-    mode: import("@contentful/experiences-core/constants").StudioCanvasMode;
+    mode: import("@contentful/experiences-core/constants").StudioCanvasMode.NONE;
 };

package/dist/src/hooks/useFetchBySlug.d.ts

@@ -8,11 +8,19 @@ export type UseFetchBySlugArgs = {
     hyperlinkPattern?: string;
 };
 export declare const useFetchBySlug: ({ slug, localeCode, client, experienceTypeId, hyperlinkPattern, }: UseFetchBySlugArgs) => {
+    experience: {
+        hyperlinkPattern: string | undefined;
+        entityStore?: import("@contentful/experiences-core").EntityStore | undefined;
+    };
+    error: undefined;
+    isLoading: boolean;
+    mode: import("@contentful/experiences-core/constants").StudioCanvasMode.READ_ONLY | import("@contentful/experiences-core/constants").StudioCanvasMode.EDITOR;
+} | {
     experience: {
         hyperlinkPattern: string | undefined;
         entityStore?: import("@contentful/experiences-core").EntityStore | undefined;
     };
     error: Error | undefined;
     isLoading: boolean;
-    mode: import("@contentful/experiences-core/constants").StudioCanvasMode;
+    mode: import("@contentful/experiences-core/constants").StudioCanvasMode.NONE;
 };

package/dist/src/sdkVersion.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.30.0-dev-20250124T1739-560b81b.0";
+export declare const SDK_VERSION = "1.30.0-dev-20250128T1255-1f90987.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/experiences-sdk-react",
-  "version": "1.30.0-dev-20250124T1739-560b81b.0",
+  "version": "1.30.0-dev-20250128T1255-1f90987.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "typings": "./dist/src/index.d.ts",
@@ -41,10 +41,10 @@
     "depcruise": "depcruise src"
   },
   "dependencies": {
-    "@contentful/experiences-components-react": "1.30.0-dev-20250124T1739-560b81b.0",
-    "@contentful/experiences-core": "1.30.0-dev-20250124T1739-560b81b.0",
-    "@contentful/experiences-validators": "1.30.0-dev-20250124T1739-560b81b.0",
-    "@contentful/experiences-visual-editor-react": "1.30.0-dev-20250124T1739-560b81b.0",
+    "@contentful/experiences-components-react": "1.30.0-dev-20250128T1255-1f90987.0",
+    "@contentful/experiences-core": "1.30.0-dev-20250128T1255-1f90987.0",
+    "@contentful/experiences-validators": "1.30.0-dev-20250128T1255-1f90987.0",
+    "@contentful/experiences-visual-editor-react": "1.30.0-dev-20250128T1255-1f90987.0",
     "@contentful/rich-text-types": "^17.0.0",
     "classnames": "^2.3.2",
     "csstype": "^3.1.2",
@@ -102,5 +102,5 @@
     "dist",
     "package.json"
   ],
-  "gitHead": "5c79b509edb4485c183c4a9b5b44900498698825"
+  "gitHead": "e8d9ca1b48f734c139b55d9913fa97579b5fea00"
 }