improve source map generation for SVG files (#1086)

* improve source map generation for namespaces * fix tests * pick main * make sure sourcemaps read correctly * fix snapshot
jpmorganchase · Nov 25, 2021 · 90d5172 · 90d5172
1 parent 7b8e03f
commit 90d5172
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 27 deletions.
diff --git a/packages/modular-scripts/src/__tests__/__snapshots__/app.esbuild.test.ts.snap b/packages/modular-scripts/src/__tests__/__snapshots__/app.esbuild.test.ts.snap
@@ -9115,8 +9115,8 @@ function App(): JSX.Element {
 export default App;
 ",
     "
-                        export { default } from \\"@svgurl:logo.svg\\";
-                        export { default as ReactComponent } from \\"@svgr:logo.svg\\";
+                        export { default } from \\"@svgurl:./logo.svg\\";
+                        export { default as ReactComponent } from \\"@svgr:./logo.svg\\";
                     ",
     "import * as React from \\"react\\";
 

diff --git a/packages/modular-scripts/src/__tests__/app.esbuild.test.ts b/packages/modular-scripts/src/__tests__/app.esbuild.test.ts
@@ -128,17 +128,6 @@ describe('when working with an app', () => {
 
   type SourceMap = Record<string, string | string[]>;
 
-  const normalizeSource = (pathName: string) => {
-    if (pathName.includes('svgr:')) {
-      return `${pathName.split(':')[0]}:${path.relative(
-        getModularRoot(),
-        pathName.split(':')[1],
-      )}`;
-    } else {
-      return pathName;
-    }
-  };
-
   const readSourceMap = (pathName: string) => {
     const map = fs.readJsonSync(
       path.join(modularRoot, 'dist', 'sample-esbuild-app', pathName),
@@ -148,7 +137,6 @@ describe('when working with an app', () => {
       // make the source root //modular so that it's the same
       // across platforms
       sourceRoot: '//modular',
-      sources: (map.sources as string[]).map(normalizeSource),
     };
   };
 

diff --git a/packages/modular-scripts/src/__tests__/esbuild-scripts/__snapshots__/svgr.test.tsx.snap b/packages/modular-scripts/src/__tests__/esbuild-scripts/__snapshots__/svgr.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WHEN running esbuild with the svgrPlugin WHEN there's a component import SHOULD ouput the correct index.js 1`] = `
-"// svgr:/packages/modular-scripts/src/__tests__/esbuild-scripts/__fixtures__/svgr-component/logo.svg
+"// svgr:packages/modular-scripts/src/__tests__/esbuild-scripts/__fixtures__/svgr-component/logo.svg
 import {
   createElement
 } from \\"react\\";
@@ -49,7 +49,7 @@ exports[`WHEN running esbuild with the svgrPlugin WHEN there's a url import SHOU
 "// svgurl:/packages/modular-scripts/src/__tests__/esbuild-scripts/__fixtures__/svgr-url/logo.svg
 var logo_default = \\"./logo-5JCTDEME.svg\\";
 
-// svgr:/packages/modular-scripts/src/__tests__/esbuild-scripts/__fixtures__/svgr-url/logo.svg
+// svgr:packages/modular-scripts/src/__tests__/esbuild-scripts/__fixtures__/svgr-url/logo.svg
 import {
   createElement
 } from \\"react\\";

diff --git a/packages/modular-scripts/src/__tests__/esbuild-scripts/moduleScopePlugin.test.ts b/packages/modular-scripts/src/__tests__/esbuild-scripts/moduleScopePlugin.test.ts
@@ -7,6 +7,7 @@ import * as tmp from 'tmp';
 import plugin from '../../esbuild-scripts/plugins/moduleScopePlugin';
 import type { Paths } from '../../utils/createPaths';
 import { formatError } from '../../esbuild-scripts/utils/formatError';
+import getModularRoot from '../../utils/getModularRoot';
 
 const emptyDir = async (dirName: string) => {
   await fs.emptyDir(dirName);
@@ -44,6 +45,7 @@ describe('WHEN running esbuild with the svgrPlugin', () => {
           ],
           logLevel: 'silent',
           outdir,
+          sourceRoot: getModularRoot(),
           bundle: true,
           splitting: true,
           format: 'esm',

diff --git a/packages/modular-scripts/src/__tests__/esbuild-scripts/svgr.test.tsx b/packages/modular-scripts/src/__tests__/esbuild-scripts/svgr.test.tsx
@@ -27,6 +27,7 @@ describe('WHEN running esbuild with the svgrPlugin', () => {
         // so that we don't get huge output sizes...
         external: ['react', 'react-dom'],
         outdir,
+        sourceRoot: getModularRoot(),
         bundle: true,
         splitting: true,
         format: 'esm',
@@ -84,6 +85,7 @@ describe('WHEN running esbuild with the svgrPlugin', () => {
         // so that we don't get huge output sizes...
         external: ['react', 'react-dom'],
         outdir,
+        sourceRoot: getModularRoot(),
         bundle: true,
         splitting: true,
         format: 'esm',
@@ -132,6 +134,7 @@ describe('WHEN running esbuild with the svgrPlugin', () => {
         // so that we don't get huge output sizes...
         external: ['react', 'react-dom'],
         outdir,
+        sourceRoot: getModularRoot(),
         bundle: true,
         splitting: true,
         format: 'esm',

diff --git a/packages/modular-scripts/src/esbuild-scripts/plugins/svgr.ts b/packages/modular-scripts/src/esbuild-scripts/plugins/svgr.ts
@@ -1,31 +1,47 @@
 import * as fs from 'fs-extra';
 import esbuild from 'esbuild';
+import { createRequire } from 'module';
 
 import svgr from '@svgr/core';
 import path from 'path';
+import getModularRoot from '../../utils/getModularRoot';
 
 function createPlugin(): esbuild.Plugin {
   const plugin: esbuild.Plugin = {
     name: 'svgr',
     setup(build) {
+      const modularRoot = getModularRoot();
+
       build.onResolve({ filter: /@svgr:.*/ }, (args) => {
         const pathName = path.join(
           args.resolveDir,
           args.path.slice('@svgr:'.length),
         );
+        const relativePath = path.relative(modularRoot, pathName);
+
         return {
-          path: pathName,
+          pluginData: {
+            ...args,
+          },
+          path: relativePath,
           namespace: 'svgr',
         };
       });
 
       build.onLoad({ filter: /.*/, namespace: 'svgr' }, async (args) => {
+        const pluginData = args.pluginData as esbuild.OnResolveArgs;
+
+        const pathName = path.join(
+          pluginData.resolveDir,
+          pluginData.path.slice('@svgr:'.length),
+        );
+
         const contents: string = await svgr(
-          await fs.readFile(args.path, 'utf8'),
+          await fs.readFile(pathName, 'utf8'),
         );
         return {
           contents,
-          resolveDir: path.dirname(args.path),
+          resolveDir: pluginData.resolveDir,
           loader: 'jsx',
         };
       });
@@ -50,15 +66,23 @@ function createPlugin(): esbuild.Plugin {
       });
 
       build.onResolve({ filter: /\.svg$/, namespace: 'file' }, (args) => {
-        const pathName = path.join(args.resolveDir, args.path);
+        const resolver = createRequire(args.importer);
+        const pathName = resolver.resolve(args.path);
+
         if (args.kind === 'url-token') {
           return {
-            path: pathName,
+            pluginData: {
+              ...args,
+            },
+            path: path.relative(modularRoot, pathName),
             namespace: 'modular-svgurl',
           };
         } else {
           return {
-            path: pathName,
+            pluginData: {
+              ...args,
+            },
+            path: path.relative(modularRoot, pathName),
             namespace: 'modular-svgr',
           };
         }
@@ -76,13 +100,13 @@ function createPlugin(): esbuild.Plugin {
       );
 
       build.onLoad({ filter: /\.svg$/, namespace: 'modular-svgr' }, (args) => {
-        const resolveDir = path.dirname(args.path);
-        const relativePath = path.relative(resolveDir, args.path);
+        const pluginData = args.pluginData as esbuild.OnResolveArgs;
+
         return {
-          resolveDir,
+          resolveDir: pluginData.resolveDir,
           contents: `
-                        export { default } from "@svgurl:${relativePath}";
-                        export { default as ReactComponent } from "@svgr:${relativePath}";
+                        export { default } from "@svgurl:${pluginData.path}";
+                        export { default as ReactComponent } from "@svgr:${pluginData.path}";
                     `,
           loader: 'jsx',
         };