Merge pull request #1984 from cprecioso/update-url-import

fix(rollup-plugin-import-meta-assets): completely overwrite import.meta.url

Author: bashmish

.changeset/tall-oranges-fetch.md

@@ -0,0 +1,5 @@
+---
+'@web/rollup-plugin-import-meta-assets': minor
+---
+
+Change output to avoid import.meta.url in non-ESM builds

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

@@ -180,7 +180,7 @@ ${`    default: return new Promise(function(resolve, reject) {
               });
               magicString.overwrite(
                 node.arguments[0].start,
-                node.arguments[0].end,
+                node.arguments[1].end,
                 `import.meta.ROLLUP_FILE_URL_${ref}`,
               );
               modifiedCode = true;

packages/rollup-plugin-import-meta-assets/test/snapshots/different-asset-levels-bundle.js

@@ -1,14 +1,14 @@
 const nameOne = 'one-name';
-const imageOne = new URL(new URL('assets/one-deep-Bkie7h0E.svg', import.meta.url).href, import.meta.url).href;
+const imageOne = new URL(new URL('assets/one-deep-Bkie7h0E.svg', import.meta.url).href).href;
 
 const nameTwo = 'two-name';
-const imageTwo = new URL(new URL('assets/two-deep-D7JyS-th.svg', import.meta.url).href, import.meta.url).href;
+const imageTwo = new URL(new URL('assets/two-deep-D7JyS-th.svg', import.meta.url).href).href;
 
 const nameThree = 'three-name';
-const imageThree = new URL(new URL('assets/three-deep-IN2CmsMK.svg', import.meta.url).href, import.meta.url).href;
+const imageThree = new URL(new URL('assets/three-deep-IN2CmsMK.svg', import.meta.url).href).href;
 
 const nameFour = 'four-name';
-const imageFour = new URL(new URL('assets/four-deep-CUlW6cvD.svg', import.meta.url).href, import.meta.url).href;
+const imageFour = new URL(new URL('assets/four-deep-CUlW6cvD.svg', import.meta.url).href).href;
 
 console.log({
   [nameOne]: imageOne,

packages/rollup-plugin-import-meta-assets/test/snapshots/directories-ignored.js

@@ -1,7 +1,7 @@
-const justUrlObject = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href, import.meta.url);
-const href = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href, import.meta.url).href;
-const pathname = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href, import.meta.url).pathname;
-const searchParams = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href, import.meta.url).searchParams;
+const justUrlObject = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href);
+const href = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href).href;
+const pathname = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).pathname;
+const searchParams = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).searchParams;
 
 const directories = [
   new URL('./', import.meta.url),

packages/rollup-plugin-import-meta-assets/test/snapshots/dynamic-vars.js

@@ -1,8 +1,8 @@
 function __variableDynamicURLRuntime0__(path) {
   switch (path) {
-    case './dynamic-assets/one.svg': return new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href, import.meta.url);
-    case './dynamic-assets/three.svg': return new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href, import.meta.url);
-    case './dynamic-assets/two.svg': return new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href, import.meta.url);
+    case './dynamic-assets/one.svg': return new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href);
+    case './dynamic-assets/three.svg': return new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href);
+    case './dynamic-assets/two.svg': return new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href);
     default: return new Promise(function(resolve, reject) {
       (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
         reject.bind(null, new Error("Unknown variable dynamic new URL statement: " + path))
@@ -16,6 +16,6 @@ const names = ['one', 'two'];
 // Therefore, we expect both one.svg, two.svg and three.svg to be bundled, and this to turn into a switch statement
 // with 3 cases (for all 3 assets in the dynamic-assets folder)
 const dynamicImgs = names.map(n => __variableDynamicURLRuntime0__(`./dynamic-assets/${n}.svg`));
-const backticksImg = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href, import.meta.url);
+const backticksImg = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href);
 
 console.log(dynamicImgs, backticksImg);

packages/rollup-plugin-import-meta-assets/test/snapshots/four-bundle.js

@@ -1,4 +1,4 @@
 const nameFour = 'four-name';
-const imageFour = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href, import.meta.url).href;
+const imageFour = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).href;
 
 export { imageFour, nameFour };

packages/rollup-plugin-import-meta-assets/test/snapshots/multi-level-bundle.js

@@ -1,14 +1,14 @@
 const nameOne = 'one-name';
-const imageOne = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href, import.meta.url).href;
+const imageOne = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href).href;
 
 const nameTwo = 'two-name';
-const imageTwo = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href, import.meta.url).href;
+const imageTwo = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href).href;
 
 const nameThree = 'three-name';
-const imageThree = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href, import.meta.url).href;
+const imageThree = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).href;
 
 const nameFour = 'four-name';
-const imageFour = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href, import.meta.url).href;
+const imageFour = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).href;
 
 console.log({
   [nameOne]: imageOne,

packages/rollup-plugin-import-meta-assets/test/snapshots/simple-bundle.js

@@ -1,8 +1,8 @@
-const justUrlObject = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href, import.meta.url);
-const href = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href, import.meta.url).href;
-const pathname = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href, import.meta.url).pathname;
-const searchParams = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href, import.meta.url).searchParams;
-const noExtension = new URL(new URL('assets/five-Bnvj_R70', import.meta.url).href, import.meta.url);
+const justUrlObject = new URL(new URL('assets/one-Bkie7h0E.svg', import.meta.url).href);
+const href = new URL(new URL('assets/two-D7JyS-th.svg', import.meta.url).href).href;
+const pathname = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).pathname;
+const searchParams = new URL(new URL('assets/four-CUlW6cvD.svg', import.meta.url).href).searchParams;
+const noExtension = new URL(new URL('assets/five-Bnvj_R70', import.meta.url).href);
 
 console.log({
   justUrlObject,

packages/rollup-plugin-import-meta-assets/test/snapshots/three-bundle.js

@@ -1,4 +1,4 @@
 const nameThree = 'three-name';
-const imageThree = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href, import.meta.url).href;
+const imageThree = new URL(new URL('assets/three-IN2CmsMK.svg', import.meta.url).href).href;
 
 export { imageThree, nameThree };

packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle-ignored.js

@@ -1,7 +1,7 @@
-const justUrlObject = new URL(new URL('assets/one--RhQWA3U.svg', import.meta.url).href, import.meta.url);
-const href = new URL(new URL('assets/two-CZdxIUwi.svg', import.meta.url).href, import.meta.url).href;
-const pathname = new URL(new URL('assets/three-tFhyRH_R.svg', import.meta.url).href, import.meta.url).pathname;
-const searchParams = new URL(new URL('assets/four-Cs1OId-q.svg', import.meta.url).href, import.meta.url).searchParams;
+const justUrlObject = new URL(new URL('assets/one--RhQWA3U.svg', import.meta.url).href);
+const href = new URL(new URL('assets/two-CZdxIUwi.svg', import.meta.url).href).href;
+const pathname = new URL(new URL('assets/three-tFhyRH_R.svg', import.meta.url).href).pathname;
+const searchParams = new URL(new URL('assets/four-Cs1OId-q.svg', import.meta.url).href).searchParams;
 const someJpg = new URL('./image.jpg', import.meta.url);
 
 console.log({