From 9e13daf4640c31c66a500884448c0d508e1d86dc Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sat, 29 Jun 2024 20:57:19 -0700
Subject: [PATCH 1/6] feat: add generate code service

---
 designer-demo/registry.js                     |   4 +-
 designer-demo/src/preview.js                  |   8 +-
 .../src/vite-plugins/devAliasPlugin.js        |   6 +-
 packages/design-core/index.js                 |   1 +
 packages/design-core/package.json             |   2 +-
 .../design-core/src/preview/src/Toolbar.vue   |  11 +-
 .../src/preview/src/preview/Preview.vue       |  38 +----
 .../engine-cli/template/designer/registry.js  |   5 +-
 .../template/designer/src/preview.js          |   6 +-
 packages/service/generateCode/README.md       | 133 ++++++++++++++++++
 packages/service/generateCode/package.json    |  31 ++++
 packages/service/generateCode/src/index.js    |  65 +++++++++
 packages/service/generateCode/vite.config.js  |  30 ++++
 packages/toolbars/generate-vue/package.json   |   1 -
 packages/toolbars/generate-vue/src/Main.vue   |  43 +-----
 packages/vue-generator/index.js               |   5 -
 packages/vue-generator/meta.js                |   4 -
 17 files changed, 301 insertions(+), 92 deletions(-)
 create mode 100644 packages/service/generateCode/README.md
 create mode 100644 packages/service/generateCode/package.json
 create mode 100644 packages/service/generateCode/src/index.js
 create mode 100644 packages/service/generateCode/vite.config.js
 delete mode 100644 packages/vue-generator/index.js
 delete mode 100644 packages/vue-generator/meta.js

