@opensumi/ide-preferences 2.27.3-rc-1708395495.0 → 2.27.3-rc-1710386185.0

package/src/browser/preferences.view.tsx

@@ -1,30 +1,30 @@
 import debounce from 'lodash/debounce';
-import { toJS, observable } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import {
-  Input,
-  ComponentContextProvider,
-  Tabs,
-  IIconResourceOptions,
   BasicRecycleTree,
+  ComponentContextProvider,
   IBasicTreeData,
+  IIconResourceOptions,
+  Input,
+  Tabs,
 } from '@opensumi/ide-components';
 import { VirtualList } from '@opensumi/ide-components/lib/virtual-list';
 import { IVirtualListRange } from '@opensumi/ide-components/lib/virtual-list/types';
 import {
-  useInjectable,
-  localize,
-  formatLocalize,
-  ISettingGroup,
+  Disposable,
   IPreferenceSettingsService,
+  IResolvedSettingSection,
+  ISettingGroup,
   ISettingSection,
-  getIcon,
-  URI,
   LabelService,
-  IResolvedSettingSection,
+  URI,
+  formatLocalize,
+  getIcon,
+  localize,
+  useEventDrivenState,
+  useInjectable,
 } from '@opensumi/ide-core-browser';
 import { EDirection } from '@opensumi/ide-core-browser/lib/components/index';
 import { SplitPanel } from '@opensumi/ide-core-browser/lib/components/layout/split-panel';
