fix: relative path html

[poyoho]

Description

fix: #7818

Additional context

isExternalUrl is truth? html support ftp / file protocol?

this PR make script style src attr relative path
from

asset/main.js
asset/style.js
http://a.a/asset/style.js
https://a.a/asset/style.js

to

./asset/main.js // add ./
./asset/style.js // add ./
http://a.a/asset/style.js // no change
https://a.a/asset/style.js // no change

---

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.
• Read the Pull Request Guidelines and follow the Commit Convention.
• 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 #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[patak-dev]

I don't know if we could support this without a breaking change. Could we import an npm module directly before? 🤔

<script src="module-with-side-effect" type="module"></script>

Another issue is what happens with nested HTML, where does assets/file.js points for them? Is it ok to also point them relative to the HTML itself?

Maybe we should ask people to keep using relative paths instead?

[poyoho]

I think no base path(aaset/main.js) is relative path too? 👀

https://github.com/vitejs/vite/pull/7644/files#diff-aa53520bfd53e6c24220c44494457cc66370fd2bee513c15f9be7eb537a363e7R758-R760

I don't know what is nested HTML

[patak-dev]

Nested html as in an MPA where you have:

index.html
pageA/index.html
pageB/index.html

[poyoho]

emm... asset/main.js seems to equal with ./asset/main.js 🤔

the other way is call waring like style no resolved and suggest user add ./ by hand?

[poyoho]

add the test to try it 👀

[sapphi-red]

I have tested a bit.
npm i normalize.css ./pkg

<link rel="stylesheet" href="normalize.css" /> <!-- this does not resolve to node_modules/normalize.css/normalize.css -->
<link rel="stylesheet" href="normalize.css/normalize.css" /> <!-- this does not resolve to node_modules/normalize.css/normalize.css -->
<script type="module" src="pkg"></script> <!-- this **does** resolve to node_modules/pkg/index.js -->

So it would be a breaking change?

[bluwy]

I think we should use the preferRelative feature for HTML files only. Adding a importer?.endsWith('.html') on this line:

vite/packages/vite/src/node/plugins/resolve.ts

Line 177 in 8220ee5

if (id.startsWith('.') || (preferRelative && /^\w/.test(id))) {

Fixed the issue for me, and should avoid the breaking change. What do y'all think?

[poyoho]

@sapphi-red now I know this use case <script src="module-with-side-effect" type="module"></script>. we make all the module script / link href to js import. we can use this case. My resolution is actually break change. 😂
thanks @bluwy good idea to avoid change it.

thanks again @patak-dev @sapphi-red @bluwy help for me. please /cc the new change.