[fix] Mount & Update timing of Class components

[optimize] update Document links & Upstream packages

Author: TechQuery

Migrating.md

@@ -105,7 +105,7 @@ import {
 }
 ```
 
-## control Render Target with Shadow DOM Mode option
+## control Render Target with Shadow DOM `mode` option
 
 ### render to `children`
 
@@ -144,7 +144,7 @@ import {
 
 ## move Shadow CSS injection into `render()`
 
-This makes **Shadow CSS** to react with the data of component instances.
+This makes **Shadow CSS** to react with Observable Data updating.
 
 ```diff
 +import { stringifyCSS } from 'web-utility';
@@ -180,9 +180,7 @@ import {
 }
 ```
 
-## rename some APIs
-
-[JSDoc's `@deprecated` hints][7] will lead your way to rename them:
+## replace some APIs
 
 1. `mixin()` => `HTMLElement` & its Sub-classes
 2. `mixinForm()` => `HTMLElement` & `@formField`
@@ -200,4 +198,3 @@ import {
 [4]: https://github.com/mobxjs/mobx/blob/mobx4and5/docs/refguide/observable-decorator.md
 [5]: https://github.com/mobxjs/mobx/blob/mobx4and5/docs/refguide/reaction.md
 [6]: https://github.com/EasyWebApp/WebCell/tree/v2/MobX
-[7]: https://jsdoc.app/tags-deprecated.html

ReadMe-zh.md

@@ -494,7 +494,7 @@ import 'web-cell/polyfill';
 -   [Element Internals][26]
 -   [CSS 变量][27]
 -   [ECMAScript 6+][28]
--   [TypeScript 5+][29]
+-   [TypeScript 5+][4]
 
 ## 生命周期钩子
 
@@ -524,7 +524,7 @@ import 'web-cell/polyfill';
 -   **UI 组件**
 
     -   [BootCell][44]（基于 **BootStrap v5**）
-    -   [Material Cell][45]（基于 **Material Design**）
+    -   [Material Web][45]（基于 **Material Design**）
     -   [GitHub Web Widget][46]
 
 -   **HTTP请求**：[KoAJAX][47]（基于 类**Koa** 中间件）
@@ -565,13 +565,12 @@ import 'web-cell/polyfill';
 [20]: https://facebook.github.io/jsx/
 [21]: https://parceljs.org/
 [22]: https://web-cell.dev/scaffold/
-[23]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
-[24]: https://developers.google.cn/web/fundamentals/web-components/customelements
-[25]: https://developers.google.cn/web/fundamentals/web-components/shadowdom
-[26]: https://web.dev/more-capable-form-controls/
-[27]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
+[23]: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components
+[24]: https://web.dev/articles/custom-elements-v1?hl=zh-cn
+[25]: https://web.dev/articles/shadowdom-v1?hl=zh-cn
+[26]: https://web.dev/articles/more-capable-form-controls?hl=zh-cn
+[27]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
 [28]: http://es6-features.org/
-[29]: https://www.typescriptlang.org/
 [30]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#connectedCallback
 [31]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#disconnectedCallback
 [32]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#attributeChangedCallback
@@ -587,13 +586,13 @@ import 'web-cell/polyfill';
 [42]: https://github.com/EasyWebApp/mark-wiki
 [43]: https://web-cell.dev/cell-router/
 [44]: https://bootstrap.web-cell.dev/
-[45]: https://material.web-cell.dev/
+[45]: https://material-web.dev/
 [46]: https://tech-query.me/GitHub-Web-Widget/
 [47]: https://web-cell.dev/KoAJAX/
 [48]: https://web-cell.dev/web-utility/
 [49]: https://web-cell.dev/iterable-observer/
 [50]: https://github.com/EasyWebApp/Parcel-transformer-MDX
-[51]: https://web.dev/declarative-shadow-dom/
-[52]: https://reactjs.org/docs/react-api.html#reactlazy
+[51]: https://developer.chrome.com/docs/css-ui/declarative-shadow-dom?hl=zh-cn
+[52]: https://legacy.reactjs.org/docs/react-api.html#reactlazy
 [53]: https://github.com/EasyWebApp/WebCell/blob/main/Migrating.md
 [54]: https://github.com/EasyWebApp/WebCell/blob/main/Contributing.md

ReadMe.md

@@ -497,7 +497,7 @@ import 'web-cell/polyfill';
 -   [Element Internals][26]
 -   [CSS variables][27]
 -   [ECMAScript 6+][28]
--   [TypeScript 5+][29]
+-   [TypeScript 5+][4]
 
 ## Life Cycle hooks
 
@@ -527,7 +527,7 @@ We recommend these libraries to use with WebCell:
 -   **UI components**
 
     -   [BootCell][44] (based on **BootStrap v5**)
-    -   [Material Cell][45] (based on **Material Design**)
+    -   [Material Web][45] (based on **Material Design**)
     -   [GitHub Web Widget][46]
 
 -   **HTTP request**: [KoAJAX][47] (based on **Koa**\-like middlewares)
@@ -568,13 +568,12 @@ We recommend these libraries to use with WebCell:
 [20]: https://facebook.github.io/jsx/
 [21]: https://parceljs.org/
 [22]: https://web-cell.dev/scaffold/
-[23]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
-[24]: https://developers.google.cn/web/fundamentals/web-components/customelements
-[25]: https://developers.google.cn/web/fundamentals/web-components/shadowdom
-[26]: https://web.dev/more-capable-form-controls/
-[27]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
+[23]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
+[24]: https://web.dev/articles/custom-elements-v1
+[25]: https://web.dev/articles/shadowdom-v1
+[26]: https://web.dev/articles/more-capable-form-controls
+[27]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 [28]: http://es6-features.org/
-[29]: https://www.typescriptlang.org/
 [30]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#connectedCallback
 [31]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#disconnectedCallback
 [32]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#attributeChangedCallback
@@ -590,13 +589,13 @@ We recommend these libraries to use with WebCell:
 [42]: https://github.com/EasyWebApp/mark-wiki
 [43]: https://web-cell.dev/cell-router/
 [44]: https://bootstrap.web-cell.dev/
-[45]: https://material.web-cell.dev/
+[45]: https://material-web.dev/
 [46]: https://tech-query.me/GitHub-Web-Widget/
 [47]: https://web-cell.dev/KoAJAX/
 [48]: https://web-cell.dev/web-utility/
 [49]: https://web-cell.dev/iterable-observer/
 [50]: https://github.com/EasyWebApp/Parcel-transformer-MDX
-[51]: https://web.dev/declarative-shadow-dom/
-[52]: https://reactjs.org/docs/react-api.html#reactlazy
+[51]: https://developer.chrome.com/docs/css-ui/declarative-shadow-dom
+[52]: https://legacy.reactjs.org/docs/react-api.html#reactlazy
 [53]: https://github.com/EasyWebApp/WebCell/blob/main/Migrating.md
 [54]: https://github.com/EasyWebApp/WebCell/blob/main/Contributing.md

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-rc.10",
+    "version": "3.0.0-rc.15",
     "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.6",
-        "dom-renderer": "^2.1.1",
+        "dom-renderer": "^2.1.3",
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
         "web-utility": "^4.1.3"
@@ -64,7 +64,7 @@
         "rimraf": "^5.0.5",
         "ts-jest": "^29.1.2",
         "ts-node": "^10.9.2",
-        "typedoc": "^0.25.7",
+        "typedoc": "^0.25.8",
         "typedoc-plugin-mdn-links": "^3.1.15",
         "typescript": "~5.3.3"
     },

pnpm-lock.yaml

@@ -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() {

source/WebCell.tsx

@@ -71,10 +71,10 @@ function wrapClass<T extends ClassComponent>(Component: T) {
             this['update'] = () =>
                 this.disposers.push(autorun(() => update.call(this)));
 
-            Promise.resolve().then(this.boot);
+            Promise.resolve().then(() => this.#boot());
         }
 
-        protected boot = () => {
+        #boot() {
             const names: string[] =
                     this.constructor['observedAttributes'] || [],
                 reactions = reactionMap.get(this) || [];
@@ -88,7 +88,7 @@ function wrapClass<T extends ClassComponent>(Component: T) {
                     )
                 )
             );
-        };
+        }
 
         disconnectedCallback() {
             for (const disposer of this.disposers) disposer();