@plasmicapp/host 1.0.164 → 1.0.166

package/dist/prop-types.d.ts

@@ -70,7 +70,7 @@ export interface PropTypeBase<P> {
      */
     forceRemount?: boolean;
 }
-interface Defaultable<P, T> {
+export interface Defaultable<P, T> {
     /**
      * Default value to set for this prop when the component is instantiated
      */
@@ -91,7 +91,7 @@ interface Defaultable<P, T> {
      */
     validator?: (value: T, ...args: ControlContext<P>) => (string | true) | Promise<string | true>;
 }
-interface Controllable {
+export interface Controllable {
     /**
      * If true, this is a prop that should only be used inside Plasmic
      * Studio for rendering artboards; will not be actually used in
@@ -109,22 +109,22 @@ interface Controllable {
 }
 export interface PropTypeBaseDefault<P, T> extends PropTypeBase<P>, Defaultable<P, T>, Controllable {
 }
-interface PlainStringType<P> extends PropTypeBaseDefault<P, string> {
+export interface PlainStringType<P> extends PropTypeBaseDefault<P, string> {
     type: "string";
     control?: "default" | "large";
     isLocalizable?: boolean;
 }
-interface CodeStringType<P> extends PropTypeBaseDefault<P, string> {
+export interface CodeStringType<P> extends PropTypeBaseDefault<P, string> {
     type: "code";
     lang: "css" | "html" | "javascript" | "json";
 }
-interface RichTextType<P> extends PropTypeBaseDefault<P, string> {
+export interface RichTextType<P> extends PropTypeBaseDefault<P, string> {
     type: "richText";
 }
-interface HrefType<P> extends PropTypeBaseDefault<P, string> {
+export interface HrefType<P> extends PropTypeBaseDefault<P, string> {
     type: "href";
 }
-interface ColorType<P> extends PropTypeBaseDefault<P, string> {
+export interface ColorType<P> extends PropTypeBaseDefault<P, string> {
     type: "color";
     /**
      * If specified, and the user picks a color token in the Studio, then
@@ -141,13 +141,13 @@ interface ColorType<P> extends PropTypeBaseDefault<P, string> {
      */
     disableTokens?: boolean;
 }
-interface DateStringType<P> extends PropTypeBaseDefault<P, string> {
+export interface DateStringType<P> extends PropTypeBaseDefault<P, string> {
     type: "dateString";
 }
-interface DateRangeStringsType<P> extends PropTypeBaseDefault<P, [string, string]> {
+export interface DateRangeStringsType<P> extends PropTypeBaseDefault<P, [string, string]> {
     type: "dateRangeStrings";
 }
-interface ClassType<P> extends PropTypeBase<P> {
+export interface ClassType<P> extends PropTypeBase<P> {
     type: "class";
     /**
      * Additional css selectors that can change how this style should look.
@@ -178,7 +178,7 @@ interface ClassType<P> extends PropTypeBase<P> {
      */
     styleSections?: StyleSection[];
 }
-interface ThemeResetClassType<P> extends PropTypeBase<P> {
+export interface ThemeResetClassType<P> extends PropTypeBase<P> {
     type: "themeResetClass";
     /**
      * Normally, theme reset class will only target Plasmic-generated tags
@@ -188,7 +188,7 @@ interface ThemeResetClassType<P> extends PropTypeBase<P> {
      */
     targetAllTags?: boolean;
 }
-interface CardPickerType<P> extends PropTypeBaseDefault<P, string> {
+export interface CardPickerType<P> extends PropTypeBaseDefault<P, string> {
     type: "cardPicker";
     modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
     options: {
@@ -205,36 +205,36 @@ interface CardPickerType<P> extends PropTypeBaseDefault<P, string> {
     showInput?: boolean | ContextDependentConfig<P, boolean>;
     onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
 }
-type RichStringType<P> = PlainStringType<P> | CodeStringType<P> | RichTextType<P> | ColorType<P> | ClassType<P> | ThemeResetClassType<P> | CardPickerType<P> | HrefType<P>;
+export type RichStringType<P> = PlainStringType<P> | CodeStringType<P> | RichTextType<P> | ColorType<P> | ClassType<P> | ThemeResetClassType<P> | CardPickerType<P> | HrefType<P>;
 export type StringType<P> = "string" | "href" | RichStringType<P>;
-interface RichBooleanType<P> extends PropTypeBaseDefault<P, boolean> {
+export interface RichBooleanType<P> extends PropTypeBaseDefault<P, boolean> {
     type: "boolean";
 }
 export type BooleanType<P> = "boolean" | RichBooleanType<P>;
-type GraphQLValue = {
+export type GraphQLValue = {
     query: string;
     variables?: Record<string, any>;
 };
-interface GraphQLType<P> extends PropTypeBaseDefault<P, GraphQLValue> {
+export interface GraphQLType<P> extends PropTypeBaseDefault<P, GraphQLValue> {
     type: "code";
     lang: "graphql";
     endpoint: string | ContextDependentConfig<P, string>;
     method?: string | ContextDependentConfig<P, string>;
     headers?: object | ContextDependentConfig<P, object>;
 }
-interface NumberTypeBase<P> extends PropTypeBaseDefault<P, number> {
+export interface NumberTypeBase<P> extends PropTypeBaseDefault<P, number> {
     type: "number";
     min?: number | ContextDependentConfig<P, number>;
     max?: number | ContextDependentConfig<P, number>;
 }
-interface PlainNumberType<P> extends NumberTypeBase<P> {
+export interface PlainNumberType<P> extends NumberTypeBase<P> {
     control?: "default";
 }
-interface SliderNumberType<P> extends NumberTypeBase<P> {
+export interface SliderNumberType<P> extends NumberTypeBase<P> {
     control: "slider";
     step?: number | ContextDependentConfig<P, number>;
 }
-type RichNumberType<P> = PlainNumberType<P> | SliderNumberType<P>;
+export type RichNumberType<P> = PlainNumberType<P> | SliderNumberType<P>;
 export type NumberType<P> = "number" | RichNumberType<P>;
 export interface ObjectType<P> extends PropTypeBaseDefault<P, Record<string, any>> {
     type: "object";
@@ -275,31 +275,31 @@ export interface DataSourceType<P> extends PropTypeBase<P> {
     type: "dataSource";
     dataSource: "airtable" | "cms";
 }
-type DataPickerValueType = string | number | (string | number)[];
-interface RichDataPickerType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
+export type DataPickerValueType = string | number | (string | number)[];
+export interface RichDataPickerType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
     type: "dataSelector";
     data?: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
     alwaysShowValuePathAsLabel?: boolean;
     isolateEnv?: boolean;
 }
-type DataPickerType<P> = "dataPicker" | RichDataPickerType<P>;
-interface RichExprEditorType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
+export type DataPickerType<P> = "dataPicker" | RichDataPickerType<P>;
+export interface RichExprEditorType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
     type: "exprEditor";
     data?: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
     isolateEnv?: boolean;
 }
-type ExprEditorType<P> = "exprEditor" | RichExprEditorType<P>;
-interface FormValidationRulesType<P> extends PropTypeBaseDefault<P, any> {
+export type ExprEditorType<P> = "exprEditor" | RichExprEditorType<P>;
+export interface FormValidationRulesType<P> extends PropTypeBaseDefault<P, any> {
     type: "formValidationRules";
 }
-interface EventHandlerType<P> extends PropTypeBase<P> {
+export interface EventHandlerType<P> extends PropTypeBase<P> {
     type: "eventHandler";
     argTypes: {
         name: string;
         type: PropType<any>;
     }[];
 }
-interface ChoiceTypeBase<P, T> extends PropTypeBaseDefault<P, T> {
+export interface ChoiceTypeBase<P, T> extends PropTypeBaseDefault<P, T> {
     type: "choice";
     options: string[] | {
         label: string;
@@ -312,17 +312,17 @@ interface ChoiceTypeBase<P, T> extends PropTypeBaseDefault<P, T> {
     filterOption?: boolean;
     onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
 }
-interface SingleChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean> {
+export interface SingleChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean> {
     multiSelect?: false;
 }
-interface MultiChoiceType<P> extends ChoiceTypeBase<P, (string | number | boolean)[]> {
+export interface MultiChoiceType<P> extends ChoiceTypeBase<P, (string | number | boolean)[]> {
     multiSelect: true;
 }
-interface CustomChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean | (string | number | boolean)[]> {
+export interface CustomChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean | (string | number | boolean)[]> {
     multiSelect: ContextDependentConfig<P, boolean>;
 }
 export type ChoiceType<P> = SingleChoiceType<P> | MultiChoiceType<P> | CustomChoiceType<P>;
-interface RichSlotType<P> {
+export interface RichSlotType<P> {
     type: "slot";
     /**
      * The unique names of all code components that can be placed in the slot
@@ -357,19 +357,33 @@ interface RichSlotType<P> {
      */
     unstable__isMainContentSlot?: boolean;
     defaultValue?: PlasmicElement | PlasmicElement[];
+    /**
+     * When true, when you click for the first time in this slot and the component was not selected, the component itself
+     * is selected, making it easier to select the component instead of slot contents. So for
+     * instance, setting this on a Button slot ensures that clicking on the Button’s text will still select the Button and not
+     * the text element in its slot. Clicking again will deep-select the slot content. Similar in this regard to trapsFocus on components.
+     *
+     * Furthermore, the component further shows the props of whatever is in the slot on
+     *  the parent component for the user's convenience. Handy for various “wrapper" components, form fields, and so on.
+     */
+    mergeWithParent?: ContextDependentConfig<P, boolean>;
+    /**
+     * A function that returns true to hide the merged props conditionally.
+     */
+    hiddenMergedProps?: ContextDependentConfig<P, boolean>;
 }
-type SlotType<P> = "slot" | RichSlotType<P>;
-interface RichImageUrlType<P> extends PropTypeBaseDefault<P, string> {
+export type SlotType<P> = "slot" | RichSlotType<P>;
+export interface RichImageUrlType<P> extends PropTypeBaseDefault<P, string> {
     type: "imageUrl";
 }
-type ImageUrlType<P> = "imageUrl" | RichImageUrlType<P>;
+export type ImageUrlType<P> = "imageUrl" | RichImageUrlType<P>;
 export interface ModalProps {
     show?: boolean;
     children?: React.ReactNode;
     onClose: () => void;
     style?: CSSProperties;
 }
-interface CustomControlProps<P> {
+export interface CustomControlProps<P> {
     componentProps: P;
     /**
      * `contextData` can be `null` if the prop controls are rendering before
@@ -398,15 +412,14 @@ interface CustomControlProps<P> {
     studioDocument: typeof document;
 }
 export type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;
-interface RichCustomType<P> extends PropTypeBaseDefault<P, any> {
+export interface RichCustomType<P> extends PropTypeBaseDefault<P, any> {
     type: "custom";
     control: CustomControl<P>;
 }
 export type CustomType<P> = RichCustomType<P> | CustomControl<P>;
 export type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
 export type PropType<P> = StringType<P> | BooleanType<P> | GraphQLType<P> | NumberType<P> | JSONLikeType<P> | DataSourceType<P> | DataPickerType<P> | ExprEditorType<P> | FormValidationRulesType<P> | EventHandlerType<P> | ChoiceType<P> | CustomType<P> | ImageUrlType<P> | SlotType<P> | DateStringType<P> | DateRangeStringsType<P>;
-type StringCompatType<P> = DateStringType<P> | StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>;
-type BoolCompatType<P> = BooleanType<P> | CustomType<P> | DataPickerType<P>;
-type NumberCompatType<P> = NumberType<P> | CustomType<P> | DataPickerType<P>;
+export type StringCompatType<P> = DateStringType<P> | StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>;
+export type BoolCompatType<P> = BooleanType<P> | CustomType<P> | DataPickerType<P>;
+export type NumberCompatType<P> = NumberType<P> | CustomType<P> | DataPickerType<P>;
 export type RestrictPropType<T, P> = T extends string ? StringCompatType<P> : T extends boolean ? BoolCompatType<P> : T extends number ? NumberCompatType<P> : PropType<P>;
-export {};

package/dist/registerComponent.d.ts

@@ -237,6 +237,13 @@ export interface CodeComponentMeta<P> {
      * Defaults to "flex".
      */
     defaultDisplay?: string;
+    /**
+     * When true, when you click for the first time anywhere in the component including its slots, the component itself is
+     * selected, making it easier to select the component instead of slot contents. So for instance, setting this on a
+     * Button ensures that clicking on the Button’s text will still select the Button and not the text element in its
+     * slot. Clicking again will deep-select the slot content.
+     */
+    trapsFocus?: boolean;
 }
 export type CodeComponentMode = "advanced" | "simplified" | "database-schema-driven";
 /**

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const hostVersion = "1.0.164";
+export declare const hostVersion = "1.0.166";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/host",
-  "version": "1.0.164",
+  "version": "1.0.166",
   "description": "plasmic library for app hosting",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -80,5 +80,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "83b92a98990acc021cc904ef919c6176e88a3238"
+  "gitHead": "dbe6519e32e754c106a17535505bd1ae7cff082d"
 }

package/registerComponent/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ModalProps,\n  PropType,\n  RestrictPropType,\n} from \"./prop-types\";\nimport { TupleUnion } from \"./type-utils\";\nexport type * from \"./prop-types\";\n\nconst root = globalThis as any;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n      hidden?: ContextDependentConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ContextDependentConfig<P, boolean>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec<P> = {\n  onChangeProp: string;\n\n  /**\n   * If true, will hide the state on studio.\n   */\n  hidden?: ContextDependentConfig<P, boolean>;\n\n  /**\n   * If true, will hide the state in a collapsed section; good for states that\n   * should not usually be used.\n   */\n  advanced?: ContextDependentConfig<P, boolean>;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n  onMutate?: (stateValue: T, $ref: any) => void;\n}\n\n// A compile-time error will occur if a new field is added to the StateHelper\n// interface but not included in the keys array of state helper.\nexport const stateHelpersKeys: TupleUnion<keyof StateHelpers<any, any>> = [\n  \"initFunc\",\n  \"onChangeArgsToValue\",\n  \"onMutate\",\n];\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec<P>>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  /**\n   * If true, then won't be listed in the insert menu for content creators.\n   */\n  hideFromContentCreators?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n\n  /**\n   * Optional function that takes in component props and context, and returns\n   * a string that will be used for labeling this element in the Outline panel\n   * on the left of the Studio.  This makes it easy to identify an element when\n   * looking at the tree.\n   */\n  treeLabel?: ContextDependentConfig<P, string>;\n\n  /**\n   * The value of the CSS display property used by this component.\n   * Plasmic passes in a class name prop to components to let users style them,\n   * but normally this does not include layout properties like display.\n   * However, if the user has set the components visibility to be visible\n   * (for instance, in the base variant it was set to not visible ie display none,\n   * but in a variant it's overridden to be visible), then Plasmic needs to know\n   * what display property to set.\n   * Defaults to \"flex\".\n   */\n  defaultDisplay?: string;\n}\n\nexport type CodeComponentMode =\n  | \"advanced\"\n  | \"simplified\"\n  | \"database-schema-driven\";\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";;;;;AAeA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0G/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AA+MF,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;AAC3C,IAAA,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;AACtC,CAAA;AAEa,SAAU,iBAAiB,CACvC,SAAY,EACZ,IAAgD,EAAA;;AAGhD,IAAA,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB,EAAA;AACvB,QAAA,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAA;AAAtD,KAAsD,CACzD,EACD;QACA,OAAO;AACR,KAAA;AACD,IAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAA,SAAA,EAAE,IAAI,EAAA,IAAA,EAAE,CAAC,CAAC;AAC5D;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ModalProps,\n  PropType,\n  RestrictPropType,\n} from \"./prop-types\";\nimport { TupleUnion } from \"./type-utils\";\nexport type * from \"./prop-types\";\n\nconst root = globalThis as any;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n      hidden?: ContextDependentConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ContextDependentConfig<P, boolean>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec<P> = {\n  onChangeProp: string;\n\n  /**\n   * If true, will hide the state on studio.\n   */\n  hidden?: ContextDependentConfig<P, boolean>;\n\n  /**\n   * If true, will hide the state in a collapsed section; good for states that\n   * should not usually be used.\n   */\n  advanced?: ContextDependentConfig<P, boolean>;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n  onMutate?: (stateValue: T, $ref: any) => void;\n}\n\n// A compile-time error will occur if a new field is added to the StateHelper\n// interface but not included in the keys array of state helper.\nexport const stateHelpersKeys: TupleUnion<keyof StateHelpers<any, any>> = [\n  \"initFunc\",\n  \"onChangeArgsToValue\",\n  \"onMutate\",\n];\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec<P>>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  /**\n   * If true, then won't be listed in the insert menu for content creators.\n   */\n  hideFromContentCreators?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n\n  /**\n   * Optional function that takes in component props and context, and returns\n   * a string that will be used for labeling this element in the Outline panel\n   * on the left of the Studio.  This makes it easy to identify an element when\n   * looking at the tree.\n   */\n  treeLabel?: ContextDependentConfig<P, string>;\n\n  /**\n   * The value of the CSS display property used by this component.\n   * Plasmic passes in a class name prop to components to let users style them,\n   * but normally this does not include layout properties like display.\n   * However, if the user has set the components visibility to be visible\n   * (for instance, in the base variant it was set to not visible ie display none,\n   * but in a variant it's overridden to be visible), then Plasmic needs to know\n   * what display property to set.\n   * Defaults to \"flex\".\n   */\n  defaultDisplay?: string;\n\n  /**\n   * When true, when you click for the first time anywhere in the component including its slots, the component itself is\n   * selected, making it easier to select the component instead of slot contents. So for instance, setting this on a\n   * Button ensures that clicking on the Button’s text will still select the Button and not the text element in its\n   * slot. Clicking again will deep-select the slot content.\n   */\n  trapsFocus?: boolean;\n}\n\nexport type CodeComponentMode =\n  | \"advanced\"\n  | \"simplified\"\n  | \"database-schema-driven\";\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";;;;;AAeA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0G/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AAuNF,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;AAC3C,IAAA,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;AACtC,CAAA;AAEa,SAAU,iBAAiB,CACvC,SAAY,EACZ,IAAgD,EAAA;;AAGhD,IAAA,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB,EAAA;AACvB,QAAA,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAA;AAAtD,KAAsD,CACzD,EACD;QACA,OAAO;AACR,KAAA;AACD,IAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAA,SAAA,EAAE,IAAI,EAAA,IAAA,EAAE,CAAC,CAAC;AAC5D;;;;;"}

package/registerComponent/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ModalProps,\n  PropType,\n  RestrictPropType,\n} from \"./prop-types\";\nimport { TupleUnion } from \"./type-utils\";\nexport type * from \"./prop-types\";\n\nconst root = globalThis as any;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n      hidden?: ContextDependentConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ContextDependentConfig<P, boolean>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec<P> = {\n  onChangeProp: string;\n\n  /**\n   * If true, will hide the state on studio.\n   */\n  hidden?: ContextDependentConfig<P, boolean>;\n\n  /**\n   * If true, will hide the state in a collapsed section; good for states that\n   * should not usually be used.\n   */\n  advanced?: ContextDependentConfig<P, boolean>;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n  onMutate?: (stateValue: T, $ref: any) => void;\n}\n\n// A compile-time error will occur if a new field is added to the StateHelper\n// interface but not included in the keys array of state helper.\nexport const stateHelpersKeys: TupleUnion<keyof StateHelpers<any, any>> = [\n  \"initFunc\",\n  \"onChangeArgsToValue\",\n  \"onMutate\",\n];\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec<P>>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  /**\n   * If true, then won't be listed in the insert menu for content creators.\n   */\n  hideFromContentCreators?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n\n  /**\n   * Optional function that takes in component props and context, and returns\n   * a string that will be used for labeling this element in the Outline panel\n   * on the left of the Studio.  This makes it easy to identify an element when\n   * looking at the tree.\n   */\n  treeLabel?: ContextDependentConfig<P, string>;\n\n  /**\n   * The value of the CSS display property used by this component.\n   * Plasmic passes in a class name prop to components to let users style them,\n   * but normally this does not include layout properties like display.\n   * However, if the user has set the components visibility to be visible\n   * (for instance, in the base variant it was set to not visible ie display none,\n   * but in a variant it's overridden to be visible), then Plasmic needs to know\n   * what display property to set.\n   * Defaults to \"flex\".\n   */\n  defaultDisplay?: string;\n}\n\nexport type CodeComponentMode =\n  | \"advanced\"\n  | \"simplified\"\n  | \"database-schema-driven\";\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";AAeA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0G/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AA+MF,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;AAC3C,IAAA,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;AACtC,CAAA;AAEa,SAAU,iBAAiB,CACvC,SAAY,EACZ,IAAgD,EAAA;;AAGhD,IAAA,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB,EAAA;AACvB,QAAA,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAA;AAAtD,KAAsD,CACzD,EACD;QACA,OAAO;AACR,KAAA;AACD,IAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAA,SAAA,EAAE,IAAI,EAAA,IAAA,EAAE,CAAC,CAAC;AAC5D;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import {\n  CodeComponentElement,\n  CSSProperties,\n  PlasmicElement,\n} from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ModalProps,\n  PropType,\n  RestrictPropType,\n} from \"./prop-types\";\nimport { TupleUnion } from \"./type-utils\";\nexport type * from \"./prop-types\";\n\nconst root = globalThis as any;\n\nexport interface ActionProps<P> {\n  componentProps: P;\n  /**\n   * `contextData` can be `null` if the prop controls are rendering before\n   * the component instance itself (it will re-render once the component\n   * calls `setControlContextData`)\n   */\n  contextData: InferDataType<P> | null;\n  studioOps: {\n    showModal: (\n      modalProps: Omit<ModalProps, \"onClose\"> & { onClose?: () => void }\n    ) => void;\n    refreshQueryData: () => void;\n    appendToSlot: (element: PlasmicElement, slotName: string) => void;\n    removeFromSlotAt: (pos: number, slotName: string) => void;\n    updateProps: (newValues: any) => void;\n  };\n  /**\n   * The document that the component will be rendered into; instead of using\n   * `document` directly (for, say, `document.querySelector()` etc.), you\n   * should use this instead.\n   */\n  studioDocument: typeof document;\n}\n\nexport type Action<P> =\n  | {\n      type: \"button-action\";\n      label: string;\n      onClick: (props: ActionProps<P>) => void;\n      hidden?: ContextDependentConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ContextDependentConfig<P, boolean>;\n    };\n\ntype DistributedKeyOf<T> = T extends any ? keyof T : never;\n\ninterface ComponentTemplate<P>\n  extends Omit<CodeComponentElement<P>, \"type\" | \"name\"> {\n  /**\n   * A preview picture for the template.\n   */\n  previewImg?: string;\n}\n\nexport interface ComponentTemplates<P> {\n  [name: string]: ComponentTemplate<P>;\n}\n\nexport type StateSpec<P> = {\n  onChangeProp: string;\n\n  /**\n   * If true, will hide the state on studio.\n   */\n  hidden?: ContextDependentConfig<P, boolean>;\n\n  /**\n   * If true, will hide the state in a collapsed section; good for states that\n   * should not usually be used.\n   */\n  advanced?: ContextDependentConfig<P, boolean>;\n} & (\n  | {\n      type: \"readonly\";\n      variableType: \"text\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"number\";\n      initVal?: number;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"boolean\";\n      initVal?: boolean;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"array\";\n      initVal?: any[];\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"object\";\n      initVal?: object;\n    }\n  | {\n      type: \"writable\";\n      variableType: \"text\" | \"number\" | \"boolean\" | \"array\" | \"object\";\n      valueProp: string;\n    }\n);\n\nexport interface StateHelpers<P, T> {\n  initFunc?: ($props: P) => T;\n  onChangeArgsToValue?: (...args: any) => T;\n  onMutate?: (stateValue: T, $ref: any) => void;\n}\n\n// A compile-time error will occur if a new field is added to the StateHelper\n// interface but not included in the keys array of state helper.\nexport const stateHelpersKeys: TupleUnion<keyof StateHelpers<any, any>> = [\n  \"initFunc\",\n  \"onChangeArgsToValue\",\n  \"onMutate\",\n];\n\nexport type ComponentHelpers<P> = {\n  states: Record<string, StateHelpers<P, any>>;\n};\n\nexport type ExternalComponentHelpers<P> = {\n  helpers: ComponentHelpers<P>;\n  importPath: string;\n} & (\n  | {\n      importName: string;\n    }\n  | {\n      isDefaultExport: true;\n    }\n);\n\nexport type StyleSection =\n  | \"visibility\"\n  | \"typography\"\n  | \"sizing\"\n  | \"spacing\"\n  | \"background\"\n  | \"transform\"\n  | \"transitions\"\n  | \"layout\"\n  | \"overflow\"\n  | \"border\"\n  | \"shadows\"\n  | \"effects\";\n\nexport interface CodeComponentMeta<P> {\n  /**\n   * Any unique string name used to identify that component. Each component\n   * should be registered with a different `meta.name`, even if they have the\n   * same name in the code.\n   */\n  name: string;\n  /**\n   * The name to be displayed for the component in Studio. Optional: if not\n   * specified, `meta.name` is used.\n   */\n  displayName?: string;\n  /**\n   * The description of the component to be shown in Studio.\n   */\n  description?: string;\n  /**\n   * The javascript name to be used when generating code. Optional: if not\n   * provided, `meta.name` is used.\n   */\n  importName?: string;\n  /**\n   * An object describing the component properties to be used in Studio.\n   * For each `prop`, there should be an entry `meta.props[prop]` describing\n   * its type.\n   */\n  props: { [prop in DistributedKeyOf<P>]?: RestrictPropType<P[prop], P> } & {\n    [prop: string]: PropType<P>;\n  };\n  /**\n   * An object describing the component states to be used in Studio.\n   */\n  states?: Record<string, StateSpec<P>>;\n  /**\n   * An object describing the components helpers to be used in Studio.\n   *   1. states helpers: Each state can receive an \"initFunc\" prop to initialize\n   *      the implicit state in Studio, and an \"onChangeArgsToValue\" prop to\n   *      transform the event handler arguments into a value\n   */\n  componentHelpers?: ExternalComponentHelpers<P>;\n  /**\n   * An array describing the component actions to be used in Studio.\n   */\n  actions?: Action<P>[];\n  /**\n   * Whether style sections should be shown in Studio. For styles to work, the\n   * component must accept a `className` prop. If unset, defaults to all styles.\n   * Set to `false` if this component cannot be styled (for example, if it doesn't\n   * render any DOM elements).\n   */\n  styleSections?: StyleSection[] | boolean;\n  /**\n   * Whether the element can be repeated in Studio. If unset, defaults to true.\n   */\n  isRepeatable?: boolean;\n  /**\n   * The path to be used when importing the component in the generated code.\n   * It can be the name of the package that contains the component, or the path\n   * to the file in the project (relative to the root directory).\n   */\n  importPath: string;\n  /**\n   *  Whether the component is the default export from that path. Optional: if\n   * not specified, it's considered `false`.\n   */\n  isDefaultExport?: boolean;\n  /**\n   * The prop that expects the CSS classes with styles to be applied to the\n   * component. Optional: if not specified, Plasmic will expect it to be\n   * `className`. Notice that if the component does not accept CSS classes, the\n   * component will not be able to receive styles from the Studio.\n   */\n  classNameProp?: string;\n  /**\n   * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`\n   * to interact with components, so it's not used in the generated code.\n   * Optional: If not provided, the usual `ref` is used.\n   */\n  refProp?: string;\n  /**\n   * Default styles to start with when instantiating the component in Plasmic.\n   */\n  defaultStyles?: CSSProperties;\n  /**\n   * Component templates to start with on Plasmic.\n   */\n  templates?: ComponentTemplates<P>;\n  /**\n   * Registered name of parent component, used for grouping related components.\n   */\n  parentComponentName?: string;\n  /**\n   * Whether the component can be used as an attachment to an element.\n   */\n  isAttachment?: boolean;\n  /**\n   * Whether the component provides data to its slots using DataProvider.\n   */\n  providesData?: boolean;\n\n  /**\n   * If specified, then Figma components with the specified names will be mapped\n   * to this component when you paste Figma content into Plasmic\n   */\n  figmaMappings?: {\n    figmaComponentName: string;\n  }[];\n\n  /**\n   * If true, when an instance of this component is added, the element\n   * will always be named by the name of this component.\n   */\n  alwaysAutoName?: boolean;\n\n  /**\n   * If true, then won't be listed in the insert menu for content creators.\n   */\n  hideFromContentCreators?: boolean;\n\n  refActions?: Record<string, RefActionRegistration<P>>;\n\n  /**\n   * Optional function that takes in component props and context, and returns\n   * a string that will be used for labeling this element in the Outline panel\n   * on the left of the Studio.  This makes it easy to identify an element when\n   * looking at the tree.\n   */\n  treeLabel?: ContextDependentConfig<P, string>;\n\n  /**\n   * The value of the CSS display property used by this component.\n   * Plasmic passes in a class name prop to components to let users style them,\n   * but normally this does not include layout properties like display.\n   * However, if the user has set the components visibility to be visible\n   * (for instance, in the base variant it was set to not visible ie display none,\n   * but in a variant it's overridden to be visible), then Plasmic needs to know\n   * what display property to set.\n   * Defaults to \"flex\".\n   */\n  defaultDisplay?: string;\n\n  /**\n   * When true, when you click for the first time anywhere in the component including its slots, the component itself is\n   * selected, making it easier to select the component instead of slot contents. So for instance, setting this on a\n   * Button ensures that clicking on the Button’s text will still select the Button and not the text element in its\n   * slot. Clicking again will deep-select the slot content.\n   */\n  trapsFocus?: boolean;\n}\n\nexport type CodeComponentMode =\n  | \"advanced\"\n  | \"simplified\"\n  | \"database-schema-driven\";\n\n/**\n * @deprecated use CodeComponentMeta instead\n */\nexport type ComponentMeta<P> = CodeComponentMeta<P>;\n\nexport interface FunctionParam<P> {\n  name: string;\n  displayName?: string;\n  type: PropType<P>;\n}\n\nexport interface RefActionRegistration<P> {\n  displayName?: string;\n  description?: string;\n  argTypes: FunctionParam<P>[];\n}\n\nexport interface ComponentRegistration {\n  component: React.ComponentType<any>;\n  meta: CodeComponentMeta<any>;\n}\n\ndeclare global {\n  interface Window {\n    __PlasmicComponentRegistry: ComponentRegistration[];\n  }\n}\n\nif (root.__PlasmicComponentRegistry == null) {\n  root.__PlasmicComponentRegistry = [];\n}\n\nexport default function registerComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: CodeComponentMeta<React.ComponentProps<T>>\n) {\n  // Check for duplicates\n  if (\n    root.__PlasmicComponentRegistry.some(\n      (r: ComponentRegistration) =>\n        r.component === component && r.meta.name === meta.name\n    )\n  ) {\n    return;\n  }\n  root.__PlasmicComponentRegistry.push({ component, meta });\n}\n"],"names":[],"mappings":";AAeA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0G/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AAuNF,IAAI,IAAI,CAAC,0BAA0B,IAAI,IAAI,EAAE;AAC3C,IAAA,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC;AACtC,CAAA;AAEa,SAAU,iBAAiB,CACvC,SAAY,EACZ,IAAgD,EAAA;;AAGhD,IAAA,IACE,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAClC,UAAC,CAAwB,EAAA;AACvB,QAAA,OAAA,CAAC,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAA;AAAtD,KAAsD,CACzD,EACD;QACA,OAAO;AACR,KAAA;AACD,IAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAA,SAAA,EAAE,IAAI,EAAA,IAAA,EAAE,CAAC,CAAC;AAC5D;;;;"}