Variable Route

Type Declaration

• catchAll: <E, E2, R2>(
      handler: (error: E) => Element.Element<HTMLElement | SVGElement, E2, R2>,
  ) => <Path extends string, P, SP, D, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E2, R2 | R>

  Catch all errors from the route's render function. This removes errors from the error channel entirely.

  Example

  const UserRoute = Route.make("/users/:id").pipe(
    Route.catchAll((error) => ErrorPage({ error }))
  );
  Copy

• catchIf: <E, E2, R2>(
      predicate: (error: E) => boolean,
      handler: (error: E) => Element.Element<HTMLElement | SVGElement, E2, R2>,
  ) => <Path extends string, P, SP, D, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E2 | Exclude<E, E>, R2 | R>

  Catch errors from the route's render function using a predicate.

  Example

  const UserRoute = Route.make("/users/:id").pipe(
    Route.catch((error) => error._tag === "NotFound", () => NotFoundPage())
  );
  Copy

• catchTag: <const K extends string, E2, R2>(
      tag: K,
      handler: (
          error: { _tag: K },
      ) => Element.Element<HTMLElement | SVGElement, E2, R2>,
  ) => <Path extends string, P, SP, D, E extends { _tag: string }, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E2 | Exclude<E, { _tag: K }>, R2 | R>

  Catch errors with a specific _tag from the route's render function.

  Example

  const UserRoute = Route.make("/users/:id").pipe(
    Route.catchTag("NotFound", () => NotFoundPage()),
    Route.catchTag("Unauthorized", () => UnauthorizedPage())
  );
  Copy

• delete: <A, E2, R2>(
      key: string,
      handler: (body: unknown) => Effect<A, E2, R2>,
  ) => <Path extends string, P, SP, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E, R>

• get: <P, SP, A, E2, R2, E3, R3>(
      loader: (args: { params: P; searchParams: SP }) => Effect<A, E2, R2>,
      renderFn: (data: A) => Element.Element<HTMLElement | SVGElement, E3, R3>,
  ) => <Path extends string, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => [NoRenderError] extends [E]
      ? Route<
          Path,
          P,
          SP,
          A,
          E3
          | Exclude<E, NoRenderError<NoRenderError>>,
          R3 | R,
      >
      : never

  Add a GET loader and render function to the route.

  The loader receives { params, searchParams } and returns data of type A. The render function receives A directly — fully typed, no cast needed.

  The loader's E/R requirements do NOT flow into the Route's E/R — they flow to the Platform's HttpRouter instead.

  Example

  const UsersRoute = Route.make("/users").pipe(
    Route.get(
      ({}) => Effect.succeed(usersMock),
      (users) => UsersPage({ users }),
    ),
  );
  
  const UserRoute = Route.make("/users/:id").pipe(
    Route.params(Schema.Struct({ id: Schema.NumberFromString })),
    Route.get(
      ({ params: { id } }) => Effect.gen(function* () {
        const db = yield* DatabaseService;
        return yield* db.getUser(id);
      }),
      (user) => UserPage({ user }),
    ),
  );
  Copy

• isRoute: (
      value: unknown,
  ) => value is Route<
      string,
      Record<string, string>,
      Record<string, string>,
      unknown,
      never,
      never,
  >

  Check if a value is a Route.

• lazy: <Path extends string>(
      path: Path,
      load: () => Promise<
          { default: Route<Path, unknown, unknown, unknown, unknown, unknown> },
      >,
      options?: {
          fallback?: () => Element.Element<
              HTMLElement
              | SVGElement,
              never,
              never,
          >;
      },
  ) => Route<Path, unknown, unknown, unknown, never, never>

  Create a lazy-loaded route.

  Example

  const AdminRoute = Route.lazy("/admin", () => import("./admin/AdminPage"));
  Copy

• make: <Path extends string>(
      path: Path,
  ) => Route<
      Path,
      Record<string, string>,
      Record<string, string>,
      unknown,
      NoRenderError,
      never,
  >

  Create a route definition.

  Use combinators to add params, loaders, handlers, and the render function:

  Example

  const HomeRoute = Route.make("/").pipe(
    Route.render(() => HomePage()),
  );
  
  const UserRoute = Route.make("/users/:id").pipe(
    Route.params(Schema.Struct({ id: Schema.NumberFromString })),
    Route.get(
      ({ params: { id } }) => Effect.gen(function* () {
        const db = yield* DatabaseService;
        return yield* db.getUser(id);
      }),
      (user) => UserPage({ user }),
    ),
  );
  Copy

