Add file watching

Author: CompuIves

packages/app/config/build.js

@@ -2,7 +2,7 @@ const isDev = process.env.NODE_ENV === 'development';
 const staticAssets = [
   {
     from: 'standalone-packages/vscode-editor/release/min/vs',
-    to: 'public/vscode24/vs',
+    to: 'public/vscode25/vs',
   },
   {
     from: 'standalone-packages/vscode-extensions/out',

packages/app/config/webpack.prod.js

@@ -180,7 +180,7 @@ module.exports = merge(commonConfig, {
           },
         },
         {
-          urlPattern: /\/vscode24/,
+          urlPattern: /\/vscode25/,
           handler: 'cacheFirst',
           options: {
             cache: {

packages/app/scripts/copy-assets.js

@@ -23,7 +23,7 @@ const assets = [
   },
   {
     from: 'standalone-packages/vscode-editor/release/min/vs',
-    to: 'public/vscode22/vs',
+    to: 'public/vscode24/vs',
   },
   {
     from: 'packages/app/public',

packages/app/src/app/index.html

@@ -68,9 +68,9 @@
       }
 	</script>
 
-	<link data-name="/public/vscode24/vs/editor/editor.main" rel="preload" as="style" href="/public/vscode24/vs/editor/codesandbox.editor.main.css">
+	<link data-name="/public/vscode25/vs/editor/editor.main" rel="preload" as="style" href="/public/vscode25/vs/editor/codesandbox.editor.main.css">
 	</link>
-	<link rel="preload" as="script" href="/public/vscode24/vs/editor/codesandbox.editor.main.js">
+	<link rel="preload" as="script" href="/public/vscode25/vs/editor/codesandbox.editor.main.js">
 	</link>
 </head>
 

packages/app/src/app/overmind/effects/vscode/SandboxFsSync/index.ts

@@ -1,5 +1,6 @@
-import { dirname } from 'path';
+import { dirname, join } from 'path';
 
+import browserFs from 'fs';
 import {
   getDirectoryPath,
   getModulePath,
@@ -20,7 +21,6 @@ import { mkdir, rename, rmdir, unlink, writeFile } from './utils';
 
 const global = getGlobal() as Window & { BrowserFS: any };
 
-const browserFs = global.BrowserFS.BFSRequire('fs');
 const SERVICE_URL = 'https://ata-fetcher.cloud/api/v5/typings';
 
 declare global {
@@ -77,6 +77,18 @@ class SandboxFsSync {
   public create(sandbox: Sandbox): SandboxFs {
     const sandboxFs = {};
 
+    sandbox.directories.forEach(d => {
+      const path = getDirectoryPath(sandbox.modules, sandbox.directories, d.id);
+
+      d.path = path;
+      // If this is a single directory with no children
+      if (!Object.keys(sandboxFs).some(p => dirname(p) === path)) {
+        sandboxFs[path] = { ...d, type: 'directory' };
+      }
+
+      browserFs.mkdirSync(join('/sandbox', path));
+    });
+
     sandbox.modules.forEach(m => {
       const path = getModulePath(sandbox.modules, sandbox.directories, m.id);
       if (path) {
@@ -85,16 +97,8 @@ class SandboxFsSync {
           ...m,
           type: 'file',
         };
-      }
-    });
-
-    sandbox.directories.forEach(d => {
-      const path = getDirectoryPath(sandbox.modules, sandbox.directories, d.id);
 
-      d.path = path;
-      // If this is a single directory with no children
-      if (!Object.keys(sandboxFs).some(p => dirname(p) === path)) {
-        sandboxFs[path] = { ...d, type: 'directory' };
+        browserFs.writeFileSync(join('/sandbox', path), m.code);
       }
     });
 
@@ -106,6 +110,11 @@ class SandboxFsSync {
 
     writeFile(fs, copy);
     this.send('write-file', copy);
+    browserFs.writeFileSync(
+      join('/sandbox', module.path),
+      module.code,
+      () => {}
+    );
 
     if (module.title === 'package.json') {
       this.syncDependencyTypings();
@@ -118,27 +127,35 @@ class SandboxFsSync {
       fromPath,
       toPath,
     });
+    browserFs.rename(
+      join('/sandbox', fromPath),
+      join('/sandbox', toPath),
+      () => {}
+    );
   }
 
   public rmdir(fs: SandboxFs, directory: Directory) {
     const copy = json(directory);
 
     rmdir(fs, copy);
     this.send('rmdir', copy);
+    browserFs.rmdir(join('/sandbox', directory.path), () => {});
   }
 
   public unlink(fs: SandboxFs, module: Module) {
     const copy = json(module);
 
     unlink(fs, copy);
     this.send('unlink', copy);
+    browserFs.unlink(join('/sandbox', module.path), () => {});
   }
 
   public mkdir(fs: SandboxFs, directory: Directory) {
     const copy = json(directory);
 
     mkdir(fs, copy);
     this.send('mkdir', copy);
+    browserFs.mkdir(join('/sandbox', directory.path), () => {});
   }
 
   private onWorkerMessage = evt => {

packages/app/src/app/overmind/effects/vscode/metadata.ts

@@ -1,7 +1,7 @@
 const VSCODE_METADATA = {
   CORE: {
     paths: {
-      src: process.env.VSCODE ? '/vscode/out/vs' : '/public/vscode24/vs',
+      src: process.env.VSCODE ? '/vscode/out/vs' : '/public/vscode25/vs',
       'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
       'npm/min': 'node_modules/monaco-editor-core/min/vs',
       built: '/vscode/out-monaco-editor-core/min/vs',

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -23,7 +23,7 @@ import * as internalActions from './internalActions';
 
 export const internal = internalActions;
 
-export const onNavigateAway: Action = () => {};
+export const onNavigateAway: Action = () => { };
 
 export const addNpmDependency: AsyncAction<{
   name: string;
@@ -316,7 +316,7 @@ export const moduleSelected: Action<{
 
     if (path) {
       module = effects.utils.resolveModule(
-        path.replace(/^\//, ''),
+        path.replace(/^\/sandbox\//, ''),
         sandbox.modules,
         sandbox.directories
       );
@@ -465,7 +465,7 @@ export const quickActionsClosed: Action = ({ state }) => {
   state.editor.quickActionsOpen = false;
 };
 
-export const setPreviewContent: Action = () => {};
+export const setPreviewContent: Action = () => { };
 
 export const togglePreviewContent: Action = ({ state }) => {
   state.editor.previewWindowVisible = !state.editor.previewWindowVisible;

standalone-packages/codesandbox-browserfs/.eslintrc.json

@@ -247,7 +247,7 @@ export default class CodeSandboxEditorFS extends SynchronousFileSystem
               return;
             }
 
-            cb(undefined, new CodeSandboxFile(this, p, flag, stats, r))  ;
+            cb(undefined, new CodeSandboxFile(this, p, flag, stats, r));
           });
         });
         return;
@@ -322,6 +322,8 @@ export default class CodeSandboxEditorFS extends SynchronousFileSystem
 
   public _sync(p: string, data: Buffer, cb: BFSCallback<Stats>): void {
     warn('Sync not supported');
+
+    cb(null, undefined);
   }
 
   public _syncSync(p: string, data: Buffer): void {