fix(material): add missing componentsMap to mockServer (#701)

* fix: esbuild install failed on nodev16

* fix: esbuild install failed on nodev16

* fix: remove deps on root pkg.json

mockServer/src/mock/get/app-center/v1/apps/schema/918.json

@@ -1918,6 +1918,13 @@
         "destructuring": true,
         "version": "0.1.17"
       },
+      {
+        "componentName": "TinyCheckbox",
+        "package": "@opentiny/vue",
+        "exportName": "Checkbox",
+        "destructuring": true,
+        "version": "3.14.0"
+      },
       {
         "componentName": "TinySelect",
         "package": "@opentiny/vue",
@@ -1974,6 +1981,76 @@
         "destructuring": true,
         "version": "0.1.16"
       },
+      {
+        "componentName": "TinyCollapse",
+        "package": "@opentiny/vue",
+        "exportName": "Collapse",
+        "destructuring": true,
+        "version": "3.14.0"
+      },
+      {
+        "componentName": "TinyCollapseItem",
+        "package": "@opentiny/vue",
+        "exportName": "CollapseItem",
+        "destructuring": true,
+        "version": "3.14.0"
+      },
+      {
+        "componentName": "TinyBreadcrumb",
+        "package": "@opentiny/vue",
+        "exportName": "Breadcrumb",
+        "destructuring": true,
+        "version": "3.14.0"
+      },
+      {
+        "componentName": "TinyBreadcrumbItem",
+        "package": "@opentiny/vue",
+        "exportName": "BreadcrumbItem",
+        "destructuring": true,
+        "version": "3.14.0"
+      },
+      {
+        "componentName": "ElInput",
+        "package": "element-plus",
+        "exportName": "ElInput",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElButton",
+        "package": "element-plus",
+        "exportName": "ElButton",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElForm",
+        "package": "element-plus",
+        "exportName": "ElForm",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElFormItem",
+        "package": "element-plus",
+        "exportName": "ElFormItem",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElTable",
+        "package": "element-plus",
+        "exportName": "ElTable",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
+      {
+        "componentName": "ElTableColumn",
+        "package": "element-plus",
+        "exportName": "ElTableColumn",
+        "destructuring": true,
+        "version": "2.4.2"
+      },
       {
         "componentName": "PortalHome",
         "main": "common/components/home",

package.json

@@ -25,8 +25,6 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.3",
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@types/node": "^18.0.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

packages/canvas/src/components/render/render.js

@@ -558,7 +558,7 @@ const getBindProps = (schema, scope) => {
     ...parseData(schema.props, scope),
     [DESIGN_UIDKEY]: id,
     [DESIGN_TAGKEY]: componentName,
-    onMoseover: stopEvent,
+    onMouseover: stopEvent,
     onFocus: stopEvent
   }
   if (scope) {

packages/common/component/MetaHtmlText.vue

@@ -10,7 +10,7 @@
     </div>
   </div>
   <div class="head-content">
-    <meta-input v-model="state.text" type="textarea" @change="change"></meta-input>
+    <meta-input v-model="state.text" type="textarea" @update:modelValue="change"></meta-input>
   </div>
 </template>
 <script>

packages/design-core/package.json

@@ -107,6 +107,7 @@
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
     "cross-env": "^7.0.3",
+    "esbuild": "^0.21.5",
     "esbuild-plugin-copy": "^2.1.1",
     "eslint": "^8.38.0",
     "eslint-plugin-vue": "^8.0.0",

packages/design-core/public/mock/bundle.json

@@ -23,7 +23,8 @@
             "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
             "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
             "dependencies": null,
-            "exportName": "ElInput"
+            "exportName": "ElInput",
+            "destructuring": true
           },
           "group": "表单组件",
           "category": "element-plus",
@@ -303,7 +304,8 @@
             "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
             "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
             "dependencies": null,
-            "exportName": "ElButton"
+            "exportName": "ElButton",
+            "destructuring": true
           },
           "group": "基础组件",
           "category": "element-plus",
@@ -624,6 +626,7 @@
             "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
             "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
             "dependencies": null,
+            "destructuring": true,
             "exportName": "ElForm"
           },
           "group": "表单组件",
@@ -1081,6 +1084,7 @@
             "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
             "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
             "dependencies": null,
+            "destructuring": true,
             "exportName": "ElFormItem"
           },
           "group": "表单组件",
@@ -1431,6 +1435,7 @@
             "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
             "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
             "dependencies": null,
+            "destructuring": true,
             "exportName": "ElTable"
           },
           "group": "数据展示",
@@ -2669,6 +2674,7 @@
             "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs",
             "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css",
             "dependencies": null,
+            "destructuring": true,
             "exportName": "ElTableColumn"
           },
           "group": "表单组件",
