[refactor] upgrade to WebCell v3, CellRouter v3 & BootCell v2 (#10)

* [refactor] upgrade to WebCell v3, CellRouter v3 & BootCell v2
[optimize] upgrade Upstream packages

* [add] GitHub actions of Vercel preview
[add] Web Polyfill service links
[migrate] replace NPM with PNPM to reduce Disk Usage

Author: TechQuery

.github/workflows/main.yml

@@ -5,21 +5,40 @@ on:
       - master
 jobs:
   Build-and-Deploy:
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: '14'
-      - name: Install & build
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+      - name: Install & Build
         run: |
-          npm install
-          npm run build
-      - name: Deploy
+          pnpm i --frozen-lockfile
+          pnpm build
+
+      - name: Deploy to GitHub pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           publish_dir: ./dist
           personal_token: ${{ secrets.GITHUB_TOKEN }}
           force_orphan: true
+
+      - name: Deploy to Vercel
+        uses: amondnet/vercel-action@v25
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          working-directory: ./dist
+          vercel-args: --prod

.github/workflows/push.yml

@@ -0,0 +1,35 @@
+name: Commit preview
+on:
+  push:
+    branches-ignore:
+      - master
+jobs:
+  Build-and-Deploy:
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+      - name: Install & Build
+        run: |
+          pnpm i --frozen-lockfile
+          pnpm build
+
+      - uses: amondnet/vercel-action@v25
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          working-directory: ./dist

.gitignore

@@ -1,4 +1,4 @@
-/.cache
+/.parcel-cache
 /dist
 /node_modules
 package-lock.json

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = false

.parcelrc

@@ -0,0 +1,8 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": [
+            "@parcel/transformer-typescript-tsc"
+        ]
+    }
+}

.postcssrc

@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "files.associations": {
     ".huskyrc": "json",

.vscode/settings.json

@@ -1,7 +1,6 @@
 # JavaScript Chinese Interest Group
 
-[![NPM Dependency](https://david-dm.org/JSCIG/jscig.github.io.svg)][1]
-[![CI & CD](https://github.com/JSCIG/jscig.github.io/workflows/CI%20&%20CD/badge.svg)][2]
+[![CI & CD](https://github.com/JSCIG/jscig.github.io/actions/workflows/main.yml/badge.svg)][2]
 
 JavaScript 中文讨论组致力于提供一个加强中国 JavaScript 社区对 JavaScript 语言标准（ECMAScript）工作的参与的平台。
 
@@ -13,14 +12,15 @@ JavaScript 中文讨论组致力于提供一个加强中国 JavaScript 社区对
 
 ## 官网开发
 
-本网站是一个基于 [WebCell v2](https://web-cell.dev) 的纯 Web 前端项目，参与开发的基本命令如下：
+本网站是一个基于 [WebCell v3](https://web-cell.dev) 的纯 Web 前端项目，参与开发的基本命令如下：
 
 ```bash
 git clone https://github.com/JSCIG/jscig.github.io
 cd jscig.github.io
-npm install
+
+npm i pnpm -g
+pnpm i
 npm start
 ```
 
-[1]: https://david-dm.org/JSCIG/jscig.github.io
-[2]: https://github.com/JSCIG/jscig.github.io/actions
+[2]: https://github.com/JSCIG/jscig.github.io/actions/workflows/main.yml

README.md

@@ -1,43 +1,46 @@
 {
   "name": "@jscig/official",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "description": "Official Web site of JavaScript Chinese Interest Group",
   "homepage": "https://jscig.github.io/",
   "repository": "https://github.com/JSCIG/jscig.github.io",
   "license": "UNLICENSED",
   "author": "JSCIG",
-  "main": "source/index.html",
   "scripts": {
     "prepare": "husky install",
-    "build": "rm -rf dist && npm run pack-dist && npm run pack-sw",
-    "pack-dist": "parcel build source/index.html --public-url .",
+    "clean": "rm -rf .parcel-cache/ dist/",
+    "build": "npm run pack-dist && npm run pack-sw",
+    "pack-dist": "npm run clean && parcel build source/index.html --public-url .",
     "pack-sw": "rm -f dist/sw.js.map && workbox generateSW",
-    "start": "parcel source/index.html --open",
+    "start": "npm run clean && parcel source/index.html --open",
     "test": "lint-staged"
   },
   "dependencies": {
-    "boot-cell": "^1.9.5",
+    "boot-cell": "^2.0.0-beta.7",
     "browser-unhandled-rejection": "^1.0.2",
-    "cell-router": "^2.0.4",
-    "classnames": "^2.3.1",
-    "koajax": "^0.7.0",
-    "mobx": "^5.15.7",
-    "mobx-web-cell": "^0.3.5",
-    "web-cell": "^2.3.0",
-    "web-utility": "^2.6.2"
+    "cell-router": "^3.0.0-rc.5",
+    "classnames": "^2.5.1",
+    "dom-renderer": "^2.0.6",
+    "koajax": "^0.9.6",
+    "mobx": "^6.12.0",
+    "web-cell": "^3.0.0-rc.8",
+    "web-utility": "^4.1.3"
   },
   "devDependencies": {
-    "@types/classnames": "^2.3.1",
-    "@types/node": "^14.17.9",
-    "autoprefixer": "^9.8.6",
-    "husky": "^7.0.1",
-    "less": "^4.1.1",
-    "lint-staged": "^11.1.2",
-    "parcel-bundler": "^1.12.5",
-    "postcss-modules": "^3.2.2",
-    "prettier": "^2.3.2",
-    "typescript": "^4.3.5",
-    "workbox-cli": "^6.2.2"
+    "@parcel/config-default": "~2.11.0",
+    "@parcel/packager-raw-url": "~2.11.0",
+    "@parcel/transformer-less": "2.11.0",
+    "@parcel/transformer-typescript-tsc": "~2.11.0",
+    "@parcel/transformer-webmanifest": "~2.11.0",
+    "@types/node": "^18.19.8",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.2.0",
+    "parcel": "~2.11.0",
+    "postcss": "^8.4.33",
+    "postcss-modules": "^4.3.1",
+    "prettier": "^3.2.4",
+    "typescript": "~5.3.3",
+    "workbox-cli": "^7.0.0"
   }
 }