fix: 修复 dispose preference reset 问题

Author: winjo

packages/alex/src/core/patch.ts

@@ -5,6 +5,7 @@
 import { StaticServices } from '@ali/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
 import { ModesRegistry } from '@ali/monaco-editor-core/esm/vs/editor/common/modes/modesRegistry';
 import { DirtyDiffWidget } from '@ali/ide-scm/lib/browser/dirty-diff/dirty-diff-widget';
+import { AbstractResourcePreferenceProvider } from '@ali/ide-preferences/lib/browser/abstract-resource-preference-provider';
 
 // TODO: 不使用 private 如何清除副作用
 export const disposeMode = () => {
@@ -22,3 +23,10 @@ const _addAction = (<any>DirtyDiffWidget).prototype._addAction;
   if (icon === 'plus' || icon === 'rollback') return;
   _addAction.call(this, icon, type);
 };
+
+// TODO: 目前 preference 在 dispose 时会重置，而这个时机目前是在 dispose 所有实例时才会触发，此时 reset 无意义，
+// 还会导致因 reset 触发事件获取 injector 实例发生错误（因为一些实例可能早已销毁）
+Object.defineProperty(AbstractResourcePreferenceProvider.prototype, 'reset', {
+  value: () => {},
+  configurable: true,
+});

packages/integrations/src/filesystem/index.tsx

@@ -1,59 +1,70 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { AppRenderer, BrowserFSFileType as FileType, IAppRendererProps } from '@alipay/alex';
 import '@alipay/alex/languages';
