diff --git a/ReadMe.md b/ReadMe.md index 79db02d..66d4db5 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -461,6 +461,42 @@ const AsyncTag = lazy(() => import('./AsyncTag')); new DOMRenderer().render(); ``` +### Async rendering (experimental) + +#### DOM tree + +```tsx +import { DOMRenderer } from 'dom-renderer'; + +new DOMRenderer().render( + + Async rendering + , + document.body, + 'async' +); +``` + +#### Class component + +```tsx +import { component } from 'web-cell'; + +@component({ + tagName: 'async-renderer', + renderMode: 'async' +}) +export class AsyncRenderer extends HTMLElement { + render() { + return ( + + Async rendering + + ); + } +} +``` + ### Animate CSS component ```tsx diff --git a/package.json b/package.json index 1283f14..b33bc43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-cell", - "version": "3.0.2", + "version": "3.0.3", "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.15", - "dom-renderer": "^2.5.1", + "dom-renderer": "^2.6.0", "mobx": ">=6.11", "regenerator-runtime": "^0.14.1", "web-utility": "^4.4.2" @@ -38,8 +38,8 @@ "jsdom": ">=23.1" }, "devDependencies": { - "@eslint/compat": "^1.2.2", - "@eslint/js": "^9.14.0", + "@eslint/compat": "^1.2.3", + "@eslint/js": "^9.15.0", "@parcel/config-default": "~2.13.0", "@parcel/packager-ts": "~2.13.0", "@parcel/transformer-typescript-tsc": "~2.13.0", @@ -49,12 +49,12 @@ "@types/node": "^20.17.6", "core-js": "^3.39.0", "element-internals-polyfill": "^1.3.12", - "eslint": "^9.14.0", + "eslint": "^9.15.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-simple-import-sort": "^12.1.1", "globals": "^15.12.0", - "husky": "^9.1.6", + "husky": "^9.1.7", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "jsdom": "^25.0.1", @@ -68,9 +68,9 @@ "ts-jest": "^29.2.5", "ts-node": "^10.9.2", "typedoc": "^0.26.11", - "typedoc-plugin-mdn-links": "^3.3.7", + "typedoc-plugin-mdn-links": "^3.3.8", "typescript": "~5.6.3", - "typescript-eslint": "^8.14.0" + "typescript-eslint": "^8.15.0" }, "scripts": { "prepare": "husky", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbcba5c..9207b4c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: specifier: ^0.5.15 version: 0.5.15 dom-renderer: - specifier: ^2.5.1 - version: 2.5.1(typescript@5.6.3) + specifier: ^2.6.0 + version: 2.6.0(typescript@5.6.3) mobx: specifier: '>=6.11' version: 6.13.5 @@ -25,11 +25,11 @@ importers: version: 4.4.2(typescript@5.6.3) devDependencies: '@eslint/compat': - specifier: ^1.2.2 - version: 1.2.2(eslint@9.14.0) + specifier: ^1.2.3 + version: 1.2.3(eslint@9.15.0) '@eslint/js': - specifier: ^9.14.0 - version: 9.14.0 + specifier: ^9.15.0 + version: 9.15.0 '@parcel/config-default': specifier: ~2.13.0 version: 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(typescript@5.6.3) @@ -58,23 +58,23 @@ importers: specifier: ^1.3.12 version: 1.3.12 eslint: - specifier: ^9.14.0 - version: 9.14.0 + specifier: ^9.15.0 + version: 9.15.0 eslint-config-prettier: specifier: ^9.1.0 - version: 9.1.0(eslint@9.14.0) + version: 9.1.0(eslint@9.15.0) eslint-plugin-react: specifier: ^7.37.2 - version: 7.37.2(eslint@9.14.0) + version: 7.37.2(eslint@9.15.0) eslint-plugin-simple-import-sort: specifier: ^12.1.1 - version: 12.1.1(eslint@9.14.0) + version: 12.1.1(eslint@9.15.0) globals: specifier: ^15.12.0 version: 15.12.0 husky: - specifier: ^9.1.6 - version: 9.1.6 + specifier: ^9.1.7 + version: 9.1.7 jest: specifier: ^29.7.0 version: 29.7.0(@types/node@20.17.6)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.17.6)(typescript@5.6.3)) @@ -115,14 +115,14 @@ importers: specifier: ^0.26.11 version: 0.26.11(typescript@5.6.3) typedoc-plugin-mdn-links: - specifier: ^3.3.7 - version: 3.3.7(typedoc@0.26.11(typescript@5.6.3)) + specifier: ^3.3.8 + version: 3.3.8(typedoc@0.26.11(typescript@5.6.3)) typescript: specifier: ~5.6.3 version: 5.6.3 typescript-eslint: - specifier: ^8.14.0 - version: 8.14.0(eslint@9.14.0)(typescript@5.6.3) + specifier: ^8.15.0 + version: 8.15.0(eslint@9.15.0)(typescript@5.6.3) packages: @@ -305,8 +305,8 @@ packages: resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==} engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} - '@eslint/compat@1.2.2': - resolution: {integrity: sha512-jhgiIrsw+tRfcBQ4BFl2C3vCrIUw2trCY0cnDvGZpwTtKCEDmZhAtMfrEUP/KpnwM6PrO0T+Ltm+ccW74olG3Q==} + '@eslint/compat@1.2.3': + resolution: {integrity: sha512-wlZhwlDFxkxIZ571aH0FoK4h4Vwx7P3HJx62Gp8hTc10bfpwT2x0nULuAHmQSJBOWPgPeVf+9YtnD4j50zVHmA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^9.10.0 @@ -314,28 +314,28 @@ packages: eslint: optional: true - '@eslint/config-array@0.18.0': - resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==} + '@eslint/config-array@0.19.0': + resolution: {integrity: sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@eslint/core@0.7.0': - resolution: {integrity: sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==} + '@eslint/core@0.9.0': + resolution: {integrity: sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@eslint/eslintrc@3.1.0': - resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==} + '@eslint/eslintrc@3.2.0': + resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@eslint/js@9.14.0': - resolution: {integrity: sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==} + '@eslint/js@9.15.0': + resolution: {integrity: sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@eslint/object-schema@2.1.4': resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@eslint/plugin-kit@0.2.2': - resolution: {integrity: sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==} + '@eslint/plugin-kit@0.2.3': + resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@humanfs/core@0.19.1': @@ -1056,8 +1056,8 @@ packages: '@types/yargs@17.0.33': resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==} - '@typescript-eslint/eslint-plugin@8.14.0': - resolution: {integrity: sha512-tqp8H7UWFaZj0yNO6bycd5YjMwxa6wIHOLZvWPkidwbgLCsBMetQoGj7DPuAlWa2yGO3H48xmPwjhsSPPCGU5w==} + '@typescript-eslint/eslint-plugin@8.15.0': + resolution: {integrity: sha512-+zkm9AR1Ds9uLWN3fkoeXgFppaQ+uEVtfOV62dDmsy9QCNqlRHWNEck4yarvRNrvRcHQLGfqBNui3cimoz8XAg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0 @@ -1067,8 +1067,8 @@ packages: typescript: optional: true - '@typescript-eslint/parser@8.14.0': - resolution: {integrity: sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==} + '@typescript-eslint/parser@8.15.0': + resolution: {integrity: sha512-7n59qFpghG4uazrF9qtGKBZXn7Oz4sOMm8dwNWDQY96Xlm2oX67eipqcblDj+oY1lLCbf1oltMZFpUso66Kl1A==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 @@ -1077,25 +1077,26 @@ packages: typescript: optional: true - '@typescript-eslint/scope-manager@8.14.0': - resolution: {integrity: sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==} + '@typescript-eslint/scope-manager@8.15.0': + resolution: {integrity: sha512-QRGy8ADi4J7ii95xz4UoiymmmMd/zuy9azCaamnZ3FM8T5fZcex8UfJcjkiEZjJSztKfEBe3dZ5T/5RHAmw2mA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@typescript-eslint/type-utils@8.14.0': - resolution: {integrity: sha512-Xcz9qOtZuGusVOH5Uk07NGs39wrKkf3AxlkK79RBK6aJC1l03CobXjJbwBPSidetAOV+5rEVuiT1VSBUOAsanQ==} + '@typescript-eslint/type-utils@8.15.0': + resolution: {integrity: sha512-UU6uwXDoI3JGSXmcdnP5d8Fffa2KayOhUUqr/AiBnG1Gl7+7ut/oyagVeSkh7bxQ0zSXV9ptRh/4N15nkCqnpw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: + eslint: ^8.57.0 || ^9.0.0 typescript: '*' peerDependenciesMeta: typescript: optional: true - '@typescript-eslint/types@8.14.0': - resolution: {integrity: sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==} + '@typescript-eslint/types@8.15.0': + resolution: {integrity: sha512-n3Gt8Y/KyJNe0S3yDCD2RVKrHBC4gTUcLTebVBXacPy091E6tNspFLKRXlk3hwT4G55nfr1n2AdFqi/XMxzmPQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@typescript-eslint/typescript-estree@8.14.0': - resolution: {integrity: sha512-OPXPLYKGZi9XS/49rdaCbR5j/S14HazviBlUQFvSKz3npr3NikF+mrgK7CFVur6XEt95DZp/cmke9d5i3vtVnQ==} + '@typescript-eslint/typescript-estree@8.15.0': + resolution: {integrity: sha512-1eMp2JgNec/niZsR7ioFBlsh/Fk0oJbhaqO0jRyQBMgkz7RrFfkqF9lYYmBoGBaSiLnu8TAPQTwoTUiSTUW9dg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: typescript: '*' @@ -1103,14 +1104,18 @@ packages: typescript: optional: true - '@typescript-eslint/utils@8.14.0': - resolution: {integrity: sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==} + '@typescript-eslint/utils@8.15.0': + resolution: {integrity: sha512-k82RI9yGhr0QM3Dnq+egEpz9qB6Un+WLYhmoNcvl8ltMEededhh7otBVVIDDsEEttauwdY/hQoSsOv13lxrFzQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.0 || ^9.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true - '@typescript-eslint/visitor-keys@8.14.0': - resolution: {integrity: sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==} + '@typescript-eslint/visitor-keys@8.15.0': + resolution: {integrity: sha512-h8vYOulWec9LhpwfAdZf2bjr8xIp0KNKnpgqSz0qqYYKAW/QZKw3ktRndbiAtUz4acH4QLQavwZBYCc0wulA/Q==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@ungap/structured-clone@1.2.0': @@ -1559,8 +1564,8 @@ packages: resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==} engines: {node: '>=0.10.0'} - dom-renderer@2.5.1: - resolution: {integrity: sha512-mntEbHrE1FtS7ZLgCVhR3BBwdJonguNhHtFr7NlAbBK8bVwxptqDbFypdxmsCrctz9YAmeHzlCoBwpM4q1dYdw==} + dom-renderer@2.6.0: + resolution: {integrity: sha512-6QgF28BgzGX6DIgRkAidICb8Vfacao3p3P8gs4rUQixgs5Ut4+lgQxdeoKjIbz2STSkKzv1nrlatr4vsLxHfyQ==} peerDependencies: happy-dom: ^14 @@ -1730,8 +1735,8 @@ packages: resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - eslint@9.14.0: - resolution: {integrity: sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==} + eslint@9.15.0: + resolution: {integrity: sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} hasBin: true peerDependencies: @@ -2057,8 +2062,8 @@ packages: resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==} engines: {node: '>=16.17.0'} - husky@9.1.6: - resolution: {integrity: sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==} + husky@9.1.7: + resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==} engines: {node: '>=18'} hasBin: true @@ -3098,6 +3103,9 @@ packages: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} + scheduler-polyfill@1.3.0: + resolution: {integrity: sha512-bIjhi/KJqo08wrq+K2rlB6HNPh871KgREPpVti4zv0mSY1dCi3qr0rRCw+SGHc8/gtKceev29sN//lf6KiYa/g==} + semver@6.3.1: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true @@ -3287,9 +3295,6 @@ packages: resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==} engines: {node: '>=8'} - text-table@0.2.0: - resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} - timsort@0.3.0: resolution: {integrity: sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==} @@ -3417,8 +3422,8 @@ packages: resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==} engines: {node: '>= 0.4'} - typedoc-plugin-mdn-links@3.3.7: - resolution: {integrity: sha512-iFSnYj3XPuc0wh0/VjU2M/sHtNv5pSEysUXrylHxgd5PqTAOZTUswJAcbB7shg+SfxMCqGaiyA0duNmnGs/LQg==} + typedoc-plugin-mdn-links@3.3.8: + resolution: {integrity: sha512-Aewg+SW7hBdffRpT6WnpRwWthoaF9irlzXDKRyvcDVekPZSFujOlh690SV6eCgqrtP7GBJmN0TVeJUq6+6rb1w==} peerDependencies: typedoc: '>= 0.23.14 || 0.24.x || 0.25.x || 0.26.x' @@ -3429,10 +3434,11 @@ packages: peerDependencies: typescript: 4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x - typescript-eslint@8.14.0: - resolution: {integrity: sha512-K8fBJHxVL3kxMmwByvz8hNdBJ8a0YqKzKDX6jRlrjMuNXyd5T2V02HIq37+OiWXvUUOXgOOGiSSOh26Mh8pC3w==} + typescript-eslint@8.15.0: + resolution: {integrity: sha512-wY4FRGl0ZI+ZU4Jo/yjdBu0lVTSML58pu6PgGtJmCufvzfV565pUF6iACQt092uFOd49iLOTX/sEVmHtbSrS+w==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: + eslint: ^8.57.0 || ^9.0.0 typescript: '*' peerDependenciesMeta: typescript: @@ -3876,18 +3882,18 @@ snapshots: dependencies: '@jridgewell/trace-mapping': 0.3.9 - '@eslint-community/eslint-utils@4.4.1(eslint@9.14.0)': + '@eslint-community/eslint-utils@4.4.1(eslint@9.15.0)': dependencies: - eslint: 9.14.0 + eslint: 9.15.0 eslint-visitor-keys: 3.4.3 '@eslint-community/regexpp@4.12.1': {} - '@eslint/compat@1.2.2(eslint@9.14.0)': + '@eslint/compat@1.2.3(eslint@9.15.0)': optionalDependencies: - eslint: 9.14.0 + eslint: 9.15.0 - '@eslint/config-array@0.18.0': + '@eslint/config-array@0.19.0': dependencies: '@eslint/object-schema': 2.1.4 debug: 4.3.7 @@ -3895,9 +3901,9 @@ snapshots: transitivePeerDependencies: - supports-color - '@eslint/core@0.7.0': {} + '@eslint/core@0.9.0': {} - '@eslint/eslintrc@3.1.0': + '@eslint/eslintrc@3.2.0': dependencies: ajv: 6.12.6 debug: 4.3.7 @@ -3911,11 +3917,11 @@ snapshots: transitivePeerDependencies: - supports-color - '@eslint/js@9.14.0': {} + '@eslint/js@9.15.0': {} '@eslint/object-schema@2.1.4': {} - '@eslint/plugin-kit@0.2.2': + '@eslint/plugin-kit@0.2.3': dependencies: levn: 0.4.1 @@ -4999,15 +5005,15 @@ snapshots: dependencies: '@types/yargs-parser': 21.0.3 - '@typescript-eslint/eslint-plugin@8.14.0(@typescript-eslint/parser@8.14.0(eslint@9.14.0)(typescript@5.6.3))(eslint@9.14.0)(typescript@5.6.3)': + '@typescript-eslint/eslint-plugin@8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0)(typescript@5.6.3))(eslint@9.15.0)(typescript@5.6.3)': dependencies: '@eslint-community/regexpp': 4.12.1 - '@typescript-eslint/parser': 8.14.0(eslint@9.14.0)(typescript@5.6.3) - '@typescript-eslint/scope-manager': 8.14.0 - '@typescript-eslint/type-utils': 8.14.0(eslint@9.14.0)(typescript@5.6.3) - '@typescript-eslint/utils': 8.14.0(eslint@9.14.0)(typescript@5.6.3) - '@typescript-eslint/visitor-keys': 8.14.0 - eslint: 9.14.0 + '@typescript-eslint/parser': 8.15.0(eslint@9.15.0)(typescript@5.6.3) + '@typescript-eslint/scope-manager': 8.15.0 + '@typescript-eslint/type-utils': 8.15.0(eslint@9.15.0)(typescript@5.6.3) + '@typescript-eslint/utils': 8.15.0(eslint@9.15.0)(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 8.15.0 + eslint: 9.15.0 graphemer: 1.4.0 ignore: 5.3.2 natural-compare: 1.4.0 @@ -5017,42 +5023,42 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.14.0(eslint@9.14.0)(typescript@5.6.3)': + '@typescript-eslint/parser@8.15.0(eslint@9.15.0)(typescript@5.6.3)': dependencies: - '@typescript-eslint/scope-manager': 8.14.0 - '@typescript-eslint/types': 8.14.0 - '@typescript-eslint/typescript-estree': 8.14.0(typescript@5.6.3) - '@typescript-eslint/visitor-keys': 8.14.0 + '@typescript-eslint/scope-manager': 8.15.0 + '@typescript-eslint/types': 8.15.0 + '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3) + '@typescript-eslint/visitor-keys': 8.15.0 debug: 4.3.7 - eslint: 9.14.0 + eslint: 9.15.0 optionalDependencies: typescript: 5.6.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/scope-manager@8.14.0': + '@typescript-eslint/scope-manager@8.15.0': dependencies: - '@typescript-eslint/types': 8.14.0 - '@typescript-eslint/visitor-keys': 8.14.0 + '@typescript-eslint/types': 8.15.0 + '@typescript-eslint/visitor-keys': 8.15.0 - '@typescript-eslint/type-utils@8.14.0(eslint@9.14.0)(typescript@5.6.3)': + '@typescript-eslint/type-utils@8.15.0(eslint@9.15.0)(typescript@5.6.3)': dependencies: - '@typescript-eslint/typescript-estree': 8.14.0(typescript@5.6.3) - '@typescript-eslint/utils': 8.14.0(eslint@9.14.0)(typescript@5.6.3) + '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3) + '@typescript-eslint/utils': 8.15.0(eslint@9.15.0)(typescript@5.6.3) debug: 4.3.7 + eslint: 9.15.0 ts-api-utils: 1.4.0(typescript@5.6.3) optionalDependencies: typescript: 5.6.3 transitivePeerDependencies: - - eslint - supports-color - '@typescript-eslint/types@8.14.0': {} + '@typescript-eslint/types@8.15.0': {} - '@typescript-eslint/typescript-estree@8.14.0(typescript@5.6.3)': + '@typescript-eslint/typescript-estree@8.15.0(typescript@5.6.3)': dependencies: - '@typescript-eslint/types': 8.14.0 - '@typescript-eslint/visitor-keys': 8.14.0 + '@typescript-eslint/types': 8.15.0 + '@typescript-eslint/visitor-keys': 8.15.0 debug: 4.3.7 fast-glob: 3.3.2 is-glob: 4.0.3 @@ -5064,21 +5070,22 @@ snapshots: transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@8.14.0(eslint@9.14.0)(typescript@5.6.3)': + '@typescript-eslint/utils@8.15.0(eslint@9.15.0)(typescript@5.6.3)': dependencies: - '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0) - '@typescript-eslint/scope-manager': 8.14.0 - '@typescript-eslint/types': 8.14.0 - '@typescript-eslint/typescript-estree': 8.14.0(typescript@5.6.3) - eslint: 9.14.0 + '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0) + '@typescript-eslint/scope-manager': 8.15.0 + '@typescript-eslint/types': 8.15.0 + '@typescript-eslint/typescript-estree': 8.15.0(typescript@5.6.3) + eslint: 9.15.0 + optionalDependencies: + typescript: 5.6.3 transitivePeerDependencies: - supports-color - - typescript - '@typescript-eslint/visitor-keys@8.14.0': + '@typescript-eslint/visitor-keys@8.15.0': dependencies: - '@typescript-eslint/types': 8.14.0 - eslint-visitor-keys: 3.4.3 + '@typescript-eslint/types': 8.15.0 + eslint-visitor-keys: 4.2.0 '@ungap/structured-clone@1.2.0': {} @@ -5550,9 +5557,10 @@ snapshots: dependencies: esutils: 2.0.3 - dom-renderer@2.5.1(typescript@5.6.3): + dom-renderer@2.6.0(typescript@5.6.3): dependencies: declarative-shadow-dom-polyfill: 0.4.0(typescript@5.6.3) + scheduler-polyfill: 1.3.0 tslib: 2.8.1 web-streams-polyfill: 4.0.0 web-utility: 4.4.2(typescript@5.6.3) @@ -5744,11 +5752,11 @@ snapshots: optionalDependencies: source-map: 0.6.1 - eslint-config-prettier@9.1.0(eslint@9.14.0): + eslint-config-prettier@9.1.0(eslint@9.15.0): dependencies: - eslint: 9.14.0 + eslint: 9.15.0 - eslint-plugin-react@7.37.2(eslint@9.14.0): + eslint-plugin-react@7.37.2(eslint@9.15.0): dependencies: array-includes: 3.1.8 array.prototype.findlast: 1.2.5 @@ -5756,7 +5764,7 @@ snapshots: array.prototype.tosorted: 1.1.4 doctrine: 2.1.0 es-iterator-helpers: 1.2.0 - eslint: 9.14.0 + eslint: 9.15.0 estraverse: 5.3.0 hasown: 2.0.2 jsx-ast-utils: 3.3.5 @@ -5770,9 +5778,9 @@ snapshots: string.prototype.matchall: 4.0.11 string.prototype.repeat: 1.0.0 - eslint-plugin-simple-import-sort@12.1.1(eslint@9.14.0): + eslint-plugin-simple-import-sort@12.1.1(eslint@9.15.0): dependencies: - eslint: 9.14.0 + eslint: 9.15.0 eslint-scope@8.2.0: dependencies: @@ -5783,15 +5791,15 @@ snapshots: eslint-visitor-keys@4.2.0: {} - eslint@9.14.0: + eslint@9.15.0: dependencies: - '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0) + '@eslint-community/eslint-utils': 4.4.1(eslint@9.15.0) '@eslint-community/regexpp': 4.12.1 - '@eslint/config-array': 0.18.0 - '@eslint/core': 0.7.0 - '@eslint/eslintrc': 3.1.0 - '@eslint/js': 9.14.0 - '@eslint/plugin-kit': 0.2.2 + '@eslint/config-array': 0.19.0 + '@eslint/core': 0.9.0 + '@eslint/eslintrc': 3.2.0 + '@eslint/js': 9.15.0 + '@eslint/plugin-kit': 0.2.3 '@humanfs/node': 0.16.6 '@humanwhocodes/module-importer': 1.0.1 '@humanwhocodes/retry': 0.4.1 @@ -5819,7 +5827,6 @@ snapshots: minimatch: 3.1.2 natural-compare: 1.4.0 optionator: 0.9.4 - text-table: 0.2.0 transitivePeerDependencies: - supports-color @@ -6153,7 +6160,7 @@ snapshots: human-signals@5.0.0: {} - husky@9.1.6: {} + husky@9.1.7: {} iconv-lite@0.6.3: dependencies: @@ -7425,6 +7432,8 @@ snapshots: dependencies: xmlchars: 2.2.0 + scheduler-polyfill@1.3.0: {} + semver@6.3.1: {} semver@7.6.3: {} @@ -7635,8 +7644,6 @@ snapshots: glob: 7.2.3 minimatch: 3.1.2 - text-table@0.2.0: {} - timsort@0.3.0: {} tldts-core@6.1.61: {} @@ -7768,7 +7775,7 @@ snapshots: is-typed-array: 1.1.13 possible-typed-array-names: 1.0.0 - typedoc-plugin-mdn-links@3.3.7(typedoc@0.26.11(typescript@5.6.3)): + typedoc-plugin-mdn-links@3.3.8(typedoc@0.26.11(typescript@5.6.3)): dependencies: typedoc: 0.26.11(typescript@5.6.3) @@ -7781,15 +7788,15 @@ snapshots: typescript: 5.6.3 yaml: 2.6.0 - typescript-eslint@8.14.0(eslint@9.14.0)(typescript@5.6.3): + typescript-eslint@8.15.0(eslint@9.15.0)(typescript@5.6.3): dependencies: - '@typescript-eslint/eslint-plugin': 8.14.0(@typescript-eslint/parser@8.14.0(eslint@9.14.0)(typescript@5.6.3))(eslint@9.14.0)(typescript@5.6.3) - '@typescript-eslint/parser': 8.14.0(eslint@9.14.0)(typescript@5.6.3) - '@typescript-eslint/utils': 8.14.0(eslint@9.14.0)(typescript@5.6.3) + '@typescript-eslint/eslint-plugin': 8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0)(typescript@5.6.3))(eslint@9.15.0)(typescript@5.6.3) + '@typescript-eslint/parser': 8.15.0(eslint@9.15.0)(typescript@5.6.3) + '@typescript-eslint/utils': 8.15.0(eslint@9.15.0)(typescript@5.6.3) + eslint: 9.15.0 optionalDependencies: typescript: 5.6.3 transitivePeerDependencies: - - eslint - supports-color typescript@5.6.3: {} diff --git a/preview/Clock.tsx b/preview/Clock.tsx index 183a068..f503ddb 100644 --- a/preview/Clock.tsx +++ b/preview/Clock.tsx @@ -9,6 +9,7 @@ import { reaction, WebCell } from '../source'; +import { renderMode } from './utility'; class ClockModel { @observable @@ -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 { @@ -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() { diff --git a/preview/index.tsx b/preview/index.tsx index ce22449..fc76446 100644 --- a/preview/index.tsx +++ b/preview/index.tsx @@ -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(, document.querySelector('#app')!); +new DOMRenderer().render( + , + document.querySelector('#app')!, + renderMode +); diff --git a/preview/utility.ts b/preview/utility.ts new file mode 100644 index 0000000..7bed32c --- /dev/null +++ b/preview/utility.ts @@ -0,0 +1,3 @@ +import { parseURLData } from 'web-utility'; + +export const { renderMode } = parseURLData() as { renderMode: 'sync' }; diff --git a/source/WebCell.tsx b/source/WebCell.tsx index 1a487b0..6bed58a 100644 --- a/source/WebCell.tsx +++ b/source/WebCell.tsx @@ -1,4 +1,4 @@ -import { DOMRenderer, JsxProps, VNode } from 'dom-renderer'; +import { DOMRenderer, JsxProps, RenderMode, VNode } from 'dom-renderer'; import { CustomElement, delegate, @@ -11,6 +11,7 @@ export interface ComponentMeta Partial { tagName: string; transitible?: boolean; + renderMode?: RenderMode; } export type ClassComponent = CustomElementConstructor; @@ -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?.(); @@ -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;