Skip to content

Add back support#140

Open
JoviDeCroock wants to merge 1 commit intomainfrom
back-support
Open

Add back support#140
JoviDeCroock wants to merge 1 commit intomainfrom
back-support

Conversation

@JoviDeCroock
Copy link
Copy Markdown
Member

@JoviDeCroock JoviDeCroock commented Mar 24, 2026

Resolves #58

I am pretty confused by this, it looks like web-test-runners headless browser does not support history.back() properly. When we call it, it will never fire a popstate event. I verified this feature working by using an html file and trying it out.

The html file 
<!DOCTYPE html>
<html>
<head>
  <title>preact-iso back() test</title>
  <script type="importmap">
  {
    "imports": {
      "preact": "https://esm.sh/preact@10.25.4",
      "preact/hooks": "https://esm.sh/preact@10.25.4/hooks",
      "preact-iso/router": "./src/router.js"
    }
  }
  </script>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import { h, render } from 'preact';
    import { LocationProvider, Router, Route, useLocation } from 'preact-iso/router';

    function Nav() {
      const { url, path, back, route } = useLocation();
      return h('div', null,
        h('h2', null, `Current: url=${url} path=${path}`),
        h('nav', null,
          h('button', { onClick: () => route('/') }, 'Go /'), ' ',
          h('button', { onClick: () => route('/foo') }, 'Go /foo'), ' ',
          h('button', { onClick: () => route('/bar') }, 'Go /bar'), ' ',
          h('button', { id: 'back-btn', onClick: () => back() }, 'Back'),
        ),
      );
    }

    function Home() { return h('h1', null, 'Home /'); }
    function Foo() { return h('h1', null, 'Foo /foo'); }
    function Bar() { return h('h1', null, 'Bar /bar'); }
    function NotFound() { return h('h1', null, '404'); }

    function App() {
      return h(LocationProvider, null,
        h(Nav),
        h(Router, null,
          h(Route, { path: '/', component: Home }),
          h(Route, { path: '/foo', component: Foo }),
          h(Route, { path: '/bar', component: Bar }),
          h(Route, { default: true, component: NotFound }),
        ),
      );
    }

    render(h(App), document.getElementById('app'));
  </script>
</body>
</html>

JoviDeCroock
JoviDeCroock commented Mar 24, 2026
View reviewed changes
src/router.js
path,
query: Object.fromEntries(u.searchParams),
route: (url, replace) => route({ url, replace }),
back: () => {
Copy link
Copy Markdown
Member Author

@JoviDeCroock JoviDeCroock Mar 24, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

canGoBack or get canGoBack could rely on history.length being > 1 if we also want to support that API surface

Copy link
Copy Markdown
Member

@rschristian rschristian Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see too much of a need personally, though wouldn't hurt if added either

rschristian
rschristian approved these changes Mar 24, 2026
View reviewed changes
src/router.d.ts
path: string;
query: Record<string, string>;
route: (url: string, replace?: boolean) => void;
back: () => void;
Copy link
Copy Markdown
Member

@rschristian rschristian Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also offer .forward() at the same time for balance?

@rschristian
Copy link
Copy Markdown
Member

rschristian commented Mar 24, 2026

it looks like web-test-runners headless browser does not support history.back() properly. When we call it, it will never fire a popstate event.

wut the heck, wild

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rschristian rschristian rschristian approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Ability to route "back"

2 participants

@JoviDeCroock @rschristian