@uniformdev/canvas-react 18.33.0 → 18.34.0

package/dist/index.js

@@ -42,7 +42,7 @@ __export(src_exports, {
   createApiEnhancer: () => createApiEnhancer,
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
-  createUniformApiEnhancer: () => import_canvas5.createUniformApiEnhancer,
+  createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
   registerUniformComponent: () => registerUniformComponent,
   useComposition: () => useComposition,
   useCompositionEventEffect: () => useCompositionEventEffect,
@@ -87,9 +87,9 @@ function DefaultNotImplementedComponent(props) {
 }
 
 // src/components/UniformComponent.tsx
-var import_canvas4 = require("@uniformdev/canvas");
+var import_canvas6 = require("@uniformdev/canvas");
 var import_context_react2 = require("@uniformdev/context-react");
-var import_react3 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -123,7 +123,8 @@ var createComponentStore = () => {
 };
 var createComponentStoreResolver = ({ store, defaultComponent = DefaultNotImplementedComponent }) => {
   return (component) => {
-    const resolved = store.get(getTypeWithVariant(component.type, component.variant));
+    var _a;
+    const resolved = (_a = store.get(getTypeWithVariant(component.type, component.variant))) != null ? _a : store.get(getTypeWithVariant(component.type));
     return resolved || defaultComponent;
   };
 };
@@ -146,8 +147,8 @@ var componentStoreResolver = createComponentStoreResolver({
 });
 
 // src/components/UniformSlot.tsx
-var import_canvas3 = require("@uniformdev/canvas");
-var import_react2 = __toESM(require("react"));
+var import_canvas5 = require("@uniformdev/canvas");
+var import_react5 = __toESM(require("react"));
 
 // src/defaultSystemComponentResolver.tsx
 var import_canvas2 = require("@uniformdev/canvas");
@@ -187,6 +188,166 @@ var defaultSystemComponentResolver = {
   }
 };
 
+// src/components/ContextualEditingComponentWrapper.tsx
+var import_canvas4 = require("@uniformdev/canvas");
+var import_react4 = __toESM(require("react"));
+
+// src/components/UniformComposition.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/hooks/useUniformContextualEditing.ts
+var import_canvas3 = require("@uniformdev/canvas");
+var import_react2 = require("react");
+var createApiEnhancer = import_canvas3.createUniformApiEnhancer;
+var registeredCompositionIds = /* @__PURE__ */ new Set();
+var useUniformContextualEditing = ({
+  initialCompositionValue,
+  enhance = (message) => message.composition
+}) => {
+  const [contextualComposition, setContextualComposition] = (0, import_react2.useState)();
+  const channel = (0, import_react2.useMemo)(() => {
+    var _a;
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const channel2 = (0, import_canvas3.createCanvasChannel)({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return channel2;
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== import_canvas3.EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
+      setContextualComposition(void 0);
+      return;
+    }
+    if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
+      return;
+    }
+    const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
+      if (!(0, import_canvas3.isUpdateCompositionMessage)(message)) {
+        return;
+      }
+      const enhancedComposition = await enhance(message);
+      setContextualComposition(enhancedComposition);
+    });
+    registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
+    return () => {
+      unsubscribeFromCompositionUpdates();
+      registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
+    };
+  }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id, contextualComposition == null ? void 0 : contextualComposition._id]);
+  (0, import_react2.useEffect)(() => {
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const existingScript = document.getElementById(import_canvas3.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
+    if (existingScript) {
+      return;
+    }
+    window.__UNIFORM_CONTEXTUAL_EDITING__ = {
+      framework: "React",
+      // Make sure to also update the value in canvas-vue
+      version: 1
+    };
+    const script = document.createElement("script");
+    script.id = import_canvas3.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
+    script.src = getCanvasInContextEmbedScriptUrl();
+    script.async = true;
+    document.head.appendChild(script);
+  }, [initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
+  return {
+    composition: contextualComposition != null ? contextualComposition : initialCompositionValue,
+    isContextualEditing: Boolean(contextualComposition)
+  };
+};
+function getCanvasInContextEmbedScriptUrl() {
+  const scriptUrl = `${window.document.referrer}files/canvas-in-context-embed/index.js`;
+  return scriptUrl;
+}
+function isInContextEditingMode() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
+    import_canvas3.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+  );
+  const isAllowlistedReferrer = Boolean(
+    window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
+  );
+  return isOpenedByInContextEditor && isAllowlistedReferrer;
+}
+var useContextualEditing = useUniformContextualEditing;
+
+// src/components/UniformComposition.tsx
+var UniformCompositionContext = (0, import_react3.createContext)({
+  data: void 0,
+  isContextualEditing: false
+});
+function useUniformCurrentComposition() {
+  return (0, import_react3.useContext)(UniformCompositionContext);
+}
+function UniformComposition({
+  data,
+  behaviorTracking = "onView",
+  children,
+  resolveRenderer,
+  contextualEditingEnhancer
+}) {
+  const { composition, isContextualEditing } = useUniformContextualEditing({
+    initialCompositionValue: data,
+    enhance: contextualEditingEnhancer
+  });
+  return /* @__PURE__ */ import_react3.default.createElement(
+    UniformCompositionContext.Provider,
+    {
+      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react3.default.createElement(
+      UniformComponent,
+      {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer
+      },
+      children
+    ))
+  );
+}
+var useComposition = useUniformCurrentComposition;
+var Composition = UniformComposition;
+
+// src/components/ContextualEditingComponentWrapper.tsx
+function ContextualEditingComponentWrapper({
+  component,
+  parentComponent,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  emptyPlaceholder,
+  children
+}) {
+  var _a, _b, _c, _d;
+  const isPlaceholder = (component == null ? void 0 : component._id) === import_canvas4.PLACEHOLDER_ID;
+  const { isContextualEditing } = useUniformCurrentComposition();
+  return !isContextualEditing ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children) : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
+    "script",
+    {
+      "data-role": import_canvas4.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+      "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
+      "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
+      "data-component-id": component == null ? void 0 : component._id,
+      "data-slot-name": slotName != null ? slotName : "",
+      "data-component-index": indexInSlot != null ? indexInSlot : "",
+      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
+      "data-component-name": component == null ? void 0 : component.type,
+      "data-is-placeholder": isPlaceholder ? "true" : void 0,
+      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[import_canvas4.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
+    }
+  ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children, /* @__PURE__ */ import_react4.default.createElement("script", { "data-role": import_canvas4.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+}
+
 // src/components/UniformSlot.tsx
 function UniformSlot({
   name,
@@ -224,9 +385,9 @@ function UniformSlot({
       emptyPlaceholder
     });
     const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
-    return import_react2.default.createElement(import_react2.default.Fragment, { key: index }, elements);
+    return import_react5.default.createElement(import_react5.default.Fragment, { key: index }, elements);
   });
-  return import_react2.default.createElement(import_react2.default.Fragment, void 0, finalChildren);
+  return import_react5.default.createElement(import_react5.default.Fragment, void 0, finalChildren);
 }
 function renderComponent({
   component,
@@ -239,43 +400,42 @@ function renderComponent({
   slotChildrenCount,
   emptyPlaceholder
 }) {
-  var _a, _b, _c, _d;
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
-  if (component.type === import_canvas3.CANVAS_TEST_TYPE) {
+  if (component.type === import_canvas5.CANVAS_TEST_TYPE) {
     return resolveSystem.test(
       component,
       key,
       (variantComponent, key2) => {
-        var _a2, _b2;
+        var _a, _b;
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
           resolveSystem,
           key: key2,
           parentComponent: component,
-          slotName: import_canvas3.CANVAS_TEST_SLOT,
-          slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[import_canvas3.CANVAS_TEST_SLOT].length,
-          indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[import_canvas3.CANVAS_TEST_SLOT].findIndex(
+          slotName: import_canvas5.CANVAS_TEST_SLOT,
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas5.CANVAS_TEST_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas5.CANVAS_TEST_SLOT].findIndex(
             ({ _id }) => variantComponent._id === _id
           )
         });
       }
     );
-  } else if (component.type === import_canvas3.CANVAS_PERSONALIZE_TYPE) {
+  } else if (component.type === import_canvas5.CANVAS_PERSONALIZE_TYPE) {
     return resolveSystem.personalization(
       component,
       key,
       (variantComponent, key2) => {
-        var _a2, _b2;
+        var _a, _b;
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
           resolveSystem,
           key: key2,
           parentComponent: component,
-          slotName: import_canvas3.CANVAS_PERSONALIZE_SLOT,
-          slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[import_canvas3.CANVAS_PERSONALIZE_SLOT].length,
-          indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[import_canvas3.CANVAS_PERSONALIZE_SLOT].findIndex(
+          slotName: import_canvas5.CANVAS_PERSONALIZE_SLOT,
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[import_canvas5.CANVAS_PERSONALIZE_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[import_canvas5.CANVAS_PERSONALIZE_SLOT].findIndex(
             ({ _id }) => variantComponent._id === _id
           )
         });
@@ -283,25 +443,18 @@ function renderComponent({
     );
   } else if (RenderComponent) {
     const props = convertComponentToProps(component);
-    const shouldRenderContextualEditingTags = Boolean(component._id);
-    const isPlaceholder = component._id === import_canvas3.PLACEHOLDER_ID;
-    return /* @__PURE__ */ import_react2.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react2.default.createElement(
-      "script",
+    return /* @__PURE__ */ import_react5.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ import_react5.default.createElement(
+      ContextualEditingComponentWrapper,
       {
-        key,
-        "data-role": import_canvas3.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
-        "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
-        "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
-        "data-component-id": component._id,
-        "data-slot-name": slotName != null ? slotName : "",
-        "data-component-index": indexInSlot != null ? indexInSlot : "",
-        "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
-        "data-component-name": component.type,
-        "data-is-placeholder": isPlaceholder ? "true" : void 0,
-        "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[import_canvas3.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
-        "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
-      }
-    ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ import_react2.default.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react2.default.createElement("script", { "data-role": "component-end" }));
+        component,
+        parentComponent,
+        slotName,
+        indexInSlot,
+        slotChildrenCount,
+        emptyPlaceholder
+      },
+      /* @__PURE__ */ import_react5.default.createElement(RenderComponent, { ...props })
+    ));
   } else if (process.env.NODE_ENV !== "production") {
     console.warn(
       `[canvas] found component of type '${component.type}'${component.variant ? ` with variant '${component.variant}'` : ""}. Nothing will be rendered. Check your resolveRenderer function or add registerUniformComponent to your component.
@@ -314,9 +467,9 @@ function renderComponent({
 var Slot = UniformSlot;
 
 // src/components/UniformComponent.tsx
-var UniformComponentContext = (0, import_react3.createContext)({});
+var UniformComponentContext = (0, import_react6.createContext)({});
 function useUniformCurrentComponent() {
-  return (0, import_react3.useContext)(UniformComponentContext);
+  return (0, import_react6.useContext)(UniformComponentContext);
 }
 function UniformComponent({
   data,
@@ -338,7 +491,7 @@ function UniformComponent({
     resolveRenderer: resolveRenderer || parentData.resolveRenderer || componentStoreResolver,
     behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView"
   };
-  const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas4.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
+  const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas6.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
   const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
   const resolvedChildren = resolveChildren({
     children,
@@ -346,9 +499,9 @@ function UniformComponent({
     hasParentLayout: Boolean(parentData.data),
     resolveRenderer: contextValue.resolveRenderer
   });
-  return /* @__PURE__ */ import_react3.default.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
+  return /* @__PURE__ */ import_react6.default.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
     /* auto-track behavior signals when in a Canvas context */
-    /* @__PURE__ */ import_react3.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
+    /* @__PURE__ */ import_react6.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
   ) : resolvedChildren);
 }
 function resolveChildren({
@@ -361,150 +514,41 @@ function resolveChildren({
   if (!children && !hasParentLayout) {
     const topLevelComponent = resolveRenderer({ type: data.type });
     if (topLevelComponent) {
-      children = import_react3.default.createElement(topLevelComponent, convertComponentToProps(data));
+      children = import_react6.default.createElement(topLevelComponent, convertComponentToProps(data));
     } else {
       if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
         console.warn(
           `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
         );
       }
-      children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react3.default.createElement(UniformSlot, { key: slotName, name: slotName }));
+      children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react6.default.createElement(UniformSlot, { key: slotName, name: slotName }));
     }
   }
   const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
   return renderChildren;
 }
 
