Summary

I wanted quick access to the originally-specified path string, to insert them into the correct place in my react-router routes.

Test Plan

Added test proving that .path is passed through exactly as specified in the initial configuration.

What's required for testing (prerequisites)?

N/A

What are the steps to reproduce (after prerequisites)?

N/A

Checklist

• [x] I added the documentation in README.md
• [ ] I added a sample use of the API in the example project (example/)

Summary

Add SSR support (providing a URL from a parent component).

We're currently delaying that to React 18 support, as the useSyncExternalStore shim uses useLayoutEffect, giving us warnings on renderToString.

Hi, thanks for your lib, this is more of a question than a serious pull request. I was surprised I had to copy the route names in the useRoute API. Why is this? Defaulting to all routes seems sensible; maybe perf. reasons? Anyways, thanks for your work!

Summary

Test Plan

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Checklist

• [ ] I added the documentation in README.md
• [ ] I added a sample use of the API in the example project (example/)

Why it is needed?

The Router Challenge aims to be to Routers what TodoMVC was to MV* frameworks. It offers the same Music Catalog application built in React using different Routers. For it to be successful I need the help of Router writers like you. Will you take the Router Challenge and implement the Music Catalog application using Chicane, please?

Possible implementation

No response

Code sample

No response

As part of the Matcher type will be exposed as return type of createGroup in a future version, I want to reduce the lib exposed glossary. Area is already used in our example, it seems fine to me.

Summary

Test Plan

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

Checklist

• [ ] I added the documentation in README.md
• [ ] I added a sample use of the API in the example project (example/)

• Remove url from location, add toString
• Add raw object in location for easier comparaisons
• Use useSyncExternalStoreWithSelector for useRoute and useRoutes
• Fix keyboard focus reset on search params / hash only update
• Multiple methods renaming
• Add a basic Link component

Current usage:

import { createRouter, groupRoutes } from "react-chicane";

export const { createURL } = createRouter({
  root: "/",
  users: "/users",
  user: "/users/:userId",

  ...groupRoutes("project", "/project/:projectId", {
    root: "/",
    members: "/members",
    member: "/members/:memberId",
  }),
});

createURL("project.root", { projectId: "ID" });

Desired API:

import { createRouter } from "react-chicane";

export const { createURL } = createRouter(({ group }) => ({
  root: "/",
  users: "/users",
  user: "/users/:userId",

  ...group("project", "/project/:projectId", {
    root: "/",
    members: "/members",
    member: "/members/:memberId",
  }),
}));

createURL("project.root", { projectId: "ID" });

Can't be achieved for now:

export const createRouter = <
  Routes extends Record<string, string>,
  BasePath extends string = string,
>(
  routes:
    | Readonly<Routes>
    | ((arg: { group: typeof group }) => Readonly<Routes>), // Readonly<Routes> used as return type will stay Record<string, string>
  options: {
    basePath?: BasePath;
    blockerMessage?: string;
  } = {},
) => {
  const finalRoutes = typeof routes === "function" ? routes({ group }) : routes;

  // …

Summary

Currently, the algorithm responsive for setting active on useLink is a black box. This might not suit every need (e.g. changing a query-string shouldn't make a section link inactive).

Due to the optimisation of computing useSubscription to avoid unnecessary re-rerenders, having this comparison function as a prop seems like the most reasonable way to expose this feature.

Summary

Groundwork for further updates:

• Compare location objects using their stable URL form to prevent extraneous subscriber calls

• Use a shared history instance called through a useLocation hook for all hooks relying on it

• Removed the JSON.stringify/JSON.parse bit as location is a more stable object

• Replace the get location by a getLocation function for DX (breaking change ⚠️)

• [x] I added the documentation in README.md

• [x] I added a sample use of the API in the example project (example/)

Why it is needed?

Hey,

first of all, thanks for this amazing Router that help us keeps our routes type safe :muscle: We also love the simplicity in it's API and how it leverage existing solution such as ts-pattern.

For our use-case, we have a monorepo (manage by Nx) and we share some code (Domain) between frontend and backend. The list of app routes are shared and we would also be able to share the generated links functions that is build by the createRouter to be able to use it in backend.

Here is an example in our user.service.ts

import { Links } from '@company/shared/domain';

    const confirmLink =
      this.environmentContext.appBaseUrl() +
      Links.ConfirmEmail({ token: `${timestamp}-${ident}-${token}` });

With this scaffolding, we have type safe links between our backend and frontend :tada:.

The only issue is that createRouter is coupled with React and create a dependency to React on our backend.

Possible implementation

A possible solution could be to publish a createLinks function separately to be imported at it's own path without React dependency.

We could also publish another package to npm such as @swan-io/chicane-backend or something else.

For now, as a workaround, we created a file create-links.ts that reuse your code in our domain lib without the React dependency (no push, no useRoute hook) but we have the createURLFunctions that generates all link functions.

Also could be a good use of a monorepo with 2 libs:

• core: contains all main functions and utils without React dependency
• react: contains the binding with React framework and the hook useRoutes

Publish separately and @swan-io/chicane-react depends on @swan-io/chicane-core.

Happy to discuss possible solutions if you're interested in this feature :wink.

Code sample

Usage could be something like this.

import { createLinks } from '@swan-io/chicane-core';

// Search params constants
export const TOKEN_SEARCH_PARAMS = 'token';

export const routes = {
  AppArea: '/*',
  AppRoot: '/',
  // Auth
  Login: '/login?:redirect',
  ForgetPassword: '/forget-password',
  ResetPassword: `/reset-password?:${TOKEN_SEARCH_PARAMS}`,
  Register: '/register?:redirect',
  RedeemInvite: `/redeem-invite?:${TOKEN_SEARCH_PARAMS}`,
} as const;

export const Links = createLinks(routes);