[migrate] upgrade to Cell-Router 4, MobX-GitHub 0.5, Node.js 22, PNPM 10, Lint-Staged 16 & other latest Upstream packages (#12)

Author: TechQuery

.github/workflows/main.yml

@@ -2,19 +2,25 @@ name: CI & CD
 on:
     push:
         branches:
-            - main
+            - '**'
 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
+        permissions:
+            contents: write
         steps:
             - uses: actions/checkout@v4
 
             - uses: pnpm/action-setup@v4
               with:
-                  version: 9
+                  version: 10
             - uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version: 22
                   cache: pnpm
             - name: Install & Build
               run: |
@@ -23,6 +29,7 @@ jobs:
 
             - name: Deploy to GitHub pages
               uses: peaceiris/actions-gh-pages@v4
+              if: github.ref == 'refs/heads/main'
               with:
                   publish_dir: ./dist
                   cname: bootstrap.web-cell.dev
@@ -31,10 +38,11 @@ jobs:
 
             - 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
+                  vercel-args: ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

.github/workflows/push.yml

@@ -30,7 +30,7 @@ console.time(title);
         sourceCode.push(`{
     path: '${path.replace(MDXPattern, '')}',
     ${meta},
-    component: lazy(loadMDX(() => import('./${path}')))
+    component: loadMDX(() => import('./${path}'))
 }`);
     }
 
@@ -39,8 +39,6 @@ console.time(title);
         `// This file is created by "${title}" script,
 // please don't edit it manually!
 
-import { lazy } from 'web-cell';
-
 import { loadMDX } from '../utility';
 
 export default [

create-index.ts

@@ -39,7 +39,7 @@ render(
             new Promise(resolve =>
                 setTimeout(
                     () =>
-                        resolve('https://web-cell.dev/WebCell-1.fb612fdb.png'),
+                        resolve('https://web-cell.dev/WebCell-0.a6336415.png'),
                     1000
                 )
             )
@@ -60,7 +60,7 @@ render(
             new Promise(resolve =>
                 setTimeout(
                     () =>
-                        resolve('https://web-cell.dev/WebCell-1.fb612fdb.png'),
+                        resolve('https://web-cell.dev/WebCell-0.a6336415.png'),
                     1000
                 )
             )

document/source/components/Form/HTMLEditor.mdx

@@ -30,7 +30,7 @@ You can **paste** or **drop** images into the editor, and **upload** them on `<f
         <FileUploader
             transport={() => ({
                 path: Promise.resolve(
-                    'https://web-cell.dev/WebCell-1.fb612fdb.png'
+                    'https://web-cell.dev/WebCell-0.a6336415.png'
                 )
             })}
         >