-// src/components/UniformComposition.tsx
-var import_react5 = __toESM(require("react"));
-
-// src/hooks/useUniformContextualEditing.ts
-var import_canvas5 = require("@uniformdev/canvas");
-var import_react4 = require("react");
-var createApiEnhancer = import_canvas5.createUniformApiEnhancer;
-var registeredCompositionIds = /* @__PURE__ */ new Set();
-var useUniformContextualEditing = ({
-  initialCompositionValue,
-  enhance = (message) => message.composition
-}) => {
-  const [contextualComposition, setContextualComposition] = (0, import_react4.useState)();
-  const channel = (0, import_react4.useMemo)(() => {
-    var _a;
-    if (!isInContextEditingMode()) {
-      return;
-    }
-    const channel2 = (0, import_canvas5.createCanvasChannel)({
-      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
-      listenTo: [window]
-    });
-    return channel2;
-  }, []);
-  (0, import_react4.useEffect)(() => {
-    if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
-      return;
-    }
-    const unsubscribe = channel.on("update-composition", async (message) => {
-      if (!(0, import_canvas5.isUpdateCompositionMessage)(message)) {
-        return;
-      }
-      const enhancedComposition = await enhance(message);
-      setContextualComposition(enhancedComposition);
-    });
-    registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
-    return () => {
-      unsubscribe();
-      registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
-    };
-  }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
-  (0, import_react4.useEffect)(() => {
-    if (!isInContextEditingMode()) {
-      return;
-    }
-    const existingScript = document.getElementById(import_canvas5.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
-    if (existingScript) {
-      return;
-    }
-    window.__UNIFORM_CONTEXTUAL_EDITING__ = {
-      framework: "React"
-    };
-    const script = document.createElement("script");
-    script.id = import_canvas5.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
-    script.src = getCanvasInContextEmbedScriptUrl();
-    script.async = true;
-    document.head.appendChild(script);
-  }, []);
-  return {
-    composition: contextualComposition != null ? contextualComposition : initialCompositionValue
-  };
-};
-function getCanvasInContextEmbedScriptUrl() {
-  const scriptUrl = `${window.document.referrer}files/canvas-in-context-embed/index.js`;
-  return scriptUrl;
-}
-function isInContextEditingMode() {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
-    import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
-  );
-  const isAllowlistedReferrer = Boolean(
-    window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
-  );
-  return isOpenedByInContextEditor && isAllowlistedReferrer;
-}
-var useContextualEditing = useUniformContextualEditing;
-
-// src/components/UniformComposition.tsx
-var UniformCompositionContext = (0, import_react5.createContext)({ data: void 0 });
-function useUniformCurrentComposition() {
-  return (0, import_react5.useContext)(UniformCompositionContext);
-}
-function UniformComposition({
-  data,
-  behaviorTracking = "onView",
-  children,
-  resolveRenderer,
-  contextualEditingEnhancer
-}) {
-  const { composition } = useUniformContextualEditing({
-    initialCompositionValue: data,
-    enhance: contextualEditingEnhancer
-  });
-  return /* @__PURE__ */ import_react5.default.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ import_react5.default.createElement(
-    UniformComponent,
-    {
-      data: composition,
-      behaviorTracking,
-      resolveRenderer
-    },
-    children
-  ));
-}
-var useComposition = useUniformCurrentComposition;
-var Composition = UniformComposition;
-
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas6 = require("@uniformdev/canvas");
-var import_react6 = require("react");
+var import_canvas7 = require("@uniformdev/canvas");
+var import_react7 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
     let goodbye = void 0;
     const loadEffect = async () => {
-      const eventBus = await (0, import_canvas6.createEventBus)();
+      const eventBus = await (0, import_canvas7.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas6.subscribeToComposition)({
+        goodbye = (0, import_canvas7.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas6.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas7.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"