Skip to content

Commit 02244b8

Browse files
fabiancookfabiancook
committed
NavigationTransitionBeforeCommit & Polyfill server side navigation
1 parent ff8680e commit 02244b8

10 files changed

Lines changed: 247 additions & 26 deletions

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@ All notable changes to this project will be documented in this file.
77
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
88
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
99

10+
## [1.0.1-alpha.212] - 2025-10-11
11+
12+
### Added
13+
14+
- Include `NavigationTransitionBeforeCommit` symbol event on `NavigationTransition` to allow for last chance commit cancellation
15+
16+
### Changed
17+
18+
- Polyfill uses `location.href` for `push` events for `sameDocument` transitions that do not have an intercept added through the event lifecycle [Issue #42](https://github.com/virtualstate/navigation/issues/42)
19+
1020
## [1.0.1-alpha.211] - 2025-09-14
1121

1222
> Publish change only, tags version as `latest` in npm

‎example/no-intercept-esm.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Polyfill Example</title>
6+
7+
</head>
8+
<body>
9+
<script type="module">
10+
import { applyPolyfill } from "./rollup.js";
11+
12+
console.log("Applying polyfill")
13+
applyPolyfill();
14+
console.log("Applied polyfill")
15+
16+
const app = document.getElementById("app");
17+
const urlSpan = document.getElementById("url");
18+
const button = document.querySelector("#programmatic-navigation");
19+
20+
button.addEventListener("click", () => {
21+
window.navigation.navigate("/esm.html");
22+
});
23+
24+
let updateCount = 0;
25+
26+
const onNavigate = (event) => {
27+
const url = new URL(event.destination.url);
28+
29+
console.log(event)
30+
31+
if (url.pathname === "/esm.html") {
32+
return;
33+
}
34+
35+
event.intercept({
36+
async handler() {
37+
// Do something client side
38+
app.innerText = `Updated ${updateCount += 1}!`;
39+
}
40+
});
41+
}
42+
43+
window.navigation.addEventListener("navigate", onNavigate);
44+
45+
console.log(navigation.currentEntry)
46+
47+
urlSpan.innerText = new URL(navigation.currentEntry.url).pathname;
48+
console.log(navigation.currentEntry.url)
49+
</script>
50+
51+
<p>Current Url <span id="url"></span></p>
52+
<button type="button" id="programmatic-navigation">Navigate</button>
53+
<a href="/no-intercept-esm.html">Current Page</a>
54+
<a href="/some-page">Navigation Page</a>
55+
56+
<div id="app"></div>
57+
</body>
58+
</html>

‎example/no-intercept-native.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Polyfill Example</title>
6+
7+
</head>
8+
<body>
9+
<script type="module">
10+
11+
console.log("No polyfill");
12+
13+
const app = document.getElementById("app");
14+
const urlSpan = document.getElementById("url");
15+
const button = document.querySelector("#programmatic-navigation");
16+
17+
if (typeof navigation === "undefined") {
18+
app.innerHTML = "Navigation API not available";
19+
throw new Error(app.innerHTML);
20+
}
21+
22+
button.addEventListener("click", () => {
23+
window.navigation.navigate("/esm.html");
24+
});
25+
26+
let updateCount = 0;
27+
28+
const onNavigate = (event) => {
29+
const url = new URL(event.destination.url);
30+
31+
console.log(event)
32+
33+
if (url.pathname === "/esm.html") {
34+
return;
35+
}
36+
37+
event.intercept({
38+
async handler() {
39+
// Do something client side
40+
app.innerText = `Updated ${updateCount += 1}!`;
41+
}
42+
});
43+
}
44+
45+
window.navigation.addEventListener("navigate", onNavigate);
46+
47+
console.log(navigation.currentEntry)
48+
49+
urlSpan.innerText = new URL(navigation.currentEntry.url).pathname;
50+
console.log(navigation.currentEntry.url)
51+
</script>
52+
53+
<p>Current Url <span id="url"></span></p>
54+
<button type="button" id="programmatic-navigation">Navigate</button>
55+
<a href="/no-intercept-esm.html">Current Page</a>
56+
<a href="/some-page">Navigation Page</a>
57+
58+
<div id="app"></div>
59+
</body>
60+
</html>

‎example/polyfill-rollup.js‎

Lines changed: 28 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/rollup.js‎

Lines changed: 28 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/routes-rollup.js‎

Lines changed: 13 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)