ui overhaul and added custom chokidar support

Author: OosukeRen

SourceCode/public/importer.html

@@ -19,6 +19,7 @@
     // console.log(document.querySelector('link').import.querySelector('link'))
 </script>
 <script src="modules/modules.js"></script>
+<script src="modules/xp_chokidar.js"></script>
 <script src="modules/explorer.js"></script>
 <script src="modules/icon.js"></script>
 <script src="modules/settingsManager.js"></script>

SourceCode/public/modules/chokidar/xp_chokidar.exe

@@ -3,10 +3,10 @@ window.sidebarTabs = {
 }
 
 const treeChangeEvent = (directoryEl, create) => {
-  let directoriesInPath = directoryEl.full_path.split('\\').length;
+  let parentDir = path.dirname(directoryEl.full_path);
+  let directoriesInPath = parentDir.split('\\').length;
   let directoriesInLaunchPath = launchArguments.split('\\').length;
   let level = directoriesInPath - directoriesInLaunchPath;
-  let parentDir = path.dirname(directoryEl.full_path);
   let index = directoryEl.index || file_explorer.folders[parentDir].children.findIndex(child => child.full_path === directoryEl.full_path);
 
   // ${level}_${parentDir}
@@ -15,7 +15,8 @@ const treeChangeEvent = (directoryEl, create) => {
       element: directoryEl,
       parentDir,
       index,
-      create
+      create,
+      level
     }
   })
 }
@@ -155,14 +156,15 @@ window.file_explorer = {
 
         if(file_explorer.folders[parentDir]) {
           if(new Date() - file_explorer.folders[parentDir].last_sorted >= 500) {
-            file_explorer.folders[parentDir].children = file_explorer.sortDirectories([...file_explorer.folders[parentDir].children, details]);
+            file_explorer.folders[parentDir].children = file_explorer.sortDirectories([...(file_explorer.folders[parentDir]).children, details]);
             last_sorted = new Date();
           } else {
-            file_explorer.folders[parentDir].children = [...file_explorer.folders[parentDir].children, details];
+            file_explorer.folders[parentDir].children = [...(file_explorer.folders[parentDir]).children, details];
           }
         }
       } else {
         if(isFolder) {
+          console.log('FOLDER GOT DELETED', filePath);
           file_explorer.folders[filePath] = undefined;
         }
 
@@ -183,17 +185,126 @@ window.file_explorer = {
       }
       // file_explorer.folders
     },
+    explorerItemMenuConfig: (full_path) => [
+      {
+          label: 'Open Preview',
+          name: 'open_preview',
+          custom: (filePath) => {
+              let fileBasename = path.basename(filePath);
+              let isAMarkdownFile = fileBasename.includes('.md');
+              
+              let canPreview = isAMarkdownFile; 
+
+              return canPreview;
+          }
+      },
+      {
+          label: "Run Code",
+          name: "run_code"
+      },
+      {
+          label: "Open to the Side",
+          name: "open_to_the_side"
+      },
+      {
+          label: "Open With...",
+          name: "open_with"
+      },
+      {
+          label: "Reveal in File Explorer",
+          name: "reveal_in_file_explorer"
+      },
+      {
+          label: "Open in Integrated Terminal",
+          name: "open_in_integrated_terminal"
+      },
+      {
+          separator: true
+      },
+      {
+          label: "Select for Compare",
+          name: "select_for_compare"
+      },
+      {
+          label: "Find File References",
+          name: "find_file_references"
+      },
+      {
+          label: "Open Timeline",
+          name: "open_timeline"
+      },
+      {
+          separator: true
+      },
+      {
+          label: "Cut",
+          name: "cut"
+      },
+      {
+          label: "Copy",
+          name: "copy"
+      },
+      {
+          separator: true
+      },
+      {
+          label: "Copy Path",
+          name: "copy_path",
+          click: () => {
+              fsUtils.copyToClipboard(full_path);
+          }
+      },
+      {
+          label: "Copy Relative Path",
+          name: "copy_relative_path",
+          click: () => {
+              fsUtils.copyToClipboard(path.relative(launchArguments, full_path));
+          }
+      },
+      {
+          separator: true
+      },
+      {
+          label: "Rename...",
+          name: "rename",
+          click: () => {
+              isStaging = !isStaging;
+          }
+      },
+      {
+          label: "Delete",
+          name: "delete", //
+          click: () => {
+              console.log('Deleting');
+
+              if(isFolder) {
+                  fs.rmdirSync(full_path);
+              } else {
+                  fs.unlinkSync(full_path);
+              }
+
+              // file_explorer.rescan();
+          }
+      }
+    ]   
   };
 
-  const watcher = chokidar.watch(launchArguments, {
-    ignored: /(^|[\/\\])\../, // ignore dotfiles
-    persistent: true
-  });
+  // const watcher = chokidar.watch(launchArguments, {
+  //   ignored: /(^|[\/\\])\../, // ignore dotfiles
+  //   persistent: true
+  // });
+  
 
-  watcher.on('addDir', path => file_explorer.chokidarUpdate(path, true, true));
-  watcher.on('unlinkDir', path => file_explorer.chokidarUpdate(path, true, false));
+  xp_chokidar.on('Directory created', path => file_explorer.chokidarUpdate(path, true, true))
+  xp_chokidar.on('Directory deleted', path => file_explorer.chokidarUpdate(path, true, false));
+  // watcher.on('addDir', path => file_explorer.chokidarUpdate(path, true, true));
+  // watcher.on('unlinkDir', path => file_explorer.chokidarUpdate(path, true, false));
 
