Feature/filesystem watcher

browser/src/Services/Explorer/ExplorerSplit.tsx

@@ -8,6 +8,7 @@ import * as path from "path"
 import * as React from "react"
 import { Provider } from "react-redux"
 import { Store } from "redux"
+import FileSystemWatcher from "./../../Services/FileSystemWatcher"
 
 import { Event } from "oni-types"
 
@@ -66,6 +67,10 @@ export class ExplorerSplit {
                 rootPath: this._workspace.activeWorkspace,
             })
         }
+
+        FileSystemWatcher.onChange.subscribe(() => this._store.dispatch({ type: "REFRESH" }))
+        FileSystemWatcher.onAdd.subscribe(() => this._store.dispatch({ type: "REFRESH" }))
+        FileSystemWatcher.onMove.subscribe(() => this._store.dispatch({ type: "REFRESH" }))
     }
 
     public enter(): void {

browser/src/Services/FileSystemWatcher/index.ts

@@ -0,0 +1,99 @@
+import * as chokidar from "chokidar"
+import { Stats } from "fs"
+import { Event, IEvent } from "oni-types"
+
+import * as Workspace from "./../Workspace"
+
+export type Targets = string | string[]
+
+interface IFSOptions {
+    options?: chokidar.WatchOptions
+    target?: Targets
+}
+
+interface IFileChangeEvent {
+    path: string
+}
+
+interface IStatsChangeEvent {
+    path: string
+    stats: Stats
+}
+
+export class FileSystemWatcher {
+    private _watcher: chokidar.FSWatcher
+    private _workspace: Workspace.Workspace
+    private _activeWorkspace: string
+
+    private _onAdd = new Event<IFileChangeEvent>()
+    private _onAddDir = new Event<IStatsChangeEvent>()
+    private _onMove = new Event<IFileChangeEvent>()
+    private _onChange = new Event<IFileChangeEvent>()
+    private _defaultOptions = { ignored: "**/node_modules" }
+
+    constructor(watch: IFSOptions = {}) {
+        this._workspace = Workspace.getInstance()
+        this._activeWorkspace = this._workspace.activeWorkspace
+        const fileOrFolder = watch.target || this._activeWorkspace
+        const optionsToUse = watch.options || this._defaultOptions
+        this._watcher = chokidar.watch(fileOrFolder, optionsToUse)
+
+        // alternatively the ignoreInitial can be set in the config
+        // to avoid a flurry of events when the watcher is initialised
+        this._watcher.on("ready", () => {
+            this._attachEventListeners()
+        })
+    }
+
+    public watch(target: Targets) {
+        return this._watcher.add(target)
+    }
+
+    public unwatch(target: Targets) {
+        return this._watcher.unwatch(target)
+    }
+
+    public close() {
+        this._watcher.close()
+    }
+
+    private _attachEventListeners() {
+        this._watcher.on("add", path => {
+            return this._onAdd.dispatch(path)
+        })
+
+        this._watcher.on("change", path => {
+            return this._onChange.dispatch(path)
+        })
+
+        this._watcher.on("move", path => {
+            return this._onMove.dispatch(path)
+        })
+
+        this._watcher.on("addDir", (path, stats) => {
+            return this._onAddDir.dispatch({ path, stats })
+        })
+    }
+
+    get allWatched(): chokidar.WatchedPaths {
+        return this._watcher.getWatched()
+    }
+
+    get onChange(): IEvent<IFileChangeEvent> {
+        return this._onChange
+    }
+
+    get onMove(): IEvent<IFileChangeEvent> {
+        return this._onMove
+    }
+
+    get onAdd(): IEvent<IFileChangeEvent> {
+        return this._onAdd
+    }
+
+    get addDir(): IEvent<IStatsChangeEvent> {
+        return this._onAddDir
+    }
+}
+
+export default new FileSystemWatcher()

browser/webpack.development.config.js

@@ -13,12 +13,19 @@ module.exports = {
         gifshot: "require('gifshot')",
         "msgpack-lite": "require('msgpack-lite')",
         "styled-components": "require('styled-components')",
+        fsevents: "require('fsevents')",
     },
     resolve: {
         extensions: [".tsx", ".ts", ".js", ".less"],
     },
     module: {
         rules: [
+            {
+                test: /\.(html)$/,
+                use: {
+                    loader: "html-loader",
+                },
+            },
             {
                 test: /\.less$/,
                 use: [