diff --git a/designer-demo/registry.js b/designer-demo/registry.js
index d4554db722..882460061c 100644
--- a/designer-demo/registry.js
+++ b/designer-demo/registry.js
@@ -44,6 +44,7 @@ import {
   Canvas,
   EditorInfoService,
   AppService,
+  generateCodeService
 } from '@opentiny/tiny-engine'
 
 export default {
@@ -51,7 +52,8 @@ export default {
     id: 'engine.root',
     metas: [
       EditorInfoService,
-      AppService
+      AppService,
+      generateCodeService
     ]
   },
   config: {
diff --git a/designer-demo/src/preview.js b/designer-demo/src/preview.js
index 3fc45bd530..b07973b7d3 100644
--- a/designer-demo/src/preview.js
+++ b/designer-demo/src/preview.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { initHook, HOOK_NAME } from '@opentiny/tiny-engine'
+import { initHook, HOOK_NAME, generateCodeService } from '@opentiny/tiny-engine'
 import { initPreview } from '@opentiny/tiny-engine'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
@@ -21,6 +21,12 @@ const beforeAppCreate = () => {
 
 initPreview({
   registry: {
+    root: {
+      id: 'engine.root',
+      metas: [
+        generateCodeService
+      ]
+    },
     config: { id : 'engine.config', theme: 'light' },
   },
   lifeCycles: {
diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js
index 52af4bb401..d2eab80325 100644
--- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js
+++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js
@@ -57,7 +57,11 @@ const devAlias = {
   '@opentiny/tiny-engine-builtin-component': path.resolve(process.cwd(), '../packages/builtinComponent/index.js'),
   '@opentiny/tiny-engine-meta-register': path.resolve(process.cwd(), '../packages/register/src/index.js'),
   '@opentiny/tiny-engine-layout': path.resolve(process.cwd(), '../packages/layout/index.js'),
-  '@opentiny/tiny-engine-configurator': path.resolve(process.cwd(), '../packages/configurator/src/index.js')
+  '@opentiny/tiny-engine-configurator': path.resolve(process.cwd(), '../packages/configurator/src/index.js'),
+  '@opentiny/tiny-engine-service-generate-code': path.resolve(
+    process.cwd(),
+    '../packages/service/generateCode/src/index.js'
+  )
 }
 
 /**
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 1558fd8d02..aedb6ada68 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -33,6 +33,7 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
+export { generateCodeService } from '@opentiny/tiny-engine-service-generate-code'
 
 export { default as defaultRegistry } from './registry'
 
diff --git a/packages/design-core/package.json b/packages/design-core/package.json
index 8812d3a7ef..47bce064c3 100644
--- a/packages/design-core/package.json
+++ b/packages/design-core/package.json
@@ -49,7 +49,6 @@
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
-    "@opentiny/tiny-engine-dsl-vue": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-plugin-block": "workspace:*",
@@ -91,6 +90,7 @@
     "@opentiny/tiny-engine-toolbar-setting": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/tiny-engine-webcomponent-core": "workspace:*",
+    "@opentiny/tiny-engine-service-generate-code": "workspace:*",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/repl": "^2.9.0",
     "@vueuse/core": "^9.6.0",
diff --git a/packages/design-core/src/preview/src/Toolbar.vue b/packages/design-core/src/preview/src/Toolbar.vue
index 4000bbe58a..51e14c2ac9 100644
--- a/packages/design-core/src/preview/src/Toolbar.vue
+++ b/packages/design-core/src/preview/src/Toolbar.vue
@@ -15,10 +15,10 @@
 
 <script lang="jsx">
 import { defineAsyncComponent } from 'vue'
-import { useBreadcrumb } from '@opentiny/tiny-engine-controller'
+// import { useBreadcrumb } from '@opentiny/tiny-engine-entry'
 import { getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
 import { Switch as TinySwitch } from '@opentiny/vue'
-import { getSearchParams } from './preview/http'
+// import { getSearchParams } from './preview/http'
 import { BROADCAST_CHANNEL } from '../src/preview/srcFiles/constant'
 import { injectDebugSwitch } from './preview/debugSwitch'
 import BreadcrumbPlugin from '@opentiny/tiny-engine-toolbar-breadcrumb'
@@ -45,9 +45,10 @@ export default {
       MediaPlugin.component
     ]
 
-    const { setBreadcrumbPage } = useBreadcrumb()
-    const { pageInfo } = getSearchParams()
-    setBreadcrumbPage([pageInfo?.name])
+    // FIXME: 这里 breadcrumb 改错了，移动到了 canvas 里面，实际属于 toolbar/breadcrumb
+    // const { setBreadcrumbPage } = useBreadcrumb()
+    // const { pageInfo } = getSearchParams()
+    // setBreadcrumbPage([pageInfo?.name])
 
     const setViewPort = (item) => {
       const iframe = document.getElementsByClassName('iframe-container')[0]
diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue
index 20aa6db133..c17edf39fd 100644
--- a/packages/design-core/src/preview/src/preview/Preview.vue
+++ b/packages/design-core/src/preview/src/preview/Preview.vue
@@ -18,7 +18,7 @@ import { defineComponent, computed, defineAsyncComponent } from 'vue'
 import { Repl, ReplStore } from '@vue/repl'
 import vueJsx from '@vue/babel-plugin-jsx'
 import { transformSync } from '@babel/core'
-import { genSFCWithDefaultPlugin, parseRequiredBlocks } from '@opentiny/tiny-engine-dsl-vue'
+import { getPluginApi } from '@opentiny/tiny-engine-entry'
 import { getImportMap as getInitImportMap } from './importMap'
 import srcFiles from './srcFiles'
 import generateMetaFiles, { processAppJsCode } from './generate'
@@ -69,33 +69,6 @@ export default {
       const newImportMap = { imports: { ...importMap.imports, ...utilsImportMaps } }
       store.setImportMap(newImportMap)
     }
-    const getBlocksSchema = async (pageSchema, blockSet = new Set()) => {
-      let res = []
-
-      const blockNames = parseRequiredBlocks(pageSchema)
-      const promiseList = blockNames
-        .filter((name) => {
-          if (blockSet.has(name)) {
-            return false
-          }
-
-          blockSet.add(name)
-
-          return true
-        })
-        .map((name) => fetchBlockSchema(name))
-
-      const schemaList = await Promise.allSettled(promiseList)
-
-      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))
-        }
-      })
-
-      return res
-    }
 
     const queryParams = getSearchParams()
     const getImportMap = async () => {
@@ -120,7 +93,9 @@ export default {
     Promise.all(promiseList).then(async ([appData, metaData, _void, importMapData]) => {
       addUtilsImportMap(importMapData, metaData.utils || [])
 
-      const blocks = await getBlocksSchema(queryParams.pageInfo?.schema)
+      const { getAllNestedBlocksSchema, generatePageCode } = getPluginApi('engine.service.generateCode')
+
+      const blocks = await getAllNestedBlocksSchema(queryParams.pageInfo?.schema, fetchBlockSchema)
 
       // TODO: 需要验证级联生成 block schema
       // TODO: 物料内置 block 需要如何处理？
@@ -128,7 +103,7 @@ export default {
         {
           panelName: 'Main.vue',
           panelValue:
-            genSFCWithDefaultPlugin(queryParams.pageInfo?.schema, appData?.componentsMap || [], {
+            generatePageCode(queryParams.pageInfo?.schema, appData?.componentsMap || [], {
               blockRelativePath: './'
             }) || '',
           panelType: 'vue',
@@ -137,8 +112,7 @@ export default {
         ...(blocks || []).map((blockSchema) => {
           return {
             panelName: blockSchema.fileName,
-            panelValue:
-              genSFCWithDefaultPlugin(blockSchema, appData?.componentsMap || [], { blockRelativePath: './' }) || '',
+            panelValue: generatePageCode(blockSchema, appData?.componentsMap || [], { blockRelativePath: './' }) || '',
             panelType: 'vue',
             index: true
           }
diff --git a/packages/engine-cli/template/designer/registry.js b/packages/engine-cli/template/designer/registry.js
index afacc37d59..0e67d4a496 100644
--- a/packages/engine-cli/template/designer/registry.js
+++ b/packages/engine-cli/template/designer/registry.js
@@ -43,13 +43,14 @@ import {
   Layout,
   Canvas,
   EditorInfoService,
-  AppService
+  AppService,
+  generateCodeService
 } from '@opentiny/tiny-engine'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [EditorInfoService, AppService]
+    metas: [EditorInfoService, AppService, generateCodeService]
   },
   config: {
     id: 'engine.config',
diff --git a/packages/engine-cli/template/designer/src/preview.js b/packages/engine-cli/template/designer/src/preview.js
index 21d79b799e..ffa9177e38 100644
--- a/packages/engine-cli/template/designer/src/preview.js
+++ b/packages/engine-cli/template/designer/src/preview.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { initHook, HOOK_NAME } from '@opentiny/tiny-engine'
+import { initHook, HOOK_NAME, generateCodeService } from '@opentiny/tiny-engine'
 import { initPreview } from '@opentiny/tiny-engine'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
@@ -21,6 +21,10 @@ const beforeAppCreate = () => {
 
 initPreview({
   registry: {
+    root: {
+      id: 'engine.root',
+      metas: [generateCodeService]
+    },
     config: { id: 'engine.config', theme: 'light' }
   },
   lifeCycles: {
diff --git a/packages/service/generateCode/README.md b/packages/service/generateCode/README.md
new file mode 100644
index 0000000000..29dce210c4
--- /dev/null
+++ b/packages/service/generateCode/README.md
@@ -0,0 +1,133 @@
+# 出码元服务
+
+> 即出码适配层，官方的出码插件、页面预览会调用该  service 得到出码的结果
+
+## 注册该 service
+
+```javascript
+import { generateCodeService } from '@opentiny/tiny-engine'
+
+// 注册元服务
+init({
+  registry: {
+    root: {
+      id: 'engine.root',
+      metas: [
+        // 这里注入 出码元服务
+        generateCodeService
+        // ... 其他元服务
+      ]
+    },
+    // ... other config or registry
+  }
+})
+```
+
+## 使用该 service
+
+```javascript
+import { getPluginApi } from '@opentiny/tiny-engine-entry'
+
+// 通过 id 得到出码元服务
+const generateCodeService = getPluginApi('engine.service.generateCode')
+
+// 调用 api 得到页面出码结果
+generateCodeService.generatePageCode(...args)
+```
+
+## 出码 service 官方 api
+
+### parseRequiredBlocks
+
+> api功能：解析页面 schema 或者 区块 schema 中依赖的区块
+
+类型：
+
+```typescript
+// 页面或者区块 schema，这里类型省略其他属性
+interface IPageOrBlockSchema {
+  componentName?: string;
+  componentType?: 'Block'
+  children: IPageOrBlockSchema[]
+}
+
+function parseRequiredBlocks(schema: IPageOrBlockSchema): string[]
+```
+
+
+### getAllNestedBlocksSchema
+
+> api 功能：递归解析页面 schema 或者区块 schema 中依赖的区块，并返回所有依赖区块的 schema
+
+类型：
+
+```typescript
+function getAllNestedBlocksSchema(pageSchema: IPageOrBlockSchema, fetchBlockSchemaApi: Promise<IPageOrBlockSchema>, blockSet: Set<string>): IPageOrBlockSchema[]
+```
+
+### generatePageCode
+
+> api 功能：单页面或者区块出码
+
+类型：
+
+```typescript
+interface IComponentMapItem {
+  componentName: string
+  destructuring: boolean
+  exportName?: string
+  package?: string
+  version: string
+}
+function generatePageCode(schema: IPageOrBlockSchema, componentsMap: IComponentMapItem[], config: object): string
+```
+
+### generateAppCode
+
+> api 功能：应用出码
+
+类型：
+```typescript
+// 可查看 https://github.com/opentiny/tiny-engine/blob/develop/packages/vue-generator/src/index.d.ts
+// appSchema 为应用 schema IAppSchema
+// options 为实例化配置 IConfig
+function generateAppCode(appSchema:IAppSchema, options: IConfig): ICodeGenResult
+```
+
+## 替换该 service
+
+如果您发现官方的出码并不能满足您的需求，您可以同样定制自己的出码 service。
+
+替换要求：
+- 自定义实现官方出码 service 的 api（parseRequiredBlocks、getAllNestedBlocksSchema、generatePageCode、generateAppCode），要求出参与入参一致
+- id 与 官方出码 service id 一致，即为：engine.service.generateCode
+
+最后，同样往注册表注入该 service 即可：
+
+```javascript
+export const generateCodeService = {
+  id: 'engine.service.generateCode',
+  type: 'MetaService',
+  options: {},
+  apis: {
+    parseRequiredBlocks: xxx自定义实现,
+    getAllNestedBlocksSchema: xxx 自定义实现,
+    generatePageCode: xxx 自定义实现,
+    generateAppCode:xxx 自定义实现
+  }
+}
+
+init({
+  registry: {
+    root: {
+      id: 'engine.root',
+      metas: [
+        // 自定义的出码元服务
+        generateCodeService
+      ]
+    },
+  }
+})
+```
+
+
diff --git a/packages/service/generateCode/package.json b/packages/service/generateCode/package.json
new file mode 100644
index 0000000000..e0fe33a46b
--- /dev/null
+++ b/packages/service/generateCode/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@opentiny/tiny-engine-service-generate-code",
+  "version": "1.0.0",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opentiny/tiny-engine",
+    "directory": "packages/plugins/generateCode"
+  },
+  "bugs": {
+    "url": "https://github.com/opentiny/tiny-engine/issues"
+  },
+  "author": "OpenTiny Team",
+  "license": "MIT",
+  "homepage": "https://opentiny.design/tiny-engine",
+  "dependencies": {
+    "@opentiny/tiny-engine-dsl-vue": "workspace:*"
+  }
+}
diff --git a/packages/service/generateCode/src/index.js b/packages/service/generateCode/src/index.js
new file mode 100644
index 0000000000..0c4be15bf0
--- /dev/null
+++ b/packages/service/generateCode/src/index.js
@@ -0,0 +1,65 @@
+import { generateApp, parseRequiredBlocks, genSFCWithDefaultPlugin } from '@opentiny/tiny-engine-dsl-vue'
+
+// 应用出码
+const generateAppCode = async (appSchema, options = {}) => {
+  const instance = generateApp(options)
+
+  return instance.generate(appSchema)
+}
+
+// 页面出码
+const generatePageCode = (...args) => {
+  return genSFCWithDefaultPlugin(...args)
+}
+
+/**
+ * 获取所有嵌套的区块 schema
+ * @param {*} pageSchema 页面 schema
+ * @param {*} fetchBlockSchemaApi 获取 blockSchema 的 api
+ * @param {*} blockSet 已经获取的区块 set，默认不需要传
+ * @returns
+ */
+const getAllNestedBlocksSchema = async (pageSchema, fetchBlockSchemaApi, blockSet = new Set()) => {
+  let res = []
+
+  const blockNames = parseRequiredBlocks(pageSchema)
+  const promiseList = blockNames
+    .filter((name) => {
+      if (blockSet.has(name)) {
+        return false
+      }
+
+      blockSet.add(name)
+
+      return true
+    })
+    .map((name) => fetchBlockSchemaApi(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)
+      extraList.push(getAllNestedBlocksSchema(item.value[0].content, fetchBlockSchemaApi, blockSet))
+    }
+  })
+  ;(await Promise.allSettled(extraList)).forEach((item) => {
+    if (item.status === 'fulfilled' && item.value) {
+      res.push(...item.value)
+    }
+  })
+
+  return res
+}
+
+export const generateCodeService = {
+  id: 'engine.service.generateCode',
+  type: 'MetaService',
+  options: {},
+  apis: {
+    parseRequiredBlocks,
+    getAllNestedBlocksSchema,
+    generatePageCode,
+    generateAppCode
+  }
+}
diff --git a/packages/service/generateCode/vite.config.js b/packages/service/generateCode/vite.config.js
new file mode 100644
index 0000000000..e390de3cad
--- /dev/null
+++ b/packages/service/generateCode/vite.config.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { defineConfig } from 'vite'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  publicDir: false,
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, './src/index.js'),
+      fileName: () => 'index.js',
+      formats: ['es']
+    },
+    rollupOptions: {
+      sourcemap: true,
+      external: ['@babel/parser', '@babel/traverse']
+    }
+  }
+})
diff --git a/packages/toolbars/generate-vue/package.json b/packages/toolbars/generate-vue/package.json
index f9708f4769..f640ccb2c2 100644
--- a/packages/toolbars/generate-vue/package.json
+++ b/packages/toolbars/generate-vue/package.json
@@ -26,7 +26,6 @@
   "dependencies": {
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
-    "@opentiny/tiny-engine-dsl-vue": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "prettier": "2.7.1",
diff --git a/packages/toolbars/generate-vue/src/Main.vue b/packages/toolbars/generate-vue/src/Main.vue
index cd9bdce68b..ded29ad814 100644
--- a/packages/toolbars/generate-vue/src/Main.vue
+++ b/packages/toolbars/generate-vue/src/Main.vue
@@ -24,10 +24,9 @@
 import { reactive } from 'vue'
 import { Popover } from '@opentiny/vue'
 import { useBlock, useCanvas, useNotify, useLayout, useEditorInfo } from '@opentiny/tiny-engine-controller'
-import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import { getMergeMeta, getPluginApi } from '@opentiny/tiny-engine-meta-register'
 import { fs } from '@opentiny/tiny-engine-utils'
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { generateApp, parseRequiredBlocks } from '@opentiny/tiny-engine-dsl-vue'
 import { fetchMetaData, fetchPageList, fetchBlockSchema } from './http'
 import FileSelector from './FileSelector.vue'
 
@@ -87,40 +86,7 @@ export default {
       }
     }
 
