From b7efb955a2ff67413abfb4dd0623ab061ca41f81 Mon Sep 17 00:00:00 2001 From: TechQuery Date: Thu, 8 Feb 2024 03:05:45 +0800 Subject: [PATCH] [add] Updated & Mounted callbacks [add] Defer utility class [fix] API Document links [optimize] update Upstream packages --- .npmignore | 4 +- ReadMe-zh.md | 40 ++++---- ReadMe.md | 40 ++++---- package.json | 22 ++--- pnpm-lock.yaml | 164 ++++++++++++++++----------------- source/Animation/index.tsx | 2 +- source/WebCell.tsx | 25 ++++- source/decorator.ts | 11 ++- source/index.ts | 2 +- source/{MobX.ts => utility.ts} | 10 ++ 10 files changed, 179 insertions(+), 141 deletions(-) rename source/{MobX.ts => utility.ts} (81%) diff --git a/.npmignore b/.npmignore index 2fedc85..553d36a 100644 --- a/.npmignore +++ b/.npmignore @@ -1,9 +1,9 @@ -.parcelrc +*.sh +.parcel* .eslintrc.json jest.config.ts test/ preview/ -.parcel-cache/ Contributing.md docs/ .husky/ diff --git a/ReadMe-zh.md b/ReadMe-zh.md index 32e72a0..d97a59e 100644 --- a/ReadMe-zh.md +++ b/ReadMe-zh.md @@ -503,16 +503,17 @@ import 'web-cell/polyfill'; 3. [`attributeChangedCallback`][32] 4. [`adoptedCallback`][33] 5. [`updatedCallback`][34] -6. [`formAssociatedCallback`][35] -7. [`formDisabledCallback`][36] -8. [`formResetCallback`][37] -9. [`formStateRestoreCallback`][38] +6. [`mountedCallback`][35] +7. [`formAssociatedCallback`][36] +8. [`formDisabledCallback`][37] +9. [`formResetCallback`][38] +10. [`formStateRestoreCallback`][39] ## 脚手架 -1. [基础][39] -2. [仪表盘][40] -3. [静态网站][41] +1. [基础][40] +2. [仪表盘][41] +3. [静态网站][42] ## 生态系统 @@ -571,18 +572,19 @@ import 'web-cell/polyfill'; [27]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables [28]: http://es6-features.org/ [29]: https://www.typescriptlang.org/ -[30]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#connectedCallback -[31]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#disconnectedCallback -[32]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#attributeChangedCallback -[33]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#adoptedCallback -[34]: https://web-cell.dev/WebCell/interfaces/WebCell.WebCellComponent.html#updatedCallback -[35]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formAssociatedCallback -[36]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formDisabledCallback -[37]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formResetCallback -[38]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formStateRestoreCallback -[39]: https://github.com/EasyWebApp/scaffold -[40]: https://github.com/EasyWebApp/DashBoard -[41]: https://github.com/EasyWebApp/mark-wiki +[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 +[33]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#adoptedCallback +[34]: https://web-cell.dev/WebCell/interfaces/WebCell.html#updatedCallback +[35]: https://web-cell.dev/WebCell/interfaces/WebCell.html#mountedCallback +[36]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formAssociatedCallback +[37]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formDisabledCallback +[38]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formResetCallback +[39]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formStateRestoreCallback +[40]: https://github.com/EasyWebApp/scaffold +[41]: https://github.com/EasyWebApp/DashBoard +[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/ diff --git a/ReadMe.md b/ReadMe.md index 7db291f..73bc0a2 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -506,16 +506,17 @@ import 'web-cell/polyfill'; 3. [`attributeChangedCallback`][32] 4. [`adoptedCallback`][33] 5. [`updatedCallback`][34] -6. [`formAssociatedCallback`][35] -7. [`formDisabledCallback`][36] -8. [`formResetCallback`][37] -9. [`formStateRestoreCallback`][38] +6. [`mountedCallback`][35] +7. [`formAssociatedCallback`][36] +8. [`formDisabledCallback`][37] +9. [`formResetCallback`][38] +10. [`formStateRestoreCallback`][39] ## Scaffolds -1. [Basic][39] -2. [DashBoard][40] -3. [Static site][41] +1. [Basic][40] +2. [DashBoard][41] +3. [Static site][42] ## Ecosystem @@ -574,18 +575,19 @@ We recommend these libraries to use with WebCell: [27]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables [28]: http://es6-features.org/ [29]: https://www.typescriptlang.org/ -[30]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#connectedCallback -[31]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#disconnectedCallback -[32]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#attributeChangedCallback -[33]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomElement.html#adoptedCallback -[34]: https://web-cell.dev/WebCell/interfaces/WebCell.WebCellComponent.html#updatedCallback -[35]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formAssociatedCallback -[36]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formDisabledCallback -[37]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formResetCallback -[38]: https://web-cell.dev/web-utility/interfaces/DOM_type.CustomFormElement.html#formStateRestoreCallback -[39]: https://github.com/EasyWebApp/scaffold -[40]: https://github.com/EasyWebApp/DashBoard -[41]: https://github.com/EasyWebApp/mark-wiki +[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 +[33]: https://web-cell.dev/web-utility/interfaces/CustomElement.html#adoptedCallback +[34]: https://web-cell.dev/WebCell/interfaces/WebCell.html#updatedCallback +[35]: https://web-cell.dev/WebCell/interfaces/WebCell.html#mountedCallback +[36]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formAssociatedCallback +[37]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formDisabledCallback +[38]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formResetCallback +[39]: https://web-cell.dev/web-utility/interfaces/CustomFormElement.html#formStateRestoreCallback +[40]: https://github.com/EasyWebApp/scaffold +[41]: https://github.com/EasyWebApp/DashBoard +[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/ diff --git a/package.json b/package.json index f14055c..5f46239 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-cell", - "version": "3.0.0-rc.9", + "version": "3.0.0-rc.10", "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript", "keywords": [ "web", @@ -26,8 +26,8 @@ "source": "source/index.ts", "types": "dist/index.d.ts", "dependencies": { - "@swc/helpers": "^0.5.3", - "dom-renderer": "^2.0.6", + "@swc/helpers": "^0.5.6", + "dom-renderer": "^2.1.1", "mobx": ">=6.11", "regenerator-runtime": "^0.14.1", "web-utility": "^4.1.3" @@ -44,28 +44,28 @@ "@parcel/packager-ts": "~2.11.0", "@parcel/transformer-typescript-tsc": "~2.11.0", "@parcel/transformer-typescript-types": "~2.11.0", - "@types/jest": "^29.5.11", - "@typescript-eslint/eslint-plugin": "^6.20.0", - "@typescript-eslint/parser": "^6.20.0", + "@types/jest": "^29.5.12", + "@typescript-eslint/eslint-plugin": "^6.21.0", + "@typescript-eslint/parser": "^6.21.0", "core-js": "^3.35.1", "element-internals-polyfill": "^1.3.10", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", - "husky": "^9.0.7", + "husky": "^9.0.10", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "jsdom": "^24.0.0", - "lint-staged": "^15.2.1", + "lint-staged": "^15.2.2", "open-cli": "^8.0.0", "parcel": "~2.11.0", - "prettier": "^3.2.4", + "prettier": "^3.2.5", "prettier-plugin-sh": "^0.14.0", "replace": "^1.2.2", "rimraf": "^5.0.5", "ts-jest": "^29.1.2", "ts-node": "^10.9.2", "typedoc": "^0.25.7", - "typedoc-plugin-mdn-links": "^3.1.14", + "typedoc-plugin-mdn-links": "^3.1.15", "typescript": "~5.3.3" }, "scripts": { @@ -75,7 +75,7 @@ "preview": "npm run clean && cd preview/ && parcel --dist-dir=../docs/preview/ --open", "pack-preview": "rimraf .parcel-cache/ docs/preview/ && cd preview/ && parcel build --public-url=. --dist-dir=../docs/preview/", "pack-dist": "parcel build source/index.ts", - "pack-docs": "./pack-docs.sh", + "pack-docs": "sh ./pack-docs.sh", "build": "npm run clean && npm run pack-dist && npm run pack-docs && npm run pack-preview", "start": "npm run pack-docs && open-cli docs/index.html", "prepublishOnly": "npm test && npm run build" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bcfb157..6944d14 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,11 +6,11 @@ settings: dependencies: '@swc/helpers': - specifier: ^0.5.3 - version: 0.5.3 + specifier: ^0.5.6 + version: 0.5.6 dom-renderer: - specifier: ^2.0.6 - version: 2.0.6(typescript@5.3.3) + specifier: ^2.1.1 + version: 2.1.1(typescript@5.3.3) mobx: specifier: '>=6.11' version: 6.12.0 @@ -27,7 +27,7 @@ devDependencies: version: 29.6.3 '@parcel/config-default': specifier: ~2.11.0 - version: 2.11.0(@parcel/core@2.11.0)(@swc/helpers@0.5.3)(typescript@5.3.3) + version: 2.11.0(@parcel/core@2.11.0)(@swc/helpers@0.5.6)(typescript@5.3.3) '@parcel/packager-ts': specifier: ~2.11.0 version: 2.11.0 @@ -38,14 +38,14 @@ devDependencies: specifier: ~2.11.0 version: 2.11.0(typescript@5.3.3) '@types/jest': - specifier: ^29.5.11 - version: 29.5.11 + specifier: ^29.5.12 + version: 29.5.12 '@typescript-eslint/eslint-plugin': - specifier: ^6.20.0 - version: 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3) + specifier: ^6.21.0 + version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.56.0)(typescript@5.3.3) '@typescript-eslint/parser': - specifier: ^6.20.0 - version: 6.20.0(eslint@8.56.0)(typescript@5.3.3) + specifier: ^6.21.0 + version: 6.21.0(eslint@8.56.0)(typescript@5.3.3) core-js: specifier: ^3.35.1 version: 3.35.1 @@ -59,8 +59,8 @@ devDependencies: specifier: ^9.1.0 version: 9.1.0(eslint@8.56.0) husky: - specifier: ^9.0.7 - version: 9.0.7 + specifier: ^9.0.10 + version: 9.0.10 jest: specifier: ^29.7.0 version: 29.7.0(ts-node@10.9.2) @@ -71,20 +71,20 @@ devDependencies: specifier: ^24.0.0 version: 24.0.0 lint-staged: - specifier: ^15.2.1 - version: 15.2.1 + specifier: ^15.2.2 + version: 15.2.2 open-cli: specifier: ^8.0.0 version: 8.0.0 parcel: specifier: ~2.11.0 - version: 2.11.0(@swc/helpers@0.5.3)(typescript@5.3.3) + version: 2.11.0(@swc/helpers@0.5.6)(typescript@5.3.3) prettier: - specifier: ^3.2.4 - version: 3.2.4 + specifier: ^3.2.5 + version: 3.2.5 prettier-plugin-sh: specifier: ^0.14.0 - version: 0.14.0(prettier@3.2.4) + version: 0.14.0(prettier@3.2.5) replace: specifier: ^1.2.2 version: 1.2.2 @@ -101,8 +101,8 @@ devDependencies: specifier: ^0.25.7 version: 0.25.7(typescript@5.3.3) typedoc-plugin-mdn-links: - specifier: ^3.1.14 - version: 3.1.14(typedoc@0.25.7) + specifier: ^3.1.15 + version: 3.1.15(typedoc@0.25.7) typescript: specifier: ~5.3.3 version: 5.3.3 @@ -973,7 +973,7 @@ packages: - '@parcel/core' dev: true - /@parcel/config-default@2.11.0(@parcel/core@2.11.0)(@swc/helpers@0.5.3)(typescript@5.3.3): + /@parcel/config-default@2.11.0(@parcel/core@2.11.0)(@swc/helpers@0.5.6)(typescript@5.3.3): resolution: {integrity: sha512-1e2+qcZkm5/0f4eI20p/DemcYiSxq9d/eyjpTXA7PulJaHbL1wonwUAuy3mvnAvDnLOJmAk/obDVgX1ZfxMGtg==} peerDependencies: '@parcel/core': ^2.11.0 @@ -986,7 +986,7 @@ packages: '@parcel/optimizer-htmlnano': 2.11.0(typescript@5.3.3) '@parcel/optimizer-image': 2.11.0(@parcel/core@2.11.0) '@parcel/optimizer-svgo': 2.11.0 - '@parcel/optimizer-swc': 2.11.0(@swc/helpers@0.5.3) + '@parcel/optimizer-swc': 2.11.0(@swc/helpers@0.5.6) '@parcel/packager-css': 2.11.0 '@parcel/packager-html': 2.11.0 '@parcel/packager-js': 2.11.0 @@ -1190,7 +1190,7 @@ packages: - '@parcel/core' dev: true - /@parcel/optimizer-swc@2.11.0(@swc/helpers@0.5.3): + /@parcel/optimizer-swc@2.11.0(@swc/helpers@0.5.6): resolution: {integrity: sha512-ftf42F3JyZxJb6nnLlgNGyNQ273YOla4dFGH/tWC8iTwObHUpWe7cMbCGcrSJBvAlsLkZfLpFNAXFxUgxdKyHQ==} engines: {node: '>= 12.0.0', parcel: ^2.11.0} dependencies: @@ -1198,7 +1198,7 @@ packages: '@parcel/plugin': 2.11.0 '@parcel/source-map': 2.1.1 '@parcel/utils': 2.11.0 - '@swc/core': 1.3.102(@swc/helpers@0.5.3) + '@swc/core': 1.3.102(@swc/helpers@0.5.6) nullthrows: 1.1.1 transitivePeerDependencies: - '@parcel/core' @@ -1494,7 +1494,7 @@ packages: '@parcel/source-map': 2.1.1 '@parcel/utils': 2.11.0 '@parcel/workers': 2.11.0(@parcel/core@2.11.0) - '@swc/helpers': 0.5.3 + '@swc/helpers': 0.5.6 browserslist: 4.22.2 nullthrows: 1.1.1 regenerator-runtime: 0.13.11 @@ -1906,7 +1906,7 @@ packages: dev: true optional: true - /@swc/core@1.3.102(@swc/helpers@0.5.3): + /@swc/core@1.3.102(@swc/helpers@0.5.6): resolution: {integrity: sha512-OAjNLY/f6QWKSDzaM3bk31A+OYHu6cPa9P/rFIx8X5d24tHXUpRiiq6/PYI6SQRjUPlB72GjsjoEU8F+ALadHg==} engines: {node: '>=10'} requiresBuild: true @@ -1917,7 +1917,7 @@ packages: optional: true dependencies: '@swc/counter': 0.1.2 - '@swc/helpers': 0.5.3 + '@swc/helpers': 0.5.6 '@swc/types': 0.1.5 optionalDependencies: '@swc/core-darwin-arm64': 1.3.102 @@ -1936,8 +1936,8 @@ packages: resolution: {integrity: sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==} dev: true - /@swc/helpers@0.5.3: - resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==} + /@swc/helpers@0.5.6: + resolution: {integrity: sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==} dependencies: tslib: 2.6.2 @@ -2026,8 +2026,8 @@ packages: '@types/istanbul-lib-report': 3.0.3 dev: true - /@types/jest@29.5.11: - resolution: {integrity: sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==} + /@types/jest@29.5.12: + resolution: {integrity: sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==} dependencies: expect: 29.7.0 pretty-format: 29.7.0 @@ -2073,8 +2073,8 @@ packages: '@types/yargs-parser': 21.0.3 dev: true - /@typescript-eslint/eslint-plugin@6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-fTwGQUnjhoYHeSF6m5pWNkzmDDdsKELYrOBxhjMrofPqCkoC2k3B2wvGHFxa1CTIqkEn88nlW1HVMztjo2K8Hg==} + /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha @@ -2085,11 +2085,11 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 6.20.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/scope-manager': 6.20.0 - '@typescript-eslint/type-utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 6.20.0 + '@typescript-eslint/parser': 6.21.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/type-utils': 6.21.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4 eslint: 8.56.0 graphemer: 1.4.0 @@ -2102,8 +2102,8 @@ packages: - supports-color dev: true - /@typescript-eslint/parser@6.20.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-bYerPDF/H5v6V76MdMYhjwmwgMA+jlPVqjSDq2cRqMi8bP5sR3Z+RLOiOMad3nsnmDVmn2gAFCyNgh/dIrfP/w==} + /@typescript-eslint/parser@6.21.0(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -2112,10 +2112,10 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 6.20.0 - '@typescript-eslint/types': 6.20.0 - '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 6.20.0 + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4 eslint: 8.56.0 typescript: 5.3.3 @@ -2123,16 +2123,16 @@ packages: - supports-color dev: true - /@typescript-eslint/scope-manager@6.20.0: - resolution: {integrity: sha512-p4rvHQRDTI1tGGMDFQm+GtxP1ZHyAh64WANVoyEcNMpaTFn3ox/3CcgtIlELnRfKzSs/DwYlDccJEtr3O6qBvA==} + /@typescript-eslint/scope-manager@6.21.0: + resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.20.0 - '@typescript-eslint/visitor-keys': 6.20.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/visitor-keys': 6.21.0 dev: true - /@typescript-eslint/type-utils@6.20.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-qnSobiJQb1F5JjN0YDRPHruQTrX7ICsmltXhkV536mp4idGAYrIyr47zF/JmkJtEcAVnIz4gUYJ7gOZa6SmN4g==} + /@typescript-eslint/type-utils@6.21.0(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -2141,8 +2141,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3) - '@typescript-eslint/utils': 6.20.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) + '@typescript-eslint/utils': 6.21.0(eslint@8.56.0)(typescript@5.3.3) debug: 4.3.4 eslint: 8.56.0 ts-api-utils: 1.0.3(typescript@5.3.3) @@ -2151,13 +2151,13 @@ packages: - supports-color dev: true - /@typescript-eslint/types@6.20.0: - resolution: {integrity: sha512-MM9mfZMAhiN4cOEcUOEx+0HmuaW3WBfukBZPCfwSqFnQy0grXYtngKCqpQN339X3RrwtzspWJrpbrupKYUSBXQ==} + /@typescript-eslint/types@6.21.0: + resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==} engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@6.20.0(typescript@5.3.3): - resolution: {integrity: sha512-RnRya9q5m6YYSpBN7IzKu9FmLcYtErkDkc8/dKv81I9QiLLtVBHrjz+Ev/crAqgMNW2FCsoZF4g2QUylMnJz+g==} + /@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3): + resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: typescript: '*' @@ -2165,8 +2165,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 6.20.0 - '@typescript-eslint/visitor-keys': 6.20.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -2178,8 +2178,8 @@ packages: - supports-color dev: true - /@typescript-eslint/utils@6.20.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-/EKuw+kRu2vAqCoDwDCBtDRU6CTKbUmwwI7SH7AashZ+W+7o8eiyy6V2cdOqN49KsTcASWsC5QeghYuRDTyOOg==} + /@typescript-eslint/utils@6.21.0(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -2187,9 +2187,9 @@ packages: '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) '@types/json-schema': 7.0.15 '@types/semver': 7.5.6 - '@typescript-eslint/scope-manager': 6.20.0 - '@typescript-eslint/types': 6.20.0 - '@typescript-eslint/typescript-estree': 6.20.0(typescript@5.3.3) + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) eslint: 8.56.0 semver: 7.5.4 transitivePeerDependencies: @@ -2197,11 +2197,11 @@ packages: - typescript dev: true - /@typescript-eslint/visitor-keys@6.20.0: - resolution: {integrity: sha512-E8Cp98kRe4gKHjJD4NExXKz/zOJ1A2hhZc+IMVD6i7w4yjIvh6VyuRI0gRtxAsXtoC35uGMaQ9rjI2zJaXDEAw==} + /@typescript-eslint/visitor-keys@6.21.0: + resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.20.0 + '@typescript-eslint/types': 6.21.0 eslint-visitor-keys: 3.4.3 dev: true @@ -2889,8 +2889,8 @@ packages: esutils: 2.0.3 dev: true - /dom-renderer@2.0.6(typescript@5.3.3): - resolution: {integrity: sha512-gsf0N9EY1ambqrg8/eOeGwbifqxyJ9vQN8zWDdmj88dYsvwxv2kSV34T6Nt8fu0kYrwUsYadb4tdFjTrPRM7vw==} + /dom-renderer@2.1.1(typescript@5.3.3): + resolution: {integrity: sha512-cRxYnhpKyBj5tHl85T0pbdHAo0QCe3WSJs5y+x8P0AZTFikKE98hZIORUR+dsoVK61Hs+hWlMBO/fV9NVQ30sg==} dependencies: tslib: 2.6.2 web-utility: 4.1.3(typescript@5.3.3) @@ -3541,8 +3541,8 @@ packages: engines: {node: '>=16.17.0'} dev: true - /husky@9.0.7: - resolution: {integrity: sha512-vWdusw+y12DUEeoZqW1kplOFqk3tedGV8qlga8/SF6a3lOiWLqGZZQvfWvY0fQYdfiRi/u1DFNpudTSV9l1aCg==} + /husky@9.0.10: + resolution: {integrity: sha512-TQGNknoiy6bURzIO77pPRu+XHi6zI7T93rX+QnJsoYFf3xdjKOur+IlfqzJGMHIK/wXrLg+GsvMs8Op7vI2jVA==} engines: {node: '>=18'} hasBin: true dev: true @@ -4454,8 +4454,8 @@ packages: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true - /lint-staged@15.2.1: - resolution: {integrity: sha512-dhwAPnM85VdshybV9FWI/9ghTvMLoQLEXgVMx+ua2DN7mdfzd/tRfoU2yhMcBac0RHkofoxdnnJUokr8s4zKmQ==} + /lint-staged@15.2.2: + resolution: {integrity: sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==} engines: {node: '>=18.12.0'} hasBin: true dependencies: @@ -4846,7 +4846,7 @@ packages: engines: {node: '>=6'} dev: true - /parcel@2.11.0(@swc/helpers@0.5.3)(typescript@5.3.3): + /parcel@2.11.0(@swc/helpers@0.5.6)(typescript@5.3.3): resolution: {integrity: sha512-H/RI1/DmuOkL8RuG/EpNPvtzrbF+7jA/R56ydEEm+lqFbYktKB4COR7JXdHkZXRgbSJyimrFB8d0r9+SaRnj0Q==} engines: {node: '>= 12.0.0'} hasBin: true @@ -4854,7 +4854,7 @@ packages: '@parcel/core': optional: true dependencies: - '@parcel/config-default': 2.11.0(@parcel/core@2.11.0)(@swc/helpers@0.5.3)(typescript@5.3.3) + '@parcel/config-default': 2.11.0(@parcel/core@2.11.0)(@swc/helpers@0.5.6)(typescript@5.3.3) '@parcel/core': 2.11.0 '@parcel/diagnostic': 2.11.0 '@parcel/events': 2.11.0 @@ -5010,19 +5010,19 @@ packages: engines: {node: '>= 0.8.0'} dev: true - /prettier-plugin-sh@0.14.0(prettier@3.2.4): + /prettier-plugin-sh@0.14.0(prettier@3.2.5): resolution: {integrity: sha512-hfXulj5+zEl/ulrO5kMuuTPKmXvOg0bnLHY1hKFNN/N+/903iZbNp8NyZBTsgI8dtkSgFfAEIQq0IQTyP1ZVFQ==} engines: {node: '>=16.0.0'} peerDependencies: prettier: ^3.0.3 dependencies: mvdan-sh: 0.10.1 - prettier: 3.2.4 + prettier: 3.2.5 sh-syntax: 0.4.2 dev: true - /prettier@3.2.4: - resolution: {integrity: sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==} + /prettier@3.2.5: + resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==} engines: {node: '>=14'} hasBin: true dev: true @@ -5660,8 +5660,8 @@ packages: engines: {node: '>=14.16'} dev: true - /typedoc-plugin-mdn-links@3.1.14(typedoc@0.25.7): - resolution: {integrity: sha512-zPnzIHvMChiuS4BvI4mbs89HwS6HSPE+q7rPRliJCeIkQYqW7YaTXuBwbUQFPg++02KNUY0IMp0MFvouoi1Qgw==} + /typedoc-plugin-mdn-links@3.1.15(typedoc@0.25.7): + resolution: {integrity: sha512-PniQgrCAmhbJf8fPiZULxPV9aYVszNoEk1R7XbTBIMluqplaUkG3qfckthb2l++5yDR1lHEycTMu6hQyKyz+QA==} peerDependencies: typedoc: '>= 0.23.14 || 0.24.x || 0.25.x' dependencies: @@ -5786,7 +5786,7 @@ packages: peerDependencies: typescript: '>=4.1' dependencies: - '@swc/helpers': 0.5.3 + '@swc/helpers': 0.5.6 element-internals-polyfill: 1.3.10 regenerator-runtime: 0.14.1 typescript: 5.3.3 diff --git a/source/Animation/index.tsx b/source/Animation/index.tsx index 3f9580e..7b9ec41 100644 --- a/source/Animation/index.tsx +++ b/source/Animation/index.tsx @@ -1,7 +1,7 @@ import { observable } from 'mobx'; import { importCSS } from 'web-utility'; -import { animated } from '../MobX'; +import { animated } from '../utility'; import { WebCell, WebCellProps, component } from '../WebCell'; import { FC, attribute, observer, reaction } from '../decorator'; import { AnimationType } from './type'; diff --git a/source/WebCell.tsx b/source/WebCell.tsx index 1a29230..dedbdc0 100644 --- a/source/WebCell.tsx +++ b/source/WebCell.tsx @@ -7,6 +7,8 @@ import { stringifyDOM } from 'web-utility'; +import { Defer } from './utility'; + export interface ComponentMeta extends ElementDefinitionOptions, Partial { @@ -22,7 +24,16 @@ export interface WebCell

