[refactor] upgrade to ES Decorator stage-3, Node.js 20, Taro 4, MobX 6, ESLint 9 & other latest Upstream packages/actions

.github/workflows/init-template.yml

@@ -10,6 +10,9 @@ env:
 jobs:
   replace-repository-name:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      actions: write
     steps:
       - uses: actions/checkout@v4
 
@@ -18,7 +21,7 @@ jobs:
           sh .github/workflows/replace-repository-name.sh \
             ${{ env.TEMPLATE_OWNER }} ${{ env.TEMPLATE_NAME }} \
             ${{ github.repository_owner }} ${{ github.event.repository.name }}
-          rm -f .github/workflows/init-template.yml
+          git checkout -- .github/workflows/init-template.yml
 
       - uses: stefanzweifel/git-auto-commit-action@v5
         with:

.github/workflows/main.yml

@@ -14,14 +14,14 @@ jobs:
       VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
       WMA_ID: ${{ secrets.WMA_ID }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
           version: 9
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
       - name: Install Dependencies
         run: pnpm i --frozen-lockfile
@@ -34,7 +34,7 @@ jobs:
 
       - name: Deploy HTML 5 version to GitHub pages
         if: ${{ !env.WMA_ID }}
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           publish_dir: ./dist
           personal_token: ${{ secrets.GITHUB_TOKEN }}
@@ -64,7 +64,7 @@ jobs:
 
       - name: Upload Artifact
         if: ${{ env.WMA_ID }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: Taro-miniapp-${{ steps.package-version.outputs.current-version }}-bundle
           path: ./dist/

.github/workflows/pull-request.yml

@@ -13,16 +13,16 @@ jobs:
       VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
       VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
         with:
           version: 9
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
       - name: Install Dependencies
         if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}

.github/workflows/replace-repository-name.sh

@@ -7,5 +7,7 @@ TargetName=$4
 
 sed -i "s/$SourceOwner\/$SourceName/$TargetOwner\/$TargetName/ig" \
     $(grep -i $SourceOwner/$SourceName -rl . --exclude-dir=.git --exclude-dir=node_modules)
+sed -i "s/$SourceOwner/$TargetOwner/ig" \
+    $(grep -i $SourceOwner -rl . --exclude-dir=.git --exclude-dir=node_modules)
 sed -i "s/$SourceName/$TargetName/ig" \
     $(grep -i $SourceName -rl . --exclude-dir=.git --exclude-dir=node_modules)

.gitignore

@@ -3,4 +3,5 @@ package-lock.json
 yarn.lock
 .swc/
 dist/
+.vscode/settings.json
 .vercel

ReadMe.md

@@ -15,7 +15,7 @@ https://idea2app.github.io/Taro-Vant-MobX-ts/
 
 - Language: [TypeScript v5][2]
 - Component engine: [Preact v10][3]
-- State management: [MobX v4][4]
+- State management: [MobX v6][4]
 - Component suite: [AntM Vant UI v3][5] + [Bootstrap v5 (CSS utility)][9]
 - CI / CD: GitHub [Actions][10] + [Pages][11]
 

babel.config.js

@@ -6,11 +6,15 @@ module.exports = {
       'taro',
       {
         framework: 'preact',
-        ts: true
+        ts: true,
+        decoratorsBeforeExport: true,
+        decoratorsLegacy: false
       }
     ]
   ],
   plugins: [
+    // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
+    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
     [
       'import',
       {

eslint.config.mjs

@@ -0,0 +1,74 @@
+// @ts-check
+import { fixupPluginRules } from '@eslint/compat';
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import reactPlugin from 'eslint-plugin-react';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
+import { fileURLToPath } from 'url';
+
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url));
+
+export default tsEslint.config(
+  // register all of the plugins up-front
+  {
+    plugins: {
+      '@typescript-eslint': tsEslint.plugin,
+      // @ts-expect-error https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
+      react: fixupPluginRules(reactPlugin),
+      'simple-import-sort': simpleImportSortPlugin
+    }
+  },
+  {
+    // config with just ignores is the replacement for `.eslintignore`
+    ignores: ['**/node_modules/**', '**/dist/**']
+  },
+
+  // extends ...
+  eslint.configs.recommended,
+  ...tsEslint.configs.recommended,
+
+  // base config
+  {
+    languageOptions: {
+      globals: { ...globals.es2020, ...globals.browser, ...globals.node },
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir,
+        warnOnUnsupportedTypeScriptVersion: false
+      }
+    },
+    rules: {
+      'no-empty-pattern': 'warn',
+      'simple-import-sort/exports': 'error',
+      'simple-import-sort/imports': 'error',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unsafe-declaration-merging': 'warn',
+      'react/jsx-no-target-blank': 'warn',
+      'react/jsx-sort-props': [
+        'error',
+        {
+          reservedFirst: true,
+          callbacksLast: true,
+          noSortAlphabetically: true
+        }
+      ]
+    }
+  },
+  {
+    files: ['**/*.js'],
+    extends: [tsEslint.configs.disableTypeChecked],
+    rules: {
+      // turn off other type-aware rules
+      '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',
+
+      // turn off rules that don't apply to JS code
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-require-imports': 'warn'
+    }
+  },
+  eslintConfigPrettier
+);

