Allow getting transpiler info

Author: Ives van Hoorne

packages/app/src/sandbox/compile.js

@@ -314,6 +314,8 @@ async function compile({
 
     const parsedPackageJSON = configurations.package.parsed;
 
+    dispatch({ type: 'status', status: 'installing-dependencies' });
+
     const dependencies = getDependencies(parsedPackageJSON, configurations);
     const { manifest, isNewCombination } = await loadDependencies(dependencies);
 
@@ -349,11 +351,15 @@ async function compile({
     const main = absolute(foundMain);
     const managerModuleToTranspile = modules[main];
 
+    dispatch({ type: 'status', status: 'transpiling' });
+
     await manager.preset.setup(manager);
     await manager.transpileModules(managerModuleToTranspile);
 
     debug(`Transpilation time ${Date.now() - t}ms`);
 
+    dispatch({ type: 'status', status: 'evaluating' });
+
     const managerTranspiledModuleToTranspile = manager.getTranspiledModule(
       managerModuleToTranspile
     );
@@ -450,6 +456,8 @@ async function compile({
       createCodeSandboxOverlay(modules);
     }
 
+    dispatch({ type: 'status', status: 'running-tests' });
+
     try {
       // Testing
       const ttt = Date.now();
@@ -500,6 +508,7 @@ async function compile({
   }
   firstLoad = false;
 
+  dispatch({ type: 'status', status: 'idle' });
   dispatch({ type: 'done' });
 
   if (typeof window.__puppeteer__ === 'function') {

packages/app/src/sandbox/eval/manager.js

@@ -84,7 +84,6 @@ export default class Manager {
   hardReload: boolean;
   hmrStatus: 'idle' | 'check' | 'apply' | 'fail' = 'idle';
   testRunner: TestRunner;
-  bfs: typeof BrowserFS;
 
   // List of modules that are being transpiled, to prevent duplicate jobs.
   transpileJobs: { [transpiledModuleId: string]: true };
@@ -126,8 +125,6 @@ export default class Manager {
       },
       () => {}
     );
-
-    this.bfs = BrowserFS;
   }
 
   bfsWrapper = {
@@ -807,4 +804,25 @@ export default class Manager {
       }
     }
   }
+
+  /**
+   * Get information about all transpilers currently registered for this manager
+   */
+  async getTranspilerContext() {
+    const info = {};
+
+    const data = await Promise.all(
+      Array.from(this.preset.transpilers).map(t =>
+        t
+          .getTranspilerContext()
+          .then(context => ({ name: t.name, data: context }))
+      )
+    );
+
+    data.forEach(t => {
+      info[t.name] = t.data;
+    });
+
+    return info;
+  }
 }

packages/app/src/sandbox/eval/presets/parcel/transpilers/html-transpiler.js

@@ -17,6 +17,7 @@ class HTMLTranspiler extends WorkerTranspiler {
         {
           code,
         },
+        loaderContext._module.getId(),
         loaderContext,
         (err, data) => {
           if (err) {

packages/app/src/sandbox/eval/presets/parcel/transpilers/html-worker.js

@@ -168,7 +168,7 @@ if (document.readyState !== 'complete') {
 `;
 
   self.postMessage({
-    type: 'compiled',
+    type: 'result',
     transpiledCode: compiledCode,
   });
 });

packages/app/src/sandbox/eval/transpiled-module.js

@@ -120,7 +120,6 @@ export type LoaderContext = {
   // Remaining loaders after current loader
   remainingRequests: string,
   template: string,
-  bfs: BrowserFS,
 };
 /* eslint-enable */
 
@@ -456,7 +455,6 @@ export default class TranspiledModule {
       _module: this,
       path: this.module.path,
       template: manager.preset.name,
-      bfs: manager.bfs,
       remainingRequests: '', // will be filled during transpilation
     };
   }
@@ -733,7 +731,7 @@ export default class TranspiledModule {
     try {
       // eslint-disable-next-line no-inner-declarations
       function require(path: string) {
-        const bfsModule = manager.bfs.BFSRequire(path);
+        const bfsModule = BrowserFS.BFSRequire(path);
 
         if (bfsModule) {
           return bfsModule;

packages/app/src/sandbox/eval/transpilers/babel/babel-worker.js

@@ -142,6 +142,7 @@ export type IBabel = {
   availablePresets: { [key: string]: Function },
   registerPlugin: (name: string, plugin: Function) => void,
   registerPreset: (name: string, preset: Function) => void,
+  version: string,
 };
 
 declare var Babel: IBabel;
@@ -165,6 +166,18 @@ self.addEventListener('message', async event => {
     initializeBrowserFS();
     return;
   }
+
+  if (event.data.type === 'get-babel-context') {
+    self.postMessage({
+      type: 'result',
+      version: Babel.version,
+      availablePlugins: Object.keys(Babel.availablePlugins),
+      availablePresets: Object.keys(Babel.availablePresets),
+    });
+
+    return;
+  }
+
   resetCache();
 
   const { code, path, sandboxOptions, config, loaderOptions } = event.data;
@@ -252,7 +265,7 @@ self.addEventListener('message', async event => {
     });
 
     self.postMessage({
-      type: 'compiled',
+      type: 'result',
       transpiledCode: result.code,
     });
   } catch (e) {

packages/app/src/sandbox/eval/transpilers/babel/index.js

@@ -24,7 +24,7 @@ class BabelTranspiler extends WorkerTranspiler {
     return worker;
   }
 
-  doTranspilation(code: string, loaderContext: LoaderContext) {
+  doTranspilation(code: string, loaderContext: LoaderContext): Promise<void> {
     return new Promise((resolve, reject) => {
       const path = loaderContext.path;
 
@@ -50,6 +50,7 @@ class BabelTranspiler extends WorkerTranspiler {
             loaderContext.options.configurations.sandbox &&
             loaderContext.options.configurations.sandbox.parsed,
         },
+        loaderContext._module.getId(),
         loaderContext,
         (err, data) => {
           if (err) {
@@ -63,6 +64,30 @@ class BabelTranspiler extends WorkerTranspiler {
       );
     });
   }
+
+  async getTranspilerContext() {
+    return new Promise(async resolve => {
+      const baseConfig = await super.getTranspilerContext();
+
+      this.queueTask(
+        {
+          type: 'get-babel-context',
+        },
+        'babelContext',
+        {},
+        (err, data) => {
+          const { version, availablePlugins, availablePresets } = data;
+
+          resolve({
+            ...baseConfig,
+            babelVersion: version,
+            availablePlugins,
+            availablePresets,
+          });
+        }
+      );
+    });
+  }
 }
 
 const transpiler = new BabelTranspiler();

packages/app/src/sandbox/eval/transpilers/index.js

@@ -10,15 +10,11 @@ type TranspilerResult = {
 };
 
 export default class Transpiler {
-  cachedResults: {
-    [id: string]: TranspilerResult,
-  };
   cacheable: boolean;
   name: string;
   HMREnabled: boolean;
 
   constructor(name: string) {
-    this.cachedResults = {};
     this.cacheable = true;
     this.name = name;
     this.HMREnabled = true;
@@ -41,9 +37,18 @@ export default class Transpiler {
     code: string,
     loaderContext: LoaderContext
   ): Promise<TranspilerResult> {
-    return this.doTranspilation(code, loaderContext).then(result => {
-      this.cachedResults[code] = result;
-      return result;
+    return this.doTranspilation(code, loaderContext);
+  }
+
+  /**
+   * Get custom info of the current transpiler, this is open for implementation
+   * per transpiler
+   */
+  getTranspilerContext(): Promise<Object> {
+    return Promise.resolve({
+      name: this.name,
+      HMREnabled: this.HMREnabled,
+      cacheable: this.cacheable,
     });
   }
 }

packages/app/src/sandbox/eval/transpilers/less/index.js

@@ -35,6 +35,7 @@ class LessTranspiler extends WorkerTranspiler {
           files,
           path,
         },
+        loaderContext._module.getId(),
         loaderContext,
         (err, data) => {
           if (err) {

packages/app/src/sandbox/eval/transpilers/less/less-worker.js

@@ -45,7 +45,7 @@ self.addEventListener('message', event => {
       .render(cleanCode, { filename, plugins: [FileManager(context, files)] })
       .then(({ css }) =>
         self.postMessage({
-          type: 'compiled',
+          type: 'result',
           transpiledCode: css,
         })
       )