Rewrite [resolution] dependencies from lockfile version

.changeset/tender-shirts-turn.md

@@ -0,0 +1,5 @@
+---
+"modular-scripts": patch
+---
+
+Adds the [resolution] tag in the CDN template to point to the pinned version as resolved from yarn.lock.

packages/modular-scripts/package.json

@@ -62,8 +62,8 @@
     "global-modules": "2.0.0",
     "globby": "11.0.4",
     "gzip-size": "6.0.0",
-    "html-webpack-plugin": "5.5.0",
     "html-minifier-terser": "6.1.0",
+    "html-webpack-plugin": "5.5.0",
     "is-ci": "2.0.0",
     "is-root": "2.1.0",
     "jest": "26.6.3",
@@ -104,6 +104,7 @@
     "semver": "7.3.7",
     "semver-regex": "3.1.3",
     "shell-quote": "1.7.3",
+    "snyk-nodejs-lockfile-parser": "^1.38.0",
     "source-map-support": "0.5.21",
     "strip-ansi": "6.0.0",
     "style-loader": "3.3.1",

packages/modular-scripts/react-scripts/config/webpack.config.js

@@ -42,6 +42,10 @@ const { externalDependencies } = process.env.MODULAR_PACKAGE_DEPS
   ? JSON.parse(process.env.MODULAR_PACKAGE_DEPS)
   : {};
 
