Skip to content

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

Open
crunl wants to merge 1 commit into
NervJS:mainfrom
crunl:fix/vite-runner-custom-tabbar
Open

feat(vite-runner): add custom-tab-bar compilation support#19276
crunl wants to merge 1 commit into
NervJS:mainfrom
crunl:fix/vite-runner-custom-tabbar

Conversation

@crunl

@crunl crunl commented May 28, 2026

Copy link
Copy Markdown

这个 PR 做了什么? (简要描述所做更改)
原因:vite-runner 缺少 custom-tab-bar 编译逻辑,导致使用 tabBar.custom: true 时 dist 下无 custom-tab-bar 目录。webpack5-runner 已支持。
修复方式:新增 tabbar.ts 插件,对齐 webpack5-runner 行为。

这个 PR 是什么类型? (至少选择一个)

这个 PR 涉及以下平台:

  • 所有平台
  • Web 端(H5)
  • 移动端(React-Native)
  • 鸿蒙(Harmony)
  • 鸿蒙容器(Harmony Hybrid)
  • ASCF 元服务
  • 快应用(QuickApp)
  • 所有小程序
  • 微信小程序
  • 企业微信小程序
  • 京东小程序
  • 百度小程序
  • 支付宝小程序
  • 支付宝 IOT 小程序
  • 钉钉小程序
  • QQ 小程序
  • 飞书小程序
  • 快手小程序
  • 头条小程序

Summary by CodeRabbit

发布说明

  • 新特性

    • 增强自定义标签栏的编译支持,改进了支付宝等平台的兼容性处理
    • 优化编译时对自定义组件依赖的解析和递归处理
  • 改进

    • 提升自定义组件的配置合并和资源生成效率

Review Change Stack

@coderabbitai

coderabbitai Bot commented May 28, 2026

Copy link
Copy Markdown

Walkthrough

This PR implements complete custom tabbar compilation support for Taro Vite mini apps. It adds a dedicated Vite plugin that intercepts custom tabbar entry scripts, recursively processes component dependencies, generates configuration assets, and produces final module code with component instantiation—while also integrating this pipeline into the app entry and compiler initialization flow.

Changes

Custom Tabbar Compilation Pipeline

Layer / File(s) Summary
Tabbar Plugin Implementation
packages/taro-vite-runner/src/mini/tabbar.ts
Defines TABBAR_SUFFIX constant and exports default Vite plugin that detects custom tabbar directories, resolves entry scripts to virtual modules, recursively collects component dependencies via collectUsingComponents, adjusts npm component paths in config via adjustConfigContent, and generates final module code with component instantiation through createComponentConfig.
App Entry Point & Plugin Registration
packages/taro-vite-runner/src/mini/entry.ts, packages/taro-vite-runner/src/mini/index.ts
Imports node:path, detects appConfig.tabBar?.custom, emits initial tabbar chunk and WXML/template asset based on platform environment, registers the tabbar plugin in the mini compiler's plugin array after page plugin.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

  • Single-Dancer
  • yoyo837
  • tutuxxx

Poem

🐰 A fluffy plugin hops into view,
Custom tabbars now compile true,
Vite paths woven, components entwined,
Recursive depths leave no bar behind,
Platforms happy—both Wechat and Alipay too!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR标题清晰准确地总结了主要变更:为vite-runner添加custom-tab-bar编译支持,与代码变更的核心内容相符。
Linked Issues check ✅ Passed PR实现了所有关键目标:新增tabbar.ts插件处理tabBar.custom场景、在entry.ts中集成处理、支持微信/支付宝两个平台的目录名差异,完全对标webpack5-runner的行为。
Out of Scope Changes check ✅ Passed 所有改动都直接关联于custom-tab-bar编译支持:tabbar.ts新增插件、index.ts集成插件、entry.ts处理加载逻辑,无超出scope的修改。
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/taro-vite-runner/src/mini/entry.ts (1)

80-106: 💤 Low value

代码重复:isAlipaytabBarDir 逻辑在 tabbar.ts 中也存在。

entry.tstabbar.ts 中都有相同的 isAlipay 判断和 tabBarDir 计算逻辑(第 83-84 行 vs tabbar.ts 第 115-116 行)。考虑将此逻辑提取为共享工具函数以保持一致性。

不过这是一个较小的 DRY 违规,由于逻辑简单且两个插件独立运行,当前实现也可以接受。

♻️ 可选的重构建议

可在 utils 中新增共享函数:

// utils/tabbar.ts
export function getTabBarDirName(): string {
  const isAlipay = process.env.TARO_ENV === 'alipay'
  return isAlipay ? 'customize-tab-bar' : 'custom-tab-bar'
}

然后在 entry.tstabbar.ts 中复用。

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/taro-vite-runner/src/mini/entry.ts` around lines 80 - 106, The
duplicate logic computing isAlipay and tabBarDir in entry.ts (variables
isAlipay, tabBarDir) and tabbar.ts should be extracted into a shared utility;
create a function like getTabBarDirName() that reads process.env.TARO_ENV and
returns the correct directory string, replace the inline logic in both entry.ts
(where scriptPath/tabBarDir are used and emitFile is called) and tabbar.ts to
call getTabBarDirName(), and import that util from a new utils/tabbar.ts so both
modules share the same implementation.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/taro-vite-runner/src/mini/entry.ts`:
- Around line 80-106: The duplicate logic computing isAlipay and tabBarDir in
entry.ts (variables isAlipay, tabBarDir) and tabbar.ts should be extracted into
a shared utility; create a function like getTabBarDirName() that reads
process.env.TARO_ENV and returns the correct directory string, replace the
inline logic in both entry.ts (where scriptPath/tabBarDir are used and emitFile
is called) and tabbar.ts to call getTabBarDirName(), and import that util from a
new utils/tabbar.ts so both modules share the same implementation.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0a426099-a146-4ddc-b08d-1f446dc60dca

📥 Commits

Reviewing files that changed from the base of the PR and between 0db37ec and 52e4add.

📒 Files selected for processing (3)
  • packages/taro-vite-runner/src/mini/entry.ts
  • packages/taro-vite-runner/src/mini/index.ts
  • packages/taro-vite-runner/src/mini/tabbar.ts

This was referenced May 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant