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

shell-api.mddocs/

Shell API

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

Capabilities

Common API

Core API utilities and cabin interfaces for common operations.

/**
 * Common API utilities and cabin interfaces
 */
interface IPublicApiCommon {
  /** Common utility functions */
  utils: IPublicApiCommonUtils;
  /** Skeleton framework cabin */
  skeletonCabin: IPublicApiCommonSkeletonCabin;
  /** Editor components cabin (experimental) */
  editorCabin: IPublicApiCommonEditorCabin;
}

/**
 * Common utility functions
 */
interface IPublicApiCommonUtils {
  /** Validate if data is a NodeSchema */
  isNodeSchema(data: any): boolean;
  /** Check if event is a form event */
  isFormEvent(e: KeyboardEvent | MouseEvent): boolean;
  /** Find node by ID in schema tree */
  getNodeSchemaById(schema: IPublicTypeNodeSchema, nodeId: string): IPublicTypeNodeSchema | null;
  /** Execute function in transaction context */
  executeTransaction(fn: () => void, type: IPublicEnumTransitionType): void;
  /** Create internationalization instance */
  createIntl(instance: string | object): any;
  /** Transform i18n data to string */
  intl(data: IPublicTypeI18nData | string, params?: object): string;
}

Usage Examples:

import { IPublicApiCommon } from "@alilc/lowcode-types";

// Using common utilities
const commonApi: IPublicApiCommon = getCommonApi();

// Validate schema
const isValid = commonApi.utils.isNodeSchema({
  componentName: "Button",
  props: { type: "primary" }
});

// Find node in schema tree
const node = commonApi.utils.getNodeSchemaById(rootSchema, "button-1");

// Execute in transaction
commonApi.utils.executeTransaction(() => {
  // Batch operations here
  node.setProp("disabled", true);
}, IPublicEnumTransitionType.REPAINT);

// i18n transformation
const text = commonApi.utils.intl("welcome.message", { name: "User" });

Project API

API for project management and operations.

/**
 * Project management API
 */
interface IPublicApiProject {
  /** Get current project schema */
  getSchema(): IPublicTypeProjectSchema;
  /** Set project schema */
  setSchema(schema: IPublicTypeProjectSchema): void;
  /** Get project configuration */
  getConfig(): any;
  /** Set project configuration */
  setConfig(config: any): void;
  /** Open project */
  open(schema: IPublicTypeProjectSchema): void;
  /** Save project */
  save(): Promise<void>;
  /** Export project */
  export(options?: ExportOptions): Promise<any>;
  /** Import project */
  import(data: any): Promise<void>;
}

interface ExportOptions {
  /** Export format */
  format?: 'json' | 'zip';
  /** Include assets */
  includeAssets?: boolean;
  /** Include dependencies */
  includeDependencies?: boolean;
}

Material API

API for managing component materials and metadata.

/**
 * Material management API
 */
interface IPublicApiMaterial {
  /** Get component metadata */
  getComponentMeta(componentName: string): IPublicModelComponentMeta | null;
  /** Set component metadata */
  setComponentMeta(componentName: string, meta: IPublicTypeComponentMetadata): void;
  /** Load material assets */
  loadAssets(assets: any[]): Promise<void>;
  /** Get material list */
  getMaterials(): IPublicTypeComponentMetadata[];
  /** Add material */
  addMaterial(material: IPublicTypeComponentMetadata): void;
  /** Remove material */
  removeMaterial(componentName: string): void;
}

Setter API

API for managing property setters in the editor.

/**
 * Property setter management API
 */
interface IPublicApiSetters {
  /** Register a setter */
  register(setterConfig: IPublicTypeSetterConfig): void;
  /** Get registered setter */
  getSetter(type: string): IPublicTypeRegisteredSetter | null;
  /** Get all setters */
  getSetters(): IPublicTypeRegisteredSetter[];
  /** Unregister setter */
  unregister(type: string): void;
}

interface IPublicTypeRegisteredSetter {
  /** Setter type */
  type: string;
  /** Setter component */
  component: any;
  /** Setter configuration */
  config: IPublicTypeSetterConfig;
}

Skeleton API

API for managing the editor skeleton and UI areas.

/**
 * Editor skeleton management API
 */
interface IPublicApiSkeleton {
  /** Add skeleton item */
  add(config: IPublicTypeSkeletonItemConfig): IPublicModelSkeletonItem;
  /** Remove skeleton item */
  remove(area: string, name: string): boolean;
  /** Get skeleton item */
  get(area: string, name: string): IPublicModelSkeletonItem | null;
  /** Show skeleton item */
  show(area: string, name: string): void;
  /** Hide skeleton item */
  hide(area: string, name: string): void;
  /** Toggle skeleton item visibility */
  toggle(area: string, name: string): void;
}

interface IPublicTypeSkeletonItemConfig {
  /** Skeleton area */
  area: string;
  /** Item name */
  name: string;
  /** Item content */
  content: any;
  /** Item configuration */
  config?: Record<string, any>;
}

Plugin API

API for plugin registration and management.

/**
 * Plugin management API
 */
interface IPublicApiPlugins {
  /** Register plugin */
  register(plugin: IPublicTypePlugin, options?: any): void;
  /** Get plugin */
  get(name: string): IPublicModelPluginInstance | null;
  /** Get all plugins */
  getAll(): IPublicModelPluginInstance[];
  /** Unregister plugin */
  unregister(name: string): void;
  /** Enable plugin */
  enable(name: string): void;
  /** Disable plugin */
  disable(name: string): void;
}

Event API

API for event management and communication.

/**
 * Event management API
 */
