Skip to content

Commit

Permalink
[optimize] enable Async Render mode of DOM Renderer 2.5
Browse files Browse the repository at this point in the history
  • Loading branch information
TechQuery committed Nov 14, 2024
1 parent 05cbd58 commit b886207
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 23 deletions.
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
Expand All @@ -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",
Expand Down
26 changes: 16 additions & 10 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions preview/Clock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
reaction,
WebCell
} from '../source';
import { renderMode } from './utility';

class ClockModel {
@observable
Expand All @@ -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 {
Expand All @@ -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() {
Expand Down
7 changes: 6 additions & 1 deletion preview/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
3 changes: 3 additions & 0 deletions preview/utility.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { parseURLData } from 'web-utility';

export const { renderMode } = parseURLData() as { renderMode: 'sync' };
22 changes: 15 additions & 7 deletions source/WebCell.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DOMRenderer, JsxProps, VNode } from 'dom-renderer';
import { DOMRenderer, JsxProps, RenderMode, VNode } from 'dom-renderer';
import {
CustomElement,
delegate,
Expand All @@ -11,6 +11,7 @@ export interface ComponentMeta
Partial<ShadowRootInit> {
tagName: string;
transitible?: boolean;
renderMode?: RenderMode;
}

export type ClassComponent = CustomElementConstructor;
Expand Down Expand Up @@ -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?.();

Expand All @@ -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;
Expand Down

1 comment on commit b886207

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for web-cell ready!

✅ Preview
https://web-cell-henlizhrx-techquerys-projects.vercel.app

Built with commit b886207.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.