Inline Web Worker looses special characters

[Simolation]

Describe the bug

I am creating a TypeScript library using the Vite lib mode. When I use an inline Web Worker that has special characters in the code, those special characters are decoded incorrectly.

For example, I added a • character ( • ) into the Web Worker. When it is built and imported in another Vite project, the printed bullet character is â�¢ instead of • .

I observed that inside of the base64 encoded Web Worker in the build, the character is seemingly still correct, when I copy and paste the base64 text into https://www.base64decode.org/.

So, I suppose the problem is when loading and decoding the inline Web Worker using atob, as atob("IOKAoiBIZWxsbyBmcm9tIHdvcmtlcg==") is â\x80¢ Hello from worker.

Reproduction

https://stackblitz.com/edit/vitejs-vite-tyt9yp

Steps to reproduce

Run npm run install && npm run dev in the vite-project folder to start the package which imports the vite-lib. In the console log in the browser, the message the faulty message from the inline Web Worker is printed.

System Info

System:
    OS: macOS 13.2
    CPU: (8) arm64 Apple M1
    Memory: 156.81 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 3.3.1 - ~/.yarn/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Firefox: 109.0.1
    Safari: 16.3

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• The provided reproduction is a minimal reproducible example of the bug.

[Simolation]

As MDN states, the atob()method only handles ASCII and does not support UTF-8.

A solution on StackOverflow might be this one: https://stackoverflow.com/a/43271130/7268229
I am not sure which implications on performance this has, but it fixes the UTF-8 character decoding when injected into the worker build.

function decodeBase64(base64) {
    return new TextDecoder().decode(Uint8Array.from(atob(base64), c => c.charCodeAt(0)));
}

[zhengcling]

As MDN states, the atob()method only handles ASCII and does not support UTF-8.

A solution on StackOverflow might be this one: https://stackoverflow.com/a/43271130/7268229 I am not sure which implications on performance this has, but it fixes the UTF-8 character decoding when injected into the worker build.

function decodeBase64(base64) {
    return new TextDecoder().decode(Uint8Array.from(atob(base64), c => c.charCodeAt(0)));
}

I'm facing the same problem. How's it going? Thanks! @Simolation @sapphi-red

[sapphi-red]

@zhengcling You can help us by rebasing #12122 on main branch and adding a test for it.