@uniformdev/canvas-vue 17.7.0 → 17.7.1-alpha.167

package/dist/index.js

@@ -1 +1,435 @@
-"use strict";var b=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)b(e,o,{get:t[o],enumerable:!0})},z=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of j(t))!M.call(e,n)&&n!==o&&b(e,n,{get:()=>t[n],enumerable:!(s=V(t,n))||s.enumerable});return e};var D=e=>z(b({},"__esModule",{value:!0}),e);var Z={};L(Z,{CANVAS_COMPOSITION_TYPE:()=>w,CANVAS_SLOT_CONTENT_TYPE:()=>g,Composition:()=>x,DefaultNotImplementedComponent:()=>B,SlotContent:()=>F,compositionInjectionKey:()=>R,convertComponentToProps:()=>N,createApiEnhancer:()=>G,resolveRendererInjectionKey:()=>h,useCompositionEventEffect:()=>q,useContextualEditing:()=>H});module.exports=D(Z);var O=require("@uniformdev/canvas"),P=require("@uniformdev/context-vue"),p=require("vue-demi");var w="Composition",g="SlotContent",R="uniformComposition",h="uniformResolveRenderer";var x=(0,p.defineComponent)({name:w,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>(0,p.resolveComponent)(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var l,i,T;let o=(0,p.computed)(()=>{var d,f;return(f=e.data)!=null?f:(d=(0,p.inject)(R))==null?void 0:d.value}),s=(l=e.resolveRenderer)!=null?l:(0,p.inject)(h);(0,p.provide)(R,o),(0,p.provide)(h,s);let n=(0,p.computed)(()=>{var d,f;return(f=(d=o.value)==null?void 0:d.slots)!=null?f:{}}),r=(0,p.computed)(()=>{var d,f;return(f=(d=o.value)==null?void 0:d.parameters)!=null?f:{}}),m=(0,p.computed)(()=>JSON.stringify(o.value)),c=(T=(i=o.value.parameters)==null?void 0:i[O.CANVAS_ENRICHMENT_TAG_PARAM])==null?void 0:T.value,a=()=>{var d,f;return(f=(d=t.slots).default)==null?void 0:f.call(d,{slots:n.value,parameters:r.value})};if((0,P.isUsingUniformContext)()){let d=e.behaviorTracking==="onLoad"?P.TrackSlot:P.Track;return()=>(0,p.h)(d,{behavior:c,key:m.value},a)}return a}});var C=require("vue-demi"),K={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},Y={margin:"0 0 1rem"},B=(0,C.defineComponent)({name:"DefaultNotImplementedComponent",props:{component:{type:Object,required:!0}},setup(e,{attrs:t}){var s;let o=(s=e.component)==null?void 0:s.type;return()=>(0,C.h)("div",{key:"content",style:{...K}},[(0,C.h)("h2",{style:{...Y}},`Component: ${o}`),(0,C.h)("p",[(0,C.h)("strong",`${o} has no Vue implementation. It may need to be added to your `),(0,C.h)("code",{},"resolveRenderer()"),(0,C.h)("strong",{}," function.")]),(0,C.h)("details",{},[(0,C.h)("summary",{},"props/attributes"),(0,C.h)("pre",{style:{overflowX:"auto"}},`${JSON.stringify(t)}`)])])}});var y=require("@uniformdev/canvas"),E=require("@uniformdev/context-vue"),u=require("vue-demi");function N(e){var n;let t=(n=e.parameters)!=null?n:{};return{...Object.entries(t).reduce((r,[m,{value:c}])=>({...r,[$(m)]:c}),{}),...e.data,component:e}}function $(e){return e.replace("$","")}var F=(0,u.defineComponent)({name:g,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var c;let o=(0,u.inject)(R),s=(c=e.resolveRenderer)!=null?c:(0,u.inject)(h),n=t.slots.emptyPlaceholder;if(!o||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let r=(0,u.computed)(()=>{var a,l,i;return e.name?(l=(a=o==null?void 0:o.value.slots)==null?void 0:a[e.name])!=null?l:[]:Object.values((i=o==null?void 0:o.value.slots)!=null?i:{}).flat()}),m=r.value.map((a,l)=>{let i=_({component:a,resolveRenderer:s,indexInSlot:l,slotName:e.name,parentComponent:o.value,slotChildrenCount:r.value.length,emptyPlaceholder:n});return t.slots.default?t.slots.default({child:i,component:a}):i});return()=>m}});function J(e,t){var r,m,c,a,l,i;let o=e==null?void 0:e.parameters,s=(0,y.mapSlotToPersonalizedVariations)((r=e.slots)==null?void 0:r.pz),n=(a=(c=(m=e.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization";return(0,u.h)(E.Personalize,{name:n,component:T=>t(T),variations:s,count:Number((i=(l=o==null?void 0:o.count)==null?void 0:l.value)!=null?i:1)})}function X(e,t){var r,m,c,a,l;let o=(m=(r=e==null?void 0:e.slots)==null?void 0:r.test)!=null?m:[],s=(l=(a=(c=e==null?void 0:e.parameters)==null?void 0:c.test)==null?void 0:a.value)!=null?l:"Untitled Test",n=(0,y.mapSlotToTestVariations)(o);return(0,u.h)(E.Test,{variations:n,name:s,component:i=>t(i)})}function _({component:e,resolveRenderer:t,indexInSlot:o,slotName:s,parentComponent:n,slotChildrenCount:r,emptyPlaceholder:m}){var a,l;if(e.type===y.CANVAS_TEST_TYPE)return X(e,i=>_({component:i,resolveRenderer:t}));if(e.type===y.CANVAS_PERSONALIZE_TYPE)return J(e,i=>_({component:i,resolveRenderer:t}));let c=t==null?void 0:t(e);if(c){let i=N(e),T=Boolean(e._id),d=e._id===y.PLACEHOLDER_ID,f=T?[(0,u.h)("script",{"data-role":y.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,"data-parent-id":n==null?void 0:n._id,"data-parent-type":n==null?void 0:n.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":o,"data-total-components":r,"data-component-name":e.type,"data-is-placeholder":d?"true":void 0,"data-component-title":(l=(a=e.parameters)==null?void 0:a.title)==null?void 0:l.value}),d&&m!==void 0?m():(0,u.h)(c,i),(0,u.h)("script",{"data-role":"component-end"})]:[(0,u.h)(c,i)];return(0,u.h)(x,{data:e,resolveRenderer:t},()=>f)}return console.warn(`[canvas] found component of type '${e.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.`,e),(0,u.h)("")}var I=require("@uniformdev/canvas"),A=require("vue-demi");async function q({enabled:e,projectId:t,compositionIdRef:o,effect:s}){let n;(0,A.watch)([()=>e,()=>o.value,()=>t],async()=>{if(n==null||n(),!e||!o.value||!t)return;let r=await(0,I.createEventBus)();r&&(n=(0,I.subscribeToComposition)({eventBus:r,compositionId:o.value,compositionState:I.CANVAS_DRAFT_STATE,projectId:t,callback:s,event:"updated"}))},{immediate:!0})}var S=require("@uniformdev/canvas"),v=require("vue-demi"),k="uniform-canvas-preview-script",G=({apiUrl:e})=>async t=>{let o=await fetch(e,{method:"post",body:JSON.stringify({composition:t.composition,hash:t.hash}),headers:{"Content-Type":"application/json"}}),s=await o.json();if(!o.ok)throw new Error("Error reading enhanced composition");return s.composition},H=({initialCompositionValue:e,enhance:t=o=>o.composition})=>{let o=(0,v.ref)(),s=(0,v.computed)(()=>{var r;return U()?(0,S.createCanvasChannel)({broadcastTo:[(r=window.opener)!=null?r:window.top],listenTo:[window]}):void 0});return(0,v.watch)([s,()=>t],()=>{if(!s.value)return;let n=s.value.on("update-composition",async r=>{if((0,S.isUpdateCompositionMessage)(r)){let m=await t(r);o.value=m}});return()=>{n()}},{immediate:!0}),(0,v.onMounted)(()=>{if(!U()||document.getElementById(k))return;let r=document.createElement("script");r.id=k,r.src=Q(),r.async=!0,document.head.appendChild(r)}),{composition:o!=null?o:e}};function Q(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function U(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(S.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM),t=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&t}0&&(module.exports={CANVAS_COMPOSITION_TYPE,CANVAS_SLOT_CONTENT_TYPE,Composition,DefaultNotImplementedComponent,SlotContent,compositionInjectionKey,convertComponentToProps,createApiEnhancer,resolveRendererInjectionKey,useCompositionEventEffect,useContextualEditing});
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CANVAS_COMPOSITION_TYPE: () => CANVAS_COMPOSITION_TYPE,
+  CANVAS_SLOT_CONTENT_TYPE: () => CANVAS_SLOT_CONTENT_TYPE,
+  Composition: () => Composition,
+  DefaultNotImplementedComponent: () => DefaultNotImplementedComponent,
+  SlotContent: () => SlotContent,
+  compositionInjectionKey: () => compositionInjectionKey,
+  convertComponentToProps: () => convertComponentToProps,
+  createApiEnhancer: () => createApiEnhancer,
+  resolveRendererInjectionKey: () => resolveRendererInjectionKey,
+  useCompositionEventEffect: () => useCompositionEventEffect,
+  useContextualEditing: () => useContextualEditing
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Composition.ts
+var import_canvas = require("@uniformdev/canvas");
+var import_context_vue = require("@uniformdev/context-vue");
+var import_vue_demi = require("vue-demi");
+
+// src/utils/constants.ts
+var CANVAS_COMPOSITION_TYPE = "Composition";
+var CANVAS_SLOT_CONTENT_TYPE = "SlotContent";
+var compositionInjectionKey = "uniformComposition";
+var resolveRendererInjectionKey = "uniformResolveRenderer";
+
+// src/components/Composition.ts
+var Composition = (0, import_vue_demi.defineComponent)({
+  name: CANVAS_COMPOSITION_TYPE,
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    resolveRenderer: {
+      type: Function,
+      default: () => ({ type }) => (0, import_vue_demi.resolveComponent)(type)
+    },
+    behaviorTracking: {
+      type: String,
+      default: "onView"
+    }
+  },
+  setup(props, context) {
+    var _a, _b, _c;
+    const data = (0, import_vue_demi.computed)(() => {
+      var _a2, _b2;
+      return (_b2 = props.data) != null ? _b2 : (_a2 = (0, import_vue_demi.inject)(compositionInjectionKey)) == null ? void 0 : _a2.value;
+    });
+    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : (0, import_vue_demi.inject)(resolveRendererInjectionKey);
+    (0, import_vue_demi.provide)(compositionInjectionKey, data);
+    (0, import_vue_demi.provide)(resolveRendererInjectionKey, resolveRenderer);
+    const slots = (0, import_vue_demi.computed)(() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = data.value) == null ? void 0 : _a2.slots) != null ? _b2 : {};
+    });
+    const parameters = (0, import_vue_demi.computed)(() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = data.value) == null ? void 0 : _a2.parameters) != null ? _b2 : {};
+    });
+    const componentKey = (0, import_vue_demi.computed)(() => {
+      return JSON.stringify(data.value);
+    });
+    const enrichmentTags = (_c = (_b = data.value.parameters) == null ? void 0 : _b[import_canvas.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
+    const renderChildren = () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = context.slots).default) == null ? void 0 : _b2.call(_a2, {
+        slots: slots.value,
+        parameters: parameters.value
+      });
+    };
+    if ((0, import_context_vue.isUsingUniformContext)()) {
+      const TrackComponent = props.behaviorTracking === "onLoad" ? import_context_vue.TrackSlot : import_context_vue.Track;
+      return () => (0, import_vue_demi.h)(
+        TrackComponent,
+        { behavior: enrichmentTags, key: componentKey.value },
+        renderChildren
+      );
+    }
+    return renderChildren;
+  }
+});
+
+// src/components/DefaultNotImplementedComponent.ts
+var import_vue_demi2 = require("vue-demi");
+var inlineStyles = {
+  borderLeft: "10px solid #e42535",
+  background: "rgba(122, 215, 218, 0.3)",
+  color: "#1d3557",
+  padding: "1rem",
+  textAlign: "left",
+  margin: "1rem 5vw"
+};
+var headingStyle = {
+  margin: "0 0 1rem"
+};
+var DefaultNotImplementedComponent = (0, import_vue_demi2.defineComponent)({
+  name: "DefaultNotImplementedComponent",
+  props: {
+    component: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { attrs }) {
+    var _a;
+    const componentType = (_a = props.component) == null ? void 0 : _a.type;
+    return () => (0, import_vue_demi2.h)("div", { key: "content", style: { ...inlineStyles } }, [
+      (0, import_vue_demi2.h)("h2", { style: { ...headingStyle } }, `Component: ${componentType}`),
+      (0, import_vue_demi2.h)("p", [
+        (0, import_vue_demi2.h)("strong", `${componentType} has no Vue implementation. It may need to be added to your `),
+        (0, import_vue_demi2.h)("code", {}, "resolveRenderer()"),
+        (0, import_vue_demi2.h)("strong", {}, " function.")
+      ]),
+      (0, import_vue_demi2.h)("details", {}, [
+        (0, import_vue_demi2.h)("summary", {}, "props/attributes"),
+        (0, import_vue_demi2.h)(
+          "pre",
+          {
+            style: {
+              overflowX: "auto"
+            }
+          },
+          `${JSON.stringify(attrs)}`
+        )
+      ])
+    ]);
+  }
+});
+
+// src/components/SlotContent.ts
+var import_canvas2 = require("@uniformdev/canvas");
+var import_context_vue2 = require("@uniformdev/context-vue");
+var import_vue_demi3 = require("vue-demi");
+
+// src/utils/convertComponentToProps.ts
+function convertComponentToProps(component) {
+  var _a;
+  const parameters = (_a = component.parameters) != null ? _a : {};
+  const flatParams = Object.entries(parameters).reduce(
+    (props, [key, { value }]) => ({
+      ...props,
+      [normalizePropName(key)]: value
+    }),
+    {}
+  );
+  const renderComponentProps = {
+    ...flatParams,
+    ...component.data,
+    component
+  };
+  return renderComponentProps;
+}
+function normalizePropName(name) {
+  return name.replace("$", "");
+}
+
+// src/components/SlotContent.ts
+var SlotContent = (0, import_vue_demi3.defineComponent)({
+  name: CANVAS_SLOT_CONTENT_TYPE,
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String
+    },
+    resolveRenderer: {
+      type: Function
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const componentData = (0, import_vue_demi3.inject)(compositionInjectionKey);
+    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : (0, import_vue_demi3.inject)(resolveRendererInjectionKey);
+    const emptyPlaceholder = context.slots.emptyPlaceholder;
+    if (!componentData || !resolveRenderer) {
+      throw new Error("<SlotContent /> can only be used inside a <Composition />");
+    }
+    const slotItems = (0, import_vue_demi3.computed)(() => {
+      var _a2, _b, _c;
+      if (props.name) {
+        return (_b = (_a2 = componentData == null ? void 0 : componentData.value.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
+      }
+      return Object.values((_c = componentData == null ? void 0 : componentData.value.slots) != null ? _c : {}).flat();
+    });
+    const childrenToRender = slotItems.value.map((component, index) => {
+      const child = renderComponent({
+        component,
+        resolveRenderer,
+        indexInSlot: index,
+        slotName: props.name,
+        parentComponent: componentData.value,
+        slotChildrenCount: slotItems.value.length,
+        emptyPlaceholder
+      });
+      return context.slots.default ? context.slots.default({ child, component }) : child;
+    });
+    return () => childrenToRender;
+  }
+});
+function renderPersonalizeComponent(component, resolveRenderer) {
+  var _a, _b, _c, _d, _e, _f;
+  const parameters = component == null ? void 0 : component.parameters;
+  const processedVariants = (0, import_canvas2.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 (0, import_vue_demi3.h)(import_context_vue2.Personalize, {
+    name,
+    component: (variant) => resolveRenderer(variant),
+    variations: processedVariants,
+    count: Number((_f = (_e = parameters == null ? void 0 : parameters.count) == null ? void 0 : _e.value) != null ? _f : 1)
+  });
+}
+function renderTestComponent(component, resolveRenderer) {
+  var _a, _b, _c, _d, _e;
+  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 = (0, import_canvas2.mapSlotToTestVariations)(variants);
+  return (0, import_vue_demi3.h)(import_context_vue2.Test, {
+    variations: finalVariants,
+    name: testName,
+    component: (variant) => resolveRenderer(variant)
+  });
+}
+function renderComponent({
+  component,
+  resolveRenderer,
+  indexInSlot,
+  slotName,
+  parentComponent,
+  slotChildrenCount,
+  emptyPlaceholder
+}) {
+  var _a, _b;
+  if (component.type === import_canvas2.CANVAS_TEST_TYPE) {
+    return renderTestComponent(
+      component,
+      (component2) => renderComponent({ component: component2, resolveRenderer })
+    );
+  }
+  if (component.type === import_canvas2.CANVAS_PERSONALIZE_TYPE) {
+    return renderPersonalizeComponent(
+      component,
+      (component2) => renderComponent({ component: component2, resolveRenderer })
+    );
+  }
+  const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
+  if (resolvedComponent) {
+    const props = convertComponentToProps(component);
+    const shouldRenderContextualEditingTags = Boolean(component._id);
+    const isPlaceholder = component._id === import_canvas2.PLACEHOLDER_ID;
+    const elementsToRender = shouldRenderContextualEditingTags ? [
+      (0, import_vue_demi3.h)("script", {
+        "data-role": import_canvas2.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-component-title": (_b = (_a = component.parameters) == null ? void 0 : _a.title) == null ? void 0 : _b.value
+      }),
+      isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder() : (0, import_vue_demi3.h)(resolvedComponent, props),
+      (0, import_vue_demi3.h)("script", { "data-role": "component-end" })
+    ] : [(0, import_vue_demi3.h)(resolvedComponent, props)];
+    return (0, import_vue_demi3.h)(Composition, { data: component, resolveRenderer }, () => elementsToRender);
+  }
+  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 (0, import_vue_demi3.h)("");
+}
+
+// src/composables/useCompositionEventEffect.ts
+var import_canvas3 = require("@uniformdev/canvas");
+var import_vue_demi4 = require("vue-demi");
+async function useCompositionEventEffect({
+  enabled,
+  projectId,
+  compositionIdRef,
+  effect
+}) {
+  let unsubscribe;
+  (0, import_vue_demi4.watch)(
+    [() => enabled, () => compositionIdRef.value, () => projectId],
+    async () => {
+      unsubscribe == null ? void 0 : unsubscribe();
+      if (!enabled || !compositionIdRef.value || !projectId) {
+        return;
+      }
+      const eventBus = await (0, import_canvas3.createEventBus)();
+      if (eventBus) {
+        unsubscribe = (0, import_canvas3.subscribeToComposition)({
+          eventBus,
+          compositionId: compositionIdRef.value,
+          compositionState: import_canvas3.CANVAS_DRAFT_STATE,
+          projectId,
+          callback: effect,
+          event: "updated"
+        });
+      }
+    },
+    { immediate: true }
+  );
+}
+
+// src/composables/useContextualEditing.ts
+var import_canvas4 = require("@uniformdev/canvas");
+var import_vue_demi5 = require("vue-demi");
+var previewScriptId = "uniform-canvas-preview-script";
+var createApiEnhancer = ({ apiUrl }) => {
+  return async (message) => {
+    const response = await fetch(apiUrl, {
+      method: "post",
+      body: JSON.stringify({
+        composition: message.composition,
+        hash: message.hash
+      }),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    const json = await response.json();
+    if (!response.ok) {
+      throw new Error("Error reading enhanced composition");
+    }
+    const body = json;
+    return body.composition;
+  };
+};
+var useContextualEditing = ({
+  initialCompositionValue,
+  enhance = (message) => message.composition
+}) => {
+  const contextualComposition = (0, import_vue_demi5.ref)();
+  const channel = (0, import_vue_demi5.computed)(() => {
+    var _a;
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const channel2 = (0, import_canvas4.createCanvasChannel)({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return channel2;
+  });
+  (0, import_vue_demi5.watch)(
+    [channel, () => enhance],
+    () => {
+      if (!channel.value) {
+        return;
+      }
+      const unsubscribe = channel.value.on("update-composition", async (message) => {
+        if ((0, import_canvas4.isUpdateCompositionMessage)(message)) {
+          const composition = await enhance(message);
+          contextualComposition.value = composition;
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    },
+    { immediate: true }
+  );
+  (0, import_vue_demi5.onMounted)(() => {
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const existingScript = document.getElementById(previewScriptId);
+    if (existingScript) {
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = previewScriptId;
+    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_canvas4.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+  );
+  const isAllowlistedReferrer = Boolean(
+    window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
+  );
+  return isOpenedByInContextEditor && isAllowlistedReferrer;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CANVAS_COMPOSITION_TYPE,
+  CANVAS_SLOT_CONTENT_TYPE,
+  Composition,
+  DefaultNotImplementedComponent,
+  SlotContent,
+  compositionInjectionKey,
+  convertComponentToProps,
+  createApiEnhancer,
+  resolveRendererInjectionKey,
+  useCompositionEventEffect,
+  useContextualEditing
+});