@plasmicapp/host 1.0.224 → 1.0.226

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../src/registerComponent.ts"],"sourcesContent":["import { CodeComponentElement, CSSProperties } from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ProjectData,\n  PropType,\n  RestrictPropType,\n  StudioOps,\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  /**\n   * Operations available to the editor that allow modifying the entire component.\n   */\n  studioOps: StudioOps;\n  /**\n   * Metadata from the studio project.\n   */\n  projectData: ProjectData;\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: \"readonly\";\n      variableType: \"dateString\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"dateRangeStrings\";\n      initVal?: [string, string];\n    }\n  | {\n      type: \"writable\";\n      variableType:\n        | \"text\"\n        | \"number\"\n        | \"boolean\"\n        | \"array\"\n        | \"object\"\n        | \"dateString\"\n        | \"dateRangeStrings\";\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   * A specific section to which the component should be displayed in Studio. By default, the component will be displayed in the \"Custom Components\" section.\n   * A new section will be created to display the components with the same `section` value.\n   */\n  section?: string;\n  /**\n   * A link to an image that will be displayed as a thumbnail of the component in the Studio, if the component has a `section` specified.\n   */\n  thumbnailUrl?: 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 specified, then Figma components will have their properties transformed\n   * before being applied to this component. This is useful for transforming Figma\n   * properties to the format expected by the component.\n   */\n  figmaPropsTransform?: (\n    props: Record<string, string | number | boolean>\n  ) => Record<\n    string,\n    string | number | boolean | null | unknown[] | Record<string, unknown>\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  /**\n   * An object registering code component's variants that should be allowed in Studio, when the component is\n   * used as the root of a Studio component.\n   */\n  variants?: Record<\n    string,\n    {\n      cssSelector: string;\n      displayName: string;\n    }\n  >;\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":";;;;;AAYA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0H/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AAwPF,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 { CodeComponentElement, CSSProperties } from \"./element-types\";\nimport {\n  ComponentContextConfig,\n  ProjectData,\n  PropType,\n  RestrictPropType,\n  StudioOps,\n} from \"./types/component-types\";\nimport { InferDataType } from \"./types/shared-controls\";\nimport { TupleUnion } from \"./types/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  /**\n   * Operations available to the editor that allow modifying the entire component.\n   */\n  studioOps: StudioOps;\n  /**\n   * Metadata from the studio project.\n   */\n  projectData: ProjectData;\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?: ComponentContextConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ComponentContextConfig<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?: ComponentContextConfig<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?: ComponentContextConfig<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: \"readonly\";\n      variableType: \"dateString\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"dateRangeStrings\";\n      initVal?: [string, string];\n    }\n  | {\n      type: \"writable\";\n      variableType:\n        | \"text\"\n        | \"number\"\n        | \"boolean\"\n        | \"array\"\n        | \"object\"\n        | \"dateString\"\n        | \"dateRangeStrings\";\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   * A specific section to which the component should be displayed in Studio. By default, the component will be displayed in the \"Custom Components\" section.\n   * A new section will be created to display the components with the same `section` value.\n   */\n  section?: string;\n  /**\n   * A link to an image that will be displayed as a thumbnail of the component in the Studio, if the component has a `section` specified.\n   */\n  thumbnailUrl?: 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 specified, then Figma components will have their properties transformed\n   * before being applied to this component. This is useful for transforming Figma\n   * properties to the format expected by the component.\n   */\n  figmaPropsTransform?: (\n    props: Record<string, string | number | boolean>\n  ) => Record<\n    string,\n    string | number | boolean | null | unknown[] | Record<string, unknown>\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?: ComponentContextConfig<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  /**\n   * An object registering code component's variants that should be allowed in Studio, when the component is\n   * used as the root of a Studio component.\n   */\n  variants?: Record<\n    string,\n    {\n      cssSelector: string;\n      displayName: string;\n    }\n  >;\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":";;;;;AAYA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0H/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AAwPF,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 { CodeComponentElement, CSSProperties } from \"./element-types\";\nimport {\n  ContextDependentConfig,\n  InferDataType,\n  ProjectData,\n  PropType,\n  RestrictPropType,\n  StudioOps,\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  /**\n   * Operations available to the editor that allow modifying the entire component.\n   */\n  studioOps: StudioOps;\n  /**\n   * Metadata from the studio project.\n   */\n  projectData: ProjectData;\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: \"readonly\";\n      variableType: \"dateString\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"dateRangeStrings\";\n      initVal?: [string, string];\n    }\n  | {\n      type: \"writable\";\n      variableType:\n        | \"text\"\n        | \"number\"\n        | \"boolean\"\n        | \"array\"\n        | \"object\"\n        | \"dateString\"\n        | \"dateRangeStrings\";\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   * A specific section to which the component should be displayed in Studio. By default, the component will be displayed in the \"Custom Components\" section.\n   * A new section will be created to display the components with the same `section` value.\n   */\n  section?: string;\n  /**\n   * A link to an image that will be displayed as a thumbnail of the component in the Studio, if the component has a `section` specified.\n   */\n  thumbnailUrl?: 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 specified, then Figma components will have their properties transformed\n   * before being applied to this component. This is useful for transforming Figma\n   * properties to the format expected by the component.\n   */\n  figmaPropsTransform?: (\n    props: Record<string, string | number | boolean>\n  ) => Record<\n    string,\n    string | number | boolean | null | unknown[] | Record<string, unknown>\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  /**\n   * An object registering code component's variants that should be allowed in Studio, when the component is\n   * used as the root of a Studio component.\n   */\n  variants?: Record<\n    string,\n    {\n      cssSelector: string;\n      displayName: string;\n    }\n  >;\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":";AAYA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0H/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AAwPF,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 { CodeComponentElement, CSSProperties } from \"./element-types\";\nimport {\n  ComponentContextConfig,\n  ProjectData,\n  PropType,\n  RestrictPropType,\n  StudioOps,\n} from \"./types/component-types\";\nimport { InferDataType } from \"./types/shared-controls\";\nimport { TupleUnion } from \"./types/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  /**\n   * Operations available to the editor that allow modifying the entire component.\n   */\n  studioOps: StudioOps;\n  /**\n   * Metadata from the studio project.\n   */\n  projectData: ProjectData;\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?: ComponentContextConfig<P, boolean>;\n    }\n  | {\n      type: \"custom-action\";\n      control: React.ComponentType<ActionProps<P>>;\n      hidden?: ComponentContextConfig<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?: ComponentContextConfig<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?: ComponentContextConfig<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: \"readonly\";\n      variableType: \"dateString\";\n      initVal?: string;\n    }\n  | {\n      type: \"readonly\";\n      variableType: \"dateRangeStrings\";\n      initVal?: [string, string];\n    }\n  | {\n      type: \"writable\";\n      variableType:\n        | \"text\"\n        | \"number\"\n        | \"boolean\"\n        | \"array\"\n        | \"object\"\n        | \"dateString\"\n        | \"dateRangeStrings\";\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   * A specific section to which the component should be displayed in Studio. By default, the component will be displayed in the \"Custom Components\" section.\n   * A new section will be created to display the components with the same `section` value.\n   */\n  section?: string;\n  /**\n   * A link to an image that will be displayed as a thumbnail of the component in the Studio, if the component has a `section` specified.\n   */\n  thumbnailUrl?: 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 specified, then Figma components will have their properties transformed\n   * before being applied to this component. This is useful for transforming Figma\n   * properties to the format expected by the component.\n   */\n  figmaPropsTransform?: (\n    props: Record<string, string | number | boolean>\n  ) => Record<\n    string,\n    string | number | boolean | null | unknown[] | Record<string, unknown>\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?: ComponentContextConfig<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  /**\n   * An object registering code component's variants that should be allowed in Studio, when the component is\n   * used as the root of a Studio component.\n   */\n  variants?: Record<\n    string,\n    {\n      cssSelector: string;\n      displayName: string;\n    }\n  >;\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":";AAYA,IAAM,IAAI,GAAG,UAAiB,CAAC;AA0H/B;AACA;AACa,IAAA,gBAAgB,GAA6C;IACxE,UAAU;IACV,qBAAqB;IACrB,UAAU;EACV;AAwPF,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/prop-types.d.ts

