ts-pattern and type-route

[mikecann]

Hey I really like the look of this library and am coming from chicane router (https://swan-io.github.io/chicane/route-pattern-syntax) I was wondering if there was a way to get the lib to work with ts-pattern.

Specifically I am trying to get the Nested Routes feature to work.

For example, this is my basic set of routes:

import { createRouter, defineRoute, param, createGroup } from "type-route";
import { match } from "ts-pattern";

const newUser = defineRoute({}, (p) => `/new-user`);

export const { RouteProvider, useRoute, routes } = createRouter({
  root: defineRoute("/"),
  home: defineRoute("/home"),
  newUser,
  newUserTerms: newUser.extend(`/terms`),
  newUserWelcome: newUser.extend(`/terms`),
});

export const groups = {
  newUser: createGroup([routes.newUser, routes.newUserTerms, routes.newUserWelcome]),
};

export const matchPattern = match;

I am then attempting to use it like so:

export const TypeRouterRoutes: React.FC<Props> = React.memo(({}) => {
  const route = useRoute();
  const logger = useLogger(`TypeRouterRoutes`);

  logger.log(`RENDER`, route);

  return (
    <>
      {matchRoute(route)
        .with({ name: false }, () => <Box>404</Box>)
        .with({ name: "root" }, () => <Box>ROOT</Box>)
        .with({ name: "home" }, () => <Box>HOME</Box>)
        .with(
          Pattern.when((r) => groups.newUser.has(r)),
          () => <Box>NEW USER</Box>,
        )
        .exhaustive()}
    </>
  );
  });

I am however unfortunately getting an error at the "exhaustive" part:

I believe this is because for some reason the type-narrowing in the type-guard of this part isnt working as expected:

.with(
          Pattern.when((r) => groups.newUser.has(r)),
          () => <Box>NEW USER</Box>,
        )

Do you have any experience with this or any suggestions?

[bradenhs]

ts-pattern looks like a cool library! I haven't used it before but like the concept behind it. It's unfortunate the two libs don't work together perfectly. At some point in the future I may have time to look into this more deeply - I expect it'll be a bit tricky to resolve. In the meantime if you want exhaustiveness checks this is what I do:

function App() {
  let content;

  if (route.name === routes.home.name) {
    content = <HomeScreen route={route} />;
  } else if (route.name === routes.account.name) {
    content = <AccountScreen />;
  } else if (groups.foo.has(route)) {
    content = <FooScreen />;
  } else if (route.name === false) {
    content = <NotFound />;
  } else {
    panic("Unhandled route", route);
  }

  return <div>{content}</div>;
}

export function panic(
  message: string,
  _valueWithTypeNarrowedToNever?: never
): never {
  throw new Error(message);
}

The trick is that panic function which throws an error. In addition to throwing that runtime error if it is ever invoked it'll also cause a compile time error if it's second parameter isn't of type never. In the above example route should be narrowed to never if the preceding if/else statements cover all the possible routes.

[mikecann]

thanks @bradenhs for your swift reply!

Yes I do indeed do something similar to what you suggest.

I just want to be clear that ts-pattern and type-route work well together, its just the case of the nested routes where it unfortunately doesn't.

Okay all the best, ill leave this issue open for you to investigate at some point :)

[bradenhs]

Thank you for surfacing the issue! Best of luck investigating Type Route!

[Seb-C]

I'm using this pattern along with the @typescript-eslint/switch-exhaustiveness-check check in eslint. It brings me the static checks that I want and does not have any runtime overhead.

export const RouteContent = () => {
	const route = useRoute();

	switch (route.name) {
		case false:
			return <NotFound />;
		case "home":
			return <Home />;
		case "users":
			return <Users route={route} />;
		...
	}
};