Full Sass HMR support

src/app/components/sandbox/CodeEditor/Monaco.js

@@ -419,6 +419,9 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
     if (kind) {
       if (kind[1] === 'css') {
         return 'css';
+      }
+      if (kind[1] === 'scss') {
+        return 'scss';
       } else if (kind[1] === 'html') {
         return 'html';
       } else if (kind[1] === 'md') {

src/common/sandbox/resolve-module.js

@@ -20,7 +20,7 @@ export default (
   modules: Array<Module>,
   directories: Array<Directory>,
   startdirectoryShortid: ?string = undefined,
-) => {
+): Module => {
   if (!path) return null;
   // Split path
   const splitPath = path.replace(/^.\//, '').split('/');

src/sandbox/eval2/Manager.js

@@ -118,16 +118,14 @@ export default class Manager {
   resolveTranspiledModule(
     path: string,
     startdirectoryShortid: ?string,
-  ): ?TranspiledModule {
+  ): TranspiledModule {
     const module = resolveModule(
       path,
       this.getModules(),
       this.getDirectories(),
       startdirectoryShortid,
     );
 
-    if (!module) return null;
-
     return this.getTranspiledModule(module);
   }
 
@@ -174,10 +172,8 @@ export default class Manager {
     this.modules = modules;
     this.directories = directories;
 
-    const addedTranspiledModules = addedModules.map(m => this.addModule(m));
-    const updatedTranspiledModules = updatedModules.map(m =>
-      this.getTranspiledModule(m).update(m),
-    );
+    addedModules.forEach(m => this.addModule(m));
+    updatedModules.forEach(m => this.getTranspiledModule(m).update(m));
 
     deletedModules.forEach(m => {
       const transpiledModule = this.getTranspiledModule(m);
@@ -186,10 +182,6 @@ export default class Manager {
       delete this.transpiledModules[m.id];
     });
 
-    return Promise.all(
-      [...addedTranspiledModules, ...updatedTranspiledModules].map(m =>
-        m.transpile(this),
-      ),
-    );
+    return this.transpileAllModules();
   }
 }

src/sandbox/eval2/TranspiledModule.js

@@ -43,17 +43,14 @@ export type LoaderContext = {
   path: string,
   getModules: () => Array<Module>,
   resolvePath: (module: Module) => string,
+  addDependency: (depPath: string) => void,
   _module: TranspiledModule, // eslint-disable-line no-use-before-define
 };
 
 class Compilation {
-  dependencies: Set<TranspiledModule>; // eslint-disable-line no-use-before-define
-  initiators: Set<TranspiledModule>; // eslint-disable-line no-use-before-define
   exports: any;
 
   constructor() {
-    this.dependencies = new Set();
-    this.initiators = new Set();
     this.exports = null;
   }
 }
@@ -73,13 +70,17 @@ export default class TranspiledModule {
    */
   emittedAssets: Array<ModuleSource>;
   compilation: ?Compilation;
+  initiators: Set<TranspiledModule>; // eslint-disable-line no-use-before-define
+  dependencies: Set<TranspiledModule>; // eslint-disable-line no-use-before-define
 
   constructor(module: Module) {
     this.module = module;
     this.errors = [];
     this.warnings = [];
     this.cacheable = true;
     this.childModules = [];
+    this.dependencies = new Set();
+    this.initiators = new Set();
   }
 
   dispose() {
@@ -100,12 +101,12 @@ export default class TranspiledModule {
   }
 
   resetCompilation() {
-    if (this.compilation != null) {
-      this.compilation.initiators.forEach(dep => {
-        dep.resetCompilation();
-      });
-      this.compilation = null;
-    }
+    this.initiators.forEach(dep => {
+      dep.resetCompilation();
+    });
+    this.compilation = null;
+    this.dependencies = new Set();
+    this.initiators = new Set();
   }
 
   update(module: Module): TranspiledModule {
@@ -154,6 +155,11 @@ export default class TranspiledModule {
       emitFile: (name: string, content: string, sourceMap: SourceMap) => {
         this.assets[name] = this.createSourceForAsset(name, content, sourceMap);
       },
+      addDependency: (depPath: string) => {
+        const tModule = manager.resolveTranspiledModule(depPath);
+        this.dependencies.add(tModule);
+        tModule.initiators.add(this);
+      },
       getModules: (): Array<Module> => manager.getModules(),
       resolvePath: (module: Module) =>
         getModulePath(
@@ -176,8 +182,13 @@ export default class TranspiledModule {
   }
 
   async transpile(manager: Manager) {
-    // For now we only support one transpiler per module
     const transpilers = manager.preset.getTranspilers(this.module);
+    const cacheable = transpilers.every(t => t.cacheable);
+
+    if (this.source && cacheable) {
+      return this;
+    }
+
     const loaderContext = this.getLoaderContext(manager);
 
     let code = this.module.code || '';
@@ -198,6 +209,10 @@ export default class TranspiledModule {
       }
     }
 
+    // Add the source of the file by default, this is important for source mapping
+    // errors back to their origin
+    code = `${code}\n//# sourceURL=${loaderContext.path}`;
+
     this.source = new ModuleSource(this.module.title, code, finalSourceMap);
     return this;
   }
@@ -216,7 +231,7 @@ export default class TranspiledModule {
     const module = this.module;
     const transpiledModule = this;
     const compilation = new Compilation();
-    compilation.initiators = new Set(parentModules);
+    this.initiators = new Set(parentModules);
     try {
       function require(path: string) {
         // eslint-disable-line no-unused-vars
@@ -237,15 +252,12 @@ export default class TranspiledModule {
           throw new Error(`${module.title} is importing itself`);
         }
 
-        compilation.dependencies.add(requiredTranspiledModule);
+        transpiledModule.dependencies.add(requiredTranspiledModule);
 
         // Check if this module has been evaluated before, if so return the exports
         // of that compilation
         const cache = requiredTranspiledModule.compilation;
-
-        if (cache != null) {
-          cache.initiators.add(transpiledModule);
-        }
+        requiredTranspiledModule.initiators.add(transpiledModule);
 
         // This is a cyclic dependency, we should return undefined for first
         // execution according to ES module spec

src/sandbox/eval2/transpilers/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import type { SourceMap } from './utils/get-source-map';
-import TranspiledModule, { type LoaderContext } from '../TranspiledModule';
+import { type LoaderContext } from '../TranspiledModule';
 
 type TranspilerResult = {
   transpiledCode: string,
@@ -13,9 +13,11 @@ export default class Transpiler {
   cachedResults: {
     [id: string]: TranspilerResult,
   };
+  cacheable: boolean;
 
   constructor() {
     this.cachedResults = {};
+    this.cacheable = true;
   }
 
   /* eslint-disable */
@@ -35,17 +37,11 @@ export default class Transpiler {
     code: string,
     loaderContext: LoaderContext,
   ): Promise<TranspilerResult> {
-    if (this.cachedResults[code]) {
+    if (this.cacheable && this.cachedResults[code]) {
       return Promise.resolve(this.cachedResults[code]);
     }
 
     return this.doTranspilation(code, loaderContext).then(result => {
-      // Add the source of the file by default, this is important for source mapping
-      // errors back to their origin
-
-      // eslint-disable-next-line no-param-reassign
-      result.transpiledCode = `${result.transpiledCode}\n//# sourceURL=${loaderContext.path}`;
-
       this.cachedResults[code] = result;
       return result;
     });

src/sandbox/eval2/transpilers/sass/index.js

@@ -8,13 +8,15 @@ class SassTranspiler extends WorkerTranspiler {
   worker: Worker;
 
   constructor() {
-    super(SassWorker, 2);
+    super(SassWorker, 1);
+
+    this.cacheable = false;
   }
 
   doTranspilation(code: string, loaderContext: LoaderContext) {
     const modules = loaderContext.getModules();
 
-    const sassModules = modules.filter(m => m.title.endsWith('scss'));
+    const sassModules = modules.filter(m => /\.s?[a|c]ss$/.test(m.title));
     const files = sassModules.reduce(
       (interMediateFiles, module) => ({
         ...interMediateFiles,
@@ -38,7 +40,11 @@ class SassTranspiler extends WorkerTranspiler {
             return reject(err);
           }
 
-          return resolve(data);
+          if (data.type === 'add-dependency') {
+            loaderContext.addDependency(data.path);
+          } else {
+            return resolve(data);
+          }
         },
       );
     });

src/sandbox/eval2/transpilers/sass/sass-worker.js

@@ -1,5 +1,3 @@
-import { buildWorkerError } from '../utils/worker-error-handler';
-
 self.importScripts([
   'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.6/sass.sync.min.js',
 ]);
@@ -13,25 +11,43 @@ declare var Sass: {
   registerPlugin: (name: string, plugin: Function) => void,
 };
 
-Sass.options({
-  sourceMapEmbed: true,
-});
-
 self.addEventListener('message', event => {
   const { files, path } = event.data;
 
-  Sass.writeFile(files, () => {
-    try {
-      const code = Sass.compileFile(path);
-      self.postMessage({
-        type: 'compiled',
-        transpiledCode: code,
-      });
-    } catch (e) {
+  // register a custom importer callback
+  Sass.importer((request, done) => {
+    // We use this to mark dependencies of this file
+    if (request.path) {
       self.postMessage({
-        type: 'error',
-        error: buildWorkerError(e),
+        type: 'add-dependency',
+        path: request.path.replace('/sass/', ''),
       });
     }
+    done();
+  });
+
+  Sass.clearFiles(() => {
+    Sass.options({ sourceMapEmbed: true }, () => {
+      Sass.writeFile(files, () => {
+        Sass.compileFile(path, result => {
+          console.log(result);
+          if (result.status === 0) {
+            self.postMessage({
+              type: 'compiled',
+              transpiledCode: result.text,
+            });
+          } else {
+            self.postMessage({
+              type: 'error',
+              error: {
+                name: 'CompileError',
+                message: result.formatted,
+                fileName: result.file.replace('/sass/', ''),
+              },
+            });
+          }
+        });
+      });
+    });
   });
 });

src/sandbox/eval2/transpilers/worker-transpiler.js

@@ -70,11 +70,14 @@ export default class WorkerTranspiler extends Transpiler {
         }
 
         callback(null, data);
-      }
 
-      this.idleWorkers.push(worker);
+        // Means the transpile task has been completed
+        if (data.type === 'compiled' || data.type === 'error') {
+          this.idleWorkers.push(worker);
 
-      this.executeRemainingTasks();
+          this.executeRemainingTasks();
+        }
+      }
     };
     worker.postMessage(message);
   }