@uniformdev/canvas-react 18.0.1-alpha.7 → 18.1.2-alpha.4

package/dist/index.js

@@ -29,22 +29,61 @@ __export(src_exports, {
   Composition: () => Composition,
   DefaultNotImplementedComponent: () => DefaultNotImplementedComponent,
   Slot: () => Slot,
+  UniformComponent: () => UniformComponent,
+  UniformComposition: () => UniformComposition,
+  UniformSlot: () => UniformSlot,
   componentStore: () => componentStore,
   componentStoreResolver: () => componentStoreResolver,
   createApiEnhancer: () => createApiEnhancer,
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
+  createUniformApiEnhancer: () => import_canvas5.createUniformApiEnhancer,
   registerUniformComponent: () => registerUniformComponent,
   useComposition: () => useComposition,
   useCompositionEventEffect: () => useCompositionEventEffect,
-  useContextualEditing: () => useContextualEditing
+  useUniformContextualEditing: () => useUniformContextualEditing,
+  useUniformCurrentComponent: () => useUniformCurrentComponent,
+  useUniformCurrentComposition: () => useUniformCurrentComposition
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Composition.tsx
-var import_canvas3 = require("@uniformdev/canvas");
+// src/components/DefaultNotImplementedComponent.tsx
+var import_canvas = require("@uniformdev/canvas");
+var import_react = __toESM(require("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 === import_canvas.CANVAS_LOCALIZATION_TYPE) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react.default.createElement("p", null, "Seems like localization is not enabled in your application. Please read our documentation on how to", " ", /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Component: ", /* @__PURE__ */ import_react.default.createElement("code", null, componentType)), /* @__PURE__ */ import_react.default.createElement("p", null, /* @__PURE__ */ import_react.default.createElement("code", null, /* @__PURE__ */ import_react.default.createElement("strong", null, componentType)), " ", "has no React implementation. It may need to be added to your ", /* @__PURE__ */ import_react.default.createElement("code", null, "resolveRenderer()"), " function."), /* @__PURE__ */ import_react.default.createElement("details", null, /* @__PURE__ */ import_react.default.createElement("summary", { style: { cursor: "pointer" } }, "Props"), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(props, null, 2))));
+}
+
+// src/components/UniformComponent.tsx
+var import_canvas4 = require("@uniformdev/canvas");
 var import_context_react2 = require("@uniformdev/context-react");
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 
 // src/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -104,22 +143,22 @@ var componentStoreResolver = createComponentStoreResolver({
   store: componentStore
 });
 
-// src/components/Slot.tsx
-var import_canvas2 = require("@uniformdev/canvas");
-var import_react = __toESM(require("react"));
+// src/components/UniformSlot.tsx
+var import_canvas3 = require("@uniformdev/canvas");
+var import_react2 = __toESM(require("react"));
 
 // src/defaultSystemComponentResolver.tsx
-var import_canvas = require("@uniformdev/canvas");
+var import_canvas2 = require("@uniformdev/canvas");
 var import_context_react = require("@uniformdev/context-react");
