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
Overview
Eval results
Files

assets.mddocs/

Asset Management

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

Capabilities

Asset Levels

Defines the hierarchy of asset dependencies with clear priority ordering.

/**
 * Asset dependency hierarchy levels
 */
enum AssetLevel {
  /** Environment dependencies (React, React DOM) */
  Environment = 1,
  /** Base libraries (lodash, antd, etc.) */
  Library = 2,
  /** Theme assets */
  Theme = 3,
  /** Runtime assets */
  Runtime = 4,
  /** Business components */
  Components = 5,
  /** Applications & pages */
  App = 6
}

/**
 * Array of all asset levels in order
 */
const AssetLevels: AssetLevel[] = [
  AssetLevel.Environment,
  AssetLevel.Library,
  AssetLevel.Theme,
  AssetLevel.Runtime,
  AssetLevel.Components,
  AssetLevel.App
];

Asset Types

Enumeration of supported asset types for different resource formats.

/**
 * Asset type enumeration
 */
enum AssetType {
  /** JavaScript URL reference */
  JSUrl = 'jsUrl',
  /** CSS URL reference */
  CSSUrl = 'cssUrl',
  /** Inline CSS text */
  CSSText = 'cssText',
  /** Inline JavaScript text */
  JSText = 'jsText',
  /** Asset bundle */
  Bundle = 'bundle'
}

Asset Structures

Core interfaces for defining individual assets and asset collections.

/**
 * Individual asset item definition
 */
interface AssetItem {
  /** Asset type */
  type: AssetType;
  /** Asset content (for inline types) */
  content?: string | null;
  /** Target device */
  device?: string;
  /** Asset dependency level */
  level?: AssetLevel;
  /** Asset identifier */
  id?: string;
  /** Script type attribute */
  scriptType?: string;
}

/**
 * Asset bundle containing multiple assets
 */
interface AssetBundle {
  /** Bundle type */
  type: AssetType.Bundle;
  /** Bundle dependency level */
  level?: AssetLevel;
  /** Bundled assets */
  assets?: Asset | AssetList | null;
}

/**
 * URL string asset reference
 */
type URL = string;

/**
 * Collection of assets
 */
type AssetList = Array<Asset | undefined | null>;

/**
 * Union type for all asset formats
 */
type Asset = AssetList | AssetBundle | AssetItem | URL;

Usage Examples:

import { AssetItem, AssetBundle, AssetLevel, AssetType } from "@alilc/lowcode-types";

// JavaScript library asset
const reactAsset: AssetItem = {
  type: AssetType.JSUrl,
  content: "https://unpkg.com/react@17/umd/react.production.min.js",
  level: AssetLevel.Environment,
  id: "react"
};

// CSS theme asset
const themeAsset: AssetItem = {
  type: AssetType.CSSUrl, 
  content: "https://unpkg.com/antd@4/dist/antd.min.css",
  level: AssetLevel.Theme,
  id: "antd-theme"
};

// Inline CSS asset
const customStyles: AssetItem = {
  type: AssetType.CSSText,
  content: `.custom-button { border-radius: 8px; }`,
  level: AssetLevel.App
};

// Asset bundle
const componentBundle: AssetBundle = {
  type: AssetType.Bundle,
  level: AssetLevel.Components,
  assets: [
    "https://unpkg.com/my-components@1.0.0/dist/index.js",
    "https://unpkg.com/my-components@1.0.0/dist/index.css"
  ]
};

// Asset collection
const allAssets: AssetList = [
  reactAsset,
  themeAsset,
  customStyles,
  componentBundle,
  "https://unpkg.com/lodash@4/lodash.min.js" // Simple URL
];

Install with Tessl CLI

npx tessl i tessl/npm-alilc--lowcode-types

docs

activity-events.md

assets.md

code-generation.md

component-metadata.md

drag-drop.md

editor-config.md

index.md

models.md

plugins.md

schemas.md

shell-api.md

shell-enums.md

value-types.md

tile.json