Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@plasmicapp/host

Package Overview
Dependencies
Maintainers
1
Versions
247
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@plasmicapp/host - npm Package Compare versions

Comparing version 1.0.136 to 1.0.138

dist/prop-types.d.ts

3

dist/exports.d.ts

@@ -6,3 +6,4 @@ export { PlasmicCanvasContext, PlasmicCanvasHost, usePlasmicCanvasContext, } from "./canvas-host";

export * from "./global-actions";
export { Action, ActionProps, CodeComponentMeta, ComponentHelpers, ComponentMeta, ComponentRegistration, ComponentTemplates, ContextDependentConfig, default as registerComponent, DefaultValueOrExpr, PrimitiveType, PropType, PropTypeBase, StateHelpers, StateSpec, CodeComponentMode, } from "./registerComponent";
export { Action, ActionProps, CodeComponentMeta, ComponentHelpers, ComponentMeta, ComponentRegistration, ComponentTemplates, default as registerComponent, StateHelpers, StateSpec, CodeComponentMode, } from "./registerComponent";
export { PropType, ContextDependentConfig } from "./prop-types";
export { default as registerGlobalContext, GlobalContextMeta, GlobalContextRegistration, PropType as GlobalContextPropType, } from "./registerGlobalContext";

@@ -9,0 +10,0 @@ export { default as registerToken, TokenRegistration, TokenType, } from "./registerToken";

@@ -1,2 +0,2 @@

import { PrimitiveType } from "./registerComponent";
import { PrimitiveType } from "./prop-types";
export type Fetcher = (...args: any[]) => Promise<any>;

