Merge pull request #2723 from modernweb-dev/fix/dedupe-imports-outside

fix(dev-server-rollup): dedupe imports from outside root

.changeset/witty-ways-occur.md

@@ -0,0 +1,5 @@
+---
+'@web/dev-server-rollup': patch
+---
+
+dedupe imports from outside root

packages/dev-server-rollup/src/rollupAdapter.ts

@@ -289,9 +289,9 @@ export function rollupAdapter(
 
         // append a path separator to rootDir so we are actually testing containment
         // of the normalized path within the rootDir folder
-        const checkRootDir = rootDir.endsWith(path.sep) ? rootDir : rootDir + path.sep;
+        const normalizedRootDir = rootDir.endsWith(path.sep) ? rootDir : rootDir + path.sep;
 
-        if (!normalizedPath.startsWith(checkRootDir)) {
+        if (!normalizedPath.startsWith(normalizedRootDir)) {
           const relativePath = path.relative(rootDir, normalizedPath);
           const dirUp = `..${path.sep}`;
           const lastDirUpIndex = relativePath.lastIndexOf(dirUp) + 3;
@@ -317,8 +317,17 @@ export function rollupAdapter(
           const importPath = toBrowserPath(relativePath.substring(lastDirUpIndex));
           resolvedImportPath = `/__wds-outside-root__/${dirUpStrings.length - 1}/${importPath}`;
         } else {
-          const resolveRelativeTo = path.dirname(filePath);
-          const relativeImportFilePath = path.relative(resolveRelativeTo, resolvedImportPath);
+          let relativeImportFilePath = '';
+
+          if (context.url.match(OUTSIDE_ROOT_REGEXP)) {
+            const pathInsideRootDir = `/${normalizedPath.replace(normalizedRootDir, '')}`;
+            const resolveRelativeTo = path.dirname(context.url);
+            relativeImportFilePath = path.relative(resolveRelativeTo, pathInsideRootDir);
+          } else {
+            const resolveRelativeTo = path.dirname(filePath);
+            relativeImportFilePath = path.relative(resolveRelativeTo, resolvedImportPath);
+          }
+
           resolvedImportPath = `./${toBrowserPath(relativeImportFilePath)}`;
         }
 

packages/dev-server-rollup/test/node/fixtures/monorepo-import-inside-from-outside/src/packages/subpackage/app.js

@@ -0,0 +1 @@
+import 'react';

packages/dev-server-rollup/test/node/unit.test.ts

@@ -104,6 +104,46 @@ describe('@web/dev-server-rollup', () => {
     });
   });
 
+  it('files inside root directory imported by files inside or outside are resolved to be deduped in the browser', async () => {
+    const rootDir = path.resolve(
+      __dirname,
+      'fixtures',
+      'monorepo-import-inside-from-outside',
+      'src',
+      'packages',
+      'subpackage',
+    );
+    const { server, host } = await createTestServer({
+      rootDir,
+      plugins: [
+        fromRollup(() => {
+          return {
+            name: 'prebundle-modules',
+            async resolveId(source) {
+              if (source === 'react') {
+                return path.join(rootDir, 'node_modules', '.prebundled_modules', 'react.mjs');
+              }
+            },
+          };
+        })(),
+      ],
+    });
+
+    try {
+      const responseTextInside = await fetchText(`${host}/app.js`);
+      expectIncludes(responseTextInside, "import './node_modules/.prebundled_modules/react.mjs'");
+      const responseTextOutside = await fetchText(
+        `${host}/__wds-outside-root__/3/node_modules/storybook/index.js`,
+      );
+      expectIncludes(
+        responseTextOutside,
+        "import './../../../../node_modules/.prebundled_modules/react.mjs'",
+      );
+    } finally {
+      server.stop();
+    }
+  });
+
   describe('load', () => {
     it('can serve files', async () => {
       const plugin: RollupPlugin = {