refactor: remove scm mobx

opensumi · Nov 1, 2024 · 4f4f5ca · 4f4f5ca
1 parent f4d8aaa
commit 4f4f5ca
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 40 deletions.
diff --git a/packages/scm/src/browser/components/scm-resource-tree/index.tsx b/packages/scm/src/browser/components/scm-resource-tree/index.tsx
@@ -2,7 +2,7 @@ import cls from 'classnames';
 import React, { FC, memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import { IRecycleTreeHandle, RecycleTree, TreeModel, TreeNodeType } from '@opensumi/ide-components';
-import { IDisposable, isOSX } from '@opensumi/ide-core-browser';
+import { IDisposable, isOSX, useAutorun } from '@opensumi/ide-core-browser';
 import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks';
 
 import { ViewModelContext } from '../../scm-model';
@@ -194,6 +194,8 @@ const SCMTreeView = memo(
     onContextMenu,
   }: TreeViewProps) => {
     const scmTreeModelService = useInjectable<SCMTreeModelService>(SCMTreeModelService);
+    const iconThemeDesc = useAutorun(scmTreeModelService.iconThemeDesc);
+
     const scmTreeService = useInjectable<SCMTreeService>(SCMTreeService);
     const renderSCMTreeNode = useCallback(
       (props: ISCMTreeNodeProps) => (
@@ -210,10 +212,10 @@ const SCMTreeView = memo(
           onContextMenu={onContextMenu}
           defaultLeftPadding={scmTreeService.isTreeMode ? -4 : 4}
           leftPadding={scmTreeService.isTreeMode ? 8 : 0}
-          iconTheme={scmTreeModelService.iconThemeDesc}
+          iconTheme={iconThemeDesc}
         />
       ),
-      [model, scmTreeService, scmTreeModelService],
+      [model, scmTreeService, scmTreeModelService, iconThemeDesc],
     );
 
     if (isReady && !!model) {

diff --git a/packages/scm/src/browser/components/scm-resource-tree/scm-tree-model.service.ts b/packages/scm/src/browser/components/scm-resource-tree/scm-tree-model.service.ts
@@ -1,5 +1,3 @@
-import { makeObservable, observable } from 'mobx';
-
 import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
 import { Decoration, DecorationsManager, IRecycleTreeHandle, TreeNodeType } from '@opensumi/ide-components';
 import {
@@ -19,6 +17,7 @@ import { ICtxMenuRenderer } from '@opensumi/ide-core-browser/lib/menu/next/rende
 import { IProgressService } from '@opensumi/ide-core-browser/lib/progress';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { observableValue, transaction } from '@opensumi/ide-monaco/lib/common/observable';
 import { IIconService, IIconTheme } from '@opensumi/ide-theme';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
 
@@ -128,10 +127,6 @@ export class SCMTreeModelService {
     }
   > = new Map();
 
-  constructor() {
-    makeObservable(this);
-  }
-
   init() {
     this.showProgress((this._whenReady = this.initTreeModel(this.scmTreeService.isTreeMode)));
     this._whenReady.then(() => {
@@ -178,16 +173,19 @@ export class SCMTreeModelService {
     );
   }
 
-  @observable.deep
-  public iconThemeDesc: Pick<IIconTheme, 'hasFileIcons' | 'hasFolderIcons' | 'hidesExplorerArrows'> =
-    defaultIconThemeDesc;
+  public readonly iconThemeDesc = observableValue(this, defaultIconThemeDesc);
 
   private setIconThemeDesc(theme: IIconTheme) {
-    this.iconThemeDesc = {
-      hasFolderIcons: !!theme.hasFolderIcons,
-      hasFileIcons: !!theme.hasFileIcons,
-      hidesExplorerArrows: !!theme.hidesExplorerArrows,
-    };
+    transaction((tx) => {
+      this.iconThemeDesc.set(
+        {
+          hasFolderIcons: !!theme.hasFolderIcons,
+          hasFileIcons: !!theme.hasFileIcons,
+          hidesExplorerArrows: !!theme.hidesExplorerArrows,
+        },
+        tx,
+      );
+    });
   }
 
   private showProgress(promise: Promise<any>) {

diff --git a/packages/scm/src/browser/scm-model.ts b/packages/scm/src/browser/scm-model.ts
@@ -1,5 +1,3 @@
-import { action, makeObservable, observable } from 'mobx';
-
 import { Autowired, Injectable } from '@opensumi/di';
 import { PreferenceService } from '@opensumi/ide-core-browser';
 import {
@@ -16,6 +14,7 @@ import {
   dispose,
   toDisposable,
 } from '@opensumi/ide-core-common';
+import { observableValue, transaction } from '@opensumi/ide-monaco/lib/common/observable';
 
 import { ISCMMenus, ISCMRepository, ISCMResource, ISCMResourceGroup, SCMService } from '../common';
 
@@ -244,14 +243,12 @@ export class ViewModelContext extends Disposable {
 
   private _currentWorkspace: Uri;
 
-  @observable
-  public selectedRepos = observable.array<ISCMRepository>([]);
+  public readonly selectedRepos = observableValue<ISCMRepository[]>(this, []);
 
   public alwaysShowActions: boolean;
 
   constructor() {
     super();
-    makeObservable(this);
     this.start();
 
     this.initTreeAlwaysShowActions();
@@ -396,9 +393,10 @@ export class ViewModelContext extends Disposable {
     this.onDidSCMRepoListChangeEmitter.fire(this.repoList);
   }
 
-  @action
   private changeSelectedRepos(repos: ISCMRepository[]) {
-    this.selectedRepos.replace(repos);
+    transaction((tx) => {
+      this.selectedRepos.set(repos, tx);
+    });
     const selectedRepo = repos[0];
     this.selectedRepo = selectedRepo;
     this.onDidSelectedRepoChangeEmitter.fire(selectedRepo);

diff --git a/packages/scm/src/browser/scm-view-container.tsx b/packages/scm/src/browser/scm-view-container.tsx
@@ -1,7 +1,6 @@
-import { observer } from 'mobx-react-lite';
 import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { AppConfig, IContextKeyService, View, ViewState, useInjectable } from '@opensumi/ide-core-browser';
+import { IContextKeyService, View, ViewState, useAutorun, useInjectable } from '@opensumi/ide-core-browser';
 import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
 import { LayoutViewSizeConfig } from '@opensumi/ide-core-browser/lib/layout/constants';
 import { IContextMenu, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
@@ -26,7 +25,7 @@ const SCM_EXTRA_PADDING_TOP = 10;
 export const SCMResourcesView: FC<{
   repository: ISCMRepository;
   viewState: ViewState;
-}> = observer(({ repository, viewState }) => {
+}> = ({ repository, viewState }) => {
   const contextKeyService = useInjectable<IContextKeyService>(IContextKeyService);
   const menuRegistry = useInjectable<IMenuRegistry>(IMenuRegistry);
   const viewModel = useInjectable<ViewModelContext>(ViewModelContext);
@@ -118,24 +117,25 @@ export const SCMResourcesView: FC<{
       </div>
     </div>
   );
-});
+};
 
 SCMResourcesView.displayName = 'SCMResourcesView';
 
-export const SCMResourcesViewWrapper: FC<{ viewState: ViewState }> = observer((props) => {
+export const SCMResourcesViewWrapper: FC<{ viewState: ViewState }> = (props) => {
   const viewModel = useInjectable<ViewModelContext>(ViewModelContext);
+  const selectedRepos = useAutorun(viewModel.selectedRepos);
 
-  if (!viewModel.selectedRepos.length) {
+  if (!selectedRepos.length) {
     return <WelcomeView viewId={SCM_WELCOME_ID} />;
   }
-  const selectedRepo = viewModel.selectedRepos[0];
+  const selectedRepo = selectedRepos[0];
 
   if (!selectedRepo || !selectedRepo.provider) {
     return null;
   }
 
   return <SCMResourcesView repository={selectedRepo} viewState={props.viewState} />;
-});
+};
 
 SCMResourcesViewWrapper.displayName = 'SCMResourcesViewWrapper';
 

diff --git a/packages/scm/src/common/scm.service.ts b/packages/scm/src/common/scm.service.ts
@@ -1,5 +1,3 @@
-import { action, computed, makeObservable, observable } from 'mobx';
-
 import { Injectable } from '@opensumi/di';
 import { IInputBaseProps } from '@opensumi/ide-components';
 import {
@@ -131,10 +129,8 @@ class SCMRepository implements ISCMRepository, IDisposable {
   private _onDidFocus = this._disposables.add(new Emitter<void>());
   readonly onDidFocus: Event<void> = this._onDidFocus.event;
 
-  @observable
   private _selected = false;
 
-  @computed
   get selected(): boolean {
     return this._selected;
   }
@@ -144,15 +140,12 @@ class SCMRepository implements ISCMRepository, IDisposable {
 
   readonly input: ISCMInput = new SCMInput();
 
-  constructor(public readonly provider: ISCMProvider, private disposable: IDisposable) {
-    makeObservable(this);
-  }
+  constructor(public readonly provider: ISCMProvider, private disposable: IDisposable) {}
 
   focus(): void {
     this._onDidFocus.fire();
   }
 
-  @action
   setSelected(selected: boolean): void {
     this._selected = selected;
     this._onDidChangeSelection.fire(this);