Skip to content

feat(docs): 676 — demo page for cancelling navigation on dirty edits - #96

Open
randomdevpete wants to merge 1 commit into
task-778-no-navigation-blocking-apifrom
task-676-demo-page-cancel-navigation-dirty-edits
Open

feat(docs): 676 — demo page for cancelling navigation on dirty edits#96
randomdevpete wants to merge 1 commit into
task-778-no-navigation-blocking-apifrom
task-676-demo-page-cancel-navigation-dirty-edits

Conversation

@randomdevpete

Copy link
Copy Markdown
Owner

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

  • An Editor page with a textarea that marks the form as dirty
  • An Other page to navigate to
  • A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

  • Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
  • Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
  • Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 staticRouteAtom API
  • Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

@randomdevpete randomdevpete changed the title feat(docs): demo page for cancelling navigation on dirty edits feat(docs): 676 — demo page for cancelling navigation on dirty edits Aug 19, 2026
Base automatically changed from task-675-coalesce-resolvedatom-and-asyncrouteatom to task-679-investigate-per-demo-scoped-store-context August 19, 2026 21:51
@randomdevpete
randomdevpete force-pushed the task-679-investigate-per-demo-scoped-store-context branch from c349c01 to 1339a1a Compare August 19, 2026 21:59
@randomdevpete
randomdevpete changed the base branch from task-679-investigate-per-demo-scoped-store-context to task-675-coalesce-resolvedatom-and-asyncrouteatom August 19, 2026 22:00
@randomdevpete

Copy link
Copy Markdown
Owner Author

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

Adds /demos/cancel-navigation: a form whose in-app links confirm before
leaving while it has unsaved edits, built by wrapping useLink's onClick
rather than the Link component.

Ticket: 676
@randomdevpete
randomdevpete changed the base branch from task-675-coalesce-resolvedatom-and-asyncrouteatom to task-778-no-navigation-blocking-api August 21, 2026 03:38
@randomdevpete
randomdevpete force-pushed the task-676-demo-page-cancel-navigation-dirty-edits branch from d3e4c63 to e4615e1 Compare August 21, 2026 03:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant