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

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
index 22080ea107e565aa331ce92252b8d9079f2a165a..b68a7042f4615b9815e48f6890a60dd277a2cb68 100644 (file)
--- 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
index c5f1de10045e0223c765d9c60e617ce5dad051c4..bfc6d708f960e076bb57b151bc23f039c09433d8 100644 (file)
--- 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)))
+}