@uniformdev/canvas-vue 17.7.1-alpha.34 → 18.0.0

package/LICENSE.txt

@@ -1,2 +1,2 @@
-© 2022 Uniform Systems, Inc. All Rights Reserved.
+© 2023 Uniform Systems, Inc. All Rights Reserved.
 See details of Uniform Systems, Inc. Master Subscription Agreement here: https://uniform.dev/eula

package/dist/index.d.ts

@@ -24,12 +24,12 @@ interface PersonalizeComponent {
  * TProps is the Canvas component's parameters object after
  * all enhancers have been applied.
  */
-declare type ComponentProps<TProps = unknown> = TProps & {
+type ComponentProps<TProps = unknown> = TProps & {
     component: ComponentInstance;
 };
-declare type ResolveRenderer = (componentInstance: ComponentInstance) => ConcreteComponent<any>;
+type ResolveRenderer = (componentInstance: ComponentInstance) => ConcreteComponent<any>;
 
-declare type CompositionProps = {
+type CompositionProps = {
     /** A dynamic vue component that provides data to the Uniform Canvas SlotContent component via provide/inject */
     data: ComponentInstance;
     /** Resolves a Vue component to render a Canvas component, generally by inspecting type/variant */
@@ -81,7 +81,7 @@ declare const Composition: vue_demi.DefineComponent<{
     behaviorTracking: "onLoad" | "onView" | undefined;
 }>;
 
-declare type DefaultNotImplementedComponentProps = {
+type DefaultNotImplementedComponentProps = {
     component: ComponentInstance;
 };
 declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
@@ -98,7 +98,7 @@ declare const DefaultNotImplementedComponent: vue_demi.DefineComponent<{
     };
 }>>, {}>;
 
-declare type SlotComponentProps = {
+type SlotComponentProps = {
     /** Name of the slot to render */
     name?: string;
     /**
@@ -128,7 +128,7 @@ declare const SlotContent: vue_demi.DefineComponent<{
     };
 }>>, {}>;
 
-declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback' | 'compositionId'> & {
+type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback' | 'compositionId'> & {
     compositionIdRef: Ref<SubscribeToCompositionOptions['compositionId']>;
     enabled: boolean;
     effect: () => void;

package/dist/index.esm.js

@@ -1 +1,440 @@
-import{CANVAS_ENRICHMENT_TAG_PARAM as N}from"@uniformdev/canvas";import{isUsingUniformContext as _,Track as O,TrackSlot as A}from"@uniformdev/context-vue";import{computed as T,defineComponent as k,h as U,inject as I,provide as S,resolveComponent as V}from"vue-demi";var h="Composition",P="SlotContent",y="uniformComposition",v="uniformResolveRenderer";var E=k({name:h,inheritAttrs:!1,props:{data:{type:Object,required:!0},resolveRenderer:{type:Function,default:()=>({type:e})=>V(e)},behaviorTracking:{type:String,default:"onView"}},setup(e,t){var c,i,C;let o=T(()=>{var l,d;return(d=e.data)!=null?d:(l=I(y))==null?void 0:l.value}),s=(c=e.resolveRenderer)!=null?c:I(v);S(y,o),S(v,s);let r=T(()=>{var l,d;return(d=(l=o.value)==null?void 0:l.slots)!=null?d:{}}),n=T(()=>{var l,d;return(d=(l=o.value)==null?void 0:l.parameters)!=null?d:{}}),p=T(()=>JSON.stringify(o.value)),m=(C=(i=o.value.parameters)==null?void 0:i[N])==null?void 0:C.value,a=()=>{var l,d;return(d=(l=t.slots).default)==null?void 0:d.call(l,{slots:r.value,parameters:n.value})};if(_()){let l=e.behaviorTracking==="onLoad"?A:O;return()=>U(l,{behavior:m,key:p.value},a)}return a}});import{defineComponent as j,h as u}from"vue-demi";var M={borderLeft:"10px solid #e42535",background:"rgba(122, 215, 218, 0.3)",color:"#1d3557",padding:"1rem",textAlign:"left",margin:"1rem 5vw"},L={margin:"0 0 1rem"},Te=j({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()=>u("div",{key:"content",style:{...M}},[u("h2",{style:{...L}},`Component: ${o}`),u("p",[u("strong",`${o} has no Vue implementation. It may need to be added to your `),u("code",{},"resolveRenderer()"),u("strong",{}," function.")]),u("details",{},[u("summary",{},"props/attributes"),u("pre",{style:{overflowX:"auto"}},`${JSON.stringify(t)}`)])])}});import{CANVAS_PERSONALIZE_TYPE as D,CANVAS_TEST_TYPE as K,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as Y,mapSlotToPersonalizedVariations as B,mapSlotToTestVariations as $,PLACEHOLDER_ID as F}from"@uniformdev/canvas";import{Personalize as J,Test as X}from"@uniformdev/context-vue";import{computed as q,defineComponent as G,h as f,inject as w}from"vue-demi";function b(e){var r;let t=(r=e.parameters)!=null?r:{};return{...Object.entries(t).reduce((n,[p,{value:m}])=>({...n,[z(p)]:m}),{}),...e.data,component:e}}function z(e){return e.replace("$","")}var ge=G({name:P,inheritAttrs:!1,props:{name:{type:String},resolveRenderer:{type:Function}},setup(e,t){var m;let o=w(y),s=(m=e.resolveRenderer)!=null?m:w(v),r=t.slots.emptyPlaceholder;if(!o||!s)throw new Error("<SlotContent /> can only be used inside a <Composition />");let n=q(()=>{var a,c,i;return e.name?(c=(a=o==null?void 0:o.value.slots)==null?void 0:a[e.name])!=null?c:[]:Object.values((i=o==null?void 0:o.value.slots)!=null?i:{}).flat()}),p=n.value.map((a,c)=>{let i=R({component:a,resolveRenderer:s,indexInSlot:c,slotName:e.name,parentComponent:o.value,slotChildrenCount:n.value.length,emptyPlaceholder:r});return t.slots.default?t.slots.default({child:i,component:a}):i});return()=>p}});function H(e,t){var n,p,m,a,c,i;let o=e==null?void 0:e.parameters,s=B((n=e.slots)==null?void 0:n.pz),r=(a=(m=(p=e.parameters)==null?void 0:p.trackingEventName)==null?void 0:m.value)!=null?a:"Untitled Personalization";return f(J,{name:r,component:C=>t(C),variations:s,count:Number((i=(c=o==null?void 0:o.count)==null?void 0:c.value)!=null?i:1)})}function Q(e,t){var n,p,m,a,c;let o=(p=(n=e==null?void 0:e.slots)==null?void 0:n.test)!=null?p:[],s=(c=(a=(m=e==null?void 0:e.parameters)==null?void 0:m.test)==null?void 0:a.value)!=null?c:"Untitled Test",r=$(o);return f(X,{variations:r,name:s,component:i=>t(i)})}function R({component:e,resolveRenderer:t,indexInSlot:o,slotName:s,parentComponent:r,slotChildrenCount:n,emptyPlaceholder:p}){var a,c;if(e.type===K)return Q(e,i=>R({component:i,resolveRenderer:t}));if(e.type===D)return H(e,i=>R({component:i,resolveRenderer:t}));let m=t==null?void 0:t(e);if(m){let i=b(e),C=Boolean(e._id),l=e._id===F,d=C?[f("script",{"data-role":Y,"data-parent-id":r==null?void 0:r._id,"data-parent-type":r==null?void 0:r.type,"data-component-id":e._id,"data-slot-name":s,"data-component-index":o,"data-total-components":n,"data-component-name":e.type,"data-is-placeholder":l?"true":void 0,"data-component-title":(c=(a=e.parameters)==null?void 0:a.title)==null?void 0:c.value}),l&&p!==void 0?p():f(m,i),f("script",{"data-role":"component-end"})]:[f(m,i)];return f(E,{data:e,resolveRenderer:t},()=>d)}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),f("")}import{CANVAS_DRAFT_STATE as Z,createEventBus as W,subscribeToComposition as ee}from"@uniformdev/canvas";import{watch as oe}from"vue-demi";async function Oe({enabled:e,projectId:t,compositionIdRef:o,effect:s}){let r;oe([()=>e,()=>o.value,()=>t],async()=>{if(r==null||r(),!e||!o.value||!t)return;let n=await W();n&&(r=ee({eventBus:n,compositionId:o.value,compositionState:Z,projectId:t,callback:s,event:"updated"}))},{immediate:!0})}import{createCanvasChannel as te,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as ne,isUpdateCompositionMessage as re}from"@uniformdev/canvas";import{computed as se,onMounted as ie,ref as ae,watch as pe}from"vue-demi";var g="uniform-canvas-preview-script",Me=({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},Le=({initialCompositionValue:e,enhance:t=o=>o.composition})=>{let o=ae(),s=se(()=>{var n;return x()?te({broadcastTo:[(n=window.opener)!=null?n:window.top],listenTo:[window]}):void 0});return pe([s,()=>t],()=>{if(!s.value)return;let r=s.value.on("update-composition",async n=>{if(re(n)){let p=await t(n);o.value=p}});return()=>{r()}},{immediate:!0}),ie(()=>{if(!x()||document.getElementById(g))return;let n=document.createElement("script");n.id=g,n.src=me(),n.async=!0,document.head.appendChild(n)}),{composition:o!=null?o:e}};function me(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function x(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(ne),t=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&t}export{h as CANVAS_COMPOSITION_TYPE,P as CANVAS_SLOT_CONTENT_TYPE,E as Composition,Te as DefaultNotImplementedComponent,ge as SlotContent,y as compositionInjectionKey,b as convertComponentToProps,Me as createApiEnhancer,v as resolveRendererInjectionKey,Oe as useCompositionEventEffect,Le as useContextualEditing};
+// src/components/Composition.ts
+import { CANVAS_ENRICHMENT_TAG_PARAM } from "@uniformdev/canvas";
+import { isUsingUniformContext, Track, TrackSlot } from "@uniformdev/context-vue";
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  provide,
+  resolveComponent as nativeResolveComponent
+} from "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 = defineComponent({
+  name: CANVAS_COMPOSITION_TYPE,
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    resolveRenderer: {
+      type: Function,
+      default: () => ({ type }) => nativeResolveComponent(type)
+    },
+    behaviorTracking: {
+      type: String,
+      default: "onView"
+    }
+  },
+  setup(props, context) {
+    var _a, _b, _c;
+    const data = computed(() => {
+      var _a2, _b2;
+      return (_b2 = props.data) != null ? _b2 : (_a2 = inject(compositionInjectionKey)) == null ? void 0 : _a2.value;
+    });
+    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : inject(resolveRendererInjectionKey);
+    provide(compositionInjectionKey, data);
+    provide(resolveRendererInjectionKey, resolveRenderer);
+    const slots = computed(() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = data.value) == null ? void 0 : _a2.slots) != null ? _b2 : {};
+    });
+    const parameters = computed(() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = data.value) == null ? void 0 : _a2.parameters) != null ? _b2 : {};
+    });
+    const componentKey = computed(() => {
+      return JSON.stringify(data.value);
+    });
+    const enrichmentTags = (_c = (_b = data.value.parameters) == null ? void 0 : _b[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 (isUsingUniformContext()) {
+      const TrackComponent = props.behaviorTracking === "onLoad" ? TrackSlot : Track;
+      return () => h(
+        TrackComponent,
+        { behavior: enrichmentTags, key: componentKey.value },
+        renderChildren
+      );
+    }
+    return renderChildren;
+  }
+});
+
+// src/components/DefaultNotImplementedComponent.ts
+import { CANVAS_LOCALIZATION_TYPE } from "@uniformdev/canvas";
+import { defineComponent as defineComponent2, h as h2 } from "vue-demi";
+var wrapperStyles = {
+  borderLeft: "4px solid #e42535",
+  padding: "16px",
+  fontSize: "16px",
+  borderRadius: "0 8px 8px 0",
+  margin: "8px",
+  backgroundColor: "rgba(255, 255, 255, 0.45)",
+  color: "#1d3557"
+};
+var DefaultNotImplementedComponent = defineComponent2({
+  name: "DefaultNotImplementedComponent",
+  props: {
+    component: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { attrs }) {
+    var _a;
+    const componentType = (_a = props.component) == null ? void 0 : _a.type;
+    if (componentType === CANVAS_LOCALIZATION_TYPE) {
+      h2("div", { key: "content", style: wrapperStyles }, [
+        h2("p", [
+          `Seems like localization is not enabled in your application. Please read our documentation on how to `,
+          h2(
+            "a",
+            {
+              href: "https://docs.uniform.app/guides/composition/localization#activate-front-end",
+              target: "_blank",
+              style: { fontWeight: "bolder", textDecoration: "underline" }
+            },
+            "enable localization in your front-end application."
+          )
+        ])
+      ]);
+    }
+    return () => h2("div", { key: "content", style: wrapperStyles }, [
+      h2("h2", {}, `Component: ${componentType}`),
+      h2("p", [
+        h2("strong", `${componentType} has no Vue implementation. It may need to be added to your `),
+        h2("code", {}, "resolveRenderer()"),
+        h2("strong", {}, " function.")
+      ]),
+      h2("details", {}, [
+        h2("summary", {}, "props/attributes"),
+        h2(
+          "pre",
+          {
+            style: {
+              overflowX: "auto"
+            }
+          },
+          `${JSON.stringify(attrs)}`
+        )
+      ])
+    ]);
+  }
+});
+
+// src/components/SlotContent.ts
+import {
+  CANVAS_PERSONALIZE_TYPE,
+  CANVAS_TEST_TYPE,
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+  mapSlotToPersonalizedVariations,
+  mapSlotToTestVariations,
+  PLACEHOLDER_ID
+} from "@uniformdev/canvas";
+import { Personalize, Test } from "@uniformdev/context-vue";
+import {
+  computed as computed2,
+  defineComponent as defineComponent3,
+  h as h3,
+  inject as inject2
+} from "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 = defineComponent3({
+  name: CANVAS_SLOT_CONTENT_TYPE,
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String
+    },
+    resolveRenderer: {
+      type: Function
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const componentData = inject2(compositionInjectionKey);
+    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : inject2(resolveRendererInjectionKey);
+    const emptyPlaceholder = context.slots.emptyPlaceholder;
+    if (!componentData || !resolveRenderer) {
+      throw new Error("<SlotContent /> can only be used inside a <Composition />");
+    }
+    const slotItems = computed2(() => {
+      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 = 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 h3(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 = mapSlotToTestVariations(variants);
+  return h3(Test, {
+    variations: finalVariants,
+    name: testName,
+    component: (variant) => resolveRenderer(variant)
+  });
+}
+function renderComponent({
+  component,
+  resolveRenderer,
+  indexInSlot,
+  slotName,
+  parentComponent,
+  slotChildrenCount,
+  emptyPlaceholder
+}) {
+  var _a, _b;
+  if (component.type === CANVAS_TEST_TYPE) {
+    return renderTestComponent(
+      component,
+      (component2) => renderComponent({ component: component2, resolveRenderer })
+    );
+  }
+  if (component.type === 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 === PLACEHOLDER_ID;
+    const elementsToRender = shouldRenderContextualEditingTags ? [
+      h3("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-component-title": (_b = (_a = component.parameters) == null ? void 0 : _a.title) == null ? void 0 : _b.value
+      }),
+      isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder() : h3(resolvedComponent, props),
+      h3("script", { "data-role": "component-end" })
+    ] : [h3(resolvedComponent, props)];
+    return h3(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 h3("");
+}
+
+// src/composables/useCompositionEventEffect.ts
+import {
+  CANVAS_DRAFT_STATE,
+  createEventBus,
+  subscribeToComposition
+} from "@uniformdev/canvas";
+import { watch } from "vue-demi";
+async function useCompositionEventEffect({
+  enabled,
+  projectId,
+  compositionIdRef,
+  effect
+}) {
+  let unsubscribe;
+  watch(
+    [() => enabled, () => compositionIdRef.value, () => projectId],
+    async () => {
+      unsubscribe == null ? void 0 : unsubscribe();
+      if (!enabled || !compositionIdRef.value || !projectId) {
+        return;
+      }
+      const eventBus = await createEventBus();
+      if (eventBus) {
+        unsubscribe = subscribeToComposition({
+          eventBus,
+          compositionId: compositionIdRef.value,
+          compositionState: CANVAS_DRAFT_STATE,
+          projectId,
+          callback: effect,
+          event: "updated"
+        });
+      }
+    },
+    { immediate: true }
+  );
+}
+
+// src/composables/useContextualEditing.ts
+import {
+  createCanvasChannel,
+  IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
+  isUpdateCompositionMessage
+} from "@uniformdev/canvas";
+import { computed as computed3, onMounted, ref, watch as watch2 } from "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 = ref();
+  const channel = computed3(() => {
+    var _a;
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const channel2 = createCanvasChannel({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return channel2;
+  });
+  watch2(
+    [channel, () => enhance],
+    () => {
+      if (!channel.value) {
+        return;
+      }
+      const unsubscribe = channel.value.on("update-composition", async (message) => {
+        if (isUpdateCompositionMessage(message)) {
+          const composition = await enhance(message);
+          contextualComposition.value = composition;
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    },
+    { immediate: true }
+  );
+  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(
+    IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+  );
+  const isAllowlistedReferrer = Boolean(
+    window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
+  );
+  return isOpenedByInContextEditor && isAllowlistedReferrer;
+}
+export {
+  CANVAS_COMPOSITION_TYPE,
+  CANVAS_SLOT_CONTENT_TYPE,
+  Composition,
+  DefaultNotImplementedComponent,
+  SlotContent,
+  compositionInjectionKey,
+  convertComponentToProps,
+  createApiEnhancer,
+  resolveRendererInjectionKey,
+  useCompositionEventEffect,
+  useContextualEditing
+};