-var React = __toESM(require("react"));
+var React2 = __toESM(require("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 = (0, import_canvas.mapSlotToTestVariations)(variants);
-    return /* @__PURE__ */ React.createElement(
+    const finalVariants = (0, import_canvas2.mapSlotToTestVariations)(variants);
+    return /* @__PURE__ */ React2.createElement(
       import_context_react.Test,
       {
         key,
@@ -132,8 +171,8 @@ var defaultSystemComponentResolver = {
   personalization: (component, key, renderChild) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const pzComponent = component;
-    const processedVariants = (0, import_canvas.mapSlotToPersonalizedVariations)((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
-    return /* @__PURE__ */ React.createElement(
+    const processedVariants = (0, import_canvas2.mapSlotToPersonalizedVariations)((_a = pzComponent == null ? void 0 : pzComponent.slots) == null ? void 0 : _a.pz);
+    return /* @__PURE__ */ React2.createElement(
       import_context_react.Personalize,
       {
         key,
@@ -146,28 +185,24 @@ var defaultSystemComponentResolver = {
   }
 };
 
-// src/components/Slot.tsx
-function Slot({
+// src/components/UniformSlot.tsx
+function UniformSlot({
   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 { data: parentData, resolveRenderer: parentResolveRenderer } = useUniformCurrentComponent();
+  if (!parentData) {
+    throw new Error("Cannot use Slot without a <UniformComponent /> wrapper.");
   }
-  const slot = (_a = layout.slots) == null ? void 0 : _a[name];
+  const slot = (_a = parentData.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
+        parentData
       );
     }
     return null;
@@ -182,14 +217,14 @@ function Slot({
       key: `inner-${index}`,
       indexInSlot: index,
       slotName: name,
-      parentComponent: layout,
+      parentComponent: parentData,
       slotChildrenCount: slot.length,
       emptyPlaceholder
     });
     const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
-    return import_react.default.createElement(import_react.default.Fragment, { key: index }, elements);
+    return import_react2.default.createElement(import_react2.default.Fragment, { key: index }, elements);
   });
-  return import_react.default.createElement(import_react.default.Fragment, void 0, finalChildren);
+  return import_react2.default.createElement(import_react2.default.Fragment, void 0, finalChildren);
 }
 function renderComponent({
   component,
@@ -204,13 +239,13 @@ function renderComponent({
 }) {
   var _a, _b, _c, _d;
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
-  if (component.type === import_canvas2.CANVAS_TEST_TYPE) {
+  if (component.type === import_canvas3.CANVAS_TEST_TYPE) {
     return resolveSystem.test(
       component,
       key,
       (component2, key2) => renderComponent({ component: component2, resolveRenderer, resolveSystem, key: key2 })
     );
-  } else if (component.type === import_canvas2.CANVAS_PERSONALIZE_TYPE) {
+  } else if (component.type === import_canvas3.CANVAS_PERSONALIZE_TYPE) {
     return resolveSystem.personalization(
       component,
       key,
@@ -219,12 +254,12 @@ function renderComponent({
   } else if (RenderComponent) {
     const props = convertComponentToProps(component);
     const shouldRenderContextualEditingTags = Boolean(component._id);
-    const isPlaceholder = component._id === import_canvas2.PLACEHOLDER_ID;
-    return /* @__PURE__ */ import_react.default.createElement(Composition, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react.default.createElement(
+    const isPlaceholder = component._id === import_canvas3.PLACEHOLDER_ID;
+    return /* @__PURE__ */ import_react2.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react2.default.createElement(
       "script",
       {
         key,
-        "data-role": import_canvas2.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+        "data-role": import_canvas3.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,
@@ -233,10 +268,10 @@ function renderComponent({
         "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[import_canvas2.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+        "data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[import_canvas3.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__ */ import_react.default.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react.default.createElement("script", { "data-role": "component-end" }));
+    ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ import_react2.default.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ import_react2.default.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.`,
@@ -245,44 +280,45 @@ function renderComponent({
   }
   return null;
 }
+var Slot = UniformSlot;
 
-// src/components/Composition.tsx
-var CompositionContext = (0, import_react2.createContext)(void 0);
-function useComposition() {
-  return (0, import_react2.useContext)(CompositionContext);
+// src/components/UniformComponent.tsx
+var UniformComponentContext = (0, import_react3.createContext)({});
+function useUniformCurrentComponent() {
+  return (0, import_react3.useContext)(UniformComponentContext);
 }
 var componentStoreResolver2 = (component) => {
   const resolved = componentStore.get(component.type);
   return resolved || null;
 };
-function Composition({
+function UniformComponent({
   data,
   resolveRenderer,
   children,
   behaviorTracking
 }) {
   var _a, _b, _c;
-  const parentLayout = useComposition();
+  const parentData = useUniformCurrentComponent();
   const contextContextProviderPresent = (0, import_context_react2.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.`);
+      console.warn(`[canvas-dev] UniformComponent 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 contextValue = {
+    data,
+    resolveRenderer: resolveRenderer || (parentData == null ? void 0 : parentData.resolveRenderer) || componentStoreResolver2,
+    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView"
   };
-  const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas3.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
-  const TrackComponent = context.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
+  const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas4.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
+  const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
   const resolvedChildren = resolveChildren({
     children,
     data,
-    hasParentLayout: Boolean(parentLayout)
+    hasParentLayout: Boolean(parentData)
   });
-  return /* @__PURE__ */ import_react2.default.createElement(CompositionContext.Provider, { value: context }, contextContextProviderPresent ? /* @__PURE__ */ import_react2.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren) : resolvedChildren);
+  return /* @__PURE__ */ import_react3.default.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? /* @__PURE__ */ import_react3.default.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren) : resolvedChildren);
 }
 function resolveChildren({
   children,
@@ -290,157 +326,74 @@ function resolveChildren({
   hasParentLayout
 }) {
   var _a;
-  let compositionChildren = children;
-  if (!compositionChildren && !hasParentLayout) {
+  if (!children && !hasParentLayout) {
     const rootComponent = componentStore.get(data.type);
     if (rootComponent) {
-      compositionChildren = import_react2.default.createElement(rootComponent, convertComponentToProps(data));
+      children = import_react3.default.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__ */ import_react2.default.createElement(Slot, { key: slotName, name: slotName }));
+      children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react3.default.createElement(UniformSlot, { key: slotName, name: slotName }));
     }
   }
-  const renderChildren = typeof compositionChildren === "function" ? compositionChildren(convertComponentToProps(data)) : compositionChildren;
+  const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
   return renderChildren;
 }
 
-// src/components/DefaultNotImplementedComponent.tsx
-var import_canvas4 = require("@uniformdev/canvas");
-var import_react3 = __toESM(require("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 === import_canvas4.CANVAS_LOCALIZATION_TYPE) {
-    return /* @__PURE__ */ import_react3.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react3.default.createElement("p", null, "Seems like localization is not enabled in your application. Please read our documentation on how to", " ", /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ import_react3.default.createElement("h2", null, "Component: ", /* @__PURE__ */ import_react3.default.createElement("code", null, componentType)), /* @__PURE__ */ import_react3.default.createElement("p", null, /* @__PURE__ */ import_react3.default.createElement("code", null, /* @__PURE__ */ import_react3.default.createElement("strong", null, componentType)), " ", "has no React implementation. It may need to be added to your ", /* @__PURE__ */ import_react3.default.createElement("code", null, "resolveRenderer()"), " function."), /* @__PURE__ */ import_react3.default.createElement("details", null, /* @__PURE__ */ import_react3.default.createElement("summary", { style: { cursor: "pointer" } }, "Props"), /* @__PURE__ */ import_react3.default.createElement("pre", null, JSON.stringify(props, null, 2))));
-}
+// src/components/UniformComposition.tsx
+var import_react5 = __toESM(require("react"));
 
-// src/hooks/useCompositionEventEffect.ts
+// src/hooks/useUniformContextualEditing.ts
 var import_canvas5 = require("@uniformdev/canvas");
 var import_react4 = require("react");
-function useCompositionEventEffect({
-  enabled,
-  projectId,
-  compositionId,
-  effect
-}) {
-  (0, import_react4.useEffect)(() => {
-    if (!enabled || !compositionId || !projectId) {
-      return;
-    }
-    let goodbye = void 0;
-    const loadEffect = async () => {
-      const eventBus = await (0, import_canvas5.createEventBus)();
-      if (eventBus) {
-        goodbye = (0, import_canvas5.subscribeToComposition)({
-          eventBus,
-          compositionId,
-          compositionState: import_canvas5.CANVAS_DRAFT_STATE,
-          projectId,
-          callback: effect,
-          event: "updated"
-        });
-      }
-    };
-    loadEffect();
-    return () => {
-      if (goodbye) {
-        goodbye();
-      }
-    };
-  }, [compositionId, enabled, projectId, effect]);
-}
-
-// src/hooks/useContextualEditing.ts
-var import_canvas6 = require("@uniformdev/canvas");
-var import_react5 = require("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 = ({
+var createApiEnhancer = import_canvas5.createUniformApiEnhancer;
+var registeredCompositionIds = /* @__PURE__ */ new Set();
+var useUniformContextualEditing = ({
   initialCompositionValue,
   enhance = (message) => message.composition
 }) => {
-  const [contextualComposition, setContextualComposition] = (0, import_react5.useState)();
-  const channel = (0, import_react5.useMemo)(() => {
+  const [contextualComposition, setContextualComposition] = (0, import_react4.useState)();
+  const channel = (0, import_react4.useMemo)(() => {
     var _a;
     if (!isInContextEditingMode()) {
       return;
     }
-    const channel2 = (0, import_canvas6.createCanvasChannel)({
+    const channel2 = (0, import_canvas5.createCanvasChannel)({
       broadcastTo: [(_a = window.opener) != null ? _a : window.top],
       listenTo: [window]
     });
     return channel2;
   }, []);
-  (0, import_react5.useEffect)(() => {
-    if (!channel) {
+  (0, import_react4.useEffect)(() => {
+    if (!channel || registeredCompositionIds.has(initialCompositionValue._id)) {
       return;
     }
     const unsubscribe = channel.on("update-composition", async (message) => {
-      if ((0, import_canvas6.isUpdateCompositionMessage)(message)) {
-        const composition = await enhance(message);
-        setContextualComposition(composition);
+      if (!(0, import_canvas5.isUpdateCompositionMessage)(message)) {
+        return;
       }
+      const enhancedComposition = await enhance(message);
+      setContextualComposition(enhancedComposition);
     });
+    registeredCompositionIds.add(initialCompositionValue._id);
     return () => {
       unsubscribe();
+      registeredCompositionIds.delete(initialCompositionValue._id);
     };
-  }, [channel, enhance]);
-  (0, import_react5.useEffect)(() => {
+  }, [channel, enhance, initialCompositionValue._id]);
+  (0, import_react4.useEffect)(() => {
     if (!isInContextEditingMode()) {
       return;
     }
-    const existingScript = document.getElementById(previewScriptId);
+    const existingScript = document.getElementById(import_canvas5.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
     if (existingScript) {
       return;
     }
     const script = document.createElement("script");
-    script.id = previewScriptId;
+    script.id = import_canvas5.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
     script.src = getCanvasInContextEmbedScriptUrl();
     script.async = true;
     document.head.appendChild(script);
@@ -458,25 +411,96 @@ function isInContextEditingMode() {
     return false;
   }
   const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
-    import_canvas6.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
+    import_canvas5.IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
   );
   const isAllowlistedReferrer = Boolean(
     window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
   );
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
+
+// src/components/UniformComposition.tsx
+var UniformCompositionContext = (0, import_react5.createContext)({});
+function useUniformCurrentComposition() {
+  return (0, import_react5.useContext)(UniformCompositionContext);
+}
+function UniformComposition({
+  data,
+  behaviorTracking = "onView",
+  children,
+  resolveRenderer,
+  contextualEditingEnhancer
+}) {
+  const { composition } = useUniformContextualEditing({
+    initialCompositionValue: data,
+    enhance: contextualEditingEnhancer
+  });
+  return /* @__PURE__ */ import_react5.default.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ import_react5.default.createElement(
+    UniformComponent,
+    {
+      data: composition,
+      behaviorTracking,
+      resolveRenderer
+    },
+    children
+  ));
+}
+var useComposition = useUniformCurrentComposition;
+var Composition = UniformComposition;
+
+// src/hooks/useCompositionEventEffect.ts
+var import_canvas6 = require("@uniformdev/canvas");
+var import_react6 = require("react");
+function useCompositionEventEffect({
+  enabled,
+  projectId,
+  compositionId,
+  effect
+}) {
+  (0, import_react6.useEffect)(() => {
+    if (!enabled || !compositionId || !projectId) {
+      return;
+    }
+    let goodbye = void 0;
+    const loadEffect = async () => {
+      const eventBus = await (0, import_canvas6.createEventBus)();
+      if (eventBus) {
+        goodbye = (0, import_canvas6.subscribeToComposition)({
+          eventBus,
+          compositionId,
+          compositionState: import_canvas6.CANVAS_DRAFT_STATE,
+          projectId,
+          callback: effect,
+          event: "updated"
+        });
+      }
+    };
+    loadEffect();
+    return () => {
+      if (goodbye) {
+        goodbye();
+      }
+    };
+  }, [compositionId, enabled, projectId, effect]);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Composition,
   DefaultNotImplementedComponent,
   Slot,
+  UniformComponent,
+  UniformComposition,
+  UniformSlot,
   componentStore,
   componentStoreResolver,
   createApiEnhancer,
   createComponentStore,
   createComponentStoreResolver,
+  createUniformApiEnhancer,
   registerUniformComponent,
   useComposition,
   useCompositionEventEffect,
-  useContextualEditing
+  useUniformContextualEditing,
+  useUniformCurrentComponent,
+  useUniformCurrentComposition
 });