@@ -46,24 +46,135 @@ interface IPreferenceTreeData extends IBasicTreeData {
 const TREE_NAME = 'preferenceViewIndexTree';
 const kBaseIndent = 8;
 
-const usePreferenceGroups = () => {
+export const PreferenceView: ReactEditorComponent<null> = () => {
   const preferenceService: PreferenceSettingsService = useInjectable(IPreferenceSettingsService);
-  const [groups, setGroups] = useState<ISettingGroup[]>([]);
+  const [items, setItems] = useState<ISectionItemData[]>([]);
+  const [treeData, setTreeData] = useState<IPreferenceTreeData[]>([]);
 
   const updateGroup = useThrottleFn(() => {
-    const _groups = preferenceService.getSettingGroups(preferenceService.currentScope, preferenceService.currentSearch);
-    const oldGroupKey = groups.map((n) => n.id).join(',');
-    const newGroupKey = _groups.map((n) => n.id).join(',');
-    if (oldGroupKey !== newGroupKey) {
-      const groupsStore = observable(_groups);
-      setGroups(toJS(groupsStore));
+    const currentScope = preferenceService.currentScope;
+    const currentSearch = preferenceService.currentSearch;
+    const newGroups = preferenceService.getSettingGroups(currentScope, currentSearch);
+
+    // 如果是搜索模式，是只展示用户左侧选择的组的内容
+    const items: ISectionItemData[] = [];
+    const treeData: IPreferenceTreeData[] = [];
+
+    for (let index = 0; index < newGroups.length; index++) {
+      const g = newGroups[index];
+      const sections = preferenceService.getResolvedSections(g.id, currentScope, currentSearch);
+
+      items.push(...collectGroup(g, sections));
+      treeData.push(collectTreeData(index, g, sections));
+    }
+
+    setItems(items);
+    setTreeData(treeData);
+
+    function collectGroup(group: ISettingGroup, sections: IResolvedSettingSection[]) {
+      const groupItems = [] as ISectionItemData[];
+
+      const collectItem = (section: IResolvedSettingSection, prefix = '') => {
+        let currentItemPath = prefix;
+        if (section.title) {
+          currentItemPath = prefix + '/' + section.title;
+        }
+
+        const innerItems = [] as ISectionItemData[];
+
+        if (section.component) {
+          innerItems.push({
+            component: section.component,
+            scope: currentScope,
+          });
+        } else if (section.preferences) {
+          innerItems.push(
+            ...section.preferences.map((pre) => ({
+              id: ESectionItemKind.Preference + pre.id,
+              preference: pre,
+              scope: currentScope,
+              _path: currentItemPath,
+            })),
+          );
+        } else if (section.subSections) {
+          section.subSections.forEach((v) => {
+            const _items = collectItem(v, currentItemPath);
+            innerItems.push(..._items);
+          });
+        }
+
+        // 如果该 section 有选项，填入一个 title
+        if (innerItems.length > 0 && section.title) {
+          innerItems.unshift({
+            id: ESectionItemKind.Section + section.title,
+            title: section.title,
+            scope: currentScope,
+            _path: currentItemPath,
+          });
+        }
+
+        return innerItems;
+      };
+
+      for (const section of sections) {
+        const _items = collectItem(section, group.title);
+        groupItems.push(..._items);
+      }
+
+      // 如果该 group 有选项，填入一个 title
+      if (groupItems.length > 0 && group.title) {
+        groupItems.unshift({
+          title: group.title,
+          id: ESectionItemKind.Group + group.id,
+          scope: currentScope,
+          _path: group.title,
+        });
+      }
+      return groupItems;
+    }
+    function collectTreeData(index: number, group: ISettingGroup, sections: IResolvedSettingSection[]) {
+      const { id, title, iconClass } = group;
+      const data = {
+        label: toNormalCase(title),
+        iconClassName: iconClass,
+        groupId: id,
+        order: index,
+        className: styles.group_item,
+      } as IPreferenceTreeData;
+      const children = [] as IPreferenceTreeData[];
+      sections.forEach((sec, i) => {
+        const _treeData = parseTreeData(id, sec, i, 1);
+        if (_treeData) {
+          children.push(_treeData);
+        }
+      });
+      // 要传这个，让 BasicTree 认为这是文件夹以保持排列顺序
+      data.children = children;
+      if (children.length > 0) {
+        data.expandable = true;
+      } else {
+        data.expandable = false;
+      }
+      return data;
     }
   }, 16);
 
   useEffect(() => {
-    const dispose = preferenceService.onSettingsGroupsChange(() => {
-      updateGroup.run();
-    });
+    const dispose = new Disposable(
+      preferenceService.emitter.on('settingsGroupsChange', () => {
+        updateGroup.run();
+      }),
+      preferenceService.emitter.on('currentSearchChange', () => {
+        updateGroup.run();
+      }),
+      preferenceService.emitter.on('currentScopeChange', () => {
+        updateGroup.run();
+      }),
+      preferenceService.emitter.on('settingsSectionsChange', () => {
+        updateGroup.run();
+      }),
+    );
+
     updateGroup.run();
 
     return () => {
@@ -71,29 +182,13 @@ const usePreferenceGroups = () => {
     };
   }, []);
 
-  useEffect(() => {
-    updateGroup.run();
-  }, [
-    preferenceService.settingsGroups.length,
-    preferenceService.getSettingGroups,
-    preferenceService.currentScope,
-    preferenceService.currentSearch,
-    preferenceService.settingsSections,
-  ]);
-
-  return groups;
-};
-
-export const PreferenceView: ReactEditorComponent<null> = observer(() => {
-  const preferenceService: PreferenceSettingsService = useInjectable(IPreferenceSettingsService);
-  const groups = usePreferenceGroups();
   const labelService = useInjectable<LabelService>(LabelService);
-  const getResourceIcon = React.useCallback(
+  const getResourceIcon = useCallback(
     (uri: string, options: IIconResourceOptions) => labelService.getIcon(URI.parse(uri), options),
     [],
   );
 
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   const debouncedSearch = debounce(
     (value: string) => {
@@ -103,7 +198,7 @@ export const PreferenceView: ReactEditorComponent<null> = observer(() => {
     { maxWait: 300 },
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     const focusDispose = preferenceService.onFocus(() => {
       if (inputRef && inputRef.current) {
         inputRef.current.focus();
@@ -115,22 +210,31 @@ export const PreferenceView: ReactEditorComponent<null> = observer(() => {
     };
   }, []);
 
+  const currentSearch = useEventDrivenState(
+    preferenceService.emitter,
+    'currentSearchChange',
+    () => preferenceService.currentSearch,
+  );
+
+  const tabList = useEventDrivenState(preferenceService.emitter, 'tabListChange', () => preferenceService.tabList);
+  const tabIndex = useEventDrivenState(preferenceService.emitter, 'tabIndexChange', () => preferenceService.tabIndex);
+
   return (
     <ComponentContextProvider value={{ getIcon, localize, getResourceIcon }}>
       <div className={styles.preferences}>
         <div className={styles.preferences_header}>
           <Tabs
             className={styles.tabs}
-            value={preferenceService.tabIndex}
+            value={tabIndex}
             onChange={(index: number) => {
-              preferenceService.tabIndex = index;
+              preferenceService.updateTabIndex(index);
             }}
-            tabs={preferenceService.tabList.map((n) => localize(n.label))}
+            tabs={tabList.map((n) => localize(n.label))}
           />
           <div className={styles.search_pref}>
             <Input
               autoFocus
-              value={preferenceService.currentSearch}
+              value={currentSearch}
               placeholder={localize('preference.searchPlaceholder')}
               onValueChange={debouncedSearch}
               ref={inputRef}
@@ -138,27 +242,25 @@ export const PreferenceView: ReactEditorComponent<null> = observer(() => {
             />
           </div>
         </div>
-        {groups.length > 0 ? (
+        {items.length > 0 ? (
           <SplitPanel
             id='preference-panel'
             resizeHandleClassName={styles.devider}
             className={styles.preferences_body}
             direction={EDirection.LeftToRight}
           >
-            <PreferenceIndexes data-sp-defaultSize={180} data-sp-minSize={150} />
-            <PreferenceBody data-sp-flex={1} />
+            <PreferenceIndexes treeData={treeData} data-sp-defaultSize={180} data-sp-minSize={150} />
+            <PreferenceBody tabIndex={tabIndex} items={items} data-sp-flex={1} />
           </SplitPanel>
         ) : (
           <div className={styles.preference_noResults}>
-            {preferenceService.currentSearch
-              ? formatLocalize('preference.noResults', preferenceService.currentSearch)
-              : formatLocalize('preference.empty')}
+            {currentSearch ? formatLocalize('preference.noResults', currentSearch) : formatLocalize('preference.empty')}
           </div>
         )}
       </div>
     </ComponentContextProvider>
   );
-});
+};
 
 export const PreferenceItem = ({ data, index }: { data: ISectionItemData; index: number }) => {
   if (data.title) {
@@ -215,45 +317,13 @@ const parseTreeData = (id: string, section: ISettingSection, order: number, dept
   return innerTreeData;
 };
 
-const PreferenceIndexes = observer(() => {
-  const preferenceService: PreferenceSettingsService = useInjectable(IPreferenceSettingsService);
-  const groups = usePreferenceGroups();
-
-  const treeData = React.useMemo(() => {
-    if (!groups || groups.length === 0) {
-      return [];
-    }
-
-    const basicTreeData = [] as IPreferenceTreeData[];
-    for (let index = 0; index < groups.length; index++) {
-      const { id, title, iconClass } = groups[index];
-      const data = {
-        label: toNormalCase(title),
-        iconClassName: iconClass,
-        groupId: id,
-        order: index,
-        className: styles.group_item,
-      } as IPreferenceTreeData;
-      const children = [] as IPreferenceTreeData[];
-      const sections = preferenceService.getResolvedSections(id);
-      sections.forEach((sec, i) => {
-        const _treeData = parseTreeData(id, sec, i, 1);
-        if (_treeData) {
-          children.push(_treeData);
-        }
-      });
-      // 要传这个，让 BasicTree 认为这是文件夹以保持排列顺序
-      data.children = children;
-      if (children.length > 0) {
-        data.expandable = true;
-      } else {
-        data.expandable = false;
-      }
-      basicTreeData.push(data);
-    }
+interface PreferenceIndexesProps {
+  treeData: IPreferenceTreeData[];
+}
 
-    return basicTreeData;
-  }, [groups, preferenceService.getResolvedSections, preferenceService.currentScope, preferenceService.currentSearch]);
+const PreferenceIndexes = (props: PreferenceIndexesProps) => {
+  const preferenceService: PreferenceSettingsService = useInjectable(IPreferenceSettingsService);
+  const { treeData } = props;
 
   return (
     <AutoSizer className={styles.preferences_indexes}>
@@ -289,90 +359,24 @@ const PreferenceIndexes = observer(() => {
       )}
     </AutoSizer>
   );
-});
+};
 
-export const PreferenceBody = observer(() => {
+interface PreferenceBodyProps {
+  tabIndex: number;
+  items: ISectionItemData[];
+}
+
+const PreferenceBody = (props: PreferenceBodyProps) => {
   const preferenceService: PreferenceSettingsService = useInjectable(IPreferenceSettingsService);
-  const groups = usePreferenceGroups();
   const [focusItem, setFocusItem] = useState<string | undefined>(undefined);
 
-  React.useEffect(() => {
+  const { items } = props;
+
+  useEffect(() => {
     if (focusItem && preferenceService.treeHandler?.focusItem) {
       preferenceService.treeHandler.focusItem(focusItem);
     }
-  }, [preferenceService.tabIndex, preferenceService.treeHandler, focusItem]);
-
-  const items = React.useMemo(() => {
-    // 如果是搜索模式，是只展示用户左侧选择的组的内容
-    const result: ISectionItemData[] = [];
-    groups.forEach((v) => {
-      result.push(...collectGroup(v));
-    });
-    return result;
-
-    function collectGroup(group: ISettingGroup) {
-      const groupItems = [] as ISectionItemData[];
-      const sections = preferenceService.getResolvedSections(group.id);
-
-      const collectItem = (section: IResolvedSettingSection, prefix = '') => {
-        let currentItemPath = prefix;
-        if (section.title) {
-          currentItemPath = prefix + '/' + section.title;
-        }
-
-        const innerItems = [] as ISectionItemData[];
-
-        if (section.component) {
-          innerItems.push({
-            component: section.component,
-            scope: preferenceService.currentScope,
-          });
-        } else if (section.preferences) {
-          innerItems.push(
-            ...section.preferences.map((pre) => ({
-              id: ESectionItemKind.Preference + pre.id,
-              preference: pre,
-              scope: preferenceService.currentScope,
-              _path: currentItemPath,
-            })),
-          );
-        } else if (section.subSections) {
-          section.subSections.forEach((v) => {
-            const _items = collectItem(v, currentItemPath);
-            innerItems.push(..._items);
-          });
-        }
-
-        // 如果该 section 有选项，填入一个 title
-        if (innerItems.length > 0 && section.title) {
-          innerItems.unshift({
-            id: ESectionItemKind.Section + section.title,
-            title: section.title,
-            scope: preferenceService.currentScope,
-            _path: currentItemPath,
-          });
-        }
-
-        return innerItems;
-      };
-
-      for (const section of sections) {
-        const _items = collectItem(section, group.title);
-        groupItems.push(..._items);
-      }
-
-      // 如果该 group 有选项，填入一个 title
-      if (groupItems.length > 0 && group.title) {
-        groupItems.unshift({
-          title: group.title,
-          id: ESectionItemKind.Group + group.id,
-          scope: preferenceService.currentScope,
-          _path: group.title,
-        });
-      }
-      return groupItems;
-    }
-  }, [groups, preferenceService.getResolvedSections, preferenceService.currentScope, preferenceService.currentSearch]);
+  }, [props.tabIndex, preferenceService.treeHandler, focusItem]);
 
   const navigateTo = (id: string) => {
     if (id) {
@@ -405,11 +409,17 @@ export const PreferenceBody = observer(() => {
     },
   );
 
-  React.useEffect(() => {
-    if (preferenceService.currentSelectId) {
-      navigateTo(preferenceService.currentSelectId);
+  const currentSelectId = useEventDrivenState(
+    preferenceService.emitter,
+    'currentSelectIdChange',
+    () => preferenceService.currentSelectId,
+  );
+
+  useEffect(() => {
+    if (currentSelectId) {
+      navigateTo(currentSelectId);
     }
-  }, [items, preferenceService.currentSelectId]);
+  }, [items, currentSelectId]);
 
   return (
     <div className={styles.preferences_items}>
@@ -422,4 +432,4 @@ export const PreferenceBody = observer(() => {
       />
     </div>
   );
-});
+};

package/src/browser/userstorage/user-storage.contribution.ts

@@ -1,5 +1,5 @@
 import { Autowired } from '@opensumi/di';
-import { Domain, ClientAppContribution, Schemes } from '@opensumi/ide-core-browser';
+import { ClientAppContribution, Domain, Schemes } from '@opensumi/ide-core-browser';
 import { IFileServiceClient } from '@opensumi/ide-file-service';
 import { FileServiceClient } from '@opensumi/ide-file-service/lib/browser/file-service-client';
 

package/src/browser/userstorage/user-storage.service.ts

@@ -1,19 +1,18 @@
 import merge from 'lodash/merge';
 
-import { Injectable, Autowired } from '@opensumi/di';
+import { Autowired, Injectable } from '@opensumi/di';
 import {
+  AppConfig,
   DisposableCollection,
-  ILogger,
   Emitter,
+  FileChangeEvent,
+  FileType,
+  ILogger,
   URI,
-  AppConfig,
   Uri,
-  FileType,
-  FileChangeEvent,
 } from '@opensumi/ide-core-browser';
 import { Event, FileSystemProviderCapabilities, Schemes } from '@opensumi/ide-core-common';
-import { FileSetContentOptions } from '@opensumi/ide-file-service/lib/common';
-import { IFileServiceClient } from '@opensumi/ide-file-service/lib/common';
+import { FileSetContentOptions, IFileServiceClient } from '@opensumi/ide-file-service/lib/common';
 
 import { IUserStorageService } from '../../common';
 

package/src/browser/workspace-preference-provider.ts

@@ -1,6 +1,6 @@
-import { Injectable, Autowired } from '@opensumi/di';
-import { URI, DisposableCollection } from '@opensumi/ide-core-browser';
-import { PreferenceScope, PreferenceProvider } from '@opensumi/ide-core-browser/lib/preferences';
+import { Autowired, Injectable } from '@opensumi/di';
+import { DisposableCollection, URI } from '@opensumi/ide-core-browser';
+import { PreferenceProvider, PreferenceScope } from '@opensumi/ide-core-browser/lib/preferences';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
 
 import { WorkspaceFilePreferenceProviderFactory } from './workspace-file-preference-provider';

package/src/common/types.ts

@@ -1,22 +1,24 @@
 import {
+  IDisposable,
+  IResolvedPreferenceViewDesc,
   ISettingGroup,
   ISettingSection,
-  IDisposable,
   PreferenceScope,
-  IResolvedPreferenceViewDesc,
 } from '@opensumi/ide-core-browser';
 
 export const SettingContribution = Symbol('SettingContribution');
 
+export interface ISettingRegistry {
+  registerSettingGroup: (settingGroup: ISettingGroup) => IDisposable;
+  registerSettingSection: (key: string, section: ISettingSection) => IDisposable;
+}
+
 export interface SettingContribution {
   /**
    * 注册 Setting
    * @param registry
    */
-  registerSetting?(registry: {
-    registerSettingGroup: (settingGroup: ISettingGroup) => IDisposable;
-    registerSettingSection: (key: string, section: ISettingSection) => IDisposable;
-  }): void;
+  registerSetting?(registry: ISettingRegistry): void;
 
   /**
    * 最后处理一次 SettingGroup