vueComponent · tangjinzhou · Sep 1, 2021 · Jun 29, 2021
diff --git a/.eslintrc b/.eslintrc
@@ -7,11 +7,12 @@
     "jest": true,
     "es6": true
   },
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "parser": "babel-eslint"
   },
   "extends": ["plugin:vue/vue3-recommended", "prettier"],
-  "plugins": ["markdown", "jest"],
+  "plugins": ["markdown", "jest", "@typescript-eslint", "eslint-plugin-no-explicit-type-exports"],
   "overrides": [
     {
       "files": ["**/demo/*.md"],
@@ -27,7 +28,11 @@
         "@vue/prettier",
         "@vue/prettier/@typescript-eslint"
       ],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
       "rules": {
+        "no-explicit-type-exports/no-explicit-type-exports": 2,
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/ban-types": 0,
         "@typescript-eslint/consistent-type-imports": 1,

diff --git a/examples/index.js → examples/index.ts b/examples/index.js → examples/index.ts
@@ -1,9 +1,8 @@
-import '@babel/polyfill';
-import 'ant-design-vue/style';
+import '../components/style';
 import { createApp, version } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import App from './App.vue';
-import antd from 'ant-design-vue/index.ts';
+import antd from '../components';
 
 // eslint-disable-next-line no-console
 console.log('Vue version: ', version);
@@ -13,7 +12,6 @@ const basic = (_, { slots }) => {
 
 const router = createRouter({
   history: createWebHistory(),
-  fallback: false,
   routes: [],
 });
 const app = createApp(App);

diff --git a/examples/typings.d.ts b/examples/typings.d.ts
@@ -0,0 +1,8 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const component: DefineComponent<any, any, any> & { readonly pageDate?: PageData };
+  export default component;
+}
+
+declare module '*.svg';
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <meta
+      name="description"
+      content="An enterprise-class UI components based on Ant Design and Vue"
+    />
+    <title>Ant Design Vue</title>
+    <meta
+      name="keywords"
+      content="ant design vue,ant-design-vue,ant-design-vue admin,ant design pro,vue ant design,vue ant design pro,vue ant design admin,ant design vue官网,ant design vue中文文档,ant design vue文档"
+    />
+    <link rel="shortcut icon" type="image/x-icon" href="https://qn.antdv.com/favicon.ico" />
+    <style id="nprogress-style">
+      #nprogress {
+        display: none;
+      }
+    </style>
+    <script type="module" src="/examples/index.ts"></script>
+  </head>
+
+  <body>
+    <div id="app" style="padding: 50px"></div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "vetur"
   ],
   "scripts": {
-    "dev": "webpack serve",
+    "dev": "vite",
     "test": "cross-env NODE_ENV=test WORKFLOW=true jest --config .jest.js",
     "test:dev": "cross-env NODE_ENV=test jest --config .jest.js",
     "compile": "node antd-tools/cli/run.js compile",
@@ -82,11 +82,21 @@
     "@commitlint/cli": "^12.0.0",
     "@commitlint/config-conventional": "^12.0.0",
     "@octokit/rest": "^18.0.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@types/compression": "^1.7.0",
     "@types/fs-extra": "^9.0.8",
+    "@types/jest": "^26.0.15",
+    "@types/koa": "^2.11.6",
     "@types/lodash-es": "^4.17.3",
+    "@types/lru-cache": "^5.1.0",
+    "@types/markdown-it": "^10.0.2",
+    "@types/node": "^13.13.4",
+    "@types/postcss-load-config": "^2.0.1",
     "@types/raf": "^3.4.0",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
+    "@vitejs/plugin-vue": "^1.2.4",
+    "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/babel-plugin-jsx": "^1.0.0",
     "@vue/cli-plugin-eslint": "^5.0.0-0",
     "@vue/compiler-sfc": "^3.1.0",
@@ -104,7 +114,7 @@
     "babel-plugin-inline-import-data-uri": "^1.0.1",
     "babel-plugin-istanbul": "^6.0.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
     "cheerio": "^1.0.0-rc.2",
     "codecov": "^3.0.0",
     "colorful": "^2.1.0",
@@ -114,18 +124,22 @@
     "css-loader": "^5.0.0",
     "css-minimizer-webpack-plugin": "^3.0.0",
     "deep-assign": "^3.0.0",
+    "diacritics": "^1.3.0",
     "docsearch.js": "^2.6.3",
     "enquire-js": "^0.2.1",
+    "escape-html": "^1.0.3",
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^8.0.0",
     "eslint-plugin-html": "^6.0.0",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-markdown": "^2.0.0-alpha.0",
+    "eslint-plugin-no-explicit-type-exports": "^0.11.10",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.1.0",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.2",
+    "gray-matter": "^4.0.3",
     "gulp": "^4.0.1",
     "gulp-babel": "^8.0.0",
     "gulp-strip-code": "^0.1.4",
@@ -145,6 +159,11 @@
     "less-plugin-npm-import": "^2.1.0",
     "less-vars-to-js": "^1.3.0",
     "lint-staged": "^11.0.0",
+    "markdown-it": "^8.4.2",
+    "markdown-it-anchor": "^8.0.4",
+    "markdown-it-container": "^3.0.0",
+    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-table-of-contents": "^0.5.2",
     "marked": "0.3.18",
     "merge2": "^1.2.1",
     "mini-css-extract-plugin": "^1.5.0",
@@ -156,7 +175,7 @@
     "postcss-loader": "^6.0.0",
     "prettier": "^2.2.0",
     "pretty-quick": "^3.0.0",
-    "prismjs": "^1.20.0",
+    "prismjs": "^1.23.0",
     "querystring": "^0.2.0",
     "raw-loader": "^4.0.2",
     "reqwest": "^2.0.5",
@@ -165,6 +184,7 @@
     "rucksack-css": "^1.0.2",
     "selenium-server": "^3.0.1",
     "semver": "^7.0.0",
+    "slash": "^2.0.0",
     "style-loader": "^3.0.0",
     "stylelint": "^13.0.0",
     "stylelint-config-prettier": "^8.0.0",
@@ -180,6 +200,7 @@
     "umi-mock-middleware": "^1.0.0",
     "umi-request": "^1.3.5",
     "url-loader": "^3.0.0",
+    "vite": "^2.3.8",
     "vue": "^3.1.0",
     "vue-antd-md-loader": "^1.2.1-beta.1",
     "vue-clipboard2": "0.3.1",

diff --git a/plugin/docs/index.ts b/plugin/docs/index.ts
@@ -0,0 +1,24 @@
+import { createVueToMarkdownRenderFn } from './vueToMarkdown';
+import type { MarkdownOptions } from '../md/markdown/markdown';
+import type { Plugin } from 'vite';
+import { createMarkdownToVueRenderFn } from '../md/markdownToVue';
+
+interface Options {
+  root?: string;
+  markdown?: MarkdownOptions;
+}
+
+export default (options: Options = {}): Plugin => {
+  const { root, markdown } = options;
+  const vueToMarkdown = createVueToMarkdownRenderFn(root);
+  const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
+  return {
+    name: 'vueToMdToVue',
+    transform(code, id) {
+      if (id.endsWith('.vue') && id.indexOf('/demo/') > -1 && id.indexOf('index.vue') === -1) {
+        // transform .md files into vueSrc so plugin-vue can handle it
+        return { code: markdownToVue(vueToMarkdown(code, id).vueSrc, id).vueSrc, map: null };
+      }
+    },
+  };
+};
diff --git a/plugin/docs/vueToMarkdown.ts b/plugin/docs/vueToMarkdown.ts
@@ -0,0 +1,43 @@
+import path from 'path';
+import LRUCache from 'lru-cache';
+import slash from 'slash';
+import fetchCode from '../md/utils/fetchCode';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const debug = require('debug')('vitepress:md');
+const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 });
+
+interface MarkdownCompileResult {
+  vueSrc: string;
+}
+
+export function createVueToMarkdownRenderFn(root: string = process.cwd()): any {
+  return (src: string, file: string): MarkdownCompileResult => {
+    const relativePath = slash(path.relative(root, file));
+
+    const cached = cache.get(src);
+    if (cached) {
+      debug(`[cache hit] ${relativePath}`);
+      return cached;
+    }
+
+    const start = Date.now();
+    const docs = fetchCode(src, 'docs')?.trim();
+    const template = fetchCode(src, 'template');
+    const script = fetchCode(src, 'script');
+    const style = fetchCode(src, 'style');
+    const newContent = `${docs}
+\`\`\`vue
+${template}
+${script}
+${style}
+\`\`\`
+`;
+    debug(`[render] ${file} in ${Date.now() - start}ms.`);
+    const result = {
+      vueSrc: newContent?.trim(),
+    };
+    cache.set(src, result);
+    return result;
+  };
+}
diff --git a/plugin/md/index.ts b/plugin/md/index.ts
@@ -0,0 +1,22 @@
+import { createMarkdownToVueRenderFn } from './markdownToVue';
+import type { MarkdownOptions } from './markdown/markdown';
+import type { Plugin } from 'vite';
+
+interface Options {
+  root?: string;
+  markdown?: MarkdownOptions;
+}
+
+export default (options: Options = {}): Plugin => {
+  const { root, markdown } = options;
+  const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
+  return {
+    name: 'mdToVue',
+    transform(code, id) {
+      if (id.endsWith('.md')) {
+        // transform .md files into vueSrc so plugin-vue can handle it
+        return { code: markdownToVue(code, id).vueSrc, map: null };
+      }
+    },
+  };
+};
diff --git a/plugin/md/markdown/markdown.ts b/plugin/md/markdown/markdown.ts
@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import MarkdownIt from 'markdown-it';
+import { parseHeader } from '../utils/parseHeader';
+import { highlight } from './plugins/highlight';
+import { slugify } from './plugins/slugify';
+import { highlightLinePlugin } from './plugins/highlightLines';
+import { lineNumberPlugin } from './plugins/lineNumbers';
+import { componentPlugin } from './plugins/component';
+import { containerPlugin } from './plugins/containers';
+import { snippetPlugin } from './plugins/snippet';
+import { hoistPlugin } from './plugins/hoist';
+import { preWrapperPlugin } from './plugins/preWrapper';
+import { linkPlugin } from './plugins/link';
+import { extractHeaderPlugin } from './plugins/header';
+import type { Header } from '../../shared';
+
+const emoji = require('markdown-it-emoji');
+const anchor = require('markdown-it-anchor');
+const toc = require('markdown-it-table-of-contents');
+
+export interface MarkdownOptions extends MarkdownIt.Options {
+  lineNumbers?: boolean;
+  config?: (md: MarkdownIt) => void;
+  anchor?: {
+    permalink?: boolean;
+    permalinkBefore?: boolean;
+    permalinkSymbol?: string;
+  };
+  // https://github.com/Oktavilla/markdown-it-table-of-contents
+  toc?: any;
+  externalLinks?: Record<string, string>;
+}
+
+export interface MarkdownParsedData {
+  hoistedTags?: string[];
+  links?: string[];
+  headers?: Header[];
+  vueCode?: string;
+}
+
+export interface MarkdownRenderer {
+  __data: MarkdownParsedData;
+  render: (src: string, env?: any) => { html: string; data: any };
+}
+
+export const createMarkdownRenderer = (options: MarkdownOptions = {}): MarkdownRenderer => {
+  const md = MarkdownIt({
+    html: true,
+    linkify: true,
+    highlight,
+    ...options,
+  });
+
+  // custom plugins
+  md.use(componentPlugin)
+    .use(highlightLinePlugin)
+    .use(preWrapperPlugin)
+    .use(snippetPlugin)
+    .use(hoistPlugin)
+    .use(containerPlugin)
+    .use(extractHeaderPlugin)
+    .use(linkPlugin, {
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      ...options.externalLinks,
+    })
+
+    // 3rd party plugins
+    .use(emoji)
+    .use(anchor, {
+      slugify,
+      permalink: false,
+      permalinkBefore: true,
+      permalinkSymbol: '#',
+      permalinkAttrs: () => ({ 'aria-hidden': true }),
+      ...options.anchor,
+    })
+    .use(toc, {
+      slugify,
+      includeLevel: [2, 3],
+      format: parseHeader,
+      ...options.toc,
+    });
+
+  // apply user config
+  if (options.config) {
+    options.config(md);
+  }
+
+  if (options.lineNumbers) {
+    md.use(lineNumberPlugin);
+  }
+
+  // wrap render so that we can return both the html and extracted data.
+  const render = md.render;
+  const wrappedRender: MarkdownRenderer['render'] = src => {
+    (md as any).__data = {};
+    const html = render.call(md, src);
+    return {
+      html,
+      data: (md as any).__data,
+    };
+  };
+  (md as any).render = wrappedRender;
+
+  return md as any;
+};