From 828fa1b51f54f9956f63c1a65e861aac6b300a4c Mon Sep 17 00:00:00 2001
From: Herrington Darkholme
 <2883231+HerringtonDarkholme@users.noreply.github.com>
Date: Sat, 24 Apr 2021 14:30:19 +0800
Subject: [PATCH] feat(playground): support unicode in sfc playground

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.
---
 packages/sfc-playground/src/store.ts |  5 +++--
 packages/sfc-playground/src/utils.ts | 10 ++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/sfc-playground/src/store.ts b/packages/sfc-playground/src/store.ts
index 22080ea107e..b68a7042f46 100644
--- 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 c5f1de10045..bfc6d708f96 100644
--- 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)))
+}