fix(rollup-plugin-import-meta-assets): fix source map when path has a dynamic var

.changeset/fluffy-files-deny.md

@@ -0,0 +1,5 @@
+---
+'@web/rollup-plugin-import-meta-assets': minor
+---
+
+fix source map when path has a dynamic var

packages/rollup-plugin-import-meta-assets/package.json

@@ -41,6 +41,7 @@
     "import-meta"
   ],
   "dependencies": {
+    "@jridgewell/remapping": "^2.3.5",
     "@rollup/plugin-dynamic-import-vars": "^2.1.0",
     "@rollup/pluginutils": "^5.0.2",
     "estree-walker": "^2.0.2",

packages/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js

@@ -78,13 +78,15 @@ function importMetaAssets({ include, exclude, warnOnError, transform } = {}) {
         return null;
       }
 
+      let newCode = code;
+
       // Part 1: resolve dynamic template literal expressions
-      const parsed = this.parse(code);
+      const ast1 = this.parse(newCode);
+      let ms1;
 
       let dynamicURLIndex = -1;
-      let ms;
 
-      await asyncWalk(parsed, {
+      await asyncWalk(ast1, {
         enter: async node => {
           const importMetaUrlType = getImportMetaUrlType(node);
 
@@ -95,7 +97,10 @@ function importMetaAssets({ include, exclude, warnOnError, transform } = {}) {
 
           try {
             // see if this is a Template Literal with expressions inside, and generate a glob expression
-            const glob = dynamicURLToGlob(node.arguments[0], code.substring(node.start, node.end));
+            const glob = dynamicURLToGlob(
+              node.arguments[0],
+              newCode.substring(node.start, node.end),
+            );
 
             if (!glob) {
               // this was not a variable dynamic url
@@ -110,10 +115,10 @@ function importMetaAssets({ include, exclude, warnOnError, transform } = {}) {
               .map(r => (r.startsWith('./') || r.startsWith('../') ? r : `./${r}`));
 
             // create magic string if it wasn't created already
-            ms = ms || new MagicString(code);
+            ms1 = ms1 || new MagicString(newCode);
             // unpack variable dynamic url into a function with url statements per file, rollup
             // will turn these into chunks automatically
-            ms.prepend(
+            ms1.prepend(
               `function __variableDynamicURLRuntime${dynamicURLIndex}__(path) {
   switch (path) {
 ${paths.map(p => `    case '${p}': return new URL('${p}', import.meta.url);`).join('\n')}
@@ -126,7 +131,7 @@ ${`    default: return new Promise(function(resolve, reject) {
             );
             // call the runtime function instead of doing a dynamic url, the url specifier will
             // be evaluated at runtime and the correct url will be returned by the injected function
-            ms.overwrite(
+            ms1.overwrite(
               node.start,
               node.start + 7,
               `__variableDynamicURLRuntime${dynamicURLIndex}__`,
@@ -141,17 +146,15 @@ ${`    default: return new Promise(function(resolve, reject) {
         },
       });
 
-      let newCode = code;
-      if (ms && dynamicURLIndex !== -1) {
-        newCode = ms.toString();
+      if (ms1) {
+        newCode = ms1.toString();
       }
 
       // Part 2: emit asset files
-      const ast = this.parse(newCode);
-      const magicString = new MagicString(newCode);
-      let modifiedCode = false;
+      const ast2 = this.parse(newCode);
+      let ms2;
 
-      await asyncWalk(ast, {
+      await asyncWalk(ast2, {
         enter: async node => {
           const importMetaUrlType = getImportMetaUrlType(node);
           if (!importMetaUrlType) {
@@ -179,12 +182,12 @@ ${`    default: return new Promise(function(resolve, reject) {
                 originalFileName: absoluteAssetPath,
                 source: transformedAssetContents,
               });
-              magicString.overwrite(
+              ms2 = ms2 || new MagicString(newCode);
+              ms2.overwrite(
                 node.arguments[0].start,
                 node.arguments[1].end,
                 `import.meta.ROLLUP_FILE_URL_${ref}`,
               );
-              modifiedCode = true;
             } catch (error) {
               // Do not process directories, just skip
               if (error.code !== 'EISDIR') {
@@ -199,9 +202,29 @@ ${`    default: return new Promise(function(resolve, reject) {
         },
       });
 
+      if (ms2) {
+        newCode = ms2.toString();
+      }
+
+      if (!ms1 && !ms2) {
+        return null;
+      }
+
+      let map;
+      if (ms1 && ms2) {
+        const map1 = ms1.generateMap({ hires: true, source: id });
+        const map2 = ms2.generateMap({ hires: true, source: id });
+        const remapping = (await import('@jridgewell/remapping')).default;
+        map = remapping([map2, map1], () => null);
+      } else if (ms2) {
+        map = ms2.generateMap({ hires: true });
+      } else if (ms1) {
+        map = ms1.generateMap({ hires: true });
+      }
+
       return {
-        code: magicString.toString(),
-        map: modifiedCode ? magicString.generateMap({ hires: true, includeContent: true }) : null,
+        code: newCode,
+        map,
       };
     },
   };

packages/rollup-plugin-import-meta-assets/tsconfig.json

@@ -3,7 +3,8 @@
 {
   "extends": "../../tsconfig.node-base.json",
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "node16",
+    "moduleResolution": "node16",
     "outDir": "./dist",
     "rootDir": "./src",
     "composite": true,