!Web Platform Tests 139/306 !92.8%25 lines covered !92.8%25 statements covered !83.76%25 functions covered !83.32%25 branches covered

- Package Registry Link - GitHub
- Package Registry Link - npm

``
npm i --save @virtualstate/navigation
`

_Or_

`
yarn add @virtualstate/navigation
`

Then

`typescript
import { Navigation } from "@virtualstate/navigation";
`


- Package Registry Link - Skypack

`typescript
const { Navigation } = await import("https://cdn.skypack.dev/@virtualstate/navigation");
`

_Or_

`typescript
import { Navigation } from "https://cdn.skypack.dev/@virtualstate/navigation";
`


importmap documentation

`html


`


Navigation

`typescript
import { Navigation } from "@virtualstate/navigation";

const navigation = new Navigation();

// Set initial url
navigation.navigate("/");

navigation.navigate("/skipped");

// Use .finished to wait for the transition to complete
await navigation.navigate("/awaited").finished;

`

Waiting for events

`typescript
import { Navigation } from "@virtualstate/navigation";

const navigation = new Navigation();

navigation.addEventListener("navigate", async ({ destination, preventDefault }) => {
if (new URL(destination.url).pathname === "/disallow") {
preventDefault();
}
});

await navigation.navigate("/allowed").finished; // Resolves
await navigation.navigate("/disallow").finished; // Rejects

`

Transitions

`typescript
import { Navigation } from "@virtualstate/navigation";
import { loadPhotoIntoCache } from "./cache";

const navigation = new Navigation();

navigation.addEventListener("navigate", async ({ destination, intercept }) => {
intercept({
async handler() {
await loadPhotoIntoCache(destination.url)
}
});
});
`

URLPattern

You can match destination.url using URLPattern

`typescript
import {Navigation} from "@virtualstate/navigation";
import {URLPattern} from "urlpattern-polyfill";

const navigation = new Navigation();

navigation.addEventListener("navigate", async ({destination, intercept}) => {
const pattern = new URLPattern({ pathname: "/books/:id" });
const match = pattern.exec(destination.url);
if (match) {
intercept({
handler: transition
});
}

async function transition() {
console.log("load book", match.pathname.groups.id)
}
});

navigation.navigate("/book/1");
`

State

`typescript

import { Navigation } from "@virtualstate/navigation";

const navigation = new Navigation();

navigation.addEventListener("currententrychange", () => {
console.log({ updatedState: navigation.currentEntry?.getState() });
});

await navigation.updateCurrentEntry({
state: {
items: [
"first",
"second"
],
index: 0
}
}).finished;

await navigation.updateCurrentEntry({
state: {
...navigation.currentEntry.getState(),
index: 1
}
}).finished;
`


See @types/dom-navigation for a standardised type definition for the Navigation API
which can be utilised alongside this polyfill.

`bash
yarn add --dev @types/dom-navigation
`

This should then be included as a type in your tsconfig.json:

`json
{
"compilerOptions": {
"types": [
"dom-navigation"
]
}
}
`

You may want to set a custom serializer to store state in history

The default serializer is JSON

In the past, a structured clone like serializer was used. This may be useful for you if
you're using native types rather than just JSON compatible values.

An example of making use of a custom serializer with the polyfill:

`typescript
import { setSerializer } from "@virtualstate/navigation/polyfill";
import { serialize, deserialize } from "@ungap/structured-clone";

setSerializer({
stringify(value) {
return serialize(value)
},
parse(value) {
return deserialize(value)
}
});
``