• params: <P, I>(
      schema: Schema<P, I>,
  ) => <Path extends string, OldP, SP, D, E, R>(
      route: Route<Path, OldP, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E | ParseError, R>

  Add a schema for route params. The schema transforms raw string params to typed values.

  Example

  const UserRoute = Route.make("/users/:id").pipe(
    Route.params(Schema.Struct({ id: Schema.NumberFromString }))
  );
  
  // In UserPage:
  const { id } = yield* UserRoute.params;  // id is number
  Copy

• post: <A, E2, R2>(
      key: string,
      handler: (body: unknown) => Effect<A, E2, R2>,
  ) => <Path extends string, P, SP, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E, R>

  Add a POST mutation handler to the route.

  The handler receives the parsed request body and returns a result. Platform executes it directly on POST — no component rendering needed.

  The handler's E/R requirements do NOT flow into the Route's E/R.

  Example

  const UserRoute = Route.make("/users/:id").pipe(
    Route.post("updateProfile", (body) => Effect.gen(function* () {
      const data = yield* Schema.decodeUnknown(ProfileSchema)(body);
      const db = yield* DatabaseService;
      return yield* db.updateProfile(data);
    })),
    Route.render(() => UserPage()),
  );
  Copy

• put: <A, E2, R2>(
      key: string,
      handler: (body: unknown) => Effect<A, E2, R2>,
  ) => <Path extends string, P, SP, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E, R>

  Add a PUT mutation handler to the route. Same semantics as Route.post() but for PUT requests.

• rawParams: <Path extends string, OldP, SP, D, E, R>(
      route: Route<Path, OldP, SP, D, E, R>,
  ) => Route<Path, Record<string, string>, SP, D, E, R>

  Keep raw string params without schema validation. Useful when you want to handle params manually.

  Example

  const ProfileRoute = Route.make("/profile/:username").pipe(
    Route.rawParams
  );
  
  // In ProfilePage:
  const { username } = yield* ProfileRoute.params;  // string
  Copy

• render: <E2, R2>(
      fn: () => Element.Element<HTMLElement | SVGElement, E2, R2>,
  ) => <Path extends string, P, SP, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => [NoRenderError] extends [E]
      ? Route<
          Path,
          P,
          SP,
          D,
          E2
          | Exclude<E, NoRenderError<NoRenderError>>,
          R2 | R,
      >
      : never

  Set the render function for a route without a loader.

  Shorthand for routes that don't need data loading. For routes with loaders, use Route.get(loader, render) instead.

  Example

  const HomeRoute = Route.make("/").pipe(
    Route.render(() => HomePage()),
  );
  Copy

• searchParams: <SP, I>(
      schema: Schema<SP, I>,
  ) => <Path extends string, P, OldSP, D, E, R>(
      route: Route<Path, P, OldSP, D, E, R>,
  ) => Route<Path, P, SP, D, ParseError | E, R>

  Add a schema for search params (query string).

  Example

  const SearchRoute = Route.make("/search").pipe(
    Route.searchParams(Schema.Struct({
      q: Schema.String,
      page: Schema.optional(Schema.NumberFromString).pipe(
        Schema.withDefault(() => 1)
      ),
    }))
  );
  
  // In SearchPage:
  const { q, page } = yield* SearchRoute.searchParams;
  Copy

• static: <P, A, E2, R2, E3, R3>(
      config: {
          load: (args: { params: P }) => Effect<A, E2, R2>;
          paths?: () => Effect<P[], E2, R2>;
          render: (data: A) => Element.Element<HTMLElement | SVGElement, E3, R3>;
      },
  ) => <Path extends string, SP, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => [NoRenderError] extends [E]
      ? Route<
          Path,
          P,
          SP,
          A,
          E3
          | Exclude<E, NoRenderError<NoRenderError>>,
          R3 | R,
      >
      : never

• withAnimation: (
      options: AnimationOptions,
  ) => <Path extends string, P, SP, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E, R>

  Add animation options to the route.

  Example

  const ModalRoute = Route.make("/modal/:id").pipe(
    Route.withAnimation({
      enter: "slide-up",
      exit: "slide-down",
    })
  );
  Copy

• withGuard: (
      condition: Readable.Readable<boolean> | Effect<boolean, never, never>,
      options: GuardOptions,
  ) => <Path extends string, P, SP, D, E, R>(
      route: Route<Path, P, SP, D, E, R>,
  ) => Route<Path, P, SP, D, E, R>

  Add a guard to the route. The route will only render if the guard condition is true.

  Example

  const DashboardRoute = Route.make("/dashboard").pipe(
    Route.withGuard(isAuthenticated, { redirect: "/login" })
  );
  Copy