@@ -8901,7 +8907,7 @@
           "devMode": "proCode",
           "npm": {
             "package": "@opentiny/vue",
-            "exportName": "Select",
+            "exportName": "Breadcrumb",
             "version": "",
             "destructuring": true
           },
@@ -14007,20 +14013,10 @@
               "schema": {
                 "componentName": "TinyBreadcrumb",
                 "props": {
-                  "options": [
-                    {
-                      "to": "{ path: '/' }",
-                      "label": "首页"
-                    },
-                    {
-                      "to": "{ path: '/breadcrumb' }",
-                      "label": "产品"
-                    },
-                    {
-                      "replace": "true",
-                      "label": "软件"
-                    }
-                  ]
+                  "options": {
+                    "type": "JSExpression",
+                    "value": "[{to: { path: '/' },label: '首页'},{to: { path: '/breadcrumb' },label: '产品'},{'replace': true,'label': '软件'}]"
+                  }
                 }
               }
             },
@@ -14275,7 +14271,7 @@
               "schema": {
                 "componentName": "TinyTimeLine",
                 "props": {
-                  "active": "2",
+                  "active": 2,
                   "data": [
                     {
                       "name": "已下单"

packages/design-core/src/preview/src/preview/Preview.vue

@@ -86,11 +86,17 @@ export default {
         .map((name) => fetchBlockSchema(name))
 
       const schemaList = await Promise.allSettled(promiseList)
+      const extraList = []
 
       schemaList.forEach((item) => {
         if (item.status === 'fulfilled' && item.value?.[0]?.content) {
           res.push(item.value[0].content)
-          res.push(...getBlocksSchema(item.value[0].content, blockSet))
+          extraList.push(getBlocksSchema(item.value[0].content, blockSet))
+        }
+      })
+      ;(await Promise.allSettled(extraList)).forEach((item) => {
+        if (item.status === 'fulfilled' && item.value) {
+          res.push(...item.value)
         }
       })
 
@@ -136,11 +142,10 @@ export default {
         },
         ...(blocks || []).map((blockSchema) => {
           return {
-            panelName: blockSchema.fileName,
+            panelName: `${blockSchema.fileName}.vue`,
             panelValue:
               genSFCWithDefaultPlugin(blockSchema, appData?.componentsMap || [], { blockRelativePath: './' }) || '',
-            panelType: 'vue',
-            index: true
+            panelType: 'vue'
           }
         })
       ]

packages/settings/styles/src/Main.vue

@@ -69,7 +69,6 @@ import { ref, watch } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
 import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
-import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 import {
   SizeGroup,
   LayoutGroup,
@@ -128,7 +127,7 @@ export default {
       const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
       const pageSchema = getCanvasPageSchema()
       const schema = getSchema() || pageSchema
-      const styleString = formatString(styleStrRemoveRoot(content), 'css')
+      const styleString = styleStrRemoveRoot(content)
       const currentSchema = getCurrentSchema() || pageSchema
 
       state.styleContent = content

packages/vue-generator/package.json

@@ -47,7 +47,7 @@
     "fs-extra": "^10.0.1",
     "prettier": "^2.6.1",
     "vite": "^4.3.7",
-    "vite-plugin-static-copy": "^1.0.4",
+    "vite-plugin-static-copy": "^0.16.0",
     "vitest": "^1.4.0",
     "winston": "^3.10.0"
   },

packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js

@@ -1,3 +1,4 @@
+import { BUILTIN_COMPONENTS_MAP } from '@/constant'
 import { getImportMap } from './parseImport'
 import {
   genTemplateByHook,
@@ -259,7 +260,10 @@ export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}) => {
     }
   }
 
-  return generateSFCFile(schema, componentsMap, newConfig)
+  // 兼容单独调用的场景，单独调用时，这里会默认加上 builtInComponents
+  const compsMapWithBuiltIn = [...componentsMap, ...BUILTIN_COMPONENTS_MAP]
+
+  return generateSFCFile(schema, compsMapWithBuiltIn, newConfig)
 }
 
 export default generateSFCFile

packages/vue-generator/src/generator/vue/sfc/generateAttribute.js

@@ -229,7 +229,7 @@ export const handleSlotBindAttrHook = (schemaData) => {
   let paramsValue = ''
 
   if (Array.isArray(params)) {
-    paramsValue = `={ ${params.join(',')} }`
+    paramsValue = `="{ ${params.join(',')} }"`
   } else if (typeof params === 'string') {
     paramsValue = `="${params}"`
   }

packages/vue-generator/src/plugins/genGlobalState.js

@@ -44,8 +44,8 @@ function genDependenciesPlugin(options = {}) {
           .map((item) => {
             let [key, value] = item
 
-            if (value === '') {
-              value = "''"
+            if (typeof value === 'string') {
+              value = `'${value}'`
             }
 
             if (value && typeof value === 'object') {
@@ -57,19 +57,19 @@ function genDependenciesPlugin(options = {}) {
           .join(',')} })`
 
         const getterExpression = Object.entries(getters)
-          .filter((item) => item.value?.type === 'JSFunction')
+          .filter((item) => item[1]?.type === 'JSFunction')
           .map(([key, value]) => `${key}: ${value.value}`)
           .join(',')
 
         const actionExpressions = Object.entries(actions)
-          .filter((item) => item.value?.type === 'JSFunction')
+          .filter((item) => item[1]?.type === 'JSFunction')
           .map(([key, value]) => `${key}: ${value.value}`)
           .join(',')
 
         const storeFiles = `
          ${importStatement}
          export const ${id} = defineStore({
-           id: ${id},
+           id: '${id}',
            state: ${stateExpression},
            getters: { ${getterExpression} },
            actions: { ${actionExpressions} }

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/index.js

@@ -0,0 +1 @@
+export { testState } from './testState'

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/stores/testState.js

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+export const testState = defineStore({
+  id: 'testState',
+  state: () => ({
+    name: 'testName',
+    license: '',
+    age: 18,
+    food: ['apple', 'orange', 'banana', 19],
+    desc: { description: 'hello world', money: 100, other: '', rest: ['a', 'b', 'c', 20] }
+  }),
+  getters: {
+    getAge: function getAge() {
+      return this.age
+    },
+    getName: function getName() {
+      return this.name
+    }
+  },
+  actions: {
+    setAge: function setAge(age) {
+      this.age = age
+    },
+    setName: function setName(name) {
+      this.name = name
+    }
+  }
+})

packages/vue-generator/test/testcases/generator/mockData.js

@@ -676,7 +676,43 @@ export const appSchemaDemo01 = {
       value: 'function dataHanlder(res){\n return res;\n}'
     }
   },
-  globalState: [],
+  globalState: [
+    {
+      id: 'testState',
+      state: {
+        name: 'testName',
+        license: '',
+        age: 18,
+        food: ['apple', 'orange', 'banana', 19],
+        desc: {
+          description: 'hello world',
+          money: 100,
+          other: '',
+          rest: ['a', 'b', 'c', 20]
+        }
+      },
+      getters: {
+        getAge: {
+          type: 'JSFunction',
+          value: 'function getAge() {\n return this.age \n}'
+        },
+        getName: {
+          type: 'JSFunction',
+          value: 'function getName() {\n return this.name \n}'
+        }
+      },
+      actions: {
+        setAge: {
+          type: 'JSFunction',
+          value: 'function setAge(age) {\n this.age = age; \n}'
+        },
+        setName: {
+          type: 'JSFunction',
+          value: 'function setName(name) {\n this.name = name; \n}'
+        }
+      }
+    }
+  ],
   utils: [
     {
       name: 'axios',

packages/vue-generator/test/testcases/sfc/case06/case06.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import componentsMap from './components-map.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should generate slot declaration correctly', async () => {
+  const res = genSFCWithDefaultPlugin(schema, componentsMap)
+  const formattedCode = formatCode(res, 'vue')
+
+  await expect(formattedCode).toMatchFileSnapshot('./expected/slotTest.vue')
+})

packages/vue-generator/test/testcases/sfc/case06/components-map.json

@@ -0,0 +1,9 @@
+[
+  {
+    "componentName": "TinyTree",
+    "exportName": "Tree",
+    "package": "@opentiny/vue",
+    "version": "^3.10.0",
+    "destructuring": true
+  }
+]

packages/vue-generator/test/testcases/sfc/case06/expected/slotTest.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <tiny-tree
+      :data="[
+        { label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] },
+        {
+          label: '一级 2',
+          children: [
+            { label: '二级 2-1', children: [{ label: '三级 2-1-1' }] },
+            { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }
+          ]
+        }
+      ]"
+    >
+      <template #default="{ data }">
+        <span>{{ data.label }}</span></template
+      ></tiny-tree
+    >
+    <tiny-tree
+      :data="[
+        { label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] },
+        {
+          label: '一级 2',
+          children: [
+            { label: '二级 2-1', children: [{ label: '三级 2-1-1' }] },
+            { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }
+          ]
+        }
+      ]"
+    >
+      <template #default="data">
+        <span>{{ data.label }}</span></template
+      ></tiny-tree
+    >
+  </div>
+</template>
+
+<script setup>
+import { Tree as TinyTree } from '@opentiny/vue'
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+
+const props = defineProps({})
+
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const state = vue.reactive({})
+wrap({ state })
+</script>
+<style scoped></style>

packages/vue-generator/test/testcases/sfc/case06/page.schema.json

@@ -0,0 +1,143 @@
+{
+  "state": {},
+  "methods": {},
+  "componentName": "Page",
+  "fileName": "createVm",
+  "css": "",
+  "props": {},
+  "lifeCycles": {},
+  "children": [
+    {
+      "componentName": "TinyTree",
+      "props": {
+        "data": [
+          {
+            "label": "一级 1",
+            "children": [
+              {
+                "label": "二级 1-1",
+                "children": [
+                  {
+                    "label": "三级 1-1-1"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "label": "一级 2",
+            "children": [
+              {
+                "label": "二级 2-1",
+                "children": [
+                  {
+                    "label": "三级 2-1-1"
+                  }
+                ]
+              },
+              {
+                "label": "二级 2-2",
+                "children": [
+                  {
+                    "label": "三级 2-2-1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "id": "33f52342",
+      "children": [
+        {
+          "componentName": "Template",
+          "props": {
+            "slot": {
+              "name": "default",
+              "params": ["data"]
+            }
+          },
+          "children": [
+            {
+              "componentName": "Text",
+              "props": {
+                "text": {
+                  "type": "JSExpression",
+                  "value": "data.label"
+                }
+              },
+              "id": "c225d165"
+            }
+          ],
+          "id": "415d5f65"
+        }
+      ]
+    },
+    {
+      "componentName": "TinyTree",
+      "props": {
+        "data": [
+          {
+            "label": "一级 1",
+            "children": [
+              {
+                "label": "二级 1-1",
+                "children": [
+                  {
+                    "label": "三级 1-1-1"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "label": "一级 2",
+            "children": [
+              {
+                "label": "二级 2-1",
+                "children": [
+                  {
+                    "label": "三级 2-1-1"
+                  }
+                ]
+              },
+              {
+                "label": "二级 2-2",
+                "children": [
+                  {
+                    "label": "三级 2-2-1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "id": "33f52342",
+      "children": [
+        {
+          "componentName": "Template",
+          "props": {
+            "slot": {
+              "name": "default",
+              "params": "data"
+            }
+          },
+          "children": [
+            {
+              "componentName": "Text",
+              "props": {
+                "text": {
+                  "type": "JSExpression",
+                  "value": "data.label"
+                }
+              },
+              "id": "c225d165"
+            }
+          ],
+          "id": "415d5f65"
+        }
+      ]
+    }
+  ]
+}

packages/vue-generator/vite.config.mjs

@@ -17,7 +17,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
 // https://vitejs.dev/config/
 export default defineConfig({
   test: {
-    exclude: ['**/result/**'],
+    exclude: ['**/result/**', 'node_modules'],
     watchExclude: ['**/result/**']
   },
   resolve: {

scripts/buildMaterials.mjs

@@ -12,7 +12,10 @@ const materialsDir = 'materials'
 const bundlePath = path.join(process.cwd(), '/packages/design-core/public/mock/bundle.json')
 // mockServer应用数据
 const appInfoPath = path.join(process.cwd(), '/mockServer/src/services/appinfo.json')
+const appSchemaPath = path.join(process.cwd(), 'mockServer/src/mock/get/app-center/v1/apps/schema/918.json')
+
 const appInfo = fsExtra.readJSONSync(appInfoPath)
+const appSchema = fsExtra.readJSONSync(appSchemaPath)
 
 const connection = new MysqlConnection()
 
@@ -22,6 +25,7 @@ const connection = new MysqlConnection()
 const write = (bundle) => {
   fsExtra.outputJSONSync(bundlePath, bundle, { spaces: 2 })
   fsExtra.outputJSONSync(appInfoPath, appInfo, { spaces: 2 })
+  fsExtra.outputJSONSync(appSchemaPath, appSchema, { spaces: 2 })
 }
 
 /**
@@ -95,6 +99,7 @@ const generateComponents = () => {
       }
       const { components = [], snippets = [], blocks = [] } = bundle.data.materials
       const componentsMap = []
+      const packagesMap = []
       const appInfoBlocksLabels = appInfo.blockHistories.map((item) => item.label)
 
       files.forEach((file) => {
@@ -151,8 +156,26 @@ const generateComponents = () => {
 
         appInfo.materialHistory.components = componentsMap
 
-        write(bundle)
+        const { package: packageName = '', version = '', exportName = '' } = npm || {}
+
+        const mapItem = {
+          componentName: component,
+          package: packageName,
+          version,
+          exportName
+        }
+
+        if (typeof npm.destructuring === 'boolean') {
+          mapItem.destructuring = npm.destructuring
+        }
+
+        if (npm.package) {
+          packagesMap.push(mapItem)
+        }
       })
+
+      appSchema.data.componentsMap = packagesMap
+      write(bundle)
     })
 
     logger.success('物料资产包构建成功')