Support characters outside of the Latin1 range in Browser

[curran]

I came across this issue where if the source code passed into magic-string contains characters outside of the Latin1 range, e.g. Cyrillic, and the execution context is a browser (works fine in Node), then an error is thrown:

InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

I did some research and found a solution (in the context of a Rollup use case):

const rollupBundle = await rollup(inputOptions);
const { code, map } = await rollupBundle.generate(outputOptions);

// Monkey patch magic-string internals
// to support characters outside of the Latin1 range, e.g. Cyrillic.
const toString = map.toString.bind(map);
map.toString = () => unescape(encodeURIComponent(toString()));

// Inspired by https://github.com/rollup/rollup/issues/121
const codeWithSourceMap = code + '\n//# sourceMappingURL=' + map.toUrl();

Related reading:

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa#Unicode_strings

• magic-string/src/SourceMap.js

  Line 3 in 3466b02

  let btoa = () => {

I'd be happy to submit a PR incorporating this into magic-string, if there's interest.

[Rich-Harris]

thanks! this was actually a long-standing annoyance in the Svelte REPL; had no idea it would be such an easy fix. I had to go into that file today anyway, to remove a deprecated new Buffer(...) call, so I changed this while I was at it: 2177946

[curran]

Hooray! Thank you for the fix.