From 5112e4cf653e53d2644b9dc0a16fa48fdb100611 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Tue, 16 Mar 2021 21:00:35 +0800
Subject: [PATCH] =?UTF-8?q?perf(vant-markdown-loader):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=80=A7=E8=83=BD,=E5=AF=B9=E4=BA=8E=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=20demo-code=20=E7=9A=84=20md=20=E6=96=87=E4=BB=B6,?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E7=BB=91=E5=AE=9A=20HTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-markdown-loader/src/index.js | 83 +++++++++++++++-------
 1 file changed, 57 insertions(+), 26 deletions(-)

diff --git a/packages/vant-markdown-loader/src/index.js b/packages/vant-markdown-loader/src/index.js
index 2806292bb..f2a5fa252 100644
--- a/packages/vant-markdown-loader/src/index.js
+++ b/packages/vant-markdown-loader/src/index.js
@@ -11,32 +11,7 @@ function camelize(str) {
   return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''));
 }
 
-function wrapper(content) {
-  let demoLinks;
-  let styles;
-  [content, demoLinks] = extractDemo.call(this, content);
-  [content, styles] = sideEffectTags(content);
-  content = cardWrapper(content);
-  return `
-<template>
-  <section v-once>
-    ${content}
-  </section>
-</template>
-
-<script>
-${demoLinks
-  .map((link) => {
-    return `import DemoCode${camelize(path.basename(link, '.vue'))} from '${link}';`;
-  })
-  .join('\n')}
-
-export default {
-  components: {
-    ${demoLinks.map((link) => `DemoCode${camelize(path.basename(link, '.vue'))}`).join(',')}
-  },
-
-  mounted() {
+const sharedVueOptions = `mounted() {
     const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5'));
 
     anchors.forEach(anchor => {
@@ -54,6 +29,62 @@ export default {
       }
     }
   },
+`;
+
+function wrapper(content) {
+  let demoLinks;
+  [content, demoLinks] = extractDemo.call(this, content);
+  content = cardWrapper(content);
+
+  // 不包含 demo-code 的 md 文件，直接使绑定 HTML
+  if (demoLinks.length === 0) {
+    content = escape(content);
+
+    return `
+<script>
+import { h } from 'vue';
+
+const content = unescape(\`${content}\`);
+
+export default {
+${sharedVueOptions}
+
+  render() {
+    return h('section', { innerHTML: content });
+  }
+};
+</script>
+`;
+  }
+
+  // 包含 demo-code 的 md 文件，需要走模版渲染
+  let styles;
+  [content, styles] = sideEffectTags(content);
+
+  return `
+<template>
+  <section v-once>
+    ${content}
+  </section>
+</template>
+
+<script>
+${demoLinks
+  .map((link) => {
+    return `import DemoCode${camelize(
+      path.basename(link, '.vue')
+    )} from '${link}';`;
+  })
+  .join('\n')}
+
+export default {
+  components: {
+    ${demoLinks
+      .map((link) => `DemoCode${camelize(path.basename(link, '.vue'))}`)
+      .join(',')}
+  },
+
+${sharedVueOptions}
 };
 </script>