demo.ts 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import path from 'path'
  2. import fs from 'fs'
  3. import { docRoot } from '../../../internal/build-utils/src'
  4. import type { MarkdownRenderer } from 'vitepress'
  5. interface ContainerOpts {
  6. marker?: string | undefined
  7. validate?(params: string): boolean
  8. render?: MarkdownRenderer['renderer']['rules']['container']
  9. }
  10. function createDemoContainer(md: MarkdownRenderer): ContainerOpts {
  11. return {
  12. validate(params) {
  13. return !!params.trim().match(/^demo\s*(.*)$/)
  14. },
  15. render(tokens, idx) {
  16. const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
  17. if (tokens[idx].nesting === 1 /* means the tag is opening */) {
  18. const title = tokens[idx - 2]?.children?.[0].content
  19. const description = m && m.length > 1 ? m[1] : ''
  20. const sourceFileToken = tokens[idx + 2]
  21. let source = ''
  22. let sourceSetup = ''
  23. const sourceFile = sourceFileToken.children?.[0].content ?? ''
  24. if (sourceFileToken.type === 'inline') {
  25. source = fs.readFileSync(
  26. path.resolve(docRoot, 'examples', `${sourceFile}.vue`),
  27. 'utf-8'
  28. )
  29. sourceSetup = fs.readFileSync(
  30. path.resolve(docRoot, 'examples-setup', `${sourceFile}.vue`),
  31. 'utf-8'
  32. )
  33. }
  34. if (!source || !sourceSetup) throw new Error(`Incorrect source file: ${sourceFile}`)
  35. return `<Demo source="${encodeURIComponent(
  36. md.render(`\`\`\` ts\n${source}\`\`\``)
  37. )}" source-setup="${encodeURIComponent(
  38. md.render(`\`\`\` vue\n${sourceSetup}\`\`\``)
  39. )}" path="${sourceFile}" raw-source="${encodeURIComponent(
  40. source
  41. )}" raw-source-setup="${encodeURIComponent(
  42. sourceSetup
  43. )}" description="${encodeURIComponent(md.render(description))}" title="${title}">
  44. <template #source><ax-${sourceFile.replaceAll('/', '-')}/></template><template #source-setup><ax-${sourceFile.replaceAll('/', '-')}-setup/></template>`
  45. } else {
  46. return '</Demo>\n'
  47. }
  48. },
  49. }
  50. }
  51. export default createDemoContainer