erictaylor / yarr

A React router library enabling the render-as-you-fetch concurrent UI pattern.

yarr

A React router library enabling the render-as-you-fetch concurrent UI pattern.

• Overview
• Getting Started
• Usage Examples
• API reference
• License

Overview

Yarr is yet another React router library, but with a focus on enabling the render-as-you-fetch concurrent UI pattern by offering both component code preloading and data preloading. This behavior is enabled even without opt-in to React's experimental Concurrent Mode.

Getting Started

• Step-by-step guide

Usage Examples

• Parameterized Routing example
• Preloading data with Relay example
• Redirect Rules

Advanced

• Performance and UX with Yarr

API Reference

• Components
• Hooks
• Utils

Acknowledgements

Yarr was originally developed by Eric Taylor at Contra to power Contra's Relay (formally Relay Modern) and React Suspense tech stack. It's since been open-sourced to give back to the community and promote Relay/Suspense adoption.

License

MIT © Eric Taylor

yarr's Issues

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Wildcard matching problem

I have a route like this:

import { RouteConfig } from 'yarr';
import { loadQuery } from 'react-relay';

import environment from '../../relay/environment';
import AssessmentCodeTreeQueryGraphql, {  AssessmentCodeTreeQuery} from './__generated__/AssessmentCodeTreeQuery.graphql';
import { AssessmentCodeTreeProps } from './AssessmentCodeTree';
import { loginRequired } from '../../utils/router';

const assessmentCodeTreeRoute: RouteConfig<
  '',
  '/:companySlug/assessment/:slug/code/tree/*',
  AssessmentCodeTreeProps
> = {
  path: '/:companySlug/assessment/:slug/code/tree/*',
  component: async () => {
    const module = await import('./AssessmentCodeTree');
    return module.default;
  },
  preload: (params) => ({
    query: loadQuery<AssessmentCodeTreeQuery>(environment, AssessmentCodeTreeQueryGraphql, {
      slug: params.slug,
      path: params.$rest,
    }),
  }),
  redirectRules: loginRequired,
};

export default assessmentCodeTreeRoute;

This route works like GitHub. The wildcard is some path from a git repository and the code suppose to pass the path by $rest parameter to the GraphQL server. But if this URL contains ., - kind of characters this route never matches.

Example:
https://example.com/acme/assessment/repo/code/tree/.eslintrc
https://example.com/acme/assessment/repo/code/tree/some-folder

Can you guide about this?

Relay example

Was wondering if yarr can be used with Relay Entrypoints?

TypeScript Example

Hello, thanks for this beautiful library. I'm facing type errors while preparing the routes. Can you add some TypeScript examples with nested routes, parameterized routes, and preload? Maybe I'm declaring the things wrong.

// routes.ts

import { RoutesConfig } from 'yarr';
import { loadQuery } from 'react-relay';

import environment from './relay/environment';
import TasksQueryGraphql from './routes/Tasks/__generated__/TasksQuery.graphql';

const routes: RoutesConfig = [
 {
   path: '/tasks/:companySlug/:slug',
   component: async () => {
     const module = await import('./routes/Tasks/Tasks');
     return module.Tasks;
   },
   preload: ({ companySlug, slug }) => ({
     query: loadQuery(environment, TasksQueryGraphql, { companySlug, slug }),
   }),
 },
];

export default routes;

// Tasks.tsx

import { PreparedRouteEntryProps } from 'yarr';
import { graphql, PreloadedQuery, usePreloadedQuery } from 'react-relay';

import { TasksQuery } from './__generated__/TasksQuery.graphql';

interface TasksProps extends PreparedRouteEntryProps {
  query: PreloadedQuery<TasksQuery>;
}

export function Tasks({ query }: TasksProps): JSX.Element {
  const { task } = usePreloadedQuery(
    graphql`
      query TasksQuery($companySlug: String!, $slug: String!) {
        task(companySlug: $companySlug, slug: $slug) {
          title
        }
      }
    `,
    query,
  );

  if (!task) {
    return <span>Task not found</span>;
  }

  return <span>{task.title}</span>;
}

