import { Configuration, RuleSetRule } from 'webpack'; import { moduleFederationPlugin } from '@module-federation/enhanced'; /** * Runtime module loader type */ declare enum ModuleLoader { FEDERATION = "FEDERATION", SSR = "SSR" } /** * Officially supported frameworks */ declare enum Framework { React = "React" } /** * Rendering environment */ declare enum Environment { Client = "Client", Server = "Server" } /** * Webflow props types */ declare enum PropType { Id = "Id", Text = "Text", RichText = "RichText", Link = "Link", Image = "Image", Visibility = "Visibility", Slot = "Slot", Number = "Number", Variant = "Variant", Boolean = "Boolean", TextNode = "TextNode", Attributes = "Attributes" } type WebflowContext = { /** The Webflow canvas mode currently being viewed, or "publish" for the published site */ mode: "design" | "build" | "edit" | "preview" | "component-preview" | "comment" | "analyze" | "publish"; /** Whether the current mode allows for component interaction — `true` for preview and publish modes, `false` otherwise */ interactive: boolean; /** Current locale string the component is being rendered in */ locale: null | string; }; type PropValues = { [PropType.Id]: string; [PropType.Text]: string; [PropType.RichText]: string; [PropType.Link]: { href: string; target?: "_self" | "_blank" | string; preload?: "prerender" | "prefetch" | "none" | string; }; [PropType.Image]: { src: string; alt?: string; }; [PropType.Visibility]: boolean; [PropType.Slot]: NodeType; [PropType.Number]: number; [PropType.Variant]: string; [PropType.Boolean]: boolean; [PropType.TextNode]: string; [PropType.Attributes]: Record; }; type PropSettings = { [PropType.Id]: object; [PropType.Text]: object; [PropType.RichText]: object; [PropType.Link]: object; [PropType.Image]: object; [PropType.Visibility]: object; [PropType.Slot]: object; [PropType.Number]: { /** The minimum value allowed. Lower values will be clamped */ min?: number; /** The maximum value allowed. Higher values will be clamped */ max?: number; /** The maximum number of decimals. Longer values will be rounded */ decimals?: number; }; [PropType.Variant]: { /** An array of options, used for the prop value and the display name in the Properties panel */ options: string[]; }; [PropType.Boolean]: { /** The label for the true state */ trueLabel?: string; /** The label for the false state */ falseLabel?: string; }; [PropType.TextNode]: { /** Whether the text node should allow multiple lines */ multiline?: boolean; }; [PropType.Attributes]: object; }; type PropTypesWithOptionalDefaultValue = PropType.Text | PropType.Visibility | PropType.Number | PropType.Variant | PropType.Boolean | PropType.TextNode | PropType.RichText; type PropTypesWithoutDefaultValue = PropType.Id | PropType.Link | PropType.Image | PropType.Slot | PropType.Attributes; type BasePropValues = { type: T; displayName: string; tooltip?: string; settings?: PropSettings[T] | undefined; }; type ComponentProp = T extends PropTypesWithOptionalDefaultValue ? { defaultValue?: PropValues[T]; } & BasePropValues : T extends PropTypesWithoutDefaultValue ? { defaultValue?: undefined; } & BasePropValues : never; type ComponentProps

= { [K in keyof P as undefined extends P[K] ? never : K]: ComponentProp, NodeType>; } & { [K in keyof P as undefined extends P[K] ? K : never]?: ComponentProp, NodeType>; }; type PropTypeCompatibleWith = { [P in PropType]: T extends PropValues[P] ? P : never; }[PropType]; type ComponentRuntimeProps = { [name: string]: PropValues[PropType]; }; type ComponentRuntimeError = { error: Error; message: string; stack?: string; code?: string; }; /** * Values that survive `JSON.stringify` → `JSON.parse` unchanged in shape. */ type JsonPrimitive = string | number | boolean | null; type JsonValue = JsonPrimitive | JsonValue[] | { readonly [key: string]: JsonValue; }; /** * Values allowed in prerender `data` (JSON round-trip to the client). * Alias of {@link JsonValue}. */ type PrerenderDataValue = JsonValue; type ComponentRuntimeOptions = { /** * A function to handle runtime errors. */ onError?: (error: ComponentRuntimeError) => void; /** * The Webflow context provided by the host. */ webflowContext: WebflowContext; /** * JSON-serializable map produced during prerender and passed through * the host into `hydrate` so the client can consume the same values * without re-suspending. Values must be {@link PrerenderDataValue}. */ data?: Record; }; type ComponentPrerenderOptions = { /** * When the render exceeds this many milliseconds the stream is aborted. * The timer is cleared once HTML has been collected. */ timeout?: number; /** * When aborted, the pipeable stream is aborted and collection fails. * If already aborted before the call, rejects immediately. */ signal?: AbortSignal; }; /** * Input options defined in `declareComponent(Component, { options })` */ type ComponentOptions = { /** * An optional flag to provide styles targeting tag selectors to the code component. * @defaultValue `false` */ applyTagSelectors?: boolean; /** * An optional flag to enable server-side rendering for the code component. * When 'prerender', the code component will be prerendered awaiting Suspense boundaries to resolve. * @defaultValue `true` */ ssr?: "prerender" | true | false; }; /** * Transformed options passed to the backend. */ type ComponentOptionsMetadata = { /** * An optional flag to provide styles targeting tag selectors to the code component. * @defaultValue `false` */ applyTagSelectors?: boolean; /** * An optional flag to enable server-side rendering for the code component. * @defaultValue `true` */ ssr?: boolean; /** * An optional flag to enable prerendering during server-side rendering for the code component. * When enabled, the code component will be prerendered awaiting Suspense boundaries to resolve. * This doesn't apply if ssr is disabled. * @defaultValue `false` */ prerender?: boolean; }; /** * A decorator function that wraps a component with additional functionality. * * The ComponentType parameter represents the component type (e.g., React.ComponentType

). * * @example * ```tsx * const myDecorator: ComponentDecorator> = (Component) => (props) => ( * * * * ); * ``` */ type ComponentDecorator = (Component: ComponentType) => ComponentType; type ComponentData

