setup babel for legacy build as input transform plugin

package.json

@@ -31,6 +31,7 @@
     "@babel/standalone": "^7.15.8",
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-multi-entry": "^4.0.0",
+    "@rollup/pluginutils": "^4.1.1",
     "@typescript-eslint/eslint-plugin": "^4.29.2",
     "@typescript-eslint/parser": "^4.29.2",
     "@vitejs/plugin-legacy": "^1.6.1",

scripts/build-plugins/legacy-build.js

@@ -1,7 +1,10 @@
-const { build } = require("vite");
 const path = require("path");
-let babel; // big import, only do so when used below
+const {build} = require("vite");
+const {babel} = require('@rollup/plugin-babel');
+const {createFilter} = require("@rollup/pluginutils");
+
 const VIRTUAL_ENTRY = "hydrogen:legacy-entry";
+const NODE_MODULES_NEEDING_TRANSPILATION = ["es6-promise"];
 
 module.exports = function legacyBuild(entryModuleId, entryImportReplacements, chunkName, extraImports) {
     let parentRoot;
@@ -26,7 +29,7 @@ module.exports = function legacyBuild(entryModuleId, entryImportReplacements, ch
             for (const [importSource, newImportSource] of Object.entries(entryImportReplacements)) {
                 code = replaceImport(this, code, importSource, newImportSource);
             }
-            code = addExtraImports(code, extraImports);
+            code = prependExtraImports(code, extraImports);
             const bundleCode = await buildLegacyChunk(parentRoot, chunkName, code);
             legacyBundleRef = this.emitFile({
                 type: "asset",
@@ -55,7 +58,10 @@ module.exports = function legacyBuild(entryModuleId, entryImportReplacements, ch
     }
 }
 
-
+/** we replace the imports ourselves instead of relying on rollup-alias or similar, because
+ * we only want to replace imports in the entry module, not anywhere in the import tree.
+ * This allows to create sub classes for the legacy build that can still import
+ * the non-legacy class as a base class, like LegacyPlatform does with Platform.*/
 function replaceImport(pluginCtx, code, importSource, newImportSource) {
     const ast = pluginCtx.parse(code);
     for (const node of ast.body) {
@@ -70,31 +76,66 @@ function replaceImport(pluginCtx, code, importSource, newImportSource) {
     throw new Error(`Could not find import ${JSON.stringify(importSource)} to replace`);
 }
 
-function addExtraImports(code, extraImports) {
+function prependExtraImports(code, extraImports) {
     return extraImports.map(i => `import ${JSON.stringify(i)};`).join("\n") + code;
 }
 
 async function buildLegacyChunk(root, chunkName, code) {
-    // // compile down to whatever IE 11 needs
+    const projectRootDir = path.resolve(path.join(root, "../../.."));
-    // const babelPlugin = babel.getBabelOutputPlugin({
+    const nodeModulesDir = path.join(projectRootDir, "node_modules");
-    //     // babelHelpers: 'bundled',
+    const defaultFilter = createFilter([], [], {resolve: projectRootDir});
-    //     exclude: 'node_modules/**',
+    const transpiledModuleDirs = NODE_MODULES_NEEDING_TRANSPILATION.map(m => {
-    //     presets: [
+        return path.join(nodeModulesDir, m);
-    //         [
+    });
-    //             "@babel/preset-env",
+
-    //             {
+    const filterModule = id => {
-    //                 useBuiltIns: "entry",
+        if (!defaultFilter(id)) {
-    //                 corejs: "3.4",
+            return false;
-    //                 targets: "IE 11",
+        }
-    //                 // we provide our own promise polyfill (es6-promise)
+        if (transpiledModuleDirs.some(d => id.startsWith(d))) {
-    //                 // with support for synchronous flushing of
+            return true;
-    //                 // the queue for idb where needed 
+        }
-    //                 exclude: ["es.promise", "es.promise.all-settled", "es.promise.finally"]
+        if (id.startsWith(nodeModulesDir)) {
-    //             }
+            return false;
-    //         ]
+        }
-    //     ]
+        return true;
-    // });
+    };
-    // babelPlugin.enforce = "post";
+    // compile down to whatever IE 11 needs
+    const babelPlugin = babel({
+        babelrc: false,
+        filter: filterModule,
+        //exclude: 'node_modules/**',
+        babelHelpers: 'bundled',
+        presets: [
+            [
+                "@babel/preset-env",
+                {
+                    useBuiltIns: "entry",
+                    corejs: "3.4",
+                    targets: "IE 11",
+                    // we provide our own promise polyfill (es6-promise)
+                    // with support for synchronous flushing of
+                    // the queue for idb where needed 
+                    exclude: ["es.promise", "es.promise.all-settled", "es.promise.finally"]
+                }
+            ]
+        ]
+    });
+    const resolveEntryPlugin = {
+        name: "hydrogen:resolve-legacy-entry",
+        resolveId(id, importer) {
+            if (id === VIRTUAL_ENTRY) {
+                return id;
+            } else if (importer === VIRTUAL_ENTRY && id.startsWith("./")) {
+                return this.resolve(path.join(root, id));
+            }
+        },
+        load(id) {
+            if (id === VIRTUAL_ENTRY) {
+                return code;
+            }
+        },
+    };
     const bundle = await build({
         root,
         configFile: false,
@@ -116,48 +157,11 @@ async function buildLegacyChunk(root, chunkName, code) {
             },
         },
         plugins: [
-            {
+            resolveEntryPlugin,
-                name: "hydrogen:resolve-legacy-entry",
+            babelPlugin
-                resolveId(id, importer) {
-                    if (id === VIRTUAL_ENTRY) {
-                        return id;
-                    } else if (importer === VIRTUAL_ENTRY && id.startsWith("./")) {
-                        return this.resolve(path.join(root, id));
-                    }
-                },
-                load(id) {
-                    if (id === VIRTUAL_ENTRY) {
-                        return code;
-                    }
-                },
-            }
         ]
     });
     const assets = Array.isArray(bundle.output) ? bundle.output : [bundle.output];
     const mainChunk = assets.find(a => a.name === chunkName);
-    
+    return mainChunk.code;
-    if (!babel) {
-        babel = require('@babel/standalone');
-    }
-    const {code: babelCode} = babel.transform(mainChunk.code, {
-        babelrc: false,
-        configFile: false,
-        presets: [
-            [
-                "env",
-                {
-                    useBuiltIns: "usage",
-                    modules: false,
-                    corejs: "3.4",
-                    targets: "IE 11",
-                    // we provide our own promise polyfill (es6-promise)
-                    // with support for synchronous flushing of
-                    // the queue for idb where needed 
-                    exclude: ["es.promise", "es.promise.all-settled", "es.promise.finally"]
-                }
-            ]
-        ]
-    });
-    console.log("code", babelCode.length);
-    return babelCode;
 }

yarn.lock

@@ -226,11 +226,11 @@
     "@babel/types" "^7.11.0"
 
 "@babel/helper-module-imports@^7.10.4":
-  version "7.10.4"
+  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
-  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/types" "^7.16.0"
 
 "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.15.4":
   version "7.15.4"
@@ -326,21 +326,16 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-validator-identifier@^7.10.4":
+"@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
-  version "7.10.4"
+  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
-  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
 "@babel/helper-validator-identifier@^7.14.5":
   version "7.14.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
   integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
 
-"@babel/helper-validator-identifier@^7.14.9":
-  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
-  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
-
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -992,13 +987,12 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.10.4":
+"@babel/types@^7.10.4", "@babel/types@^7.16.0":
-  version "7.11.5"
+  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
-  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
+    "@babel/helper-validator-identifier" "^7.15.7"
-    lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
 "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.4.4":
@@ -1195,9 +1189,9 @@
     read-package-json-fast "^2.0.1"
 
 "@rollup/plugin-babel@^5.1.0":
-  version "5.2.1"
+  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz#20fc8f8864dc0eaa1c5578408459606808f72924"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879"
-  integrity sha512-Jd7oqFR2dzZJ3NWANDyBjwTtX/lYbZpVcmkHrfQcpvawHs9E4c0nYk5U2mfZ6I/DZcIvy506KZJi54XK/jxH7A==
+  integrity sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==
   dependencies:
     "@babel/helper-module-imports" "^7.10.4"
     "@rollup/pluginutils" "^3.1.0"
@@ -1298,6 +1292,14 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@sindresorhus/is@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.0.1.tgz#d26729db850fa327b7cacc5522252194404226f5"
@@ -3737,12 +3739,7 @@ lodash@^4.15.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-lodash@^4.17.19:
+lodash@^4.17.19, lodash@^4.7.0:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
-
-lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -4437,12 +4434,12 @@ picocolors@^0.2.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
   integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
 
-picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.0:
+picomatch@^2.0.4, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-picomatch@^2.2.1, picomatch@^2.2.2:
+picomatch@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==