chore(playground): support unicode in sfc playground (vuejs#3662)

HerringtonDarkholme · web-flow · commit 9a5bdb15df45 · 2021-06-08T10:12:15.000-04:00
atob/btoa only supports ASCII string which makes playground fails
to save unicode source. This patch add unicode support by combining
escape/encodeURIComponent. `escape` is chosen for backward
compatibility.
diff --git a/packages/sfc-playground/src/store.ts b/packages/sfc-playground/src/store.ts
@@ -1,5 +1,6 @@
 import { reactive, watchEffect } from 'vue'
 import { compileFile, MAIN_FILE } from './sfcCompiler'
+import { utoa, atou } from './utils'
 
 const welcomeCode = `
 <template>
@@ -38,7 +39,7 @@ let files: Store['files'] = {}
 
 const savedFiles = location.hash.slice(1)
 if (savedFiles) {
-  const saved = JSON.parse(atob(savedFiles))
+  const saved = JSON.parse(atou(savedFiles))
   for (const filename in saved) {
     files[filename] = new File(filename, saved[filename])
   }
@@ -70,7 +71,7 @@ for (const file in store.files) {
 }
 
 watchEffect(() => {
-  history.replaceState({}, '', '#' + btoa(JSON.stringify(exportFiles())))
+  history.replaceState({}, '', '#' + utoa(JSON.stringify(exportFiles())))
 })
 
 export function exportFiles() {
diff --git a/packages/sfc-playground/src/utils.ts b/packages/sfc-playground/src/utils.ts
@@ -7,3 +7,13 @@ export function debounce(fn: Function, n = 100) {
     }, n)
   }
 }
+
+// prefer old unicode hacks for backward compatibility
+// https://base64.guru/developers/javascript/examples/unicode-strings
+export function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)))
+}
+
+export function atou(base64: string): string {
+  return decodeURIComponent(escape(atob(base64)))
+}

Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,13 @@ export function debounce(fn: Function, n = 100) {`
`7`	`7`	`}, n)`
`8`	`8`	`}`
`9`	`9`	`}`
	`10`	`+`
	`11`	`+// prefer old unicode hacks for backward compatibility`
	`12`	`+// https://base64.guru/developers/javascript/examples/unicode-strings`
	`13`	`+export function utoa(data: string): string {`
	`14`	`+ return btoa(unescape(encodeURIComponent(data)))`
	`15`	`+}`
	`16`	`+`
	`17`	`+export function atou(base64: string): string {`
	`18`	`+ return decodeURIComponent(escape(atob(base64)))`
	`19`	`+}`