Feat/chokidar (#140)

* fix: 修正编辑器打开文件条件判断

* feat: 新增文件系统监听功能

---------

Co-authored-by: congju.lt <congju.lt@antgroup.com>

Author: EndeLiu

package-lock.json

@@ -72,6 +72,7 @@
     "autoprefixer": "^10.4.24",
     "babel-plugin-react-compiler": "^1.0.0",
     "bumpp": "^10.4.0",
+    "chokidar": "^5.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",

package.json

@@ -5,11 +5,30 @@ import type { Plugin } from '@neovate/code';
 import { editorControllers } from './editor';
 import { getFileTree } from './tree';
 import { searchFiles } from './search';
+import { watchWorkspace, unwatchWorkspace } from './watch';
+
+function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
 
 export const fsPlugin: Plugin = {
   name: 'fs',
 
   nodeBridgeHandler() {
+    const context = this; // plugin context, include message bus
     return {
       'fs.tree': async (data: { cwd: string }) => {
         /** TODO: 后续考虑大项目的性能问题 */
@@ -102,6 +121,22 @@ export const fsPlugin: Plugin = {
           };
         }
       },
+      'fs.watch': async (data: { cwd: string }) => {
+        // 创建防抖后的回调函数
+        const debouncedEmit = debounce((subType: string) => {
+          console.log('onFsChange', subType);
+          context.messageBus?.emitEvent?.('fs-change', { cwd: data.cwd });
+        }, 600);
+
+        watchWorkspace(data.cwd, {
+          onFsChange: debouncedEmit,
+        });
+        return { success: true, data: {} };
+      },
+      'fs.unwatch': async (data: { cwd: string }) => {
+        unwatchWorkspace(data.cwd);
+        return { success: true, data: {} };
+      },
       ...editorControllers,
     } as ReturnType<NonNullable<Plugin['nodeBridgeHandler']>>;
   },

src/main/plugins/fs/index.ts

@@ -0,0 +1,69 @@
+import chokidar from 'chokidar';
+import type { FSWatcher } from 'chokidar';
+
+const WATCHING_SET = new Map<string, FSWatcher>();
+
+export function watchWorkspace(
+  dir: string,
+  callbacks: {
+    // includes file system change, add, removed etc, not include file content change
+    onFsChange: (subType: string) => void;
+  },
+) {
+  const { onFsChange } = callbacks;
+  if (WATCHING_SET.has(dir)) {
+    return;
+  }
+  const watcher = chokidar.watch(dir, {
+    ignored: [
+      /(^|[\/\\])\../, // 隐藏文件
+      /node_modules/,
+      '**/package-lock.json',
+      '**/yarn.lock',
+      '**/dist/**',
+      '**/build/**',
+      '**/out/**',
+      '**/.git/**',
+      '**/.DS_Store',
+      '**/.cache/**',
+      '**/coverage/**',
+      /.*\.(jpg|jpeg|png|gif|svg|mp4|mp3)$/i, // 媒体文件
+    ],
+    depth: 5,
+    // usePolling: true,
+    // interval: 2000,
+    followSymlinks: false,
+    alwaysStat: false,
+    persistent: true,
+    ignoreInitial: true, // otherwise will trigger huge amount of events when init
+  });
+  WATCHING_SET.set(dir, watcher);
+  watcher
+    .on('add', (e) => {
+      console.log('add', e);
+      onFsChange('add');
+    })
+    .on('unlink', () => {
+      onFsChange('unlink');
+    })
+    .on('addDir', () => {
+      onFsChange('addDir');
+    })
+    .on('unlinkDir', () => {
+      onFsChange('unlinkDir');
+    })
+    .on('error', (e) => {
+      console.log('watcher error', e);
+      unwatchWorkspace(dir);
+    });
+}
+
+export function unwatchWorkspace(dir: string) {
+  const watcher = WATCHING_SET.get(dir);
+
+  if (!watcher) {
+    return;
+  }
+  watcher.close();
+  WATCHING_SET.delete(dir);
+}

src/main/plugins/fs/watch.ts

@@ -96,7 +96,7 @@ export function EditorPane({ isActive, onReady }: EditorPaneProps) {
 
   // 文件打开行为承接
   useEffect(() => {
-    if (pendingTabUri?.type === 'editor' && status === 'ready') {
+    if (pendingTabUri?.type === 'editor' && extensionReady) {
       const uri = pendingTabUri.uri;
       // anchor request from search panel
       if (uri.includes(`#L`)) {
@@ -120,7 +120,7 @@ export function EditorPane({ isActive, onReady }: EditorPaneProps) {
       }
       request<any>('editor.open', { cwd: repoPath, filePath: uri });
     }
-  }, [pendingTabUri, status]);
+  }, [pendingTabUri, extensionReady]);
 
   useEffect(() => {
     if (extensionReady) {

src/renderer/components/ContentPanel/panes/EditorPane.tsx

@@ -45,23 +45,45 @@ export function FileTree(props: { active: boolean }) {
   const cwd = selectedWorkspaceId
     ? workspaces[selectedWorkspaceId]?.worktreePath
     : null;
+  const subscriptionRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
     inited.current = false;
-    init(true);
+    if (cwd) {
+      init(true);
+      return () => {
+        // stop watching to save system resources
+        request<any>('fs.unwatch', { cwd });
+        // stop waiting for notifications
+        const messageBus = useStore.getState()?.messageBus;
+        if (messageBus && subscriptionRef.current) {
+          messageBus.removeEventHandler('fs-change', subscriptionRef.current);
+        }
+      };
+    }
   }, [cwd]);
 
-  useEffect(() => {
-    if (active && inited.current) {
-      init(false);
+  const waitForNotifications = (cwd: string) => {
+    const messageBus = useStore.getState()?.messageBus;
+    if (!messageBus || !cwd) {
+      return;
+    }
+    if (subscriptionRef.current) {
+      messageBus.removeEventHandler('fs-change', subscriptionRef.current);
     }
-  }, [active]);
+    // recreate handler with new cwd
+    subscriptionRef.current = () => {
+      console.log('sth changed in', cwd);
+      init();
+    };
+    messageBus.onEvent('fs-change', subscriptionRef.current);
+  };
 
-  const init = async (clear = false) => {
+  const init = async (reset = false) => {
     if (!cwd) {
       return;
     }
-    if (clear) {
+    if (reset) {
       setSelectedKey(null);
       setExpandedKeys(new Set());
       setItemToDelete(null);
@@ -71,6 +93,12 @@ export function FileTree(props: { active: boolean }) {
       if (res?.data?.tree) {
         setTreeData(res.data.tree);
       }
+      // start watch and wait for notifications
+      if (reset) {
+        request<any>('fs.watch', { cwd }).then(() => {
+          waitForNotifications(cwd);
+        });
+      }
     });
   };
 
@@ -109,10 +137,7 @@ export function FileTree(props: { active: boolean }) {
   const handleRename = async (oldPath: string, newPath: string) => {
     try {
       const result = await request<any>('fs.rename', { oldPath, newPath });
-
       if (result.success) {
-        init();
-
         // 如果当前选中的文件就是被重命名的文件
         if (selectedKey === oldPath) {
           setSelectedKey(newPath);
@@ -134,7 +159,6 @@ export function FileTree(props: { active: boolean }) {
       });
 
       if (result.success) {
-        init();
         if (selectedKey === itemToDelete.fullPath) {
           setSelectedKey(null);
         }