@opensumi/ide-comments 3.5.1-next-1730948411.0 → 3.5.1-next-1730963433.0

package/src/browser/comments-thread.ts

@@ -1,9 +1,8 @@
-import { action, autorun, computed, makeObservable, observable, runInAction } from 'mobx';
-
 import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
 import { Disposable, Emitter, IContextKeyService, IRange, URI, localize, uuid } from '@opensumi/ide-core-browser';
 import { ResourceContextKey } from '@opensumi/ide-core-browser/lib/contextkey/resource';
 import { EditorCollectionService, IEditor } from '@opensumi/ide-editor';
+import { autorun, derived, observableValue, transaction } from '@opensumi/ide-monaco/lib/common/observable';
 
 import {
   CommentThreadCollapsibleState,
@@ -33,17 +32,10 @@ export class CommentsThread extends Disposable implements ICommentsThread {
   @Autowired(INJECTOR_TOKEN)
   private readonly injector: Injector;
 
-  @observable.shallow
-  public comments: IThreadComment[] = [];
-
-  @observable
-  public label: string | undefined;
-
-  @observable
-  private _readOnly = false;
-
-  @observable
-  public isCollapsed: boolean;
+  public readonly comments = observableValue<IThreadComment[]>(this, []);
+  public readonly label = observableValue<string | undefined>(this, undefined);
+  public readonly readOnly = observableValue<boolean>(this, false);
+  public readonly isCollapsed = observableValue<boolean>(this, false);
 
   public data: any;
 
@@ -78,7 +70,6 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     public options: ICommentsThreadOptions,
   ) {
     super();
-    makeObservable(this);
     this.updateComments(
       options.comments
         ? options.comments.map((comment) => ({
@@ -93,33 +84,40 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     const resourceContext = new ResourceContextKey(this._contextKeyService);
     resourceContext.set(uri);
     this._contextKeyService.createKey<string>('thread', options.contextValue);
-    this.readOnly = !!options.readOnly;
-    this.label = options.label;
-    this.isCollapsed = !!this.options.isCollapsed;
+    transaction((tx) => {
+      this.setReadOnly(!!options.readOnly);
+      this.label.set(options.label, tx);
+      this.isCollapsed.set(!!this.options.isCollapsed, tx);
+    });
     const threadsLengthContext = this._contextKeyService.createKey<number>(
       'threadsLength',
       this.commentsService.getThreadsByUri(uri).length,
     );
-    const commentsLengthContext = this._contextKeyService.createKey<number>('commentsLength', this.comments.length);
+    const comments = this.comments.get();
+    const commentsLengthContext = this._contextKeyService.createKey<number>('commentsLength', comments.length);
     // vscode 用于判断 thread 是否为空
     const commentThreadIsEmptyContext = this._contextKeyService.createKey<boolean>(
       'commentThreadIsEmpty',
-      !this.comments.length,
+      !comments.length,
     );
     // vscode 用于判断是否为当前 controller 注册
     this._contextKeyService.createKey<string>('commentController', providerId);
     // 监听 comments 的变化
-    autorun(() => {
-      commentsLengthContext.set(this.comments.length);
-      commentThreadIsEmptyContext.set(!this.comments.length);
-    });
-    autorun(() => {
-      if (this.isCollapsed) {
-        this.hideAll();
-      } else {
-        this.showAll();
-      }
-    });
+    this.addDispose(
+      autorun((reader) => {
+        const length = this.comments.read(reader).length;
+
+        commentsLengthContext.set(length);
+        commentThreadIsEmptyContext.set(!length);
+
+        const isCollapsed = this.isCollapsed.read(reader);
+        if (isCollapsed) {
+          this.hideAll();
+        } else {
+          this.showAll();
+        }
+      }),
+    );
     // 监听每次 thread 的变化，重新设置 threadsLength
     this.addDispose(
       this.commentsService.onThreadsChanged((thread) => {
@@ -136,9 +134,10 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     this.onDidChangeEmitter.fire();
   }
 
-  @action
   updateComments(comments: IThreadComment[]) {
-    this.comments = comments;
+    transaction((tx) => {
+      this.comments.set(comments, tx);
+    });
   }
 
   getWidgetByEditor(editor: IEditor): ICommentsZoneWidget | undefined {
@@ -153,28 +152,26 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     return this._contextKeyService;
   }
 
-  @computed
-  get readOnly() {
-    return this._readOnly;
-  }
-
-  set readOnly(readOnly: boolean) {
-    runInAction(() => (this._readOnly = readOnly));
-    this._contextKeyService.createKey<boolean>('readOnly', this._readOnly);
+  setReadOnly(readOnly: boolean) {
+    transaction((tx) => {
+      this.readOnly.set(readOnly, tx);
+      this._contextKeyService.createKey<boolean>('readOnly', readOnly);
+    });
   }
 
-  @computed
-  get threadHeaderTitle() {
-    if (this.label) {
-      return this.label;
+  readonly threadHeaderTitle = derived(this, (reader) => {
+    const label = this.label.read(reader);
+    if (label) {
+      return label;
     }
-    if (this.comments.length) {
-      const commentAuthors = new Set<string>(this.comments.map((comment) => `@${comment.author.name}`));
+    const comments = this.comments.read(reader);
+    if (comments.length) {
+      const commentAuthors = new Set<string>(comments.map((comment) => `@${comment.author.name}`));
       return `${localize('comments.participants')}: ` + [...commentAuthors].join(' ');
     } else {
       return localize('comments.zone.title');
     }
-  }
+  });
 
   private getEditorsByUri(uri: URI): IEditor[] {
     return this.editorCollectionService.listEditors().filter((editor) => editor.currentUri?.isEqual(uri));
@@ -207,7 +204,8 @@ export class CommentsThread extends Disposable implements ICommentsThread {
   }
 
   public toggle = (editor: IEditor) => {
-    if (this.comments.length > 0) {
+    const comments = this.comments.get();
+    if (comments.length > 0) {
       const widget = this.widgets.get(editor);
       if (widget) {
         widget.toggle();
@@ -283,18 +281,20 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     }
   }
 
-  @action
   public showAll() {
-    this.isCollapsed = false;
+    transaction((tx) => {
+      this.isCollapsed.set(false, tx);
+    });
     for (const [, widget] of this.widgets) {
       widget.show();
     }
     this.onDidChangeCollapsibleStateEmitter.fire(CommentThreadCollapsibleState.Expanded);
   }
 
-  @action
   public hideAll(isDospose?: boolean) {
-    this.isCollapsed = true;
+    transaction((tx) => {
+      this.isCollapsed.set(true, tx);
+    });
     for (const [editor, widget] of this.widgets) {
       if (isDospose) {
         // 如果 thread 出现在当前 editor 则不隐藏
@@ -306,23 +306,32 @@ export class CommentsThread extends Disposable implements ICommentsThread {
     this.onDidChangeCollapsibleStateEmitter.fire(CommentThreadCollapsibleState.Collapsed);
   }
 
-  @action
   public addComment(...comments: IComment[]) {
-    this.comments.push(
-      ...comments.map((comment) => ({
-        ...comment,
-        id: uuid(),
-      })),
-    );
+    const preComments = this.comments.get();
+
+    transaction((tx) => {
+      this.comments.set(
+        [
+          ...preComments,
+          ...comments.map((comment) => ({
+            ...comment,
+            id: uuid(),
+          })),
+        ],
+        tx,
+      );
+    });
+
     this.onDidChangeEmitter.fire();
   }
 
-  @action
   public removeComment(comment: IComment) {
-    const index = this.comments.findIndex((c) => c === comment);
-    if (index !== -1) {
-      this.comments.splice(index, 1);
-    }
+    transaction((tx) => {
+      this.comments.set(
+        this.comments.get().filter((c) => c !== comment),
+        tx,
+      );
+    });
     this.onDidChangeEmitter.fire();
   }
 

package/src/browser/comments-zone.view.tsx

@@ -1,10 +1,17 @@
 import cls from 'classnames';
-import { observer } from 'mobx-react-lite';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import { Autowired, INJECTOR_TOKEN, Injectable } from '@opensumi/di';
-import { AppConfig, ConfigProvider, Emitter, Event, localize, useInjectable } from '@opensumi/ide-core-browser';
+import {
+  AppConfig,
+  ConfigProvider,
+  Emitter,
+  Event,
+  localize,
+  useAutorun,
+  useInjectable,
+} from '@opensumi/ide-core-browser';
 import { InlineActionBar } from '@opensumi/ide-core-browser/lib/components/actions';
 import { MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
 import { IEditor } from '@opensumi/ide-editor';
@@ -28,8 +35,11 @@ export interface ICommentProps {
   widget: ICommentsZoneWidget;
 }
 
-const CommentsZone: React.FC<ICommentProps> = observer(({ thread, widget }) => {
-  const { comments, threadHeaderTitle, contextKeyService } = thread;
+const CommentsZone: React.FC<ICommentProps> = ({ thread, widget }) => {
+  const { contextKeyService } = thread;
+  const comments = useAutorun(thread.comments);
+  const threadHeaderTitle = useAutorun(thread.threadHeaderTitle);
+
   const injector = useInjectable(INJECTOR_TOKEN);
   const commentsZoneService: CommentsZoneService = injector.get(CommentsZoneService, [thread]);
   const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
@@ -154,7 +164,7 @@ const CommentsZone: React.FC<ICommentProps> = observer(({ thread, widget }) => {
       </div>
     </div>
   );
-});
+};
 
 @Injectable({ multiple: true })
 export class CommentsZoneWidget extends ResizeZoneWidget implements ICommentsZoneWidget {
@@ -182,7 +192,7 @@ export class CommentsZoneWidget extends ResizeZoneWidget implements ICommentsZon
     });
     this._editor = editor;
     this._wrapper = document.createElement('div');
-    this._isShow = !thread.isCollapsed;
+    this._isShow = !thread.isCollapsed.get();
     this._container.appendChild(this._wrapper);
     this.observeContainer(this._wrapper);
     const customRender = this.commentsFeatureRegistry.getZoneWidgetRender();

package/src/browser/comments.contribution.ts

@@ -101,7 +101,7 @@ export class CommentsBrowserContribution
       {
         execute: (threadTitle: ICommentThreadTitle) => {
           const { thread, widget } = threadTitle;
-          if (!thread.comments.length) {
+          if (!thread.comments.get().length) {
             thread.dispose();
           } else {
             if (widget.isShow) {

package/src/browser/comments.service.ts

@@ -160,8 +160,8 @@ export class CommentsService extends Disposable implements ICommentsService {
    */
   private createThreadDecoration(thread: ICommentsThread): model.IModelDecorationOptions {
     // 对于新增的空的 thread，默认显示当前用户的头像，否则使用第一个用户的头像
-    const avatar =
-      thread.comments.length === 0 ? this.currentAuthorAvatar : thread.comments[0].author.iconPath?.toString();
+    const comments = thread.comments.get();
+    const avatar = comments.length === 0 ? this.currentAuthorAvatar : comments[0].author.iconPath?.toString();
     const icon = avatar
       ? `${this.iconService.fromIcon('', avatar, IconType.Background)} avatar-icon`
       : this.iconService.fromString('$(comment)');
@@ -190,7 +190,7 @@ export class CommentsService extends Disposable implements ICommentsService {
 
     if (thread) {
       const range = thread.range;
-      if (!thread.isCollapsed) {
+      if (!thread.isCollapsed.get()) {
         this.currentThreadCollapseStateListener = thread.onDidChangeCollapsibleState((state) => {
           if (state === CommentThreadCollapsibleState.Collapsed) {
             this.updateActiveThreadDecoration(undefined);
@@ -375,7 +375,7 @@ export class CommentsService extends Disposable implements ICommentsService {
             if (
               !this.commentsThreads.some(
                 (thread) =>
-                  thread.comments.length === 0 &&
+                  thread.comments.get().length === 0 &&
                   editor.currentUri &&
                   thread.uri.isEqual(editor.currentUri) &&
                   thread.range.startLineNumber === range.startLineNumber &&
@@ -399,7 +399,7 @@ export class CommentsService extends Disposable implements ICommentsService {
             if (
               !this.commentsThreads.some(
                 (thread) =>
-                  thread.comments.length === 0 &&
+                  thread.comments.get().length === 0 &&
                   editor.currentUri &&
                   thread.uri.isEqual(editor.currentUri) &&
                   thread.range.startLineNumber === range.startLineNumber &&
@@ -568,7 +568,7 @@ export class CommentsService extends Disposable implements ICommentsService {
     const shouldShowComments = editor.currentUri ? this.shouldShowCommentsSchemes.has(editor.currentUri.scheme) : false;
 
     const hasComments = this.commentsThreads.some(
-      (thread) => editor.currentUri && thread.uri.isEqual(editor.currentUri) && thread.comments.length > 0,
+      (thread) => editor.currentUri && thread.uri.isEqual(editor.currentUri) && thread.comments.get().length > 0,
     );
 
     const hasCommentsOrRanges = shouldShowComments || hasComments;
@@ -863,7 +863,7 @@ export class CommentsService extends Disposable implements ICommentsService {
   public handleCommentFileNode(parent: CommentRoot): CommentFileNode[] {
     const childs: CommentFileNode[] = [];
 
-    const commentThreads = [...this.threads.values()].filter((thread) => thread.comments.length);
+    const commentThreads = [...this.threads.values()].filter((thread) => thread.comments.get().length);
     const threadUris = groupBy(commentThreads, (thread: ICommentsThread) => thread.uri);
     Object.keys(threadUris).map((uri) => {
       const threads: ICommentsThread[] = threadUris[uri];
@@ -893,7 +893,8 @@ export class CommentsService extends Disposable implements ICommentsService {
     const childs: CommentContentNode[] = [];
 
     for (const thread of (parent as CommentFileNode).threads) {
-      const [first] = thread.comments;
+      const comments = thread.comments.get();
+      const [first] = comments;
       const comment = typeof first.body === 'string' ? first.body : first.body.value;
       let description = `[Ln ${thread.range.startLineNumber}]`;
       if (thread.range.startLineNumber !== thread.range.endLineNumber) {
@@ -922,7 +923,8 @@ export class CommentsService extends Disposable implements ICommentsService {
     const childs: CommentReplyNode[] = [];
 
     const thread = parent.thread;
-    const [_, ...others] = thread.comments;
+    const comments = thread.comments.get();
+    const [_, ...others] = comments;
     const lastReply = others[others.length - 1].author.name;
     childs.push(
       new CommentReplyNode(
@@ -1020,7 +1022,7 @@ export class CommentsService extends Disposable implements ICommentsService {
         this.commentsThreads
           .map((thread) => {
             if (thread.uri.isEqual(uri)) {
-              if (thread.comments.length) {
+              if (thread.comments.get().length) {
                 // 存在评论内容 恢复之前的现场
                 thread.showWidgetsIfShowed();
               }

package/src/common/index.ts

@@ -11,6 +11,7 @@ import {
   URI,
 } from '@opensumi/ide-core-browser';
 import { IEditor } from '@opensumi/ide-editor';
+import { IObservable, ISettableObservable } from '@opensumi/ide-monaco/lib/common/observable';
 
 import type { ITree, ITreeNode } from '@opensumi/ide-components';
 import type { IEditorDocumentModel } from '@opensumi/ide-editor/lib/common/editor';
@@ -470,7 +471,7 @@ export interface ICommentsThread extends IDisposable {
   /**
    * 评论
    */
-  comments: IThreadComment[];
+  comments: IObservable<IThreadComment[]>;
   /**
    * 当前 thread 的 uri
    */
@@ -482,7 +483,7 @@ export interface ICommentsThread extends IDisposable {
   /**
    * 是否折叠，默认为 false
    */
-  isCollapsed: boolean;
+  isCollapsed: ISettableObservable<boolean>;
   /**
    * 附属数据
    */
@@ -494,7 +495,7 @@ export interface ICommentsThread extends IDisposable {
   /**
    * 在 header 组件显示的文案
    */
-  label?: string;
+  label?: ISettableObservable<string | undefined>;
   /**
    * thread 参数
    */
@@ -502,11 +503,11 @@ export interface ICommentsThread extends IDisposable {
   /**
    * thread 头部文案
    */
-  threadHeaderTitle: string;
+  threadHeaderTitle: IObservable<string>;
   /**
    * 是否是只读
    */
-  readOnly: boolean;
+  readOnly: IObservable<boolean>;
   /**
    * 评论面板的 context key service
    */
@@ -582,6 +583,10 @@ export interface ICommentsThread extends IDisposable {
    * dispise 时会执行
    */
   onDispose: Event<void>;
+  /**
+   * 设置只读状态
+   */
+  setReadOnly(readOnly: boolean): void;
 }
 
 export interface ICommentsThreadOptions {