!24 fix(playground): usePlayground 插件适配 playground 0.04

Merge pull request !24 from Sight/develop

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)
 }
 

example/src/plugin/usePlayground.ts

@@ -5,57 +5,54 @@ 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语法糖 
+ * 将代码编码为 URI hash, 生成 playground 链接
- * 方案二:和文档代码保持一致,仅在 setup() 中添加 setupLayuiVue(),全局引入 layui
+ * @param source 源码
- * 方案三:<script> 和 <script setup> 标签同时存在,文档中的代码都在<script>中, <script setup>仅用来设置 layui
+ * @param convertSetupSugar 转换 setup，仅字符串替换，没有做任何语法分析
- * @param source 
+ * @returns 处理后的代码，URI hsah， playground 链接
- * @returns 
+  }
  */
-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
+  let code: string = decodeCode
-  if (result) {
+  if (convertSetupSugar) {
-    code = decodeCode.replace(
+    if (scriptResult) {
-      scriptRe,
+      code = decodeCode.replace(
-      `<script lang="ts" setup>
+        scriptRe,
-${SETUP_CODE}
+        `<script lang="ts" setup>$1
-$1
 </script>`
-    )
+      )
-  } else {
+    } else {
-    code = `${decodeCode}
+      code = `${decodeCode}
 <script lang="ts" setup>
-${SETUP_CODE}
+
 </script>
 `
-  }
+    }
 
-  // 去除 export default,保留其中的内容
+    // 去除 export default,保留其中的内容
-  const exportDefaultResult = code.match(exportDefaultRe)
+    const exportDefaultResult = code.match(exportDefaultRe)
-  if(exportDefaultResult){
+    if (exportDefaultResult) {
-    code = code.replace(exportDefaultRe,trim(trimBr(exportDefaultResult[1]+`</script>`)))
+      code = code.replace(exportDefaultRe, trimBr(exportDefaultResult[1] + `</script>`).trim())
-     // console.log("export",code);
+      // console.log("export",code);
+    }
+    // 去除 setup 函数,保留其中的内容
+    const setupResult = code.match(setupRe)
+    if (setupResult) {
+      code = code.replace(setupRe, trimBr(setupResult[1]))
+      // console.log("setup",code);
+    }
   }
-  // 去除 setup 函数,保留其中的内容
+  // 替换 layer 引入语句
-  const setupResult = code.match(setupRe)
+  // playground 中使用最新版 layer 请从 @layui/layer-vue 引入
-  if(setupResult){
+  if (code.match(layerRe)) {
-    code = code.replace(setupRe,trimBr(setupResult[1]))
+    code = code.replace(layerRe, `import { layer } from "@layui/layui-vue"`)
-     // console.log("setup",code);
+    // console.log("layer",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);
   }
   const originCode = {
     [MAIN_FILE_NAME]: code,
@@ -63,7 +60,9 @@ ${SETUP_CODE}
 
   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}`
   return {
+    code,
     encoded,
     link,
   }
@@ -75,11 +74,6 @@ function utoa(data: string): string {
 }
 
 // 去除字符串两端的空白行
-function trimBr(str: string): string{
+function trimBr(str: string): string {
-  return str.replace(/(^[\r\n]*)|([\r\n]*$)/,"")
+  return str.replace(/(^[\r\n]*)|([\r\n]*$)/, "")
 }
-
-// 去除字符串两端的空格 
-function trim(str: string): string { 
-return str.replace(/(^\s*)|(\s*$)/g, ""); 
-}