From edbc637f88bd5de5f2a9fae754a087a37705f1f7 Mon Sep 17 00:00:00 2001 From: TechQuery Date: Wed, 17 Jan 2024 02:49:07 +0800 Subject: [PATCH] [fix] Page Switching bugs --- ReadMe.md | 2 +- package.json | 13 ++++++------- pnpm-lock.yaml | 26 +++++++++++++------------- source/History.ts | 8 +++++--- source/Router.tsx | 14 +++++++++++--- 5 files changed, 36 insertions(+), 27 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index e359bf6..92b18cb 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -9,7 +9,7 @@ ## Demo -https://web-cell.dev/scaffold/ +https://web-cell-scaffold.vercel.app/ ## Feature diff --git a/package.json b/package.json index c49da8b..0d04c3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cell-router", - "version": "3.0.0-rc.3", + "version": "3.0.0-rc.5", "license": "LGPL-3.0", "description": "Web Component Router based on WebCell & MobX", "keywords": [ @@ -25,7 +25,7 @@ "module": "dist/index.esm.js", "dependencies": { "@swc/helpers": "^0.5.3", - "dom-renderer": "^2.0.5", + "dom-renderer": "^2.0.6", "mobx": ">=6.11", "regenerator-runtime": "^0.14.1", "urlpattern-polyfill": "^9.0.0", @@ -47,21 +47,20 @@ "koapache": "^2.2.2", "lint-staged": "^15.2.0", "parcel": "~2.11.0", - "prettier": "^3.2.1", + "prettier": "^3.2.2", "process": "^0.11.10", "puppeteer-core": "^21.7.0", "rimraf": "^5.0.5", "ts-jest": "^29.1.1", "typedoc": "^0.25.7", - "typedoc-plugin-mdn-links": "^3.1.11", + "typedoc-plugin-mdn-links": "^3.1.12", "typescript": "~5.3.3" }, "scripts": { "prepare": "husky install", - "start": "cd test/ && npm start", "set-chrome": "app-find chrome -c", - "preview": "cd test/ && rimraf .parcel-cache/ dist/ && parcel --open", - "pack-preview": "cd test/ && rimraf .parcel-cache/ dist/ && parcel build --public-url=. --dist-dir=../docs/preview/", + "preview": "cd test/ && rimraf ../.parcel-cache/ dist/ && parcel --open", + "pack-preview": "cd test/ && rimraf ../.parcel-cache/ dist/ && parcel build --public-url=. --dist-dir=../docs/preview/", "pack-dist": "rimraf dist/ && parcel build source/index.ts", "test": "lint-staged && npm run pack-dist && npm run pack-preview", "pack-docs": "rimraf docs/ && typedoc source/", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 93c0dbd..72960ef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ dependencies: specifier: ^0.5.3 version: 0.5.3 dom-renderer: - specifier: ^2.0.5 - version: 2.0.5(typescript@5.3.3) + specifier: ^2.0.6 + version: 2.0.6(typescript@5.3.3) mobx: specifier: '>=6.11' version: 6.12.0 @@ -71,8 +71,8 @@ devDependencies: specifier: ~2.11.0 version: 2.11.0(@swc/helpers@0.5.3)(typescript@5.3.3) prettier: - specifier: ^3.2.1 - version: 3.2.1 + specifier: ^3.2.2 + version: 3.2.2 process: specifier: ^0.11.10 version: 0.11.10 @@ -89,8 +89,8 @@ devDependencies: specifier: ^0.25.7 version: 0.25.7(typescript@5.3.3) typedoc-plugin-mdn-links: - specifier: ^3.1.11 - version: 3.1.11(typedoc@0.25.7) + specifier: ^3.1.12 + version: 3.1.12(typedoc@0.25.7) typescript: specifier: ~5.3.3 version: 5.3.3 @@ -2903,8 +2903,8 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dev: true - /dom-renderer@2.0.5(typescript@5.3.3): - resolution: {integrity: sha512-9N5Da1qcv2y2i8UV77aJkHOHScWhmmiJIuWaiqgmIcPRn15IhQLbagJIt5Dhg4x08rf6bT9WmOccPKHMAPJDDw==} + /dom-renderer@2.0.6(typescript@5.3.3): + resolution: {integrity: sha512-gsf0N9EY1ambqrg8/eOeGwbifqxyJ9vQN8zWDdmj88dYsvwxv2kSV34T6Nt8fu0kYrwUsYadb4tdFjTrPRM7vw==} dependencies: tslib: 2.6.2 web-utility: 4.1.3(typescript@5.3.3) @@ -5272,8 +5272,8 @@ packages: hasBin: true dev: true - /prettier@3.2.1: - resolution: {integrity: sha512-qSUWshj1IobVbKc226Gw2pync27t0Kf0EdufZa9j7uBSJay1CC+B3K5lAAZoqgX3ASiKuWsk6OmzKRetXNObWg==} + /prettier@3.2.2: + resolution: {integrity: sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==} engines: {node: '>=14'} hasBin: true dev: true @@ -5988,8 +5988,8 @@ packages: mime-types: 2.1.35 dev: true - /typedoc-plugin-mdn-links@3.1.11(typedoc@0.25.7): - resolution: {integrity: sha512-WmEt+FD6HKXCkcbQEmdVKtkEEJb9SLmUnGnKwKM9U5grocy9TOUQ1GmO2cXnzMBQ2i/o/wF8LK4JQf5Vch3DKg==} + /typedoc-plugin-mdn-links@3.1.12(typedoc@0.25.7): + resolution: {integrity: sha512-B6GLXAq2kL7crem0uJYAN7uMmbBZdf+znUanwk/u6gQQFKveUSzCZrtO9pb0ZIe2uCv1T60XDfcO+bTm7R18aw==} peerDependencies: typedoc: '>= 0.23.14 || 0.24.x || 0.25.x' dependencies: @@ -6130,7 +6130,7 @@ packages: jsdom: '>=21' dependencies: '@swc/helpers': 0.5.3 - dom-renderer: 2.0.5(typescript@5.3.3) + dom-renderer: 2.0.6(typescript@5.3.3) element-internals-polyfill: 1.3.10 mobx: 6.12.0 regenerator-runtime: 0.14.1 diff --git a/source/History.ts b/source/History.ts index a2585a3..8cedce8 100644 --- a/source/History.ts +++ b/source/History.ts @@ -16,10 +16,10 @@ const baseURL = document.querySelector('base')?.href || location.origin, export class History { @observable - accessor path = ''; + accessor path: string; @observable - accessor oldPath = ''; + accessor oldPath: string; constructor() { this.restore(); @@ -63,7 +63,9 @@ export class History { return parseURLData(after || before); } - static match(pattern: string, path: string) { + static match(pattern: string, path?: string) { + if (!path) return; + const { pathname, hash } = new URLPattern(pattern, baseURL).exec( new URL(path.split('?')[0], baseURL) diff --git a/source/Router.tsx b/source/Router.tsx index 1fd83ef..83a0b1e 100644 --- a/source/Router.tsx +++ b/source/Router.tsx @@ -52,13 +52,21 @@ export class CellRoute extends HTMLElement implements WebCell { return History.match(this.path, history.oldPath); } + pageStyle: WebCellProps['style'] = { + position: 'absolute', + top: '0', + left: '0', + width: '100%' + }; + connectedCallback() { if (getComputedStyle(this.parentElement).position === 'static') this.parentElement.style.position = 'relative'; } render() { - const { inAnimation, outAnimation, matched, oldMatched } = this, + const { pageStyle, inAnimation, outAnimation, matched, oldMatched } = + this, Tag = this.component, { path, oldPath } = history; @@ -68,7 +76,7 @@ export class CellRoute extends HTMLElement implements WebCell { component={props => ( (