From b024fc2e3e49c3f5d55729e24e09a7e44d2bc470 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Wed, 9 Feb 2022 11:51:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(playground):=20=E9=80=82=E9=85=8D=20pla?=
 =?UTF-8?q?yground=200.04=EF=BC=9B=E5=8F=AF=E8=AE=BE=E7=BD=AE=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E8=BD=AC=E6=8D=A2=E4=B8=BA=20setup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LayCode.vue  |  4 +-
 example/src/plugin/usePlayground.ts | 88 ++++++++++++++---------------
 2 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/example/src/components/LayCode.vue b/example/src/components/LayCode.vue
index 9b2c7509..0d8aac2d 100644
--- a/example/src/components/LayCode.vue
+++ b/example/src/components/LayCode.vue
@@ -38,9 +38,9 @@ const toggle = function () {
 const onPlayground = function(){
   const foundCodes = meta.value.getElementsByClassName('language-html')
   const foundCode = foundCodes[0];
-  const text = foundCode.textContent || "";
+  const SourceCode = foundCode.textContent || "";
   
-  const { link } = usePlayGround(text)
+  const { link } = usePlayGround(SourceCode, true)
   window.open(link)
 }
 
diff --git a/example/src/plugin/usePlayground.ts b/example/src/plugin/usePlayground.ts
index c69669db..9eee73f8 100644
--- a/example/src/plugin/usePlayground.ts
+++ b/example/src/plugin/usePlayground.ts
@@ -5,65 +5,64 @@ const layerRe = /import\s?\{\s?layer\s?\}\s?from\s?[\"|\']\@layui\/layer-vue[\"|
 
 // danger: 以下字符串拼接代码不可改动缩进或换行,否则会影响 URI hash 解码后代码的排版
 const MAIN_FILE_NAME = 'App.vue';
-// 用于全局引入 layui
-const SETUP_CODE = `import { setupLayuiVue } from './layui-vue.js'
-setupLayuiVue()`;
 
 /**
- * √方案一:转换为setup语法糖 
- * 方案二:和文档代码保持一致,仅在 setup() 中添加 setupLayuiVue(),全局引入 layui
- * 方案三:<script> 和 <script setup> 标签同时存在,文档中的代码都在<script>中, <script setup>仅用来设置 layui
- * @param source 
- * @returns 
+ * 将代码编码为 URI hash, 生成 playground 链接
+ * @param source 源码
+ * @param convertSetupSugar 转换 setup，仅字符串替换，没有做任何语法分析
+ * @returns 处理后的代码，URI hsah， playground 链接
+  }
  */
-export const usePlayGround = (source: string) => {
+export const usePlayGround = (source: string, convertSetupSugar: boolean) => {
   const decodeCode = source;
-  const result = decodeCode.match(scriptRe)
-  
+  const scriptResult = decodeCode.match(scriptRe)
+
   // 替换 script 标签
   // $1 正则第一个括号匹配的内容
-  let code: string
-  if (result) {
-    code = decodeCode.replace(
-      scriptRe,
-      `<script lang="ts" setup>
-${SETUP_CODE}
-$1
+  let code: string = decodeCode
+  if (convertSetupSugar) {
+    if (scriptResult) {
+      code = decodeCode.replace(
+        scriptRe,
+        `<script lang="ts" setup>$1
 </script>`
-    )
-  } else {
-    code = `${decodeCode}
+      )
+    } else {
+      code = `${decodeCode}
 <script lang="ts" setup>
-${SETUP_CODE}
+
 </script>
 `
-  }
+    }
 
-  // 去除 export default,保留其中的内容
-  const exportDefaultResult = code.match(exportDefaultRe)
-  if(exportDefaultResult){
-    code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+`</script>`)))
-     // console.log("export",code);
+    // 去除 export default,保留其中的内容
+    const exportDefaultResult = code.match(exportDefaultRe)
+    if (exportDefaultResult) {
+      code = code.replace(exportDefaultRe, trimBr(exportDefaultResult[1] + `</script>`).trim())
+      // console.log("export",code);
+    }
+    // 去除 setup 函数,保留其中的内容
+    const setupResult = code.match(setupRe)
+    if (setupResult) {
+      code = code.replace(setupRe, trimBr(setupResult[1]))
+      // console.log("setup",code);
+    }
   }
-  // 去除 setup 函数,保留其中的内容
-  const setupResult = code.match(setupRe)
-  if(setupResult){
-    code = code.replace(setupRe,trimBr(setupResult[1]))
-     // console.log("setup",code);
-  }
-  // TODO 这是临时方案,需要在 playground 中支持 @layui/layer-vue
-  // 替换 layer 引入语句  
-  if(code.match(layerRe)){
-    code = code.replace(layerRe,`import { layer } from "@layui/layui-vue"`)
-     // console.log("layer",code);
+  // 替换 layer 引入语句
+  // playground 中使用最新版 layer 请从 @layui/layer-vue 引入
+  if (code.match(layerRe)) {
+    code = code.replace(layerRe, `import { layer } from "@layui/layui-vue"`)
+    // console.log("layer",code);
   }
   const originCode = {
     [MAIN_FILE_NAME]: code,
   }
 
   const encoded = utoa(JSON.stringify(originCode))
-  const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
+  //const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
+  const link = `http://localhost:3001/layui-vue-playground/#${encoded}`
   return {
+    code,
     encoded,
     link,
   }
@@ -75,11 +74,6 @@ function utoa(data: string): string {
 }
 
 // 去除字符串两端的空白行
-function trimBr(str: string): string{
-  return str.replace(/(^[\r\n]*)|([\r\n]*$)/,"")
+function trimBr(str: string): string {
+  return str.replace(/(^[\r\n]*)|([\r\n]*$)/, "")
 }
-
-// 去除字符串两端的空格 
-function trim(str: string): string { 
-return str.replace(/(^\s*)|(\s*$)/g, ""); 
-} 
\ No newline at end of file

From 02be0aa06f4307062e3f1ad84cc735b73ce503db Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Wed, 9 Feb 2022 12:03:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(playground):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E7=9A=84=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/plugin/usePlayground.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/example/src/plugin/usePlayground.ts b/example/src/plugin/usePlayground.ts
index 9eee73f8..8607789a 100644
--- a/example/src/plugin/usePlayground.ts
+++ b/example/src/plugin/usePlayground.ts
@@ -59,8 +59,8 @@ export const usePlayGround = (source: string, convertSetupSugar: boolean) => {
   }
 
   const encoded = utoa(JSON.stringify(originCode))
-  //const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
-  const link = `http://localhost:3001/layui-vue-playground/#${encoded}`
+  const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
+  //const link = `http://localhost:3001/layui-vue-playground/#${encoded}`
   return {
     code,
     encoded,