@@ -1,478 +1,6 @@
-/// <reference types="react" />
-import { CSSProperties, PlasmicElement } from "./element-types";
-import { StyleSection } from "./registerComponent";
-export interface CanvasComponentProps<Data = any> {
-    /**
-     * This prop is only provided within the canvas of Plasmic Studio.
-     * Allows the component to set data to be consumed by the props' controls.
-     */
-    setControlContextData?: (data: Data) => void;
-}
-export type ControlExtras = {
-    path: (string | number)[];
-    item?: any;
-};
-export type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
-/**
- * Context that we pass back to control functions.
- */
-export type ControlContext<P> = [
-    /**
-     * props
-     */
-    P,
-    /**
-     * `contextData` can be `null` if the prop controls are rendering before
-     * the component instance itself (it will re-render once the component
-     * calls `setControlContextData`)
-     */
-    InferDataType<P> | null,
-    /**
-     * Extra information for the control to use
-     */
-    ControlExtras
-];
-/**
- * Config option that takes the context (e.g., props) of the component instance
- * to dynamically set its value.
- */
-export type ContextDependentConfig<P, R> = (...args: ControlContext<P>) => R;
-export interface PropTypeBase<P> {
-    displayName?: string;
-    description?: string;
-    helpText?: string;
-    required?: boolean;
-    /**
-     * If the user has chosen to use a dynamic expression for this prop, provide
-     * a hint as to the expected values that the expression should evaluate to.
-     * This hint will be displayed alongside the code editor.  You may use
-     * markdown in the text here.
-     */
-    exprHint?: string;
-    /**
-     * Function for whether this prop should be hidden in the right panel,
-     * given the current props for this component
-     */
-    hidden?: ContextDependentConfig<P, boolean>;
-    readOnly?: boolean | ContextDependentConfig<P, boolean>;
-    /**
-     * If true, will hide the prop in a collapsed section; good for props that
-     * should not usually be used.
-     */
-    advanced?: boolean;
-    /**
-     * If true, does not allow the user to use a dynamic expression for this prop
-     */
-    disableDynamicValue?: boolean;
-    /**
-     * If set to true, the component will be remounted when the prop value is updated.
-     * (This behavior only applies to canvas)
-     */
-    forceRemount?: boolean;
-    /**
-     * If true, the prop can't be overriden in different variants.
-     */
-    invariantable?: boolean;
-}
-export interface Defaultable<P, T> {
-    /**
-     * Default value to set for this prop when the component is instantiated
-     */
-    defaultValue?: T;
-    /**
-     * If no prop is given, the component uses a default; specify what
-     * that default is so the Plasmic user can see it in the studio UI
-     */
-    defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;
-    /**
-     * Use a dynamic value expression as the default instead
-     */
-    defaultExpr?: string;
-    defaultExprHint?: string;
-    /**
-     * This function validates whether the prop value is valid.
-     * If the value is invalid, it returns an error message. Otherwise, it returns true.
-     */
-    validator?: (value: T, ...args: ControlContext<P>) => (string | true) | Promise<string | true>;
-}
-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
-     * generated code.
-     */
-    editOnly?: boolean;
-    /**
-     * If specified, the value used for this prop will instead be
-     * mapped to the uncontrolledProp when generating code. This is
-     * useful if, for example, in the artboard, you want to use `value`
-     * prop to control the component, but in generated code, you want to
-     * map it to `defaultValue`.
-     */
-    uncontrolledProp?: string;
-}
-export interface PropTypeBaseDefault<P, T> extends PropTypeBase<P>, Defaultable<P, T>, Controllable {
-}
-export interface PlainStringType<P> extends PropTypeBaseDefault<P, string> {
-    type: "string";
-    control?: "default" | "large";
-    isLocalizable?: boolean;
-}
-export interface CodeStringType<P> extends PropTypeBaseDefault<P, string> {
-    type: "code";
-    lang: "css" | "html" | "javascript" | "json";
-}
-export interface RichTextType<P> extends PropTypeBaseDefault<P, string> {
-    type: "richText";
-}
-export interface HrefType<P> extends PropTypeBaseDefault<P, string> {
-    type: "href";
-}
-export interface ColorType<P> extends PropTypeBaseDefault<P, string> {
-    type: "color";
-    /**
-     * If specified, and the user picks a color token in the Studio, then
-     * the value passed in as prop is a css variable reference, like
-     * `var(--TOKEN_ID)`, instead of the resolved hex value of the token.
-     * You should take care in using this in the proper css context --
-     * the css token is only defined if you are rendering under some
-     * Plasmic component in the DOM tree, which is usually the case,
-     * unless you are using a React portal.
-     */
-    keepCssVar?: boolean;
-    /**
-     * Prevent tokens from being selected.
-     */
-    disableTokens?: boolean;
-}
-export interface DateStringType<P> extends PropTypeBaseDefault<P, string> {
-    type: "dateString";
-}
-export interface DateRangeStringsType<P> extends PropTypeBaseDefault<P, [string, string]> {
-    type: "dateRangeStrings";
-}
-export interface ClassType<P> extends PropTypeBase<P> {
-    type: "class";
-    /**
-     * Additional css selectors that can change how this style should look.
-     * Some examples:
-     *
-     * * `:hover` -- on hover
-     * * `[data-something="blah"] -- when the element with this class has
-     *   an html attribute "data-something=blah"
-     * * :component[data-something="blah"] :self -- when the root of the
-     *   component has an html attribute "data-something=blah". Note that
-     *   the non-standard `:component` selector is used to select the
-     *   component root, and the non-standard `:self` selector is used
-     *   to select the element that this class is attached to.
-     */
-    selectors?: {
-        /**
-         * A css selector, like `:hover` or `[data-something="blah"]`.
-         */
-        selector: string;
-        /**
-         * An optional human-friendly label for the selector, so the studio user
-         * knows what this selector means.
-         */
-        label?: string;
-        /**
-         * Initial styles to be applied for this selector
-         */
-        defaultStyles?: CSSProperties;
-    }[];
-    /**
-     * If specified, then only shows these style sections for styling this class
-     */
-    styleSections?: StyleSection[];
-    /**
-     * Initial styles to be applied for this class
-     */
-    defaultStyles?: CSSProperties;
-}
-export interface ThemeResetClassType<P> extends PropTypeBase<P> {
-    type: "themeResetClass";
-    /**
-     * Normally, theme reset class will only target Plasmic-generated tags
-     * with the default tag styles. If you also want to target non-Plasmic-generated
-     * tags (say, rendered by your code components, or fetched as an HTML blob
-     * from somewhere), then specify `true` here.
-     */
-    targetAllTags?: boolean;
-}
-export interface CardPickerType<P> extends PropTypeBaseDefault<P, string> {
-    type: "cardPicker";
-    modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
-    options: {
-        value: string;
-        label?: string;
-        imgUrl: string;
-        footer?: React.ReactNode;
-    }[] | ContextDependentConfig<P, {
-        value: string;
-        label?: string;
-        imgUrl: string;
-        footer?: React.ReactNode;
-    }[]>;
-    showInput?: boolean | ContextDependentConfig<P, boolean>;
-    onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
-}
-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>;
-export interface RichBooleanType<P> extends PropTypeBaseDefault<P, boolean> {
-    type: "boolean";
-}
-export type BooleanType<P> = "boolean" | RichBooleanType<P>;
-export type GraphQLValue = {
-    query: string;
-    variables?: Record<string, any>;
-};
-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>;
-}
-export interface NumberTypeBase<P> extends PropTypeBaseDefault<P, number> {
-    type: "number";
-    min?: number | ContextDependentConfig<P, number>;
-    max?: number | ContextDependentConfig<P, number>;
-}
-export interface PlainNumberType<P> extends NumberTypeBase<P> {
-    control?: "default";
-}
-export interface SliderNumberType<P> extends NumberTypeBase<P> {
-    control: "slider";
-    step?: number | ContextDependentConfig<P, number>;
-}
-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";
-    fields?: Record<string, PropType<P>>;
-    nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
-}
-export interface ArrayType<P> extends PropTypeBaseDefault<P, any[]> {
-    type: "array";
-    itemType?: ObjectType<P>;
-    /**
-     * Optional function that determines whether the user can delete a given item.
-     */
-    unstable__canDelete?: (item: any, ...args: ControlContext<P>) => boolean;
-    /**
-     * Specify how to let Plasmic know how to update its own internal representation of the data when the value has
-     * changed, or when issuing a minimalValue or shownValue that is different.
-     *
-     * Important to specify this if you are expecting any nested expression values in this data type!
-     */
-    unstable__keyFunc?: (item: any) => any;
-    /**
-     * Specify what would be the tentative new value that is set if the user makes any changes.
-     *
-     * Useful for field mappings.
-     *
-     * For instance, consider a Table where we have a `fields` prop:
-     *
-     * - Initially, the value is undefined. But if the user makes any changes, we would want to save an array of at
-     *   least three items (corresponding to, say, three columns inferred from a schema).
-     *
-     * - Let's say there are 5 columns in the value. The data schema changes, removing a column and adding two new
-     *   ones. Now we would want a different minimal value, containing 6 items.
-     */
-    unstable__minimalValue?: ContextDependentConfig<P, any>;
-}
-export type JSONLikeType<P> = "object" | ObjectType<P> | ArrayType<P>;
-export interface DataSourceType<P> extends PropTypeBase<P> {
-    type: "dataSource";
-    dataSource: "airtable" | "cms";
-}
-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;
-}
-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;
-}
-export type ExprEditorType<P> = "exprEditor" | RichExprEditorType<P>;
-export interface FormValidationRulesType<P> extends PropTypeBaseDefault<P, any> {
-    type: "formValidationRules";
-}
-export interface EventHandlerType<P> extends PropTypeBase<P> {
-    type: "eventHandler";
-    argTypes: {
-        name: string;
-        type: ArgType<any>;
-    }[];
-}
-export type ChoiceValue = string | number | boolean;
-export type ChoiceObject = {
-    label: string;
-    value: ChoiceValue;
-};
-export type ChoiceOptions = ChoiceValue[] | ChoiceObject[];
-export interface ChoiceTypeBase<P, T> extends PropTypeBaseDefault<P, T> {
-    type: "choice";
-    options: ChoiceOptions | ContextDependentConfig<P, string[] | {
-        label: string;
-        value: string | number | boolean;
-    }[]>;
-    allowSearch?: boolean;
-    filterOption?: boolean;
-    onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
-}
-export interface SingleChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean> {
-    multiSelect?: false;
-}
-export interface MultiChoiceType<P> extends ChoiceTypeBase<P, (string | number | boolean)[]> {
-    multiSelect: true;
-}
-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>;
-export interface RichSlotType<P> {
-    type: "slot";
-    description?: string;
-    /**
-     * The unique names of all code components that can be placed in the slot
-     */
-    allowedComponents?: string[];
-    /**
-     * Wheter Plasmic Components with a root component included in the
-     * "allowedComponents" list are valid or not.
-     * Only used if the "allowedComponents" list is set.
-     */
-    allowRootWrapper?: boolean;
-    /**
-     * Whether the "empty slot" placeholder should be hidden in the canvas.
-     */
-    hidePlaceholder?: boolean;
-    /**
-     * Whether the slot is repeated, i.e., is rendered multiple times using
-     * repeatedElement().
-     */
-    isRepeated?: boolean;
-    /**
-     * A nicer, human-readable display name for your slot prop
-     */
-    displayName?: string;
-    /**
-     * Function for whether this slot should be hidden from the left tree,
-     * given the current props for this component
-     */
-    hidden?: ContextDependentConfig<P, boolean>;
-    /**
-     * If slot is a render prop (accepts a function that takes in some
-     * arguments and returns some JSX), then specify the names of the
-     * arguments expected by the render prop function.
-     */
-    renderPropParams?: string[];
-    /**
-     * When inserting top-level "page sections", should this slot be the default target?
-     */
-    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?: boolean | ContextDependentConfig<P, boolean>;
-    /**
-     * A function that returns true to hide the merged props conditionally.
-     */
-    hiddenMergedProps?: ContextDependentConfig<P, boolean>;
-}
-export type SlotType<P> = "slot" | RichSlotType<P>;
-export interface RichImageUrlType<P> extends PropTypeBaseDefault<P, string> {
-    type: "imageUrl";
-}
-export type ImageUrlType<P> = "imageUrl" | RichImageUrlType<P>;
-export interface ModalProps {
-    show?: boolean;
-    children?: React.ReactNode;
-    onClose: () => void;
-    style?: CSSProperties;
-}
-export interface StudioOps {
-    showModal: (modalProps: Omit<ModalProps, "onClose"> & {
-        onClose?: () => void;
-    }) => void;
-    refreshQueryData: () => void;
-    appendToSlot: (element: PlasmicElement, slotName: string) => void;
-    removeFromSlotAt: (pos: number, slotName: string) => void;
-    updateProps: (newValues: any) => void;
-    updateStates: (newValues: any) => void;
-}
-export interface ProjectData {
-    components: {
-        name: string;
-    }[];
-    pages: {
-        name: string;
-        pageMeta: {
-            path: string;
-        };
-    }[];
-}
-export interface CustomControlProps<P> {
-    componentProps: P;
-    /**
-     * `contextData` can be `null` if the prop controls are rendering before
-     * the component instance itself (it will re-render once the component
-     * calls `setControlContextData`)
-     */
-    contextData: InferDataType<P> | null;
-    /**
-     * Operations available to the editor that allow modifying the entire component.
-     * Can be null if the custom prop is used in a global context.
-     */
-    studioOps: StudioOps | null;
-    /**
-     * Metadata from the studio project.
-     */
-    projectData: ProjectData;
-    value: any;
-    /**
-     * Sets the value to be passed to the prop. Expects a JSON-compatible value.
-     */
-    updateValue: (newVal: any) => void;
-    /**
-     * Full screen modal component
-     */
-    FullscreenModal: React.ComponentType<ModalProps>;
-    /**
-     * Modal component for the side pane
-     */
-    SideModal: React.ComponentType<ModalProps>;
-    /**
-     * The document that the component will be rendered into; instead of using
-     * `document` directly (for, say, `document.querySelector()` etc.), you
-     * should use this instead.
-     */
-    studioDocument: typeof document;
-}
-export type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;
-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>;
-export type ArgType<P> = Exclude<PropType<P>, SlotType<P> | EventHandlerType<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>;
+import { ChoiceObject, ChoiceOptions, ChoiceValue } from "./types/choice-type";
+import { ComponentControlContext, DynamicType } from "./types/component-types";
+import { DataPickerValueType, GraphQLValue } from "./types/misc-types";
+import { CanvasComponentProps, ContextDependentConfig, ControlExtras, InferDataType } from "./types/shared-controls";
+export type { CanvasComponentProps, ChoiceObject, ChoiceOptions, ChoiceValue, ComponentControlContext, ContextDependentConfig, ControlExtras, DataPickerValueType, DynamicType, GraphQLValue, InferDataType, };
+export type * from "./types/component-types";