Runtime Error When Using `history.pushState` or `history.replaceState`

[Rican7]

Description

When using a raw history.pushState or history.replaceState call and either not passing a 3rd argument or passing an argument that doesn't parse to a valid URL, a runtime error occurs.

It seems like the code in navigator.js#createEventListeners and navigator.js#runHooksBeforeUrlChange are expecting that a url argument will always be passed, when that's not actually the case.

Examples:

history.replaceState({}, "");

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'startsWith')
    at parseUrl (index.js:120)
    at urlToRoute (urlToRoute.js:12)
    at runHooksBeforeUrlChange (navigator.js:124)

history.pushState({}, "", "");

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL
    at parseUrl (index.js:121)
    at urlToRoute (urlToRoute.js:12)
    at runHooksBeforeUrlChange (navigator.js:124)

Package Versions

$ npm ls --depth=0 @roxi/routify svelte
variedvibe.com@1.0.0 REDACTED
├── @roxi/routify@2.18.4
└── svelte@3.44.3

[Rican7]

FWIW, I've found a temporary workaround to this issue:

Simply pass the current location to the history function, like this:

history.pushState({ foo: true }, "", document.location.href);

However, that also brings up another bug, which is that Routify checks the URL based solely on only a part of the location, so you'll also need this for a complete workaround:

1. Either pass those explicit parts to the history function, like this:

history.pushState({ foo: true }, "", location.pathname + location.search + location.hash);

2. OR, ignore the event based on the state that you pass.

import { beforeUrlChange } from "@roxi/routify";

history.pushState({ foo: true }, "", document.location.href);

$beforeUrlChange((event) => {
    if (event.state?.hasOwnProperty("foo")) {
        // Ignore this event, as we triggered it
        return false;
    }

    return true;
});

[jakobrosenberg]

Hi @Rican7

Here's the culprit.

routify/runtime/navigator.js

Lines 53 to 56 in af5b7f3

	history[eventName] = async function (state = {}, title, url) {
	// do nothing if we're navigating to the current page
	const currentUrl = location.pathname + location.search + location.hash
	if (url === currentUrl) return false

We could fix it by appending this on line 57

if (!url) url = currentUrl

Can I ask what the use case is and if you would be interested in doing a PR?

[Rican7]

Can I ask what the use case is

Sure! I was trying to use history.pushState to manage my own history state for allowing a modal to be closed via the back-button via native history and not using a hashcode.

if you would be interested in doing a PR?

Sure, I could probably do that. 😃

[jakobrosenberg]

I'm intrigued. Kinda like these? https://example.routify.dev/example/modal/basic

Also, if you aren't set to deploy within the next few months, you should totally try R3. 😇

[Rican7]

Ha, yea! Like those!

Those would work great, but I don't want the modal to be "linkable" necessarily, either. So I was actually pushing state without passing the 3rd argument to history.pushState.

And yea, I'd love to try R3, but I'm currently working on a site in production: https://variedvibe.com/