refactor(cli): rewrite vite-plugin-md (#12179)

2023-08-13 19:13:11 +08:00
parent af986cc459
commit f691eacb24
4 changed files with 128 additions and 140 deletions
@@ -0,0 +1,126 @@
+import type { Plugin } from 'vite';
+import hljs from 'highlight.js';
+import MarkdownIt from 'markdown-it';
+import { createRequire } from 'node:module';
+
+const isMd = (id: string) => /\.md$/.test(id);
+
+function markdownCardWrapper(htmlCode: string) {
+  const group = htmlCode
+    .replace(/<h3/g, ':::<h3')
+    .replace(/<h2/g, ':::<h2')
+    .split(':::');
+
+  return group
+    .map((fragment) => {
+      if (fragment.indexOf('<h3') !== -1) {
+        return `<div class="van-doc-card">${fragment}</div>`;
+      }
+
+      return fragment;
+    })
+    .join('');
+}
+
+function markdownHighlight(str: string, lang: string) {
+  if (lang && hljs.getLanguage(lang)) {
+    // https://github.com/highlightjs/highlight.js/issues/2277
+    return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+  }
+  return '';
+}
+
+const initMarkdownIt = () => {
+  const md = new MarkdownIt({
+    html: true,
+    linkify: true,
+    typographer: false,
+    highlight: markdownHighlight,
+  });
+
+  const require = createRequire(import.meta.url);
+  const { slugify } = require('transliteration');
+  const markdownItAnchor = require('markdown-it-anchor');
+
+  markdownLinkOpen(md);
+
+  md.use(markdownItAnchor, {
+    level: 2,
+    slugify,
+  });
+
+  return md;
+};
+
+const markdownToVue = ({
+  id,
+  raw,
+  md,
+}: {
+  id: string;
+  raw: string;
+  md: MarkdownIt;
+}) => {
+  let html = md.render(raw, { id });
+  html = `<div class="van-doc-markdown-body">${html}</div>`;
+  html = markdownCardWrapper(html);
+  return `<template>${html}</template>`;
+};
+
+// add target="_blank" to all links
+function markdownLinkOpen(md: MarkdownIt) {
+  const defaultRender = md.renderer.rules.link_open;
+
+  md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+    const aIndex = tokens[idx].attrIndex('target');
+
+    if (aIndex < 0) {
+      tokens[idx].attrPush(['target', '_blank']); // add new attribute
+    }
+
+    if (defaultRender) {
+      return defaultRender(tokens, idx, options, env, self);
+    }
+
+    return self.renderToken(tokens, idx, options);
+  };
+}
+
+export function vitePluginMd(): Plugin {
+  const md = initMarkdownIt();
+
+  return {
+    name: 'vite-plugin-md',
+
+    enforce: 'pre',
+
+    transform(raw, id) {
+      if (!isMd(id)) {
+        return;
+      }
+
+      try {
+        return markdownToVue({ id, raw, md });
+      } catch (e: any) {
+        this.error(e);
+      }
+    },
+
+    async handleHotUpdate(ctx) {
+      if (!isMd(ctx.file)) {
+        return;
+      }
+
+      const defaultRead = ctx.read;
+
+      ctx.read = async function () {
+        const raw = await defaultRead();
+        return markdownToVue({
+          id: ctx.file,
+          raw,
+          md,
+        });
+      };
+    },
+  };
+}