working file watchers

package.json

@@ -31,13 +31,15 @@
 		"watch": "tsc -watch -p ./"
 	},
 	"dependencies": {
-		"@types/jest": "^24.0.23",
+		"@types/chokidar": "^2.1.3",
+		"chokidar": "^3.3.0",
 		"jsdom": "^15.2.1"
 	},
 	"devDependencies": {
 		"@types/assert": "^1.4.3",
 		"@types/dotenv": "^8.2.0",
 		"@types/glob": "^7.1.1",
+		"@types/jest": "^24.0.23",
 		"@types/jsdom": "^12.2.4",
 		"@types/node": "^12.12.8",
 		"@typescript-eslint/eslint-plugin": "^2.7.0",

src/actions/setupActions.ts

@@ -4,7 +4,7 @@ import * as git from '../services/git'
 import node from '../services/node'
 
 import openFiles from './utils/openFiles'
-import loadListeners from './utils/loadListeners'
+import loadWatchers from './utils/loadWatchers'
 
 const runCommands = async (commands: string[]) => {
   if (!commands.length) {
@@ -20,7 +20,7 @@ const runCommands = async (commands: string[]) => {
 }
 
 const setupActions = async (workspaceRoot: vscode.WorkspaceFolder, actions: G.StepActions): Promise<void> => {
-  const { commands, commits, files, listeners } = actions
+  const { commands, commits, files, watchers } = actions
 
   // 1. run commits
   if (commits) {
@@ -32,8 +32,8 @@ const setupActions = async (workspaceRoot: vscode.WorkspaceFolder, actions: G.St
   // 2. open files
   openFiles(files || [])
 
-  // 3. start file watchers (listeners)
-  loadListeners(listeners || [], workspaceRoot.uri)
+  // 3. start file watchers
+  loadWatchers(watchers || [], workspaceRoot.uri)
 
   // 4. run command
   await runCommands(commands || [])

src/actions/utils/loadWatchers.ts

@@ -0,0 +1,49 @@
+import * as vscode from 'vscode'
+import * as chokidar from 'chokidar'
+import { COMMANDS } from '../../editor/commands'
+
+// NOTE: vscode createFileWatcher doesn't seem to detect changes outside of vscode
+// such as `npm install` of a package. Went with chokidar instead
+
+// collect active file watchers as an object keyed on pattern
+const watcherObject: { [key: string]: chokidar.FSWatcher } = {}
+
+const disposeWatcher = (watcher: string) => {
+  watcherObject[watcher].close()
+  delete watcherObject[watcher]
+}
+
+const loadWatchers = (watchers: string[], workspaceUri: vscode.Uri) => {
+  if (!watchers.length) {
+    // remove all watchers
+    for (const watcher of Object.keys(watcherObject)) {
+      disposeWatcher(watcher)
+    }
+  }
+  for (const watcher of watchers) {
+    if (!watcherObject[watcher]) {
+      // see how glob patterns are used in VSCode (not like a regex)
+      // https://code.visualstudio.com/api/references/vscode-api#GlobPattern
+      const rootUri = vscode.workspace.getWorkspaceFolder(workspaceUri)
+      if (!rootUri) {
+        return
+      }
+
+      const listener: chokidar.FSWatcher = chokidar.watch(watcher, {
+        cwd: rootUri.uri.path,
+        interval: 1000,
+      })
+
+      listener.on('change', (path, event) => {
+        vscode.commands.executeCommand(COMMANDS.RUN_TEST, null, () => {
+          // cleanup watcher on success
+          disposeWatcher(watcher)
+        })
+      })
+
+      watcherObject[watcher] = listener
+    }
+  }
+}
+
+export default loadWatchers

web-app/package.json

@@ -1,76 +1,76 @@
 {
-  "name": "coderoad-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "build": "react-scripts build",
-    "postbuild": "cp -R ./build/ ../build/",
-    "build-storybook": "build-storybook",
-    "start": "react-scripts start",
-    "storybook": "start-storybook -p 6006",
-    "test": "react-scripts test"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "dependencies": {
-    "@alifd/next": "^1.18.15",
-    "@alifd/theme-4": "^0.2.0",
-    "@apollo/react-hooks": "^3.1.3",
-    "apollo-boost": "^0.4.4",
-    "graphql": "^14.5.8",
-    "markdown-it": "^10.0.0",
-    "markdown-it-emoji": "^1.4.0",
-    "markdown-it-prism": "^2.0.3",
-    "moment": "^2.24.0",
-    "prismjs": "^1.17.1",
-    "ramda": "^0.26.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "reselect": "^4.0.0",
-    "typescript": "^3.7.2",
-    "xstate": "^4.6.7"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@storybook/addon-actions": "^5.2.6",
-    "@storybook/addon-knobs": "^5.2.6",
-    "@storybook/addon-links": "^5.2.6",
-    "@storybook/addons": "^5.2.6",
-    "@storybook/react": "^5.2.6",
-    "@types/graphql": "^14.5.0",
-    "@types/highlight.js": "^9.12.3",
-    "@types/jest": "^24.0.23",
-    "@types/markdown-it": "0.0.9",
-    "@types/node": "^12.12.7",
-    "@types/prismjs": "^1.16.0",
-    "@types/ramda": "^0.26.34",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.4",
-    "@types/storybook__react": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^2.7.0",
-    "@typescript-eslint/parser": "^2.7.0",
-    "babel-loader": "8.0.5",
-    "babel-plugin-import": "^1.12.1",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "node-sass": "^4.13.0",
-    "prettier": "^1.19.1",
-    "react-scripts": "^3.2.0",
-    "sass-loader": "^8.0.0",
-    "typescript-eslint-parser": "^22.0.0"
-  }
+	"name": "coderoad-app",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"build": "react-scripts build",
+		"postbuild": "cp -R ./build/ ../build/",
+		"build-storybook": "build-storybook",
+		"start": "react-scripts start",
+		"storybook": "start-storybook -p 6006",
+		"test": "react-scripts test"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"eslintConfig": {
+		"extends": "react-app"
+	},
+	"dependencies": {
+		"@alifd/next": "^1.18.16",
+		"@alifd/theme-4": "^0.2.0",
+		"@apollo/react-hooks": "^3.1.3",
+		"apollo-boost": "^0.4.4",
+		"graphql": "^14.5.8",
+		"markdown-it": "^10.0.0",
+		"markdown-it-emoji": "^1.4.0",
+		"markdown-it-prism": "^2.0.3",
+		"moment": "^2.24.0",
+		"prismjs": "^1.17.1",
+		"ramda": "^0.26.1",
+		"react": "^16.12.0",
+		"react-dom": "^16.12.0",
+		"reselect": "^4.0.0",
+		"typescript": "^3.7.2",
+		"xstate": "^4.6.7"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.5.4",
+		"@storybook/addon-actions": "^5.2.6",
+		"@storybook/addon-knobs": "^5.2.6",
+		"@storybook/addon-links": "^5.2.6",
+		"@storybook/addons": "^5.2.6",
+		"@storybook/react": "^5.2.6",
+		"@types/graphql": "^14.5.0",
+		"@types/highlight.js": "^9.12.3",
+		"@types/jest": "^24.0.23",
+		"@types/markdown-it": "0.0.9",
+		"@types/node": "^12.12.8",
+		"@types/prismjs": "^1.16.0",
+		"@types/ramda": "^0.26.34",
+		"@types/react": "^16.9.11",
+		"@types/react-dom": "^16.9.4",
+		"@types/storybook__react": "^4.0.2",
+		"@typescript-eslint/eslint-plugin": "^2.7.0",
+		"@typescript-eslint/parser": "^2.7.0",
+		"babel-loader": "8.0.5",
+		"babel-plugin-import": "^1.12.1",
+		"eslint": "^6.6.0",
+		"eslint-config-prettier": "^6.5.0",
+		"eslint-plugin-prettier": "^3.1.1",
+		"node-sass": "^4.13.0",
+		"prettier": "^1.19.1",
+		"react-scripts": "^3.2.0",
+		"sass-loader": "^8.0.0",
+		"typescript-eslint-parser": "^22.0.0"
+	}
 }

web-app/src/services/apollo/queries/tutorial.ts

@@ -44,7 +44,7 @@ export default gql`
                 commits
                 commands
                 files
-                listeners
+                watchers
               }
               solution {
                 commits