@uniformdev/canvas-vue 18.33.0 → 18.34.0

package/dist/index.esm.js

@@ -150,16 +150,18 @@ var UniformComponent_default = UniformComponent;
 // src/components/UniformComposition.ts
 import {
   computed as computed3,
-  defineComponent as defineComponent3,
-  h as h3,
+  defineComponent as defineComponent4,
+  h as h4,
   inject as inject2,
-  provide as provide2
+  provide as provide2,
+  shallowRef
 } from "vue-demi";
 
 // src/composables/useUniformContextualEditing.ts
 import {
   createCanvasChannel,
   createUniformApiEnhancer,
+  EMPTY_COMPOSITION,
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
   isUpdateCompositionMessage
@@ -174,8 +176,9 @@ var useUniformContextualEditing = ({
   const contextualComposition = ref();
   const composition = computed2(() => {
     var _a;
-    return (_a = contextualComposition.value) != null ? _a : initialCompositionValue;
+    return (_a = contextualComposition.value) != null ? _a : initialCompositionValue == null ? void 0 : initialCompositionValue.value;
   });
+  const isContextualEditing = computed2(() => Boolean(contextualComposition.value));
   const channel = computed2(() => {
     var _a;
     if (!isInContextEditingMode()) {
@@ -188,9 +191,17 @@ var useUniformContextualEditing = ({
     return channel2;
   });
   watch(
-    [channel, () => enhance, () => initialCompositionValue == null ? void 0 : initialCompositionValue._id],
-    () => {
-      if (!channel.value || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
+    [channel, contextualComposition, () => enhance, () => {
+      var _a;
+      return (_a = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _a._id;
+    }],
+    (_newValue, _oldValue, onCleanup) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (((_a = contextualComposition.value) == null ? void 0 : _a._id) && ((_b = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _b._id) !== EMPTY_COMPOSITION._id && ((_c = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _c._id) !== ((_d = contextualComposition.value) == null ? void 0 : _d._id)) {
+        contextualComposition.value = void 0;
+        return;
+      }
+      if (!channel.value || registeredCompositionIds.has((_e = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _e._id)) {
         return;
       }
       const unsubscribe = channel.value.on("update-composition", async (message) => {
@@ -200,11 +211,12 @@ var useUniformContextualEditing = ({
         const enhancedComposition = await enhance(message);
         contextualComposition.value = enhancedComposition;
       });
-      registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
-      return () => {
+      registeredCompositionIds.add((_f = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _f._id);
+      onCleanup(() => {
+        var _a2;
         unsubscribe();
-        registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
-      };
+        registeredCompositionIds.delete((_a2 = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _a2._id);
+      });
     },
     { immediate: true }
   );
@@ -217,7 +229,9 @@ var useUniformContextualEditing = ({
       return;
     }
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
-      framework: "Vue"
+      framework: "Vue",
+      // Make sure to also update the value in canvas-react
+      version: 1
     };
     const script = document.createElement("script");
     script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -226,7 +240,8 @@ var useUniformContextualEditing = ({
     document.head.appendChild(script);
   });
   return {
-    composition
+    composition,
+    isContextualEditing
   };
 };
 function getCanvasInContextEmbedScriptUrl() {
@@ -250,12 +265,69 @@ var useContextualEditing = useUniformContextualEditing;
 // src/utils/constants.ts
 var globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionEnhancer";
 
+// src/components/ContextualEditingComponentWrapper.ts
+import {
+  CANVAS_LOCALE_TAG_PARAM,
+  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+  PLACEHOLDER_ID
+} from "@uniformdev/canvas";
+import { defineComponent as defineComponent3, h as h3 } from "vue-demi";
+var ContextualEditingComponentWrapper = defineComponent3({
+  name: "ContextualEditingComponentWrapper",
+  inheritAttrs: false,
+  props: {
+    component: {
+      type: Object
+    },
+    parentComponent: {
+      type: Object
+    },
+    slotName: {
+      type: String
+    },
+    indexInSlot: {
+      type: Number
+    },
+    slotChildrenCount: {
+      type: Number
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { isContextualEditing } = useUniformCurrentComposition();
+    const isPlaceholder = ((_a = props.component) == null ? void 0 : _a._id) === PLACEHOLDER_ID;
+    return () => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      return !(isContextualEditing == null ? void 0 : isContextualEditing.value) ? (_b = (_a2 = context.slots).default) == null ? void 0 : _b.call(_a2) : [
+        h3("script", {
+          "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+          "data-parent-id": (_c = props.parentComponent) == null ? void 0 : _c._id,
+          "data-parent-type": (_d = props.parentComponent) == null ? void 0 : _d.type,
+          "data-component-id": (_e = props.component) == null ? void 0 : _e._id,
+          "data-slot-name": props.slotName,
+          "data-component-index": props.indexInSlot,
+          "data-total-components": props.slotChildrenCount,
+          "data-component-name": (_f = props.component) == null ? void 0 : _f.type,
+          "data-is-placeholder": isPlaceholder ? "true" : void 0,
+          "data-is-localized": ((_h = (_g = props.component) == null ? void 0 : _g.parameters) == null ? void 0 : _h[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+          // TODO: use a proper way to get the component's title, don't assume that it's always "title"
+          // https://linear.app/uniform/issue/UNI-937/show-the-right-component-title-in-the-highlighter
+          "data-component-title": (_k = (_j = (_i = props.component) == null ? void 0 : _i.parameters) == null ? void 0 : _j.title) == null ? void 0 : _k.value
+        }),
+        isPlaceholder && context.slots.emptyPlaceholder !== void 0 ? context.slots.emptyPlaceholder() : (_m = (_l = context.slots).default) == null ? void 0 : _m.call(_l),
+        h3("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE })
+      ];
+    };
+  }
+});
+
 // src/components/UniformComposition.ts
 var uniformCurrentCompositionInjectionKey = "uniformCurrentComposition";
 var useUniformCurrentComposition = () => {
   return inject2(uniformCurrentCompositionInjectionKey, {});
 };
-var UniformComposition = defineComponent3({
+var UniformComposition = defineComponent4({
   name: "UniformComposition",
   inheritAttrs: false,
   props: {
@@ -280,27 +352,33 @@ var UniformComposition = defineComponent3({
       (composition2) => composition2
     );
     const inheritedContextualEnhancer = (message) => inheritedEnhancer(message.composition);
-    const { composition } = useUniformContextualEditing({
-      initialCompositionValue: props.data,
+    const { composition, isContextualEditing } = useUniformContextualEditing({
+      initialCompositionValue: shallowRef(props.data),
       enhance: (_a = props.contextualEditingEnhancer) != null ? _a : inheritedContextualEnhancer
     });
     provide2(uniformCurrentCompositionInjectionKey, {
       data: composition,
       behaviorTracking: props.behaviorTracking,
-      resolveRenderer: props.resolveRenderer
+      resolveRenderer: props.resolveRenderer,
+      isContextualEditing
     });
     const compositionKey = computed3(() => {
       return JSON.stringify(composition.value);
     });
-    return () => h3(
-      UniformComponent_default,
+    return () => h4(
+      ContextualEditingComponentWrapper,
+      { component: composition.value, key: compositionKey.value },
       {
-        key: compositionKey.value,
-        data: composition.value,
-        behaviorTracking: props.behaviorTracking,
-        resolveRenderer: props.resolveRenderer
-      },
-      context.slots.default
+        default: () => h4(
+          UniformComponent_default,
+          {
+            data: composition.value,
+            behaviorTracking: props.behaviorTracking,
+            resolveRenderer: props.resolveRenderer
+          },
+          context.slots.default
+        )
+      }
     );
   }
 });
@@ -308,18 +386,15 @@ var Composition = UniformComposition;
 
 // src/components/UniformSlot.ts
 import {
-  CANVAS_LOCALE_TAG_PARAM,
   CANVAS_PERSONALIZE_SLOT,
   CANVAS_PERSONALIZE_TYPE,
   CANVAS_TEST_SLOT,
   CANVAS_TEST_TYPE,
-  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
   mapSlotToPersonalizedVariations,
-  mapSlotToTestVariations,
-  PLACEHOLDER_ID
+  mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed4, defineComponent as defineComponent4, h as h4 } from "vue-demi";
+import { computed as computed4, defineComponent as defineComponent5, h as h5 } from "vue-demi";
 
 // src/utils/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -344,7 +419,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = defineComponent4({
+var UniformSlot = defineComponent5({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -390,7 +465,7 @@ function renderPersonalizeComponent(component, resolveRenderer) {
   const parameters = component == null ? void 0 : component.parameters;
   const processedVariants = mapSlotToPersonalizedVariations((_a = component.slots) == null ? void 0 : _a.pz);
   const name = (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.trackingEventName) == null ? void 0 : _c.value) != null ? _d : "Untitled Personalization";
-  return h4(Personalize, {
+  return h5(Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -403,7 +478,7 @@ function renderTestComponent(component, resolveRenderer) {
   const variants = (_b = (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a.test) != null ? _b : [];
   const testName = (_e = (_d = (_c = component == null ? void 0 : component.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
   const finalVariants = mapSlotToTestVariations(variants);
-  return h4(Test, {
+  return h5(Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -418,19 +493,18 @@ function renderComponent({
   slotChildrenCount,
   emptyPlaceholder
 }) {
-  var _a, _b, _c;
   if (component.type === CANVAS_TEST_TYPE) {
     return renderTestComponent(
       component,
       (variantComponent) => {
-        var _a2, _b2;
+        var _a, _b;
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
           parentComponent: component,
           slotName: CANVAS_TEST_SLOT,
-          slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_TEST_SLOT].length,
-          indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_TEST_SLOT].findIndex(
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_TEST_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_TEST_SLOT].findIndex(
             ({ _id }) => variantComponent._id === _id
           )
         });
@@ -441,14 +515,14 @@ function renderComponent({
     return renderPersonalizeComponent(
       component,
       (variantComponent) => {
-        var _a2, _b2;
+        var _a, _b;
         return renderComponent({
           component: variantComponent,
           resolveRenderer,
           parentComponent: component,
           slotName: CANVAS_PERSONALIZE_SLOT,
-          slotChildrenCount: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_PERSONALIZE_SLOT].length,
-          indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_PERSONALIZE_SLOT].findIndex(
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_PERSONALIZE_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_PERSONALIZE_SLOT].findIndex(
             ({ _id }) => variantComponent._id === _id
           )
         });
@@ -458,34 +532,21 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    const shouldRenderContextualEditingTags = Boolean(component._id);
-    const isPlaceholder = component._id === PLACEHOLDER_ID;
-    const elementsToRender = shouldRenderContextualEditingTags ? [
-      h4("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._id,
-        "data-slot-name": slotName,
-        "data-component-index": indexInSlot,
-        "data-total-components": slotChildrenCount,
-        "data-component-name": component.type,
-        "data-is-placeholder": isPlaceholder ? "true" : void 0,
-        "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
-        // TODO: use a proper way to get the component's title, don't assume that it's always "title"
-        // https://linear.app/uniform/issue/UNI-937/show-the-right-component-title-in-the-highlighter
-        "data-component-title": (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value
-      }),
-      isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder() : h4(resolvedComponent, props),
-      h4("script", { "data-role": "component-end" })
-    ] : [h4(resolvedComponent, props)];
-    return h4(UniformComponent, { data: component, resolveRenderer }, () => elementsToRender);
+    return h5(
+      UniformComponent,
+      { data: component, resolveRenderer },
+      () => h5(
+        ContextualEditingComponentWrapper,
+        { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
+        { default: () => h5(resolvedComponent, props), emptyPlaceholder }
+      )
+    );
   }
   console.warn(
     `[canvas] found component of type '${component.type}' which the 'resolveRenderer' prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,
     component
   );
-  return h4("");
+  return h5("");
 }
 var SlotContent = UniformSlot;