@uniformdev/canvas-react 20.6.2-alpha.11 → 20.7.1-alpha.102

package/dist/index.js

@@ -46,7 +46,7 @@ __export(src_exports, {
   convertComponentToProps: () => convertComponentToProps,
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
-  createUniformApiEnhancer: () => import_canvas6.createUniformApiEnhancer,
+  createUniformApiEnhancer: () => import_canvas4.createUniformApiEnhancer,
   getParameterAttributes: () => getParameterAttributes,
   registerUniformComponent: () => registerUniformComponent,
   useUniformContextualEditing: () => useUniformContextualEditing,
@@ -131,7 +131,7 @@ registerUniformComponent({ type: "${componentType}", component: ${proposedFileNa
 
 // src/components/UniformComponent.tsx
 var import_canvas9 = require("@uniformdev/canvas");
-var import_context_react3 = require("@uniformdev/context-react");
+var import_context_react4 = require("@uniformdev/context-react");
 var import_react9 = __toESM(require("react"));
 
 // src/helpers/convertComponentToProps.ts
@@ -195,98 +195,28 @@ var import_canvas8 = require("@uniformdev/canvas");
 var import_react8 = __toESM(require("react"));
 
 // src/defaultSystemComponentResolver.tsx
-var import_canvas2 = require("@uniformdev/canvas");
-var import_context_react = require("@uniformdev/context-react");
-var React2 = __toESM(require("react"));
-var defaultSystemComponentResolver = {
-  test: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e;
-    const testComponent = component;
-    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
-    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
-    const finalVariants = (0, import_canvas2.mapSlotToTestVariations)(variants);
-    return /* @__PURE__ */ React2.createElement(
-      import_context_react.Test,
-      {
-        key,
-        variations: finalVariants,
-        name: testName,
-        component: (variation) => renderChild(variation, key)
-      }
-    );
-  },
-  personalization: (component, key, renderChild) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const pzComponent = component;
-    const processedVariants = (0, import_canvas2.mapSlotToPersonalizedVariations)((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
-    return /* @__PURE__ */ React2.createElement(
-      import_context_react.Personalize,
-      {
-        key,
-        variations: processedVariants,
-        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[import_canvas2.CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
-        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[import_canvas2.CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
-        component: (variation) => renderChild(variation, 0),
-        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[import_canvas2.CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value
-      }
-    );
-  }
-};
-
-// src/components/ContextualEditingComponentWrapper.tsx
 var import_canvas7 = require("@uniformdev/canvas");
-var import_react7 = __toESM(require("react"));
-
-// src/components/PureContextualEditingComponentWrapper.tsx
-var import_canvas3 = require("@uniformdev/canvas");
-var import_react2 = __toESM(require("react"));
-var PureContextualEditingComponentWrapper = ({
-  children,
-  isPlaceholder,
-  parentComponent,
-  component,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  isReadOnly
-}) => {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
-    "script",
-    {
-      "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 == 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_canvas3.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 : "",
-      "data-is-readonly": isReadOnly
-    }
-  ), children, /* @__PURE__ */ import_react2.default.createElement("script", { "data-role": import_canvas3.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
-};
+var import_context_react3 = require("@uniformdev/context-react");
+var React5 = __toESM(require("react"));
 
 // src/components/UniformComposition.tsx
-var import_react6 = __toESM(require("react"));
+var import_context_react2 = require("@uniformdev/context-react");
+var import_react7 = __toESM(require("react"));
 
 // src/hooks/useClientConditionsComposition.ts
-var import_canvas5 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var import_immer = require("immer");
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/hooks/useClientVisibilityRules.ts
-var import_canvas4 = require("@uniformdev/canvas");
-var import_context_react2 = require("@uniformdev/context-react");
-var import_react3 = require("react");
+var import_canvas2 = require("@uniformdev/canvas");
+var import_context_react = require("@uniformdev/context-react");
+var import_react2 = require("react");
 function useClientVisibilityRules() {
-  const quirks = (0, import_context_react2.useQuirks)({ throwOnMissingProvider: false });
-  return (0, import_react3.useMemo)(() => {
+  const quirks = (0, import_context_react.useQuirks)({ throwOnMissingProvider: false });
+  return (0, import_react2.useMemo)(() => {
     return {
-      ...(0, import_canvas4.createQuirksVisibilityRule)(quirks)
+      ...(0, import_canvas2.createQuirksVisibilityRule)(quirks)
     };
   }, [quirks]);
 }
@@ -294,15 +224,15 @@ function useClientVisibilityRules() {
 // src/hooks/useClientConditionsComposition.ts
 function useClientConditionsComposition(data) {
   const rules = useClientVisibilityRules();
-  const preprocessedValue = (0, import_react4.useMemo)(() => {
+  const preprocessedValue = (0, import_react3.useMemo)(() => {
     if (!data) {
       return data;
     }
     try {
       return (0, import_immer.produce)(data, (draft) => {
-        (0, import_canvas5.walkNodeTree)(draft, (context) => {
-          (0, import_canvas5.evaluateWalkTreeNodeVisibility)({ context, rules, showIndeterminate: false });
-          (0, import_canvas5.evaluateWalkTreePropertyCriteria)({ node: context.node, rules, keepIndeterminate: false });
+        (0, import_canvas3.walkNodeTree)(draft, (context) => {
+          (0, import_canvas3.evaluateWalkTreeNodeVisibility)({ context, rules, showIndeterminate: false });
+          (0, import_canvas3.evaluateWalkTreePropertyCriteria)({ node: context.node, rules, keepIndeterminate: false });
         });
       });
     } catch (e) {
@@ -314,28 +244,28 @@ function useClientConditionsComposition(data) {
 }
 
 // src/hooks/useUniformContextualEditing.ts
-var import_canvas6 = require("@uniformdev/canvas");
-var import_react5 = require("react");
+var import_canvas4 = require("@uniformdev/canvas");
+var import_react4 = require("react");
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
   enhance = (message) => message.composition
 }) => {
-  const [contextualComposition, setContextualComposition] = (0, import_react5.useState)();
-  const latestEventTimeStamp = (0, import_react5.useRef)();
-  const channel = (0, import_react5.useMemo)(() => {
+  const [contextualComposition, setContextualComposition] = (0, import_react4.useState)();
+  const latestEventTimeStamp = (0, import_react4.useRef)();
+  const channel = (0, import_react4.useMemo)(() => {
     var _a;
     if (!isInContextEditingMode()) {
       return;
     }
-    const channel2 = (0, import_canvas6.createCanvasChannel)({
+    const channel2 = (0, import_canvas4.createCanvasChannel)({
       broadcastTo: [(_a = window.opener) != null ? _a : window.top],
       listenTo: [window]
     });
     return channel2;
   }, []);
-  (0, import_react5.useEffect)(() => {
-    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== import_canvas6.EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
+  (0, import_react4.useEffect)(() => {
+    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== import_canvas4.EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
       setContextualComposition(void 0);
       return;
     }
@@ -343,7 +273,7 @@ var useUniformContextualEditing = ({
       return;
     }
     const unsubscribeFromCompositionUpdates = channel.on("update-composition-internal", async (message) => {
-      if (!(0, import_canvas6.isUpdateCompositionInternalMessage)(message)) {
+      if (!(0, import_canvas4.isUpdateCompositionInternalMessage)(message)) {
         return;
       }
       if (latestEventTimeStamp.current && message.eventTimestamp && message.eventTimestamp <= latestEventTimeStamp.current) {
@@ -359,21 +289,22 @@ var useUniformContextualEditing = ({
       registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
     };
   }, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id, contextualComposition == null ? void 0 : contextualComposition._id]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isInContextEditingMode()) {
       return;
     }
-    const existingScript = document.getElementById(import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
+    const existingScript = document.getElementById(import_canvas4.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: 2
+      version: 2,
+      canvasPackageVersion: import_canvas4.version
     };
     const script = document.createElement("script");
-    script.id = import_canvas6.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
+    script.id = import_canvas4.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
     script.src = getCanvasInContextEmbedScriptUrl();
     script.async = true;
     document.head.appendChild(script);
@@ -392,49 +323,47 @@ function isInContextEditingMode() {
     return false;
   }
   const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
-    import_canvas6.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+    import_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
   );
-  return isOpenedByInContextEditor && (0, import_canvas6.isAllowedReferrer)(window.document.referrer);
+  return isOpenedByInContextEditor && (0, import_canvas4.isAllowedReferrer)(window.document.referrer);
 }
 
-// src/components/UniformComposition.tsx
-var UniformCompositionContext = (0, import_react6.createContext)({
-  data: void 0,
-  isContextualEditing: false
-});
-function useUniformCurrentComposition() {
-  return (0, import_react6.useContext)(UniformCompositionContext);
-}
-function UniformComposition({
-  data,
-  behaviorTracking = "onView",
+// src/components/ContextualEditingComponentWrapper.tsx
+var import_canvas6 = require("@uniformdev/canvas");
+var import_react6 = __toESM(require("react"));
+
+// src/components/PureContextualEditingComponentWrapper.tsx
+var import_canvas5 = require("@uniformdev/canvas");
+var import_react5 = __toESM(require("react"));
+var PureContextualEditingComponentWrapper = ({
   children,
-  resolveRenderer,
-  contextualEditingEnhancer,
-  contextualEditingDefaultPlaceholder
-}) {
-  const ruledComposition = useClientConditionsComposition(data);
-  const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: ruledComposition,
-    enhance: contextualEditingEnhancer
-  });
-  return /* @__PURE__ */ import_react6.default.createElement(
-    UniformCompositionContext.Provider,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
+    "script",
     {
-      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
-    },
-    /* @__PURE__ */ import_react6.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react6.default.createElement(
-      UniformComponent,
-      {
-        data: composition,
-        behaviorTracking,
-        resolveRenderer,
-        contextualEditingDefaultPlaceholder
-      },
-      children
-    ))
-  );
-}
+      "data-role": import_canvas5.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_canvas5.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 : "",
+      "data-is-readonly": isReadOnly
+    }
+  ), children, /* @__PURE__ */ import_react5.default.createElement("script", { "data-role": import_canvas5.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -447,16 +376,16 @@ function ContextualEditingComponentWrapper({
   children
 }) {
   var _a;
-  const isPlaceholder = (0, import_canvas7.isComponentPlaceholderId)(component == null ? void 0 : component._id);
+  const isPlaceholder = (0, import_canvas6.isComponentPlaceholderId)(component == null ? void 0 : component._id);
   const { isContextualEditing } = useUniformCurrentComposition();
   const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, children);
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, children);
   }
   if (isPlaceholder && emptyPlaceholder === null) {
     return null;
   }
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     PureContextualEditingComponentWrapper,
     {
       isPlaceholder,
@@ -471,6 +400,108 @@ function ContextualEditingComponentWrapper({
   );
 }
 
+// src/components/UniformComposition.tsx
+var UniformCompositionContext = (0, import_react7.createContext)({
+  data: void 0,
+  isContextualEditing: false
+});
+function useUniformCurrentComposition() {
+  return (0, import_react7.useContext)(UniformCompositionContext);
+}
+function UniformComposition({
+  data,
+  behaviorTracking = "onView",
+  children,
+  resolveRenderer,
+  contextualEditingEnhancer,
+  contextualEditingDefaultPlaceholder,
+  // provide default non-undefined values to avoid serialization issues
+  matchedRoute = "",
+  dynamicInputs = {}
+}) {
+  const maybeContext = (0, import_context_react2.useUniformContext)({ throwOnMissingProvider: false });
+  (0, import_react7.useEffect)(() => {
+    if ((maybeContext == null ? void 0 : maybeContext.context) && (data == null ? void 0 : data._id)) {
+      maybeContext.context.updateCompositionMetadata({
+        compositionId: data._id,
+        matchedRoute,
+        dynamicInputs
+      });
+    }
+  }, [data == null ? void 0 : data._id, maybeContext == null ? void 0 : maybeContext.context, matchedRoute, dynamicInputs]);
+  const ruledComposition = useClientConditionsComposition(data);
+  const { composition, isContextualEditing } = useUniformContextualEditing({
+    initialCompositionValue: ruledComposition,
+    enhance: contextualEditingEnhancer
+  });
+  return /* @__PURE__ */ import_react7.default.createElement(
+    UniformCompositionContext.Provider,
+    {
+      value: {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        isContextualEditing,
+        matchedRoute,
+        dynamicInputs
+      }
+    },
+    /* @__PURE__ */ import_react7.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react7.default.createElement(
+      UniformComponent,
+      {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
+      },
+      children
+    ))
+  );
+}
+
+// src/defaultSystemComponentResolver.tsx
+var defaultSystemComponentResolver = {
+  test: function TestComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e;
+    const testComponent = component;
+    const variants = (_b = (_a = testComponent.slots) == null ? void 0 : _a.test) != null ? _b : [];
+    const testName = (_e = (_d = (_c = testComponent.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
+    const finalVariants = (0, import_canvas7.mapSlotToTestVariations)(variants);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      import_context_react3.Test,
+      {
+        key,
+        variations: finalVariants,
+        name: testName,
+        component: (variation) => renderChild(variation, key),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0
+      }
+    );
+  },
+  personalization: function PersonalizeComponent(component, key, renderChild) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const pzComponent = component;
+    const processedVariants = (0, import_canvas7.mapSlotToPersonalizedVariations)((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      import_context_react3.Personalize,
+      {
+        key,
+        variations: processedVariants,
+        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[import_canvas7.CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
+        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[import_canvas7.CANVAS_PERSONALIZATION_EVENT_NAME_PARAM]) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
+        component: (variation) => renderChild(variation, 0),
+        compositionMetadata: (data == null ? void 0 : data._id) ? { compositionId: data._id, matchedRoute, dynamicInputs } : void 0,
+        algorithm: (_i = (_h = pzComponent.parameters) == null ? void 0 : _h[import_canvas7.CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value,
+        compositionId: data == null ? void 0 : data._id,
+        matchedRoute,
+        dynamicInputs
+      }
+    );
+  }
+};
+
 // src/components/UniformSlot.tsx
 function UniformSlot({
   name,
@@ -624,7 +655,7 @@ function UniformComponent({
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
-  const contextContextProviderPresent = (0, import_context_react3.useUniformContext)({ throwOnMissingProvider: false }) !== void 0;
+  const contextContextProviderPresent = (0, import_context_react4.useUniformContext)({ throwOnMissingProvider: false }) !== void 0;
   if (!data) {
     if (process.env.NODE_ENV === "development") {
       console.warn(`[canvas-dev] UniformComponent was rendered with no data, nothing will be output.`);
@@ -638,7 +669,7 @@ function UniformComponent({
     contextualEditingDefaultPlaceholder: contextualEditingDefaultPlaceholder != null ? contextualEditingDefaultPlaceholder : parentData.contextualEditingDefaultPlaceholder
   };
   const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas9.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
-  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react3.TrackFragment : import_context_react3.Track;
+  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react4.TrackFragment : import_context_react4.Track;
   const resolvedChildren = resolveChildren({
     children,
     data,