package.json

@@ -21,66 +21,74 @@
     "ios >= 8"
   ],
   "dependencies": {
-    "@antmjs/vantui": "^3.4.4",
-    "@babel/runtime": "^7.24.7",
-    "@tarojs/components": "3.6.32",
-    "@tarojs/helper": "3.6.32",
-    "@tarojs/plugin-framework-react": "3.6.32",
-    "@tarojs/plugin-html": "3.6.32",
-    "@tarojs/plugin-http": "3.6.32",
-    "@tarojs/plugin-platform-alipay": "3.6.32",
-    "@tarojs/plugin-platform-h5": "3.6.32",
-    "@tarojs/plugin-platform-jd": "3.6.32",
-    "@tarojs/plugin-platform-qq": "3.6.32",
-    "@tarojs/plugin-platform-swan": "3.6.32",
-    "@tarojs/plugin-platform-tt": "3.6.32",
-    "@tarojs/plugin-platform-weapp": "3.6.32",
-    "@tarojs/react": "3.6.32",
-    "@tarojs/runtime": "3.6.32",
-    "@tarojs/shared": "3.6.32",
-    "@tarojs/taro": "3.6.32",
-    "@vant/area-data": "^1.5.1",
+    "@antmjs/vantui": "^3.5.1",
+    "@babel/runtime": "^7.26.0",
+    "@tarojs/components": "4.0.7",
+    "@tarojs/helper": "4.0.7",
+    "@tarojs/plugin-framework-react": "4.0.7",
+    "@tarojs/plugin-html": "4.0.7",
+    "@tarojs/plugin-http": "4.0.7",
+    "@tarojs/plugin-platform-alipay": "4.0.7",
+    "@tarojs/plugin-platform-h5": "4.0.7",
+    "@tarojs/plugin-platform-jd": "4.0.7",
+    "@tarojs/plugin-platform-qq": "4.0.7",
+    "@tarojs/plugin-platform-swan": "4.0.7",
+    "@tarojs/plugin-platform-tt": "4.0.7",
+    "@tarojs/plugin-platform-weapp": "4.0.7",
+    "@tarojs/react": "4.0.7",
+    "@tarojs/runtime": "4.0.7",
+    "@tarojs/shared": "4.0.7",
+    "@tarojs/taro": "4.0.7",
+    "@vant/area-data": "^2.0.0",
     "@vant/icons": "^3.0.2",
     "bootstrap": "^5.3.3",
     "classnames": "^2.5.1",
-    "koajax": "^1.1.2",
+    "koajax": "^3.0.2",
     "lodash.debounce": "^4.0.8",
-    "mobx": "^4.15.7",
-    "mobx-i18n": "^0.4.2",
-    "mobx-react": "^6.3.1",
-    "mobx-restful": "^0.6.12",
-    "preact": "^10.22.0",
-    "query-string": "^9.0.0",
-    "web-utility": "^4.4.0"
+    "mobx": "^6.13.5",
+    "mobx-github": "^0.3.4",
+    "mobx-i18n": "^0.6.0",
+    "mobx-react": "^9.1.1",
+    "mobx-restful": "^1.0.1",
+    "preact": "~10.23.2",
+    "query-string": "^9.1.1",
+    "web-utility": "^4.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
+    "@eslint/compat": "^1.2.1",
     "@octokit/openapi-types": "^22.2.0",
     "@prefresh/babel-plugin": "^0.5.1",
     "@prefresh/core": "^1.5.2",
     "@prefresh/webpack": "~4.0.1",
-    "@tarojs/cli": "3.6.32",
-    "@tarojs/webpack5-runner": "3.6.32",
+    "@tarojs/cli": "4.0.7",
+    "@tarojs/webpack5-runner": "4.0.7",
+    "@types/eslint-config-prettier": "^6.11.3",
+    "@types/eslint__js": "^8.42.3",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.12",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
     "babel-plugin-import": "^1.13.8",
-    "babel-preset-taro": "3.6.32",
+    "babel-preset-taro": "4.0.7",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-taro": "3.6.32",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2",
-    "stylelint": "^16.6.1",
-    "typescript": "~5.5.2",
-    "webpack": "~5.92.1"
+    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "stylelint": "^16.10.0",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.11.0",
+    "webpack": "~5.95.0"
+  },
+  "resolutions": {
+    "native-file-system-adapter": "npm:@tech_query/native-file-system-adapter@^3.0.3"
   },
   "prettier": {
     "trailingComma": "none",
@@ -90,6 +98,6 @@
   },
   "lint-staged": {
     "*.{md,js,ts,tsx,json,yml}": "prettier --write",
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
+    "*.{js,ts,tsx}": "eslint --fix"
   }
 }