From cb56015e8b0e39896877ec506deccc91aa249d99 Mon Sep 17 00:00:00 2001 From: TechQuery Date: Sat, 10 Feb 2024 23:49:17 +0800 Subject: [PATCH] [fix] Mount & Update timing of Class components [optimize] update Document links & Upstream packages --- Migrating.md | 9 +++------ ReadMe-zh.md | 21 ++++++++++----------- ReadMe.md | 21 ++++++++++----------- package.json | 6 +++--- pnpm-lock.yaml | 22 +++++++++++----------- source/WebCell.tsx | 31 +++++++++++++++++++------------ source/decorator.ts | 6 +++--- 7 files changed, 59 insertions(+), 57 deletions(-) diff --git a/Migrating.md b/Migrating.md index 238babf..4a0fa1c 100644 --- a/Migrating.md +++ b/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 diff --git a/ReadMe-zh.md b/ReadMe-zh.md index d97a59e..9adce7f 100644 --- a/ReadMe-zh.md +++ b/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 diff --git a/ReadMe.md b/ReadMe.md index 73bc0a2..9583acc 100644 --- a/ReadMe.md +++ b/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 diff --git a/package.json b/package.json index 5f46239..b696362 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6944d14..9585cf8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ dependencies: specifier: ^0.5.6 version: 0.5.6 dom-renderer: - specifier: ^2.1.1 - version: 2.1.1(typescript@5.3.3) + specifier: ^2.1.3 + version: 2.1.3(typescript@5.3.3) mobx: specifier: '>=6.11' version: 6.12.0 @@ -98,11 +98,11 @@ devDependencies: specifier: ^10.9.2 version: 10.9.2(typescript@5.3.3) typedoc: - specifier: ^0.25.7 - version: 0.25.7(typescript@5.3.3) + specifier: ^0.25.8 + version: 0.25.8(typescript@5.3.3) typedoc-plugin-mdn-links: specifier: ^3.1.15 - version: 3.1.15(typedoc@0.25.7) + version: 3.1.15(typedoc@0.25.8) typescript: specifier: ~5.3.3 version: 5.3.3 @@ -2889,8 +2889,8 @@ packages: esutils: 2.0.3 dev: true - /dom-renderer@2.1.1(typescript@5.3.3): - resolution: {integrity: sha512-cRxYnhpKyBj5tHl85T0pbdHAo0QCe3WSJs5y+x8P0AZTFikKE98hZIORUR+dsoVK61Hs+hWlMBO/fV9NVQ30sg==} + /dom-renderer@2.1.3(typescript@5.3.3): + resolution: {integrity: sha512-TMJRcLZT+wDktjfyCjgQzP5Jndpn2xOLWJ+8EUrwqTrGPnQ4US7+pX+APGRc6RaF4C3Z/+/7ZPND8Y4u9CO+Og==} dependencies: tslib: 2.6.2 web-utility: 4.1.3(typescript@5.3.3) @@ -5660,16 +5660,16 @@ packages: engines: {node: '>=14.16'} dev: true - /typedoc-plugin-mdn-links@3.1.15(typedoc@0.25.7): + /typedoc-plugin-mdn-links@3.1.15(typedoc@0.25.8): resolution: {integrity: sha512-PniQgrCAmhbJf8fPiZULxPV9aYVszNoEk1R7XbTBIMluqplaUkG3qfckthb2l++5yDR1lHEycTMu6hQyKyz+QA==} peerDependencies: typedoc: '>= 0.23.14 || 0.24.x || 0.25.x' dependencies: - typedoc: 0.25.7(typescript@5.3.3) + typedoc: 0.25.8(typescript@5.3.3) dev: true - /typedoc@0.25.7(typescript@5.3.3): - resolution: {integrity: sha512-m6A6JjQRg39p2ZVRIN3NKXgrN8vzlHhOS+r9ymUYtcUP/TIQPvWSq7YgE5ZjASfv5Vd5BW5xrir6Gm2XNNcOow==} + /typedoc@0.25.8(typescript@5.3.3): + resolution: {integrity: sha512-mh8oLW66nwmeB9uTa0Bdcjfis+48bAjSH3uqdzSuSawfduROQLlXw//WSNZLYDdhmMVB7YcYZicq6e8T0d271A==} engines: {node: '>= 16'} hasBin: true peerDependencies: diff --git a/source/WebCell.tsx b/source/WebCell.tsx index dedbdc0..dc997eb 100644 --- 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 { @@ -24,7 +22,7 @@ export interface WebCell

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 ? : <> : vNode, - this.root + const content = isEmpty(vNode) ? ( + meta.mode ? ( + + ) : null + ) : ( + vNode ); - this.updatedCallback?.(); + + if (content != null) { + this.renderer.render(content, this.root); + this.updatedCallback?.(); + } } disconnectedCallback() { diff --git a/source/decorator.ts b/source/decorator.ts index dd18b6a..71c85a6 100644 --- a/source/decorator.ts +++ b/source/decorator.ts @@ -71,10 +71,10 @@ function wrapClass(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(Component: T) { ) ) ); - }; + } disconnectedCallback() { for (const disposer of this.disposers) disposer();