fix(vue-generator): adapt for more scenario

opentiny · Mar 30, 2024 · f1259d3 · f1259d3
1 parent f794a0e
commit f1259d3
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 21 deletions.
diff --git a/packages/toolbars/generate-vue/src/Main.vue b/packages/toolbars/generate-vue/src/Main.vue
@@ -109,11 +109,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)
         }
       })
 
@@ -161,6 +167,19 @@ export default {
       }
     })
 
+    const getAllPageDetails = async (pageList) => {
+      const detailPromise = pageList.map(({ id }) => useLayout().getPluginApi('AppManage').getPageById(id))
+      const detailList = await Promise.allSettled(detailPromise)
+
+      return detailList
+        .map((item) => {
+          if (item.status === 'fulfilled' && item.value) {
+            return item.value
+          }
+        })
+        .filter((item) => Boolean(item))
+    }
+
     const getPreGenerateInfo = async () => {
       const params = getParams()
       const { id } = useEditorInfo().useInfo()
@@ -175,23 +194,24 @@ export default {
       }
 
       const [appData, metaData, pageList, dirHandle] = await Promise.all(promises)
+      const pageDetailList = await getAllPageDetails(pageList)
 
       const blockSet = new Set()
-      const list = pageList.map((page) => getBlocksSchema(page.page_content, blockSet))
+      const list = pageDetailList.map((page) => getBlocksSchema(page.page_content, blockSet))
       const blocks = await Promise.allSettled(list)
 
       const blockSchema = []
       blocks.forEach((item) => {
         if (item.status === 'fulfilled' && Array.isArray(item.value)) {
-          blockSchema.push(...blockSchema)
+          blockSchema.push(...item.value)
         }
       })
 
       const appSchema = {
         // dataSource、utils、i18n、globalState
         ...metaData,
         // 页面 schema
-        pageSchema: pageList.map((item) => {
+        pageSchema: pageDetailList.map((item) => {
           const { page_content, ...meta } = item
 
           return {

diff --git a/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js b/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js
@@ -69,6 +69,9 @@ const generateSFCFile = (schema, componentsMap, config = {}) => {
   const parsedConfig = parseConfig(config)
   const { blockRelativePath, blockSuffix, scriptConfig: initScriptConfig, styleConfig: initStyleConfig } = parsedConfig
   // 前置动作，对 Schema 进行解析初始化相关配置与变量
+  if (!schema.state) {
+    schema.state = {}
+  }
 
   // 解析 import
   const { pkgMap, blockPkgMap } = getImportMap(schema, componentsMap, { blockRelativePath, blockSuffix })

diff --git a/packages/vue-generator/src/generator/vue/sfc/generateTag.js b/packages/vue-generator/src/generator/vue/sfc/generateTag.js
@@ -1,6 +1,6 @@
 import { hyphenate } from '@vue/shared'
 
-const HTML_DEFAULT_VOID_ELEMENTS = [
+export const HTML_DEFAULT_VOID_ELEMENTS = [
   'img',
   'input',
   'br',
@@ -38,7 +38,7 @@ export const generateTag = (tagName, config = {}) => {
   }
 
   if (isVoidEle) {
-    return `<${renderTagName} />`
+    return `<${renderTagName} ${attribute || ''}/>`
   }
 
   if (isStartTag) {

diff --git a/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js b/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js
@@ -6,23 +6,27 @@ import {
   JS_EXPRESSION,
   JS_I18N
 } from '@/constant'
-import { generateTag } from './generateTag'
+import { generateTag, HTML_DEFAULT_VOID_ELEMENTS } from './generateTag'
 import { thisPropsBindRe, thisRegexp } from '@/utils'
 
-export const handleComponentNameHook = (nameObj) => {
-  const { componentName, schema } = nameObj
+export const handleComponentNameHook = (optionData) => {
+  const { componentName, schema } = optionData
 
   // 内置 component
   if (!BUILTIN_COMPONENT_NAME_MAP[componentName]) {
     return
   }
 
   if (componentName === BUILTIN_COMPONENT_NAME.TEXT && schema.props.text) {
-    schema.children = [schema.props.text]
+    schema.children = schema.props.text
     delete schema.props.text
   }
 
-  nameObj.componentName = BUILTIN_COMPONENT_NAME_MAP[componentName]
+  optionData.componentName = BUILTIN_COMPONENT_NAME_MAP[componentName]
+
+  if (HTML_DEFAULT_VOID_ELEMENTS.includes(componentName)) {
+    optionData.voidElement = true
+  }
 }
 
 export const handleTinyIcon = (nameObj, globalHooks) => {

diff --git a/packages/vue-generator/src/generator/vue/sfc/parseImport.js b/packages/vue-generator/src/generator/vue/sfc/parseImport.js
@@ -42,11 +42,12 @@ export const getImportMap = (schema, componentsMap, config) => {
     pkgMap[key].push(item)
   })
 
-  const { blockRelativePath = '../components/', blockSuffix = '.vue' } = config
+  const { blockRelativePath = '../components', blockSuffix = '.vue' } = config
   const blockPkgMap = {}
+  const relativePath = blockRelativePath.endsWith('/') ? blockRelativePath.slice(0, -1) : blockRelativePath
 
   blocks.map((name) => {
-    const source = `${blockRelativePath}/${name}${blockSuffix}`
+    const source = `${relativePath}/${name}${blockSuffix}`
 
     blockPkgMap[source] = blockPkgMap[source] || []
     blockPkgMap[source].push({

diff --git a/packages/vue-generator/src/plugins/genBlockPlugin.js b/packages/vue-generator/src/plugins/genBlockPlugin.js
@@ -33,7 +33,7 @@ function genBlockPlugin(options = {}) {
 
         resBlocks.push({
           fileType: 'vue',
-          fileName: `${block.componentName}.vue`,
+          fileName: `${block.fileName}.vue`,
           path: blockBasePath,
           fileContent: res
         })

diff --git a/scripts/setup.js b/scripts/setup.js
@@ -1,9 +1,3 @@
 const { exec } = require('child_process')
-const fs = require('fs')
-const path = require('path')
 
-fs.access(path.resolve(__dirname, 'packages/vue-generator/dist'), (err) => {
-  if (err) {
-    exec('pnpm -F @opentiny/tiny-engine-dsl-vue build')
-  }
-})
+exec('pnpm -F @opentiny/tiny-engine-dsl-vue build')