[add] Basic Support of View Transition API

[optimize] upgrade to PNPM 9 & other latest Upstream packages

Author: TechQuery

.github/workflows/main.yml

@@ -11,7 +11,7 @@ jobs:
 
             - uses: pnpm/action-setup@v2
               with:
-                  version: 8
+                  version: 9
             - uses: actions/setup-node@v3
               with:
                   node-version: 18

.github/workflows/push.yml

@@ -15,7 +15,7 @@ jobs:
 
             - uses: pnpm/action-setup@v2
               with:
-                  version: 8
+                  version: 9
             - uses: actions/setup-node@v3
               with:
                   node-version: 18

Migrating.md

@@ -60,7 +60,7 @@ MobX's [`@observable`][4] & [`reaction()`][5] are awesome APIs to implement thes
 npm install mobx
 ```
 
-On the other hand, [`mobx-web-cell` adapter][6] has been merged into the core package. And cause of replacing **Prototype Overwrite** with **Class Inheritance** to refactor **Class Mixins**, `@observer` decorator should follow strict order to make observation work:
+On the other hand, [`mobx-web-cell` adapter][6] has been merged into the core package.
 
 ```diff
 +import { JsxProps } from 'dom-renderer';

ReadMe.md

@@ -283,7 +283,7 @@ export class MyButton extends HTMLElement {
             <>
                 <link
                     rel="stylesheet"
-                    href="https://unpkg.com/[email protected].2/dist/css/bootstrap.min.css"
+                    href="https://unpkg.com/[email protected].3/dist/css/bootstrap.min.css"
                 />
                 <a className="btn">
                     <slot />
@@ -496,7 +496,8 @@ import 'web-cell/polyfill';
 -   [Shadow DOM][25]
 -   [Element Internals][26]
 -   [CSS variables][27]
--   [ECMAScript 6+][28]
+-   [View transitions][28]
+-   [ECMAScript 6+][29]
 -   [TypeScript 5+][4]
 
 ## Life Cycle hooks
@@ -573,7 +574,8 @@ We recommend these libraries to use with WebCell:
 [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/
+[28]: https://developer.chrome.com/docs/web-platform/view-transitions/
+[29]: http://es6-features.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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-cell",
-    "version": "3.0.0-rc.15",
+    "version": "3.0.0-rc.16",
     "description": "Web Components engine based on VDOM, JSX, MobX & TypeScript",
     "keywords": [
         "web",
@@ -26,11 +26,11 @@
     "source": "source/index.ts",
     "types": "dist/index.d.ts",
     "dependencies": {
-        "@swc/helpers": "^0.5.6",
-        "dom-renderer": "^2.1.3",
+        "@swc/helpers": "^0.5.11",
+        "dom-renderer": "^2.1.7",
         "mobx": ">=6.11",
         "regenerator-runtime": "^0.14.1",
-        "web-utility": "^4.1.3"
+        "web-utility": "^4.4.0"
     },
     "peerDependencies": {
         "@webcomponents/webcomponentsjs": "^2.8",
@@ -40,33 +40,34 @@
     },
     "devDependencies": {
         "@jest/types": "^29.6.3",
-        "@parcel/config-default": "~2.11.0",
-        "@parcel/packager-ts": "~2.11.0",
-        "@parcel/transformer-typescript-tsc": "~2.11.0",
-        "@parcel/transformer-typescript-types": "~2.11.0",
+        "@parcel/config-default": "~2.12.0",
+        "@parcel/packager-ts": "~2.12.0",
+        "@parcel/transformer-typescript-tsc": "~2.12.0",
+        "@parcel/transformer-typescript-types": "~2.12.0",
+        "@types/dom-view-transitions": "^1.0.4",
         "@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",
+        "@typescript-eslint/eslint-plugin": "^7.13.0",
+        "@typescript-eslint/parser": "^7.13.0",
+        "core-js": "^3.37.1",
+        "element-internals-polyfill": "^1.3.11",
+        "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
-        "husky": "^9.0.10",
+        "husky": "^9.0.11",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "jsdom": "^24.0.0",
-        "lint-staged": "^15.2.2",
+        "jsdom": "^24.1.0",
+        "lint-staged": "^15.2.7",
         "open-cli": "^8.0.0",
-        "parcel": "~2.11.0",
-        "prettier": "^3.2.5",
+        "parcel": "~2.12.0",
+        "prettier": "^3.3.2",
         "prettier-plugin-sh": "^0.14.0",
         "replace": "^1.2.2",
-        "rimraf": "^5.0.5",
-        "ts-jest": "^29.1.2",
+        "rimraf": "^5.0.7",
+        "ts-jest": "^29.1.4",
         "ts-node": "^10.9.2",
-        "typedoc": "^0.25.8",
-        "typedoc-plugin-mdn-links": "^3.1.15",
-        "typescript": "~5.3.3"
+        "typedoc": "^0.25.13",
+        "typedoc-plugin-mdn-links": "^3.1.29",
+        "typescript": "~5.4.5"
     },
     "scripts": {
         "prepare": "husky",