Skip to content

Commit 41342fb

Browse files
tangjinzhoutangjinzhou
authored
chore: vite for dev (#4602)
1 parent b6ef2b1 commit 41342fb

27 files changed

+1146
-8
lines changed

‎.eslintrc

+6-1
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77
"jest": true,
88
"es6": true
99
},
10+
"parser": "@typescript-eslint/parser",
1011
"parserOptions": {
1112
"parser": "babel-eslint"
1213
},
1314
"extends": ["plugin:vue/vue3-recommended", "prettier"],
14-
"plugins": ["markdown", "jest"],
15+
"plugins": ["markdown", "jest", "@typescript-eslint", "eslint-plugin-no-explicit-type-exports"],
1516
"overrides": [
1617
{
1718
"files": ["**/demo/*.md"],
@@ -27,7 +28,11 @@
2728
"@vue/prettier",
2829
"@vue/prettier/@typescript-eslint"
2930
],
31+
"parserOptions": {
32+
"project": "./tsconfig.json"
33+
},
3034
"rules": {
35+
"no-explicit-type-exports/no-explicit-type-exports": 2,
3136
"@typescript-eslint/no-explicit-any": 0,
3237
"@typescript-eslint/ban-types": 0,
3338
"@typescript-eslint/consistent-type-imports": 1,

‎examples/index.js renamed to ‎examples/index.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import '@babel/polyfill';
2-
import 'ant-design-vue/style';
1+
import '../components/style';
32
import { createApp, version } from 'vue';
43
import { createRouter, createWebHistory } from 'vue-router';
54
import App from './App.vue';
6-
import antd from 'ant-design-vue/index.ts';
5+
import antd from '../components';
76

87
// eslint-disable-next-line no-console
98
console.log('Vue version: ', version);
@@ -13,7 +12,6 @@ const basic = (_, { slots }) => {
1312

1413
const router = createRouter({
1514
history: createWebHistory(),
16-
fallback: false,
1715
routes: [],
1816
});
1917
const app = createApp(App);

‎examples/typings.d.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
declare module '*.vue' {
2+
import type { DefineComponent } from 'vue';
3+
// eslint-disable-next-line @typescript-eslint/ban-types
4+
const component: DefineComponent<any, any, any> & { readonly pageDate?: PageData };
5+
export default component;
6+
}
7+
8+
declare module '*.svg';

‎index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
8+
<meta http-equiv="Pragma" content="no-cache" />
9+
<meta http-equiv="Expires" content="0" />
10+
<meta
11+
name="description"
12+
content="An enterprise-class UI components based on Ant Design and Vue"
13+
/>
14+
<title>Ant Design Vue</title>
15+
<meta
16+
name="keywords"
17+
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文档"
18+
/>
19+
<link rel="shortcut icon" type="image/x-icon" href="https://qn.antdv.com/favicon.ico" />
20+
<style id="nprogress-style">
21+
#nprogress {
22+
display: none;
23+
}
24+
</style>
25+
<script type="module" src="/examples/index.ts"></script>
26+
</head>
27+
28+
<body>
29+
<div id="app" style="padding: 50px"></div>
30+
</body>
31+
</html>

‎package.json

+24-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"vetur"
2929
],
3030
"scripts": {
31-
"dev": "webpack serve",
31+
"dev": "vite",
3232
"test": "cross-env NODE_ENV=test WORKFLOW=true jest --config .jest.js",
3333
"test:dev": "cross-env NODE_ENV=test jest --config .jest.js",
3434
"compile": "node antd-tools/cli/run.js compile",
@@ -82,11 +82,21 @@
8282
"@commitlint/cli": "^12.0.0",
8383
"@commitlint/config-conventional": "^12.0.0",
8484
"@octokit/rest": "^18.0.0",
85+
"@rollup/plugin-babel": "^5.3.0",
86+
"@types/compression": "^1.7.0",
8587
"@types/fs-extra": "^9.0.8",
88+
"@types/jest": "^26.0.15",
89+
"@types/koa": "^2.11.6",
8690
"@types/lodash-es": "^4.17.3",
91+
"@types/lru-cache": "^5.1.0",
92+
"@types/markdown-it": "^10.0.2",
93+
"@types/node": "^13.13.4",
94+
"@types/postcss-load-config": "^2.0.1",
8795
"@types/raf": "^3.4.0",
8896
"@typescript-eslint/eslint-plugin": "^4.1.0",
8997
"@typescript-eslint/parser": "^4.1.0",
98+
"@vitejs/plugin-vue": "^1.2.4",
99+
"@vitejs/plugin-vue-jsx": "^1.1.6",
90100
"@vue/babel-plugin-jsx": "^1.0.0",
91101
"@vue/cli-plugin-eslint": "^5.0.0-0",
92102
"@vue/compiler-sfc": "^3.1.0",
@@ -104,7 +114,7 @@
104114
"babel-plugin-inline-import-data-uri": "^1.0.1",
105115
"babel-plugin-istanbul": "^6.0.0",
106116
"case-sensitive-paths-webpack-plugin": "^2.1.2",
107-
"chalk": "^4.1.0",
117+
"chalk": "^4.1.1",
108118
"cheerio": "^1.0.0-rc.2",
109119
"codecov": "^3.0.0",
110120
"colorful": "^2.1.0",
@@ -114,18 +124,22 @@
114124
"css-loader": "^5.0.0",
115125
"css-minimizer-webpack-plugin": "^3.0.0",
116126
"deep-assign": "^3.0.0",
127+
"diacritics": "^1.3.0",
117128
"docsearch.js": "^2.6.3",
118129
"enquire-js": "^0.2.1",
130+
"escape-html": "^1.0.3",
119131
"eslint": "^7.25.0",
120132
"eslint-config-prettier": "^8.0.0",
121133
"eslint-plugin-html": "^6.0.0",
122134
"eslint-plugin-jest": "^24.3.6",
123135
"eslint-plugin-markdown": "^2.0.0-alpha.0",
136+
"eslint-plugin-no-explicit-type-exports": "^0.11.10",
124137
"eslint-plugin-prettier": "^3.1.4",
125138
"eslint-plugin-vue": "^7.1.0",
126139
"fetch-jsonp": "^1.1.3",
127140
"fs-extra": "^10.0.0",
128141
"glob": "^7.1.2",
142+
"gray-matter": "^4.0.3",
129143
"gulp": "^4.0.1",
130144
"gulp-babel": "^8.0.0",
131145
"gulp-strip-code": "^0.1.4",
@@ -145,6 +159,11 @@
145159
"less-plugin-npm-import": "^2.1.0",
146160
"less-vars-to-js": "^1.3.0",
147161
"lint-staged": "^11.0.0",
162+
"markdown-it": "^8.4.2",
163+
"markdown-it-anchor": "^8.0.4",
164+
"markdown-it-container": "^3.0.0",
165+
"markdown-it-emoji": "^2.0.0",
166+
"markdown-it-table-of-contents": "^0.5.2",
148167
"marked": "0.3.18",
149168
"merge2": "^1.2.1",
150169
"mini-css-extract-plugin": "^1.5.0",
@@ -157,14 +176,15 @@
157176
"postcss-loader": "^6.0.0",
158177
"prettier": "^2.2.0",
159178
"pretty-quick": "^3.0.0",
160-
"prismjs": "^1.20.0",
179+
"prismjs": "^1.23.0",
161180
"querystring": "^0.2.0",
162181
"raw-loader": "^4.0.2",
163182
"reqwest": "^2.0.5",
164183
"rimraf": "^3.0.0",
165184
"rucksack-css": "^1.0.2",
166185
"selenium-server": "^3.0.1",
167186
"semver": "^7.0.0",
187+
"slash": "^2.0.0",
168188
"style-loader": "^3.0.0",
169189
"stylelint": "^13.0.0",
170190
"stylelint-config-prettier": "^8.0.0",
@@ -180,6 +200,7 @@
180200
"umi-mock-middleware": "^1.0.0",
181201
"umi-request": "^1.3.5",
182202
"url-loader": "^3.0.0",
203+
"vite": "^2.3.8",
183204
"vue": "^3.1.0",
184205
"vue-antd-md-loader": "^1.2.1-beta.1",
185206
"vue-clipboard2": "0.3.1",

‎plugin/docs/index.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createVueToMarkdownRenderFn } from './vueToMarkdown';
2+
import type { MarkdownOptions } from '../md/markdown/markdown';
3+
import type { Plugin } from 'vite';
4+
import { createMarkdownToVueRenderFn } from '../md/markdownToVue';
5+
6+
interface Options {
7+
root?: string;
8+
markdown?: MarkdownOptions;
9+
}
10+
11+
export default (options: Options = {}): Plugin => {
12+
const { root, markdown } = options;
13+
const vueToMarkdown = createVueToMarkdownRenderFn(root);
14+
const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
15+
return {
16+
name: 'vueToMdToVue',
17+
transform(code, id) {
18+
if (id.endsWith('.vue') && id.indexOf('/demo/') > -1 && id.indexOf('index.vue') === -1) {
19+
// transform .md files into vueSrc so plugin-vue can handle it
20+
return { code: markdownToVue(vueToMarkdown(code, id).vueSrc, id).vueSrc, map: null };
21+
}
22+
},
23+
};
24+
};

‎plugin/docs/vueToMarkdown.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import path from 'path';
2+
import LRUCache from 'lru-cache';
3+
import slash from 'slash';
4+
import fetchCode from '../md/utils/fetchCode';
5+
6+
// eslint-disable-next-line @typescript-eslint/no-var-requires
7+
const debug = require('debug')('vitepress:md');
8+
const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 });
9+
10+
interface MarkdownCompileResult {
11+
vueSrc: string;
12+
}
13+
14+
export function createVueToMarkdownRenderFn(root: string = process.cwd()): any {
15+
return (src: string, file: string): MarkdownCompileResult => {
16+
const relativePath = slash(path.relative(root, file));
17+
18+
const cached = cache.get(src);
19+
if (cached) {
20+
debug(`[cache hit] ${relativePath}`);
21+
return cached;
22+
}
23+
24+
const start = Date.now();
25+
const docs = fetchCode(src, 'docs')?.trim();
26+
const template = fetchCode(src, 'template');
27+
const script = fetchCode(src, 'script');
28+
const style = fetchCode(src, 'style');
29+
const newContent = `${docs}
30+
\`\`\`vue
31+
${template}
32+
${script}
33+
${style}
34+
\`\`\`
35+
`;
36+
debug(`[render] ${file} in ${Date.now() - start}ms.`);
37+
const result = {
38+
vueSrc: newContent?.trim(),
39+
};
40+
cache.set(src, result);
41+
return result;
42+
};
43+
}

‎plugin/md/index.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { createMarkdownToVueRenderFn } from './markdownToVue';
2+
import type { MarkdownOptions } from './markdown/markdown';
3+
import type { Plugin } from 'vite';
4+
5+
interface Options {
6+
root?: string;
7+
markdown?: MarkdownOptions;
8+
}
9+
10+
export default (options: Options = {}): Plugin => {
11+
const { root, markdown } = options;
12+
const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
13+
return {
14+
name: 'mdToVue',
15+
transform(code, id) {
16+
if (id.endsWith('.md')) {
17+
// transform .md files into vueSrc so plugin-vue can handle it
18+
return { code: markdownToVue(code, id).vueSrc, map: null };
19+
}
20+
},
21+
};
22+
};

‎plugin/md/markdown/markdown.ts

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* eslint-disable @typescript-eslint/no-var-requires */
2+
import MarkdownIt from 'markdown-it';
3+
import { parseHeader } from '../utils/parseHeader';
4+
import { highlight } from './plugins/highlight';
5+
import { slugify } from './plugins/slugify';
6+
import { highlightLinePlugin } from './plugins/highlightLines';
7+
import { lineNumberPlugin } from './plugins/lineNumbers';
8+
import { componentPlugin } from './plugins/component';
9+
import { containerPlugin } from './plugins/containers';
10+
import { snippetPlugin } from './plugins/snippet';
11+
import { hoistPlugin } from './plugins/hoist';
12+
import { preWrapperPlugin } from './plugins/preWrapper';
13+
import { linkPlugin } from './plugins/link';
14+
import { extractHeaderPlugin } from './plugins/header';
15+
import type { Header } from '../../shared';
16+
17+
const emoji = require('markdown-it-emoji');
18+
const anchor = require('markdown-it-anchor');
19+
const toc = require('markdown-it-table-of-contents');
20+
21+
export interface MarkdownOptions extends MarkdownIt.Options {
22+
lineNumbers?: boolean;
23+
config?: (md: MarkdownIt) => void;
24+
anchor?: {
25+
permalink?: boolean;
26+
permalinkBefore?: boolean;
27+
permalinkSymbol?: string;
28+
};
29+
// https://github.com/Oktavilla/markdown-it-table-of-contents
30+
toc?: any;
31+
externalLinks?: Record<string, string>;
32+
}
33+
34+
export interface MarkdownParsedData {
35+
hoistedTags?: string[];
36+
links?: string[];
37+
headers?: Header[];
38+
vueCode?: string;
39+
}
40+
41+
export interface MarkdownRenderer {
42+
__data: MarkdownParsedData;
43+
render: (src: string, env?: any) => { html: string; data: any };
44+
}
45+
46+
export const createMarkdownRenderer = (options: MarkdownOptions = {}): MarkdownRenderer => {
47+
const md = MarkdownIt({
48+
html: true,
49+
linkify: true,
50+
highlight,
51+
...options,
52+
});
53+
54+
// custom plugins
55+
md.use(componentPlugin)
56+
.use(highlightLinePlugin)
57+
.use(preWrapperPlugin)
58+
.use(snippetPlugin)
59+
.use(hoistPlugin)
60+
.use(containerPlugin)
61+
.use(extractHeaderPlugin)
62+
.use(linkPlugin, {
63+
target: '_blank',
64+
rel: 'noopener noreferrer',
65+
...options.externalLinks,
66+
})
67+
68+
// 3rd party plugins
69+
.use(emoji)
70+
.use(anchor, {
71+
slugify,
72+
permalink: false,
73+
permalinkBefore: true,
74+
permalinkSymbol: '#',
75+
permalinkAttrs: () => ({ 'aria-hidden': true }),
76+
...options.anchor,
77+
})
78+
.use(toc, {
79+
slugify,
80+
includeLevel: [2, 3],
81+
format: parseHeader,
82+
...options.toc,
83+
});
84+
85+
// apply user config
86+
if (options.config) {
87+
options.config(md);
88+
}
89+
90+
if (options.lineNumbers) {
91+
md.use(lineNumberPlugin);
92+
}
93+
94+
// wrap render so that we can return both the html and extracted data.
95+
const render = md.render;
96+
const wrappedRender: MarkdownRenderer['render'] = src => {
97+
(md as any).__data = {};
98+
const html = render.call(md, src);
99+
return {
100+
html,
101+
data: (md as any).__data,
102+
};
103+
};
104+
(md as any).render = wrappedRender;
105+
106+
return md as any;
107+
};

0 commit comments

Comments
 (0)