From a913f5bd36f3b4118048c269a808d9c4e984fb8e Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Fri, 12 Mar 2021 10:40:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(vant-markdown-loader):=20=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=20README,=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E5=A3=B0=E6=98=8E=E7=9A=84=E6=96=B9=E5=BC=8F=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=20demo=20=E5=B9=B6=E7=9B=B4=E6=8E=A5=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vant-markdown-loader/src/extract-demo.js  | 24 +++++++++++
 packages/vant-markdown-loader/src/index.js    | 42 +++++++++++++++----
 .../src/side-effect-tags.js                   | 14 +++++++
 3 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 packages/vant-markdown-loader/src/extract-demo.js
 create mode 100644 packages/vant-markdown-loader/src/side-effect-tags.js

diff --git a/packages/vant-markdown-loader/src/extract-demo.js b/packages/vant-markdown-loader/src/extract-demo.js
new file mode 100644
index 000000000..58eaf4ef1
--- /dev/null
+++ b/packages/vant-markdown-loader/src/extract-demo.js
@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = function extraDemo(content) {
+  const demoLinks = [];
+
+  /*
+   * 提取 README 中的 demo 文件路径，例如下面的内容，就会提取为 ['./demo-link/index.vue']
+   * ```demo
+   * ./demo-link/index.vue
+   * ```
+   */
+  content = content.replace(
+    /<pre><code class="language-demo">([\s\S]*?)<\/code><\/pre>/g,
+    function (_, link) {
+      link = link.trim(); // 去换行符
+      demoLinks.push(link);
+      const demoFileName = path.basename(link, '.vue'); // 获取文件名
+      const tag = demoFileName.replace(/\B([A-Z])/g, '-$1').toLowerCase(); // 驼峰转连字符
+      return `<${tag} />`;
+    }
+  );
+
+  return [content, demoLinks];
+};
diff --git a/packages/vant-markdown-loader/src/index.js b/packages/vant-markdown-loader/src/index.js
index 824d70658..3b4f31a61 100644
--- a/packages/vant-markdown-loader/src/index.js
+++ b/packages/vant-markdown-loader/src/index.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const loaderUtils = require('loader-utils');
 const MarkdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');
@@ -5,18 +6,42 @@ const frontMatter = require('front-matter');
 const highlight = require('./highlight');
 const linkOpen = require('./link-open');
 const cardWrapper = require('./card-wrapper');
+const extractDemo = require('./extract-demo');
+const sideEffectTags = require('./side-effect-tags');
 const { slugify } = require('transliteration');
 
+function camelize(str) {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''));
+}
+
 function wrapper(content) {
+  const markdownDir = path.dirname(this.resourcePath);
+  let demoLinks;
+  let styles;
+  [content, demoLinks] = extractDemo(content);
+  [content, styles] = sideEffectTags(content);
   content = cardWrapper(content);
-  content = escape(content);
-
   return `
-import { h } from 'vue';
+<template>
+  <section>
+    ${content}
+  </section>
+</template>
 
-const content = unescape(\`${content}\`);
+<script>
+${demoLinks
+  .map((link) => {
+    const absPath = path.join(markdownDir, link); // 获取 demo 文件的完整路径
+    const demoFileName = path.basename(link, '.vue');
+    return `import ${camelize(demoFileName)} from '${absPath}';`;
+  })
+  .join('\n')}
 
 export default {
+  components: {
+    ${demoLinks.map((link) => camelize(path.basename(link, '.vue'))).join(',')}
+  },
+
   mounted() {
     const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5'));
 
@@ -35,11 +60,10 @@ export default {
       }
     }
   },
-
-  render() {
-    return h('section', { innerHTML: content });
-  }
 };
+</script>
+
+${styles.join('\n')}
 `;
 }
 
@@ -72,5 +96,5 @@ module.exports = function (source) {
     linkOpen(parser);
   }
 
-  return options.wrapper(parser.render(source), fm);
+  return options.wrapper.call(this, parser.render(source), fm);
 };
diff --git a/packages/vant-markdown-loader/src/side-effect-tags.js b/packages/vant-markdown-loader/src/side-effect-tags.js
new file mode 100644
index 000000000..a7f99fd5b
--- /dev/null
+++ b/packages/vant-markdown-loader/src/side-effect-tags.js
@@ -0,0 +1,14 @@
+module.exports = function sideEffectTags(content) {
+  const styles = [];
+
+  // 从模版中移除 script 标签
+  content = content.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/g, '');
+
+  // 从模版中移除 style 标签，并收集到 styles 数组中，以转移为 .vue 文件 的 style 标签
+  content = content.replace(/<style[\s\S]*?>([\s\S]*?)<\/style>/g, (_, css) => {
+    styles.push(`<style scoped>${css}</style>`);
+    return '';
+  });
+
+  return [content, styles];
+};