Type-safe configuration system for the low-code editor including plugins, themes, lifecycle hooks, and UI components.
Main configuration interface for setting up the low-code editor.
/**
* Main editor configuration interface
*/
interface EditorConfig {
/** Skeleton framework configuration */
skeleton?: SkeletonConfig;
/** Theme configuration */
theme?: ThemeConfig;
/** Plugin configurations */
plugins?: PluginsConfig;
/** Editor hooks */
hooks?: HooksConfig;
/** Keyboard shortcuts */
shortCuts?: ShortCutsConfig;
/** Utility functions */
utils?: UtilsConfig;
/** Global constants */
constants?: ConstantsConfig;
/** Lifecycle hooks */
lifeCycles?: LifeCyclesConfig;
/** Internationalization settings */
i18n?: I18nConfig;
}Usage Examples:
import { EditorConfig } from "@alilc/lowcode-types";
const editorConfig: EditorConfig = {
skeleton: {
config: {
package: "@alilc/lowcode-skeleton",
version: "1.0.0"
}
},
plugins: {
"toolbar": [
{
pluginKey: "logo",
type: "skeleton",
props: {
align: "left",
icon: "logo",
title: "Logo"
}
}
]
},
theme: {
fusion: {
package: "@alifd/theme-lowcode",
version: "1.0.0"
}
}
};Configuration for the editor's skeleton framework.
/**
* Skeleton framework configuration
*/
interface SkeletonConfig {
/** NPM package configuration */
config: IPublicTypeNpmInfo;
/** Additional properties */
props?: Record<string, unknown>;
/** Configuration handler function */
handler?: (config: EditorConfig) => EditorConfig;
}Configuration system for editor plugins.
/**
* Plugin configuration collection
*/
interface PluginsConfig {
[area: string]: PluginConfig[];
}
/**
* Individual plugin configuration
*/
interface PluginConfig {
/** Unique plugin identifier */
pluginKey: string;
/** Plugin type */
type: string;
/** Plugin properties */
props: {
/** Plugin icon */
icon?: string;
/** Plugin title */
title?: string;
/** Plugin width */
width?: number;
/** Plugin height */
height?: number;
/** Whether plugin is visible */
visible?: boolean;
/** Whether plugin is disabled */
disabled?: boolean;
/** Whether plugin is marked/highlighted */
marked?: boolean;
/** Plugin alignment */
align?: 'left' | 'right' | 'top' | 'bottom';
/** Click handler */
onClick?: () => void;
/** Dialog properties */
dialogProps?: Record<string, unknown>;
/** Balloon properties */
balloonProps?: Record<string, unknown>;
/** Panel properties */
panelProps?: Record<string, unknown>;
/** Link properties */
linkProps?: Record<string, unknown>;
};
/** Plugin NPM configuration */
config?: IPublicTypeNpmInfo;
/** Additional plugin properties */
pluginProps?: Record<string, unknown>;
}Usage Examples:
import { PluginsConfig, PluginConfig } from "@alilc/lowcode-types";
const pluginsConfig: PluginsConfig = {
"toolbar": [
{
pluginKey: "save",
type: "skeleton",
props: {
align: "right",
icon: "save",
title: "Save",
onClick: () => console.log("Save clicked")
}
},
{
pluginKey: "preview",
type: "skeleton",
props: {
align: "right",
icon: "preview",
title: "Preview"
}
}
],
"leftPanel": [
{
pluginKey: "components",
type: "panel",
props: {
title: "Components",
width: 280
}
}
]
};Theme system configuration for the editor.
/**
* Theme configuration
*/
interface ThemeConfig {
/** Fusion theme configuration */
fusion?: FusionTheme;
}
/**
* Fusion theme specification
*/
interface FusionTheme {
/** Theme package name */
package: string;
/** Theme version */
version: string;
}Editor lifecycle hooks configuration.
/**
* Editor hooks configuration
*/
type HooksConfig = HookConfig[];
/**
* Individual hook configuration
*/
interface HookConfig {
/** Event message to listen for */
message: string;
/** Hook type - 'on' for repeating, 'once' for one-time */
type: 'on' | 'once';
/** Hook handler function */
handler: (this: IPublicModelEditor, editor: IPublicModelEditor, ...args: any[]) => void;
}Usage Examples:
import { HooksConfig } from "@alilc/lowcode-types";
const hooksConfig: HooksConfig = [
{
message: "skeleton.add",
type: "on",
handler: function(editor, ...args) {
console.log("Skeleton item added:", args);
}
},
{
message: "project.open",
type: "once",
handler: function(editor, project) {
console.log("Project opened:", project);
}
}
];Keyboard shortcut configuration for the editor.
/**
* Keyboard shortcuts configuration
*/
type ShortCutsConfig = ShortCutConfig[];
/**
* Individual shortcut configuration
*/
interface ShortCutConfig {
/** Keyboard combination (e.g. 'cmd+s', 'ctrl+z') */
keyboard: string;
/** Shortcut handler function */
handler: (editor: IPublicModelEditor, ev: Event, keymaster: any) => void;
}Utility functions configuration for the editor.
/**
* Utility functions configuration
*/
type UtilsConfig = UtilConfig[];
/**
* Individual utility configuration
*/
interface UtilConfig {
/** Utility name */
name: string;
/** Utility type */
type: 'npm' | 'function';
/** Utility content - NPM info or function */
content: IPublicTypeNpmInfo | ((...args: []) => any);
}Editor lifecycle configuration.
/**
* Editor lifecycle configuration
*/
interface LifeCyclesConfig {
/** Initialization hook */
init?: (editor: IPublicModelEditor) => any;
/** Destruction hook */
destroy?: (editor: IPublicModelEditor) => any;
}i18n configuration for the editor.
/**
* Internationalization configuration
*/
interface I18nConfig {
/** Chinese Simplified messages */
'zh-CN'?: I18nMessages;
/** Chinese Traditional messages */
'zh-TW'?: I18nMessages;
/** English messages */
'en-US'?: I18nMessages;
/** Japanese messages */
'ja-JP'?: I18nMessages;
}
/**
* i18n message mapping
*/
interface I18nMessages {
[key: string]: string;
}
/**
* Supported locale types
*/
type LocaleType = 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP';
/**
* i18n function type
*/
type I18nFunction = (key: string, params: any) => string;Runtime types for plugin system.
/**
* Plugin component props
*/
interface PluginProps {
/** Editor instance */
editor?: IPublicModelEditor;
/** Plugin configuration */
config: PluginConfig;
/** Additional properties */
[key: string]: any;
}
/**
* Plugin component with lifecycle methods
*/
type Plugin = ReactNode & {
/** Open method */
open?: () => boolean | undefined | Promise<any>;
/** Close method */
close?: () => boolean | undefined | Promise<any>;
};
/**
* Higher-order component plugin
*/
type HOCPlugin = ReactNode & {
/** Async open method */
open: () => Promise<any>;
/** Async close method */
close: () => Promise<any>;
};
/**
* Plugin class component
*/
type PluginClass = ComponentType<PluginProps> & {
/** Initialization method */
init?: (editor: IPublicModelEditor) => void;
/** Default props */
defaultProps?: {
locale?: LocaleType;
messages?: I18nMessages;
};
};
/**
* Plugin status tracking
*/
interface PluginStatus {
/** Whether plugin is disabled */
disabled?: boolean;
/** Whether plugin is visible */
visible?: boolean;
/** Whether plugin is marked/highlighted */
marked?: boolean;
/** Whether plugin is locked */
locked?: boolean;
}This configuration system provides complete type safety for setting up and customizing the low-code editor environment.