[refactor] upgrade to WebCell v3, CellRouter v3 & BootCell v2

[optimize] upgrade Upstream packages

.gitignore

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

.parcelrc

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

package.json

@@ -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.5",
     "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.7",
+    "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.2.1",
+    "postcss-modules": "^4.3.0",
+    "prettier": "^3.2.4",
+    "typescript": "~5.3.3",
+    "workbox-cli": "^7.0.0"
   }
 }

source/component/FilterLink.tsx

@@ -1,6 +1,5 @@
-import { createCell } from 'web-cell';
-
-import { BadgeProps, Badge } from 'boot-cell/source/Reminder/Badge';
+import { FC } from 'web-cell';
+import { Badge, BadgeProps } from 'boot-cell';
 
 export interface FilterLinkProps extends BadgeProps {
   type?: 'anchor' | 'badge';
@@ -9,18 +8,18 @@ export interface FilterLinkProps extends BadgeProps {
   value: any;
 }
 
-export function FilterLink({
+export const FilterLink: FC<FilterLinkProps> = ({
   type = 'anchor',
   filter,
   value,
-  defaultSlot,
+  children,
   ...rest
-}: FilterLinkProps) {
+}) => {
   const Link = type === 'anchor' ? 'a' : Badge;
 
   return (
-    <Link {...rest} href={`proposals?${filter}=${value}`}>
-      {defaultSlot[0] ? defaultSlot : value}
+    <Link {...rest} href={`#proposals?${filter}=${value}`}>
+      {children}
     </Link>
   );
-}
+};

source/global.d.ts

@@ -1,4 +1,12 @@
-declare module '*.less' {
+declare module '*.module.css' {
   const map: Record<string, string>;
-  export default map;
+  export = map;
+}
+declare module '*.module.less' {
+  const map: Record<string, string>;
+  export = map;
+}
+
+declare module 'browser-unhandled-rejection' {
+  export function auto(): any;
 }

source/index.html

@@ -14,14 +14,15 @@
     <script src="https://polyfill.kaiyuanshe.cn/feature/PWAManifest.js"></script>
     <link
       rel="stylesheet"
-      href="https://unpkg.com/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+      href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
     />
+    <link rel="stylesheet" href="index.less" />
     <script src="https://polyfill.kaiyuanshe.cn/feature/ECMAScript.js"></script>
     <script src="https://polyfill.kaiyuanshe.cn/feature/Regenerator.js"></script>
-    <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
-    <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
+    <script src="https://polyfill.kaiyuanshe.cn/feature/WebComponents.js"></script>
+    <script src="https://polyfill.kaiyuanshe.cn/feature/ElementInternals.js"></script>
 
-    <script src="index.tsx" async></script>
+    <script type="module" src="index.tsx" async></script>
   </head>
   <body></body>
 </html>

source/index.less

@@ -0,0 +1,3 @@
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}

source/index.tsx

@@ -1,11 +1,14 @@
 import { auto } from 'browser-unhandled-rejection';
-import { serviceWorkerUpdate } from 'web-utility';
-import { documentReady, render, createCell } from 'web-cell';
+import { DOMRenderer } from 'dom-renderer';
+import { configure } from 'mobx';
+import { documentReady, serviceWorkerUpdate } from 'web-utility';
 
 import { PageFrame } from './page';
 
 auto();
 
+configure({ enforceActions: 'never' });
+
 self.addEventListener('unhandledrejection', event => {
   const { message } = event.reason;
 
@@ -31,4 +34,4 @@ serviceWorker?.addEventListener('controllerchange', () =>
   window.location.reload(),
 );
 
-documentReady.then(() => render(<PageFrame />));
+documentReady.then(() => new DOMRenderer().render(<PageFrame />));

source/model/Member.ts

@@ -2,22 +2,18 @@ import { observable } from 'mobx';
 
 import { service } from './service';
 
-export interface Member {
-  name: string;
-  username: string;
-  url: string;
-  avatar_url: string;
-  bio?: string;
-  location?: string;
-  company?: string;
-}
+export type Member = Record<
+  'name' | 'username' | 'url' | 'avatar_url',
+  string
+> &
+  Partial<Record<'bio' | 'location' | 'company', string>>;
 
 export class MemberModel {
   @observable
-  loading = false;
+  accessor loading = false;
 
   @observable
-  list: Member[] = [];
+  accessor list: Member[] = [];
 
   async getList() {
     this.loading = true;

source/model/Proposal.ts

@@ -1,70 +1,71 @@
 import { observable, reaction } from 'mobx';
 
 import { service } from './service';
+import { Member } from './Member';
 
-export interface Proposal {
+export interface Proposal
+  extends Pick<Member, 'name' | 'url'>,
+    Partial<
+      Record<
+        | 'id'
+        | `${'created' | 'pushed' | 'meeting'}_at`
+        | 'owner'
+        | 'repo'
+        | 'link'
+        | 'tests'
+        | 'rationale',
+        string
+      > &
+        Record<
+          | `${'stargazers' | 'watchers' | 'forks' | 'open_issues' | 'subscribers'}_count`
+          | 'edition',
+          number
+        >
+    >,
+    Record<'authors' | 'champions' | 'tags', string[]> {
   stage: number;
-  name: string;
-  url: string;
-  authors: string[];
-  champions: string[];
-  tests?: string;
   'has-specification': boolean;
-  notes?: { date: string, url: string }[];
-  // created_at?: string;
-  pushed_at?: string;
-  tags: string[];
-  rationale?: string;
-  edition?: number;
-  id?: string;
-  // repo?: string;
-  // owner?: string;
-  // forks_count?: number;
-  open_issues_count?: number;
-  stargazers_count?: number;
-  // subscribers_count?: number;
-  // watchers_count?: number;
+  notes?: Record<'date' | 'url', string>[];
 }
 
 export type ProposalSortKey =
   | 'stage'
   | 'name'
-  | 'stargazers_count'
-  | 'open_issues_count'
+  | `${'stargazers' | 'open_issues'}_count`
   | 'meeting_at';
 
 export class ProposalModel {
   @observable
-  loading = false;
+  accessor loading = false;
 
   @observable
-  list: Proposal[] = [];
+  accessor list: Proposal[] = [];
 
   @observable
-  sortKey: ProposalSortKey;
+  accessor sortKey: ProposalSortKey;
 
   @observable
-  finishedList: Proposal[] = [];
+  accessor finishedList: Proposal[] = [];
 
   constructor() {
     reaction(
       () => this.sortKey,
-      key => this.sortBy(key)
+      key => this.sortBy(key),
     );
   }
 
   async getList() {
     this.loading = true;
 
     const { body } = await service.get<Proposal[]>(
-      'dataset/proposals.min.json'
+      'dataset/proposals.min.json',
     );
     const [finished, processing] = body
       .map(({ tags, authors, champions, ...rest }) => ({
         tags,
         authors,
         champions: tags.includes('co-champion') ? authors : champions,
-        ...rest
+        ...rest,
       }))
       .reduce(
         ([finished, processing], proposal) => {
@@ -73,7 +74,7 @@ export class ProposalModel {
 
           return [finished, processing];
         },
-        [[], []] as Proposal[][]
+        [[], []] as Proposal[][],
       );
 
     this.loading = false;
@@ -92,7 +93,7 @@ export class ProposalModel {
           default:
             return key.endsWith('_at') ? +new Date(B) - +new Date(A) : 0;
         }
-      }
+      },
     ));
   }
 }

source/model/index.ts

@@ -1,11 +1,8 @@
-import { History } from 'cell-router/source';
-
 import { ProposalModel } from './Proposal';
 import { MemberModel } from './Member';
 
 export * from './Proposal';
 export * from './Member';
 
-export const history = new History();
 export const proposal = new ProposalModel();
 export const member = new MemberModel();