feat: demo更新,支持操作符

example/dsl-hook/typings/comp-temp.d.ts → comp-temp.d.ts

@@ -6,7 +6,7 @@ declare global {
     type PseudoType = 'HOVER' | 'ACTIVE' | 'FOCUS' | 'DISABLED';
     /**
      * 工具类样式，如：.flex-1 { flex: 1 }
-     * 通常为写死的样式，不会根据数据动态生成。当value与DesignToCode.StyleNode.value相同时，可以直接使用StyleRule.className作为DesignToCode.StyleNode.className
+     * 通常为写死的样式，不会根据数据动态生成。当value与DSLToCode.StyleNode.value相同时，可以直接使用StyleRule.className作为DSLToCode.StyleNode.className
      */
     type UtilityStyle = {
       type: 'UTILITY',
@@ -197,9 +197,8 @@ declare global {
         name: string,
         importName: string,
         path: string,
+        type: 'script' | 'style',
       }[],
-      extendImport?: [string, string][],
-      stylePath?: string[],
       framework: 'VUE2' | 'VUE3' | 'REACT',
       components: ComponentItem[],
       icons?: Icons,

dsl.d.ts

@@ -16,7 +16,7 @@ declare global {
       readonly fileMap: Record<FileId, MGDSLFile>
       root: MGLayerNode
       settings: DSLSettings
-      entry: MGDSLFile
+      entry: FileId
       /**
        * 预览代码时所引入esm模块，需要讲配置模型上的依赖模块引入
        */
@@ -57,15 +57,15 @@ declare global {
      */
     type TokenItem = TokenCommonItem | TokenTextItem
     type TokenCommonItem = {
-      id: string,
+      id: string
       type:
       | 'color'
       | 'padding'
       | 'border-radius'
       | 'border-width'
       | 'gap'
-      name: TokenName,
-      value: TokenValue,
+      name: TokenName
+      value: TokenValue
       /**
        * 是否是多段
        */
@@ -80,16 +80,16 @@ declare global {
     | 'letterspacing'
 
     type TokenTextItem = {
-      id: string,
+      id: string
       type: 'text'
-      name: TokenName,
+      name: TokenName
       textItems: Record<TokenTextSubItemType, TokenTextSubItem>
     };
 
     type TokenTextSubItem = {
       type: TokenTextSubItemType
-      name: TokenName,
-      value: TokenValue | TokenName,
+      name: TokenName
+      value: TokenValue
     }
 
     /**
@@ -246,7 +246,7 @@ declare global {
      * 自动布局
      */
     type AutoLayout = {
-      direction: 'COLUMN' | 'ROW',
+      direction: 'COLUMN' | 'ROW'
       layoutWrap: 'NO_WRAP' | 'WRAP'
       // 轴距
       itemSpacing: Dimension | 'AUTO'
@@ -285,7 +285,7 @@ declare global {
         right?: Dimension
         top?: Dimension
         bottom?: Dimension
-      },
+      }
       /**
        * 包含外描边和阴影，实际渲染的bound
        */
@@ -453,15 +453,17 @@ declare global {
      * 条件判断
      */
     interface IfStatement {
+      id: OperationId
       type: 'OPERATION'
       operationType: 'If_STATEMENT'
       // 表达式
+      condition: string
       consequent: {
-        type: 'MGNode' | 'IDENTIFIER'
+        type: 'MGNode' | 'EXPRESSION'
         body: MGNode | string
       }
       alternate: {
-        type: 'MGNode' | 'IDENTIFIER'
+        type: 'MGNode' | 'EXPRESSION'
         body: MGNode | string
       }
     }
@@ -470,17 +472,21 @@ declare global {
      * 迭代器
      */
     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
@@ -489,14 +495,16 @@ declare global {
      * 三目运算
      */
     interface TernaryExpression {
+      id: OperationId
       type: 'OPERATION'
       operationType: 'TERNARY_EXPRESSION'
+      condition: string
       trueExpression: {
-        type: 'MGNode' | 'IDENTIFIER'
+        type: 'MGNode' | 'EXPRESSION'
         body: MGNode | string
       }
       falseExpression: {
-        type: 'MGNode' | 'IDENTIFIER'
+        type: 'MGNode' | 'EXPRESSION'
         body: MGNode | string
       }
     }
@@ -518,7 +526,7 @@ declare global {
       entryLayerId: LayerId
       chunks: FileId[]
       data: Record<string, Data>
-      props: Record<string, ComponentProp>
+      props: Record<string, Prop>
       methods: Record<string, Method>
       computed: Record<string, Computed>
       // 导入
@@ -532,8 +540,8 @@ declare global {
       'NUMBER': number
       'BOOLEAN': boolean
       'FUNCTION': string
-      'OBJECT': Record<string, any>
-      'ARRAY': any[]
+      'OBJECT': Record<string, ComponentPropValue<keyof ComponentPropType>>
+      'ARRAY': ComponentPropValue<keyof ComponentPropType>[]
       'SLOT': string | MGLayerNode[]
     }
 
@@ -574,7 +582,53 @@ declare global {
       returnValue?: string
     }
 
-    type Data = ComponentPropString | ComponentPropNumber | ComponentPropBoolean | ComponentPropFunction | ComponentPropObject | ComponentPropArray
+    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

example/dsl-hook/App.css

@@ -0,0 +1 @@
+.hello{color:red}