CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@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';
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@alilc/lowcode-types@1.3.x
Publish Source
CLI
Badge
tessl/npm-alilc--lowcode-types badge