feat: support custom demo component, use demo、description、source slots

Author: calebman

src/DemoBlock.vue

@@ -6,7 +6,7 @@
     @mouseleave="hovering = false"
   >
     <div class="demo-content">
-      <slot></slot>
+      <slot name="demo"></slot>
     </div>
     <div class="meta" ref="meta">
       <div class="description" v-if="$slots.description">

src/common/containers.js

@@ -1,22 +1,30 @@
 const mdContainer = require('markdown-it-container');
 
-module.exports = md => {
-  md.use(mdContainer, 'demo', {
-    validate(params) {
-      return params.trim().match(/^demo\s*(.*)$/);
-    },
-    render(tokens, idx) {
-      const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-      if (tokens[idx].nesting === 1) {
-        const description = m && m.length > 1 ? m[1] : '';
-        const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
-        return `<demo-block>
-          <!--pre-render-demo:${content}:pre-render-demo-->
-          ${description ? `<div slot="description">${md.render(description).html}</div>` : ''}
-          <template slot="source">
-        `;
+module.exports = options => {
+  const {
+    component = 'demo-block'
+  } = options;
+  const componentName = component
+    .replace(/^\S/, s => s.toLowerCase())
+    .replace(/([A-Z])/g, "-$1").toLowerCase();
+  return md => {
+    md.use(mdContainer, 'demo', {
+      validate(params) {
+        return params.trim().match(/^demo\s*(.*)$/);
+      },
+      render(tokens, idx) {
+        const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+        if (tokens[idx].nesting === 1) {
+          const description = m && m.length > 1 ? m[1] : '';
+          const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
+          return `<${componentName}>
+            <template slot="demo"><!--pre-render-demo:${content}:pre-render-demo--></template>
+            ${description ? `<div slot="description">${md.render(description).html}</div>` : ''}
+            <template slot="source">
+          `;
+        }
+        return `</template></${componentName}>`;
       }
-      return '</template></demo-block>';
-    }
-  });
-};
+    });
+  };
+}

src/index.js

@@ -9,7 +9,7 @@ module.exports = (options = {}, ctx) => {
     enhanceAppFiles: path.resolve(__dirname, './enhanceAppFile.js'),
     chainMarkdown(config) {
       config.plugin('containers')
-        .use(demoBlockContainers)
+        .use(demoBlockContainers(options))
         .end();
     },
     extendMarkdown: md => {