element-plus/website/md-loader/util.js

87 lines
2.3 KiB
JavaScript
Raw Normal View History

/* eslint-disable @typescript-eslint/no-var-requires */
const { compileTemplate, TemplateCompiler } = require('@vue/compiler-sfc')
function stripScript(content) {
const result = content.match(/<(script)>([\s\S]+)<\/\1>/)
return result && result[2] ? result[2].trim() : ''
}
function stripStyle(content) {
const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/)
return result && result[2] ? result[2].trim() : ''
}
// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
function stripTemplate(content) {
content = content.trim()
if (!content) {
return content
}
return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim()
}
function pad(source) {
return source
.split(/\r?\n/)
.map(line => ` ${line}`)
.join('\n')
}
2020-08-13 22:17:53 +08:00
const templateReplaceRegex = /<template>([\s\S]+)<\/template>/g
function genInlineComponentText(template, script) {
// https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
2020-08-13 22:17:53 +08:00
let source = template
if (templateReplaceRegex.test(source)) {
source = source.replace(templateReplaceRegex, '$1')
}
const finalOptions = {
2020-08-13 22:17:53 +08:00
source: `<div>${source}</div>`,
filename: 'inline-component', // TODO这里有待调整
compiler: TemplateCompiler,
compilerOptions: {
mode: 'function',
},
}
const compiled = compileTemplate(finalOptions)
// tips
if (compiled.tips && compiled.tips.length) {
compiled.tips.forEach(tip => {
console.warn(tip)
})
}
// errors
if (compiled.errors && compiled.errors.length) {
console.error(
`\n Error compiling template:\n${pad(compiled.source)}\n` +
compiled.errors.map(e => ` - ${e}`).join('\n') +
'\n',
)
}
let demoComponentContent = `
${(compiled.code).replace('return function render','function render')}
`
// todo: 这里采用了硬编码有待改进
script = script.trim()
if (script) {
script = script.replace(/export\s+default/, 'const democomponentExport =')
} else {
script = 'const democomponentExport = {}'
}
demoComponentContent = `(function() {
${demoComponentContent}
${script}
return {
render,
...democomponentExport
}
})()`
return demoComponentContent
}
module.exports = {
stripScript,
stripStyle,
stripTemplate,
genInlineComponentText,
}