Add support for dynamic webpack loaders

packages/app/babel.config.js

@@ -15,7 +15,6 @@ module.exports = {
         '@babel/plugin-transform-runtime',
         '@babel/plugin-syntax-dynamic-import',
         'babel-plugin-lodash',
-        'babel-plugin-system-import-transformer',
         'babel-plugin-macros',
         'babel-plugin-styled-components',
         '@babel/plugin-transform-react-display-name',

packages/app/src/sandbox/eval/evaluator.ts

@@ -0,0 +1,3 @@
+export interface IEvaluator {
+  evaluate(path: string, basePath?: string): Promise<any>;
+}

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

@@ -30,6 +30,7 @@ import { ignoreNextCache, deleteAPICache, clearIndexedDBCache } from './cache';
 import { shouldTranspile } from './transpilers/babel/check';
 import { splitQueryFromPath } from './utils/query-path';
 import { measure, endMeasure } from '../utils/metrics';
+import { IEvaluator } from './evaluator';
 
 declare const BrowserFS: any;
 
@@ -97,7 +98,7 @@ type TManagerOptions = {
   hasFileResolver: boolean;
 };
 
-export default class Manager {
+export default class Manager implements IEvaluator {
   id: string;
   transpiledModules: {
     [path: string]: {
@@ -190,6 +191,12 @@ export default class Manager {
     }
   }
 
+  async evaluate(path: string, basePath: string = '/'): Promise<any> {
+    const module = await this.resolveModuleAsync(path, basePath);
+    await this.transpileModules(module);
+    return this.evaluateModule(module);
+  }
+
   async initializeTestRunner() {
     if (this.testRunner) {
       return this.testRunner;

packages/app/src/sandbox/eval/presets/index.test.ts

@@ -0,0 +1,197 @@
+import Preset from './index';
+
+import Transpiler from '../transpilers/index';
+import { LoaderContext } from '../transpiled-module';
+
+function createDummyTranspiler(name: string) {
+  const Klass = class Trans extends Transpiler {
+    constructor() {
+      super(name);
+    }
+
+    doTranspilation(code: string, loaderContext: LoaderContext) {
+      return Promise.resolve({ transpiledCode: code });
+    }
+  };
+
+  return new Klass();
+}
+
+describe('preset', () => {
+  let evaluator: {
+    evaluate: jest.Mock;
+  };
+  beforeEach(() => {
+    evaluator = {
+      evaluate: jest.fn(),
+    };
+  });
+  describe('loaders', () => {
+    it('tries to resolve loader dynamically if not found', () => {
+      const preset = new Preset('test', [], {});
+      const module = {
+        path: 'test.js',
+        code: '',
+      };
+      preset.getLoaders(module, evaluator, '!mdx-loader!');
+      expect(evaluator.evaluate).toHaveBeenCalledWith('mdx-loader');
+    });
+
+    it("doesn't use dynamic loader if it's not needed", () => {
+      const preset = new Preset('test', [], {});
+      preset.registerTranspiler(() => false, [
+        { transpiler: createDummyTranspiler('babel-loader') },
+      ]);
+      const module = {
+        path: 'test.js',
+        code: '',
+      };
+      preset.getLoaders(module, evaluator, '!babel-loader!');
+      expect(evaluator.evaluate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('query', () => {
+    const preset = new Preset('test', [], {});
+
+    preset.registerTranspiler(t => t.path.endsWith('.js'), [
+      { transpiler: createDummyTranspiler('babel-loader') },
+    ]);
+
+    preset.registerTranspiler(t => t.path.endsWith('.css'), [
+      { transpiler: createDummyTranspiler('style-loader') },
+      { transpiler: createDummyTranspiler('modules-loader') },
+    ]);
+
+    it('generates the right query for 1 transpiler', () => {
+      const module = {
+        path: 'test.js',
+        code: '',
+      };
+
+      expect(preset.getQuery(module, evaluator)).toEqual('!babel-loader');
+    });
+
+    it('generates the right query for 2 transpiler', () => {
+      const module = {
+        path: 'test.css',
+        code: '',
+      };
+
+      expect(preset.getQuery(module, evaluator)).toEqual(
+        '!style-loader!modules-loader'
+      );
+    });
+
+    it('generates the right query for absolute custom query', () => {
+      const module = {
+        path: 'test.css',
+        code: '',
+      };
+
+      expect(preset.getQuery(module, evaluator, '!babel-loader')).toEqual(
+        '!babel-loader'
+      );
+    });
+
+    it('generates the right query for custom query', () => {
+      const module = {
+        path: 'test.css',
+        code: '',
+      };
+
+      expect(preset.getQuery(module, evaluator, 'babel-loader')).toEqual(
+        '!style-loader!modules-loader!babel-loader'
+      );
+    });
+  });
+
+  describe('alias', () => {
+    function createPreset(aliases) {
+      return new Preset('test', [], aliases);
+    }
+
+    it('finds the right simple alias', () => {
+      const preset = createPreset({
+        test: 'test2',
+      });
+
+      expect(preset.getAliasedPath('test')).toBe('test2');
+    });
+
+    it('chooses the right simple alias', () => {
+      const preset = createPreset({
+        test: 'test2',
+        testtest: 'test4',
+      });
+
+      expect(preset.getAliasedPath('testtest')).toBe('test4');
+    });
+
+    it('works with paths', () => {
+      const preset = createPreset({
+        test: 'test2',
+        testtest: 'test4',
+      });
+
+      expect(preset.getAliasedPath('test/piano/guitar')).toBe(
+        'test2/piano/guitar'
+      );
+    });
+
+    it('works with deeper paths', () => {
+      const preset = createPreset({
+        test: 'test4',
+        'test/piano': 'test2',
+      });
+
+      expect(preset.getAliasedPath('test/piano/guitar')).toBe('test2/guitar');
+    });
+
+    it('works in a real life scenario', () => {
+      const preset = createPreset({
+        preact$: 'preact',
+        // preact-compat aliases for supporting React dependencies:
+        react: 'preact-compat',
+        'react-dom': 'preact-compat',
+        'create-react-class': 'preact-compat/lib/create-react-class',
+        'react-addons-css-transition-group': 'preact-css-transition-group',
+      });
+
+      expect(preset.getAliasedPath('react/render')).toBe(
+        'preact-compat/render'
+      );
+    });
+
+    it("doesn't replace partial paths", () => {
+      const preset = createPreset({
+        preact$: 'preact',
+        // preact-compat aliases for supporting React dependencies:
+        react: 'preact-compat',
+        'react-dom': 'preact-compat',
+        'create-react-class': 'preact-compat/lib/create-react-class',
+        'react-addons-css-transition-group': 'preact-css-transition-group',
+      });
+
+      expect(preset.getAliasedPath('react-foo')).toBe('react-foo');
+    });
+
+    describe('exact alias', () => {
+      it('resolves an exact alias', () => {
+        const preset = createPreset({
+          vue$: 'vue/common/dist',
+        });
+
+        expect(preset.getAliasedPath('vue')).toBe('vue/common/dist');
+      });
+
+      it("doesnt't resolve a not exact alias", () => {
+        const preset = createPreset({
+          vue$: 'vue/common/dist',
+        });
+
+        expect(preset.getAliasedPath('vue/test')).toBe('vue/test');
+      });
+    });
+  });
+});