[optimize] support Async Rendering mode

[optimize] update Upstream packages

Author: TechQuery

package.json

@@ -2,38 +2,42 @@
     "name": "bootcell-document",
     "version": "2.0.0",
     "description": "Re-implemented Official Document site of Bootstrap & FontAwesome based on WebCell, BootCell & Parcel",
+    "engines": {
+        "node": ">=20"
+    },
     "dependencies": {
         "boot-cell": "^2.0.0-beta.29",
-        "cell-router": "^3.0.0-rc.8",
+        "cell-router": "^3.0.1",
         "classnames": "^2.5.1",
-        "dom-renderer": "^2.4.2",
-        "github-web-widget": "^4.0.0-rc.2",
+        "dom-renderer": "^2.6.0",
+        "github-web-widget": "^4.0.0",
         "iterable-observer": "^1.1.0",
         "mobx": "^6.13.5",
-        "mobx-github": "^0.3.4",
-        "web-cell": "^3.0.0",
+        "mobx-github": "^0.3.5",
+        "web-cell": "^3.0.3",
         "web-utility": "^4.4.2"
     },
     "devDependencies": {
-        "@parcel/config-default": "~2.12.0",
-        "@parcel/packager-raw-url": "~2.12.0",
-        "@parcel/transformer-less": "~2.12.0",
-        "@parcel/transformer-typescript-tsc": "~2.12.0",
-        "@parcel/transformer-webmanifest": "~2.12.0",
+        "@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",
         "@types/mdx": "^2.0.13",
         "@types/node": "^20.17.6",
         "fs-match": "^1.7.2",
-        "husky": "^9.1.6",
+        "husky": "^9.1.7",
         "lint-staged": "^15.2.10",
-        "parcel": "~2.12.0",
+        "parcel": "~2.13.0",
         "parcel-transformer-mdx": "^0.4.2",
-        "postcss": "^8.4.47",
-        "postcss-modules": "^4.3.1",
+        "postcss": "^8.4.49",
+        "postcss-modules": "^6.0.1",
         "prettier": "^3.3.3",
+        "svgo": "^3.3.2",
         "tsx": "^4.19.2",
         "typescript": "~5.6.3",
         "workbox-cli": "^7.3.0",
-        "yaml": "^2.6.0"
+        "yaml": "^2.6.1"
     },
     "prettier": {
         "singleQuote": true,
@@ -44,6 +48,7 @@
     "lint-staged": {
         "*.{html,md,mdx,less,json,yml,ts,tsx}": "prettier --write"
     },
+    "browserslist": "> 0.5%, last 2 versions, not dead, IE 11",
     "scripts": {
         "prepare": "husky  &&  npm run clean",
         "test": "lint-staged",

pnpm-lock.yaml

@@ -1,10 +1,12 @@
 import { component, observer, on } from 'web-cell';
 
+import { renderMode } from '../model/Meta';
 import './CodeCopy.less';
 
 @component({
     tagName: 'code-copy',
-    mode: 'open'
+    mode: 'open',
+    renderMode
 })
 @observer
 export class CodeCopy extends HTMLElement {

source/component/CodeCopy.tsx

@@ -3,13 +3,15 @@ import { watchScroll } from 'web-utility';
 import { observable } from 'mobx';
 import classNames from 'classnames';
 
+import { renderMode } from '../model/Meta';
 import * as style from './NavArticle.module.less';
 
 export interface NavArticle extends WebCell {}
 
 @component({
     tagName: 'nav-article',
-    mode: 'open'
+    mode: 'open',
+    renderMode
 })
 @observer
 export class NavArticle extends HTMLElement implements WebCell {

source/component/NavArticle.tsx

@@ -19,7 +19,7 @@ export interface PageFrameProps {
 
 export const PageFrame: FC<PropsWithChildren<PageFrameProps>> = observer(
     ({ menu, activeIndex, subMenu, children }) => (
-        <>
+        <div>
             <OffcanvasNavbar
                 brand={
                     <a
@@ -83,6 +83,6 @@ export const PageFrame: FC<PropsWithChildren<PageFrameProps>> = observer(
                     Parcel v2
                 </a>
             </footer>
-        </>
+        </div>
     )
 );

source/component/PageBox.tsx

@@ -2,6 +2,7 @@ import { documentReady, serviceWorkerUpdate } from 'web-utility';
 import { DOMRenderer } from 'dom-renderer';
 import { configure } from 'mobx';
 
+import { renderMode } from './model/Meta';
 import { PageRouter } from './page';
 
 configure({ enforceActions: 'never' });
@@ -25,4 +26,6 @@ serviceWorker?.addEventListener('controllerchange', () =>
     window.location.reload()
 );
 
-documentReady.then(() => new DOMRenderer().render(<PageRouter />));
+documentReady.then(() =>
+    new DOMRenderer().render(<PageRouter />, document.body, renderMode)
+);

source/index.tsx

@@ -1,4 +1,9 @@
 import { observable } from 'mobx';
+import { parseURLData } from 'web-utility';
+
+export const { renderMode = 'sync' } = parseURLData() as {
+    renderMode?: 'sync';
+};
 
 export class MetaModel {
     @observable

source/model/Meta.ts

@@ -20,10 +20,12 @@ import * as style from './index.module.less';
 
 import { headers, banners, features } from './data';
 import { repository } from '../../../model';
+import { renderMode } from '../../../model/Meta';
 
 @observer
 @component({
-    tagName: 'carousel-page'
+    tagName: 'carousel-page',
+    renderMode
 })
 export default class CarouselPage extends HTMLElement implements CustomElement {
     connectedCallback() {

source/page/Example/Carousel/index.tsx

@@ -15,10 +15,12 @@ import { CustomElement } from 'web-utility';
 import { GitRepository } from 'mobx-github';
 
 import { repository } from '../../model/';
+import { renderMode } from '../../model/Meta';
 
 @observer
 @component({
-    tagName: 'jumbotron-page'
+    tagName: 'jumbotron-page',
+    renderMode
 })
 export default class JumbotronPage
     extends HTMLElement

source/page/Example/Jumbotron.tsx

@@ -43,7 +43,7 @@
                 "image": "https://getbootstrap.com/docs/4.5/assets/img/examples/dashboard.png",
                 "title": "Dashboard",
                 "description": "Basic admin dashboard shell with fixed sidebar and navbar.",
-                "href": "https://web-cell-dashboard.vercel.app/#admin"
+                "href": "https://web-cell.dev/WebCell-dashboard/#admin"
             },
             {
                 "image": "https://getbootstrap.com/docs/4.5/assets/img/examples/sign-in.png",
@@ -117,7 +117,7 @@
                 "image": "https://getbootstrap.com/docs/4.5/assets/img/examples/floating-labels.png",
                 "title": "Floating labels",
                 "description": "Beautifully simple forms with floating labels over your inputs.",
-                "href": "https://web-cell-dashboard.vercel.app/"
+                "href": "https://web-cell.dev/WebCell-dashboard/"
             },
             {
                 "image": "https://getbootstrap.com/docs/4.5/assets/img/examples/offcanvas.png",