Core schema types for defining low-code applications, components, and data structures. These schemas form the foundation of the low-code protocol.
Defines a single component tree node in the low-code protocol.
/**
* Single component tree node description following the low-code protocol
*/
interface IPublicTypeNodeSchema {
/** Optional unique identifier for the node */
id?: string;
/** Component name (required, capitalized) */
componentName: string;
/** Component properties including children */
props?: {
children?: IPublicTypeNodeData | IPublicTypeNodeData[];
} & IPublicTypePropsMap;
/** Conditional rendering expression */
condition?: IPublicTypeCompositeValue;
/** Loop data expression */
loop?: IPublicTypeCompositeValue;
/** Loop iteration arguments [item, index] */
loopArgs?: [string, string];
/** Child nodes */
children?: IPublicTypeNodeData | IPublicTypeNodeData[];
/** Whether the node is locked from editing */
isLocked?: boolean;
/** Future support properties */
conditionGroup?: string;
title?: string;
ignore?: boolean;
locked?: boolean;
hidden?: boolean;
isTopFixed?: boolean;
/** Internal editor context (experimental) */
__ctx?: any;
}Usage Examples:
import { IPublicTypeNodeSchema } from "@alilc/lowcode-types";
// Simple button component
const buttonSchema: IPublicTypeNodeSchema = {
componentName: "Button",
props: {
type: "primary",
children: "Click me"
}
};
// Component with conditional rendering
const conditionalSchema: IPublicTypeNodeSchema = {
componentName: "Alert",
props: {
type: "warning",
message: "Warning message"
},
condition: {
type: "JSExpression",
value: "this.state.showAlert"
}
};
// Component with loop rendering
const listSchema: IPublicTypeNodeSchema = {
componentName: "List",
loop: {
type: "JSExpression",
value: "this.state.items"
},
loopArgs: ["item", "index"],
children: {
componentName: "ListItem",
props: {
key: {
type: "JSExpression",
value: "item.id"
},
children: {
type: "JSExpression",
value: "item.name"
}
}
}
};Describes the entire low-code application or project structure.
/**
* Application/project description schema
*/
interface IPublicTypeProjectSchema {
/** Protocol version */
version: string;
/** Component library mapping */
componentsMap: IPublicTypeComponentsMap;
/** Root component tree descriptions */
componentsTree: IPublicTypeNodeSchema[];
/** Internationalization data */
i18n?: IPublicTypeI18nMap;
/** Global utility functions */
utils?: IPublicTypeUtilsMap;
/** Global constants */
constants?: Record<string, any>;
/** Global CSS styles */
css?: string;
/** Data source configurations */
dataSource?: any;
/** Application configuration */
config?: IPublicTypeAppConfig;
}
interface IPublicTypeComponentsMap {
[componentName: string]: IPublicTypeNpmInfo;
}
interface IPublicTypeI18nMap {
[locale: string]: Record<string, string>;
}
interface IPublicTypeUtilsMap {
[utilName: string]: {
type: 'npm' | 'function';
content: IPublicTypeNpmInfo | string;
};
}Usage Examples:
import { IPublicTypeProjectSchema, IPublicTypeComponentsMap } from "@alilc/lowcode-types";
// Component library mapping
const componentsMap: IPublicTypeComponentsMap = {
"Button": {
package: "antd",
version: "4.0.0",
componentName: "Button"
},
"Input": {
package: "antd",
version: "4.0.0",
componentName: "Input"
}
};
// Complete project schema
const projectSchema: IPublicTypeProjectSchema = {
version: "1.0.0",
componentsMap,
componentsTree: [
{
componentName: "Page",
children: [
{
componentName: "Button",
props: {
type: "primary",
children: "Submit"
}
}
]
}
],
i18n: {
"zh-CN": {
"submit": "提交",
"cancel": "取消"
},
"en-US": {
"submit": "Submit",
"cancel": "Cancel"
}
},
constants: {
API_BASE_URL: "https://api.example.com"
},
css: ".custom-button { border-radius: 4px; }"
};Specialized schema for container components that can hold child components.
/**
* Container component schema
*/
interface IPublicTypeContainerSchema extends IPublicTypeNodeSchema {
/** Container-specific properties */
isContainer: true;
/** Allowed child component types */
allowedComponentTypes?: string[];
/** Container layout configuration */
layout?: {
type: 'flex' | 'grid' | 'absolute';
props?: Record<string, any>;
};
}Schema for defining individual pages within a low-code application.
/**
* Page schema definition
*/
interface IPublicTypePageSchema {
/** Page identifier */
id: string;
/** Page name */
name: string;
/** Page title */
title?: string;
/** Page path/route */
path?: string;
/** Page component tree */
schema: IPublicTypeNodeSchema;
/** Page-specific CSS */
css?: string;
/** Page-specific JavaScript */
javascript?: string;
/** Page configuration */
config?: Record<string, any>;
}Schema for reusable component blocks.
/**
* Reusable component block schema
*/
interface IPublicTypeBlockSchema {
/** Block identifier */
id: string;
/** Block name */
name: string;
/** Block description */
description?: string;
/** Block category */
category?: string;
/** Block schema */
schema: IPublicTypeNodeSchema;
/** Block thumbnail */
thumbnail?: string;
/** Block tags */
tags?: string[];
}Root-level schema that can contain multiple pages or components.
/**
* Root application schema
*/
interface IPublicTypeRootSchema {
/** Application metadata */
meta: {
name: string;
version: string;
description?: string;
};
/** Application pages */
pages?: IPublicTypePageSchema[];
/** Global components map */
componentsMap: IPublicTypeComponentsMap;
/** Global configuration */
config?: IPublicTypeAppConfig;
/** Global assets */
assets?: any;
}Schema validation is handled by the low-code engine runtime. The types package provides the schema interfaces but validation logic is implemented in the engine core.
These schema types provide the complete foundation for building low-code applications with full type safety and protocol compliance.