feat: add preview to markdow

component.spec.js

@@ -3,8 +3,8 @@ const { expect } = require('chai')
 
 const { parseVue, parseReact } = require('./component')
 
-const VUE_PATH = path.join(__dirname, 'fixtures/component.vue')
-const REACT_PATH = path.join(__dirname, 'fixtures/component.jsx')
+const VUE_PATH = path.join(__dirname, 'fixtures/components/component.vue')
+const REACT_PATH = path.join(__dirname, 'fixtures/components/component.jsx')
 
 describe('@component', function () {
   describe('.parseVue', function () {
@@ -16,15 +16,15 @@ describe('@component', function () {
     it('returns displayName', function () {
       expect(this.output.displayName).to.equal('grid')
     })
-    
+
     it('returns prop types', function () {
       expect(this.output.props).to.have.lengthOf(5)
       expect(this.output.props[0]).to.deep.equal({
         description: 'object/array defaults should be returned from a factory function',
         name: 'msg',
         required: true,
         type: 'string|number',
-        defaultValue: 'function()'
+        defaultValue: 'function()',
       })
       expect(this.output.props[1]).to.have.property('defaultValue', '\'something\'')
     })
@@ -55,7 +55,7 @@ describe('@component', function () {
         name: 'text',
         required: false,
         type: 'string',
-        defaultValue: '\'Hello World\''
+        defaultValue: '\'Hello World\'',
       })
     })
   })

load.js

@@ -10,11 +10,7 @@ exports.defineTags = (dictionary) => {
     onTagged: (doclet, tag) => {
       const text = load(tag, doclet.meta.path)
 
-      if (doclet.classdesc) {
-        doclet.classdesc = [doclet.classdesc, text].join('\n')
-      } else if (doclet.description) {
-        doclet.description = [doclet.description, text].join('\n')
-      }
+      doclet.loadedDescription = text
     },
   })
 }

src/load/fill-component-preview.spec.ts

@@ -0,0 +1,38 @@
+import { expect } from 'chai'
+import { fillComponentPreview } from './fill-component-preview'
+
+
+const text = [
+  'My Patterns.',
+  '',
+  'Explore results with the Tools below. Replace & List output custom results. Details lists capture groups. Explain describes your expression in plain English.',
+  '',
+  '```reactComponent',
+  '',
+  'const a = 1;',
+  'return (',
+  '  <div>ala</div>',
+  ')',
+  '',
+  '```',
+  'asdasdas',
+  'da',
+  'sda',
+  '```reactComponent',
+  '',
+  'const a = 2;',
+  'return (',
+  '  <div>ala</div>',
+  ')',
+  '',
+  '```',
+  'sdasd',
+  'asd',
+].join('\n')
+
+
+describe.only('.fillComponentPreview', () => {
+  it('chanes ```reactComponent ``` to react code', () => {
+    expect(fillComponentPreview(text)).to.contain('sth')
+  })
+})

src/load/fill-component-preview.ts

@@ -0,0 +1,32 @@
+const regex = /^```reactComponent[\r\n]+(.*?)[\r\n]+```$/gms
+
+export const fillComponentPreview = (text: string, mdParser): string => {
+  let number = 0
+
+  const components = {}
+
+  const result = text.replace(regex, (match, group) => {
+    const uniqId = ['BetterDocsPreviewComponent', number += 1].join('')
+
+    components[uniqId] = `
+      <div id="${uniqId}"></div>
+
+      <script>
+        ReactDOM.render(ReactWrapper({
+          example: ${JSON.stringify(group)},
+          uniqId: ${JSON.stringify(uniqId)},
+        }), document.getElementById('${uniqId}'));
+      </script>
+    `
+
+    return uniqId
+  })
+
+  let markdown = mdParser(result)
+
+  Object.keys(components).forEach((componentId) => {
+    markdown = markdown.replace(componentId, components[componentId])
+  })
+
+  return markdown
+}

src/load/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import path from 'path'
 import fs from 'fs'
+import { fillComponentPreview } from './fill-component-preview'
 
 import { JSDocTag } from '../jsdoc.type'
 
@@ -19,5 +20,5 @@ export const load = (loadTag: JSDocTag, docletFilePath: string): string => {
 
   const body = fs.readFileSync(filePath, 'utf-8')
 
-  return mdParser(body)
+  return fillComponentPreview(body, mdParser)
 }

tmpl/container.tmpl

@@ -50,6 +50,10 @@
 
 <article>
     <div class="container-overview">
+    <?js if (doc.loadedDescription) { ?>
+        <div class="class-description"><?js= doc.loadedDescription ?></div>
+    <?js } ?>
+
     <?js if (doc.kind === 'module' && doc.modules) { ?>
         <?js if (doc.description) { ?>
             <div class="description"><?js= doc.description ?></div>