85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
const scriptRe = /<script[^>]*>([\s\S]*)<\/script>/;
|
|
const exportDefaultRe = /export\s*default\s*\{([\s\S]*)\}\;?\s*<\/script>/;
|
|
const setupRe = /setup\s*\(\)\s*\{([\s\S]*)return\s*\{([\s\S]*)\}\;?\s*\}\;?/;
|
|
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
|
|
*/
|
|
export const usePlayGround = (source: string) => {
|
|
const decodeCode = source;
|
|
const result = decodeCode.match(scriptRe)
|
|
|
|
// 替换 script 标签
|
|
// $1 正则第一个括号匹配的内容
|
|
let code: string
|
|
if (result) {
|
|
code = decodeCode.replace(
|
|
scriptRe,
|
|
`<script lang="ts" setup>
|
|
${SETUP_CODE}
|
|
$1
|
|
</script>`
|
|
)
|
|
} 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);
|
|
}
|
|
// 去除 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);
|
|
}
|
|
const originCode = {
|
|
[MAIN_FILE_NAME]: code,
|
|
}
|
|
|
|
const encoded = utoa(JSON.stringify(originCode))
|
|
const link = `https://layui-vue.gitee.io/layui-vue-playground/#${encoded}`
|
|
return {
|
|
encoded,
|
|
link,
|
|
}
|
|
}
|
|
|
|
//编码
|
|
function utoa(data: string): string {
|
|
return btoa(unescape(encodeURIComponent(data)));
|
|
}
|
|
|
|
// 去除字符串两端的空白行
|
|
function trimBr(str: string): string{
|
|
return str.replace(/(^[\r\n]*)|([\r\n]*$)/,"")
|
|
}
|
|
|
|
// 去除字符串两端的空格
|
|
function trim(str: string): string {
|
|
return str.replace(/(^\s*)|(\s*$)/g, "");
|
|
}
|