[optimize] support Async Rendering mode

[optimize] update Upstream packages

Author: TechQuery

.github/workflows/update-meta.yml

@@ -33,4 +33,4 @@ jobs:
                   [[ "$TOPICS" ]]  &&  {
                     gh api --method PUT "repos/$REPOSITORY/topics" -f "names[]"
                     gh repo edit "$REPOSITORY" --add-topic "$TOPICS"
-                  } || true
+                  }

package.json

@@ -13,25 +13,25 @@
     },
     "dependencies": {
         "browser-unhandled-rejection": "^1.0.2",
-        "cell-router": "^3.0.0-rc.8",
-        "dom-renderer": "^2.4.2",
+        "cell-router": "^3.0.1",
+        "dom-renderer": "^2.6.0",
         "koajax": "^3.0.3",
         "mdui": "^2.1.3",
         "mobx": "^6.13.5",
-        "web-cell": "^3.0.0",
+        "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-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-typescript-tsc": "~2.13.0",
+        "@parcel/transformer-webmanifest": "~2.13.0",
         "@softonus/prettier-plugin-duplicate-remover": "^1.0.1",
         "@types/node": "^20.17.6",
-        "husky": "^9.1.6",
+        "husky": "^9.1.7",
         "lint-staged": "^15.2.10",
-        "parcel": "~2.12.0",
-        "postcss": "^8.4.47",
+        "parcel": "~2.13.0",
+        "postcss": "^8.4.49",
         "prettier": "^3.3.3",
         "prettier-plugin-css-order": "^2.1.2",
         "typescript": "~5.6.3",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ import { DOMRenderer } from 'dom-renderer';
 import { configure } from 'mobx';
 
 import { PageBox } from './page';
+import { renderMode } from './utility';
 
 auto();
 
@@ -34,4 +35,6 @@ serviceWorker?.addEventListener('controllerchange', () =>
     window.location.reload()
 );
 
-documentReady.then(() => new DOMRenderer().render(<PageBox />));
+documentReady.then(() =>
+    new DOMRenderer().render(<PageBox />, document.body, renderMode)
+);

src/index.tsx

@@ -1,18 +1,19 @@
-import { WebCell, component, reaction, attribute, observer } from 'web-cell';
 import { observable } from 'mobx';
+import { WebCell, attribute, component, observer, reaction } from 'web-cell';
 
 import 'mdui/components/button';
 import 'mdui/components/card';
 
-import companyStore, { WorkType, Company } from '../model/Company';
+import companyStore, { Company, WorkType } from '../model/Company';
+import { renderMode } from '../utility';
 
 export interface CompanyListProps {
     type: WorkType;
 }
 
 export interface CompanyList extends WebCell<CompanyListProps> {}
 
-@component({ tagName: 'company-list' })
+@component({ tagName: 'company-list', renderMode })
 @observer
 export class CompanyList
     extends HTMLElement

src/page/CompanyList.tsx

@@ -1,19 +1,20 @@
-import { attribute, component, observer } from 'web-cell';
 import { createRouter } from 'cell-router';
 import { observable } from 'mobx';
+import { attribute, component, observer } from 'web-cell';
 
 import 'mdui/components/button-icon';
 import 'mdui/components/list';
 import 'mdui/components/list-item';
+import 'mdui/components/navigation-drawer';
 import 'mdui/components/top-app-bar';
 import 'mdui/components/top-app-bar-title';
-import 'mdui/components/navigation-drawer';
 
+import { renderMode } from '../utility';
 import { CompanyList } from './CompanyList';
 
 const { Route } = createRouter();
 
-@component({ tagName: 'page-box' })
+@component({ tagName: 'page-box', renderMode })
 @observer
 export class PageBox extends HTMLElement {
     @attribute

src/page/index.tsx

@@ -0,0 +1,5 @@
+import { parseURLData } from 'web-utility';
+
+export const { renderMode = 'sync' } = parseURLData() as {
+    renderMode?: 'sync';
+};