feat(imports): support import attributes - fixes #14674

[redfox-mx]

Description

Fixes #14674, #12140

Adds support for import attributes by parsing them in the import analysis plugin.

Additional context

How this works:

• es-module-lexer provides information about where the attributes are. We already use this to clip them off.
• We grab the string (import attributes into source code) and convert to object literal { foo: 'bar' }
• Pass this through to resolveId where plugins can do what they want.

Build phase

• At build time we remove strip import attributes step since rollup remove it for us, it allows to pass attributes to resolveId hook

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines, especially the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes ).
• Update the corresponding documentation if needed.
• Ideally, include relevant tests that fail without this PR but pass with it.

PS: this pr solve some errors of #15654

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[redfox-mx]

Hi! lint job fails since import attribute syntax is not supported by eslint

[fregante]

Hi! lint job fails since import attribute syntax is not supported by eslint

That's weird, the ESLint config is already using the TypeScript parser, which does support import attributes.

https://github.com/redfox-mx/vite/blob/1f2d0f60cf008fb0dbba7bbf34c1b1d96cbfd7db/eslint.config.js#L36

See: https://x.com/bradzacher/status/1772901399518408775

I just used it myself, without any config: https://github.com/refined-github/shorten-repo-url/pull/48/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R34

[redfox-mx]

That's weird, the ESLint config is already using the TypeScript parser, which does support import attributes.
https://github.com/redfox-mx/vite/blob/1f2d0f60cf008fb0dbba7bbf34c1b1d96cbfd7db/eslint.config.js#L36

I know! But i dont really know how fix it. I get this message if I remove it form ignores option:

D:\repos\vite\playground\resolve\import-attributes.js
  1:74  error  Parsing error: ';' expected

BTW, no matter if I add or not ';', it doesn't desappear. Maybe it is caused by pnpm resolution to typescript 5.2.2 and import attributes are added in 5.3

vite/pnpm-lock.yaml

Lines 133 to 135 in 61357f6

	typescript:
	specifier: ^5.2.2
	version: 5.2.2

[redfox-mx]

@fregante yep! Typescript supports import attributes in v5.3

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html

[fregante]

I just realized:

At build time we remove strip import attributes step since rollup remove it for us

That's not what I'd want though, if the import attributes are removed they will be broken. I'm using Vite to bundle a library that imports a third-party JSON file.

• Don't bundle github-reserved-names refined-github/github-url-detection#194

Here I'm using Vite for tree-shaking, without bundling external dependencies.

[redfox-mx]

Well, import attribute removal is not about vite (only), rollup output removes attributes no matter what you do https://stackblitz.com/edit/rollup-import-attributes?file=rollup.config.js

In that sense, I updated the importAnalysisBuild plugin to "prevent" removing attributes from the source code and allow it to pass through the plugin system (resolveId).

NOTE: Remember, vite uses esbuild for development, but at build time, rollup bundles our code. If you want a transpiler option you can opt by esbuild, whin bundle option https://esbuild.github.io/getting-started/#bundling-for-the-browser

[fregante]

Thanks @redfox-mx! That mostly worked for me