Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iso] Add async onBeforeRoute() prop hook #885

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Conversation

developit
Copy link
Member

@developit developit commented Oct 14, 2021

This implements <Router onBeforeRoute={async url => {}}>. When onBeforeRoute returns a Promise for a given URL transition, that Promise is thrown from within the incoming route to simulate a Suspense-based paused transition. This means each router maintains its own onBeforeRoute "locking" state.

Here's an example that uses onBeforeRoute to fetch metadata before rendering any routes:

import { useCallback, useEffect } from 'preact/hooks';
import { LocationProvider, Router, hydrate } from 'preact-iso';

function App() {
  const [meta, setMeta] = useState({});
  const loadMeta = useCallback(async url => {
    const res = await fetch(`${url}.json`);
    setMeta(await res.json());
  }, []);
  useEffect(() => {
    document.title = meta.title;
  }, [meta.title]);
  return (
    <LocationProvider>
      <Router onBeforeRoute={loadMeta}>
        <Home path="/" meta={meta} />
        <About path="/about" meta={meta} />
      </Router>
    </LocationProvider>
  );
}

hydrate(<App />);

Demo:
https://glitch.com/edit/#!/plausible-satin-rat?path=public%2Fapp.js%3A44%3A5

This implements `<Router onBeforeRoute={async url => {}}>`. When onBeforeRoute returns a Promise for a given URL transition, that Promise is thrown from within the incoming route to simulate a Suspense-based paused transition. This means each router maintains its own onBeforeRoute "locking" state.
@changeset-bot
Copy link

changeset-bot bot commented Oct 14, 2021

⚠️ No Changeset found

Latest commit: bdc1216

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Oct 14, 2021

Size Change: +188 B (+3%)

Total Size: 6.5 kB

Filename Size Change
packages/preact-iso/.dist/index.********.js 1.78 kB +70 B (+4%)
packages/preact-iso/.dist/prerender.********.js 348 B -1 B (0%)
packages/preact-iso/router.js 2.66 kB +119 B (+5%) 🔍
ℹ️ View Unchanged
Filename Size
packages/preact-iso/hydrate.js 290 B
packages/preact-iso/index.js 195 B
packages/preact-iso/lazy.js 594 B
packages/preact-iso/prerender.js 629 B

compressed-size-action

@developit developit added discussion Ongoing discussion / decision-making enhancement New feature or request lib preact-iso, etc labels Jan 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion Ongoing discussion / decision-making enhancement New feature or request lib preact-iso, etc
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant