@wix/react-component-schema 1.5.0 → 1.7.0

package/dist/index.d.ts

@@ -259,6 +259,35 @@ declare interface BreakpointPresetStyleOverrides {
     small?: PresetStyleOverrides;
 }
 
+declare interface ClientResources {
+    /**
+     * A URL to an ESM javascript bundle. It's default export should be the component
+     * @format WEB_URL
+     */
+    componentUrl?: string;
+    /**
+     * A URL to the CSS file that is the default layout and style for the component
+     * @format WEB_URL
+     */
+    cssUrl?: string | null;
+    /**
+     * A list of service dependencies required by the component, example: ['@wix/environment']
+     * @maxLength 80
+     * @maxSize 20
+     * @deprecated A list of service dependencies required by the component, example: ['@wix/environment']
+     * @replacedBy dependencies
+     * @targetRemovalDate 2025-12-30
+     */
+    serviceDependencies?: string[];
+    /**
+     * A module specifier for the component’s react code.
+     * @maxLength 100
+     */
+    moduleSpecifier?: string | null;
+    /** Dependencies on services and contexts */
+    dependencies?: EditorDependencies;
+}
+
 /** Represents the information needed for code panels */
 declare interface CodePanel {
     /**
@@ -1298,6 +1327,30 @@ declare enum DataType {
     onSubmit = "onSubmit"
 }
 
+declare interface DefaultPresets {
+    /**
+     * Default preset ID in small (mobile) breakpoint
+     * @minLength 1
+     * @maxLength 50
+     */
+    small?: string | null;
+    /**
+     * Deprecated, use default - Default preset ID in large (desktop) breakpoint
+     * @minLength 1
+     * @maxLength 50
+     * @deprecated Deprecated, use default - Default preset ID in large (desktop) breakpoint
+     * @replacedBy default
+     * @targetRemovalDate 2025-12-02
+     */
+    large?: string | null;
+    /**
+     * Default preset ID
+     * @minLength 1
+     * @maxLength 50
+     */
+    default?: string | null;
+}
+
 export declare interface Display {
     /**
      * list of display values in case we want to reduce the abilities exposed to the User
@@ -1516,6 +1569,37 @@ declare enum DisplayValueEnumDisplayValue {
     listItem = "listItem"
 }
 
+export declare const DOM_EVENT: {
+    readonly POINTER: "POINTER";
+    readonly CHANGE: "CHANGE";
+    readonly FOCUS: "FOCUS";
+    readonly SUBMIT: "SUBMIT";
+    readonly KEYBOARD: "KEYBOARD";
+};
+
+export declare type DomEvent = (typeof DOM_EVENT)[keyof typeof DOM_EVENT];
+
+declare interface EditorDependencies {
+    /**
+     * A list of service dependencies required by the component, example: ['@wix/environment']
+     * @maxLength 80
+     * @maxSize 20
+     */
+    serviceDependencies?: string[];
+    /**
+     * Dependencies on context providers in order to work
+     * @maxLength 80
+     * @maxSize 20
+     */
+    contextDependencies?: string[];
+    /**
+     * Dependencies on components that we want as externals in our bundle, example: wixEditorElements.AppWidget
+     * @maxLength 80
+     * @maxSize 20
+     */
+    componentDependencies?: string[];
+}
+
 export declare type EditorElement = EditorElement_2 & RequiredFields<EditorElement_2, 'selector' | 'displayName'> & {
     presets?: Record<string, PresetItem>;
 };
@@ -1606,6 +1690,41 @@ declare interface EditorFunction {
     /* Excluded from this release type: deprecated */
 }
 
+/** The full model for an imported component set in DEV Center */
+export declare interface EditorReactComponent {
+    /**
+     * The type of component to present in the Page tree, will be prefixed with AppSlug
+     * @maxLength 100
+     * @minLength 1
+     */
+    type?: string;
+    /**
+     * The public description of the component do display
+     * @maxLength 300
+     * @minLength 3
+     */
+    description?: string;
+    /** List of component resources. This comprises any runtime code we need to load and execute for the component. */
+    resources?: Resources;
+    /** The configuration describing the component abilities and behaviors on the Editor stage */
+    editorElement?: EditorElement_2;
+    /** The installation settings of the component */
+    installation?: InstallationInfo;
+    /** Module configuration for NPM-based component */
+    moduleConfiguration?: EditorReactComponentModuleConfiguration;
+}
+
+declare interface EditorReactComponentModuleConfiguration {
+    /** Public NPM package details */
+    package?: NPMPackage;
+    /** The component export details */
+    component?: NPMPackageEntry;
+    /** The component CSS File location */
+    cssFile?: NPMPackageEntry;
+    /** The component SSR version export details */
+    server?: NPMPackageEntry;
+}
+
 declare enum EffectGroup {
     UNKNOWN_EFFECT_GROUP = "UNKNOWN_EFFECT_GROUP",
     /** Effects that are applied to the background layer of the component */
@@ -1796,6 +1915,14 @@ declare enum FilterFunction {
     hueRotate = "hueRotate"
 }
 
+/** Fixed position builder for component installation */
+declare interface FixedPositionBuilder {
+    /** Vertical position in the browser window */
+    vertical?: Vertical;
+    /** Horizontal position in the browser window */
+    horizontal?: Horizontal;
+}
+
 export declare interface Font {
     /**
      * Stores the font-style property of the font shorthand
@@ -2028,6 +2155,13 @@ declare interface HelpArticleArticleTypeOneOf {
     url?: string | null;
 }
 
+declare enum Horizontal {
+    NONE = "NONE",
+    LEFT = "LEFT",
+    CENTER = "CENTER",
+    RIGHT = "RIGHT"
+}
+
 export declare interface Image {
     /** media manager categories to open media manager filtered by the component needs */
     category?: ImageCategoryTypes;
@@ -2124,6 +2258,23 @@ export declare interface InlineElement {
     helpArticle?: HelpArticle;
 }
 
+declare interface InstallationInfo extends InstallationInfoTargetContainerOneOf {
+    /** Which static container should the component be installed at */
+    staticContainer?: StaticContainer;
+    /** Default presets per breakpoint with which the component should be installed */
+    presets?: DefaultPresets;
+    /** Initial size with which the component should be added to the stage */
+    initialSize?: ComponentInitialSize;
+    /** Fixed position options for the component. If set, the component will be pinned to the specified position, and can't be unpinned */
+    fixedPosition?: FixedPositionBuilder;
+}
+
+/** @oneof */
+declare interface InstallationInfoTargetContainerOneOf {
+    /** Which static container should the component be installed at */
+    staticContainer?: StaticContainer;
+}
+
 export declare const INTERACTIONS: {
     TRIGGER_TYPE: typeof InteractionsTrigger;
     EFFECT_GROUP: typeof EffectGroup;
@@ -2270,6 +2421,34 @@ export declare enum NATIVE_STATE_TYPE {
     invalid = "invalid"
 }
 
+declare interface NPMPackage {
+    /**
+     * The npm package name
+     * @minLength 1
+     * @maxLength 214
+     */
+    name?: string;
+    /**
+     * the SEMVER package version
+     * @minLength 1
+     * @maxLength 214
+     */
+    version?: string;
+}
+
+declare interface NPMPackageEntry {
+    /**
+     * optional path to file in package
+     * @maxLength 200
+     */
+    path?: string | null;
+    /**
+     * The named export key to import. If empty, the default export is used.
+     * @maxLength 200
+     */
+    exportKey?: string | null;
+}
+
 export declare enum OverrideType {
     UNKNOWN = "UNKNOWN",
     DEV = "DEV",
@@ -2621,6 +2800,38 @@ declare enum ResizeDirection {
     none = "none"
 }
 
+declare interface Resource {
+    /**
+     * A URL to an ESM javascript bundle
+     * @format WEB_URL
+     */
+    url?: string;
+}
+
+declare interface Resources {
+    /** The bundle we will load and render in the browser in the site */
+    client?: ClientResources;
+    /**
+     * An optional client definition of the component we will load and render in the editor, *it replaces the client bundle.*
+     * The  main use case is to control the live site component and enable different experiences in the editor.
+     * For example, supporting `states` manipulation:
+     * Show calendar in the editor
+     * Open drop down in the editor
+     */
+    editor?: ClientResources;
+    /** The bundle for SSR, should not include any DOM API references */
+    server?: Resource;
+    /** The optional component SDK to expose to Velo Users to interact with the component */
+    sdk?: Resource;
+    /** Details for how to load translations for the component */
+    translations?: TranslationResources;
+    /** The optional interactions configuration JSON file */
+    interactions?: Resource;
+    /* Excluded from this release type: viewerReducedModel */
+    /* Excluded from this release type: schemaRefsUrl */
+    /* Excluded from this release type: viewerRuntimeCss */
+}
+
 /** rich text data type allow manipulation of text with html & inline styles */
 declare interface RichText {
     /**
@@ -2758,6 +2969,14 @@ declare enum SizingType {
 
 export declare type States = NonNullable<EditorElement_2['states']>;
 
+declare enum StaticContainer {
+    UNKNOWN_CONTAINER = "UNKNOWN_CONTAINER",
+    /** Widget should be installed in the homepage */
+    HOMEPAGE = "HOMEPAGE",
+    /** Show widget on all pages */
+    GLOBAL_PAGE = "GLOBAL_PAGE"
+}
+
 /** DEPRECATED - use CssPropertyAction or CssCustomPropertyAction */
 declare interface StyleAction {
     /**
@@ -3185,6 +3404,20 @@ export declare interface TextGroup {
     a11y?: string | null;
 }
 
+declare interface TranslationResources {
+    /**
+     * The URL that we will add the language to for fetching translations, example: `https://somecdn.com/translations/`
+     * @format WEB_URL
+     */
+    basePath?: string;
+    /**
+     * The list of supported languages according to the [ISO-639-1 specification](https://en.wikipedia.org/wiki/ISO_639-1)
+     * @format LANGUAGE
+     * @maxSize 37
+     */
+    languages?: string[];
+}
+
 export declare interface VectorArt {
     /** media manager categories to open media manager filtered by the component needs */
     category?: VectorArtCategoryTypes;
@@ -3218,6 +3451,13 @@ declare interface VectorArtOverrides {
     category?: VectorArtCategoryTypes;
 }
 
+declare enum Vertical {
+    NONE = "NONE",
+    TOP = "TOP",
+    CENTER = "CENTER",
+    BOTTOM = "BOTTOM"
+}
+
 export declare interface Video {
     /** media manager categories to open media manager filtered by the component needs */
     category?: VideoCategoryTypes;

package/dist/index.js

@@ -539,6 +539,13 @@ var MEDIA = {
   VECTOR_ART_CATEGORY: VectorArtCategoryTypes,
   IMAGE_CATEGORY: ImageCategoryTypes
 };
+const DOM_EVENT = {
+  POINTER: "POINTER",
+  CHANGE: "CHANGE",
+  FOCUS: "FOCUS",
+  SUBMIT: "SUBMIT",
+  KEYBOARD: "KEYBOARD"
+};
 export {
   ACTIONS,
   ActionName as ACTION_NAME,
@@ -547,6 +554,7 @@ export {
   CSS_PROPERTIES,
   DATA,
   DISPLAY_GROUPS,
+  DOM_EVENT,
   ELEMENTS,
   INTERACTIONS,
   LAYOUT,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Schema constants and types for EditorReactComponent extension",
   "type": "module",
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
     "build": "vite build",
     "pretest": "vite build",
     "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit",
     "lint": "biome check src/"
   },
   "keywords": [],
@@ -52,5 +53,5 @@
       ]
     }
   },
-  "falconPackageHash": "b432d738be20865e7356082187540d6c0cde0a2cfcf7927aa00c666c"
+  "falconPackageHash": "ec12e42e643d5bb6ebf0efb0e259c690f18dacdcfa23a136a873c967"
 }

package/src/__snapshots__/index.test.ts.snap

@@ -674,6 +674,35 @@ declare interface BreakpointPresetStyleOverrides {
     small?: PresetStyleOverrides;
 }
 
+declare interface ClientResources {
+    /**
+     * A URL to an ESM javascript bundle. It's default export should be the component
+     * @format WEB_URL
+     */
+    componentUrl?: string;
+    /**
+     * A URL to the CSS file that is the default layout and style for the component
+     * @format WEB_URL
+     */
+    cssUrl?: string | null;
+    /**
+     * A list of service dependencies required by the component, example: ['@wix/environment']
+     * @maxLength 80
+     * @maxSize 20
+     * @deprecated A list of service dependencies required by the component, example: ['@wix/environment']
+     * @replacedBy dependencies
+     * @targetRemovalDate 2025-12-30
+     */
+    serviceDependencies?: string[];
+    /**
+     * A module specifier for the component’s react code.
+     * @maxLength 100
+     */
+    moduleSpecifier?: string | null;
+    /** Dependencies on services and contexts */
+    dependencies?: EditorDependencies;
+}
+
 /** Represents the information needed for code panels */
 declare interface CodePanel {
     /**
@@ -1713,6 +1742,30 @@ declare enum DataType {
     onSubmit = "onSubmit"
 }
 
+declare interface DefaultPresets {
+    /**
+     * Default preset ID in small (mobile) breakpoint
+     * @minLength 1
+     * @maxLength 50
+     */
+    small?: string | null;
+    /**
+     * Deprecated, use default - Default preset ID in large (desktop) breakpoint
+     * @minLength 1
+     * @maxLength 50
+     * @deprecated Deprecated, use default - Default preset ID in large (desktop) breakpoint
+     * @replacedBy default
+     * @targetRemovalDate 2025-12-02
+     */
+    large?: string | null;
+    /**
+     * Default preset ID
+     * @minLength 1
+     * @maxLength 50
+     */
+    default?: string | null;
+}
+
 export declare interface Display {
     /**
      * list of display values in case we want to reduce the abilities exposed to the User
@@ -1931,6 +1984,37 @@ declare enum DisplayValueEnumDisplayValue {
     listItem = "listItem"
 }
 
+export declare const DOM_EVENT: {
+    readonly POINTER: "POINTER";
+    readonly CHANGE: "CHANGE";
+    readonly FOCUS: "FOCUS";
+    readonly SUBMIT: "SUBMIT";
+    readonly KEYBOARD: "KEYBOARD";
+};
+
+export declare type DomEvent = (typeof DOM_EVENT)[keyof typeof DOM_EVENT];
+
+declare interface EditorDependencies {
+    /**
+     * A list of service dependencies required by the component, example: ['@wix/environment']
+     * @maxLength 80
+     * @maxSize 20
+     */
+    serviceDependencies?: string[];
+    /**
+     * Dependencies on context providers in order to work
+     * @maxLength 80
+     * @maxSize 20
+     */
+    contextDependencies?: string[];
+    /**
+     * Dependencies on components that we want as externals in our bundle, example: wixEditorElements.AppWidget
+     * @maxLength 80
+     * @maxSize 20
+     */
+    componentDependencies?: string[];
+}
+
 export declare type EditorElement = EditorElement_2 & RequiredFields<EditorElement_2, 'selector' | 'displayName'> & {
     presets?: Record<string, PresetItem>;
 };
@@ -2021,6 +2105,41 @@ declare interface EditorFunction {
     /* Excluded from this release type: deprecated */
 }
 
+/** The full model for an imported component set in DEV Center */
+export declare interface EditorReactComponent {
+    /**
+     * The type of component to present in the Page tree, will be prefixed with AppSlug
+     * @maxLength 100
+     * @minLength 1
+     */
+    type?: string;
+    /**
+     * The public description of the component do display
+     * @maxLength 300
+     * @minLength 3
+     */
+    description?: string;
+    /** List of component resources. This comprises any runtime code we need to load and execute for the component. */
+    resources?: Resources;
+    /** The configuration describing the component abilities and behaviors on the Editor stage */
+    editorElement?: EditorElement_2;
+    /** The installation settings of the component */
+    installation?: InstallationInfo;
+    /** Module configuration for NPM-based component */
+    moduleConfiguration?: EditorReactComponentModuleConfiguration;
+}
+
+declare interface EditorReactComponentModuleConfiguration {
+    /** Public NPM package details */
+    package?: NPMPackage;
+    /** The component export details */
+    component?: NPMPackageEntry;
+    /** The component CSS File location */
+    cssFile?: NPMPackageEntry;
+    /** The component SSR version export details */
+    server?: NPMPackageEntry;
+}
+
 declare enum EffectGroup {
     UNKNOWN_EFFECT_GROUP = "UNKNOWN_EFFECT_GROUP",
     /** Effects that are applied to the background layer of the component */
@@ -2211,6 +2330,14 @@ declare enum FilterFunction {
     hueRotate = "hueRotate"
 }
 
+/** Fixed position builder for component installation */
+declare interface FixedPositionBuilder {
+    /** Vertical position in the browser window */
+    vertical?: Vertical;
+    /** Horizontal position in the browser window */
+    horizontal?: Horizontal;
+}
+
 export declare interface Font {
     /**
      * Stores the font-style property of the font shorthand
@@ -2443,6 +2570,13 @@ declare interface HelpArticleArticleTypeOneOf {
     url?: string | null;
 }
 
+declare enum Horizontal {
+    NONE = "NONE",
+    LEFT = "LEFT",
+    CENTER = "CENTER",
+    RIGHT = "RIGHT"
+}
+
 export declare interface Image {
     /** media manager categories to open media manager filtered by the component needs */
     category?: ImageCategoryTypes;
@@ -2539,6 +2673,23 @@ export declare interface InlineElement {
     helpArticle?: HelpArticle;
 }
 
+declare interface InstallationInfo extends InstallationInfoTargetContainerOneOf {
+    /** Which static container should the component be installed at */
+    staticContainer?: StaticContainer;
+    /** Default presets per breakpoint with which the component should be installed */
+    presets?: DefaultPresets;
+    /** Initial size with which the component should be added to the stage */
+    initialSize?: ComponentInitialSize;
+    /** Fixed position options for the component. If set, the component will be pinned to the specified position, and can't be unpinned */
+    fixedPosition?: FixedPositionBuilder;
+}
+
+/** @oneof */
+declare interface InstallationInfoTargetContainerOneOf {
+    /** Which static container should the component be installed at */
+    staticContainer?: StaticContainer;
+}
+
 export declare const INTERACTIONS: {
     TRIGGER_TYPE: typeof InteractionsTrigger;
     EFFECT_GROUP: typeof EffectGroup;
@@ -2685,6 +2836,34 @@ export declare enum NATIVE_STATE_TYPE {
     invalid = "invalid"
 }
 
+declare interface NPMPackage {
+    /**
+     * The npm package name
+     * @minLength 1
+     * @maxLength 214
+     */
+    name?: string;
+    /**
+     * the SEMVER package version
+     * @minLength 1
+     * @maxLength 214
+     */
+    version?: string;
+}
+
+declare interface NPMPackageEntry {
+    /**
+     * optional path to file in package
+     * @maxLength 200
+     */
+    path?: string | null;
+    /**
+     * The named export key to import. If empty, the default export is used.
+     * @maxLength 200
+     */
+    exportKey?: string | null;
+}
+
 export declare enum OverrideType {
     UNKNOWN = "UNKNOWN",
     DEV = "DEV",
@@ -3036,6 +3215,38 @@ declare enum ResizeDirection {
     none = "none"
 }
 
+declare interface Resource {
+    /**
+     * A URL to an ESM javascript bundle
+     * @format WEB_URL
+     */
+    url?: string;
+}
+
+declare interface Resources {
+    /** The bundle we will load and render in the browser in the site */
+    client?: ClientResources;
+    /**
+     * An optional client definition of the component we will load and render in the editor, *it replaces the client bundle.*
+     * The  main use case is to control the live site component and enable different experiences in the editor.
+     * For example, supporting \`states\` manipulation:
+     * Show calendar in the editor
+     * Open drop down in the editor
+     */
+    editor?: ClientResources;
+    /** The bundle for SSR, should not include any DOM API references */
+    server?: Resource;
+    /** The optional component SDK to expose to Velo Users to interact with the component */
+    sdk?: Resource;
+    /** Details for how to load translations for the component */
+    translations?: TranslationResources;
+    /** The optional interactions configuration JSON file */
+    interactions?: Resource;
+    /* Excluded from this release type: viewerReducedModel */
+    /* Excluded from this release type: schemaRefsUrl */
+    /* Excluded from this release type: viewerRuntimeCss */
+}
+
 /** rich text data type allow manipulation of text with html & inline styles */
 declare interface RichText {
     /**
@@ -3173,6 +3384,14 @@ declare enum SizingType {
 
 export declare type States = NonNullable<EditorElement_2['states']>;
 
+declare enum StaticContainer {
+    UNKNOWN_CONTAINER = "UNKNOWN_CONTAINER",
+    /** Widget should be installed in the homepage */
+    HOMEPAGE = "HOMEPAGE",
+    /** Show widget on all pages */
+    GLOBAL_PAGE = "GLOBAL_PAGE"
+}
+
 /** DEPRECATED - use CssPropertyAction or CssCustomPropertyAction */
 declare interface StyleAction {
     /**
@@ -3600,6 +3819,20 @@ export declare interface TextGroup {
     a11y?: string | null;
 }
 
+declare interface TranslationResources {
+    /**
+     * The URL that we will add the language to for fetching translations, example: \`https://somecdn.com/translations/\`
+     * @format WEB_URL
+     */
+    basePath?: string;
+    /**
+     * The list of supported languages according to the [ISO-639-1 specification](https://en.wikipedia.org/wiki/ISO_639-1)
+     * @format LANGUAGE
+     * @maxSize 37
+     */
+    languages?: string[];
+}
+
 export declare interface VectorArt {
     /** media manager categories to open media manager filtered by the component needs */
     category?: VectorArtCategoryTypes;
@@ -3633,6 +3866,13 @@ declare interface VectorArtOverrides {
     category?: VectorArtCategoryTypes;
 }
 
+declare enum Vertical {
+    NONE = "NONE",
+    TOP = "TOP",
+    CENTER = "CENTER",
+    BOTTOM = "BOTTOM"
+}
+
 export declare interface Video {
     /** media manager categories to open media manager filtered by the component needs */
     category?: VideoCategoryTypes;
@@ -4232,6 +4472,13 @@ var MEDIA = {
   VECTOR_ART_CATEGORY: VectorArtCategoryTypes,
   IMAGE_CATEGORY: ImageCategoryTypes
 };
+const DOM_EVENT = {
+  POINTER: "POINTER",
+  CHANGE: "CHANGE",
+  FOCUS: "FOCUS",
+  SUBMIT: "SUBMIT",
+  KEYBOARD: "KEYBOARD"
+};
 export {
   ACTIONS,
   ActionName as ACTION_NAME,
@@ -4240,6 +4487,7 @@ export {
   CSS_PROPERTIES,
   DATA,
   DISPLAY_GROUPS,
+  DOM_EVENT,
   ELEMENTS,
   INTERACTIONS,
   LAYOUT,

package/src/index.ts

@@ -14,6 +14,18 @@ export {
   OverrideType,
 } from '@wix/component-protocol/schema'
 
+// TODO: replace with re-export from @wix/component-protocol/schema once
+// https://github.com/wix-private/component-protocol exports DomEventType.
+export const DOM_EVENT = {
+  POINTER: 'POINTER',
+  CHANGE: 'CHANGE',
+  FOCUS: 'FOCUS',
+  SUBMIT: 'SUBMIT',
+  KEYBOARD: 'KEYBOARD',
+} as const
+
+export type DomEvent = (typeof DOM_EVENT)[keyof typeof DOM_EVENT]
+
 export type {
   Behaviors,
   StyleItem,
@@ -28,6 +40,7 @@ export type {
   DataItem,
   DataItemsMap,
   Presets,
+  EditorReactComponent,
   Elements,
   ElementsDefaults,
   ElementItem,

package/vite.config.ts

@@ -46,6 +46,7 @@ function wrapEditorReactTypesDeclarationPlugin(): Plugin {
   return {
     name: 'wrap-editor-react-types-declaration',
     generateBundle(_options, bundle) {
+      // biome-ignore lint: ignore prohibition of delete
       delete bundle['editor-react-types.js']
     },
     closeBundle() {