= { /** The display name of the code component */ name: string; /** An optional description of the code component */ description?: string; /** An optional group for the code component */ group?: string; /** An optional object with the code component props configurations */ props?: ComponentProps; /** An optional object with additional code component options */ options?: ComponentOptions; /** An optional array of decorator functions to wrap the component */ decorators?: ComponentDecorator[]; }; type ComponentDefinition = ComponentData & { component: ComponentType; framework: Framework; }; type ComponentMetadata = { /** * Component display name. If missing - id will be used */ displayName?: string; /** * Component description */ description?: string; /** * Component group */ group?: string; /** * Component props metadata */ props?: ComponentPropMetadata[]; /** * Component options */ options?: ComponentOptionsMetadata; }; type ComponentPropMetadata = { name: string; type: PropType; displayName?: string; defaultValue?: string; settings?: string; tooltip?: string; }; /** * Code Component server-side type definition. */ type CodeComponent = { /** * Component module unique id */ id: string; /** * Component export name in the module */ exportPath: string; /** * Component framework. Currently we only support React */ framework: Framework; /** * Component display name. If missing - id will be used */ displayName?: string; /** * Component description */ description?: string; /** * Component group */ group?: string; /** * Component hash, used for changelog */ hash?: string; /** * Component props metadata */ props?: ComponentPropMetadata[]; /** * Component options */ options?: ComponentOptionsMetadata; }; type ServerPrerenderResult = string | { html: string; styles?: string; data?: Record; }; type ServerRenderResult = string | { html: string; styles?: string; }; type ComponentClientRendererFactory = (component: ComponentType) => ComponentClientRenderer; type ComponentClientRenderer = { mount: (domNode: Element) => RootType; hydrate: (domNode: Element, props?: ComponentRuntimeProps, options?: ComponentRuntimeOptions) => RootType; render: (root: RootType, props?: ComponentRuntimeProps, options?: ComponentRuntimeOptions) => void; createSlot: (name: string) => NodeType; }; type ComponentServerRendererFactory = (component: ComponentType) => ComponentServerRenderer; type ComponentServerRenderer = { renderToStream: (props?: ComponentRuntimeProps, options?: ComponentRuntimeOptions, streamOptions?: StreamOptionsType) => StreamType; renderToString: (props?: ComponentRuntimeProps, options?: ComponentRuntimeOptions, stringOptions?: StringOptionsType) => ServerRenderResult; prerenderToString: (props?: ComponentRuntimeProps, options?: ComponentRuntimeOptions, prerenderOptions?: ComponentPrerenderOptions) => Promise; createElement: (props?: ComponentRuntimeProps, options?: ComponentRuntimeOptions) => NodeType; createSlot: (name: string) => NodeType; }; /** * Renderer interface implementing required render * lifecycle methods for specific a specific framework. */ type ComponentRendererInterface = { ClientRenderer: ComponentClientRendererFactory; ServerRenderer: ComponentServerRendererFactory; }; /** * Webflow runtime renderer module's default export */ type ComponentRendererRuntimeModule = { env: Environment.Client; Renderer: ComponentClientRendererFactory; } | { env: Environment.Server; Renderer: ComponentServerRendererFactory; }; type BundleConfigOverrideObj = Omit & { ModuleFederationPlugin?: { shared?: moduleFederationPlugin.Shared; }; module?: Omit, "rules"> & { rules?: (currentRules: RuleSetRule[]) => RuleSetRule[]; }; }; type BundleConfigOverrideFn = (env: Environment) => BundleConfigOverrideObj; type BundleConfigOverride = BundleConfigOverrideObj | BundleConfigOverrideFn; type BundleConfigOverrides = BundleConfigOverride | BundleConfigOverride[]; type BaseOptions = { /** The display name of the prop in the Properties panel */ name: string; /** An optional group for the prop in the Properties panel */ group?: string; /** An optional tooltip text for the prop in the Properties panel */ tooltip?: string; }; type OptionalDefaultValue = T extends PropType.Variant ? { /** An optional default value for the prop on all component instances. The first option is used if a default isn't provided */ defaultValue?: PropValues[T]; } : { /** An optional default value for the prop on all component instances */ defaultValue?: PropValues[T]; }; type PropOptions = T extends PropTypesWithOptionalDefaultValue ? OptionalDefaultValue & BaseOptions & PropSettings[T] : T extends PropTypesWithoutDefaultValue ? BaseOptions & PropSettings[T] : never; type PropConstructor = (opts: PropOptions) => ComponentProp; /** * Webflow props definition constructors for creating component properties. * * This object provides factory functions for creating different types of props * that can be used in Webflow code components. Each prop type corresponds to * a different input interface in the Properties panel. * */ declare const props: { /** * Creates a prop for plain text input, provided to the component as a `string`. * * @see {@link props.String} for an alias to this prop constructor. * * @param opts Configuration options for the text prop * @param opts.name The display name of the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Text: PropConstructor; /** * Alias for {@link props.Text}. Creates a prop for plain text input, provided to the component as a `string`. * * @param opts Configuration options for the text prop * @param opts.name The display name of the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ String: PropConstructor; /** * Creates a prop for specifying an element ID, provided to the component as a `string`. * * @param opts Configuration options for the id prop * @param opts.name The display name of the prop in the Properties panel * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Id: PropConstructor; /** * Creates a prop for specifying a link destination and behavior, provided to the component as an `object`: * * ```ts * { * href: string; * target?: "_self" | "_blank" | string; * preload?: "prerender" | "prefetch" | "none" | string; * } * ``` * * @param opts Configuration options for the link prop * @param opts.name The display name of the prop in the Properties panel * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Link: PropConstructor; /** * Creates a prop for selecting an image asset, provided to the component as an `object`: * ```ts * { * src: string; * alt?: string; * } * ``` * * @param opts Configuration options for the image prop * @param opts.name The display name of the prop in the Properties panel * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Image: PropConstructor; /** * Creates a prop for specifying visibility, provided to the component as a `boolean`. * * @param opts Configuration options for the visibility prop * @param opts.name The display name of the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Visibility: PropConstructor; /** * Creates a slot where child components can be added, provided to the component as a node (e.g., `ReactNode` for React). * * @see {@link props.Children} for an alias to this prop constructor. * * @param opts Configuration options for the slot prop * @param opts.name The display name of the prop in the Properties panel * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Slot: PropConstructor; /** * Alias for {@link props.Slot}. Creates a slot where child components can be added, provided to the component as a node (e.g., `ReactNode` for React). * * @param opts Configuration options for the slot prop * @param opts.name The display name of the prop in the Properties panel * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Children: PropConstructor; /** * Creates a prop for rich text input, provided to the component as a node (e.g., `ReactNode` for React). * * @param opts Configuration options for the rich text prop * @param opts.name The display name of the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ RichText: PropConstructor; /** * Creates a prop for numeric input, provided to the component as a `number`. * * @param opts Configuration options for the number prop * @param opts.name The display name of the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances * @param opts.min The minimum value allowed. Lower values will be clamped * @param opts.max The maximum value allowed. Higher values will be clamped * @param opts.decimals The maximum number of decimals. Longer values will be rounded * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Number: PropConstructor; /** * Creates a Variant prop for selecting a visual variant, provided to the component as a `string` (the selected option). * * @example * ```tsx * props.Variant({ * name: 'Button Style', * defaultValue: 'Primary', * options: ['Primary', 'Secondary', 'Tertiary'], * }) * ``` * * @param opts Configuration options for the variant prop * @param opts.name The display name of the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances. The first option is used if a default isn't provided * @param opts.options An array of options, used for the prop value and the display name in the Properties panel * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Variant: PropConstructor; /** * Creates a prop for boolean input, provided to the component as a `boolean`. * * @param opts Configuration options for the boolean prop * @param opts.name The display name of the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances * @param opts.trueLabel The label for the true state * @param opts.falseLabel The label for the false state * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Boolean: PropConstructor; /** * Creates a prop for text node input, provided to the component as a node (e.g., `ReactNode` for React). * * @param opts Configuration options for the text node prop * @param opts.name The display name of the prop in the Properties panel * @param opts.multiline Whether the text node should allow multiple lines * @param opts.group An optional group for the prop in the Properties panel * @param opts.defaultValue An optional default value for the prop on all component instances * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ TextNode: PropConstructor; /** * Creates a prop for custom element attributes, provided to the component as * a `Record` that should be spread onto an element. * * Attributes props cannot declare a default value — instances always start * with an empty attribute map. * * @param opts Configuration options for the attributes prop * @param opts.name The display name of the prop in the Properties panel * @param opts.group An optional group for the prop in the Properties panel * @param opts.tooltip An optional tooltip text for the prop in the Properties panel */ Attributes: PropConstructor; }; /** * Validates that input data is of type ComponentData */ declare function parseComponentData

(input: unknown): ComponentData; declare function parseComponentMetadata

(input: unknown): ComponentMetadata; type ComponentsManifest = { [componentName: string]: { css: string[]; }; }; type BundleManifest = { version: number; entry: string; components: ComponentsManifest; } & ({ type: ModuleLoader.FEDERATION; renderer: string; } | { type: ModuleLoader.SSR; }); export { type BundleConfigOverride, type BundleConfigOverrideFn, type BundleConfigOverrideObj, type BundleConfigOverrides, type BundleManifest, type CodeComponent, type ComponentClientRendererFactory, type ComponentData, type ComponentDecorator, type ComponentDefinition, type ComponentMetadata, type ComponentOptions, type ComponentOptionsMetadata, type ComponentPrerenderOptions, type ComponentPropMetadata, type ComponentProps, type ComponentRendererInterface, type ComponentRendererRuntimeModule, type ComponentRuntimeError, type ComponentRuntimeOptions, type ComponentRuntimeProps, type ComponentServerRendererFactory, type ComponentsManifest, Environment, Framework, ModuleLoader, type PrerenderDataValue, PropType, type PropValues, type ServerPrerenderResult, type ServerRenderResult, type WebflowContext, parseComponentData, parseComponentMetadata, props };