feat: convert overlay template to DOM

[Snugug]

Description

Adds Trusted Types support to the Error overlay.

Resolves #15850
Resolves #10553

---

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 #123).
• Update the corresponding documentation if needed.
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[sapphi-red]

IIUC if a user is using Content-Security-Policy: trusted-types 'a-policy-name-that-they-use';, then the user has to add 'error-overlay' to that. I wonder if it's better to construct the element with document.createElement (or hyperscript?) so that they don't need to add 'error-overlay'.

[Snugug]

If you don't already have hyperscript in the codebase, I'll rewrite it with DOM. NBD.

[Snugug]

Ok. I've converted this over to DOM. I added a small pair of helper functions to make reading the creation of the actual element easier.

[sapphi-red]

Thanks!

[sapphi-red]

💚

[bluwy]

For me, I'm not a big fan of needing to tweak Vite in order to support CSP. I think it should be additive and not affect how we write code. Personally I would prefer if the changes are done via Vite plugins at the meantime if this change is required. (You can transform() overlay.js)

That said, I've talked with @sapphi-red and @patak-dev about this, and I'm okay if we go with the first commit instead that uses trustedTypes to support this, and we have documentation for how to incorporate this.

But ultimately, I'd prefer a better CSP story altogether before we support this. #14653 is one where IIRC an option might be needed, and the overlay could perhaps leverage it.

[Snugug]

Hey all, what's the best way forward here? I've got one approval and one saying no

[patak-dev]

@Snugug the PR is now in the team board. We'll discuss it live on the next meeting so we can give you a definite answer about how to move forward. I would also like to see this applied, and both approaches are fine to me to be honest.

[Snugug]

Sgtm thank you!

[patak-dev]

We discussed this proposal in the last Vite team meeting and we decided to move forward with it. We'd like to keep the current approach using h() to have a better out-of-the-box story. Thanks for your patience and work on this PR and the templates one @Snugug. We'll be merging this one as part of Vite 5.2.

[patak-dev]

/ecosystem-ci run

[vite-ecosystem-ci]

📝 Ran ecosystem CI on 6f2d871: Open

suite	result	latest scheduled
analogjs	✅ success	✅ success
astro	✅ success	✅ success
histoire	✅ success	✅ success
ladle	✅ success	✅ success
laravel	✅ success	✅ success
marko	✅ success	✅ success
nuxt	✅ success	✅ success
nx	❌ failure	❌ failure
previewjs	✅ success	✅ success
qwik	✅ success	✅ success
rakkas	✅ success	✅ success
sveltekit	✅ success	✅ success
unocss	✅ success	✅ success
vike	✅ success	✅ success
vite-plugin-pwa	✅ success	✅ success
vite-plugin-react	✅ success	✅ success
vite-plugin-react-pages	✅ success	✅ success
vite-plugin-react-swc	✅ success	✅ success
vite-plugin-svelte	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vite-setup-catalogue	✅ success	✅ success
vitepress	✅ success	✅ success
vitest	✅ success	✅ success

[juho]

This seems to have broken this import format inside web workers as document is not available:

fetch('https://esm.run/svelte@next/compiler.cjs').then(res => {
    res.text().then(source => {
        const blob = new Blob([source], { type: 'text/javascript' });
        import(/* @vite-ignore */URL.createObjectURL(blob)).then((_svelte) => {
            svelte = _svelte;
        });
    })
})

[patak-dev]

@juho would you create an issue with a minimal reproduction so we can properly track it?

[Mister-Hope]

This breaks web worker, see #16308

[jlarmstrongiv]

@patak-dev there is a reproduction and issue tracking for this regression in #16277 (comment)