Everything works as expected, only problem is about type errors. When I run tsc --noEmit, it gives the following;

src/routes.ts:10:5 - error TS2322: Type '() => Promise<({ query }: TasksProps) => JSX.Element>' is not assignable to type '() => Promise<ComponentType<{ params: {}; search: {}; }>>'.
  Type 'Promise<({ query }: TasksProps) => Element>' is not assignable to type 'Promise<ComponentType<{ params: {}; search: {}; }>>'.
    Type '({ query }: TasksProps) => Element' is not assignable to type 'ComponentType<{ params: {}; search: {}; }>'.
      Type '({ query }: TasksProps) => Element' is not assignable to type 'FunctionComponent<{ params: {}; search: {}; }>'.
        Types of parameters '__0' and 'props' are incompatible.
          Property 'query' is missing in type 'PropsWithChildren<{ params: {}; search: {}; }>' but required in type 'TasksProps'.

10     component: async () => {
       ~~~~~~~~~

  src/routes/Tasks/Tasks.tsx:7:3
    7   query: PreloadedQuery<TasksQuery>;
        ~~~~~
    'query' is declared here.
  node_modules/yarr/dist/esm/types.d.ts:64:5
    64     component: () => Promise<ComponentType<Props>>;
           ~~~~~~~~~
    The expected type comes from property 'component' which is declared here on type 'RouteConfig<string, string, { params: {}; search: {}; }, boolean>'

src/routes.ts:14:17 - error TS2339: Property 'companySlug' does not exist on type 'RouteParameters<string>'.

14     preload: ({ companySlug, slug }) => ({
                   ~~~~~~~~~~~

src/routes.ts:14:30 - error TS2339: Property 'slug' does not exist on type 'RouteParameters<string>'.

14     preload: ({ companySlug, slug }) => ({
                                ~~~~

Can you help on this?

Next.js/SSR example?

Hi, great job with the router! 👍 I've been following this project for some time but I never dedicated enough time to actually try it/use it. One thing that would help me a lot is a working Next.js example with SSR. Would you happen to have something like this? Next.js is a very popular SSR solution for React but it probably requires a custom server because Next.js has a different routing system by default. Or maybe some other SSR example independent of Next.js? Thanks! 😎

Links from locations with search or hash carry forward on new history locations.

When navigating via history.push or history.replace from a location where the location has either (or both) location.search or location.hash defined, the new location requested will have the previous locations search and hash strings.

This only happens when the argument provided to said functions is a string.

See:
remix-run/history#808
remix-run/history#814
remix-run/history#859

Getting a ton of warnings due to missing sourcemaps

Hi Contra. I get a ton of warnings when using yarr in create-react-app 5. They look like this:

Failed to parse source map from '/Users/me/projects/test-app/node_modules/yarr/src/components/Link.tsx' file: Error: ENOENT: no such file or directory, open '/Users/me/projects/test-app/node_modules/yarr/src/components/Link.tsx'

Apparently, you should either add the source .ts files to the output, or tell node not to generate sourcemaps. See facebook/create-react-app#11767. I don't want to set the GENERATE_SOURCEMAP env variable to false, since that will remove all sourcemaps.

Steps to reproduce

• npx [email protected] test-app --typescript
• npm install --save yarr
• Import any yarr thing in App.tsx
• npm start

When the page is changed, the existing page is called additionally

When using ReactDOM.hydrateRoot or ReactDOM.createRoot, clicking <Link /> will cause unnecessary rendering. Of course I could use ReactDOM.render, but as you know it will display a warning message like below.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Minimal, Reproducible Example

Do you consider adding a route name to the route config?

A route name is more clear than path. In the API you can navigate between routes using it's name instead of the path.