fix: comments zone widget show hide #4361
Conversation
Walkthrough本次变更主要调整了评论区域组件的生命周期管理和类型安全性。具体来说，在 Changes
Sequence Diagram(s)sequenceDiagram
participant Widget as CommentsZoneWidget
participant Editor as IEditor
participant Thread as ICommentsThread
participant DOM as ReactDOM.Root
Editor->>Widget: 构造实例 (传入 thread、options)
Widget->>Widget: 构造函数设定 thread 为 public readonly
Widget->>Widget: 调用 show() 方法
Widget->>Widget: 执行 renderDOM() 方法
Widget->>DOM: 检查 wrapperRoot，创建 _wrapper 元素并挂载组件
Widget->>Widget: 调用 hide() 方法 → 调用 super.hide() 并重置 wrapperRoot
sequenceDiagram
participant Service as CommentsService
participant Thread as ICommentsThread
Service->>Thread: 在 registerDecorationProvider 中
Thread->>Thread: 调用 hide() 方法（替代 hideWidgetsByDispose()）
Suggested reviewers
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
yarn install v1.22.22 Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/comments/src/browser/comments-zone.view.tsx (1)
200-223: 建议添加错误处理机制
renderDOM方法中的 DOM 操作应该添加错误处理，以防止在以下情况出现问题：
- DOM 元素创建失败
- React root 创建失败
- 渲染过程中发生异常
建议添加 try-catch 块：
private renderDOM() { + try { if (this.wrapperRoot) { this.wrapperRoot.unmount(); } const _wrapper = document.createElement('div'); this._container.appendChild(_wrapper); this.observeContainer(_wrapper); const customRender = this.commentsFeatureRegistry.getZoneWidgetRender(); this.wrapperRoot = ReactDOM.createRoot(_wrapper); this.wrapperRoot.render( <ConfigProvider value={this.appConfig}> {customRender ? customRender(this.thread, this) : <CommentsZone thread={this.thread} widget={this} />} </ConfigProvider>, ); this.addDispose({ dispose: () => { this.wrapperRoot?.unmount(); this.wrapperRoot = undefined; }, }); + } catch (error) { + console.error('Failed to render comments widget:', error); + // 可以在这里添加错误恢复逻辑 + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/comments/src/browser/comments-zone.view.tsx(3 hunks)packages/comments/src/browser/comments.service.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: ubuntu-latest, Node.js 20.x
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: build-windows
🔇 Additional comments (4)
packages/comments/src/browser/comments-zone.view.tsx (3)
178-198: 改进了组件的生命周期管理和类型安全性以下改进提高了代码的健壮性：
wrapperRoot类型现在可以为undefined，这样更安全thread参数设为public readonly，防止意外修改- 在构造函数中调用
renderDOM()，确保正确初始化
233-238: 正确的显示逻辑顺序在
show方法中先调用super.show()，然后调用renderDOM()，这个顺序确保了组件在显示时能够正确渲染。
240-244: 优化了隐藏逻辑，避免不必要的资源销毁将
hide方法中的dispose改为super.hide()，这样可以：
- 保持组件状态，便于后续重用
- 避免不必要的资源销毁和重建
- 提高性能
packages/comments/src/browser/comments.service.ts (1)
1031-1031: 优化了线程隐藏逻辑将
hideWidgetsByDispose()改为hide()，这个改动：
- 与
CommentsZoneWidget的更改保持一致- 改进了生命周期管理
- 避免了不必要的资源销毁
|
这个是啥表现？好像没遇到过 |
新建评论 -> 切换文件 -> 切换回来 评论组件消失了 |
|
/next |
|
🎉 PR Next publish successful! 3.7.1-next-1739448958.0 |
|
@Ricbet 这个发个 Hotfix ？ |
Ricbet
force-pushed
the
fix/comments-widget
branch
from
6e99f89 to
96e065b
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/comments/src/browser/comments-zone.view.tsx (2)
188-198: 考虑延迟初始化渲染在构造函数中立即调用
renderDOM()可能过早。建议考虑以下改进：
- 将渲染延迟到
show()方法首次调用时- 避免在隐藏状态下创建不必要的 DOM 元素
constructor(editor: IEditor, public readonly thread: ICommentsThread, options?: IOptions) { super(editor.monacoEditor, thread.range, { ...options, showInHiddenAreas: true, }); this._editor = editor; this._isShow = !thread.isCollapsed.get(); - this.renderDOM(); }
200-223: 建议增加错误处理机制
renderDOM方法的实现基本合理，但建议增加以下改进：
- 添加 try-catch 块来处理可能的渲染错误
- 在错误发生时提供回退机制
- 添加日志记录以便于调试
private renderDOM() { + try { if (this.wrapperRoot) { this.wrapperRoot.unmount(); } const _wrapper = document.createElement('div'); this._container.appendChild(_wrapper); this.observeContainer(_wrapper); const customRender = this.commentsFeatureRegistry.getZoneWidgetRender(); this.wrapperRoot = ReactDOM.createRoot(_wrapper); this.wrapperRoot.render( <ConfigProvider value={this.appConfig}> {customRender ? customRender(this.thread, this) : <CommentsZone thread={this.thread} widget={this} />} </ConfigProvider>, ); this.addDispose({ dispose: () => { this.wrapperRoot?.unmount(); this.wrapperRoot = undefined; }, }); + } catch (error) { + console.error('评论区渲染失败:', error); + // 实现回退机制 + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/comments/src/browser/comments-zone.view.tsx(3 hunks)packages/comments/src/browser/comments.service.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/comments/src/browser/comments.service.ts
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: build-windows
- GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (2)
packages/comments/src/browser/comments-zone.view.tsx (2)
178-178: 类型定义改进！将
wrapperRoot的类型从ReactDOM.Root改为ReactDOM.Root | undefined提高了类型安全性，有助于防止空指针异常。
233-244: 显示/隐藏逻辑优化合理！对
show和hide方法的修改改进了组件的生命周期管理：
- 在
show中调用renderDOM确保了 DOM 的正确重建- 使用
super.hide()替代dispose更符合组件生命周期管理的最佳实践
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## v3.7 #4361 +/- ##
==========================================
- Coverage 54.21% 54.20% -0.01%
==========================================
Files 1634 1634
Lines 99917 99917
Branches 21691 21699 +8
==========================================
- Hits 54169 54162 -7
- Misses 38006 38011 +5
- Partials 7742 7744 +2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Types
Background or solution
Changelog
修复切换文件时评论组件不显示的问题
Summary by CodeRabbit