refactor: Update dependencies are related to update ts

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -46,7 +46,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -79,7 +79,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -109,7 +109,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -139,7 +139,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
 
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/deploy-docs.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
 
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/release-test.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
           registry-url: https://registry.npmjs.org/
       - run: echo '//registry.npmjs.org/:_authToken=${{ secrets.NPM_ACCESS_TOKEN  }}' > ${{ github.workspace }}/.npmrc
 

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.18.1'
+          node-version: '18.18.1'
           registry-url: https://registry.npmjs.org/
       - run: echo '//registry.npmjs.org/:_authToken=${{ secrets.NPM_ACCESS_TOKEN  }}' > ${{ github.workspace }}/.npmrc
 

.vscode/settings.json

@@ -1,6 +1,14 @@
 {
   "files.eol": "\n",
-  "cSpell.words": ["datav", "polyline", "vuepress", "execa", "jiaminghi", "dataview", "RGBA"],
+  "cSpell.words": [
+    "datav",
+    "polyline",
+    "vuepress",
+    "execa",
+    "jiaminghi",
+    "dataview",
+    "RGBA"
+  ],
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "typescript.tsdk": "./node_modules/typescript/lib",
@@ -12,7 +20,9 @@
   },
   "typescript.preferences.importModuleSpecifier": "relative",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["javascript"]
+  "eslint.validate": [
+    "javascript"
+  ]
 }

docs/.vuepress/client.ts

