element-plus/docs/.vitepress/plugins/markdown-transform.ts

122 lines
3.4 KiB
TypeScript

import fs from 'fs'
import path from 'path'
import glob from 'fast-glob'
import { docRoot, docsDirName, projRoot } from '@element-plus/build-utils'
import { REPO_BRANCH, REPO_PATH } from '@element-plus/build-constants'
import { getLang, languages } from '../utils/lang'
import footerLocale from '../i18n/component/footer.json'
import type { Plugin } from 'vite'
type Append = Record<'headers' | 'footers' | 'scriptSetups', string[]>
export function MarkdownTransform(): Plugin {
return {
name: 'element-plus-md-transform',
enforce: 'pre',
async transform(code, id) {
if (!id.endsWith('.md')) return
const componentId = path.basename(id, '.md')
const append: Append = {
headers: [],
footers: [],
scriptSetups: [
`const demos = import.meta.globEager('../../examples/${componentId}/*.vue')`,
],
}
code = transformVpScriptSetup(code, append)
const pattern = `{${[...languages, languages[0]].join(',')}}/component`
const compPaths = await glob(pattern, {
cwd: docRoot,
absolute: true,
onlyDirectories: true,
})
if (compPaths.some((compPath) => id.startsWith(compPath))) {
code = transformComponentMarkdown(id, componentId, code, append)
}
return combineMarkdown(
code,
[combineScriptSetup(append.scriptSetups), ...append.headers],
append.footers
)
},
}
}
const combineScriptSetup = (codes: string[]) =>
`\n<script setup>
${codes.join('\n')}
</script>
`
const combineMarkdown = (
code: string,
headers: string[],
footers: string[]
) => {
const frontmatterEnds = code.indexOf('---\n\n') + 4
const firstSubheader = code.search(/\n## \w/)
const sliceIndex = firstSubheader < 0 ? frontmatterEnds : firstSubheader
if (headers.length > 0)
code =
code.slice(0, sliceIndex) + headers.join('\n') + code.slice(sliceIndex)
code += footers.join('\n')
return `${code}\n`
}
const vpScriptSetupRE = /<vp-script\s(.*\s)?setup(\s.*)?>([\s\S]*)<\/vp-script>/
const transformVpScriptSetup = (code: string, append: Append) => {
const matches = code.match(vpScriptSetupRE)
if (matches) code = code.replace(matches[0], '')
const scriptSetup = matches?.[3] ?? ''
if (scriptSetup) append.scriptSetups.push(scriptSetup)
return code
}
const GITHUB_BLOB_URL = `https://github.com/${REPO_PATH}/blob/${REPO_BRANCH}`
const GITHUB_TREE_URL = `https://github.com/${REPO_PATH}/tree/${REPO_BRANCH}`
const transformComponentMarkdown = (
id: string,
componentId: string,
code: string,
append: Append
) => {
const lang = getLang(id)
const docUrl = `${GITHUB_BLOB_URL}/${docsDirName}/en-US/component/${componentId}.md`
const componentUrl = `${GITHUB_TREE_URL}/packages/components/${componentId}`
const componentPath = path.resolve(
projRoot,
`packages/components/${componentId}`
)
const isComponent = fs.existsSync(componentPath)
const links = [[footerLocale[lang].docs, docUrl]]
if (isComponent) links.unshift([footerLocale[lang].component, componentUrl])
const linksText = links
.filter((i) => i)
.map(([text, link]) => `[${text}](${link})`)
.join(' • ')
const sourceSection = `## ${footerLocale[lang].source}
${linksText}
`
const contributorsSection = `
## ${footerLocale[lang].contributors}
<Contributors id="${componentId}" />
`
append.footers.push(sourceSection, isComponent ? contributorsSection : '')
return code
}