@uniformdev/canvas-react 17.7.1-alpha.34 → 18.0.1-alpha.3

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

@@ -6,22 +6,22 @@ import React$1, { Key, ReactNode } from 'react';
  * 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;
 };
 /**
  * Function that maps a Canvas component instance to its React component to render it.
  * The resolver would commonly inspect the `type` and possibly `variant` of the component to decide.
  */
-declare type RenderComponentResolver = (component: ComponentInstance) => React.ComponentType<ComponentProps<any>> | null;
+type RenderComponentResolver = (component: ComponentInstance) => React.ComponentType<ComponentProps<any>> | null;
 /** Function that renders Canvas system internals */
-declare type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => JSX.Element | null) => JSX.Element | null;
+type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => JSX.Element | null) => JSX.Element | null;
 /** Configures rendering of system components (tests, pz) */
-declare type SystemRenderConfig = {
+type SystemRenderConfig = {
     test: SystemRenderFunction;
     personalization: SystemRenderFunction;
 };
-declare type ComponentStore = {
+type ComponentStore = {
     register: (options: {
         type: string;
         component: React.ComponentType<ComponentProps<any>>;
@@ -29,7 +29,7 @@ declare type ComponentStore = {
     get: (name: string) => React.ComponentType<ComponentProps<any>> | undefined;
 };
 
-declare type CompositionProps<TRenderProps = unknown> = {
+type CompositionProps<TRenderProps = unknown> = {
     /** The root component in the composition */
     data: ComponentInstance;
     /** Resolves a React component to render a Canvas component, generally by inspecting type/variant */
@@ -48,7 +48,7 @@ declare type CompositionProps<TRenderProps = unknown> = {
      */
     behaviorTracking?: 'onLoad' | 'onView';
 };
-declare type CompositionContext = {
+type CompositionContext = {
     /** The parent composition */
     composition: ComponentInstance;
     /** The current function to translate component data into React components */
@@ -71,12 +71,12 @@ declare function Composition<TRenderProps = unknown>({ data, resolveRenderer, ch
  **/
 declare function DefaultNotImplementedComponent(props: ComponentProps): JSX.Element | null;
 
-declare type CustomSlotChildRenderFunc = (options: {
+type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
     component: ComponentInstance;
     key: Key;
 }) => JSX.Element;
-declare type SlotProps<TSlotNames extends string> = {
+type SlotProps<TSlotNames extends string> = {
     /** Name of the slot to render */
     name: TSlotNames;
     /**
@@ -96,7 +96,7 @@ declare type SlotProps<TSlotNames extends string> = {
 /** Renders a named Slot within a Composition. */
 declare function Slot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, }: SlotProps<TSlotNames>): JSX.Element | null;
 
-declare type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
+type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
     enabled: boolean;
     effect: () => void;
 };

package/dist/index.esm.js

@@ -1 +1,455 @@
-import{CANVAS_ENRICHMENT_TAG_PARAM as F}from"@uniformdev/canvas";import{Track as J,TrackFragment as X,useUniformContext as $}from"@uniformdev/context-react";import T,{createContext as j,useContext as K}from"react";function v(e){var n;let o=(n=e.parameters)!=null?n:{};return{...Object.keys(o).reduce((r,i)=>(r[i]=o[i].value,r),{}),...e.data,component:e}}var w=()=>{let e=new Map;return{register:({type:o,component:t})=>{e.set(o,t)},get:o=>e.get(o)}},S=e=>o=>e.store.get(o.type)||e.defaultComponent||null;var h=w(),ae=({type:e,component:o})=>{Array.isArray(e)?e.forEach(t=>{h.register({type:t,component:o})}):h.register({type:e,component:o})},me=S({store:h});import{CANVAS_PERSONALIZE_TYPE as M,CANVAS_TEST_TYPE as z,IN_CONTEXT_EDITOR_COMPONENT_START_ROLE as L,PLACEHOLDER_ID as B}from"@uniformdev/canvas";import C from"react";import{mapSlotToPersonalizedVariations as A,mapSlotToTestVariations as U}from"@uniformdev/canvas";import{Personalize as V,Test as D}from"@uniformdev/context-react";import*as P from"react";var x={test:(e,o,t)=>{var p,d,m,c,a;let n=e,r=(d=(p=n.slots)==null?void 0:p.test)!=null?d:[],i=(a=(c=(m=n.parameters)==null?void 0:m.test)==null?void 0:c.value)!=null?a:"Untitled Test",s=U(r);return P.createElement(D,{key:o,variations:s,name:i,component:l=>t(l,o)})},personalization:(e,o,t)=>{var i,s,p,d,m,c,a;let n=e,r=A((i=n==null?void 0:n.slots)==null?void 0:i.pz);return P.createElement(V,{key:o,variations:r,count:Number((d=(p=(s=n.parameters)==null?void 0:s.count)==null?void 0:p.value)!=null?d:1),name:(a=(c=(m=n.parameters)==null?void 0:m.trackingEventName)==null?void 0:c.value)!=null?a:"Untitled Personalization",component:l=>t(l,0)})}};function b({name:e,resolveRenderer:o,children:t,emptyPlaceholder:n}){var a;let r=E();if(!(r!=null&&r.composition))throw new Error("Slot must be rendered within a Composition");let{composition:i,resolveRenderer:s}=r;if(!i)throw new Error("Cannot use Slot without a Composition wrapper.");let p=(a=i.slots)==null?void 0:a[e];if(!p||!Array.isArray(p))return process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] slot '${e}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,i),null;let d=o!=null?o:s,m=x,c=p.map((l,u)=>{let f=g({component:l,resolveRenderer:d,resolveSystem:m,key:`inner-${u}`,indexInSlot:u,slotName:e,parentComponent:i,slotChildrenCount:p.length,emptyPlaceholder:n}),R=t?t({child:f,component:l,key:`wrapped-inner-${u}`}):f;return C.createElement(C.Fragment,{key:u},R)});return C.createElement(C.Fragment,void 0,c)}function g({component:e,resolveRenderer:o,resolveSystem:t,key:n=0,indexInSlot:r,slotName:i,parentComponent:s,slotChildrenCount:p,emptyPlaceholder:d}){var c,a,l;let m=o==null?void 0:o(e);if(e.type===z)return t.test(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(e.type===M)return t.personalization(e,n,(u,f)=>g({component:u,resolveRenderer:o,resolveSystem:t,key:f}));if(m){let u=v(e),f=Boolean(e._id),R=e._id===B;return C.createElement(N,{key:n,data:e,resolveRenderer:o},f?C.createElement("script",{key:n,"data-role":L,"data-parent-id":s==null?void 0:s._id,"data-parent-type":s==null?void 0:s.type,"data-component-id":e._id,"data-slot-name":i!=null?i:"","data-component-index":r!=null?r:"","data-total-components":p!=null?p:"","data-component-name":e.type,"data-is-placeholder":R?"true":void 0,"data-component-title":(l=(a=(c=e.parameters)==null?void 0:c.title)==null?void 0:a.value)!=null?l:""}):null,R&&d!==void 0?d:C.createElement(m,{...u}),f?C.createElement("script",{"data-role":"component-end"}):null)}else process.env.NODE_ENV!=="production"&&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);return null}var I=j(void 0);function E(){return K(I)}var Y=e=>h.get(e.type)||null;function N({data:e,resolveRenderer:o,children:t,behaviorTracking:n}){var c,a,l;let r=E(),i=$({throwOnMissingProvider:!1})!==void 0;if(!e)return process.env.NODE_ENV==="development"&&console.warn("[canvas-dev] Composition was rendered with no data, nothing will be output."),null;let s={composition:e,resolveRenderer:o||(r==null?void 0:r.resolveRenderer)||Y,behaviorTracking:(c=n!=null?n:r==null?void 0:r.behaviorTracking)!=null?c:"onView"},p=(l=(a=e.parameters)==null?void 0:a[F])==null?void 0:l.value,d=s.behaviorTracking==="onLoad"?X:J,m=G({children:t,data:e,hasParentLayout:Boolean(r)});return T.createElement(I.Provider,{value:s},i?T.createElement(d,{behavior:p},m):m)}function G({children:e,data:o,hasParentLayout:t}){var i;let n=e;if(!n&&!t){let s=h.get(o.type);s?n=T.createElement(s,v(o)):(Object.keys((i=o.slots)!=null?i:{}).length>1&&process.env.NODE_ENV==="development"&&console.warn(`[canvas-dev] All the slots in component '${o.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`),n=Object.keys(o.slots||{}).map(p=>T.createElement(b,{key:p,name:p})))}return typeof n=="function"?n(v(o)):n}import y from"react";function Ae(e){var t;let o=(t=e.component)==null?void 0:t.type;return o?y.createElement("div",{style:{borderLeft:"10px solid #e42535!important",padding:"0.01em 16px 16px",borderRadius:"16px",backgroundColor:"rgba(122, 215, 218, 0.3)",color:"#1d3557"}},y.createElement("h2",null,"Component: ",o),y.createElement("p",null,y.createElement("strong",null,o)," has no React implementation. It may need to be added to your"," ",y.createElement("code",null,"resolveRenderer()")," function."),y.createElement("details",null,y.createElement("summary",null,"Props"),y.createElement("pre",null,JSON.stringify(e,null,2)))):null}import{CANVAS_DRAFT_STATE as H,createEventBus as Q,subscribeToComposition as Z}from"@uniformdev/canvas";import{useEffect as q}from"react";function ze({enabled:e,projectId:o,compositionId:t,effect:n}){q(()=>{if(!e||!t||!o)return;let r;return(async()=>{let s=await Q();s&&(r=Z({eventBus:s,compositionId:t,compositionState:H,projectId:o,callback:n,event:"updated"}))})(),()=>{r&&r()}},[t,e,o,n])}import{createCanvasChannel as W,IN_CONTEXT_EDITOR_QUERY_STRING_PARAM as ee,isUpdateCompositionMessage as oe}from"@uniformdev/canvas";import{useEffect as _,useMemo as te,useState as ne}from"react";var O="uniform-canvas-preview-script",$e=({apiUrl:e})=>async o=>{let t=await fetch(e,{method:"post",body:JSON.stringify({composition:o.composition,hash:o.hash}),headers:{"Content-Type":"application/json"}}),n=await t.json();if(!t.ok)throw new Error("Error reading enhanced composition");return n.composition},je=({initialCompositionValue:e,enhance:o=t=>t.composition})=>{let[t,n]=ne(),r=te(()=>{var s;return k()?W({broadcastTo:[(s=window.opener)!=null?s:window.top],listenTo:[window]}):void 0},[]);return _(()=>{if(!r)return;let i=r.on("update-composition",async s=>{if(oe(s)){let p=await o(s);n(p)}});return()=>{i()}},[r,o]),_(()=>{if(!k()||document.getElementById(O))return;let s=document.createElement("script");s.id=O,s.src=re(),s.async=!0,document.head.appendChild(s)},[]),{composition:t!=null?t:e}};function re(){return`${window.document.referrer}files/canvas-in-context-embed/index.js`}function k(){if(typeof window=="undefined")return!1;let e=new URLSearchParams(window.location.search).has(ee),o=Boolean(window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//));return e&&o}export{N as Composition,Ae as DefaultNotImplementedComponent,b as Slot,h as componentStore,me as componentStoreResolver,$e as createApiEnhancer,w as createComponentStore,S as createComponentStoreResolver,ae as registerUniformComponent,E as useComposition,ze as useCompositionEventEffect,je as useContextualEditing};
+// src/components/Composition.tsx
+import { CANVAS_ENRICHMENT_TAG_PARAM } from "@uniformdev/canvas";
+import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
+import React3, { createContext, useContext } from "react";
+
+// src/convertComponentToProps.ts
+function convertComponentToProps(component) {
+  var _a;
+  const parameters = (_a = component.parameters) != null ? _a : {};
+  const renderComponentProps = {
+    ...Object.keys(parameters).reduce((acc, cur) => {
+      acc[cur] = parameters[cur].value;
+      return acc;
+    }, {}),
+    ...component.data,
+    component
+  };
+  return renderComponentProps;
+}
+
+// src/storeDefinition.ts
+var createComponentStore = () => {
+  const components = /* @__PURE__ */ new Map();
+  return {
+    register: ({ type, component }) => {
+      components.set(type, component);
+    },
+    get: (name) => {
+      return components.get(name);
+    }
+  };
+};
+var createComponentStoreResolver = (options) => {
+  return (component) => {
+    const resolved = options.store.get(component.type);
+    return resolved || options.defaultComponent || null;
+  };
+};
+
+// src/store.ts
+var componentStore = createComponentStore();
+var registerUniformComponent = ({
+  type,
+  component
+}) => {
+  if (Array.isArray(type)) {
+    type.forEach((t) => {
+      componentStore.register({
+        type: t,
+        component
+      });
+    });
+  } else {
+    componentStore.register({
+      type,
+      component
+    });
+  }
+};
+var componentStoreResolver = createComponentStoreResolver({
+  store: componentStore
+});
+
+// src/components/Slot.tsx
+import {
+  CANVAS_LOCALE_TAG_PARAM,
+  CANVAS_PERSONALIZE_TYPE,
+  CANVAS_TEST_TYPE,
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+  PLACEHOLDER_ID
+} from "@uniformdev/canvas";
+import React2 from "react";
+
+// src/defaultSystemComponentResolver.tsx
+import {
+  mapSlotToPersonalizedVariations,
+  mapSlotToTestVariations
+} from "@uniformdev/canvas";
+import { Personalize, Test } from "@uniformdev/context-react";
+import * as React 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__ */ React.createElement(
+      Test,
+      {
+        key,
+        variations: finalVariants,
+        name: testName,
+        component: (variation) => renderChild(variation, key)
+      }
+    );
+  },
+  personalization: (component, key, renderChild) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const pzComponent = component;
+    const processedVariants = mapSlotToPersonalizedVariations((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
+    return /* @__PURE__ */ React.createElement(
+      Personalize,
+      {
+        key,
+        variations: processedVariants,
+        count: Number((_d = (_c = (_b = pzComponent.parameters) == null ? void 0 : _b.count) == null ? void 0 : _c.value) != null ? _d : 1),
+        name: (_g = (_f = (_e = pzComponent.parameters) == null ? void 0 : _e.trackingEventName) == null ? void 0 : _f.value) != null ? _g : "Untitled Personalization",
+        component: (variation) => renderChild(variation, 0)
+      }
+    );
+  }
+};
+
+// src/components/Slot.tsx
+function Slot({
+  name,
+  resolveRenderer,
+  children,
+  emptyPlaceholder
+}) {
+  var _a;
+  const compositionContext = useComposition();
+  if (!(compositionContext == null ? void 0 : compositionContext.composition)) {
+    throw new Error("Slot must be rendered within a Composition");
+  }
+  const { composition: layout, resolveRenderer: parentResolveRenderer } = compositionContext;
+  if (!layout) {
+    throw new Error("Cannot use Slot without a Composition wrapper.");
+  }
+  const slot = (_a = layout.slots) == null ? void 0 : _a[name];
+  if (!slot || !Array.isArray(slot)) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        `[canvas-dev] slot '${name}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,
+        layout
+      );
+    }
+    return null;
+  }
+  const resolver = resolveRenderer != null ? resolveRenderer : parentResolveRenderer;
+  const systemResolver = defaultSystemComponentResolver;
+  const finalChildren = slot.map((component, index) => {
+    const child = renderComponent({
+      component,
+      resolveRenderer: resolver,
+      resolveSystem: systemResolver,
+      key: `inner-${index}`,
+      indexInSlot: index,
+      slotName: name,
+      parentComponent: layout,
+      slotChildrenCount: slot.length,
+      emptyPlaceholder
+    });
+    const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
+    return React2.createElement(React2.Fragment, { key: index }, elements);
+  });
+  return React2.createElement(React2.Fragment, void 0, finalChildren);
+}
+function renderComponent({
+  component,
+  resolveRenderer,
+  resolveSystem,
+  key = 0,
+  indexInSlot,
+  slotName,
+  parentComponent,
+  slotChildrenCount,
+  emptyPlaceholder
+}) {
+  var _a, _b, _c, _d;
+  const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
+  if (component.type === CANVAS_TEST_TYPE) {
+    return resolveSystem.test(
+      component,
+      key,
+      (component2, key2) => renderComponent({ component: component2, resolveRenderer, resolveSystem, key: key2 })
+    );
+  } else if (component.type === CANVAS_PERSONALIZE_TYPE) {
+    return resolveSystem.personalization(
+      component,
+      key,
+      (component2, key2) => renderComponent({ component: component2, resolveRenderer, resolveSystem, key: key2 })
+    );
+  } else if (RenderComponent) {
+    const props = convertComponentToProps(component);
+    const shouldRenderContextualEditingTags = Boolean(component._id);
+    const isPlaceholder = component._id === PLACEHOLDER_ID;
+    return /* @__PURE__ */ React2.createElement(Composition, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React2.createElement(
+      "script",
+      {
+        key,
+        "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 != null ? slotName : "",
+        "data-component-index": indexInSlot != null ? indexInSlot : "",
+        "data-total-components": slotChildrenCount != null ? 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,
+        "data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
+      }
+    ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ React2.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React2.createElement("script", { "data-role": "component-end" }));
+  } else if (process.env.NODE_ENV !== "production") {
+    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 null;
+}
+
+// src/components/Composition.tsx
+var CompositionContext = createContext(void 0);
+function useComposition() {
+  return useContext(CompositionContext);
+}
+var componentStoreResolver2 = (component) => {
+  const resolved = componentStore.get(component.type);
+  return resolved || null;
+};
+function Composition({
+  data,
+  resolveRenderer,
+  children,
+  behaviorTracking
+}) {
+  var _a, _b, _c;
+  const parentLayout = useComposition();
+  const contextContextProviderPresent = useUniformContext({ throwOnMissingProvider: false }) !== void 0;
+  if (!data) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`[canvas-dev] Composition was rendered with no data, nothing will be output.`);
+    }
+    return null;
+  }
+  const context = {
+    composition: data,
+    resolveRenderer: resolveRenderer || (parentLayout == null ? void 0 : parentLayout.resolveRenderer) || componentStoreResolver2,
+    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentLayout == null ? void 0 : parentLayout.behaviorTracking) != null ? _a : "onView"
+  };
+  const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
+  const TrackComponent = context.behaviorTracking === "onLoad" ? TrackFragment : Track;
+  const resolvedChildren = resolveChildren({
+    children,
+    data,
+    hasParentLayout: Boolean(parentLayout)
+  });
+  return /* @__PURE__ */ React3.createElement(CompositionContext.Provider, { value: context }, contextContextProviderPresent ? /* @__PURE__ */ React3.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren) : resolvedChildren);
+}
+function resolveChildren({
+  children,
+  data,
+  hasParentLayout
+}) {
+  var _a;
+  let compositionChildren = children;
+  if (!compositionChildren && !hasParentLayout) {
+    const rootComponent = componentStore.get(data.type);
+    if (rootComponent) {
+      compositionChildren = React3.createElement(rootComponent, convertComponentToProps(data));
+    } else {
+      if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
+        console.warn(
+          `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
+        );
+      }
+      compositionChildren = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React3.createElement(Slot, { key: slotName, name: slotName }));
+    }
+  }
+  const renderChildren = typeof compositionChildren === "function" ? compositionChildren(convertComponentToProps(data)) : compositionChildren;
+  return renderChildren;
+}
+
+// src/components/DefaultNotImplementedComponent.tsx
+import { CANVAS_LOCALIZATION_TYPE } from "@uniformdev/canvas";
+import React4 from "react";
+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"
+};
+function DefaultNotImplementedComponent(props) {
+  var _a;
+  const componentType = (_a = props.component) == null ? void 0 : _a.type;
+  if (!componentType) {
+    return null;
+  }
+  if (componentType === CANVAS_LOCALIZATION_TYPE) {
+    return /* @__PURE__ */ React4.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React4.createElement("p", null, "Seems like localization is not enabled in your application. Please read our documentation on how to", " ", /* @__PURE__ */ React4.createElement(
+      "a",
+      {
+        href: "https://docs.uniform.app/guides/composition/localization#activate-front-end",
+        target: "_blank",
+        style: { fontWeight: "bolder", textDecoration: "underline" },
+        rel: "noreferrer"
+      },
+      "enable localization in your front-end application."
+    )));
+  }
+  return /* @__PURE__ */ React4.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React4.createElement("h2", null, "Component: ", /* @__PURE__ */ React4.createElement("code", null, componentType)), /* @__PURE__ */ React4.createElement("p", null, /* @__PURE__ */ React4.createElement("code", null, /* @__PURE__ */ React4.createElement("strong", null, componentType)), " ", "has no React implementation. It may need to be added to your ", /* @__PURE__ */ React4.createElement("code", null, "resolveRenderer()"), " function."), /* @__PURE__ */ React4.createElement("details", null, /* @__PURE__ */ React4.createElement("summary", { style: { cursor: "pointer" } }, "Props"), /* @__PURE__ */ React4.createElement("pre", null, JSON.stringify(props, null, 2))));
+}
+
+// src/hooks/useCompositionEventEffect.ts
+import {
+  CANVAS_DRAFT_STATE,
+  createEventBus,
+  subscribeToComposition
+} from "@uniformdev/canvas";
+import { useEffect } from "react";
+function useCompositionEventEffect({
+  enabled,
+  projectId,
+  compositionId,
+  effect
+}) {
+  useEffect(() => {
+    if (!enabled || !compositionId || !projectId) {
+      return;
+    }
+    let goodbye = void 0;
+    const loadEffect = async () => {
+      const eventBus = await createEventBus();
+      if (eventBus) {
+        goodbye = subscribeToComposition({
+          eventBus,
+          compositionId,
+          compositionState: CANVAS_DRAFT_STATE,
+          projectId,
+          callback: effect,
+          event: "updated"
+        });
+      }
+    };
+    loadEffect();
+    return () => {
+      if (goodbye) {
+        goodbye();
+      }
+    };
+  }, [compositionId, enabled, projectId, effect]);
+}
+
+// src/hooks/useContextualEditing.ts
+import {
+  createCanvasChannel,
+  IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
+  isUpdateCompositionMessage
+} from "@uniformdev/canvas";
+import { useEffect as useEffect2, useMemo, useState } from "react";
+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, setContextualComposition] = useState();
+  const channel = useMemo(() => {
+    var _a;
+    if (!isInContextEditingMode()) {
+      return;
+    }
+    const channel2 = createCanvasChannel({
+      broadcastTo: [(_a = window.opener) != null ? _a : window.top],
+      listenTo: [window]
+    });
+    return channel2;
+  }, []);
+  useEffect2(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-composition", async (message) => {
+      if (isUpdateCompositionMessage(message)) {
+        const composition = await enhance(message);
+        setContextualComposition(composition);
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [channel, enhance]);
+  useEffect2(() => {
+    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 {
+  Composition,
+  DefaultNotImplementedComponent,
+  Slot,
+  componentStore,
+  componentStoreResolver,
+  createApiEnhancer,
+  createComponentStore,
+  createComponentStoreResolver,
+  registerUniformComponent,
+  useComposition,
+  useCompositionEventEffect,
+  useContextualEditing
+};