-    const getBlocksSchema = async (pageSchema, blockSet = new Set()) => {
-      let res = []
-
-      const blockNames = parseRequiredBlocks(pageSchema)
-      const promiseList = blockNames
-        .filter((name) => {
-          if (blockSet.has(name)) {
-            return false
-          }
-
-          blockSet.add(name)
-
-          return true
-        })
-        .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)
-          extraList.push(getBlocksSchema(item.value[0].content, blockSet))
-        }
-      })
-      ;(await Promise.allSettled(extraList)).forEach((item) => {
-        if (item.status === 'fulfilled' && item.value) {
-          res.push(...item.value)
-        }
-      })
-
-      return res
-    }
-
-    const instance = generateApp()
+    const { getAllNestedBlocksSchema, generateAppCode } = getPluginApi('engine.service.generateCode')
 
     const getAllPageDetails = async (pageList) => {
       const { PLUGIN_NAME, getPluginApi } = useLayout()
@@ -152,8 +118,9 @@ export default {
       const [appData, metaData, pageList, dirHandle] = await Promise.all(promises)
       const pageDetailList = await getAllPageDetails(pageList)
 
+      // 这里需要手动传入 blockSet 的原因是多页面可能会存在重复的区块
       const blockSet = new Set()
-      const list = pageDetailList.map((page) => getBlocksSchema(page.page_content, blockSet))
+      const list = pageDetailList.map((page) => getAllNestedBlocksSchema(page.page_content, fetchBlockSchema, blockSet))
       const blocks = await Promise.allSettled(list)
 
       const blockSchema = []
@@ -187,7 +154,7 @@ export default {
         }
       }
 
-      const res = await instance.generate(appSchema)
+      const res = await generateAppCode(appSchema)
 
       const { genResult = [] } = res || {}
       const fileRes = genResult.map(({ fileContent, fileName, path, fileType }) => {
diff --git a/packages/vue-generator/index.js b/packages/vue-generator/index.js
deleted file mode 100644
index dcf78045fa..0000000000
--- a/packages/vue-generator/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import metaData from './meta'
-
-export default {
-  ...metaData
-}
diff --git a/packages/vue-generator/meta.js b/packages/vue-generator/meta.js
deleted file mode 100644
index 2b15a8094c..0000000000
--- a/packages/vue-generator/meta.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  id: 'engine.vueGenerator',
-  type: 'vueGenerator'
-}

From 73a8f2b0ac2b1cde64dc4122627845bb6551739b Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sat, 29 Jun 2024 23:15:56 -0700
Subject: [PATCH 2/6] feat: move gencodeservice to common package

---
 .../src/vite-plugins/devAliasPlugin.js        |  6 +---
 .../composable}/generateCode/README.md        |  0
 .../composable/generateCode}/index.js         |  0
 packages/common/vite.config.js                | 10 +++++-
 packages/design-core/index.js                 |  2 +-
 packages/design-core/package.json             |  1 -
 packages/service/generateCode/package.json    | 31 -------------------
 packages/service/generateCode/vite.config.js  | 30 ------------------
 8 files changed, 11 insertions(+), 69 deletions(-)
 rename packages/{service => common/composable}/generateCode/README.md (100%)
 rename packages/{service/generateCode/src => common/composable/generateCode}/index.js (100%)
 delete mode 100644 packages/service/generateCode/package.json
 delete mode 100644 packages/service/generateCode/vite.config.js

diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js
index d2eab80325..52af4bb401 100644
--- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js
+++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js
@@ -57,11 +57,7 @@ const devAlias = {
   '@opentiny/tiny-engine-builtin-component': path.resolve(process.cwd(), '../packages/builtinComponent/index.js'),
   '@opentiny/tiny-engine-meta-register': path.resolve(process.cwd(), '../packages/register/src/index.js'),
   '@opentiny/tiny-engine-layout': path.resolve(process.cwd(), '../packages/layout/index.js'),
-  '@opentiny/tiny-engine-configurator': path.resolve(process.cwd(), '../packages/configurator/src/index.js'),
-  '@opentiny/tiny-engine-service-generate-code': path.resolve(
-    process.cwd(),
-    '../packages/service/generateCode/src/index.js'
-  )
+  '@opentiny/tiny-engine-configurator': path.resolve(process.cwd(), '../packages/configurator/src/index.js')
 }
 
 /**
diff --git a/packages/service/generateCode/README.md b/packages/common/composable/generateCode/README.md
similarity index 100%
rename from packages/service/generateCode/README.md
rename to packages/common/composable/generateCode/README.md
diff --git a/packages/service/generateCode/src/index.js b/packages/common/composable/generateCode/index.js
similarity index 100%
rename from packages/service/generateCode/src/index.js
rename to packages/common/composable/generateCode/index.js
diff --git a/packages/common/vite.config.js b/packages/common/vite.config.js
index 16675447a5..d323dacfe4 100644
--- a/packages/common/vite.config.js
+++ b/packages/common/vite.config.js
@@ -41,7 +41,15 @@ export default defineConfig({
           return ''
         }
       },
-      external: ['vue', 'monaco-editor', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/, /^prettier.*/]
+      external: [
+        'vue',
+        'monaco-editor',
+        /@opentiny\/tiny-engine.*/,
+        /@opentiny\/vue.*/,
+        /^prettier.*/,
+        '@babel/parser',
+        '@babel/traverse'
+      ]
     }
   }
 })
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index aedb6ada68..4cc1593747 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -33,7 +33,7 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
-export { generateCodeService } from '@opentiny/tiny-engine-service-generate-code'
+// export { generateCodeService } from '@opentiny/tiny-engine-service-generate-code'
 
 export { default as defaultRegistry } from './registry'
 
