feat(vite-runner): add custom-tab-bar compilation support

packages/taro-vite-runner/src/mini/entry.ts

@@ -1,6 +1,6 @@
 import path from 'node:path'
 
-import { fs, isEmptyObject, removePathPrefix } from '@tarojs/helper'
+import { fs, isEmptyObject, removePathPrefix, resolveMainFilePath } from '@tarojs/helper'
 import { isString } from '@tarojs/shared'
 
 import { appendVirtualModulePrefix, escapePath, prettyPrintJson, stripVirtualModulePrefix } from '../utils'
@@ -77,6 +77,34 @@ export default function (viteCompilerContext: ViteMiniCompilerContext): PluginOp
           })
         })
 
+        // custom-tab-bar - emit chunk to trigger tabbar.ts compilation, plus wxml/json/assets
+        if (appConfig.tabBar?.custom) {
+          const { sourceDir } = viteCompilerContext
+          const isAlipay = process.env.TARO_ENV === 'alipay'
+          const tabBarDir = isAlipay ? 'customize-tab-bar' : 'custom-tab-bar'
+          const customTabBarPath = path.join(sourceDir, tabBarDir)
+          const scriptPath = resolveMainFilePath(customTabBarPath, taroConfig.frameworkExts)
+          if (scriptPath && fs.existsSync(scriptPath)) {
+            // emit chunk entry - will be intercepted by tabbar.ts resolveId to add virtual module suffix
+            this.emitFile({
+              type: 'chunk',
+              id: scriptPath,
+              fileName: `${tabBarDir}/index.js`,
+              implicitlyLoadedAfterOneOf: [rawId]
+            })
+            this.addWatchFile(scriptPath)
+
+            // emit wxml template - use page template since custom-tab-bar is a full React component
+            const baseTemplatePath = '../base' + viteCompilerContext.fileType.templ
+            const templateContent = taroConfig.template.buildPageTemplate(baseTemplatePath)
+            this.emitFile({
+              type: 'asset',
+              fileName: `${tabBarDir}/index${viteCompilerContext.fileType.templ}`,
+              source: templateContent
+            })
+          }
+        }
+
         // native components
         for (const comp of viteCompilerContext.nativeComponents.values()) {
           viteCompilerContext.generateNativeComponent(this, comp, [rawId])

packages/taro-vite-runner/src/mini/index.ts

@@ -7,6 +7,7 @@ import nativeSupportPlugin from './native-support'
 import pagePlugin from './page'
 import pipelinePlugin from './pipeline'
 import stylePlugin from './style'
+import tabbarPlugin from './tabbar'
 
 import type { ViteMiniCompilerContext } from '@tarojs/taro/types/compile/viteCompilerContext'
 import type { PluginOption } from 'vite'
@@ -17,6 +18,7 @@ export default function (viteCompilerContext: ViteMiniCompilerContext): PluginOp
     configPlugin(viteCompilerContext),
     entryPlugin(viteCompilerContext),
     pagePlugin(viteCompilerContext),
+    tabbarPlugin(viteCompilerContext),
     multiPlatformPlugin(viteCompilerContext),
     nativeSupportPlugin(viteCompilerContext),
     assetsPlugin(viteCompilerContext),

packages/taro-vite-runner/src/mini/tabbar.ts

@@ -0,0 +1,175 @@
+import path from 'node:path'
+
+import { fs, NODE_MODULES, readConfig, resolveMainFilePath } from '@tarojs/helper'
+
+import { appendVirtualModulePrefix, escapePath, getComponentName, prettyPrintJson, stripVirtualModulePrefix } from '../utils'
+
+import type { Config } from '@tarojs/taro'
+import type { ViteMiniCompilerContext } from '@tarojs/taro/types/compile/viteCompilerContext'
+import type { PluginContext } from 'rollup'
+import type { PluginOption } from 'vite'
+
+export const TABBAR_SUFFIX = '?tabbar-loader=true'
+
+/**
+ * Adjust usingComponents paths for npm packages
+ * Aligns with webpack5 MiniPlugin.adjustConfigContent
+ */
+function adjustConfigContent(config: Config) {
+  const { usingComponents } = config
+  if (!usingComponents) return
+
+  for (const [key, value] of Object.entries(usingComponents)) {
+    const compPath = Array.isArray(value) ? value[0] : value
+    if (!compPath.includes(NODE_MODULES)) continue
+
+    const match = compPath.replace(NODE_MODULES, 'npm').match(/npm.*/)
+    usingComponents[key] = match ? `/${match[0]}` : compPath
+  }
+}
+
+/**
+ * Recursively collect components from usingComponents JSON config
+ * Mirrors webpack5 MiniPlugin.compileFile pattern
+ */
+function collectUsingComponents(
+  viteCompilerContext: ViteMiniCompilerContext,
+  scriptPath: string,
+  config: Config,
+  ctx: PluginContext,
+  implicitlyLoadedAfterOneOf: string[],
+  seen = new Set<string>(),
+) {
+  const { usingComponents } = config
+  if (!usingComponents) return
+
+  for (const compName of Object.keys(usingComponents)) {
+    const value = usingComponents[compName]
+    const compPath = Array.isArray(value) ? value[0] : value
+
+    // Resolve component path
+    const resolvedPath = resolveMainFilePath(path.resolve(path.dirname(scriptPath), compPath))
+    if (!fs.existsSync(resolvedPath) || seen.has(resolvedPath)) continue
+
+    seen.add(resolvedPath)
+
+    // Read component's config and recursively collect its dependencies
+    const compConfigPath = viteCompilerContext.getConfigFilePath(resolvedPath)
+    const compConfig = fs.existsSync(compConfigPath) ? (readConfig(compConfigPath) || {}) : {}
+
+    collectUsingComponents(
+      viteCompilerContext,
+      resolvedPath,
+      compConfig,
+      ctx,
+      implicitlyLoadedAfterOneOf,
+      seen,
+    )
+
+    // Apply adjustConfigContent and emit component's JSON
+    adjustConfigContent(compConfig)
+    const compComponentName = getComponentName(viteCompilerContext, resolvedPath)
+    const compJsonName = viteCompilerContext.getConfigPath(compComponentName)
+    const compJsonForEmit = { ...compConfig } as Record<string, unknown>
+    delete compJsonForEmit.enableShareAppMessage
+    delete compJsonForEmit.enableShareTimeline
+    delete compJsonForEmit.components
+    ctx.emitFile({
+      type: 'asset',
+      fileName: compJsonName,
+      source: prettyPrintJson(compJsonForEmit),
+    })
+
+    // Emit component chunk and template
+    ctx.emitFile({
+      type: 'chunk',
+      id: resolvedPath,
+      fileName: viteCompilerContext.getScriptPath(compComponentName),
+      implicitlyLoadedAfterOneOf,
+    })
+
+    const baseTemplatePath = '../base' + viteCompilerContext.fileType.templ
+    const templateContent = viteCompilerContext.taroConfig.template.buildPageTemplate(baseTemplatePath)
+    ctx.emitFile({
+      type: 'asset',
+      fileName: viteCompilerContext.getTemplatePath(compComponentName),
+      source: templateContent,
+    })
+
+    ctx.addWatchFile(resolvedPath)
+  }
+}
+
+export default function (viteCompilerContext: ViteMiniCompilerContext): PluginOption {
+  const { taroConfig, sourceDir } = viteCompilerContext
+
+  let tabBarScriptPath = ''
+  let tabBarDirName = 'custom-tab-bar'
+
+  return {
+    name: 'taro:vite-mini-tabbar',
+    enforce: 'pre',
+    buildStart() {
+      // detect custom-tab-bar
+      if (viteCompilerContext.app.config.tabBar?.custom) {
+        const isAlipay = process.env.TARO_ENV === 'alipay'
+        tabBarDirName = isAlipay ? 'customize-tab-bar' : 'custom-tab-bar'
+        const customTabBarPath = path.join(sourceDir, tabBarDirName)
+        tabBarScriptPath = resolveMainFilePath(customTabBarPath, taroConfig.frameworkExts)
+      }
+    },
+    resolveId (source, _importer, options) {
+      if (tabBarScriptPath && source === tabBarScriptPath && options.isEntry) {
+        return appendVirtualModulePrefix(source + TABBAR_SUFFIX)
+      }
+      return null
+    },
+    load (id) {
+      if (id.endsWith(TABBAR_SUFFIX)) {
+        const rawId = stripVirtualModulePrefix(id).replace(TABBAR_SUFFIX, '')
+
+        const configPath = viteCompilerContext.getConfigFilePath(rawId)
+        const tabbarConfig: Config = fs.existsSync(configPath)
+          ? (readConfig(configPath, taroConfig) || {})
+          : {}
+
+        // Apply adjustConfigContent
+        adjustConfigContent(tabbarConfig)
+
+        // Recursively collect and emit usingComponents
+        collectUsingComponents(
+          viteCompilerContext,
+          rawId,
+          tabbarConfig,
+          this,
+          [rawId],
+        )
+
+        // Emit JSON config file
+        const tabBarConfigForJson = { ...tabbarConfig } as Config & { component?: boolean }
+        const unofficialConfigs = ['enableShareAppMessage', 'enableShareTimeline', 'components']
+        unofficialConfigs.forEach(item => {
+          delete (tabBarConfigForJson as Record<string, unknown>)[item]
+        })
+        const configJsonName = viteCompilerContext.getConfigPath(`${tabBarDirName}/index`)
+        this.emitFile({
+          type: 'asset',
+          fileName: configJsonName,
+          source: prettyPrintJson(tabBarConfigForJson),
+        })
+
+        let instantiateComponent = `Component(createComponentConfig(component, '${tabBarDirName}/index'))`
+
+        if (typeof viteCompilerContext.loaderMeta.modifyInstantiateComponent === 'function') {
+          instantiateComponent = viteCompilerContext.loaderMeta.modifyInstantiateComponent(instantiateComponent)
+        }
+
+        return [
+          'import { createComponentConfig } from "@tarojs/runtime"',
+          `import component from "${escapePath(rawId)}"`,
+          instantiateComponent,
+        ].join('\n')
+      }
+    },
+  }
+}