[optimize] enable Async Render mode of DOM Renderer 2.5

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.2",
+    "version": "3.0.3-rc.0",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -27,7 +27,7 @@
     "types": "dist/index.d.ts",
     "dependencies": {
         "@swc/helpers": "^0.5.15",
-        "dom-renderer": "^2.5.1",
+        "dom-renderer": "^2.5.2-rc.0",
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "web-utility": "^4.4.2"
@@ -38,7 +38,7 @@
         "jsdom": ">=23.1"
     },
     "devDependencies": {
-        "@eslint/compat": "^1.2.2",
+        "@eslint/compat": "^1.2.3",
         "@eslint/js": "^9.14.0",
         "@parcel/config-default": "~2.13.0",
         "@parcel/packager-ts": "~2.13.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ import {
     reaction,
     WebCell
 } from '../source';
+import { renderMode } from './utility';
 
 class ClockModel {
     @observable
@@ -35,7 +36,8 @@ export interface ClassClock extends WebCell {}
 
 @component({
     tagName: 'class-clock',
-    mode: 'open'
+    mode: 'open',
+    renderMode
 })
 @observer
 export class ClassClock extends HTMLElement implements WebCell {
@@ -46,7 +48,7 @@ export class ClassClock extends HTMLElement implements WebCell {
     private timer: number;
 
     connectedCallback() {
-        this.timer = setInterval(() => (this.time = new Date()), Second);
+        this.timer = window.setInterval(() => (this.time = new Date()), Second);
     }
 
     disconnectedCallback() {

preview/Clock.tsx

@@ -2,7 +2,12 @@ import { DOMRenderer } from 'dom-renderer';
 import { configure } from 'mobx';
 
 import { HomePage } from './Home';
+import { renderMode } from './utility';
 
 configure({ enforceActions: 'never' });
 
-new DOMRenderer().render(<HomePage />, document.querySelector('#app')!);
+new DOMRenderer().render(
+    <HomePage />,
+    document.querySelector('#app')!,
+    renderMode
+);

preview/index.tsx

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

preview/utility.ts

@@ -1,4 +1,4 @@
-import { DOMRenderer, JsxProps, VNode } from 'dom-renderer';
+import { DOMRenderer, JsxProps, RenderMode, VNode } from 'dom-renderer';
 import {
     CustomElement,
     delegate,
@@ -11,6 +11,7 @@ export interface ComponentMeta
         Partial<ShadowRootInit> {
     tagName: string;
     transitible?: boolean;
+    renderMode?: RenderMode;
 }
 
 export type ClassComponent = CustomElementConstructor;
@@ -102,6 +103,17 @@ export function component(meta: ComponentMeta) {
             declare render?: () => VNode;
             declare updatedCallback?: () => any;
 
+            protected updateDOM(content: VNode) {
+                const result = this.renderer.render(
+                    content,
+                    this.root,
+                    meta.renderMode as 'async'
+                );
+                return result instanceof Promise
+                    ? result.then(this.updatedCallback?.bind(this))
+                    : this.updatedCallback?.();
+            }
+
             async update() {
                 const vNode = this.render?.();
 
@@ -114,18 +126,14 @@ export function component(meta: ComponentMeta) {
                 );
                 if (!(content != null)) return;
 
-                const render = () => {
-                    this.renderer.render(content, this.root);
-                    this.updatedCallback?.();
-                };
                 if (
                     !meta.transitible ||
                     typeof document.startViewTransition !== 'function'
                 )
-                    return render();
+                    return this.updateDOM(content);
 
                 const { updateCallbackDone, finished } =
-                    document.startViewTransition(render);
+                    document.startViewTransition(() => this.updateDOM(content));
 
                 try {
                     await finished;