[fix] Mount & Update timing of Class components

EasyWebApp · Feb 8, 2024 · 642ac04 · 642ac04 · github-actions · Feb 8, 2024
1 parent b7efb95
commit 642ac04
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-rc.10",
+    "version": "3.0.0-rc.14",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",

diff --git a/source/WebCell.tsx b/source/WebCell.tsx
@@ -7,8 +7,6 @@ import {
     stringifyDOM
 } from 'web-utility';
 
-import { Defer } from './utility';
-
 export interface ComponentMeta
     extends ElementDefinitionOptions,
         Partial<ShadowRootInit> {
@@ -24,7 +22,7 @@ export interface WebCell<P = {}> extends CustomElement {
     internals: ElementInternals;
     renderer: DOMRenderer;
     root: ParentNode;
-    mounted: Defer;
+    mounted: boolean;
     update: () => void;
     /**
      * Called at DOM tree updated
@@ -64,7 +62,7 @@ export function component(meta: ComponentMeta) {
             get root(): ParentNode {
                 return this.internals.shadowRoot || this;
             }
-            mounted = new Defer();
+            mounted = false;
             declare mountedCallback?: () => any;
 
             constructor() {
@@ -75,8 +73,6 @@ export function component(meta: ComponentMeta) {
             }
 
             connectedCallback() {
-                this.update();
-
                 const { mode } = meta;
                 const renderChildren = !(mode != null);
 
@@ -93,8 +89,12 @@ export function component(meta: ComponentMeta) {
 
                 super['connectedCallback']?.();
 
-                this.mounted.promise.then(this.mountedCallback);
-                this.mounted.resolve();
+                if (this.mounted) return;
+
+                this.update();
+
+                this.mounted = true;
+                this.mountedCallback?.();
             }
 
             declare render?: () => VNode;
@@ -103,11 +103,18 @@ export function component(meta: ComponentMeta) {
             update() {
                 const vNode = this.render?.();
 
-                this.renderer.render(
-                    isEmpty(vNode) ? meta.mode ? <slot /> : <></> : vNode,
-                    this.root
+                const content = isEmpty(vNode) ? (
+                    meta.mode ? (
+                        <slot />
+                    ) : null
+                ) : (
+                    vNode
                 );
-                this.updatedCallback?.();
+
+                if (content != null) {
+                    this.renderer.render(content, this.root);
+                    this.updatedCallback?.();
+                }
             }
 
             disconnectedCallback() {