feat：elementplus 物料更新

package.json

@@ -70,5 +70,9 @@
     "patchedDependencies": {
       "@vue/[email protected]": "patches/@[email protected]"
     }
+  },
+  "dependencies": {
+    "axios": "~0.28.0",
+    "cheerio": "1.0.0-rc.12"
   }
 }

packages/design-core/public/mock/genMeterials.js

@@ -0,0 +1,159 @@
+const baseUrl = 'https://element-plus.org'
+const VERSION = '2.7.8'
+
+const axios = require('axios')
+const cheerio = require('cheerio')
+const fs = require('fs')
+
+async function loadMenuData() {
+  const url = 'https://element-plus.org/zh-CN/component/overview.html'
+  const response = await axios.get(url)
+  const html = response.data
+  const $ = cheerio.load(html)
+  const sidebarItems = $('.sidebar-group a')
+  const data = []
+  sidebarItems.each((index, element) => {
+    const link = `${baseUrl}${$(element).attr('href')}.html`
+    const text = $(element).text().trim()
+    data.push({ text, link })
+  })
+  return data.filter((itemStr) => itemStr.text !== 'Overview 组件总览')
+}
+
+function chunk(array, size) {
+  const result = []
+  for (let i = 0; i < array.length; i += size) {
+    result.push(array.slice(i, i + size))
+  }
+  return result
+}
+
+async function loadBaseDataByMenus(menus) {
+  let result = []
+  for (let i = 0; i < menus.length; i++) {
+    const menu = menus[i]
+    const response = await axios.get(menu.link)
+    const html = response.data
+    const $ = cheerio.load(html)
+    const sidebarItems = $('.vp-table')
+    const tables = []
+    let objName = {
+      name: menu.text,
+      tables
+    }
+    sidebarItems.each((index, table) => {
+      const thItems = $(table).find('tr th')
+      const thtdItems = $(table).find('tr td')
+      const headers = []
+      let wrapBodys = []
+      const bodys = []
+      const tableObj = { headers, bodys: [] }
+      thItems.each((i, th) => {
+        headers.push($(th).text().trim())
+      })
+      thtdItems.each((i, th) => {
+        bodys.push($(th).text().trim())
+      })
+      wrapBodys = chunk(bodys, headers.length)
+      tableObj.bodys = wrapBodys
+      tables.push(tableObj)
+    })
+    result.push(objName)
+  }
+  return result
+}
+
+function generateJSONFile(jsonData, fileName = 'output.json', filePath = './') {
+  const jsonString = JSON.stringify(jsonData, null, 2)
+  const fullFilePath = filePath.endsWith('/') ? filePath + fileName : filePath + '/' + fileName
+  fs.writeFile(fullFilePath, jsonString, 'utf8', (err) => {
+    if (err) {
+      console.error('写入文件时出错：', err)
+    } else {
+      console.log(`JSON 数据已成功写入到文件 ${fullFilePath}`)
+    }
+  })
+}
+
+async function generateComponent(params) {
+  const components = []
+
+  for (let i = 0; i < params.length; i++) {
+    const param = params[i]
+
+    const cleanedName = param.name.replace(/^\w+\s+/, '')
+
+    const component = {
+      id: components.length + 1,
+      version: VERSION,
+      name: { zh_CN: cleanedName },
+      component: param.name,
+      icon: '',
+      description: '',
+      doc_url: param.tables.length > 0 ? param.tables[0].link : '',
+      screenshot: '',
+      tags: '',
+      keywords: '',
+      dev_mode: 'proCode',
+      npm: {
+        package: 'element-plus',
+        version: VERSION,
+        exportName: param.name,
+        main: 'lib/index.js',
+        destructuring: true,
+        subName: ''
+      },
+      group: '',
+      category: 'element-plus',
+      configure: {},
+      schema: {}
+    }
+    components.push(component)
+  }
+  return components
+}
+
+async function generateSnippets(params) {
+  const snippets = []
+
+  for (let i = 0; i < params.length; i++) {
+    const param = params[i]
+    const snippet = {
+      id: snippets.length + 1,
+      name: { zh_CN: `使用${param.name}` },
+      description: `如何在Vue中使用${param.name}`,
+      code: `<template>\n  <${param.name}></${param.name}>\n</template>`,
+      language: 'Vue'
+    }
+    snippets.push(snippet)
+  }
+  return snippets
+}
+
+async function generateMaterial(params) {
+  const components = await generateComponent(params)
+  const blocks = []
+  const snippets = await generateSnippets(params)
+  const result = {
+    framework: 'Vue',
+    materials: {
+      components,
+      blocks,
+      snippets
+    }
+  }
+  return result
+}
+
+async function main() {
+  try {
+    const menus = await loadMenuData()
+    const x = await loadBaseDataByMenus(menus)
+    const m = await generateMaterial(x)
+    generateJSONFile({ data: m }, 'bundle.json', './')
+  } catch (error) {
+    console.error('Error in main function:', error)
+  }
+}
+
+main()

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/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>