@mastergo/plugin-typings 2.5.0 → 2.7.0

package/dist/index.d.ts

@@ -1,3 +1,1003 @@
+import { Properties, PropertiesHyphen } from 'csstype';
+
+declare global {
+  namespace MGDSL {
+    interface MGDSLData {
+      /**
+       * 版本信息，遵循SemVer规则
+       */
+      readonly version: string;
+      /**
+       * 框架类型
+       */
+      framework: Framework;
+      readonly nodeMap: Record<NodeId, MGNode>;
+      readonly localStyleMap: StyleMap;
+      readonly fileMap: Record<FileId, MGDSLFile>;
+      root: MGLayerNode;
+      settings: DSLSettings;
+      entry: FileId;
+      /**
+       * 预览代码时所引入模块，需要将配置模型上的依赖模块引入
+       */
+      importPath: ImportPath;
+      importType: 'GLOBAL' | 'IMPORT';
+    }
+
+    type ImportPath = {
+      name: string;
+      path: string;
+      type: 'script' | 'style';
+      importRule?: 'ALL' | 'DEFAULT' | 'NAMED';
+    }[];
+
+    // js dsl模板
+    interface JSDSLData extends MGDSLData {
+      /**
+       * 全局样式表
+       */
+      globalStyleMap: {
+        [classId: string]: ClassStyle;
+      };
+    }
+    interface ReactDSLData extends JSDSLData {
+      readonly framework: 'REACT';
+    }
+    interface Vue3DSLData extends JSDSLData {
+      readonly framework: 'VUE3';
+    }
+    interface Vue2DSLData extends JSDSLData {
+      readonly framework: 'VUE2';
+    }
+    interface AndroidDSLData extends MGDSLData {
+      readonly framework: 'ANDROID';
+      /**
+       * 全局样式表
+       */
+      globalStyleMap: {
+        [classId: string]: ClassStyle;
+      };
+    }
+    interface IOSDSLData extends MGDSLData {
+      readonly framework: 'IOS';
+    }
+
+    type Framework = 'REACT' | 'VUE2' | 'VUE3' | 'ANDROID' | 'IOS';
+
+    type TokenName = string;
+    type TokenVariable = string;
+    type TokenValue = MGDSL.StyleSet[keyof MGDSL.StyleSet];
+    /**
+     * 自定义样式
+     */
+    type TokenItem = TokenCommonItem | TokenTextItem;
+    type TokenCommonItem = {
+      id: string;
+      type: 'color' | 'padding' | 'border-radius' | 'border-width' | 'gap';
+      name: TokenName;
+      originName: string;
+      originAlias: string;
+      value: TokenValue;
+      variable: TokenVariable;
+
+      /**
+       * 是否是多段
+       */
+      isMultiple?: boolean;
+    };
+    type TokenTextSubItemType = 'fontfamily' | 'fontstyle' | 'fontsize' | 'lineheight' | 'decoration' | 'letterspacing';
+
+    type TokenTextItem = {
+      id: string;
+      type: 'text';
+      name: TokenName;
+      originName: string;
+      originAlias: string;
+      textItems: Record<TokenTextSubItemType, TokenTextSubItem>;
+    };
+
+    type TokenTextSubItem = {
+      type: TokenTextSubItemType;
+      name: TokenName;
+      value: TokenValue;
+    };
+
+    /**
+     * TODO: 安卓自定义样式
+     */
+    type AndroidStyleItem = any;
+    /**
+     * 自定义样式map
+     */
+    type StyleMap = {
+      [styleId: string]: TokenItem | AndroidStyleItem;
+    };
+
+    /**
+     * 配置
+     */
+    interface DSLSettings {
+      /**
+       * 是否使用自定义样式，默认为true
+       */
+      useToken: boolean;
+    }
+
+    interface ClassStyle {
+      id: ClassId;
+      name: string;
+      scoped: boolean;
+      value: StyleSet;
+      // 伪类
+      pseudo?: 'HOVER' | 'ACTIVE' | 'FOCUS' | 'DISABLED';
+      /**
+       * css类型
+       *  */
+      type: 'group' | 'class' | 'pseudo' | 'id' | 'attribute' | 'combinators';
+    }
+
+    type NodeId = LayerId | OperationId;
+    type LayerId = string;
+    type OperationId = string;
+
+    type MGNode = MGLayerNode | MGOperationNode;
+
+    interface MGLayerNode {
+      type: 'LAYER';
+      id: LayerId;
+      children: NodeId[];
+      name: string;
+      /**
+       * 图层在代码中的组件名
+       */
+      componentName: string;
+      /**
+       * 图层实际类型名称 RECTANGLE TEXT FRAME...
+       */
+      layerType: NodeType;
+      // 是否是蒙版
+      isMask: boolean;
+      // 是否隐藏
+      isVisible: boolean;
+      layout: NodeLayout;
+      style: CssNodeStyle | IOSNodeStyle | AndroidNodeStyle;
+      /**
+       * 是否是根元素
+       */
+      isRoot: boolean;
+      parent?: NodeId;
+      /**
+       * 关联的文件
+       */
+      relatedFile: FileId;
+      /**
+       * 是否拆分成新文件,默认false
+       */
+      isNewFile?: boolean;
+      characters: string;
+    }
+
+    type DocumentationLink = {
+      url: string;
+    };
+
+    interface MGComponentNode extends MGLayerNode {
+      layerType: 'COMPONENT';
+      alias: string;
+      description: string;
+      documentationLinks: DocumentationLink[];
+      /**
+       * 是组件集子组件的话则存在
+       */
+      componentSetId?: string;
+      componentSetDescription?: string;
+      componentSetDocumentationLinks?: DocumentationLink[];
+    }
+
+    interface MGInstanceNode extends MGLayerNode {
+      layerType: 'INSTANCE';
+      /**
+       * 实例的主组件Layer, 这里不开通用模型就不解析
+       */
+      mainComponent?: LayerId;
+      description: string;
+      documentationLinks: DocumentationLink[];
+      componentSetDescription?: string;
+      componentSetDocumentationLinks?: DocumentationLink[];
+    }
+
+    interface MGCustomNode extends MGLayerNode {
+      layerType: 'CUSTOM';
+      tagName?: string;
+      props?: ComponentProp[];
+      imports: ImportItem[];
+    }
+
+    interface MGTextNode extends MGLayerNode {
+      characters: string;
+    }
+
+    type NodeType =
+      | 'GROUP'
+      | 'FRAME'
+      | 'RECTANGLE'
+      | 'TEXT'
+      | 'LINE'
+      | 'ELLIPSE'
+      | 'POLYGON'
+      | 'STAR'
+      | 'PEN'
+      | 'COMPONENT'
+      | 'COMPONENTSET'
+      | 'INSTANCE'
+      | 'BOOLEANOPERATION'
+      | 'SLICE'
+      | 'CONNECTOR'
+      | 'SECTION'
+      | 'CUSTOM';
+
+    /**
+     * 图层的布局信息
+     */
+    interface NodeLayout {
+      /**
+       * 相对矩阵
+       */
+      matrix?: Matrix;
+      width?: Dimension;
+      height?: Dimension;
+      /**
+       * 实际在画布渲染的宽 包括阴影外描边
+       */
+      renderWidth?: Dimension;
+      /**
+       * 实际在画布渲染的高 包括阴影外描边
+       */
+      renderHeight?: Dimension;
+      /**
+       * 自动布局
+       */
+      autoLayout?: AutoLayout;
+      overflow?: 'HIDDEN' | 'VISIBLE';
+      /**
+       * 相对于父元素的布局
+       */
+      relatedLayout?: AbsoluteLayout | RelatedAutoLayout;
+    }
+
+    /**
+     * 自动布局
+     */
+    type AutoLayout = {
+      direction: 'COLUMN' | 'ROW';
+      layoutWrap: 'NO_WRAP' | 'WRAP';
+      // 轴距
+      itemSpacing: Dimension | 'AUTO';
+      // 交叉轴距, 只有在 layoutWrap = 'WRAP'时生效
+      crossAxisSpacing: Dimension | 'AUTO' | null;
+      paddingTop: Dimension;
+      paddingRight: Dimension;
+      paddingBottom: Dimension;
+      paddingLeft: Dimension;
+      /**
+       * 主轴对齐方式
+       */
+      mainAxisAlignItems: AlignTypes;
+      /**
+       * 交叉轴对齐方式
+       */
+      crossAxisAlignItems: Exclude<AlignTypes, 'SPACE_BETWEEN'>;
+      /**
+       * 仅当换行的时候，交叉轴的多行对齐方式
+       */
+      crossAxisAlignContent: 'AUTO' | 'SPACE_BETWEEN';
+      /**
+       * 描边是否包含在布局内
+       */
+      strokesIncludedInLayout: boolean;
+      itemReverseZIndex: boolean;
+    };
+
+    /**
+     * 绝对定位
+     */
+    type AbsoluteLayout = {
+      type: 'ABSOLUTE';
+      bound: {
+        left?: Dimension;
+        right?: Dimension;
+        top?: Dimension;
+        bottom?: Dimension;
+      };
+      /**
+       * 包含外描边和阴影，实际渲染的bound
+       */
+      renderBound: {
+        left?: Dimension;
+        right?: Dimension;
+        top?: Dimension;
+        bottom?: Dimension;
+      };
+    };
+
+    /**
+     * 相对于父元素的自动布局
+     */
+    type RelatedAutoLayout = {
+      type: 'AUTO';
+      alignSelf: 'STRETCH' | 'INHERIT' | 'AUTO';
+      flexGrow: number;
+    };
+
+    type Matrix = [[number, number, number], [number, number, number]];
+    /**
+     * flex布局主轴
+     */
+    type AlignTypes = 'START' | 'END' | 'CENTER' | 'SPACE_BETWEEN';
+    /**
+     * 尺寸单位
+     */
+    type Dimension = {
+      type: 'PIXEL' | 'PERCENT' | 'CALC';
+      value: number | string;
+    };
+
+    interface NodeStyle {
+      /**
+       * 和localClassMap的key保持一致
+       */
+      id: `style-${NodeId}`;
+      type: NodeStyleType;
+      disable?: boolean;
+    }
+
+    /**
+     * 分段样式
+     */
+    type TextSegStyle = {
+      start: number;
+      end: number;
+      textStyleId: string;
+      textStyle: StyleSet;
+    };
+
+    interface CssNodeStyle extends NodeStyle {
+      /**
+       * css类名
+       */
+      name: string;
+      /**
+       * UI样式
+       */
+      value: StyleSet;
+      /**
+       * 布局样式
+       */
+      layoutStyles: StyleSet;
+      /**
+       * key为属性名称
+       */
+      attributes: Record<string, AttributeItem>;
+      /**
+       * 行内样式
+       */
+      inlineStyles?: StyleSet;
+      /**
+       * 动态行内样式
+       */
+      dynamicInlineStyles?: {
+        [key in keyof StyleSet]: string;
+      };
+      /**
+       * 文字分段样式
+       */
+      textStyles?: TextSegStyle[];
+      /**
+       * 样式名数组
+       */
+      classList?: ClassId[];
+      /**
+       * 标签名称
+       */
+      tag?: 'IMG' | 'DIV' | 'TEXT' | 'BUTTON' | 'INPUT' | 'SLOT' | 'SVG' | 'OPTION';
+      /**
+       * 子选择器
+       */
+      subSelectors?: Array<ClassStyle>;
+      /**
+       * 样式token关联
+       */
+      styleTokenAlias?: {
+        backgroundTokenId?: string;
+        strokeColorTokenId?: string;
+        paddingTokenId?: string;
+        gapTokenId?: string;
+        crossGapTokenId?: string;
+        radiusTokenId?: string;
+      };
+    }
+
+    /**
+     * STATIC 静态属性
+     * DYNAMIC 动态属性
+     * METHOD 方法
+     * UNBIND 只定义，但没有使用的属性
+     */
+    type Attribute = 'STATIC' | 'DYNAMIC' | 'METHOD' | 'UNBIND';
+
+    interface AttributeItem {
+      type: Attribute;
+      /**
+       * 属性名
+       */
+      name: string;
+      /**
+       * 属性值或者是对应的函数名称
+       */
+      value: string;
+      /**
+       * 参数类型
+       */
+      valueType: keyof ComponentPropType;
+      /**
+       * 属性值的来源
+       */
+      valueSource?: 'PROPS' | 'METHODS' | 'DATA';
+      /**
+       * 函数的表达式
+       */
+      expression?: string;
+      /**
+       * 默认值
+       */
+      defaultValue?: string | number | boolean;
+      /**
+       * 方法的传参
+       */
+      arguments?: string[];
+    }
+
+    type IOSNodeStyle = NodeStyle;
+
+    interface AndroidNodeStyle extends NodeStyle {
+      /**
+       * android样式
+       */
+      attributes: Record<string, string>;
+      /**
+       * 控件标签
+       */
+      // eslint-disable-next-line
+      tag: 'View' 
+      | 'Canvas'
+        | 'ImageView'
+        | 'TextView'
+        | 'EditText'
+        | 'Button'
+        | 'Spinner'
+        | 'RadioButton'
+        | 'CheckBox'
+        | 'androidx.recyclerview.widget.RecyclerView'
+        | 'ScrollView'
+        | 'HorizontalScrollView'
+        | 'androidx.constraintlayout.widget.ConstraintLayout'
+        | 'com.example.mapplication.utils.MSvg';
+      /**
+       * 关联的文件
+       */
+      subFiles: AndroidFileType[];
+      /**
+       * 是否是slot
+       */
+      slot: boolean;
+      /**
+       * 包路径
+       */
+      package: string;
+      /**
+       * 溢出方向
+       */
+      overflowDirection: number;
+
+      effect: any;
+    }
+
+    type AndroidFileType = AndroidXMLFile | AndroidJavaFile;
+
+    interface AndroidFile {
+      name: string;
+      type: string;
+      path: string;
+    }
+
+    interface AndroidXMLFile extends AndroidFile {
+      type: 'xml';
+      header: string;
+      footer: string;
+      content: AndroidXMLFileTag[];
+    }
+
+    interface AndroidXMLFileTag {
+      tag: string;
+      attributes: Record<string, string>;
+      children?: AndroidXMLFileTag[];
+    }
+
+    interface AndroidJavaFile extends AndroidFile {
+      type: 'java';
+      package: string;
+      imports: string[];
+      className: string;
+      variables: Record<string, string>;
+    }
+    interface AndroidKotlinFile extends AndroidFile {
+      type: 'kotlin';
+      package: string;
+      imports: string[];
+      className: string;
+      variables: Record<string, string>;
+    }
+
+    interface AndroidBitmapFile extends AndroidFile {
+      type: 'png' | 'jpeg';
+      imageRef: string;
+    }
+
+    interface StyleSet extends Properties<string | number>, PropertiesHyphen<string | number> {}
+
+    // style-class-xx
+    type ClassId = string;
+
+    type NodeStyleType = 'VIEW' | 'SVG' | 'IMAGE' | 'TEXT' | 'INPUT' | 'BUTTON' | 'SCROLLVIEW';
+
+    type AndroidTag = {
+      SVG: 'com.example.mapplication.utils.MSvg';
+      IMAGE: 'ImageView';
+      TEXT: 'TextView';
+      INPUT: 'EditText';
+      BUTTON: 'Button';
+      SELECT: 'Spinner';
+      RADIO: 'RadioButton';
+      CHECKBOX: 'CheckBox';
+      SCROLLVIEW: 'ScrollView';
+      LIST: 'androidx.recyclerview.widget.RecyclerView';
+      VIEW: 'androidx.constraintlayout.widget.ConstraintLayout';
+    };
+
+    /**
+     * 运算符
+     */
+    type MGOperationNode = IfStatement | Iteration | Raw | TernaryExpression;
+
+    /**
+     * 条件判断
+     */
+    interface IfStatement {
+      id: OperationId;
+      type: 'OPERATION';
+      operationType: 'If_STATEMENT';
+      // 表达式
+      condition: string;
+      consequent: {
+        type: 'MGNode' | 'EXPRESSION';
+        body: MGNode | string;
+      };
+      alternate: {
+        type: 'MGNode' | 'EXPRESSION';
+        body: MGNode | string;
+      };
+    }
+
+    /**
+     * 迭代器
+     */
+    interface Iteration {
+      id: OperationId;
+      type: 'OPERATION';
+      operationType: 'ITERATOR';
+      // 迭代器的变量名
+      variable: string;
+      body: MGNode;
+      // 作为key的变量名，属于迭代变量中元素上的字段
+      key?: string;
+    }
+
+    /**
+     * 原始字符串
+     */
+    interface Raw {
+      id: OperationId;
+      type: 'OPERATION';
+      operationType: 'RAW';
+      body: string;
+    }
+    /**
+     * 三目运算
+     */
+    interface TernaryExpression {
+      id: OperationId;
+      type: 'OPERATION';
+      operationType: 'TERNARY_EXPRESSION';
+      condition: string;
+      trueExpression: {
+        type: 'MGNode' | 'EXPRESSION';
+        body: MGNode | string;
+      };
+      falseExpression: {
+        type: 'MGNode' | 'EXPRESSION';
+        body: MGNode | string;
+      };
+    }
+
+    type ImportItem = {
+      name: string;
+      path: string;
+      /**
+       * DEFAULT: import name from 'path'
+       * ALL: import * as name from 'path'
+       * NAMED: import { name } from 'path'
+       */
+      type: 'DEFAULT' | 'ALL'; // | 'NAMED'
+    };
+
+    interface MGDSLFile {
+      id: FileId;
+      name: string;
+      entryLayerId: LayerId;
+      chunks: FileId[];
+      data: Record<string, Data>;
+      props: Record<string, Prop>;
+      methods: Record<string, Method>;
+      computed: Record<string, Computed>;
+      // 导入
+      imports: ImportItem[];
+    }
+
+    type FileId = string;
+
+    type ComponentPropType = {
+      STRING: string;
+      NUMBER: number;
+      BOOLEAN: boolean;
+      FUNCTION: string | MGLayerNode[];
+      OBJECT: Record<string, ComponentPropValue<keyof ComponentPropType>>;
+      ARRAY: ComponentPropValue<keyof ComponentPropType>[];
+      SLOT: string | MGLayerNode[];
+    };
+
+    type ComponentPropValue<T extends keyof ComponentPropType> = {
+      type: T;
+      value: ComponentPropType[T];
+    };
+
+    type ComponentPropItem<T extends keyof ComponentPropType> = {
+      /**
+       * 类型
+       */
+      type: T;
+      /**
+       * 默认值，也可作为初始值使用
+       */
+      defaultValue?: ComponentPropType[T];
+      /**
+       * 属性名，根据aliasName和originalName经过处理后的名称，用于最终的展示
+       */
+      name: string;
+    };
+
+    type ComponentPropString = ComponentPropItem<'STRING'>;
+    type ComponentPropNumber = ComponentPropItem<'NUMBER'>;
+    type ComponentPropBoolean = ComponentPropItem<'BOOLEAN'>;
+    type ComponentPropFunction = ComponentPropItem<'FUNCTION'>;
+    type ComponentPropObject = ComponentPropItem<'OBJECT'>;
+    type ComponentPropArray = ComponentPropItem<'ARRAY'>;
+    type ComponentPropSlot = ComponentPropItem<'SLOT'>;
+
+    type ComponentProp =
+      | ComponentPropString
+      | ComponentPropNumber
+      | ComponentPropBoolean
+      | ComponentPropFunction
+      | ComponentPropObject
+      | ComponentPropArray
+      | ComponentPropSlot;
+
+    interface Method {
+      name: string;
+      args: Array<string>;
+      content: string;
+      returnValue?: string;
+    }
+
+    type DSLNumber = {
+      type: 'NUMBER';
+      /**
+       * 默认值，也可作为初始值使用
+       */
+      defaultValue?: number | undefined;
+      name: string;
+    };
+
+    type DSLBoolean = {
+      type: 'BOOLEAN';
+      defaultValue?: boolean | undefined;
+      name: string;
+    };
+
+    type DSLString = {
+      type: 'STRING';
+      /**
+       * 默认值，也可作为初始值使用
+       */
+      defaultValue?: string | undefined;
+      name: string;
+    };
+
+    type DSLFunction = {
+      type: 'FUNCTION';
+      defaultValue?: string | undefined;
+      name: string;
+    };
+
+    type DSLArray = {
+      type: 'ARRAY';
+      defaultValue?: Array<any> | undefined;
+      name: string;
+    };
+
+    type DSLObject = {
+      type: 'OBJECT';
+      /**
+       * 默认值，也可作为初始值使用
+       */
+      defaultValue?: { [key: string]: any };
+      name: string;
+    };
+
+    type Data = DSLString | DSLNumber | DSLBoolean | DSLFunction | DSLArray | DSLObject;
+    type Prop = DSLString | DSLNumber | DSLBoolean | DSLFunction | DSLArray | DSLObject;
+
+    interface Computed {
+      name: string;
+      args: Array<string>;
+      content: string;
+      returnValue?: string;
+      dependencies?: Array<string>;
+    }
+
+    interface CustomCode {
+      type: 'custom';
+      data: {
+        title: string;
+        code: string;
+        // 暂时不设置类型
+        type: string;
+      }[];
+    }
+  }
+}
+
+declare global {
+  namespace MGTMP {
+    type RegExpString = string;
+    type PseudoType = 'HOVER' | 'ACTIVE' | 'FOCUS' | 'DISABLED';
+    /**
+     * 工具类样式，如：.flex-1 { flex: 1 }
+     * 通常为写死的样式，不会根据数据动态生成。当value与DSLToCode.StyleNode.value相同时，可以直接使用StyleRule.className作为DSLToCode.StyleNode.className
+     */
+    type UtilityStyle = {
+      type: 'UTILITY';
+      className: string;
+      pseudo?: PseudoType;
+      value: Properties & PropertiesHyphen;
+    };
+    /**
+     * 配置类样式，如：.bg-color { background-color: var(--bg-color) },.bg-color:hover { background-color: var(--bg-color-hover) },
+     * 根据token的值按配置规则动态生成的样式。
+     */
+    type ConfigStyle = {
+      type: 'CONFIG';
+      prefix: string;
+      output: (token: string, tokenNameWithoutPrefix: string) => UtilityStyle[];
+    };
+    type StyleRule = UtilityStyle | ConfigStyle;
+    type StyleTemplate = StyleRule[];
+    /**
+     * 组件属性类型
+     */
+    type ComponentPropType = {
+      STRING: string;
+      NUMBER: number;
+      BOOLEAN: boolean;
+      FUNCTION: string | MGDSL.MGLayerNode[];
+      OBJECT: Record<string, MGDSL.ComponentPropValue<keyof ComponentPropType>>;
+      ARRAY: MGDSL.ComponentPropValue<keyof ComponentPropType>[];
+      SLOT: string | MGDSL.MGLayerNode[];
+    };
+
+    type GetValueType<T extends keyof ComponentPropType> = (
+      nodeId: MGDSL.LayerId,
+      nodeMap: Record<MGDSL.NodeId, MGDSL.MGNode>,
+      componentId?: string,
+    ) => {
+      value: ComponentPropType[T] | undefined;
+      nodeMap: Record<string, MGDSL.MGLayerNode>;
+    };
+
+    type ComponentPropItem<T extends keyof ComponentPropType> = {
+      /**
+       * 类型
+       */
+      type: T;
+      /**
+       * 默认值，也可作为初始值使用
+       */
+      defaultValue?: ComponentPropType[T];
+      /**
+       * 该方法内部需要bridge函数支持，不适合在配置模板中使用，请尽量少的使用该函数作判断
+       */
+      getValue?: GetValueType<T>;
+      /**
+       * 属性名，根据aliasName和originalName经过处理后的名称，用于最终的展示
+       */
+      name: string;
+      /**
+       * 属性别名
+       */
+      aliasName?: string;
+      /**
+       * 原始名称,区别于经过处理的name
+       */
+      originalName?: string;
+      /**
+       * 属性枚举值对应关系。一般和aliasName配合使用，根据画布图层的属性值，映射到代码中的属性值
+       */
+      aliasMap?: Record<string, ComponentPropType[T] | undefined>;
+      /**
+       * DSM属性枚举值对应关系
+       */
+      dsmAlias?: Record<string, string>;
+      /**
+       * 组件库解析时，是否将大写属性值转换为小写
+       */
+      lowerCase?: boolean;
+      /**
+       * 是否应用该属性
+       * @param aliasName 对应画布图层属性名，当前当前仅支持属性名的判断
+       * @param aliasMap 对应画布图层属性值
+       */
+      visible?: {
+        aliasName: string;
+        aliasMap?: Record<string, boolean>;
+      };
+    };
+    /**
+     * 组件属性类型
+     * 泛型没有显式指定类型时，会被推断所有生命类型，起不到约束作用
+     */
+    type ComponentPropString = ComponentPropItem<'STRING'> & {
+      /**
+       * 如果是string，允许已某个图层的content作为值
+       */
+      nodePath?: SlotMatchType[];
+    };
+    type ComponentPropNumber = ComponentPropItem<'NUMBER'>;
+    type ComponentPropBoolean = ComponentPropItem<'BOOLEAN'>;
+    type ComponentPropFunction = ComponentPropItem<'FUNCTION'>;
+    type ComponentPropObject = ComponentPropItem<'OBJECT'>;
+    type ComponentPropArray = ComponentPropItem<'ARRAY'>;
+    type ComponentPropInstance = ComponentPropItem<'SLOT'> & {
+      /**
+       * react的INSTANCE视为Vue的SLOT效果，故这里提供nodePath属性，继续遍历图层并以此图层为属性内容
+       * 这里只能指向唯一图层才能向下遍历
+       */
+      nodePath?: SlotMatchType[];
+      ignoreClass?: boolean;
+    };
+    /**
+     * 组件的虚拟路径，如：'@/components/xxx.vue'
+     * export default {} 为 DEFAULT
+     * export const xxx = {} 为 xxx
+     */
+    type ComponentSource = {
+      path: string;
+      export: 'DEFAULT' | string;
+    };
+    /**
+     * 组件属性
+     * @param type 属性类型
+     * @param name 属性名称
+     * @param defaultValue 属性默认值
+     * @param aliasName 对应设计系统的组件别名，如能匹配则根据别名生成代码
+     */
+    type ComponentProp =
+      | ComponentPropString
+      | ComponentPropNumber
+      | ComponentPropBoolean
+      | ComponentPropFunction
+      | ComponentPropObject
+      | ComponentPropArray
+      | ComponentPropInstance;
+    type ComponentData = {
+      name: string;
+      defaultValue: string | number | boolean;
+      type: keyof ComponentPropType;
+    };
+    type ComponentProps = {
+      name: string;
+      originalName?: string;
+      defaultValue?: string | number | boolean;
+      type: keyof ComponentPropType;
+    };
+    type SlotMatchType = RegExpString | number;
+    /**
+     * 组件插槽
+     * @param name 插槽名称
+     * @param relateNodeNames 关联的节点名称
+     */
+    type ComponentSlot = {
+      name: string;
+      relateNodeNames: (SlotMatchType | SlotMatchType[])[];
+      ignoreClass?: boolean;
+    } & (
+      | { type?: '' }
+      | {
+          type: 'TEXT';
+        }
+      | {
+          type: 'CUSTOM';
+          // 返回MGDSL数据，id可为空
+          getValue: GetValueType<'SLOT'>;
+        }
+    );
+
+    /**
+     * 组件模板
+     * @param name 组件名称
+     * @param props 组件属性
+     * @param source 组件的虚拟路径
+     */
+    type ComponentOrigin = {
+      name: string;
+      props: ComponentProp[];
+      slots?: ComponentSlot[];
+      source: ComponentSource;
+      ignoreRect?: boolean;
+    };
+    type ComponentItem = ComponentOrigin & { id: string; matchName?: string };
+    // 图标库
+    type Icons = {
+      /**
+       * 组件名适配正则
+       */
+      reg: RegExpString;
+      getValue: (node: MGDSL.MGLayerNode) => MGDSL.MGCustomNode;
+    };
+
+    type ComponentTemplate = {
+      // 防止组件库解析，存储对应文件id
+      documentId: string;
+      // 暂时作为唯一标识
+      name: string;
+      /**
+       * 组件导入类型
+       * GLOBAL 全局引入
+       * IMPORT esm引入
+       */
+      importType: 'GLOBAL' | 'IMPORT';
+      importPath: {
+        name: string;
+        importName: string;
+        path: string;
+        type: 'script' | 'style';
+      }[];
+      framework: 'VUE2' | 'VUE3' | 'REACT';
+      components: ComponentItem[];
+      icons?: Icons;
+    };
+  }
+}
+
 declare global {
   const mastergo: PluginAPI
   const mg: PluginAPI
@@ -51,6 +1051,9 @@ declare global {
 
     readonly viewport: ViewportAPI
 
+    // only available in devMode
+    readonly codegen?: CodegenAPI
+
     closePlugin(): void
 
     on(type: PluginEventType, callback: CallableFunction): void
@@ -115,7 +1118,7 @@ declare global {
 
     listAvailableFontsAsync(): Promise<Font[]>
     loadFontAsync(fontName: FontName): Promise<boolean>
-    createImage(imageData: Uint8Array): Promise<Image>
+    createImage(imageData: Uint8Array, isSync?: boolean): Promise<Image>
     getImageByHref(href: string): Image
 
 
@@ -288,6 +1291,8 @@ declare global {
     textStyleId: string
     textStyle: {
       fontName: FontName
+      localizedFontName: FontName
+      referrer: FontReferrer
       fontSize: number
       letterSpacing: LetterSpacing
       lineHeight: LineHeight
@@ -376,6 +1381,8 @@ declare global {
     readonly radius: number
     readonly isVisible: boolean
     readonly blendMode: BlendMode
+    readonly showShadowBehindNode: boolean
+    readonly isEffectShow: boolean
   }
 
   interface BlurEffect {
@@ -512,8 +1519,12 @@ declare global {
     | 'PLUS_LIGHTER'
     | 'PASS_THROUGH'
 
+    type FontReferrer = 'team' | 'org' | 'local' | 'official'
+
   interface Font {
     fontName: FontName
+    localizedFontName: FontName
+    referrer: FontReferrer
   }
 
   /// /////////////////////////////////////////////////////////////////////////////
@@ -1344,6 +2355,72 @@ declare global {
     | 'SLICE'
     | 'CONNECTOR'
     | 'SECTION'
+  
+  
+  
+  // d2c
+  type CodeFile = {
+    /**
+     * import third-party paths
+     */
+    importPath?: {
+      name: string;
+      path: string;
+      type: 'script' | 'style';
+    }[];
+    importType?: 'GLOBAL' | 'IMPORT';
+    // absolute path
+    path: string;
+    // relative to the relative path of the imported file
+    relativePath: string;
+    fileName: string;
+    type: 'css' | 'js' | 'typescript' | 'ts-definition' | 'static' | 'vue' | 'react' | 'java' | 'kt' | 'xml';
+    // code
+    code: string;
+    // parsed code
+    parsedCode?: string;
+    // import
+    chunks?: CodeFile[];
+  };
+  interface CodegenAPI {
+    /**
+     * @param event a callback function that is triggered when the plugin generates the DSL, and the parameter of the callback function is the modified DSL data
+     */
+    on(type: 'generateDSL', event: (generateData: {data: MGDSL.MGDSLData, callback: (modifiedData: MGDSL.MGDSLData) => void}) => void) : void
+    /**
+     * @param event a callback function that is triggered when the plugin generates the DSL, and the parameter of the callback function is the custom code, and when the callback returns the custom code, the custom code will be used as the standard, and the code will not be generated according to the DSL
+     */
+    on(type: 'generate', event: (generateData: {data: MGDSL.MGDSLData, callback: (modifiedData: MGDSL.CustomCode) => void}) => void) : void
+    /**
+     * @param event a callback function that is triggered when the plugin generates the code, and the parameter of the callback function is the generated code
+     */
+    on(type: 'codeChange', event: (data: MGDSL.CustomCode['data']) => void) : void
+    /**
+     * Set the component template
+     * @description used to set the component mapping relationship
+     * @param template component template
+     */
+    setComponentTemplate(template: MGTMP.ComponentTemplate): void
+    /**
+     * Get code by id and framework
+     * @param layerId layer id
+     * @param type framework type
+     * @returns code file
+     */
+    getCode(layerId: string, type: MGDSL.Framework): Promise<CodeFile | null>;
+    /**
+     * Get DSL by id and framework
+     * @param layerId layer id
+     * @param type framework type
+     * @returns DSL data
+     */
+    getDSL(layerId: string, type: MGDSL.Framework): Promise<MGDSL.MGDSLData | null>;
+    /**
+     * Get code by DSL
+     * @param data DSL data
+     * @param type framework type
+     * @returns code file
+     */
+    getCodeByDSL(data: MGDSL.MGDSLData, type: MGDSL.Framework): Promise<CodeFile | null>;
+  }
 }
-
-export { }