Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 10, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
25bdafb
fix(rollup-plugin-import-meta-assets): completely overwrite import.me…
cprecioso Jun 7, 2022
6ab8a0a
test(rollup-plugin-import-meta-assets): update tests
cprecioso Jun 7, 2022
6a50cd7
Merge branch 'master' into update-url-import
cprecioso Jun 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tall-oranges-fetch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@web/rollup-plugin-import-meta-assets': minor
---

Change output to avoid import.meta.url in non-ESM builds
2 changes: 1 addition & 1 deletion packages/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions packages/rollup-plugin-import-meta-assets/test/snapshots/different-asset-levels-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe I mislooked first time, but I was under impression that the whole outer URL wrapper will be gone with you change, not only the import.meta.url
do you think it's a more complex change or is the outer one still needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The outer one is still needed for the most general case.

When using the import.meta.ROLLUP_FILE_URL_referenceId notation, Rollup will generate an expression of type string, not of type URL. The expression does use URL internally but it's an implementation detail (that changes depending on the output format), and the final result is still a string. So to get a URL as the new URL("./asset", import.meta.url) expression suggests, we need to wrap it inside a new URL() call anyway. You can see example output for both ESM and CJS in the first code example in the PR description.

The main problem I was trying to solve with this PR is not removing URL constructors, but the fact that keeping the outermost import.meta.url was tripping up CJS support.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an optimization that you can do if the input is new URL("./asset", import.meta.url).href, as you could replace that whole-sale with the import.meta.ROLLUP_FILE_URL_referenceId expression and be correct, but only for the case where we're calling .href or .toString(). I do not have the bandwidth to implement that currently.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok got it! thanks for the explainer, helps with the decision making a lot and historical reference


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,
Expand Down
8 changes: 4 additions & 4 deletions packages/rollup-plugin-import-meta-assets/test/snapshots/directories-ignored.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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),
Expand Down
8 changes: 4 additions & 4 deletions packages/rollup-plugin-import-meta-assets/test/snapshots/dynamic-vars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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))
Expand All @@ -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);
2 changes: 1 addition & 1 deletion packages/rollup-plugin-import-meta-assets/test/snapshots/four-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
8 changes: 4 additions & 4 deletions packages/rollup-plugin-import-meta-assets/test/snapshots/multi-level-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
10 changes: 5 additions & 5 deletions packages/rollup-plugin-import-meta-assets/test/snapshots/simple-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/rollup-plugin-import-meta-assets/test/snapshots/three-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 };
8 changes: 4 additions & 4 deletions packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle-ignored.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
10 changes: 5 additions & 5 deletions packages/rollup-plugin-import-meta-assets/test/snapshots/transform-bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
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 someJpg = new URL(new URL('assets/image-C92N8yPj.jpg', import.meta.url).href, import.meta.url);
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(new URL('assets/image-C92N8yPj.jpg', import.meta.url).href);

console.log({
justUrlObject,
Expand Down