Fix custom require's (#4766)

scripts/build/babel-plugins/transform-custom-require.js

@@ -2,32 +2,40 @@
 
 //
 // BEFORE:
-//   $$$r("path/to/file")
+//   eval("require")("./path/to/file")
+//   eval("require")(identifier)
 //
 // AFTER:
 //   require("./file")
+//   require(identifier)
 //
 
 module.exports = function(babel) {
   const t = babel.types;
+
   return {
     visitor: {
-      CallExpression: function(path) {
+      CallExpression(path) {
         const node = path.node;
-        if (
-          path.get("callee").isIdentifier({ name: "$$$r" }) &&
-          node.arguments.length === 1 &&
-          path.get("arguments.0").isStringLiteral()
-        ) {
-          const value = node.arguments[0].value;
-          const parts = value.split("/");
-          path.replaceWith(
-            t.callExpression(t.identifier("require"), [
-              t.stringLiteral(`./${parts[parts.length - 1]}`)
-            ])
-          );
+        if (isEvalRequire(node)) {
+          let arg = node.arguments[0];
+          if (t.isLiteral(arg) && arg.value.startsWith(".")) {
+            const value = "." + arg.value.substring(arg.value.lastIndexOf("/"));
+            arg = t.stringLiteral(value);
+          }
+          path.replaceWith(t.callExpression(t.identifier("require"), [arg]));
         }
       }
     }
   };
+
+  function isEvalRequire(node) {
+    return (
+      t.isCallExpression(node.callee) &&
+      node.arguments.length === 1 &&
+      t.isIdentifier(node.callee.callee, { name: "eval" }) &&
+      node.callee.arguments.length === 1 &&
+      t.isLiteral(node.callee.arguments[0], { value: "require" })
+    );
+  }
 };

src/common/internal-plugins.js

@@ -1,9 +1,8 @@
 "use strict";
 
-// We need to do this to prevent rollup from hoisting the requires. A babel
-// plugin will look for `$$$r()` and transform to `require()` in the bundle,
+// We need to use `eval("require")()` to prevent rollup from hoisting the requires. A babel
+// plugin will look for `eval("require")()` and transform to `require()` in the bundle,
 // and rewrite the paths to require from the top-level.
-const $$$r = require;
 
 // We need to list the parsers and getters so we can load them only when necessary.
 module.exports = [
@@ -13,27 +12,30 @@ module.exports = [
     parsers: {
       // JS - Babylon
       get babylon() {
-        return $$$r("../language-js/parser-babylon").parsers.babylon;
+        return eval("require")("../language-js/parser-babylon").parsers.babylon;
       },
       get json() {
-        return $$$r("../language-js/parser-babylon").parsers.json;
+        return eval("require")("../language-js/parser-babylon").parsers.json;
       },
       get json5() {
-        return $$$r("../language-js/parser-babylon").parsers.json5;
+        return eval("require")("../language-js/parser-babylon").parsers.json5;
       },
       get "json-stringify"() {
-        return $$$r("../language-js/parser-babylon").parsers["json-stringify"];
+        return eval("require")("../language-js/parser-babylon").parsers[
+          "json-stringify"
+        ];
       },
       // JS - Flow
       get flow() {
-        return $$$r("../language-js/parser-flow").parsers.flow;
+        return eval("require")("../language-js/parser-flow").parsers.flow;
       },
       // JS - TypeScript
       get typescript() {
-        return $$$r("../language-js/parser-typescript").parsers.typescript;
+        return eval("require")("../language-js/parser-typescript").parsers
+          .typescript;
       },
       get "typescript-eslint"() {
-        return $$$r("../language-js/parser-typescript").parsers[
+        return eval("require")("../language-js/parser-typescript").parsers[
           "typescript-eslint"
         ];
       }
@@ -46,13 +48,13 @@ module.exports = [
     parsers: {
       // TODO: switch these to just `postcss` and use `language` instead.
       get css() {
-        return $$$r("../language-css/parser-postcss").parsers.css;
+        return eval("require")("../language-css/parser-postcss").parsers.css;
       },
       get less() {
-        return $$$r("../language-css/parser-postcss").parsers.css;
+        return eval("require")("../language-css/parser-postcss").parsers.css;
       },
       get scss() {
-        return $$$r("../language-css/parser-postcss").parsers.css;
+        return eval("require")("../language-css/parser-postcss").parsers.css;
       }
     }
   },
@@ -62,7 +64,8 @@ module.exports = [
   {
     parsers: {
       get glimmer() {
-        return $$$r("../language-handlebars/parser-glimmer").parsers.glimmer;
+        return eval("require")("../language-handlebars/parser-glimmer").parsers
+          .glimmer;
       }
     }
   },
@@ -72,7 +75,8 @@ module.exports = [
   {
     parsers: {
       get graphql() {
-        return $$$r("../language-graphql/parser-graphql").parsers.graphql;
+        return eval("require")("../language-graphql/parser-graphql").parsers
+          .graphql;
       }
     }
   },
@@ -82,11 +86,13 @@ module.exports = [
   {
     parsers: {
       get remark() {
-        return $$$r("../language-markdown/parser-markdown").parsers.remark;
+        return eval("require")("../language-markdown/parser-markdown").parsers
+          .remark;
       },
       // TODO: Delete this in 2.0
       get markdown() {
-        return $$$r("../language-markdown/parser-markdown").parsers.remark;
+        return eval("require")("../language-markdown/parser-markdown").parsers
+          .remark;
       }
     }
   },
@@ -96,7 +102,7 @@ module.exports = [
   {
     parsers: {
       get parse5() {
-        return $$$r("../language-html/parser-parse5").parsers.parse5;
+        return eval("require")("../language-html/parser-parse5").parsers.parse5;
       }
     }
   },
@@ -106,7 +112,7 @@ module.exports = [
   {
     parsers: {
       get vue() {
-        return $$$r("../language-vue/parser-vue").parsers.vue;
+        return eval("require")("../language-vue/parser-vue").parsers.vue;
       }
     }
   },
@@ -116,7 +122,7 @@ module.exports = [
   {
     parsers: {
       get yaml() {
-        return $$$r("../language-yaml/parser-yaml").parsers.yaml;
+        return eval("require")("../language-yaml/parser-yaml").parsers.yaml;
       }
     }
   }