-  watcher.on('add', path => file_explorer.chokidarUpdate(path, false, true));
-  watcher.on('unlink', path => file_explorer.chokidarUpdate(path, false, false));
+  xp_chokidar.on('File created', path => file_explorer.chokidarUpdate(path, false, true));
+  xp_chokidar.on('File deleted', path => file_explorer.chokidarUpdate(path, false, false));
+  // watcher.on('add', path => file_explorer.chokidarUpdate(path, false, true));
+  // watcher.on('unlink', path => file_explorer.chokidarUpdate(path, false, false));
 
-  watcher.on('change', path => console.log(`File ${path} has been changed`));
+  xp_chokidar.on('File modified', path => console.log(`File ${path} has been changed`));
+  xp_chokidar.watch(launchArguments)
+  // watcher.on('change', path => console.log(`File ${path} has been changed`));

SourceCode/public/modules/explorer.js

@@ -13,6 +13,16 @@ window.utils = {
     }
 }
 
+window.elementUtils = {
+    getClassList: (element) => {
+        if(!element.parentElement) {
+            return [];
+        }
+
+        return [...elementUtils.getClassList(element.parentElement), element.className];
+    } 
+}
+
 window.fsUtils = {
     copyToClipboard: (textToCopy) => {
         const textArea = document.createElement("textarea");

SourceCode/public/modules/utils.js

@@ -0,0 +1,82 @@
+{
+    window.xp_chokidar = (() => {
+        const path = require('path');
+        const { spawn } = require('child_process');
+
+        let cachedWatchers = (() => {
+            let _cases = {
+                "File created": [],
+                "File deleted": [],
+                "Directory created": [],
+                "Directory deleted": [],
+                "File modified": []
+            };
+
+            let _on = (/**@type {chokidarCases} */ chokidarCase, cb) => {
+                (_cases[chokidarCase] || []).push(cb);
+            };
+
+            let chokidarEvent = (/** @type {string}*/ _event) => {
+                let [eventCase, eventPath] = _event.split(": ");
+                
+                let funcs = _cases[eventCase];
+
+                if(funcs) {
+                    funcs.forEach((subscribedFunction) => {
+                        subscribedFunction(eventPath);
+                    });
+                }
+            };
+
+            return {
+                on: _on,
+                unwatch: (/**@type {chokidarCases} */ chokidarCase) => {
+                    _cases[chokidarCase] = [];
+                },
+                event: chokidarEvent
+            };
+        })();
+
+        let chokidarPath = path.resolve('public\\modules\\chokidar\\xp_chokidar.exe');
+
+        let directoryWatcher = (pathToExec) => {
+            const watcherProcess = spawn(chokidarPath, [pathToExec]);
+
+            watcherProcess.stdout.on('data', (data) => {
+                const outputLines = data.toString().split('\n');
+
+                outputLines.forEach((line) => {
+                    cachedWatchers.event(line.trim());
+                });
+            });
+
+            watcherProcess.stderr.on('data', (data) => {
+                console.error(`stderr: ${data.toString()}`);
+            });
+
+            watcherProcess.on('close', (code) => {
+                console.log(`Child process exited with code ${code}`);
+            });
+
+            const stopWatching = () => {
+                if (watcherProcess) {
+                    watcherProcess.kill();
+                    watcherProcess = null;
+                    console.log('Watcher process terminated.');
+                }
+            }
+
+            if (typeof window !== 'undefined') {
+                window.addEventListener('beforeunload', stopWatching);
+            }
+
+            return watcherProcess;
+        };
+
+        return {
+            on: cachedWatchers.on,
+            watch: directoryWatcher,
+            unwatch: cachedWatchers.unwatch
+        };
+    })();
+}

SourceCode/public/modules/xp_chokidar.js

@@ -22,12 +22,85 @@ import GenericExplorerTab from "./Explorer/GenericExplorerTab.svelte";
         timeline: ExplorerTabTimeline,
         'npm scripts': ExplorerTabNpmScripts
     }
+
+    let tabButtons = {
+        active: [
+            {
+                icon: 'new-file',
+                title: 'New Untitled Text File'
+            },
+            {
+                icon: 'save-all',
+                title: 'Save All'
+            },
+            {
+                icon: 'close-all-editors',
+                title: 'Close All Editors'
+            }
+        ],
+        folder: [
+            {
+                icon: 'new-file',
+                title: 'New File...'
+            },
+            {
+                icon: 'new-folder',
+                title: 'New Folder...'
+            },
+            {
+                icon: 'refresh',
+                title: 'Refresh Explorer'
+            },
+            {
+                icon: 'collapse-all',
+                title: 'Collapse Folders in Explorer'
+            }
+        ],
+        outline: [
+            {
+                icon: 'collapse-all',
+                title: 'Collapse All'
+            },
+            {
+                icon: 'more',
+                title: 'More Actions...'
+            },
+        ],
+        timeline: [
+            {
+                icon: 'pin',
+                title: 'Pin The Current Timeline'
+            },
+            {
+                icon: 'refresh',
+                title: 'Refresh'
+            },
+            {
+                icon: 'filter',
+                title: 'Filter Timeline'
+            },
+            {
+                icon: 'more',
+                title: 'More Actions...'
+            }
+        ],
+        'npm scripts': [
+            {
+                icon: 'refresh',
+                title: 'Refresh'
+            },
+            {
+                icon: 'collapse-all',
+                title: 'Collapse All'
+            },
+        ]
+    }
 </script>
 
 
 <div class="explorer-tabs {activeTab === 'files' ? '' : 'hide'}">
     {#each tabsToShow as singleTab}
-        <GenericExplorerTab tabContent={contentMapping[singleTab]} tabName={singleTab}></GenericExplorerTab>
+        <GenericExplorerTab tabContent={contentMapping[singleTab]} tabName={singleTab} tabButtons={tabButtons[singleTab]}></GenericExplorerTab>
     {/each}
 </div>