or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

activity-events.mdassets.mdcode-generation.mdcomponent-metadata.mddrag-drop.mdeditor-config.mdindex.mdmodels.mdplugins.mdschemas.mdshell-api.mdshell-enums.mdvalue-types.md
tile.json

tessl/npm-alilc--lowcode-types

Comprehensive TypeScript type definitions for the Alibaba LowCode Engine ecosystem, providing type safety for building low-code development tools and applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@alilc/lowcode-types@1.3.x

To install, run

npx @tessl/cli install tessl/npm-alilc--lowcode-types@1.3.0

index.mddocs/

@alilc/lowcode-types

@alilc/lowcode-types is a comprehensive TypeScript type definitions library for the Alibaba LowCode Engine ecosystem. It provides complete type safety for building low-code development tools, plugins, and applications, serving as the foundational type system for the entire low-code platform.

Package Information

  • Package Name: @alilc/lowcode-types
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @alilc/lowcode-types

Core Imports

import { 
  EditorConfig,
  IPublicTypeNodeSchema,
  IPublicTypeProjectSchema,
  IPublicModelEditor,
  IPublicApiCommon,
  ActivityType,
  AssetLevel
} from "@alilc/lowcode-types";

Note: This package also re-exports all types from @alilc/lowcode-datasource-types, providing data source configuration and connection interfaces.

For CommonJS:

const { 
  EditorConfig,
  IPublicTypeNodeSchema,
  IPublicModelEditor 
} = require("@alilc/lowcode-types");

Basic Usage

import { 
  EditorConfig, 
  IPublicTypeNodeSchema, 
  IPublicTypeProjectSchema,
  ActivityType,
  AssetLevel 
} from "@alilc/lowcode-types";

// Configure editor
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"
      }
    }]
  }
};

// Define component schema
const nodeSchema: IPublicTypeNodeSchema = {
  componentName: "Button",
  props: {
    type: "primary",
    children: "Click me"
  }
};

// Define project schema
const projectSchema: IPublicTypeProjectSchema = {
  version: "1.0.0",
  componentsMap: {
    "Button": {
      package: "antd",
      version: "4.0.0",
      componentName: "Button"
    }
  },
  componentsTree: [nodeSchema]
};

Architecture

@alilc/lowcode-types is organized around several key architectural components:

  • Schema System: Complete type definitions for low-code schemas (NodeSchema, ProjectSchema, ComponentSchema)
  • Editor Framework: Type-safe editor configuration, plugin system, and lifecycle management
  • Shell API: Comprehensive API interfaces for editor interaction and component management
  • Model System: Runtime model interfaces for nodes, documents, and editor state
  • Asset Management: Hierarchical asset type system for dependencies and resources
  • Event System: Type-safe event handling and communication patterns
  • Code Generation: Structured types for intermediate representations and output formats

Capabilities

Schema Definitions

Core schema types for defining low-code applications, components, and data structures. Essential for building schema-compliant low-code applications.

interface IPublicTypeNodeSchema {
  componentName: string;
  props?: IPublicTypePropsMap & { children?: IPublicTypeNodeData | IPublicTypeNodeData[] };
  condition?: IPublicTypeCompositeValue;
  loop?: IPublicTypeCompositeValue;
  loopArgs?: [string, string];
  children?: IPublicTypeNodeData | IPublicTypeNodeData[];
  isLocked?: boolean;
}

interface IPublicTypeProjectSchema {
  version: string;
  componentsMap: IPublicTypeComponentsMap;
  componentsTree: IPublicTypeNodeSchema[];
  i18n?: IPublicTypeI18nMap;
  utils?: IPublicTypeUtilsMap;
  constants?: Record<string, any>;
  css?: string;
  dataSource?: any;
  config?: IPublicTypeAppConfig;
}

Schema Definitions

Editor Configuration

Type-safe configuration system for the low-code editor including plugins, themes, lifecycle hooks, and UI components.

