feat: taro 支持 ttdom#18850
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Walkthrough新增针对字节跳动（tt）小程序的可选 TT Dom 渲染支持：添加共享常量与检测工具、编译时注入 enableTTDom 配置、运行时通过 isEnableTTDom 分流为 TT Dom 的 document/element/event/innerHTML/样式处理逻辑，并暴露相关运行时接口。 Changes
Sequence Diagram(s)sequenceDiagram
participant Webpack as Webpack (编译)
participant MiniPlugin as MiniPlugin
participant TaroLoadChunks as TaroLoadChunksPlugin
participant AppSource as 生成源码 (webpack util)
participant Runtime as Taro Runtime
participant TTEnv as tt (运行时 / appDocument)
Webpack->>MiniPlugin: 传入 options（包含 appConfig）
MiniPlugin->>TaroLoadChunks: 传递 appConfig
TaroLoadChunks->>AppSource: addRequireToSource(..., appConfig)
alt TARO_ENV === 'tt' 且 appConfig.enableTTDom
AppSource->>AppSource: 注入 tt.__$enableTTDom$__ = appConfig.enableTTDom
end
Runtime->>Runtime: 调用 isEnableTTDom()
alt isEnableTTDom() 为 true
Runtime->>TTEnv: 使用 tt.appDocument 创建 TT Dom（createTTDomDocument）
Runtime->>TTEnv: 使用 eventHandlerTTDom 派发事件（bind*/catch* 适配）
Runtime->>TTEnv: styleObjectToCss -> setAttribute('style', ...)
Runtime->>TTEnv: setInnerHTML 使用 tt.appDocument 解析并设置内容
else
Runtime->>Runtime: 使用常规 createDocument()/performUpdate 流程
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
coderabbitai
Bot
requested review from
ZakaryCode,
luckyadam,
tutuxxx and
yoyo837
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@packages/taro-react/src/props.ts`:
- Around line 243-249: In the TT DOM branch inside the block guarded by
isEnableTTDom() handle the case where value is null/undefined (currently neither
isString nor isObject) and clear the old styles; update the logic around the
checks for isString(value)/isObject(value) in that branch (the code using
dom.setAttribute('style'...) and styleObjectToCss) to call the DOM clearing API
(e.g., dom.removeAttribute('style') or set an empty style) when value == null ||
value === undefined so old styles are removed in the TT path.
In `@packages/taro-runtime/src/bom/document.ts`:
- Around line 50-51: createTTDomDocument currently accesses tt.appDocument
without null/undefined checks; add a defensive guard (use optional chaining or
an explicit null check) around tt and tt.appDocument in createTTDomDocument and
either return a safe fallback or throw a clear, descriptive error so failures
are informative (align style with usage at tt?.getBuiltInComponents). Locate the
createTTDomDocument function and update its access to tt.appDocument to validate
tt and tt.appDocument before use, and ensure any thrown error message mentions
"tt.appDocument" for easier debugging.
- Line 69: The value returned from tt?.getBuiltInComponents?.() may not be a
Set, so initialize builtInComponents defensively: call
tt?.getBuiltInComponents?.(), check with instanceof Set (or Array.isArray) and
if it's not a Set convert it to one (e.g., new Set(returnedValue) or fallback to
new Set([...DEFAULT_Components, ...TT_SPECIFIC_COMPONENTS])); update the code
around the builtInComponents initialization and ensure later uses like
builtInComponents.has(type) are safe.
- Around line 106-107: The function createTTDomDocument currently returns
tt.appDocument typed as any, which lets an any flow into taroDocumentProvider
typed TaroDocument; update createTTDomDocument to declare an explicit return
type compatible with TaroDocument (or a narrower interface) and ensure its
implementation returns a value matching that type (replace the implicit any on
tt.appDocument with a typed wrapper or cast within createTTDomDocument) so the
compiler can validate that taroDocumentProvider (and env.document) adhere to
TaroDocument.
In `@packages/taro-runtime/src/interface/hydrate.ts`:
- Line 15: The __webviewId__ property on the MpInstance interface is currently
required but only used for the TT DOM path; make it optional (like the existing
route? pattern) so non-TT platforms don't need to provide it—locate the
MpInstance declaration in hydrate.ts and change the __webviewId__ member to an
optional property (__webviewId__?: number) so TypeScript won't force it for all
implementations.
🧹 Nitpick comments (8)
packages/taro-webpack5-runner/src/utils/webpack.ts (1)
17-22: 当enableTTDom未设置时，注入了不必要的代码。当用户没有在配置中设置
enableTTDom时，appConfig.enableTTDom为undefined，生成的代码将会是tt.__$enableTTDom$__ = undefined;。虽然运行时不会出错（undefined是 falsy），但这段代码对不使用 TT DOM 的抖音小程序来说是多余的。建议仅在
enableTTDom为true时注入，或至少确保输出的是布尔值：♻️ 建议的修改
- if (process.env.TARO_ENV === 'tt' && appConfig) { + if (process.env.TARO_ENV === 'tt' && appConfig?.enableTTDom) { source.add(` if (typeof tt !== 'undefined') { - tt.__$enableTTDom$__ = ${appConfig.enableTTDom}; + tt.__$enableTTDom$__ = true; }\n`) }packages/shared/src/utils.ts (1)
275-283:styleObjectToCss的类型签名中ArrayLike<unknown>不太合理函数接受
ArrayLike<unknown>类型，但内部使用Object.entries(style)处理，这会将 ArrayLike 的索引作为 CSS 属性名（如"0","1"），产生无效的 CSS。如果调用方始终传入对象，建议收窄类型。♻️ 建议收窄类型签名
-export function styleObjectToCss(style: { [s: string]: unknown } | ArrayLike<unknown>) { +export function styleObjectToCss(style: Record<string, string | number>) {packages/taro-runtime/src/dom-external/inner-html/html.ts (1)
30-34:typeof tt !== 'undefined'检查冗余
isEnableTTDom()内部已经检查了typeof tt === 'undefined'并在该情况下返回false。因此当代码执行到 Line 31 时，tt必定已定义，该检查可以简化。♻️ 简化冗余检查
if (process.env.TARO_ENV === 'tt' && isEnableTTDom()) { - if (typeof tt !== 'undefined' && 'appDocument' in tt) { + if ('appDocument' in tt) { ownerDocument = tt.appDocument } }packages/taro-runtime/src/dom/event.ts (1)
206-213:event.mpEvent = event产生循环引用Line 208 将
mpEvent设置为event自身，产生循环引用。虽然这可能是为了让 TT DOM 事件对象兼容TaroEvent的mpEvent访问模式，但循环引用可能导致序列化（如JSON.stringify）抛异常，或在调试时带来困扰。建议添加注释说明此设计意图。📝 建议添加注释说明
export function eventHandlerTTDom(ele: any, listener: (event: MpEvent, element: any) => void, event: MpEvent) { + // Note: mpEvent 指向 event 自身以兼容 TaroEvent.mpEvent 的访问模式 Object.assign(event, { mpEvent: event, bubbles: true, cancelable: true, }) listener(event, ele) }packages/taro-react/src/props.ts (1)
129-138:eventHandlerTTDom.bind(this, dom, value)中this的值不确定
setEvent是一个普通函数而非方法，this在严格模式下为undefined。虽然eventHandlerTTDom内部未使用this，但为避免歧义，建议使用null替代。♻️ 建议修复
- dom[`__${eventName}__`] = eventHandlerTTDom.bind(this, dom, value) + dom[`__${eventName}__`] = eventHandlerTTDom.bind(null, dom, value)packages/shared/src/constants.ts (1)
41-41:DEFAULT_Components的命名不符合该文件的常量命名约定该文件中所有其他常量均使用
UPPER_SNAKE_CASE（如COMPILE_MODE_IDENTIFIER_PREFIX、PLATFORM_CONFIG_MAP、TT_SPECIFIC_COMPONENTS），此处应保持一致性。♻️ 建议重命名为 DEFAULT_COMPONENTS
-export const DEFAULT_Components = new Set<string>([ +export const DEFAULT_COMPONENTS = new Set<string>([需要同步更新
packages/taro-runner-utils/src/constant.ts中的定义以及所有引用处。packages/taro-runtime/src/bom/document.ts (2)
71-78: 使用__proto__访问原型方法是已弃用的模式。虽然已有 eslint-disable 注释，但
__proto__在严格模式下行为不可靠，且属于已弃用特性。建议使用Object.getPrototypeOf(this)替代。建议：使用 Object.getPrototypeOf 替代 __proto__
document.getElementById = function getElementById(id: string) { if (id === 'app') { return app } else { - // eslint-disable-next-line no-proto - return this.__proto__.getElementById.call(this, id) + return Object.getPrototypeOf(this).getElementById.call(this, id) } }
createElement内部同理。Also applies to: 84-96
80-82:getLastPage的实现将整个 Map 展开为数组，仅为取最后一个元素。可以使用迭代器避免 O(n) 的数组分配，虽然对于小 Map 影响有限。
更高效的替代方案
document.getLastPage = function getLastPage() { - return [...this._pageDocumentMap.values()][this._pageDocumentMap.size - 1] + let last + for (const v of this._pageDocumentMap.values()) last = v + return last }
xzdadada
force-pushed
the
feat/tt-ttdom
branch
from
7b36ec6 to
f3a082f
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/taro-runtime/src/dsl/common.ts (1)
374-391:⚠️ Potential issue | 🟡 MinorTTDom 模式下
customWrapperCache的不一致性问题。
ATTACHED和DETACHED生命周期在 TTDom 启用时直接返回，导致customWrapperCache不被填充和清理。但在root.ts的数据更新路径中（performUpdate()中的findCustomWrapper()调用），仍会尝试从这个空缓存中读取自定义包裹组件，此代码路径缺少 TTDom 守卫。当 TTDom 启用时，指向自定义包裹组件的数据更新将无法从缓存中找到对应组件，导致这些更新被误认为是页面级别的更新而不是被正确路由到
customWrapperMap。请确认 TTDom 是否不支持自定义包裹组件的数据更新，或在数据更新路径中添加相应的 TTDom 守卫。
🤖 Fix all issues with AI agents
In `@packages/shared/src/utils.ts`:
- Around line 275-283: In styleObjectToCss, filter out entries whose value is
null or undefined before mapping to CSS so you don't emit "key: undefined|null;"
strings; update the code that iterates Object.entries(style) to skip entries
where value === null || value === undefined, then continue using kebabCaseKey
and isUnitlessProperty to produce the final cssValue and string.
In `@packages/taro-react/src/props.ts`:
- Around line 129-138: 在 TT DOM 分支里将 eventHandlerTTDom 的绑定上下文由 this 显式改为 null：把对
eventHandlerTTDom.bind 的调用（目前为 eventHandlerTTDom.bind(this, dom, value)）改为
eventHandlerTTDom.bind(null, dom, value)，同时保持对 dom[`__${eventName}__`] 的赋值与
addEventListener 调用不变；参考相关符号：setEvent（由 setProperty
普通调用），eventHandlerTTDom，dom[`__${eventName}__`]，addEventListener，以确保意图明确且不依赖
this 上下文。
In `@packages/taro-runtime/src/dsl/common.ts`:
- Around line 164-168: The TTDom branch is dropping the callback `cb` (passed
from ONLOAD) by calling `(pageElement as any).sync()` without invoking `cb`,
which can break lifecycle signaling; update the TTDom path so that after calling
`pageElement.sync()` you invoke the same `cb` (guarding for existence) just like
the non-TTDom path uses `pageElement.performUpdate(true, cb)`; ensure you call
`cb()` after sync completes (synchronously if sync is sync) or schedule it
appropriately if `sync()` returns/accepts async completion.
🧹 Nitpick comments (7)
packages/taro-webpack5-runner/src/utils/webpack.ts (1)
5-5:AppConfig仅作为类型使用，应使用import type。
AppConfig在第 15 行仅用作参数类型注解，而非运行时值。当前使用值导入（value import）可能导致打包时引入不必要的运行时代码，且与第 8 行 webpack 类型的import type风格不一致。♻️ 建议修改
-import { AppConfig } from '@tarojs/taro' +import type { AppConfig } from '@tarojs/taro'packages/taro-runtime/src/dsl/common.ts (2)
153-157: TTDom 路径下pageElement的类型安全性较弱。
(env.document as any).getPageDocumentById(this.__webviewId__)返回的对象被赋给pageElement: TaroRootElement | null，但实际类型可能与TaroRootElement不同。后续代码（如 Line 159 的ensure检查、Line 163 的ctx赋值）都依赖于它是TaroRootElement。建议为 TTDom 的 page document 补充类型定义或至少加一个接口声明，避免在后续维护中出现隐式类型不匹配的问题。
153-157: 可选优化：提取重复的 TTDom 判断条件。
process.env.TARO_ENV === 'tt' && isEnableTTDom()在本文件中出现了 5 次。虽然外层的TARO_ENV检查对编译时 dead-code elimination 有意义（process.env.TARO_ENV会在构建时被替换），但建议在首次出现时加一行注释说明这一设计意图，方便后续维护者理解为什么isEnableTTDom()内部已有相同检查仍要在外部重复。Also applies to: 164-168, 335-337, 374-377, 388-391
packages/shared/src/utils.ts (2)
268-272: 三元赋值可简化为布尔表达式。♻️ 建议简化
const ttMode = tt.getRenderMode ? tt.getRenderMode() : TTRenderType.V1 - - ttMode === TTRenderType.V2 && tt.__$enableTTDom$__ ? (ttUseV2TTDom = true) : (ttUseV2TTDom = false) + ttUseV2TTDom = ttMode === TTRenderType.V2 && !!tt.__$enableTTDom$__ return ttUseV2TTDom
261-265:isEnableTTDom在非 TT 环境下每次调用都会重复检查环境变量。当
TARO_ENV !== 'tt'时，函数每次都会走到 Line 263 的return false，而不会利用ttUseV2TTDom缓存。虽然性能影响很小，但若此函数在热路径中被频繁调用（如setProperty、setEvent等），可以考虑也缓存非 TT 环境的结果。packages/taro-runtime/src/bom/document.ts (2)
88-90:getLastPage将整个 Map 展开为数组只为取最后一个元素，效率较低。
[...this._pageDocumentMap.values()][this._pageDocumentMap.size - 1]会创建一个临时数组，当页面栈较深时有不必要的内存分配。可以改用迭代器直接获取最后一个值。♻️ 建议优化
document.getLastPage = function getLastPage() { - return [...this._pageDocumentMap.values()][this._pageDocumentMap.size - 1] + let last + for (const v of this._pageDocumentMap.values()) last = v + return last }
79-86: 使用__proto__访问原型方法已被废弃，建议使用Object.getPrototypeOf。Line 84、98、100 处使用了
this.__proto__来调用原型方法。虽然已有 eslint-disable 注释，但__proto__是非标准的遗留特性，推荐使用Object.getPrototypeOf(this)替代。♻️ 建议替换示例（getElementById 为例）
document.getElementById = function getElementById(id: string) { if (id === 'app') { return app } else { - // eslint-disable-next-line no-proto - return this.__proto__.getElementById.call(this, id) + return Object.getPrototypeOf(this).getElementById.call(this, id) } }
createElement中的__proto__引用也应同样替换。Also applies to: 92-109
Codecov Report❌ Patch coverage is ❌ Your patch status has failed because the patch coverage (1.86%) is below the target coverage (75.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #18850 +/- ##
==========================================
- Coverage 56.31% 56.07% -0.25%
==========================================
Files 447 447
Lines 23352 23454 +102
Branches 5783 5804 +21
==========================================
+ Hits 13150 13151 +1
- Misses 8500 8576 +76
- Partials 1702 1727 +25
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
哭了 微信小程序有这些的吗.. 还是说微信开发团队还在搞广告相关的？ |
|
请问下 getRenderMode 抖音小程序开发者工具，这个怎么能用用V2 |
4 participants
这个 PR 做了什么？ (简要描述所做更改)
一、概述
官方提供 tt-dom 接口，让 taro 视图创建/更新更加高效。
通过 tt-dom 接口，tarojs 可以不依赖于 Template 进行递归渲染节点。
二、技术方案
TT-DOM 架构
整体架构将从 react -> taro dom -> setData -> template render 变成 react -> tt-dom -> 内置组件 render。
接入 TT-DOM
抖音小程序用户可通过在 appConfig 中配置$enableTTDom$ = true，在运行时提供 isEnableTTDom 判断，却别处理逻辑
enableTTDom: true开启 tt-dom架构内，判断开启 enableTTDom 并且使用抖音小程序时，在入口文件中注入 tt.
三、tt-dom 使用示例
四、收益
测试数据：
基准 Benchmark：借鉴 https://github.com/krausest/js-framework-benchmark 中对于框架的性能测试方案，对于创建、更新、交换、删除四个场景在 ios 真机环境下进行对比测试，得到如下数据结果
这个 PR 是什么类型？ (至少选择一个)
这个 PR 涉及以下平台：
Summary by CodeRabbit
新功能
配置