From 9b857515d0802225c432a1e924d5e1996d6d1b2e Mon Sep 17 00:00:00 2001 From: Jorge Alvarez Date: Tue, 8 Dec 2020 12:15:47 +0100 Subject: [PATCH] Fix issue with history when using browser's back button. --- CHANGELOG.md | 4 ++ package-lock.json | 115 +++++++++++++++++++--------------------- package.json | 6 +-- src/router/current.js | 11 ++-- src/spa_router.js | 19 +++---- test/spa_router.test.js | 24 ++++++++- 6 files changed, 101 insertions(+), 78 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fe7fbab..8f707a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte Router changelog +## 5.8.2 + +Fix issue with history when using browser's back button. + ## 5.8.1 Improve handling of href links. diff --git a/package-lock.json b/package-lock.json index fd5248c..5094ef4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte-router-spa", - "version": "5.8.1", + "version": "5.8.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -44,9 +44,9 @@ } }, "@eslint/eslintrc": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz", - "integrity": "sha512-XRUeBZ5zBWLYgSANMpThFddrZZkEbGHgUdt5UJjZfnlN9BGCiUBrf+nvbRupSjMvqzwnQN0qwCmOxITt1cfywA==", + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.2.tgz", + "integrity": "sha512-EfB5OHNYp1F4px/LI/FEnGylop7nOqkQ1LRzCM0KccA2U8tvV8w01KBv37LbO7nW4H+YhKyo2LcJhRwjjV17QQ==", "dev": true, "requires": { "ajv": "^6.12.4", @@ -575,13 +575,13 @@ } }, "eslint": { - "version": "7.14.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.14.0.tgz", - "integrity": "sha512-5YubdnPXrlrYAFCKybPuHIAH++PINe1pmKNc5wQRB9HSbqIK1ywAnntE3Wwua4giKu0bjligf1gLF6qxMGOYRA==", + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.15.0.tgz", + "integrity": "sha512-Vr64xFDT8w30wFll643e7cGrIkPEU50yIiI36OdSIDoSGguIeaLzBo0vpGvzo9RECUqq7htURfwEtKqwytkqzA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", - "@eslint/eslintrc": "^0.2.1", + "@eslint/eslintrc": "^0.2.2", "ajv": "^6.10.0", "chalk": "^4.0.0", "cross-spawn": "^7.0.2", @@ -591,10 +591,10 @@ "eslint-scope": "^5.1.1", "eslint-utils": "^2.1.0", "eslint-visitor-keys": "^2.0.0", - "espree": "^7.3.0", + "espree": "^7.3.1", "esquery": "^1.2.0", "esutils": "^2.0.2", - "file-entry-cache": "^5.0.1", + "file-entry-cache": "^6.0.0", "functional-red-black-tree": "^1.0.1", "glob-parent": "^5.0.0", "globals": "^12.1.0", @@ -694,13 +694,13 @@ "dev": true }, "espree": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz", - "integrity": "sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz", + "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==", "dev": true, "requires": { "acorn": "^7.4.0", - "acorn-jsx": "^5.2.0", + "acorn-jsx": "^5.3.1", "eslint-visitor-keys": "^1.3.0" }, "dependencies": { @@ -795,12 +795,12 @@ "dev": true }, "file-entry-cache": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz", - "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.0.tgz", + "integrity": "sha512-fqoO76jZ3ZnYrXLDRxBR1YvOvc0k844kcOg40bgsPrE25LAb/PDqTY+ho64Xh2c8ZXgIKldchCFHczG2UVRcWA==", "dev": true, "requires": { - "flat-cache": "^2.0.1" + "flat-cache": "^3.0.4" } }, "fill-range": { @@ -829,20 +829,19 @@ "dev": true }, "flat-cache": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz", - "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", + "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", "dev": true, "requires": { - "flatted": "^2.0.0", - "rimraf": "2.6.3", - "write": "1.0.3" + "flatted": "^3.1.0", + "rimraf": "^3.0.2" } }, "flatted": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz", - "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz", + "integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==", "dev": true }, "forever-agent": { @@ -1190,6 +1189,15 @@ "chalk": "^4.0.0" } }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, "mime-db": { "version": "1.43.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz", @@ -1214,21 +1222,6 @@ "brace-expansion": "^1.1.7" } }, - "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, - "mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "dev": true, - "requires": { - "minimist": "^1.2.5" - } - }, "mocha": { "version": "8.2.1", "resolved": "https://registry.npmjs.org/mocha/-/mocha-8.2.1.tgz", @@ -1729,9 +1722,9 @@ "dev": true }, "rimraf": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", - "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "dev": true, "requires": { "glob": "^7.1.3" @@ -1756,10 +1749,13 @@ "dev": true }, "semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } }, "serialize-javascript": { "version": "5.0.1", @@ -1891,9 +1887,9 @@ } }, "svelte": { - "version": "3.30.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.30.0.tgz", - "integrity": "sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==", + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.0.tgz", + "integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==", "dev": true }, "symbol-tree": { @@ -2123,15 +2119,6 @@ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true }, - "write": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz", - "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==", - "dev": true, - "requires": { - "mkdirp": "^0.5.1" - } - }, "xml-name-validator": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", @@ -2144,6 +2131,12 @@ "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", "dev": true }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "yargs": { "version": "13.3.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz", diff --git a/package.json b/package.json index 36428ee..375faa4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte-router-spa", - "version": "5.8.1", + "version": "5.8.2", "description": "A full featured router component for Svelte and your Single Page Applications.", "main": "src/index.js", "svelte": "src/index.js", @@ -15,10 +15,10 @@ "license": "MIT", "devDependencies": { "chai": "^4.2.0", - "eslint": "^7.14.0", + "eslint": "^7.15.0", "mocha": "^8.2.1", "mocha-jsdom": "^2.0.0", - "svelte": "^3.30.0" + "svelte": "^3.31.0" }, "dependencies": { "url-params-parser": "^1.0.3" diff --git a/src/router/current.js b/src/router/current.js index b4bc177..69bf8ba 100644 --- a/src/router/current.js +++ b/src/router/current.js @@ -6,9 +6,9 @@ function RouterCurrent(trackPage) { const trackPageview = trackPage || false let activeRoute = '' - function setActive(newRoute) { + function setActive(newRoute, updateBrowserHistory) { activeRoute = newRoute.path - pushActiveRoute(newRoute) + pushActiveRoute(newRoute, updateBrowserHistory) } function active() { @@ -40,11 +40,14 @@ function RouterCurrent(trackPage) { } } - function pushActiveRoute(newRoute) { + function pushActiveRoute(newRoute, updateBrowserHistory) { if (typeof window !== 'undefined') { const pathAndSearch = pathWithQueryParams(newRoute) - window.history.pushState({ page: pathAndSearch }, '', pathAndSearch) + if (updateBrowserHistory) { + window.history.pushState({ page: pathAndSearch }, '', pathAndSearch) + } + // Moving back in history does not update browser history but does update tracking. if (trackPageview) { gaTracking(pathAndSearch) } diff --git a/src/spa_router.js b/src/spa_router.js index f89ab4e..7d23331 100644 --- a/src/spa_router.js +++ b/src/spa_router.js @@ -41,10 +41,10 @@ function SpaRouter(routes, currentUrl, options = {}) { * Redirect current route to another * @param destinationUrl **/ - function navigateNow(destinationUrl) { + function navigateNow(destinationUrl, updateBrowserHistory) { if (typeof window !== 'undefined') { if (destinationUrl === NotFoundPage) { - routerCurrent.setActive({ path: NotFoundPage }) + routerCurrent.setActive({ path: NotFoundPage }, updateBrowserHistory) } else { navigateTo(destinationUrl) } @@ -53,13 +53,13 @@ function SpaRouter(routes, currentUrl, options = {}) { return destinationUrl } - function setActiveRoute() { + function setActiveRoute(updateBrowserHistory = true) { const currentRoute = findActiveRoute() if (currentRoute.redirectTo) { - return navigateNow(currentRoute.redirectTo) + return navigateNow(currentRoute.redirectTo, updateBrowserHistory) } - routerCurrent.setActive(currentRoute) + routerCurrent.setActive(currentRoute, updateBrowserHistory) activeRoute.set(currentRoute) return currentRoute @@ -86,15 +86,16 @@ function localisedRoute(pathName, language) { * Updates the current active route and updates the browser pathname * @param pathName String * @param language String + * @param updateBrowserHistory Boolean **/ -function navigateTo(pathName, language = null) { +function navigateTo(pathName, language = null, updateBrowserHistory = true) { pathName = removeSlash(pathName, 'lead') if (language) { routerOptions.langConvertTo = language } - return SpaRouter(userDefinedRoutes, 'http://fake.com/' + pathName, routerOptions).setActiveRoute() + return SpaRouter(userDefinedRoutes, 'http://fake.com/' + pathName, routerOptions).setActiveRoute(updateBrowserHistory) } /** @@ -131,8 +132,8 @@ if (typeof window !== 'undefined') { window.onpopstate = function (_event) { let navigatePathname = window.location.pathname + window.location.search + window.location.hash - - navigateTo(navigatePathname) + console.log('here we are') + navigateTo(navigatePathname, null, false) } } diff --git a/test/spa_router.test.js b/test/spa_router.test.js index fcf39cf..8ca89a2 100644 --- a/test/spa_router.test.js +++ b/test/spa_router.test.js @@ -22,6 +22,28 @@ function thisIsTrue() { } describe('Router', function () { + describe('When there are no routes defined and update browser history is false', function () { + beforeEach(function () { + testRouter = SpaRouter([], pathName).setActiveRoute(false) + }) + + it('should set the component', function () { + expect(testRouter.component).to.be.undefined + }) + + it('should set the route name to 404', function () { + expect(testRouter.name).to.be.undefined + }) + + it('should set the route path to 404', function () { + expect(testRouter.path).to.be.undefined + }) + + it('should not update history', function () { + expect(global.window.history.state).to.be.null + }) + }) + describe('When there are no routes defined', function () { beforeEach(function () { testRouter = SpaRouter([], pathName).setActiveRoute() @@ -1595,7 +1617,7 @@ describe('onlyIf', function () { ] pathName = 'http://web.app/admin' - SpaRouter(routes, pathName).setActiveRoute() + SpaRouter(routes, pathName).setActiveRoute(true) }) it('should render admin', function () {