2019-09-17 19:24:39 +08:00
|
|
|
const marked = require('marked')
|
|
|
|
const fs = require('fs')
|
|
|
|
const path = require('path')
|
2020-11-12 13:30:04 +08:00
|
|
|
const createRenderer = require('./md-renderer')
|
2019-12-22 23:19:08 +08:00
|
|
|
const mdRenderer = createRenderer()
|
2019-09-17 19:24:39 +08:00
|
|
|
|
2020-12-16 02:16:59 +08:00
|
|
|
const demoBlock = fs
|
|
|
|
.readFileSync(path.resolve(__dirname, 'ComponentDemoTemplate.vue'))
|
|
|
|
.toString()
|
2019-09-17 19:24:39 +08:00
|
|
|
|
|
|
|
function getPartsOfDemo (tokens) {
|
|
|
|
let template = null
|
|
|
|
let script = null
|
|
|
|
let style = null
|
|
|
|
let title = null
|
2019-10-30 16:22:49 +08:00
|
|
|
const contentTokens = []
|
|
|
|
contentTokens.links = tokens.links
|
2019-09-17 19:24:39 +08:00
|
|
|
for (const token of tokens) {
|
|
|
|
if (token.type === 'heading' && token.depth === 1) {
|
|
|
|
title = token.text
|
2020-12-16 02:16:59 +08:00
|
|
|
} else if (
|
|
|
|
token.type === 'code' &&
|
|
|
|
(token.lang === 'template' || token.lang === 'html')
|
|
|
|
) {
|
2019-09-17 19:24:39 +08:00
|
|
|
template = token.text
|
2020-12-16 02:16:59 +08:00
|
|
|
} else if (
|
|
|
|
token.type === 'code' &&
|
|
|
|
(token.lang === 'script' || token.lang === 'js')
|
|
|
|
) {
|
2019-09-17 19:24:39 +08:00
|
|
|
script = token.text
|
2020-12-16 02:16:59 +08:00
|
|
|
} else if (
|
|
|
|
token.type === 'code' &&
|
|
|
|
(token.lang === 'style' || token.lang === 'css')
|
|
|
|
) {
|
2019-09-17 19:24:39 +08:00
|
|
|
style = token.text
|
2019-10-30 16:22:49 +08:00
|
|
|
} else {
|
|
|
|
contentTokens.push(token)
|
2019-09-17 19:24:39 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
return {
|
2019-09-20 00:23:21 +08:00
|
|
|
template: template,
|
|
|
|
script: script,
|
|
|
|
style: style,
|
|
|
|
title: title,
|
2019-12-22 15:48:53 +08:00
|
|
|
content: marked.parser(contentTokens, {
|
|
|
|
renderer: mdRenderer
|
|
|
|
})
|
2019-09-17 19:24:39 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function mergeParts (parts) {
|
|
|
|
const mergedParts = {
|
|
|
|
...parts
|
|
|
|
}
|
|
|
|
mergedParts.title = parts.title
|
2019-12-22 15:48:53 +08:00
|
|
|
mergedParts.content = parts.content
|
2019-09-17 19:24:39 +08:00
|
|
|
mergedParts.code = ''
|
|
|
|
if (parts.template) {
|
2021-06-02 17:51:13 +08:00
|
|
|
mergedParts.code += `<template>\n${parts.template
|
|
|
|
.split('\n')
|
|
|
|
.map((line) => (line.length ? ' ' + line : line))
|
|
|
|
.join('\n')}\n</template>`
|
2019-09-17 19:24:39 +08:00
|
|
|
}
|
|
|
|
if (parts.script) {
|
|
|
|
if (parts.template) mergedParts.code += '\n\n'
|
|
|
|
mergedParts.code += `<script>
|
|
|
|
${parts.script}
|
|
|
|
</script>`
|
|
|
|
}
|
|
|
|
if (parts.style) {
|
2019-09-20 00:33:13 +08:00
|
|
|
if (parts.template || parts.script) mergedParts.code += '\n\n'
|
2019-09-17 19:24:39 +08:00
|
|
|
mergedParts.code += `<style>
|
|
|
|
${parts.style}
|
|
|
|
</style>`
|
|
|
|
}
|
2021-06-02 17:51:13 +08:00
|
|
|
mergedParts.code = encodeURIComponent(mergedParts.code)
|
2019-09-17 19:24:39 +08:00
|
|
|
return mergedParts
|
|
|
|
}
|
|
|
|
|
2021-05-26 16:03:17 +08:00
|
|
|
const cssRuleRegex = /([^{}]*)(\{[^}]*\})/g
|
2020-12-16 02:16:59 +08:00
|
|
|
|
|
|
|
// simulate scss style
|
|
|
|
// to remove dep of sass
|
|
|
|
// xxx {
|
|
|
|
// mystyle
|
|
|
|
// }
|
|
|
|
function genStyle (sourceStyle) {
|
2021-05-26 16:03:17 +08:00
|
|
|
let match
|
|
|
|
let matched = false
|
|
|
|
const rules = []
|
2020-12-16 02:16:59 +08:00
|
|
|
|
2021-05-26 16:03:17 +08:00
|
|
|
while ((match = cssRuleRegex.exec(sourceStyle)) !== null) {
|
|
|
|
matched = true
|
|
|
|
const selector = match[1]
|
|
|
|
const body = match[2]
|
|
|
|
rules.push(
|
|
|
|
selector
|
|
|
|
.split(',')
|
|
|
|
.map((part) => `.demo-card__view ${part}, .naive-ui-doc ${part}`)
|
|
|
|
.join(',') + body
|
|
|
|
)
|
|
|
|
}
|
|
|
|
if (!matched) return null
|
|
|
|
return '<style scoped>\n' + rules.join('\n') + '</style>'
|
2020-12-16 02:16:59 +08:00
|
|
|
}
|
|
|
|
|
2020-09-04 01:06:39 +08:00
|
|
|
function genVueComponent (parts, fileName, relativeUrl, noRunning = false) {
|
2020-09-03 23:02:40 +08:00
|
|
|
const demoFileNameReg = /<!--DEMO_FILE_NAME-->/g
|
2020-09-04 01:06:39 +08:00
|
|
|
const relativeUrlReg = /<!--URL-->/g
|
2020-09-03 23:02:40 +08:00
|
|
|
const titleReg = /<!--TITLE_SLOT-->/g
|
2019-09-17 19:24:39 +08:00
|
|
|
const contentReg = /<!--CONTENT_SLOT-->/
|
|
|
|
const codeReg = /<!--CODE_SLOT-->/
|
2020-12-16 02:20:11 +08:00
|
|
|
const scriptReg = /<!--SCRIPT_SLOT-->/
|
2020-12-16 02:16:59 +08:00
|
|
|
const styleReg = /<!--STYLE_SLOT-->/
|
2019-09-17 19:24:39 +08:00
|
|
|
const demoReg = /<!--DEMO_SLOT-->/
|
|
|
|
let src = demoBlock
|
2020-09-03 23:40:38 +08:00
|
|
|
src = src.replace(demoFileNameReg, fileName)
|
2020-09-04 01:06:39 +08:00
|
|
|
src = src.replace(relativeUrlReg, relativeUrl)
|
2019-09-20 00:23:21 +08:00
|
|
|
if (parts.content) {
|
|
|
|
src = src.replace(contentReg, parts.content)
|
|
|
|
}
|
|
|
|
if (parts.title) {
|
|
|
|
src = src.replace(titleReg, parts.title)
|
|
|
|
}
|
|
|
|
if (parts.code) {
|
|
|
|
src = src.replace(codeReg, parts.code)
|
|
|
|
}
|
2019-12-13 23:55:19 +08:00
|
|
|
if (parts.script && !noRunning) {
|
2020-12-16 02:20:11 +08:00
|
|
|
src = src.replace(scriptReg, '<script>\n' + parts.script + '\n</script>')
|
2019-09-20 00:23:21 +08:00
|
|
|
}
|
|
|
|
if (parts.style) {
|
2020-12-16 02:16:59 +08:00
|
|
|
const style = genStyle(parts.style)
|
|
|
|
if (style !== null) {
|
|
|
|
src = src.replace(styleReg, style)
|
|
|
|
}
|
2019-09-20 00:23:21 +08:00
|
|
|
}
|
|
|
|
if (parts.template) {
|
|
|
|
src = src.replace(demoReg, parts.template)
|
|
|
|
}
|
2019-09-18 09:41:40 +08:00
|
|
|
return src.trim()
|
2019-09-17 19:24:39 +08:00
|
|
|
}
|
|
|
|
|
2020-09-03 23:02:40 +08:00
|
|
|
function getFileName (resourcePath) {
|
|
|
|
const dirs = resourcePath.split('/')
|
|
|
|
const fileNameWithExtension = dirs[dirs.length - 1]
|
2020-09-03 23:40:38 +08:00
|
|
|
return [fileNameWithExtension.split('.')[0], fileNameWithExtension]
|
2020-09-03 23:02:40 +08:00
|
|
|
}
|
|
|
|
|
2020-12-16 02:16:59 +08:00
|
|
|
function convertMd2Demo (text, { resourcePath, relativeUrl }) {
|
2019-12-13 23:55:19 +08:00
|
|
|
const noRunning = /<!--no-running-->/.test(text)
|
2019-09-17 19:24:39 +08:00
|
|
|
const tokens = marked.lexer(text)
|
|
|
|
const parts = getPartsOfDemo(tokens)
|
|
|
|
const mergedParts = mergeParts(parts)
|
2020-09-04 01:06:39 +08:00
|
|
|
const [fileName] = getFileName(resourcePath)
|
2020-12-16 02:16:59 +08:00
|
|
|
const vueComponent = genVueComponent(
|
|
|
|
mergedParts,
|
|
|
|
fileName,
|
|
|
|
relativeUrl,
|
|
|
|
noRunning
|
|
|
|
)
|
2019-09-17 19:24:39 +08:00
|
|
|
return vueComponent
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = convertMd2Demo
|