interface EditorConfig {
  skeleton?: SkeletonConfig;
  theme?: ThemeConfig;
  plugins?: PluginsConfig;
  hooks?: HooksConfig;
  shortCuts?: ShortCutsConfig;
  utils?: UtilsConfig;
  constants?: ConstantsConfig;
  lifeCycles?: LifeCyclesConfig;
  i18n?: I18nConfig;
}

interface PluginConfig {
  pluginKey: string;
  type: string;
  props: {
    icon?: string;
    title?: string;
    width?: number;
    height?: number;
    visible?: boolean;
    disabled?: boolean;
    align?: 'left' | 'right' | 'top' | 'bottom';
    onClick?: () => void;
  };
  config?: IPublicTypeNpmInfo;
  pluginProps?: Record<string, unknown>;
}

Editor Configuration

Shell API Interfaces

Comprehensive API interfaces for interacting with the low-code engine, including common utilities, project management, and material handling.

interface IPublicApiCommon {
  utils: IPublicApiCommonUtils;
  skeletonCabin: IPublicApiCommonSkeletonCabin;
  editorCabin: IPublicApiCommonEditorCabin;
}

interface IPublicApiCommonUtils {
  isNodeSchema(data: any): boolean;
  isFormEvent(e: KeyboardEvent | MouseEvent): boolean;
  getNodeSchemaById(schema: IPublicTypeNodeSchema, nodeId: string): IPublicTypeNodeSchema | null;
  executeTransaction(fn: () => void, type: IPublicEnumTransitionType): void;
  createIntl(instance: string | object): any;
  intl(data: IPublicTypeI18nData | string, params?: object): string;
}

Shell API

Model Interfaces

Runtime model interfaces for nodes, documents, editor state, and component management. These define the structure of live objects in the editor.

interface IPublicModelEditor {
  get(key: string): any;
  set(key: string, value: any): void;
  onGot(key: string, fn: (value: any) => void): () => void;
  onChange(fn: (key: string, value: any, oldValue: any) => void): () => void;
}

interface IPublicModelNode {
  id: string;
  title: string | IPublicTypeI18nData | ReactElement;
  isContainerNode: boolean;
  isRootNode: boolean;
  componentMeta: IPublicModelComponentMeta;
  props: IPublicModelProps;
  children: IPublicModelNodeChildren;
}

Model Interfaces

Component Metadata

Rich component description system for defining how components appear and behave in the editor, including property panels and design-time behavior.

interface IPublicTypeComponentMetadata {
  componentName: string;
  title?: IPublicTypeTitleContent;
  icon?: IPublicTypeIconType;
  tags?: string[];
  npm?: IPublicTypeNpmInfo;
  props?: IPublicTypePropConfig[];
  configure?: IPublicTypeFieldConfig[] | IPublicTypeConfigure;
  snippets?: IPublicTypeSnippet[];
}

interface IPublicTypeNpmInfo {
  package: string;
  componentName?: string;
  version?: string;
  destructuring?: boolean;
  exportName?: string;
  subName?: string;
  main?: string;
}

Component Metadata

Asset Management

Hierarchical asset type system for managing dependencies, themes, and resources with clear priority levels.

enum AssetLevel {
  Environment = 1,  // React, React DOM
  Library = 2,      // lodash, antd
  Theme = 3,        // Theme assets
  Runtime = 4,      // Runtime assets
  Components = 5,   // Business components
  App = 6          // Applications & pages
}

enum AssetType {
  JSUrl = 'jsUrl',
  CSSUrl = 'cssUrl',
  CSSText = 'cssText',
  JSText = 'jsText',
  Bundle = 'bundle'
}

interface AssetItem {
  type: AssetType;
  content?: string | null;
  device?: string;
  level?: AssetLevel;
  id?: string;
  scriptType?: string;
}

Asset Management

Value Types

Advanced value type system supporting JavaScript expressions, functions, and slots for dynamic content in low-code schemas.