-import Button from 'antd/lib/button';
-import 'antd/lib/button/style';
+import Select from 'antd/lib/select';
+import 'antd/lib/select/style';
+
+const dirMap: Record<string, [string, FileType][]> = {
+  '/': [
+    ['lib', FileType.DIRECTORY],
+    ['Readme.md', FileType.FILE],
+    ['LICENSE', FileType.FILE],
+    ['package.json', FileType.FILE],
+  ],
+  '/lib': [
+    ['application.js', FileType.FILE],
+    ['context.js', FileType.FILE],
+    ['request.js', FileType.FILE],
+    ['response.js', FileType.FILE],
+  ],
+};
+
+let zipData: Buffer;
+
+const zipDataPromise = (async () => {
+  const res = await fetch(
+    'http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/green-trail-test/dc85f34d-2467-436b-a0fe-092133ead0d6/demo.zip'
+  );
+  const buf = await res.arrayBuffer();
+  zipData = Buffer.from(new Uint8Array(buf));
+})();
 
 const App = () => {
-  const [zipData, setZipData] = useState<Buffer | null>(null);
   const [fsType, setFsType] = useState<string>('');
 
-  useEffect(() => {
-    (async () => {
-      const res = await fetch(
-        'http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/green-trail-test/dc85f34d-2467-436b-a0fe-092133ead0d6/demo.zip'
-      );
-      const buf = await res.arrayBuffer();
-      setZipData(Buffer.from(new Uint8Array(buf)));
-    })();
-  }, []);
-
-  const workspace = useMemo<IAppRendererProps['runtimeConfig']['workspace']>(() => {
-    if (fsType === 'ZipFS' && zipData) {
-      return {
-        filesystem: {
-          fs: 'FolderAdapter',
+  const filesystem = useMemo<
+    NonNullable<IAppRendererProps['runtimeConfig']['workspace']>['filesystem'] | undefined
+  >(() => {
+    switch (fsType) {
+      case 'IndexedDB':
+        return {
+          fs: 'IndexedDB',
           options: {
-            folder: '/demo',
-            wrapped: {
-              fs: 'ZipFS',
-              options: {
-                zipData,
-              },
+            storeName: 'my_db',
+          },
+        };
+      case 'InMemory':
+        return {
+          fs: 'InMemory',
+        };
+      case 'FileIndexSystem':
+        return {
+          fs: 'FileIndexSystem',
+          options: {
+            // 初始全量文件索引
+            requestFileIndex() {
+              return Promise.resolve({
+                'main.html': '<div id="root"></div>',
+                'main.css': 'body {}',
+                'main.js': 'console.log("main")',
+                'package.json': '{\n  "name": "Riddle"\n}',
+              });
             },
           },
-        },
-      };
-    }
-    if (fsType === 'DynamicRequest') {
-      const dirMap: Record<string, [string, FileType][]> = {
-        '/': [
-          ['lib', FileType.DIRECTORY],
-          ['Readme.md', FileType.FILE],
-          ['LICENSE', FileType.FILE],
-          ['package.json', FileType.FILE],
-        ],
-        '/lib': [
-          ['application.js', FileType.FILE],
-          ['context.js', FileType.FILE],
-          ['request.js', FileType.FILE],
-          ['response.js', FileType.FILE],
-        ],
-      };
-
-      return {
-        filesystem: {
+        };
+      case 'DynamicRequest':
+        return {
           fs: 'DynamicRequest',
           options: {
             readDirectory(p: string) {
@@ -66,26 +77,74 @@ const App = () => {
               return Buffer.from(await res.arrayBuffer());
             },
           },
-        },
-      };
+        };
+      case 'ZipFS':
+        return {
+          fs: 'ZipFS',
+          options: {
+            zipData,
+          },
+        };
+      case 'FolderAdapter':
+        return {
+          fs: 'FolderAdapter',
+          options: {
+            folder: '/demo',
+            wrapped: {
+              fs: 'ZipFS',
+              options: {
+                zipData,
+              },
+            },
+          },
+        };
+      case 'OverlayFS':
+        return {
+          fs: 'OverlayFS',
+          options: {
+            writable: { fs: 'InMemory' },
+            readable: {
+              fs: 'DynamicRequest',
+              options: {
+                readDirectory(p: string) {
+                  return dirMap[p];
+                },
+                async readFile(p) {
+                  const res = await fetch(
+                    `http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/green-trail-test/a87fb80d-3028-4b19-93a9-2da6f871f369/koa${p}`
+                  );
+                  return Buffer.from(await res.arrayBuffer());
+                },
+              },
+            },
+          },
+        };
     }
-  }, [fsType, zipData]);
+  }, [fsType]);
+
+  const workspace = filesystem ? { filesystem } : undefined;
 
   return (
     <div style={{ height: '100%' }}>
-      <div style={{ height: 32, display: 'flex', alignItems: 'center' }}>
-        <Button size="small" onClick={() => setFsType('ZipFS')}>
-          ZipFS
-        </Button>
-        <Button size="small" style={{ marginLeft: 8 }} onClick={() => setFsType('DynamicRequest')}>
-          DynamicRequest
-        </Button>
+      <div style={{ height: 48, display: 'flex', alignItems: 'center' }}>
+        <Select<string> onChange={(e) => setFsType(e)} style={{ width: 200 }}>
+          <Select.Option value="IndexedDB">IndexedDB</Select.Option>
+          <Select.Option value="InMemory">InMemory</Select.Option>
+          <Select.Option value="FileIndexSystem">FileIndexSystem</Select.Option>
+          <Select.Option value="DynamicRequest">DynamicRequest</Select.Option>
+          <Select.Option value="ZipFS">ZipFS</Select.Option>
+          <Select.Option value="FolderAdapter">FolderAdapter</Select.Option>
+          <Select.Option value="OverlayFS">OverlayFS</Select.Option>
+        </Select>
       </div>
-      <div style={{ height: 'calc(100% - 32px)' }}>
+      <div style={{ height: 'calc(100% - 48px)' }}>
         <AppRenderer
           key={fsType}
           appConfig={{
             workspaceDir: 'filesystem',
+            defaultPreferences: {
+              'general.theme': 'ide-light',
+            },
           }}
           runtimeConfig={{
             biz: 'filesystem',
@@ -97,4 +156,6 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('main'));
+zipDataPromise.then(() => {
+  ReactDOM.render(<App />, document.getElementById('main'));
+});