extends CustomElement { internals: ElementInternals; renderer: DOMRenderer; root: ParentNode; + mounted: Defer; update: () => void; + /** + * Called at DOM tree updated + */ + updatedCallback?: () => any; + /** + * Called at first time of DOM tree updated + */ + mountedCallback?: () => any; emit: (event: string, detail?: any, option?: EventInit) => boolean; } @@ -53,6 +64,8 @@ export function component(meta: ComponentMeta) { get root(): ParentNode { return this.internals.shadowRoot || this; } + mounted = new Defer(); + declare mountedCallback?: () => any; constructor() { super(); @@ -79,14 +92,22 @@ export function component(meta: ComponentMeta) { } super['connectedCallback']?.(); + + this.mounted.promise.then(this.mountedCallback); + this.mounted.resolve(); } - declare render: () => VNode; + declare render?: () => VNode; + declare updatedCallback?: () => any; update() { const vNode = this.render?.(); - this.renderer.render(isEmpty(vNode) ? <> : vNode, this.root); + this.renderer.render( + isEmpty(vNode) ? meta.mode ? : <> : vNode, + this.root + ); + this.updatedCallback?.(); } disconnectedCallback() { diff --git a/source/decorator.ts b/source/decorator.ts index bbfb01e..dd18b6a 100644 --- a/source/decorator.ts +++ b/source/decorator.ts @@ -14,7 +14,7 @@ import { } from 'web-utility'; import { ClassComponent } from './WebCell'; -import { getMobxData } from './MobX'; +import { getMobxData } from './utility'; export type PropsWithChildren

= P & { children?: JsxChildren; @@ -70,9 +70,11 @@ function wrapClass(Component: T) { this['update'] = () => this.disposers.push(autorun(() => update.call(this))); + + Promise.resolve().then(this.boot); } - connectedCallback() { + protected boot = () => { const names: string[] = this.constructor['observedAttributes'] || [], reactions = reactionMap.get(this) || []; @@ -86,13 +88,14 @@ function wrapClass(Component: T) { ) ) ); - super['connectedCallback']?.(); - } + }; disconnectedCallback() { for (const disposer of this.disposers) disposer(); this.disposers.length = 0; + + super['disconnectedCallback']?.(); } setAttribute(name: string, value: string) { diff --git a/source/index.ts b/source/index.ts index b23dd9f..4a945e5 100644 --- a/source/index.ts +++ b/source/index.ts @@ -1,5 +1,5 @@ export * from './decorator'; -export * from './MobX'; +export * from './utility'; export * from './WebCell'; export * from './WebField'; export * from './Async'; diff --git a/source/MobX.ts b/source/utility.ts similarity index 81% rename from source/MobX.ts rename to source/utility.ts index 7dcec68..164d85e 100644 --- a/source/MobX.ts +++ b/source/utility.ts @@ -2,6 +2,16 @@ import { DataObject } from 'dom-renderer'; import { ObservableValue } from 'mobx/dist/internal'; import { delegate } from 'web-utility'; +export class Defer { + resolve: (value: T | PromiseLike) => void; + reject: (reason?: any) => void; + + promise = new Promise((resolve, reject) => { + this.resolve = resolve; + this.reject = reject; + }); +} + export function getMobxData(observable: T) { for (const key of Object.getOwnPropertySymbols(observable)) { const store = observable[key as keyof T]?.values_ as Map<