@@ -58,7 +58,7 @@ render(
         <FileUploader
             transport={() => ({
                 path: Promise.resolve(
-                    'https://web-cell.dev/WebCell-1.fb612fdb.png'
+                    'https://web-cell.dev/WebCell-0.a6336415.png'
                 )
             })}
         >

document/source/components/Form/MarkdownEditor.mdx

@@ -41,7 +41,7 @@ In addition to our [border-radius utilities][1], you can use `thumbnail` propert
 <Example>
     <Image
         thumbnail
-        src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
+        src="https://web-cell.dev/WebCell-0.a6336415.png"
         alt="Thumbnail image"
     />
 </Example>
@@ -53,7 +53,7 @@ import { Image } from 'boot-cell/source/Media/Image';
 render(
     <Image
         thumbnail
-        src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
+        src="https://web-cell.dev/WebCell-0.a6336415.png"
         alt="Thumbnail image"
     />
 );

document/source/components/Media/Image.mdx

@@ -22,10 +22,10 @@ import { Example } from '../../../../source/component/Example';
 
 Here’s what you need to know before getting started with the navbar:
 
--   Navbars and their contents are fluid by default.
--   Use our [spacing][1] and [flex][2] utility classes for controlling spacing and alignment within navbars.
--   Navbars are responsive by default, but you can easily modify them to change that.
--   Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `<NavBar />`. See the [display][3] utility class.
+- Navbars and their contents are fluid by default.
+- Use our [spacing][1] and [flex][2] utility classes for controlling spacing and alignment within navbars.
+- Navbars are responsive by default, but you can easily modify them to change that.
+- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `<NavBar />`. See the [display][3] utility class.
 
 In addition, `<NavBar />` uses [`ResizeObserver`][4] to detect **Viewport resizing**, so a polyfill may be required:
 
@@ -42,8 +42,8 @@ Read on for an example and list of supported sub-components.
 
 Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
 
--   `<Form inline />` for any form controls and actions.
--   `.navbar-text` for adding vertically centered strings of text.
+- `<Form inline />` for any form controls and actions.
+- `.navbar-text` for adding vertically centered strings of text.
 
 Here’s an example of all the sub-components included in a responsive light-themed navbar
 that automatically collapses at the `lg` (large) breakpoint.
@@ -160,7 +160,7 @@ Here are some examples to demonstrate.
         brand={
             <Image
                 style={{ width: '30px', height: '30px' }}
-                src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
+                src="https://web-cell.dev/WebCell-0.a6336415.png"
             />
         }
     />
@@ -171,7 +171,7 @@ Here are some examples to demonstrate.
                 <Image
                     className="d-inline-block align-top"
                     style={{ width: '30px', height: '30px' }}
-                    src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
+                    src="https://web-cell.dev/WebCell-0.a6336415.png"
                 />
                 BootCell
             </>
@@ -189,15 +189,15 @@ render(
         <NavBar brand={
             <Image
                 style={{ width: '30px', height: '30px' }}
-                src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
+                src="https://web-cell.dev/WebCell-0.a6336415.png"
             />
         } />
         <NavBar brand={
             <>
                 <Image
                     className="d-inline-block align-top"
                     style={{ width: '30px', height: '30px' }}
-                    src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
+                    src="https://web-cell.dev/WebCell-0.a6336415.png"
                 />
                 BootCell
             </>

document/source/components/Navigator/NavBar.mdx

@@ -6,38 +6,47 @@
         "node": ">=20"
     },
     "dependencies": {
-        "boot-cell": "^2.0.0-beta.29",
-        "cell-router": "^3.0.1",
+        "boot-cell": "^2.0.0-rc.19",
+        "cell-router": "^4.0.4",
         "classnames": "^2.5.1",
-        "dom-renderer": "^2.6.0",
+        "dom-renderer": "^2.6.2",
         "github-web-widget": "^4.0.0",
         "iterable-observer": "^1.1.0",
-        "mobx": "^6.13.5",
-        "mobx-github": "^0.3.5",
-        "web-cell": "^3.0.3",
-        "web-utility": "^4.4.2"
+        "mobx": "^6.15.0",
+        "mobx-github": "^0.5.1",
+        "web-cell": "^3.2.2",
+        "web-utility": "^4.6.1"
     },
     "devDependencies": {
-        "@parcel/config-default": "~2.13.0",
-        "@parcel/packager-raw-url": "~2.13.0",
-        "@parcel/transformer-less": "~2.13.0",
-        "@parcel/transformer-typescript-tsc": "~2.13.0",
-        "@parcel/transformer-webmanifest": "~2.13.0",
+        "@parcel/config-default": "~2.16.0",
+        "@parcel/packager-raw-url": "~2.16.0",
+        "@parcel/transformer-less": "~2.16.0",
+        "@parcel/transformer-typescript-tsc": "~2.16.0",
+        "@parcel/transformer-webmanifest": "~2.16.0",
         "@types/mdx": "^2.0.13",
-        "@types/node": "^20.17.6",
-        "fs-match": "^1.7.2",
+        "@types/node": "^22.18.6",
+        "fs-match": "^1.7.3",
         "husky": "^9.1.7",
-        "lint-staged": "^15.2.10",
-        "parcel": "~2.13.0",
+        "lint-staged": "^16.2.1",
+        "parcel": "~2.16.0",
         "parcel-transformer-mdx": "^0.4.2",
-        "postcss": "^8.4.49",
+        "postcss": "^8.5.6",
         "postcss-modules": "^6.0.1",
-        "prettier": "^3.3.3",
+        "prettier": "^3.6.2",
         "svgo": "^3.3.2",
-        "tsx": "^4.19.2",
-        "typescript": "~5.6.3",
+        "tsx": "^4.20.6",
+        "typescript": "~5.9.2",
         "workbox-cli": "^7.3.0",
-        "yaml": "^2.6.1"
+        "yaml": "^2.8.1"
+    },
+    "pnpm": {
+        "onlyBuiltDependencies": [
+            "@parcel/watcher",
+            "@swc/core",
+            "esbuild",
+            "lmdb",
+            "msgpackr-extract"
+        ]
     },
     "prettier": {
         "singleQuote": true,