+const { externalResolutions } = process.env.MODULAR_PACKAGE_RESOLUTIONS
+  ? JSON.parse(process.env.MODULAR_PACKAGE_RESOLUTIONS)
+  : {};
+
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
@@ -77,10 +81,13 @@ module.exports = function (webpackEnv) {
   if (externalDependencies.react && isEsmViewDevelopment) {
     externalDependencies['react-dom'] = externalDependencies.react;
   }
+  if (externalResolutions.react && isEsmViewDevelopment) {
+    externalResolutions['react-dom'] = externalResolutions.react;
+  }
 
   // Create a map of external dependencies if we're building a ESM view
   const dependencyMap = isEsmView
-    ? createExternalDependenciesMap(externalDependencies)
+    ? createExternalDependenciesMap(externalDependencies, externalResolutions)
     : {};
 
   // Variable used for enabling profiling in Production
@@ -735,20 +742,28 @@ module.exports = function (webpackEnv) {
   return webpackConfig;
 };
 
-function createExternalDependenciesMap(externalDependencies) {
+function createExternalDependenciesMap(
+  externalDependencies,
+  externalResolutions,
+) {
   const externalCdnTemplate =
     process.env.EXTERNAL_CDN_TEMPLATE ||
     'https://cdn.skypack.dev/[name]@[version]';
 
-  return Object.entries(externalDependencies).reduce(
-    (acc, [name, version]) => ({
+  return Object.entries(externalDependencies).reduce((acc, [name, version]) => {
+    if (!externalResolutions[name]) {
+      throw new Error(
+        `Dependency ${name} found in package.json but not in lockfile. Have you installed your dependencies?`,
+      );
+    }
+    return {
       ...acc,
       [name]: externalCdnTemplate
         .replace('[name]', name)
-        .replace('[version]', version),
-    }),
-    {},
-  );
+        .replace('[version]', version || externalResolutions[name])
+        .replace('[resolution]', externalResolutions[name]),
+    };
+  }, {});
 }
 
 const packageRegex =

packages/modular-scripts/src/__tests__/__snapshots__/esmView.test.ts.snap

@@ -12872,6 +12872,80 @@ export { e as default };
 "
 `;
 
+exports[`modular-scripts WHEN building a esm-view with resolutions THEN rewrites the dependencies 1`] = `
+"import * as e from \\"https://mycustomcdn.net/react@17.0.2\\";
+import r from \\"https://mycustomcdn.net/lodash@4.17.21/get\\";
+import t from \\"https://mycustomcdn.net/lodash.merge@4.6.2\\";
+import { difference as i } from \\"https://mycustomcdn.net/lodash@4.17.21\\";
+function m() {
+  return e.createElement(
+    \\"div\\",
+    null,
+    e.createElement(
+      \\"pre\\",
+      null,
+      JSON.stringify({ get: r, merge: t, difference: i })
+    )
+  );
+}
+export { m as default };
+//# sourceMappingURL=/static/js/index-IDYQ56WQ.js.map
+"
+`;
+
+exports[`modular-scripts WHEN building a esm-view with resolutions and webpack THEN rewrites the dependencies 1`] = `
+"import * as e from \\"https://mycustomcdn.net/react@17.0.2\\";
+import * as t from \\"https://mycustomcdn.net/lodash@4.17.21/get\\";
+import * as r from \\"https://mycustomcdn.net/lodash.merge@4.6.2\\";
+import * as n from \\"https://mycustomcdn.net/lodash@4.17.21\\";
+var a = {
+    d: (e, t) => {
+      for (var r in t)
+        a.o(t, r) &&
+          !a.o(e, r) &&
+          Object.defineProperty(e, r, { enumerable: !0, get: t[r] });
+    },
+    o: (e, t) => Object.prototype.hasOwnProperty.call(e, t),
+  },
+  o = {};
+a.d(o, { Z: () => s });
+const d = ((e) => {
+  var t = {};
+  return a.d(t, e), t;
+})({ createElement: () => e.createElement });
+const c = ((e) => {
+  var t = {};
+  return a.d(t, e), t;
+})({ default: () => t.default });
+const f = ((e) => {
+  var t = {};
+  return a.d(t, e), t;
+})({ default: () => r.default });
+const m = ((e) => {
+  var t = {};
+  return a.d(t, e), t;
+})({ difference: () => n.difference });
+function s() {
+  return d.createElement(
+    \\"div\\",
+    null,
+    d.createElement(
+      \\"pre\\",
+      null,
+      JSON.stringify({
+        get: c.default,
+        merge: f.default,
+        difference: m.difference,
+      })
+    )
+  );
+}
+var l = o.Z;
+export { l as default };
+//# sourceMappingURL=main.219bc98b.js.map
+"
+`;
+
 exports[`modular-scripts WHEN building a esm-view with various kinds of package dependencies THEN rewrites the dependencies 1`] = `
 "import * as e from \\"https://mycustomcdn.net/react?version=17.0.2\\";
 import r from \\"https://mycustomcdn.net/lodash?version=^4.17.21/get\\";

packages/modular-scripts/src/__tests__/esmView.test.ts

@@ -178,7 +178,7 @@ describe('modular-scripts', () => {
       expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
         .toMatchInlineSnapshot(`
         "sample-esm-view
-        ├─ index.html #17sfbiz
+        ├─ index.html #1t5wlh8
         ├─ package.json
         └─ static
            └─ js
@@ -205,7 +205,7 @@ describe('modular-scripts', () => {
       expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
         .toMatchInlineSnapshot(`
         "sample-esm-view
-        ├─ index.html #17sfbiz
+        ├─ index.html #1t5wlh8
         ├─ package.json
         └─ static
            └─ js
@@ -290,7 +290,7 @@ describe('modular-scripts', () => {
       expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
         .toMatchInlineSnapshot(`
         "sample-esm-view
-        ├─ index.html #17sfbiz
+        ├─ index.html #1t5wlh8
         ├─ package.json
         └─ static
            └─ js
@@ -327,6 +327,158 @@ describe('modular-scripts', () => {
     });
   });
 
+  describe('WHEN building a esm-view with resolutions', () => {
+    beforeAll(async () => {
+      await fs.copyFile(
+        path.join(__dirname, 'TestViewPackages.test-tsx'),
+        path.join(packagesPath, targetedView, 'src', 'index.tsx'),
+      );
+
+      const packageJsonPath = path.join(
+        packagesPath,
+        targetedView,
+        'package.json',
+      );
+      const packageJson = (await fs.readJSON(
+        packageJsonPath,
+      )) as CoreProperties;
+
+      await fs.writeJSON(
+        packageJsonPath,
+        Object.assign(packageJson, {
+          dependencies: {
+            lodash: '^4.17.21',
+            'lodash.merge': '^4.6.2',
+          },
+        }),
+      );
+
+      await execa('yarnpkg', [], {
+        cwd: modularRoot,
+        cleanup: true,
+      });
+
+      await modular('build sample-esm-view', {
+        stdio: 'inherit',
+        env: {
+          USE_MODULAR_ESBUILD: 'true',
+          EXTERNAL_CDN_TEMPLATE: 'https://mycustomcdn.net/[name]@[resolution]',
+        },
+      });
+    });
+
+    it('THEN outputs the correct directory structure', () => {
+      expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
+        .toMatchInlineSnapshot(`
+        "sample-esm-view
+        ├─ index.html #1t5wlh8
+        ├─ package.json
+        └─ static
+           └─ js
+              ├─ _trampoline.js #1j54e9x
+              ├─ index-IDYQ56WQ.js #1g1vpil
+              └─ index-IDYQ56WQ.js.map #l9p9hs"
+      `);
+    });
+
+    it('THEN rewrites the dependencies', async () => {
+      const baseDir = path.join(
+        modularRoot,
+        'dist',
+        'sample-esm-view',
+        'static',
+        'js',
+      );
+
+      const indexFile = (
+        await fs.readFile(path.join(baseDir, 'index-IDYQ56WQ.js'))
+      ).toString();
+      expect(
+        prettier.format(indexFile, {
+          filepath: 'index-F6YQ237K.js',
+        }),
+      ).toMatchSnapshot();
+      expect(indexFile).toContain(`https://mycustomcdn.net/react@1`);
+      expect(indexFile).toContain(`https://mycustomcdn.net/lodash@4`);
+    });
+  });
+
+  describe('WHEN building a esm-view with resolutions and webpack', () => {
+    beforeAll(async () => {
+      await fs.copyFile(
+        path.join(__dirname, 'TestViewPackages.test-tsx'),
+        path.join(packagesPath, targetedView, 'src', 'index.tsx'),
+      );
+
+      const packageJsonPath = path.join(
+        packagesPath,
+        targetedView,
+        'package.json',
+      );
+      const packageJson = (await fs.readJSON(
+        packageJsonPath,
+      )) as CoreProperties;
+
+      await fs.writeJSON(
+        packageJsonPath,
+        Object.assign(packageJson, {
+          dependencies: {
+            lodash: '^4.17.21',
+            'lodash.merge': '^4.6.2',
+          },
+        }),
+      );
+
+      await execa('yarnpkg', [], {
+        cwd: modularRoot,
+        cleanup: true,
+      });
+
+      await modular('build sample-esm-view', {
+        stdio: 'inherit',
+        env: {
+          EXTERNAL_CDN_TEMPLATE: 'https://mycustomcdn.net/[name]@[resolution]',
+        },
+      });
+    });
+
+    it('THEN outputs the correct directory structure', () => {
+      expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
+        .toMatchInlineSnapshot(`
+        "sample-esm-view
+        ├─ asset-manifest.json #1pem6dg
+        ├─ index.html #1t5wlh8
+        ├─ package.json
+        └─ static
+           └─ js
+              ├─ _trampoline.js #1fc8fjx
+              ├─ main.219bc98b.js #g4nmwx
+              └─ main.219bc98b.js.map #1cp7wwt"
+      `);
+    });
+
+    it('THEN rewrites the dependencies', async () => {
+      const baseDir = path.join(
+        modularRoot,
+        'dist',
+        'sample-esm-view',
+        'static',
+        'js',
+      );
+
+      const indexFile = (
+        await fs.readFile(path.join(baseDir, 'main.219bc98b.js'))
+      ).toString();
+      expect(
+        prettier.format(indexFile, {
+          filepath: 'index-F6YQ237K.js',
+        }),
+      ).toMatchSnapshot();
+      expect(indexFile).toContain(`https://mycustomcdn.net/react@1`);
+      expect(indexFile).toContain(`https://mycustomcdn.net/lodash@4`);
+    });
+  });
+
   describe('WHEN building a esm-view specifying a dependency to not being rewritten', () => {
     beforeAll(async () => {
       await modular('build sample-esm-view', {
@@ -344,7 +496,7 @@ describe('modular-scripts', () => {
       expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
         .toMatchInlineSnapshot(`
         "sample-esm-view
-        ├─ index.html #17sfbiz
+        ├─ index.html #1t5wlh8
         ├─ package.json
         └─ static
            └─ js
@@ -408,7 +560,7 @@ describe('modular-scripts', () => {
       expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
         .toMatchInlineSnapshot(`
         "sample-esm-view
-        ├─ index.html #17sfbiz
+        ├─ index.html #1t5wlh8
         ├─ package.json
         └─ static
            └─ js
@@ -472,7 +624,7 @@ describe('modular-scripts', () => {
       expect(tree(path.join(modularRoot, 'dist', 'sample-esm-view')))
         .toMatchInlineSnapshot(`
         "sample-esm-view
-        ├─ index.html #17sfbiz
+        ├─ index.html #1t5wlh8
         ├─ package.json
         └─ static
            └─ js