Improve babel worker size

Ives van Hoorne · Ives van Hoorne · commit 8af0ec347079 · 2017-10-11T01:27:11.000+02:00
diff --git a/config/babel.dev.js b/config/babel.dev.js
@@ -6,7 +6,20 @@ module.exports = {
   cacheDirectory: true,
   presets: [
     // Latest stable ECMAScript features
-    ['env', { modules: false }],
+    [
+      'env',
+      {
+        targets: {
+          ie: 11,
+          // We currently minify with uglify
+          // Remove after https://github.com/mishoo/UglifyJS2/issues/448
+          uglify: true,
+        },
+        // Disable polyfill transforms
+        useBuiltIns: false,
+        modules: false,
+      },
+    ],
     // JSX, Flow
     'react',
   ],
diff --git a/config/babel.prod.js b/config/babel.prod.js
@@ -5,7 +5,20 @@ module.exports = {
   babelrc: false,
   presets: [
     // Latest stable ECMAScript features
-    ['env', { modules: false }],
+    [
+      'env',
+      {
+        targets: {
+          ie: 11,
+          // We currently minify with uglify
+          // Remove after https://github.com/mishoo/UglifyJS2/issues/448
+          uglify: true,
+        },
+        // Disable polyfill transforms
+        useBuiltIns: false,
+        modules: false,
+      },
+    ],
     // JSX, Flow
     'react',
   ],
diff --git a/src/common/__snapshots__/url.test.js.snap b/src/common/__snapshots__/url.test.js.snap
@@ -3,81 +3,97 @@
 exports[`url parameters can autoresize 1`] = `
 Object {
   "autoResize": true,
+  "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "useCodeMirror": false,
 }
 `;
 
 exports[`url parameters can handle multiple options 1`] = `
 Object {
   "autoResize": true,
   "currentModule": "test",
+  "enableEslint": false,
   "hideNavigation": true,
   "isEditorScreen": true,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "useCodeMirror": false,
 }
 `;
 
 exports[`url parameters can hide navigation 1`] = `
 Object {
   "autoResize": false,
+  "enableEslint": false,
   "hideNavigation": true,
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "useCodeMirror": false,
 }
 `;
 
 exports[`url parameters doesn't set unknown fields 1`] = `
 Object {
   "autoResize": false,
+  "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "useCodeMirror": false,
 }
 `;
 
 exports[`url parameters keeps everything false on normal urls 1`] = `
 Object {
   "autoResize": false,
+  "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "useCodeMirror": false,
 }
 `;
 
 exports[`url parameters sets current module if there is one 1`] = `
 Object {
   "autoResize": false,
   "currentModule": "test",
+  "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "useCodeMirror": false,
 }
 `;
 
 exports[`url parameters sets editor view 1`] = `
 Object {
   "autoResize": false,
+  "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": true,
   "isInProjectView": true,
   "isPreviewScreen": false,
+  "useCodeMirror": false,
 }
 `;
 
 exports[`url parameters sets preview view 1`] = `
 Object {
   "autoResize": false,
+  "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
   "isInProjectView": true,
   "isPreviewScreen": true,
+  "useCodeMirror": false,
 }
 `;
diff --git a/src/common/url.test.js b/src/common/url.test.js
diff --git a/src/sandbox/eval/transpilers/babel/babel-worker.js b/src/sandbox/eval/transpilers/babel/babel-worker.js
@@ -1,7 +1,8 @@
 // @flow
 
 import flatten from 'lodash/flatten';
-import dynamicImportPlugin from 'babel-plugin-dynamic-import-node';
+import dynamicImportPlugin from './plugins/babel-plugin-dynamic-import-node';
+import detective from './plugins/babel-plugin-detective';
 
 import { buildWorkerError } from '../utils/worker-error-handler';
 import getDependencies from './get-require-statements';
@@ -25,6 +26,7 @@ declare var Babel: {
 };
 
 Babel.registerPlugin('dynamic-import-node', dynamicImportPlugin);
+Babel.registerPlugin('babel-plugin-detective', detective);
 
 self.addEventListener('message', async event => {
   const { code, path, config } = event.data;
@@ -45,7 +47,11 @@ self.addEventListener('message', async event => {
     Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);
   }
 
-  const plugins = [...config.plugins, 'dynamic-import-node'];
+  const plugins = [
+    ...config.plugins,
+    'dynamic-import-node',
+    ['babel-plugin-detective', { source: true, nodes: true }],
+  ];
 
   const customConfig = {
     ...config,
@@ -55,7 +61,7 @@ self.addEventListener('message', async event => {
   try {
     const result = Babel.transform(code, customConfig);
 
-    const dependencies = getDependencies(result.ast);
+    const dependencies = getDependencies(detective.metadata(result));
 
     dependencies.forEach(dependency => {
       self.postMessage({
diff --git a/src/sandbox/eval/transpilers/babel/get-require-statements.js b/src/sandbox/eval/transpilers/babel/get-require-statements.js
@@ -1,42 +1,28 @@
-import traverse from 'babel-traverse';
+export default function getRequireStatements(metadata) {
+  if (!metadata) return [];
 
-export default function getRequireStatements(ast) {
-  const dependencies = [];
+  const res = {};
 
-  traverse(ast, {
-    enter(path) {
-      if (
-        path.node.type === 'CallExpression' &&
-        path.node.callee.name === 'require' &&
-        path.node.arguments[0]
-      ) {
-        if (path.node.arguments[0].type === 'StringLiteral') {
-          dependencies.push({
-            type: 'direct',
-            path: path.node.arguments[0].value,
-          });
-          // Dynamic require
-        } else if (path.node.arguments[0].type === 'BinaryExpression') {
-          // Sometimes these require statements get converted to
-          // `require('' + ('./' + undefined.props.type))`;
-          // We need to check for these wild beasts
-          if (path.node.arguments[0].right.type === 'BinaryExpression') {
-            if (path.node.arguments[0].right.left.type === 'StringLiteral') {
-              dependencies.push({
-                type: 'glob',
-                path: path.node.arguments[0].right.left.value,
-              });
-            }
-          } else if (path.node.arguments[0].left.type === 'StringLiteral') {
-            dependencies.push({
-              type: 'glob',
-              path: path.node.arguments[0].left.value,
-            });
-          }
-        }
+  if (metadata.strings) {
+    metadata.strings.forEach(s => {
+      res[s.value] = 'direct';
+    });
+  }
+  if (metadata.expressions) {
+    metadata.expressions.forEach(s => {
+      if (s.type === 'BinaryExpression') {
+        res[s.left.value] = 'glob';
+      } else if (s.type === 'TemplateLiteral') {
+        res[s.quasis[0].value.raw] = 'glob';
       }
-    },
-  });
+    });
+  }
 
-  return dependencies;
+  const total = [];
+  const paths = Object.keys(res);
+  for (let i = 0; i < paths.length; i += 1) {
+    total.push({ path: paths[i], type: res[paths[i]] });
+  }
+
+  return total;
 }
diff --git a/src/sandbox/eval/transpilers/babel/get-require-statements.test.js b/src/sandbox/eval/transpilers/babel/get-require-statements.test.js
@@ -1,21 +1,26 @@
 import { transform } from 'babel-standalone';
+import dynamicImportSyntax from 'babel-plugin-syntax-dynamic-import';
+
+import detective from './plugins/babel-plugin-detective';
+import importNode from './plugins/babel-plugin-dynamic-import-node';
 import getRequireStatements from './get-require-statements';
-import importNode from 'babel-plugin-dynamic-import-node';
 
 describe('get-require-statements', () => {
   function testAst(code) {
-    const { ast } = transform(code, {
+    const result = transform(code, {
       presets: ['es2015', 'react'],
       plugins: [
         'transform-async-to-generator',
         'transform-object-rest-spread',
         'transform-class-properties',
         'transform-decorators-legacy',
+        dynamicImportSyntax,
         importNode,
+        [detective, { source: true, nodes: true }],
       ],
     });
 
-    expect(getRequireStatements(ast)).toMatchSnapshot();
+    expect(getRequireStatements(detective.metadata(result))).toMatchSnapshot();
   }
 
   it('can find simple requires', () => {
diff --git a/src/sandbox/eval/transpilers/babel/plugins/babel-plugin-detective.js b/src/sandbox/eval/transpilers/babel/plugins/babel-plugin-detective.js
@@ -0,0 +1,69 @@
+'use strict';
+var wrapListener = require('./wrap-listener');
+
+function listener(path, file, opts) {
+  (path.isLiteral() && path.type !== 'TemplateLiteral'
+    ? addString
+    : addExpression)(path.node, file, opts);
+}
+
+function addString(node, file, opts) {
+  var val = attachNodes(opts) ? node : node.value;
+
+  requireMetadata(file).strings.push(val);
+}
+
+function addExpression(node, file, opts) {
+  var val;
+
+  if (attachNodes(opts)) {
+    val = node;
+  } else {
+    val = { start: node.start, end: node.end };
+    val.loc = {
+      start: copyLoc(node.loc.start),
+      end: copyLoc(node.loc.end),
+    };
+  }
+
+  if (attachExpressionSource(opts)) {
+    val.code = file.code.slice(val.start, val.end);
+  }
+
+  requireMetadata(file).expressions.push(val);
+
+  return val;
+}
+
+function copyLoc(loc) {
+  return loc && { line: loc.line, column: loc.column };
+}
+
+function requireMetadata(file) {
+  var metadata = file.metadata;
+
+  if (!metadata.requires) {
+    metadata.requires = {
+      strings: [],
+      expressions: [],
+    };
+  }
+
+  return metadata.requires;
+}
+
+// OPTION EXTRACTION:
+
+function attachExpressionSource(opts) {
+  return Boolean(opts && opts.source);
+}
+
+function attachNodes(opts) {
+  return Boolean(opts && opts.nodes);
+}
+
+module.exports = wrapListener(listener, 'detective');
+
+module.exports.metadata = function extractMetadataFromResult(result) {
+  return result.metadata.requires;
+};
diff --git a/src/sandbox/eval/transpilers/babel/plugins/babel-plugin-dynamic-import-node.js b/src/sandbox/eval/transpilers/babel/plugins/babel-plugin-dynamic-import-node.js
@@ -0,0 +1,27 @@
+export default function({ template, types: t }) {
+  const buildImport = template(`
+    Promise.resolve().then(() => require(SOURCE))
+  `);
+
+  return {
+    visitor: {
+      Import(path) {
+        const importArguments = path.parentPath.node.arguments;
+        const newImport = buildImport({
+          SOURCE:
+            t.isStringLiteral(importArguments[0]) ||
+            t.isTemplateLiteral(importArguments[0])
+              ? importArguments
+              : t.templateLiteral(
+                  [
+                    t.templateElement({ raw: '', cooked: '' }),
+                    t.templateElement({ raw: '', cooked: '' }, true),
+                  ],
+                  importArguments
+                ),
+        });
+        path.parentPath.replaceWith(newImport);
+      },
+    },
+  };
+}
diff --git a/src/sandbox/eval/transpilers/babel/plugins/wrap-listener.js b/src/sandbox/eval/transpilers/babel/plugins/wrap-listener.js
diff --git a/yarn.lock b/yarn.lock