interface IPublicApiEvent {
  /** Emit event */
  emit(eventName: string, ...args: any[]): void;
  /** Listen to event */
  on(eventName: string, listener: (...args: any[]) => void): () => void;
  /** Listen to event once */
  once(eventName: string, listener: (...args: any[]) => void): () => void;
  /** Remove event listener */
  off(eventName: string, listener: (...args: any[]) => void): void;
  /** Remove all listeners for event */
  removeAllListeners(eventName?: string): void;
}

Hotkey API

API for hotkey management.

/**
 * Hotkey management API
 */
interface IPublicApiHotkey {
  /** Bind hotkey */
  bind(key: string, callback: IPublicTypeHotkeyCallback): void;
  /** Unbind hotkey */
  unbind(key: string): void;
  /** Get hotkey callbacks */
  getCallbacks(): IPublicTypeHotkeyCallbacks;
}

interface IPublicTypeHotkeyCallback {
  /** Callback function */
  callback: (event: KeyboardEvent) => void;
  /** Callback description */
  description?: string;
}

interface IPublicTypeHotkeyCallbacks {
  [key: string]: IPublicTypeHotkeyCallback;
}

Logger API

API for logging and debugging.

/**
 * Logger API for debugging and monitoring
 */
interface IPublicApiLogger {
  /** Log debug message */
  debug(message: string, ...args: any[]): void;
  /** Log info message */
  info(message: string, ...args: any[]): void;
  /** Log warning message */
  warn(message: string, ...args: any[]): void; 
  /** Log error message */
  error(message: string, ...args: any[]): void;
  /** Set log level */
  setLevel(level: 'debug' | 'info' | 'warn' | 'error'): void;
}

Canvas API

API for managing the design canvas.

/**
 * Design canvas management API
 */
interface IPublicApiCanvas {
  /** Get canvas element */
  getElement(): HTMLElement | null;
  /** Set canvas size */
  setSize(width: number, height: number): void;
  /** Get canvas size */
  getSize(): { width: number; height: number };
  /** Set canvas zoom */
  setZoom(zoom: number): void;
  /** Get canvas zoom */
  getZoom(): number;
  /** Scroll to position */
  scrollTo(x: number, y: number): void;
  /** Center canvas */
  center(): void;
}

Workspace API

API for workspace management.

/**
 * Workspace management API
 */
interface IPublicApiWorkspace {
  /** Get current window */
  getWindow(): IPublicModelWindow;
  /** Create new window */
  createWindow(options?: WindowOptions): IPublicModelWindow;
  /** Switch to window */
  switchTo(window: IPublicModelWindow): void;
  /** Close window */
  closeWindow(window: IPublicModelWindow): void;
}

interface WindowOptions {
  /** Window title */
  title?: string;
  /** Window icon */
  icon?: string;
  /** Window configuration */
  config?: Record<string, any>;
}

Common UI API

API for common UI components and interactions.

/**
 * Common UI components API
 */
interface IPublicApiCommonUI {
  /** Show notification */
  notify(message: string, type?: 'success' | 'error' | 'warning' | 'info'): void;
  /** Show modal dialog */
  showModal(config: ModalConfig): Promise<any>;
  /** Show confirm dialog */  
  confirm(message: string, title?: string): Promise<boolean>;
  /** Show loading indicator */
  showLoading(message?: string): () => void;
}

interface ModalConfig {
  /** Modal title */
  title?: string;
  /** Modal content */
  content: any;
  /** Modal width */
  width?: number;
  /** Modal height */
  height?: number;
  /** Whether modal is closable */
  closable?: boolean;
}

Command API

API for command registration and execution.

/**
 * Command system API
 */
interface IPublicApiCommand {
  /** Register command */
  register(command: IPublicTypeCommand): void;
  /** Execute command */
  execute(name: string, ...args: any[]): any;
  /** Unregister command */
  unregister(name: string): void;
  /** List all commands */
  list(): IPublicTypeCommand[];
}

interface IPublicTypeCommand {
  /** Command name */
  name: string;
  /** Command handler */
  handler: (...args: any[]) => any;
  /** Command description */
  description?: string;
  /** Command shortcuts */
  shortcuts?: string[];
}

Simulator Host API

API for simulator host management and control.

/**
 * Simulator host API for managing simulator behavior
 * @experimental Some methods are unstable API, use with caution
 */
interface IPublicApiSimulatorHost {
  /** Get content window */
  readonly contentWindow: Window | undefined;
  
  /** Get content document */
  readonly contentDocument: Document | undefined;
  
  /** Get simulator renderer */
  readonly renderer: IPublicModelSimulatorRender | undefined;
  
  /** Set simulator configuration variable */
  set(key: string, value: any): void;
  
  /** Get simulator configuration variable */
  get(key: string): any;
  
  /** Scroll to specific node in simulator */
  scrollToNode(node: IPublicModelNode): void;
  
  /** Refresh the simulator render */
  rerender(): void;
}

Usage Examples:

import { IPublicApiSimulatorHost } from "@alilc/lowcode-types";

// Access through editor context
function useSimulatorHost(simulatorHost: IPublicApiSimulatorHost) {
  // Set simulator configuration
  simulatorHost.set('locale', 'zh-CN');
  simulatorHost.set('device', 'mobile');
  
  // Get configuration
  const locale = simulatorHost.get('locale');
  
  // Scroll to specific node
  const targetNode = getCurrentNode();
  if (targetNode) {
    simulatorHost.scrollToNode(targetNode);
  }
  
  // Refresh simulator
  simulatorHost.rerender();
  
  // Access simulator window (experimental)
  const simWindow = simulatorHost.contentWindow;
  if (simWindow) {
    console.log('Simulator window available');
  }
}

These Shell APIs provide comprehensive interfaces for interacting with all aspects of the low-code engine.