@@ -3,7 +3,7 @@ import { Components } from '../components';
 
 export default defineClientConfig({
   async enhance({ app }) {
-    Components.forEach((CMP) => app.component(CMP.name, CMP));
+    Components.forEach((CMP) => app.component(CMP.name!, CMP));
 
     if (!__VUEPRESS_SSR__) {
       const DataV = await import('../../es');

docs/.vuepress/config.ts

@@ -45,7 +45,7 @@ export default defineUserConfig({
       },
     ],
     sidebar: {
-      '/guide/': ['/guide/index.md/', '/guide/borderBox.md', '/guide/decoration.md/'],
+      '/guide/': ['/guide/index.md', '/guide/borderBox.md', '/guide/decoration.md'],
     },
   }),
   bundler: viteBundler({

docs/.vuepress/init.ts

@@ -15,7 +15,7 @@ async function init() {
   spinner.info('Building es output...');
 
   const buildProcess = execa('yarn', ['build:es'], { shell: true });
-  buildProcess.stdout.pipe(process.stdout);
+  buildProcess.stdout!.pipe(process.stdout);
   await buildProcess;
 
   spinner.succeed('Es output build successfully!');

docs/components/utils.ts

@@ -6,5 +6,5 @@ export function copy(str: string) {
   inputEle.select();
   document.execCommand('copy');
 
-  inputEle.parentNode.removeChild(inputEle);
+  inputEle.parentNode?.removeChild(inputEle);
 }

package.json

@@ -3,17 +3,17 @@
   "version": "0.0.0-alpha.0",
   "description": "Vue3 large screen data display component library",
   "main": "./cjs/index.js",
-  "module": "./es/index.js",
+  "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
   "scripts": {
     "prepare": "husky install",
     "dev": "ts-node scripts/dev/init.ts && vite --config scripts/dev/vite.config.ts",
-    "clear": "rm es cjs umd -rf",
+    "clear": "rimraf es cjs umd -rf",
     "build": "yarn clear && yarn build:es && yarn build:umd",
     "build:es": "vite build --config scripts/build/vite.config.ts",
     "build:umd": "vite build --config scripts/build/vite.config.umd.ts",
     "check": "yarn lint && yarn lint:type && yarn lint:format",
-    "lint": "eslint --fix --ext .ts,.tsx src",
+    "lint": "eslint --fix \"src/**/*.{ts,tsx,js}\"",
     "lint:type": "ts-node docs/.vuepress/init && tsc --project ./tsconfig.json --noEmit",
     "lint:format": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\" \"src/**/*.less\"",
     "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"src/**/*.less\"",
@@ -35,39 +35,42 @@
   "devDependencies": {
     "@commitlint/cli": "17.0.2",
     "@commitlint/config-conventional": "17.0.2",
-    "@types/less": "^3.0.3",
-    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.7.18",
-    "@types/prettier": "^2.7.2",
-    "@types/semver": "^7.3.13",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
-    "@vitejs/plugin-vue": "^3.1.0",
-    "@vitejs/plugin-vue-jsx": "^2.0.0",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.1",
-    "eslint": "^8.23.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "@types/less": "^3.0.6",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^18.19.31",
+    "@types/prettier": "^2.7.3",
+    "@types/semver": "^7.5.8",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue-jsx": "^2.1.1",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vuepress/bundler-vite": "^2.0.0-rc.9",
+    "@vuepress/theme-default": "^2.0.0-rc.26",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-vue": "^9.25.0",
     "execa": "5.1.1",
-    "fs-extra": "^11.1.0",
-    "glob": "^8.0.3",
-    "husky": "^8.0.1",
-    "less": "^4.1.3",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.12",
+    "husky": "^8.0.3",
+    "less": "^4.2.0",
     "ora": "5.4.1",
-    "prettier": "^2.7.1",
-    "semver": "^7.3.8",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.5",
+    "semver": "^7.6.0",
     "ts-morph": "^17.0.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.8.3",
-    "vite": "^4.0.0",
-    "vite-plugin-dts": "^1.7.1",
-    "vue": "^3.2.39",
-    "vuepress": "^2.0.0-beta.60"
+    "ts-node": "^10.9.2",
+    "typescript": "~5.1.0",
+    "vite": "^4.5.3",
+    "vite-plugin-dts": "^1.7.3",
+    "vue": "^3.4.25",
+    "vuepress": "^2.0.0-rc.9"
   },
   "dependencies": {
     "@jiaminghi/color": "1.1.3",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {

scripts/build/vite.config.ts

@@ -2,7 +2,7 @@ import path from 'path';
 
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import glob from 'glob';
+import { sync } from 'glob';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
@@ -11,12 +11,10 @@ import { STYLED_PLACEHOLDER } from '../config';
 import { compileStyledComponentsPlugin } from '../plugins/compileStyledComponentsPlugin';
 
 const entry = Object.fromEntries(
-  glob
-    .sync('src/**/*.{ts,tsx}')
-    .map((file) => [
-      path.relative('src', file.slice(0, file.length - path.extname(file).length)),
-      file,
-    ])
+  sync('src/**/*.{ts,tsx}').map((file) => [
+    path.relative('src', file.slice(0, file.length - path.extname(file).length)),
+    file,
+  ])
 );
 
 // eslint-disable-next-line
@@ -45,9 +43,7 @@ export default defineConfig({
   },
   plugins: [
     compileStyledComponentsPlugin(STYLED_PLACEHOLDER),
-    vue({
-      reactivityTransform: true,
-    }),
+    vue(),
     vueJsx(),
     dts({
       include: ['src'],

scripts/build/vite.config.umd.ts

@@ -29,13 +29,7 @@ export default defineConfig({
       },
     },
   },
-  plugins: [
-    compileStyledComponentsPlugin(STYLED_PLACEHOLDER),
-    vue({
-      reactivityTransform: true,
-    }),
-    vueJsx(),
-  ],
+  plugins: [compileStyledComponentsPlugin(STYLED_PLACEHOLDER), vue(), vueJsx()],
   define: {
     __STYLED_PLACEHOLDER__: `"${STYLED_PLACEHOLDER}"`,
   },

scripts/dev/vite.config.ts

@@ -11,13 +11,7 @@ export default defineConfig({
   server: {
     open: true,
   },
-  plugins: [
-    compileStyledComponentsPlugin(STYLED_PLACEHOLDER),
-    vue({
-      reactivityTransform: true,
-    }),
-    vueJsx(),
-  ],
+  plugins: [compileStyledComponentsPlugin(STYLED_PLACEHOLDER), vue(), vueJsx()],
   define: {
     __STYLED_PLACEHOLDER__: `"${STYLED_PLACEHOLDER}"`,
   },

scripts/plugins/compileStyledComponentsPlugin.ts

@@ -21,27 +21,27 @@ export function compileStyledComponentsPlugin(styledPlaceholder: string) {
   return {
     name: 'compileStyledComponentsPlugin',
 
-    async transform(content, id) {
+    async transform(content: any, id: any) {
       if (!/tsx$/.test(id)) {
         return;
       }
 
       const source = project.getSourceFile(id);
 
       if (fileMap.has(id) && fileMap.get(id) !== content) {
-        source.refreshFromFileSystemSync();
+        source!.refreshFromFileSystemSync();
       }
       fileMap.set(id, content);
 
       const needTransformNode: NoSubstitutionTemplateLiteral[] = [];
 
-      source.forEachDescendant((node) => {
+      source!.forEachDescendant((node) => {
         if (!node.isKind(SyntaxKind.NoSubstitutionTemplateLiteral)) {
           return;
         }
 
         const isStyledTemplate = node.getParentIf((parent) =>
-          parent.getChildAtIndex(0).getFullText().trim().startsWith('styled')
+          parent!.getChildAtIndex(0).getFullText().trim().startsWith('styled')
         );
         if (!isStyledTemplate) {
           return;
@@ -70,7 +70,7 @@ export function compileStyledComponentsPlugin(styledPlaceholder: string) {
       );
 
       return {
-        code: source.getFullText(),
+        code: source!.getFullText(),
         map: null,
       };
     },

scripts/release/version-generator.ts

@@ -22,7 +22,7 @@ if (!validVersionType.includes(type as VersionType)) {
   process.exit(1);
 }
 
-const VersionGenerateMap: Record<VersionType, (version: SemVer) => SemVer> = {
+const VersionGenerateMap: Record<string, (version: SemVer) => SemVer> = {
   [VersionType.TEST]: (version: SemVer) => {
     version.prerelease = ['test', Date.now()];
     return version;
@@ -36,7 +36,9 @@ async function versionGenerator() {
     (res) => res.map((r) => JSON.parse(r.toString()))
   );
 
-  pkg.version = VersionGenerateMap[type](semver.parse(pkg.version)).format();
+  if (type) {
+    pkg.version = VersionGenerateMap[type](semver.parse(pkg.version)!).format();
+  }
 
   const pkgJsonStr = prettier.format(JSON.stringify(pkg), {
     parser: 'json-stringify',

src/components/decoration-12/index.tsx

@@ -32,7 +32,7 @@ const sectorAngle = Math.PI / 3;
 const ringNum = 3;
 const ringWidth = 1;
 
-const calcPathColor = (color, segment) => {
+const calcPathColor = (color: string, segment: number) => {
   const colorGap = 100 / (segment - 1);
 
   return new Array(segment).fill(color).map((_, i) => fade(color, 100 - i * colorGap));
@@ -52,7 +52,7 @@ function createDecoration12Props() {
   };
 }
 
-const getCircleRadianPoint = (x, y, radius, radian) => {
+const getCircleRadianPoint = (x: number, y: number, radius: number, radian: number) => {
   return [x + Math.cos(radian) * radius, y + Math.sin(radian) * radius];
 };
 
@@ -75,8 +75,8 @@ const calcPathD = ({
   let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle);
 
   return new Array(segment).fill('').map((_, i) => {
-    const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map((_) =>
-      _.toFixed(5)
+    const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(
+      (_) => +_.toFixed(5)
     );
     const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`;
     lastEndPoints = endPoints;

src/components/decoration-2/index.tsx

@@ -15,7 +15,7 @@ function createDecoration2Props() {
   };
 }
 
-function calcSVGData(reverse, width, height) {
+function calcSVGData(reverse: boolean, width: number, height: number) {
   if (reverse) {
     return {
       width: 1,