chore: update lint & ts

.eslintrc.js

@@ -88,12 +88,10 @@ module.exports = {
  2,
  {
  singleline: 20,
- multiline: {
- max: 1,
- allowFirstLine: false,
- },
+ multiline: 1,
  },
  ],
+ 'vue/multi-word-component-names': 'off',
  },
  globals: {
  h: true,

package.json

@@ -102,15 +102,15 @@
  "@types/markdown-it": "^10.0.2",
  "@types/node": "^14.0.0",
  "@types/postcss-load-config": "^2.0.1",
- "@typescript-eslint/eslint-plugin": "^4.1.0",
- "@typescript-eslint/parser": "^4.1.0",
+ "@typescript-eslint/eslint-plugin": "^5.4.0",
+ "@typescript-eslint/parser": "^5.4.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",
  "@vue/eslint-config-prettier": "^6.0.0",
- "@vue/eslint-config-typescript": "^7.0.0",
+ "@vue/eslint-config-typescript": "^9.0.0",
  "@vue/test-utils": "^2.0.0-0",
  "@webpack-cli/serve": "^1.3.1",
  "acorn": "^8.0.0",
@@ -141,15 +141,15 @@
  "enquire-js": "^0.2.1",
  "esbuild": "~0.12.29",
  "escape-html": "^1.0.3",
- "eslint": "^7.25.0",
+ "eslint": "^8.3.0",
  "eslint-config-prettier": "^8.0.0",
  "eslint-plugin-html": "^6.0.0",
  "eslint-plugin-import": "^2.24.2",
- "eslint-plugin-jest": "^24.3.6",
+ "eslint-plugin-jest": "^25.3.0",
  "eslint-plugin-markdown": "^2.0.0",
  "eslint-plugin-no-explicit-type-exports": "^0.12.0",
- "eslint-plugin-prettier": "^3.1.0",
- "eslint-plugin-vue": "^7.1.0",
+ "eslint-plugin-prettier": "^4.0.0",
+ "eslint-plugin-vue": "^8.1.1",
  "fast-glob": "^3.2.7",
  "fetch-jsonp": "^1.1.3",
  "fs-extra": "^10.0.0",
@@ -213,7 +213,7 @@
  "through2": "^3.0.0",
  "ts-jest": "^26.4.1",
  "ts-loader": "^9.1.0",
- "typescript": "~4.3.5",
+ "typescript": "~4.5.2",
  "umi-mock-middleware": "^1.0.0",
  "umi-request": "^1.3.5",
  "url-loader": "^3.0.0",
@@ -222,7 +222,7 @@
  "vue-antd-md-loader": "^1.2.1-beta.1",
  "vue-clipboard2": "0.3.3",
  "vue-draggable-resizable": "^2.1.0",
- "vue-eslint-parser": "^7.0.0",
+ "vue-eslint-parser": "^8.0.0",
  "vue-i18n": "^9.1.7",
  "vue-infinite-scroll": "^2.0.2",
  "vue-jest": "^5.0.0-alpha.3",

plugin/docs/index.ts

@@ -14,14 +14,17 @@ export default (options: Options = {}): Plugin => {
  const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
  return {
  name: 'vueToMdToVue',
- transform(code, id) {
+ async transform(code, id) {
  if (
  (id.endsWith('.vue') && id.indexOf('/demo/') > -1 && id.indexOf('index.vue') === -1) ||
  id.indexOf('/examples/App.vue') > -1
  ) {
  const res = vueToMarkdown(code, id);
  // transform .md files into vueSrc so plugin-vue can handle it
- return { code: res.ignore ? res.vueSrc : markdownToVue(res.vueSrc, id).vueSrc, map: null };
+ return {
+ code: res.ignore ? res.vueSrc : (await markdownToVue(res.vueSrc, id)).vueSrc,
+ map: null,
+ };
  }
  },
  };

plugin/md/index.ts

@@ -12,10 +12,10 @@ export default (options: Options = {}): Plugin => {
  const markdownToVue = createMarkdownToVueRenderFn(root, markdown);
  return {
  name: 'mdToVue',
- transform(code, id) {
+ async 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 };
+ return { code: (await markdownToVue(code, id)).vueSrc, map: null };
  }
  },
  };

plugin/md/markdownToVue.ts

@@ -23,10 +23,10 @@ interface MarkdownCompileResult {
 export function createMarkdownToVueRenderFn(
  root: string = process.cwd(),
  options: MarkdownOptions = {},
-): any {
+) {
  const md = createMarkdownRenderer(options);
 
- return (src: string, file: string): MarkdownCompileResult => {
+ return async (src: string, file: string): Promise<MarkdownCompileResult> => {
  const relativePath = slash(path.relative(root, file));
 
  const cached = cache.get(src);
@@ -57,7 +57,7 @@ export function createMarkdownToVueRenderFn(
  lastUpdated: Math.round(fs.statSync(file).mtimeMs),
  };
  const newContent = data.vueCode
- ? genComponentCode(md, data, pageData)
+ ? await genComponentCode(md, data, pageData)
  : `
 <template><article class="markdown">${html}</article></template>
 
@@ -69,15 +69,15 @@ ${fetchCode(content, 'style')}
 
  debug(`[render] ${file} in ${Date.now() - start}ms.`);
  const result = {
- vueSrc: newContent?.trim(),
+ vueSrc: newContent.trim(),
  pageData,
  };
  cache.set(src, result);
  return result;
  };
 }
 
-function genComponentCode(md: MarkdownRenderer, data: PageData, pageData: PageData) {
+async function genComponentCode(md: MarkdownRenderer, data: PageData, pageData: PageData) {
  const { vueCode, headers = [] } = data as MarkdownParsedData;
  const cn = headers.find(h => h.title === 'zh-CN')?.content;
  const us = headers.find(h => h.title === 'en-US')?.content;
@@ -91,7 +91,7 @@ ${vueCode?.trim()}
  const script = fetchCode(vueCode, 'script');
  const style = fetchCode(vueCode, 'style');
  const scriptContent = fetchCode(vueCode, 'scriptContent');
- let jsCode = tsToJs(scriptContent)?.trim();
+ let jsCode = (await tsToJs(scriptContent)).trim();
  jsCode = jsCode
  ? `<script>
 ${jsCode}

plugin/md/utils/tsToJs.ts

@@ -1,12 +1,12 @@
 import { transformSync } from '@babel/core';
-import { CLIEngine } from 'eslint';
+import { ESLint } from 'eslint';
 import path from 'path';
-const engine = new CLIEngine({
+const engine = new ESLint({
  fix: true,
  useEslintrc: false,
  baseConfig: require(path.join(process.cwd(), '.eslintrc.js')),
 });
-const tsToJs = (content: string): string => {
+const tsToJs = async (content: string): Promise<string> => {
  if (!content) {
  return '';
  }
@@ -21,8 +21,8 @@ const tsToJs = (content: string): string => {
  ],
  ],
  });
- const report = engine.executeOnText(code);
- let output = report.results[0].output;
+ const report = await engine.lintText(code);
+ let output = report[0].output;
  output = output ? output.trim() : output;
  return output;
 };

site/scripts/genrateRoutes.js

@@ -3,7 +3,7 @@ const globby = require('globby');
 const fs = require('fs');
 const path = require('path');
 const matter = require('gray-matter');
-const { CLIEngine } = require('eslint');
+const { ESLint } = require('eslint');
 
 (async () => {
  const paths = await globby('components/*/index.*.md');
@@ -30,13 +30,13 @@ export default [
  )}
 ];`;
 
- const engine = new CLIEngine({
+ const engine = new ESLint({
  fix: true,
  useEslintrc: false,
  baseConfig: require(path.join(process.cwd(), '.eslintrc.js')),
  });
 
- const report = engine.executeOnText(TEMPLATE);
+ const report = await engine.lintText(TEMPLATE);
 
- fs.writeFileSync('site/src/router/demoRoutes.js', report.results[0].output);
+ fs.writeFileSync('site/src/router/demoRoutes.js', report[0].output);
 })();