Hierarchical asset type system for managing dependencies, themes, and resources with clear priority 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
];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'
}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
];