interface IPublicTypeJSExpression {
  type: 'JSExpression';
  value: string;
  mock?: any;
  compiled?: string;
}

interface IPublicTypeJSFunction {
  type: 'JSFunction';
  value: string;
  compiled?: string;
  mock?: any;
}

interface IPublicTypeJSSlot {
  type: 'JSSlot';
  params?: string[];
  value?: IPublicTypeNodeData[] | IPublicTypeNodeData;
}

Value Types

Plugin System

Comprehensive plugin architecture with metadata, registration, and lifecycle management for extending editor functionality.

interface IPublicTypePluginMeta {
  dependencies?: string[];
  engines?: Record<string, string>;
  preferenceDeclaration?: IPublicTypePluginDeclaration;
  eventPrefix?: string;
  commandScope?: string;
}

interface IPublicTypePlugin {
  (ctx: IPublicModelPluginContext, options?: any): void;
  pluginName?: string;
  meta?: IPublicTypePluginMeta;
}

Plugin System

Activity & Events

Activity tracking and event system for monitoring changes and coordinating between components in the editor.

enum ActivityType {
  ADDED = 'added',
  DELETED = 'deleted',
  MODIFIED = 'modified',
  COMPOSITE = 'composite'
}

interface EventConfig {
  [eventName: string]: (...args: any[]) => any;
}

Activity & Events

Code Generation

Type definitions for code generation pipeline, including intermediate representations and final output structures.

interface PackageJSON {
  name: string;
  version: string;
  description?: string;
  dependencies: Record<string, string>;
  devDependencies: Record<string, string>;
  scripts?: Record<string, string>;
  engines?: Record<string, string>;
  repository?: {
    type: string;
    url: string;
  };
  private?: boolean;
}

interface ResultDir {
  name: string;
  dirs: ResultDir[];
  files: ResultFile[];
}

interface ResultFile {
  name: string;
  ext: string;
  content: string;
}

Code Generation

Shell Enums

Essential enumeration types for the low-code engine shell system, providing type-safe constants for various engine operations.

enum IPublicEnumContextMenuType {
  SEPARATOR = 'separator',
  MENU_ITEM = 'menuItem',
  NODE_TREE = 'nodeTree'
}

enum IPublicEnumDragObjectType {
  Node = 'node',
  NodeData = 'nodedata'
}

enum IPublicEnumPluginRegisterLevel {
  Default = 'default',
  Workspace = 'workspace',
  Resource = 'resource',
  EditorView = 'editorView'
}

Shell Enums

Drag and Drop System

Comprehensive drag and drop functionality for the low-code editor, providing type-safe interfaces for dragging components, nodes, and custom objects.

type IPublicTypeDragObject = 
  | IPublicTypeDragNodeObject 
  | IPublicTypeDragNodeDataObject 
  | IPublicTypeDragAnyObject;

interface IPublicModelDragon {
  readonly dragging: boolean;
  onDragstart(func: (e: IPublicModelLocateEvent) => any): IPublicTypeDisposable;
  onDragend(func: (o: { dragObject: IPublicModelDragObject; copy?: boolean }) => any): IPublicTypeDisposable;
  boost(dragObject: IPublicTypeDragObject, boostEvent: MouseEvent | DragEvent): void;
}

Drag and Drop System

Global Types

Common types used across multiple capabilities:

type IPublicTypeCompositeValue = 
  | IPublicTypeJSExpression 
  | IPublicTypeJSFunction 
  | IPublicTypeJSSlot 
  | string 
  | number 
  | boolean 
  | object 
  | any[];

type IPublicTypePropsMap = Record<string, IPublicTypeCompositeValue>;

type IPublicTypeNodeData = IPublicTypeNodeSchema | IPublicTypeDOMText | IPublicTypeJSSlot;

interface IPublicTypeDOMText {
  type: 'text';
  value: string;
}

interface IPublicTypeI18nData {
  type: 'i18n';
  key: string;
  params?: Record<string, any>;
}

type LocaleType = 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP';