@uniformdev/canvas-react 19.58.1 → 19.58.2-alpha.11

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
-import * as _uniformdev_canvas from '@uniformdev/canvas';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
 import { PureUniformTextProps } from './core.mjs';
@@ -352,6 +351,14 @@ type UniformSlotProps<TSlotNames extends string> = {
 /** Renders a named Slot within a Composition. */
 declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
 
+/**
+ * Converts a raw Canvas component instance to React component props format.
+ * This merges each parameter moved to the root object and removes the 'value' node,
+ * hugely simplifying rendering code. For example if the raw object has parameters.foo.value,
+ * then the final props have props.foo === raw.parameters.foo.value.
+ */
+declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
+
 /**
  * Returns the attributes needed to annotate a Uniform parameter for inline editing.
  * Supports only text parameters at the moment.
@@ -380,7 +387,18 @@ type UseUniformContextualEditingStateProps = {
  */
 declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => {
     isContextualEditing: boolean;
-    selectedComponentReference: Omit<_uniformdev_canvas.ContextualEditingComponentReference, "elements"> | undefined;
+    selectedComponentReference: {
+        id: string;
+        slotName?: string | undefined;
+        componentIndex?: number | undefined;
+        totalComponents?: number | undefined;
+        componentName?: string | undefined;
+        componentTitle?: string | undefined;
+        parentId?: string | undefined;
+        parentType?: string | undefined;
+        isLocalized?: boolean | undefined;
+        isReadOnly?: boolean | undefined;
+    } | undefined;
 };
 
 declare const componentStore: ComponentStore;
@@ -399,4 +417,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
-import * as _uniformdev_canvas from '@uniformdev/canvas';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
 import { PureUniformTextProps } from './core.js';
@@ -352,6 +351,14 @@ type UniformSlotProps<TSlotNames extends string> = {
 /** Renders a named Slot within a Composition. */
 declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
 
+/**
+ * Converts a raw Canvas component instance to React component props format.
+ * This merges each parameter moved to the root object and removes the 'value' node,
+ * hugely simplifying rendering code. For example if the raw object has parameters.foo.value,
+ * then the final props have props.foo === raw.parameters.foo.value.
+ */
+declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
+
 /**
  * Returns the attributes needed to annotate a Uniform parameter for inline editing.
  * Supports only text parameters at the moment.
@@ -380,7 +387,18 @@ type UseUniformContextualEditingStateProps = {
  */
 declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => {
     isContextualEditing: boolean;
-    selectedComponentReference: Omit<_uniformdev_canvas.ContextualEditingComponentReference, "elements"> | undefined;
+    selectedComponentReference: {
+        id: string;
+        slotName?: string | undefined;
+        componentIndex?: number | undefined;
+        totalComponents?: number | undefined;
+        componentName?: string | undefined;
+        componentTitle?: string | undefined;
+        parentId?: string | undefined;
+        parentType?: string | undefined;
+        isLocalized?: boolean | undefined;
+        isReadOnly?: boolean | undefined;
+    } | undefined;
 };
 
 declare const componentStore: ComponentStore;
@@ -399,4 +417,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -75,7 +75,7 @@ import {
 import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
 import React6, { createContext as createContext2, useContext as useContext2 } from "react";
 
-// src/convertComponentToProps.ts
+// src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
   var _a;
   const parameters = (_a = component.parameters) != null ? _a : {};
@@ -253,7 +253,7 @@ var useUniformContextualEditing = ({
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
       framework: "React",
       // Make sure to also update the value in canvas-vue
-      version: 1
+      version: 2
     };
     const script = document.createElement("script");
     script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -607,6 +607,11 @@ var UniformPlayground = ({
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
+import {
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE
+} from "@uniformdev/canvas";
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
@@ -729,7 +734,19 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
   const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...{
+        [ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
+        [ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      }
+    },
+    /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
@@ -909,11 +926,14 @@ var useUniformContextualEditingState = ({
     return () => {
       unsubscribe();
     };
-  }, [global, channel, componentData == null ? void 0 : componentData._id]);
-  return {
-    isContextualEditing,
-    selectedComponentReference
-  };
+  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference]);
+  return useMemo4(
+    () => ({
+      isContextualEditing,
+      selectedComponentReference
+    }),
+    [isContextualEditing, selectedComponentReference]
+  );
 };
 export {
   DefaultNotImplementedComponent,
@@ -928,6 +948,7 @@ export {
   UniformText,
   componentStore,
   componentStoreResolver,
+  convertComponentToProps,
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,

package/dist/index.js

@@ -42,6 +42,7 @@ __export(src_exports, {
   UniformText: () => UniformText,
   componentStore: () => componentStore,
   componentStoreResolver: () => componentStoreResolver,
+  convertComponentToProps: () => convertComponentToProps,
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
@@ -130,7 +131,7 @@ var import_canvas6 = require("@uniformdev/canvas");
 var import_context_react2 = require("@uniformdev/context-react");
 var import_react6 = __toESM(require("react"));
 
-// src/convertComponentToProps.ts
+// src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
   var _a;
   const parameters = (_a = component.parameters) != null ? _a : {};
@@ -286,7 +287,7 @@ var useUniformContextualEditing = ({
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
       framework: "React",
       // Make sure to also update the value in canvas-vue
-      version: 1
+      version: 2
     };
     const script = document.createElement("script");
     script.id = import_canvas3.IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -640,6 +641,7 @@ var UniformPlayground = ({
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
+var import_canvas8 = require("@uniformdev/canvas");
 var import_richtext5 = require("@uniformdev/richtext");
 var import_react17 = __toESM(require("react"));
 
@@ -759,7 +761,19 @@ var UniformRichText = import_react17.default.forwardRef(function UniformRichText
   const value = (0, import_react17.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !(0, import_richtext5.isRichTextValue)(value) || (0, import_richtext5.isRichTextValueConsideredEmpty)(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react17.default.createElement(Tag, { ref, ...props }, /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react17.default.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...{
+        [import_canvas8.ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
+        [import_canvas8.ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [import_canvas8.ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      }
+    },
+    /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
@@ -849,16 +863,16 @@ var UniformText = ({
 };
 
 // src/helpers/getParameterAttributes.ts
-var import_canvas8 = require("@uniformdev/canvas");
+var import_canvas9 = require("@uniformdev/canvas");
 var getParameterAttributes = (options) => {
   return {
-    ...(0, import_canvas8.getParameterAttributes)(options),
+    ...(0, import_canvas9.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
 
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas9 = require("@uniformdev/canvas");
+var import_canvas10 = require("@uniformdev/canvas");
 var import_react20 = require("react");
 function useCompositionEventEffect({
   enabled,
@@ -872,12 +886,12 @@ function useCompositionEventEffect({
     }
     let goodbye = void 0;
     const loadEffect = async () => {
-      const eventBus = await (0, import_canvas9.createEventBus)();
+      const eventBus = await (0, import_canvas10.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas9.subscribeToComposition)({
+        goodbye = (0, import_canvas10.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas9.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas10.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -894,7 +908,7 @@ function useCompositionEventEffect({
 }
 
 // src/hooks/useUniformContextualEditingState.ts
-var import_canvas10 = require("@uniformdev/canvas");
+var import_canvas11 = require("@uniformdev/canvas");
 var import_react21 = require("react");
 var useUniformContextualEditingState = ({
   global = false
@@ -906,7 +920,7 @@ var useUniformContextualEditingState = ({
     if (!isContextualEditing) {
       return;
     }
-    const channel2 = (0, import_canvas10.createCanvasChannel)({
+    const channel2 = (0, import_canvas11.createCanvasChannel)({
       broadcastTo: [window],
       listenTo: [window]
     });
@@ -918,7 +932,7 @@ var useUniformContextualEditingState = ({
     }
     const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
       var _a;
-      if (!(0, import_canvas10.isUpdateContextualEditingStateInternalMessage)(message)) {
+      if (!(0, import_canvas11.isUpdateContextualEditingStateInternalMessage)(message)) {
         return;
       }
       if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
@@ -930,11 +944,14 @@ var useUniformContextualEditingState = ({
     return () => {
       unsubscribe();
     };
-  }, [global, channel, componentData == null ? void 0 : componentData._id]);
-  return {
-    isContextualEditing,
-    selectedComponentReference
-  };
+  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference]);
+  return (0, import_react21.useMemo)(
+    () => ({
+      isContextualEditing,
+      selectedComponentReference
+    }),
+    [isContextualEditing, selectedComponentReference]
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -950,6 +967,7 @@ var useUniformContextualEditingState = ({
   UniformText,
   componentStore,
   componentStoreResolver,
+  convertComponentToProps,
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,

package/dist/index.mjs

@@ -75,7 +75,7 @@ import {
 import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
 import React6, { createContext as createContext2, useContext as useContext2 } from "react";
 
-// src/convertComponentToProps.ts
+// src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
   var _a;
   const parameters = (_a = component.parameters) != null ? _a : {};
@@ -253,7 +253,7 @@ var useUniformContextualEditing = ({
     window.__UNIFORM_CONTEXTUAL_EDITING__ = {
       framework: "React",
       // Make sure to also update the value in canvas-vue
-      version: 1
+      version: 2
     };
     const script = document.createElement("script");
     script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
@@ -607,6 +607,11 @@ var UniformPlayground = ({
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
+import {
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE
+} from "@uniformdev/canvas";
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
@@ -729,7 +734,19 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
   const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...{
+        [ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
+        [ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      }
+    },
+    /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
@@ -909,11 +926,14 @@ var useUniformContextualEditingState = ({
     return () => {
       unsubscribe();
     };
-  }, [global, channel, componentData == null ? void 0 : componentData._id]);
-  return {
-    isContextualEditing,
-    selectedComponentReference
-  };
+  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference]);
+  return useMemo4(
+    () => ({
+      isContextualEditing,
+      selectedComponentReference
+    }),
+    [isContextualEditing, selectedComponentReference]
+  );
 };
 export {
   DefaultNotImplementedComponent,
@@ -928,6 +948,7 @@ export {
   UniformText,
   componentStore,
   componentStoreResolver,
+  convertComponentToProps,
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.58.1",
+  "version": "19.58.2-alpha.11+9a1da0c41",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -45,10 +45,10 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.58.1",
-    "@uniformdev/context": "19.58.1",
-    "@uniformdev/context-react": "19.58.1",
-    "@uniformdev/richtext": "19.58.1"
+    "@uniformdev/canvas": "19.58.2-alpha.11+9a1da0c41",
+    "@uniformdev/context": "19.58.2-alpha.11+9a1da0c41",
+    "@uniformdev/context-react": "19.58.2-alpha.11+9a1da0c41",
+    "@uniformdev/richtext": "19.58.2-alpha.11+9a1da0c41"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b889f843979b69f4d17fc6d12a95cc040d9975ad"
+  "gitHead": "9a1da0c4162d8d70477d87a876eeaaf4525d94ac"
 }