diff --git a/packages/design-core/package.json b/packages/design-core/package.json
index 47bce064c3..12b9591fce 100644
--- a/packages/design-core/package.json
+++ b/packages/design-core/package.json
@@ -90,7 +90,6 @@
     "@opentiny/tiny-engine-toolbar-setting": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/tiny-engine-webcomponent-core": "workspace:*",
-    "@opentiny/tiny-engine-service-generate-code": "workspace:*",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/repl": "^2.9.0",
     "@vueuse/core": "^9.6.0",
diff --git a/packages/service/generateCode/package.json b/packages/service/generateCode/package.json
deleted file mode 100644
index e0fe33a46b..0000000000
--- a/packages/service/generateCode/package.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "name": "@opentiny/tiny-engine-service-generate-code",
-  "version": "1.0.0",
-  "description": "",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "scripts": {
-    "build": "vite build",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/opentiny/tiny-engine",
-    "directory": "packages/plugins/generateCode"
-  },
-  "bugs": {
-    "url": "https://github.com/opentiny/tiny-engine/issues"
-  },
-  "author": "OpenTiny Team",
-  "license": "MIT",
-  "homepage": "https://opentiny.design/tiny-engine",
-  "dependencies": {
-    "@opentiny/tiny-engine-dsl-vue": "workspace:*"
-  }
-}
diff --git a/packages/service/generateCode/vite.config.js b/packages/service/generateCode/vite.config.js
deleted file mode 100644
index e390de3cad..0000000000
--- a/packages/service/generateCode/vite.config.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2023 - present TinyEngine Authors.
- * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-import { defineConfig } from 'vite'
-import path from 'path'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  publicDir: false,
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, './src/index.js'),
-      fileName: () => 'index.js',
-      formats: ['es']
-    },
-    rollupOptions: {
-      sourcemap: true,
-      external: ['@babel/parser', '@babel/traverse']
-    }
-  }
-})

From ca63dc95d0575e36cf7411a3bfd3960bd11989a5 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sat, 29 Jun 2024 23:29:09 -0700
Subject: [PATCH 3/6] fix: change gencodeservice name

---
 designer-demo/registry.js                        | 4 ++--
 designer-demo/src/preview.js                     | 4 ++--
 packages/common/composable/generateCode/index.js | 2 +-
 packages/common/composable/index.js              | 2 ++
 packages/common/package.json                     | 1 +
 packages/design-core/index.js                    | 2 +-
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/designer-demo/registry.js b/designer-demo/registry.js
index 882460061c..5605184475 100644
--- a/designer-demo/registry.js
+++ b/designer-demo/registry.js
@@ -44,7 +44,7 @@ import {
   Canvas,
   EditorInfoService,
   AppService,
-  generateCodeService
+  GenerateCodeService
 } from '@opentiny/tiny-engine'
 
 export default {
@@ -53,7 +53,7 @@ export default {
     metas: [
       EditorInfoService,
       AppService,
-      generateCodeService
+      GenerateCodeService
     ]
   },
   config: {
diff --git a/designer-demo/src/preview.js b/designer-demo/src/preview.js
index b07973b7d3..e63201a191 100644
--- a/designer-demo/src/preview.js
+++ b/designer-demo/src/preview.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { initHook, HOOK_NAME, generateCodeService } from '@opentiny/tiny-engine'
+import { initHook, HOOK_NAME, GenerateCodeService } from '@opentiny/tiny-engine'
 import { initPreview } from '@opentiny/tiny-engine'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
@@ -24,7 +24,7 @@ initPreview({
     root: {
       id: 'engine.root',
       metas: [
-        generateCodeService
+        GenerateCodeService
       ]
     },
     config: { id : 'engine.config', theme: 'light' },
diff --git a/packages/common/composable/generateCode/index.js b/packages/common/composable/generateCode/index.js
index 0c4be15bf0..adc433be17 100644
--- a/packages/common/composable/generateCode/index.js
+++ b/packages/common/composable/generateCode/index.js
@@ -52,7 +52,7 @@ const getAllNestedBlocksSchema = async (pageSchema, fetchBlockSchemaApi, blockSe
   return res
 }
 
-export const generateCodeService = {
+export const GenerateCodeService = {
   id: 'engine.service.generateCode',
   type: 'MetaService',
   options: {},
diff --git a/packages/common/composable/index.js b/packages/common/composable/index.js
index 9a5f9b2ddb..75268a70d0 100644
--- a/packages/common/composable/index.js
+++ b/packages/common/composable/index.js
@@ -3,6 +3,8 @@ import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
 import useApp from './useApp'
 import useEditorInfo from './useEditorInfo'
 
+export { GenerateCodeService } from './generateCode'
+
 export const AppService = {
   id: 'engine.service.app',
   type: 'MetaService',
diff --git a/packages/common/package.json b/packages/common/package.json
index 54f85a4131..91973259a3 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -28,6 +28,7 @@
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
     "@opentiny/tiny-engine-controller": "workspace:*",
+    "@opentiny/tiny-engine-dsl-vue": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 4cc1593747..c22e935597 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -33,7 +33,7 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
 export { default as Layout } from '@opentiny/tiny-engine-layout'
 export { default as Canvas } from '@opentiny/tiny-engine-canvas'
 export { initPreview } from './src/preview/src/main'
-// export { generateCodeService } from '@opentiny/tiny-engine-service-generate-code'
+export { GenerateCodeService } from '@opentiny/tiny-engine-common'
 
 export { default as defaultRegistry } from './registry'
 

From 3401be0d31c47b9461f8a3790711650cbafc9058 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sat, 29 Jun 2024 23:40:53 -0700
Subject: [PATCH 4/6] fix: add blank line to md by review comment

---
 packages/common/composable/generateCode/README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/common/composable/generateCode/README.md b/packages/common/composable/generateCode/README.md
index 29dce210c4..29d78fdbf9 100644
--- a/packages/common/composable/generateCode/README.md
+++ b/packages/common/composable/generateCode/README.md
@@ -54,7 +54,6 @@ interface IPageOrBlockSchema {
 function parseRequiredBlocks(schema: IPageOrBlockSchema): string[]
 ```
 
-
 ### getAllNestedBlocksSchema
 
 > api 功能：递归解析页面 schema 或者区块 schema 中依赖的区块，并返回所有依赖区块的 schema
@@ -87,6 +86,7 @@ function generatePageCode(schema: IPageOrBlockSchema, componentsMap: IComponentM
 > api 功能：应用出码
 
 类型：
+
 ```typescript
 // 可查看 https://github.com/opentiny/tiny-engine/blob/develop/packages/vue-generator/src/index.d.ts
 // appSchema 为应用 schema IAppSchema
@@ -99,6 +99,7 @@ function generateAppCode(appSchema:IAppSchema, options: IConfig): ICodeGenResult
 如果您发现官方的出码并不能满足您的需求，您可以同样定制自己的出码 service。
 
 替换要求：
+
 - 自定义实现官方出码 service 的 api（parseRequiredBlocks、getAllNestedBlocksSchema、generatePageCode、generateAppCode），要求出参与入参一致
 - id 与 官方出码 service id 一致，即为：engine.service.generateCode
 
@@ -129,5 +130,3 @@ init({
   }
 })
 ```
-
-

From 0d25aa173072f9ee7cd42f722ed1a9e8eb30c35d Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sat, 29 Jun 2024 23:59:20 -0700
Subject: [PATCH 5/6] fix: update export name on doc

---
 packages/common/composable/generateCode/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/common/composable/generateCode/README.md b/packages/common/composable/generateCode/README.md
index 29d78fdbf9..1500aef172 100644
--- a/packages/common/composable/generateCode/README.md
+++ b/packages/common/composable/generateCode/README.md
@@ -5,7 +5,7 @@
 ## 注册该 service
 
 ```javascript
-import { generateCodeService } from '@opentiny/tiny-engine'
+import { GenerateCodeService } from '@opentiny/tiny-engine'
 
 // 注册元服务
 init({
@@ -14,7 +14,7 @@ init({
       id: 'engine.root',
       metas: [
         // 这里注入 出码元服务
-        generateCodeService
+        GenerateCodeService
         // ... 其他元服务
       ]
     },
@@ -106,7 +106,7 @@ function generateAppCode(appSchema:IAppSchema, options: IConfig): ICodeGenResult
 最后，同样往注册表注入该 service 即可：
 
 ```javascript
-export const generateCodeService = {
+export const GenerateCodeService = {
   id: 'engine.service.generateCode',
   type: 'MetaService',
   options: {},
@@ -124,7 +124,7 @@ init({
       id: 'engine.root',
       metas: [
         // 自定义的出码元服务
-        generateCodeService
+        GenerateCodeService
       ]
     },
   }

From 9f66d58c1754adfa0d49d7a995e9c6588ff5fb13 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sun, 30 Jun 2024 00:11:19 -0700
Subject: [PATCH 6/6] fix: update reference of tiny-engine-entry

---
 packages/common/composable/generateCode/README.md        | 2 +-
 packages/design-core/src/preview/src/Toolbar.vue         | 2 +-
 packages/design-core/src/preview/src/preview/Preview.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/common/composable/generateCode/README.md b/packages/common/composable/generateCode/README.md
index 1500aef172..025a8c8e2b 100644
--- a/packages/common/composable/generateCode/README.md
+++ b/packages/common/composable/generateCode/README.md
@@ -26,7 +26,7 @@ init({
 ## 使用该 service
 
 ```javascript
-import { getPluginApi } from '@opentiny/tiny-engine-entry'
+import { getPluginApi } from '@opentiny/tiny-engine-meta-register'
 
 // 通过 id 得到出码元服务
 const generateCodeService = getPluginApi('engine.service.generateCode')
diff --git a/packages/design-core/src/preview/src/Toolbar.vue b/packages/design-core/src/preview/src/Toolbar.vue
index 51e14c2ac9..2865eb8664 100644
--- a/packages/design-core/src/preview/src/Toolbar.vue
+++ b/packages/design-core/src/preview/src/Toolbar.vue
@@ -15,7 +15,7 @@
 
 <script lang="jsx">
 import { defineAsyncComponent } from 'vue'
-// import { useBreadcrumb } from '@opentiny/tiny-engine-entry'
+// import { useBreadcrumb } from '@opentiny/tiny-engine-meta-register'
 import { getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
 import { Switch as TinySwitch } from '@opentiny/vue'
 // import { getSearchParams } from './preview/http'
diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue
index c17edf39fd..5a81e570aa 100644
--- a/packages/design-core/src/preview/src/preview/Preview.vue
+++ b/packages/design-core/src/preview/src/preview/Preview.vue
@@ -18,7 +18,7 @@ import { defineComponent, computed, defineAsyncComponent } from 'vue'
 import { Repl, ReplStore } from '@vue/repl'
 import vueJsx from '@vue/babel-plugin-jsx'
 import { transformSync } from '@babel/core'
-import { getPluginApi } from '@opentiny/tiny-engine-entry'
+import { getPluginApi } from '@opentiny/tiny-engine-meta-register'
 import { getImportMap as getInitImportMap } from './importMap'
 import srcFiles from './srcFiles'
 import generateMetaFiles, { processAppJsCode } from './generate'