feat: support config treeshaking (#1317)

* feat: support config treeshaking

* fix: async import get default export

Author: chilingling

designer-demo/registry.js

@@ -10,23 +10,22 @@
  *
  */
 import { META_SERVICE } from '@opentiny/tiny-engine-meta-register'
-// import { META_SERVICE } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
 import { HttpService } from './src/composable'
 import scriptPlugin from './src/plugins/script'
-import removedRegistry from './removedRegistry.json'
 
 export default {
   [META_SERVICE.Http]: HttpService,
   'engine.config': {
     ...engineConfig
   },
-  ...removedRegistry,
   // 配置 false 隐藏工具栏清空按钮
-  // 'engine.toolbars.clean': false,
-  // 配置 false 隐藏大纲树
-  // 'engine.plugins.outlinetree': false,
-  // 替换整个页面JS插件
+  'engine.toolbars.clean': false,
+  // 配置 false 隐藏大纲树，手动配置 tree-shaking 为 false，仍然不会被 tree-shaking
+  // #__TINY_ENGINE_TREE_SHAKING__: false
+  'engine.plugins.outlinetree': false,
+  // 替换整个页面JS插件，手动配置 tree-shaking 为 true
+  /* #__TINY_ENGINE_TREE_SHAKING__: true */
   'engine.plugins.pagecontroller': scriptPlugin,
   // 换了个id，代表新增模块
   'engine.plugins.script': {

designer-demo/removedRegistry.json

@@ -11,7 +11,6 @@
  */
 import { defineEntry, tryGetAndDefineHotfixRegistry } from '@opentiny/tiny-engine-meta-register'
 import { configurators } from './configurators/'
-import registry from '../registry'
 
 import 'virtual:svg-icons-register'
 
@@ -25,15 +24,13 @@ async function startApp() {
   const hotfixRegistry = (await tryGetAndDefineHotfixRegistry({ url: 'http://localhost:8090/hotfixRegistry.js', request: fetchHotfixRegistry })) || {}
 
   // 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry
-  defineEntry(registry)
-  // TODO: 问题一：提前引入 @opentiny/tiny-engine 的依赖，会导致覆盖失败？
-  // TODO: 问题二：如果 registry 是异步的，会导致模板覆盖失败？
-  // const registry = await import('../registry')
+  const registry = await import('../registry')
+  defineEntry(registry.default)
   const { init } = await import('@opentiny/tiny-engine')
 
   init({
     // TODO: 这里支持数组，传入多个注册表
-    registry: [registry, hotfixRegistry],
+    registry: [registry.default, hotfixRegistry],
     configurators,
     createAppSignal: ['global_service_init_finish']
   })

designer-demo/src/main.js

@@ -1,7 +1,6 @@
 import path from 'node:path'
 import { defineConfig, mergeConfig } from 'vite'
 import { useTinyEngineBaseConfig } from '@opentiny/tiny-engine-vite-config'
-import removedRegistry from './removedRegistry.json'
 
 export default defineConfig((configEnv) => {
   const baseConfig = useTinyEngineBaseConfig({
@@ -10,7 +9,7 @@ export default defineConfig((configEnv) => {
     iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')],
     useSourceAlias: true,
     envDir: './env',
-    removedRegistry
+    registryPath: './registry.js'
   })
 
   const customConfig = {

designer-demo/vite.config.js

@@ -152,7 +152,7 @@ export function useTinyEngineBaseConfig(engineConfig) {
   const config = getDefaultConfig(engineConfig)
 
   config.plugins.push(
-    treeShakingPlugin(engineConfig.removedRegistry),
+    treeShakingPlugin(engineConfig.registryPath),
     createSvgIconsPlugin({
       iconDirs: engineConfig.iconDirs || [],
       symbolId: 'icon-[name]',

packages/build/vite-config/src/default-config.js

@@ -1,14 +1,72 @@
+import fs from 'node:fs'
+import path from 'node:path'
 import replace from '@rollup/plugin-replace'
+import { parse } from '@babel/parser'
+
+export function treeShakingPlugin(registryPath) {
+  if (!registryPath) {
+    return null
+  }
 
-export function treeShakingPlugin(removedRegistry) {
   const envReplace = {}
-  Object.entries(removedRegistry).forEach(([key, value]) => {
-    envReplace[`__TINY_ENGINE_REMOVED_REGISTRY["${key}"]`] = value
-  })
-  return replace({
-    values: {
-      ...envReplace
-    },
-    delimiters: ['', '']
-  })
+  const filePath = path.resolve(process.cwd(), registryPath)
+
+  if (!fs.existsSync(filePath)) {
+    // TODO: 测试可否返回 null
+    return null
+  }
+
+  try {
+    const fileContent = fs.readFileSync(filePath, 'utf-8')
+    const ast = parse(fileContent, { sourceType: 'module' })
+    const commentPattern = /#__TINY_ENGINE_TREE_SHAKING__:\s*(?<value>true|false)/
+
+    ast.program.body.forEach((item) => {
+      // 过滤默认导出 且导出类型为 object
+      if (item.type === 'ExportDefaultDeclaration' && item.declaration?.type === 'ObjectExpression') {
+        item.declaration.properties.forEach((propertyItem) => {
+          // 是属性 且 key 为 string
+          if (propertyItem.type === 'ObjectProperty' && propertyItem.key?.type === 'StringLiteral') {
+            const key = propertyItem.key.value
+            // 有 comment，解析 comment。
+            // 通过 comment 指定 treeshaking，优先以 comment 为标准
+            if (propertyItem.leadingComments?.length) {
+              // TODO: 测试多行匹配
+              // TODO: 需要确认是仅解析前面一个注释，还是解析所有注释
+              for (const commentItem of propertyItem.leadingComments) {
+                const match = commentItem.value.match(commentPattern)
+
+                if (!match) {
+                  continue
+                }
+
+                if (match.groups.value === 'true') {
+                  envReplace[`__TINY_ENGINE_REMOVED_REGISTRY["${key}"]`] = false
+                }
+
+                return
+              }
+            }
+
+            // 注册表注释了插件，默认 tree-shaking，
+            if (propertyItem.value.type === 'BooleanLiteral' && propertyItem.value.value === false) {
+              envReplace[`__TINY_ENGINE_REMOVED_REGISTRY["${key}"]`] = false
+            }
+          }
+        })
+      }
+    })
+
+    return replace({
+      values: {
+        ...envReplace
+      },
+      delimiters: ['', '']
+    })
+  } catch (error) {
+    const logger = console
+    logger.warn('[]')
+  }
+
+  return null
 }