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

package/dist/index.esm.js

@@ -77,7 +77,7 @@ registerUniformComponent({ type: "${componentType}", component: ${proposedFileNa
 import {
   CANVAS_ENRICHMENT_TAG_PARAM
 } from "@uniformdev/canvas";
-import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
+import { Track, TrackFragment, useUniformContext as useUniformContext2 } from "@uniformdev/context-react";
 import React7, { createContext as createContext2, useContext as useContext2 } from "react";
 
 // src/helpers/convertComponentToProps.ts
@@ -155,87 +155,11 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-react";
-import * as React2 from "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 = mapSlotToTestVariations(variants);
-    return /* @__PURE__ */ React2.createElement(
-      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 = mapSlotToPersonalizedVariations((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
-    return /* @__PURE__ */ React2.createElement(
-      Personalize,
-      {
-        key,
-        variations: processedVariants,
-        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
-        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[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[CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value
-      }
-    );
-  }
-};
-
-// src/components/ContextualEditingComponentWrapper.tsx
-import {
-  isComponentPlaceholderId
-} from "@uniformdev/canvas";
-import React5 from "react";
-
-// src/components/PureContextualEditingComponentWrapper.tsx
-import {
-  CANVAS_LOCALE_TAG_PARAM,
-  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
-  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
-} from "@uniformdev/canvas";
-import React3 from "react";
-var PureContextualEditingComponentWrapper = ({
-  children,
-  isPlaceholder,
-  parentComponent,
-  component,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  isReadOnly
-}) => {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    "script",
-    {
-      "data-role": 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[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__ */ React3.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
-};
+import * as React5 from "react";
 
 // src/components/UniformComposition.tsx
-import React4, { createContext, useContext } from "react";
+import { useUniformContext } from "@uniformdev/context-react";
+import React4, { createContext, useContext, useEffect as useEffect2 } from "react";
 
 // src/hooks/useClientConditionsComposition.ts
 import {
@@ -289,7 +213,8 @@ import {
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
   isAllowedReferrer,
-  isUpdateCompositionInternalMessage
+  isUpdateCompositionInternalMessage,
+  version
 } from "@uniformdev/canvas";
 import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
@@ -346,7 +271,8 @@ var useUniformContextualEditing = ({
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
       framework: "React",
       // Make sure to also update the value in canvas-vue
-      version: 2
+      version: 2,
+      canvasPackageVersion: version
     };
     const script = document.createElement("script");
     script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -373,6 +299,84 @@ function isInContextEditingMode() {
   return isOpenedByInContextEditor && isAllowedReferrer(window.document.referrer);
 }
 
+// src/components/ContextualEditingComponentWrapper.tsx
+import {
+  isComponentPlaceholderId
+} from "@uniformdev/canvas";
+import React3 from "react";
+
+// src/components/PureContextualEditingComponentWrapper.tsx
+import {
+  CANVAS_LOCALE_TAG_PARAM,
+  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
+} from "@uniformdev/canvas";
+import React2 from "react";
+var PureContextualEditingComponentWrapper = ({
+  children,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    "script",
+    {
+      "data-role": 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[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__ */ React2.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
+
+// src/components/ContextualEditingComponentWrapper.tsx
+function ContextualEditingComponentWrapper({
+  component,
+  parentComponent,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  emptyPlaceholder,
+  children
+}) {
+  var _a;
+  const isPlaceholder = 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__ */ React3.createElement(React3.Fragment, null, children);
+  }
+  if (isPlaceholder && emptyPlaceholder === null) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(
+    PureContextualEditingComponentWrapper,
+    {
+      isPlaceholder,
+      parentComponent,
+      component,
+      slotName,
+      indexInSlot,
+      slotChildrenCount,
+      isReadOnly
+    },
+    isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children
+  );
+}
+
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = createContext({
   data: void 0,
@@ -387,8 +391,21 @@ function UniformComposition({
   children,
   resolveRenderer,
   contextualEditingEnhancer,
-  contextualEditingDefaultPlaceholder
+  contextualEditingDefaultPlaceholder,
+  // provide default non-undefined values to avoid serialization issues
+  matchedRoute = "",
+  dynamicInputs = {}
 }) {
+  const maybeContext = useUniformContext({ throwOnMissingProvider: false });
+  useEffect2(() => {
+    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,
@@ -397,7 +414,14 @@ function UniformComposition({
   return /* @__PURE__ */ React4.createElement(
     UniformCompositionContext.Provider,
     {
-      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+      value: {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        isContextualEditing,
+        matchedRoute,
+        dynamicInputs
+      }
     },
     /* @__PURE__ */ React4.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React4.createElement(
       UniformComponent,
@@ -412,40 +436,48 @@ function UniformComposition({
   );
 }
 
-// src/components/ContextualEditingComponentWrapper.tsx
-function ContextualEditingComponentWrapper({
-  component,
-  parentComponent,
-  slotName,
-  indexInSlot,
-  slotChildrenCount,
-  emptyPlaceholder,
-  children
-}) {
-  var _a;
-  const isPlaceholder = 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__ */ React5.createElement(React5.Fragment, null, children);
-  }
-  if (isPlaceholder && emptyPlaceholder === null) {
-    return null;
+// 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 = mapSlotToTestVariations(variants);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      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 = mapSlotToPersonalizedVariations((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
+    const { data, matchedRoute, dynamicInputs } = useUniformCurrentComposition();
+    return /* @__PURE__ */ React5.createElement(
+      Personalize,
+      {
+        key,
+        variations: processedVariants,
+        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b[CANVAS_PERSONALIZATION_TAKE_PARAM]) == null ? void 0 : _c.value) != null ? _d : 1),
+        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e[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[CANVAS_PERSONALIZATION_ALGORITHM_PARAM]) == null ? void 0 : _i.value,
+        compositionId: data == null ? void 0 : data._id,
+        matchedRoute,
+        dynamicInputs
+      }
+    );
   }
-  return /* @__PURE__ */ React5.createElement(
-    PureContextualEditingComponentWrapper,
-    {
-      isPlaceholder,
-      parentComponent,
-      component,
-      slotName,
-      indexInSlot,
-      slotChildrenCount,
-      isReadOnly
-    },
-    isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children
-  );
-}
+};
 
 // src/components/UniformSlot.tsx
 function UniformSlot({
@@ -600,7 +632,7 @@ function UniformComponent({
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
-  const contextContextProviderPresent = useUniformContext({ throwOnMissingProvider: false }) !== void 0;
+  const contextContextProviderPresent = useUniformContext2({ 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.`);
@@ -985,7 +1017,7 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect2, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
@@ -1005,7 +1037,7 @@ var useUniformContextualEditingState = ({
     });
     return channel2;
   }, [isContextualEditing]);
-  useEffect2(() => {
+  useEffect3(() => {
     var _a, _b;
     if (!channel) {
       return;