@@ -3,0 +3,0 @@ export interface FetcherMeta {

@@ -464,3 +464,3 @@ 'use client';

var hostVersion = "1.0.136";
var hostVersion = "1.0.138";

@@ -467,0 +467,0 @@ var root = globalThis;

@@ -494,3 +494,3 @@ 'use client';

var hostVersion = "1.0.136";
var hostVersion = "1.0.138";

@@ -497,0 +497,0 @@ var root = globalThis;

/// <reference types="react" />
import { CodeComponentElement, CSSProperties, PlasmicElement } from "./element-types";
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;
}
type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
export type ControlExtras = {
path: (string | number)[];
};
/**
* 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;
/**
* 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 appliees to canvas)
*/
forceRemount?: boolean;
}
export type DefaultValueOrExpr<P, T> = {
defaultExpr?: undefined;
defaultExprHint?: undefined;
defaultValue?: T;
defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;
} | {
defaultValue?: undefined;
defaultValueHint?: undefined;
defaultExpr?: string;
defaultExprHint?: string;
};
type StringTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, string>;
export type StringType<P> = "string" | (({
type: "string";
control?: "default" | "large";
} | {
type: "code";
lang: "css" | "html" | "javascript" | "json";
} | {
type: "richText";
} | {
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;
} | {
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;
}[];
/**
* If specified, then only shows these style sections for styling this class
*/
styleSections?: StyleSection[];
} | {
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;
} | {
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>;
}) & StringTypeBase<P>);
export type BooleanType<P> = "boolean" | ({
type: "boolean";
} & DefaultValueOrExpr<P, boolean> & PropTypeBase<P>);
type GraphQLValue = {
query: string;
variables?: Record<string, any>;
};
export type GraphQLType<P> = {
type: "code";
lang: "graphql";
endpoint: string | ContextDependentConfig<P, string>;
method?: string | ContextDependentConfig<P, string>;
headers?: object | ContextDependentConfig<P, object>;
} & DefaultValueOrExpr<P, GraphQLValue> & PropTypeBase<P>;
type NumberTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, number> & {
type: "number";
};
export type NumberType<P> = "number" | (({
control?: "default";
min?: number | ContextDependentConfig<P, number>;
max?: number | ContextDependentConfig<P, number>;
} | {
control: "slider";
min: number | ContextDependentConfig<P, number>;
max: number | ContextDependentConfig<P, number>;
step?: number | ContextDependentConfig<P, number>;
}) & NumberTypeBase<P>);
/**
* Expects defaultValue to be a JSON-compatible value
*/
export type JSONLikeType<P> = "object" | ({
type: "object";
fields?: {
[p: string]: PropType<P>;
};
/**
* Optional function that generates a name for this item in the array
*/
nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
} & DefaultValueOrExpr<P, any> & PropTypeBase<P>) | ({
type: "array";
itemType?: {
type: "object";
fields: {
[p: string]: PropType<P>;
};
/**
* Optional function that generates a name for this item in the array
*/
nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
};
/**
* 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>;
} & DefaultValueOrExpr<P, any[]> & PropTypeBase<P>) | ({
type: "dataSource";
dataSource: "airtable" | "cms";
} & PropTypeBase<P>);
type DataPickerValueType = string | number | (string | number)[];
export type DataPickerType<P> = ({
type: "dataSelector";
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
alwaysShowValuePathAsLabel?: boolean;
} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>) | ({
type: "exprEditor";
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>);
export type FormValidationRulesType<P> = {
type: "formValidationRules";
} & DefaultValueOrExpr<P, any> & PropTypeBase<P>;
export type EventHandlerType<P> = {
type: "eventHandler";
argTypes: {
name: string;
type: PropType<any>;
}[];
} & DefaultValueOrExpr<P, (...args: any) => any> & PropTypeBase<P>;
interface ChoiceTypeBase<P> extends PropTypeBase<P> {
type: "choice";
options: string[] | {
label: string;
value: string | number | boolean;
}[] | ContextDependentConfig<P, string[] | {
label: string;
value: string | number | boolean;
}[]>;
allowSearch?: boolean;
filterOption?: boolean;
onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
}
export type ChoiceType<P> = (({
multiSelect?: false;
} & DefaultValueOrExpr<P, string | number | boolean>) | ({
multiSelect: true;
} & DefaultValueOrExpr<P, (string | number | boolean)[]>) | ({
multiSelect: ContextDependentConfig<P, boolean>;
} & DefaultValueOrExpr<P, string | number | boolean | (string | number | boolean)[]>)) & ChoiceTypeBase<P>;
export interface ModalProps {
show?: boolean;
children?: React.ReactNode;
onClose: () => void;
style?: CSSProperties;
}
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;
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>>;
/**
* Expects defaultValue to be a JSON-compatible value
*/
export type CustomType<P> = CustomControl<P> | ({
type: "custom";
control: CustomControl<P>;
} & PropTypeBase<P> & DefaultValueOrExpr<P, any>);
type SlotType<P> = "slot" | ({
type: "slot";
/**
* The unique names of all code components that can be placed in the slot
*/
allowedComponents?: string[];
/**
* 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;
} & Omit<DefaultValueOrExpr<P, PlasmicElement | PlasmicElement[]>, "defaultValueHint" | "defaultExpr" | "defaultExprHint">);
type ImageUrlType<P> = "imageUrl" | ({
type: "imageUrl";
} & DefaultValueOrExpr<P, string> & PropTypeBase<P>);
export type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
type ControlTypeBase = {
editOnly?: false;
} | {
editOnly: true;
/**
* The prop where the values should be mapped to
*/
uncontrolledProp?: string;
};
export type SupportControlled<T> = Extract<T, string | CustomControl<any>> | (Exclude<T, string | CustomControl<any>> & ControlTypeBase);
export type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | ImageUrlType<P> | CustomType<P> | GraphQLType<P> | DataPickerType<P> | FormValidationRulesType<P> | EventHandlerType<P>> | SlotType<P>;
type RestrictPropType<T, P> = T extends string ? SupportControlled<StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>> : T extends boolean ? SupportControlled<BooleanType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : T extends number ? SupportControlled<NumberType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : PropType<P>;
import { ContextDependentConfig, InferDataType, ModalProps, PropType, RestrictPropType } from "./prop-types";
export type { CanvasComponentProps, ControlExtras, ControlContext, ContextDependentConfig, PropType, } from "./prop-types";
export interface ActionProps<P> {

@@ -597,2 +232,1 @@ componentProps: P;

export default function registerComponent<T extends React.ComponentType<any>>(component: T, meta: CodeComponentMeta<React.ComponentProps<T>>): void;
export {};
/// <reference types="react" />
import { BooleanType, ChoiceType, CustomType, FunctionParam, JSONLikeType, NumberType, StringType, SupportControlled } from "./registerComponent";
export type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | CustomType<P>>;
type RestrictPropType<T, P> = T extends string ? SupportControlled<StringType<P> | ChoiceType<P> | JSONLikeType<P> | CustomType<P>> : T extends boolean ? SupportControlled<BooleanType<P> | JSONLikeType<P> | CustomType<P>> : T extends number ? SupportControlled<NumberType<P> | JSONLikeType<P> | CustomType<P>> : PropType<P>;
import { BooleanType, ChoiceType, CustomType, JSONLikeType, NumberType, StringType, DataSourceType } from "./prop-types";
import { FunctionParam } from "./registerComponent";
export type PropType<P> = StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | CustomType<P> | DataSourceType<P>;
type RestrictPropType<T, P> = T extends string ? StringType<P> | ChoiceType<P> | JSONLikeType<P> | CustomType<P> : T extends boolean ? BooleanType<P> | JSONLikeType<P> | CustomType<P> : T extends number ? NumberType<P> | JSONLikeType<P> | CustomType<P> : PropType<P>;
type DistributedKeyOf<T> = T extends any ? keyof T : never;

@@ -6,0 +7,0 @@ export interface GlobalContextMeta<P> {

@@ -1,1 +0,1 @@

export declare const hostVersion = "1.0.136";
export declare const hostVersion = "1.0.138";
{
"name": "@plasmicapp/host",
"version": "1.0.136",
"version": "1.0.138",
"description": "plasmic library for app hosting",

@@ -83,3 +83,3 @@ "main": "dist/index.cjs.js",

},
"gitHead": "9f7e1bff70ae5f945027b4718d85d2a17f89501e"
"gitHead": "241834a7707bc26beff06edcdba7149717f93408"
}
/// <reference types="react" />
import { CodeComponentElement, CSSProperties, PlasmicElement } from "./element-types";
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;
}
type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
export type ControlExtras = {
path: (string | number)[];
};
/**
* 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;
/**
* 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 appliees to canvas)
*/
forceRemount?: boolean;
}
export type DefaultValueOrExpr<P, T> = {
defaultExpr?: undefined;
defaultExprHint?: undefined;
defaultValue?: T;
defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;
} | {
defaultValue?: undefined;
defaultValueHint?: undefined;
defaultExpr?: string;
defaultExprHint?: string;
};
type StringTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, string>;
export type StringType<P> = "string" | (({
type: "string";
control?: "default" | "large";
} | {
type: "code";
lang: "css" | "html" | "javascript" | "json";
} | {
type: "richText";
} | {
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;
} | {
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;
}[];
/**
* If specified, then only shows these style sections for styling this class
*/
styleSections?: StyleSection[];
} | {
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;
} | {
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>;
}) & StringTypeBase<P>);
export type BooleanType<P> = "boolean" | ({
type: "boolean";
} & DefaultValueOrExpr<P, boolean> & PropTypeBase<P>);
type GraphQLValue = {
query: string;
variables?: Record<string, any>;
};
export type GraphQLType<P> = {
type: "code";
lang: "graphql";
endpoint: string | ContextDependentConfig<P, string>;
method?: string | ContextDependentConfig<P, string>;
headers?: object | ContextDependentConfig<P, object>;
} & DefaultValueOrExpr<P, GraphQLValue> & PropTypeBase<P>;
type NumberTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, number> & {
type: "number";
};
export type NumberType<P> = "number" | (({
control?: "default";
min?: number | ContextDependentConfig<P, number>;
max?: number | ContextDependentConfig<P, number>;
} | {
control: "slider";
min: number | ContextDependentConfig<P, number>;
max: number | ContextDependentConfig<P, number>;
step?: number | ContextDependentConfig<P, number>;
}) & NumberTypeBase<P>);
/**
* Expects defaultValue to be a JSON-compatible value
*/
export type JSONLikeType<P> = "object" | ({
type: "object";
fields?: {
[p: string]: PropType<P>;
};
/**
* Optional function that generates a name for this item in the array
*/
nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
} & DefaultValueOrExpr<P, any> & PropTypeBase<P>) | ({
type: "array";
itemType?: {
type: "object";
fields: {
[p: string]: PropType<P>;
};
/**
* Optional function that generates a name for this item in the array
*/
nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
};
/**
* 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>;
} & DefaultValueOrExpr<P, any[]> & PropTypeBase<P>) | ({
type: "dataSource";
dataSource: "airtable" | "cms";
} & PropTypeBase<P>);
type DataPickerValueType = string | number | (string | number)[];
export type DataPickerType<P> = ({
type: "dataSelector";
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
alwaysShowValuePathAsLabel?: boolean;
} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>) | ({
type: "exprEditor";
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>);
export type FormValidationRulesType<P> = {
type: "formValidationRules";
} & DefaultValueOrExpr<P, any> & PropTypeBase<P>;
export type EventHandlerType<P> = {
type: "eventHandler";
argTypes: {
name: string;
type: PropType<any>;
}[];
} & DefaultValueOrExpr<P, (...args: any) => any> & PropTypeBase<P>;
interface ChoiceTypeBase<P> extends PropTypeBase<P> {
type: "choice";
options: string[] | {
label: string;
value: string | number | boolean;
}[] | ContextDependentConfig<P, string[] | {
label: string;
value: string | number | boolean;
}[]>;
allowSearch?: boolean;
filterOption?: boolean;
onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
}
export type ChoiceType<P> = (({
multiSelect?: false;
} & DefaultValueOrExpr<P, string | number | boolean>) | ({
multiSelect: true;
} & DefaultValueOrExpr<P, (string | number | boolean)[]>) | ({
multiSelect: ContextDependentConfig<P, boolean>;
} & DefaultValueOrExpr<P, string | number | boolean | (string | number | boolean)[]>)) & ChoiceTypeBase<P>;
export interface ModalProps {
show?: boolean;
children?: React.ReactNode;
onClose: () => void;
style?: CSSProperties;
}
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;
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>>;
/**
* Expects defaultValue to be a JSON-compatible value
*/
export type CustomType<P> = CustomControl<P> | ({
type: "custom";
control: CustomControl<P>;
} & PropTypeBase<P> & DefaultValueOrExpr<P, any>);
type SlotType<P> = "slot" | ({
type: "slot";
/**
* The unique names of all code components that can be placed in the slot
*/
allowedComponents?: string[];
/**
* 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;
} & Omit<DefaultValueOrExpr<P, PlasmicElement | PlasmicElement[]>, "defaultValueHint" | "defaultExpr" | "defaultExprHint">);
type ImageUrlType<P> = "imageUrl" | ({
type: "imageUrl";
} & DefaultValueOrExpr<P, string> & PropTypeBase<P>);
export type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
type ControlTypeBase = {
editOnly?: false;
} | {
editOnly: true;
/**
* The prop where the values should be mapped to
*/
uncontrolledProp?: string;
};
export type SupportControlled<T> = Extract<T, string | CustomControl<any>> | (Exclude<T, string | CustomControl<any>> & ControlTypeBase);
export type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | ImageUrlType<P> | CustomType<P> | GraphQLType<P> | DataPickerType<P> | FormValidationRulesType<P> | EventHandlerType<P>> | SlotType<P>;
type RestrictPropType<T, P> = T extends string ? SupportControlled<StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>> : T extends boolean ? SupportControlled<BooleanType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : T extends number ? SupportControlled<NumberType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : PropType<P>;
import { ContextDependentConfig, InferDataType, ModalProps, PropType, RestrictPropType } from "./prop-types";
export type { CanvasComponentProps, ControlExtras, ControlContext, ContextDependentConfig, PropType, } from "./prop-types";
export interface ActionProps<P> {

@@ -597,2 +232,1 @@ componentProps: P;

export default function registerComponent<T extends React.ComponentType<any>>(component: T, meta: CodeComponentMeta<React.ComponentProps<T>>): void;
export {};
/// <reference types="react" />
import { CodeComponentElement, CSSProperties, PlasmicElement } from "./element-types";
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;
}
type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
export type ControlExtras = {
path: (string | number)[];
};
/**
* 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;
/**
* 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 appliees to canvas)
*/
forceRemount?: boolean;
}
export type DefaultValueOrExpr<P, T> = {
defaultExpr?: undefined;
defaultExprHint?: undefined;
defaultValue?: T;
defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;
} | {
defaultValue?: undefined;
defaultValueHint?: undefined;
defaultExpr?: string;
defaultExprHint?: string;
};
type StringTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, string>;
export type StringType<P> = "string" | (({
type: "string";
control?: "default" | "large";
} | {
type: "code";
lang: "css" | "html" | "javascript" | "json";
} | {
type: "richText";
} | {
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;
} | {
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;
}[];
/**
* If specified, then only shows these style sections for styling this class
*/
styleSections?: StyleSection[];
} | {
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;
} | {
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>;
}) & StringTypeBase<P>);
export type BooleanType<P> = "boolean" | ({
type: "boolean";
} & DefaultValueOrExpr<P, boolean> & PropTypeBase<P>);
type GraphQLValue = {
query: string;
variables?: Record<string, any>;
};
export type GraphQLType<P> = {
type: "code";
lang: "graphql";
endpoint: string | ContextDependentConfig<P, string>;
method?: string | ContextDependentConfig<P, string>;
headers?: object | ContextDependentConfig<P, object>;
} & DefaultValueOrExpr<P, GraphQLValue> & PropTypeBase<P>;
type NumberTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, number> & {
type: "number";
};
export type NumberType<P> = "number" | (({
control?: "default";
min?: number | ContextDependentConfig<P, number>;
max?: number | ContextDependentConfig<P, number>;
} | {
control: "slider";
min: number | ContextDependentConfig<P, number>;
max: number | ContextDependentConfig<P, number>;
step?: number | ContextDependentConfig<P, number>;
}) & NumberTypeBase<P>);
/**
* Expects defaultValue to be a JSON-compatible value
*/
export type JSONLikeType<P> = "object" | ({
type: "object";
fields?: {
[p: string]: PropType<P>;
};
/**
* Optional function that generates a name for this item in the array
*/
nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
} & DefaultValueOrExpr<P, any> & PropTypeBase<P>) | ({
type: "array";
itemType?: {
type: "object";
fields: {
[p: string]: PropType<P>;
};
/**
* Optional function that generates a name for this item in the array
*/
nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
};
/**
* 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>;
} & DefaultValueOrExpr<P, any[]> & PropTypeBase<P>) | ({
type: "dataSource";
dataSource: "airtable" | "cms";
} & PropTypeBase<P>);
type DataPickerValueType = string | number | (string | number)[];
export type DataPickerType<P> = ({
type: "dataSelector";
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
alwaysShowValuePathAsLabel?: boolean;
} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>) | ({
type: "exprEditor";
data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>);
export type FormValidationRulesType<P> = {
type: "formValidationRules";
} & DefaultValueOrExpr<P, any> & PropTypeBase<P>;
export type EventHandlerType<P> = {
type: "eventHandler";
argTypes: {
name: string;
type: PropType<any>;
}[];
} & DefaultValueOrExpr<P, (...args: any) => any> & PropTypeBase<P>;
interface ChoiceTypeBase<P> extends PropTypeBase<P> {
type: "choice";
options: string[] | {
label: string;
value: string | number | boolean;
}[] | ContextDependentConfig<P, string[] | {
label: string;
value: string | number | boolean;
}[]>;
allowSearch?: boolean;
filterOption?: boolean;
onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
}
export type ChoiceType<P> = (({
multiSelect?: false;
} & DefaultValueOrExpr<P, string | number | boolean>) | ({
multiSelect: true;
} & DefaultValueOrExpr<P, (string | number | boolean)[]>) | ({
multiSelect: ContextDependentConfig<P, boolean>;
} & DefaultValueOrExpr<P, string | number | boolean | (string | number | boolean)[]>)) & ChoiceTypeBase<P>;
export interface ModalProps {
show?: boolean;
children?: React.ReactNode;
onClose: () => void;
style?: CSSProperties;
}
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;
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>>;
/**
* Expects defaultValue to be a JSON-compatible value
*/
export type CustomType<P> = CustomControl<P> | ({
type: "custom";
control: CustomControl<P>;
} & PropTypeBase<P> & DefaultValueOrExpr<P, any>);
type SlotType<P> = "slot" | ({
type: "slot";
/**
* The unique names of all code components that can be placed in the slot
*/
allowedComponents?: string[];
/**
* 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;
} & Omit<DefaultValueOrExpr<P, PlasmicElement | PlasmicElement[]>, "defaultValueHint" | "defaultExpr" | "defaultExprHint">);
type ImageUrlType<P> = "imageUrl" | ({
type: "imageUrl";
} & DefaultValueOrExpr<P, string> & PropTypeBase<P>);
export type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
type ControlTypeBase = {
editOnly?: false;
} | {
editOnly: true;
/**
* The prop where the values should be mapped to
*/
uncontrolledProp?: string;
};
export type SupportControlled<T> = Extract<T, string | CustomControl<any>> | (Exclude<T, string | CustomControl<any>> & ControlTypeBase);
export type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | ImageUrlType<P> | CustomType<P> | GraphQLType<P> | DataPickerType<P> | FormValidationRulesType<P> | EventHandlerType<P>> | SlotType<P>;
type RestrictPropType<T, P> = T extends string ? SupportControlled<StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>> : T extends boolean ? SupportControlled<BooleanType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : T extends number ? SupportControlled<NumberType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : PropType<P>;
import { ContextDependentConfig, InferDataType, ModalProps, PropType, RestrictPropType } from "./prop-types";
export type { CanvasComponentProps, ControlExtras, ControlContext, ContextDependentConfig, PropType, } from "./prop-types";
export interface ActionProps<P> {

@@ -597,2 +232,1 @@ componentProps: P;

export default function registerComponent<T extends React.ComponentType<any>>(component: T, meta: CodeComponentMeta<React.ComponentProps<T>>): void;
export {};
/// <reference types="react" />
import { BooleanType, ChoiceType, CustomType, FunctionParam, JSONLikeType, NumberType, StringType, SupportControlled } from "./registerComponent";
export type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | CustomType<P>>;
type RestrictPropType<T, P> = T extends string ? SupportControlled<StringType<P> | ChoiceType<P> | JSONLikeType<P> | CustomType<P>> : T extends boolean ? SupportControlled<BooleanType<P> | JSONLikeType<P> | CustomType<P>> : T extends number ? SupportControlled<NumberType<P> | JSONLikeType<P> | CustomType<P>> : PropType<P>;
import { BooleanType, ChoiceType, CustomType, JSONLikeType, NumberType, StringType, DataSourceType } from "./prop-types";
import { FunctionParam } from "./registerComponent";
export type PropType<P> = StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | CustomType<P> | DataSourceType<P>;
type RestrictPropType<T, P> = T extends string ? StringType<P> | ChoiceType<P> | JSONLikeType<P> | CustomType<P> : T extends boolean ? BooleanType<P> | JSONLikeType<P> | CustomType<P> : T extends number ? NumberType<P> | JSONLikeType<P> | CustomType<P> : PropType<P>;
type DistributedKeyOf<T> = T extends any ? keyof T : never;

@@ -6,0 +7,0 @@ export interface GlobalContextMeta<P> {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc