@typed/router 0.17.7 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed/router",
-  "version": "0.17.7",
+  "version": "0.18.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -21,16 +21,17 @@
   "dependencies": {
     "@effect/data": "^0.17.1",
     "@effect/io": "^0.38.0",
-    "@typed/context": "0.17.1",
-    "@typed/dom": "8.17.2",
-    "@typed/error": "0.16.1",
-    "@typed/fx": "1.16.1",
-    "@typed/html": "3.17.6",
-    "@typed/navigation": "0.4.2",
+    "@effect/platform": "^0.12.1",
+    "@typed/context": "0.18.0",
+    "@typed/dom": "8.18.0",
+    "@typed/error": "0.17.0",
+    "@typed/fx": "1.17.0",
+    "@typed/html": "3.18.0",
+    "@typed/navigation": "0.5.0",
     "@typed/path": "0.6.2",
-    "@typed/route": "0.13.2"
+    "@typed/route": "0.14.0"
   },
-  "gitHead": "9083c6af485d129f95e5f7b07d1bfb285668b7dd",
+  "gitHead": "61b4f0a42ab8f8b5e6e02c0433215121955df43c",
   "publishConfig": {
     "access": "public"
   },

package/src/Link.ts

@@ -1,39 +1,42 @@
+import { not } from '@effect/data/Predicate'
 import * as Effect from '@effect/io/Effect'
 import * as Scope from '@effect/io/Scope'
+import { getIsUsingKeyModifier } from '@typed/dom'
 import * as Fx from '@typed/fx'
-import { Placeholder } from '@typed/html'
+import { EventHandler, Placeholder } from '@typed/html'
 import * as Navigation from '@typed/navigation'
 import { pathJoin } from '@typed/path'
 
 import { Router, getCurrentPathFromUrl } from './router.js'
 
 export interface UseLinkParams<
-  R = never,
-  E = never,
-  R2 = never,
-  E2 = never,
-  R3 = never,
-  E3 = never,
-  R4 = never,
-  E4 = never,
-  R5 = never,
-  E5 = never,
+  To extends Placeholder.AnyOf<string>,
+  Replace extends Placeholder.AnyOf<boolean>,
+  State,
+  Relative extends Placeholder.AnyOf<boolean>,
+  Key extends Placeholder.AnyOf<string>,
 > {
-  readonly to: Placeholder<R, E, string>
-  readonly replace?: Placeholder<R2, E2, boolean>
-  readonly state?: Placeholder<R3, E3, unknown> | unknown
-  readonly relative?: Placeholder<R4, E4, boolean>
-  readonly key?: Placeholder<R5, E5, string>
+  readonly to: To
+  readonly replace?: Replace
+  readonly state?: State
+  readonly relative?: Relative
+  readonly key?: Key
 }
 
 export namespace UseLinkParams {
-  export type Any = UseLinkParams<any, any, any, any, any, any, any, any, any, any>
+  export type Any = UseLinkParams<
+    Placeholder.AnyOf<string>,
+    Placeholder.AnyOf<boolean>,
+    unknown,
+    Placeholder.AnyOf<boolean>,
+    Placeholder.AnyOf<string>
+  >
 
-  export type Context<T extends Any> = Placeholder.ResourcesOf<
+  export type Context<T extends Any> = Placeholder.Context<
     T['to'] | T['replace'] | T['state'] | T['relative'] | T['key']
   >
 
-  export type Error<T extends Any> = Placeholder.ErrorsOf<
+  export type Error<T extends Any> = Placeholder.Error<
     T['to'] | T['replace'] | T['state'] | T['relative'] | T['key']
   >
 }
@@ -42,7 +45,8 @@ export interface UseLink<E> {
   readonly url: Fx.Computed<Router, E, string>
   readonly options: Fx.Computed<never, E, Navigation.NavigateOptions>
   readonly navigate: Effect.Effect<Router, E, Navigation.Destination>
-  readonly active: Fx.Computed<Router, E, boolean>
+  readonly active: Fx.Fx<Router, E, boolean>
+  readonly onClick: EventHandler<KeyboardEvent | MouseEvent, Router, E>
 }
 
 export namespace UseLink {
@@ -63,15 +67,16 @@ export function useLink<Params extends UseLinkParams.Any>(
       Placeholder.asRef(params.state ?? null),
       Placeholder.asRef(params.key),
       Placeholder.asRef(params.relative ?? true),
+      Router,
     ] as const),
-    ([to, replace, state, key, relative]) => {
+    ([to, replace, state, key, relative, router]) => {
       const url = Fx.RefSubject.tuple(to, relative).mapEffect(([to, relative]) =>
         Effect.gen(function* ($) {
           let url = to
 
           // Check if we should make the URL relative to the current route
           if (relative) {
-            const { route, params } = yield* $(Router)
+            const { route, params } = router
             const matched = yield* $(params)
             const basePath = route.make(matched)
 
@@ -89,15 +94,8 @@ export function useLink<Params extends UseLinkParams.Any>(
         }),
       )
 
-      const active: Fx.Computed<Router, UseLinkParams.Error<Params>, boolean> = url.mapEffect(
-        (url) =>
-          Effect.gen(function* ($) {
-            const {
-              navigation: { currentEntry },
-            } = yield* $(Router)
-
-            return isActive(url, (yield* $(currentEntry)).url)
-          }),
+      const active = Fx.map(Fx.combine(url, router.navigation.currentEntry), ([url, destination]) =>
+        isActive(url, destination.url),
       )
 
       const navigate: Effect.Effect<
@@ -108,11 +106,18 @@ export function useLink<Params extends UseLinkParams.Any>(
         Router.withEffect((r) => r.navigation.navigate(url, options)),
       )
 
+      const onClick = EventHandler.preventDefault.if<
+        KeyboardEvent | MouseEvent,
+        Router,
+        UseLinkParams.Error<Params>
+      >(not(getIsUsingKeyModifier), () => navigate)
+
       return {
         url,
         options,
         navigate,
         active,
+        onClick,
       } satisfies UseLink.FromParams<Params>
     },
   )

package/src/Match.ts

@@ -54,16 +54,16 @@ export namespace Match {
     : never
 
   export type Context<M extends Any> =
-    | Fx.Fx.ResourcesOf<Rendered<M>>
+    | Fx.Fx.Context<Rendered<M>>
     | ([Guard<M>] extends [never] ? never : Effect.Effect.Context<Guard<M>>)
     | ([Matched<M>] extends [never] ? never : Effect.Effect.Context<Matched<M>>)
 
   export type Error<M extends Any> =
-    | Fx.Fx.ErrorsOf<Rendered<M>>
+    | Fx.Fx.Error<Rendered<M>>
     | ([Guard<M>] extends [never] ? never : Exclude<Effect.Effect.Error<Guard<M>>, NavigationError>)
     | ([Matched<M>] extends [never] ? never : Effect.Effect.Error<Matched<M>>)
 
-  export type Success<M extends Any> = Fx.Fx.OutputOf<Rendered<M>>
+  export type Success<M extends Any> = Fx.Fx.Success<Rendered<M>>
 }
 
 export function Match<P extends string, Rendered extends Fx.Fx<any, any, any>>(

package/src/Matcher.ts

@@ -1,5 +1,7 @@
 import * as Chunk from '@effect/data/Chunk'
 import * as Debug from '@effect/data/Function'
+import * as Pipeable from '@effect/data/Pipeable'
+import * as Cause from '@effect/io/Cause'
 import * as Effect from '@effect/io/Effect'
 import * as Fx from '@typed/fx'
 import { RenderContext } from '@typed/html'
@@ -11,16 +13,31 @@ import { Redirect } from './Redirect.js'
 import { matchRoutes } from './matchRoutes.js'
 import { Router } from './router.js'
 
-export interface Matcher<Matches extends ReadonlyArray<Match.Any>> {
+export interface Matcher<Matches extends ReadonlyArray<Match.Any>> extends Pipeable.Pipeable {
   /** @internal */
   readonly matches: Chunk.Chunk<Match.Any>
 
+  /**
+   * Matches a route to an Fx
+   */
   readonly match: <P extends string, R, E, A, Opts extends MatchOptions.Any<P> = MatchOptions<P>>(
     route: Route<P>,
     render: (params: Fx.Filtered<never, never, ParamsOf<P>>) => Fx.Fx<R, E, A>,
     options?: Opts,
   ) => Matcher<readonly [...Matches, Match<P, Fx.Fx<R, E, A>, Opts>]>
 
+  /**
+   * Matches a route to a value
+   */
+  readonly matchTo: <P extends string, A, Opts extends MatchOptions.Any<P> = MatchOptions<P>>(
+    route: Route<P>,
+    to: (params: ParamsOf<P>) => A,
+    options?: Opts,
+  ) => Matcher<readonly [...Matches, Match<P, Fx.Fx<never, never, A>, Opts>]>
+
+  /**
+   * Matches a route to a lazy Fx
+   */
   readonly matchLazy: <
     P extends string,
     R,
@@ -33,6 +50,10 @@ export interface Matcher<Matches extends ReadonlyArray<Match.Any>> {
     options?: Opts,
   ) => Matcher<readonly [...Matches, Match<P, Fx.Fx<R, E, A>, Opts>]>
 
+  /**
+   * The default way to turn a Matcher into an Fx is by providing an Fx to run when
+   * no routes match.
+   */
   readonly notFound: <R, E, A>(
     render: (params: Fx.Filtered<never, never, Readonly<Record<string, string>>>) => Fx.Fx<R, E, A>,
   ) => Fx.Fx<
@@ -41,6 +62,32 @@ export interface Matcher<Matches extends ReadonlyArray<Match.Any>> {
     A | Match.Success<Matches[number]>
   >
 
+  /**
+   * Redirect to a route when no routes match. This variant will only utilize
+   * the route provided to it.
+   */
+  readonly redirect: <P extends string>(
+    route: Route<P>,
+    ...params: [keyof ParamsOf<P>] extends [never] ? [] : [ParamsOf<P>]
+  ) => Fx.Fx<
+    Router | RenderContext | Match.Context<Matches[number]>,
+    Exclude<Match.Error<Matches[number]>, Redirect>,
+    Match.Success<Matches[number]>
+  >
+
+  /**
+   * Redirect to a route when no routes match. This variant will utilize the
+   * parent Router to redirect a route relative to it.
+   */
+  readonly relativeRedirect: <P extends string>(
+    route: Route<P>,
+    ...params: [keyof ParamsOf<P>] extends [never] ? [] : [ParamsOf<P>]
+  ) => Fx.Fx<
+    Router | RenderContext | Match.Context<Matches[number]>,
+    Cause.NoSuchElementException | Exclude<Match.Error<Matches[number]>, Redirect>,
+    Match.Success<Matches[number]>
+  >
+
   readonly concat: <OtherMatches extends ReadonlyArray<Match.Any>>(
     other: Matcher<OtherMatches>,
   ) => Matcher<readonly [...Matches, ...OtherMatches]>
@@ -49,17 +96,24 @@ export interface Matcher<Matches extends ReadonlyArray<Match.Any>> {
 export function Matcher<const Matches extends ReadonlyArray<Match.Any>>(
   matches: Chunk.Chunk<Match.Any>,
 ): Matcher<Matches> {
-  return {
-    matches,
+  function match<P extends string, R, E, A, Opts extends MatchOptions.Any<P> = never>(
+    route: Route<P>,
+    render: (params: Fx.Filtered<never, never, ParamsOf<P>>) => Fx.Fx<R, E, A>,
+    options?: Opts,
+  ): Matcher<readonly [...Matches, Match<P, Fx.Fx<R, E, A>, Opts>]> {
+    return Matcher(Chunk.append(matches, Match(route, render, options || {})))
+  }
 
-    match<P extends string, R, E, A, Opts extends MatchOptions.Any<P> = never>(
+  const self: Matcher<Matches> = {
+    matches,
+    match,
+    matchTo<P extends string, A, Opts extends MatchOptions.Any<P> = never>(
       route: Route<P>,
-      render: (params: Fx.Filtered<never, never, ParamsOf<P>>) => Fx.Fx<R, E, A>,
+      to: (params: ParamsOf<P>) => A,
       options?: Opts,
-    ): Matcher<readonly [...Matches, Match<P, Fx.Fx<R, E, A>, Opts>]> {
-      return Matcher(Chunk.append(matches, Match(route, render, options || {})))
+    ): Matcher<readonly [...Matches, Match<P, Fx.Fx<never, never, A>, Opts>]> {
+      return match(route, (params) => params.map(to), options)
     },
-
     matchLazy<P extends string, R, E, A, Opts extends MatchOptions.Any<P> = never>(
       route: Route<P>,
       render: () => Promise<(params: Fx.Filtered<never, never, ParamsOf<P>>) => Fx.Fx<R, E, A>>,
@@ -74,15 +128,45 @@ export function Matcher<const Matches extends ReadonlyArray<Match.Any>>(
       ) => Fx.Fx<R, E, A>,
     ) => Fx.scoped(matchRoutes(Chunk.toReadonlyArray(matches) as Matches, render)),
 
+    redirect: (route, params?) =>
+      redirectEffect(
+        self,
+        Redirect.redirect(route.make(params || ({} as any)), {
+          history: 'replace',
+        }),
+      ),
+
+    relativeRedirect: (route, params?) =>
+      redirectEffect(
+        self,
+        Router.withEffect((router: Router) =>
+          Effect.gen(function* ($) {
+            const parentParams: ParamsOf<string> = yield* $(router.params)
+            const allParams = { ...parentParams, ...params }
+            const nested = router.route.concat(route)
+            const url = nested.make(allParams as any)
+
+            return yield* $(Redirect.redirect(url, { history: 'replace' }))
+          }),
+        ),
+      ),
+
     concat: <OtherMatches extends ReadonlyArray<Match.Any>>(
       other: Matcher<OtherMatches>,
     ): Matcher<readonly [...Matches, ...OtherMatches]> => {
       return Matcher(Chunk.appendAll(matches, other.matches))
     },
+
+    pipe() {
+      // eslint-disable-next-line prefer-rest-params
+      return Pipeable.pipeArguments(this, arguments)
+    },
   }
+
+  return self
 }
 
-export const { match, matchLazy } = Matcher<readonly []>(Chunk.empty())
+export const { match, matchTo, matchLazy } = Matcher<readonly []>(Chunk.empty())
 
 export const notFound: {
   <R, E, A>(
@@ -92,7 +176,7 @@ export const notFound: {
   ) => Fx.Fx<
     Router | R | Match.Context<Matches[number]>,
     Exclude<E | Match.Error<Matches[number]>, Redirect>,
-    A | Fx.Fx.OutputOf<Match.Rendered<Matches[number]>>
+    A | Fx.Fx.Success<Match.Rendered<Matches[number]>>
   >
 
   <Matches extends readonly Match.Any[], R, E, A>(
@@ -101,7 +185,7 @@ export const notFound: {
   ): Fx.Fx<
     Router | R | Match.Context<Matches[number]>,
     Exclude<E | Match.Error<Matches[number]>, Redirect>,
-    A | Fx.Fx.OutputOf<Match.Rendered<Matches[number]>>
+    A | Fx.Fx.Success<Match.Rendered<Matches[number]>>
   >
 } = Debug.dual(
   2,

package/src/matchRoutes.ts

@@ -48,7 +48,7 @@ export function matchRoutes<
 
       return [
         // If the route is the a single slash, use the route directly to keep any parsing options.
-        match.route.path === '/' ? match.route : nestedRouter.route,
+        nestedRouter.route,
         render,
         match.options?.guard as
           | ((params: ParamsOf<string>) => Effect.Effect<_R, NavigationError, boolean>)

package/src/router.ts

@@ -3,10 +3,10 @@ import * as Effect from '@effect/io/Effect'
 import * as Layer from '@effect/io/Layer'
 import { Tag } from '@typed/context'
 import { DomServicesElementParams } from '@typed/dom'
-import { Filtered } from '@typed/fx'
+import * as Fx from '@typed/fx'
 import * as Navigation from '@typed/navigation'
 import { ParamsOf, PathJoin } from '@typed/path'
-import { Route } from '@typed/route'
+import { Route, RouteOptions } from '@typed/route'
 
 export interface Router<in out P extends string = string> {
   /**
@@ -17,13 +17,16 @@ export interface Router<in out P extends string = string> {
   /**
    * The current params for the current path.
    */
-  readonly params: Filtered<never, never, ParamsOf<P>>
+  readonly params: Fx.Filtered<never, never, ParamsOf<P>>
 
   /**
    * Construct a new Router instance by defining a new Route which is concatenated
    * to the current Route.
    */
-  readonly define: <P2 extends string>(route: Route<P2>) => Router<PathJoin<[P, P2]>>
+  readonly define: <P2 extends string>(
+    route: Route<P2>,
+    overrides?: RouteOptions,
+  ) => Router<PathJoin<[P, P2]>>
 
   /**
    * The parent Router instance if one exists.
@@ -53,8 +56,11 @@ export const navigation: Layer.Layer<Navigation.Navigation, never, Router> = Rou
         route,
         navigation,
         params: currentPath.filterMap(route.match),
-        define: <P2 extends string>(other: Route<P2>): Router<PathJoin<[P, P2]>> =>
-          makeRouter(route.concat(other), Option.some(router)),
+        define: <P2 extends string>(
+          other: Route<P2>,
+          overrides?: RouteOptions,
+        ): Router<PathJoin<[P, P2]>> =>
+          makeRouter(route.concat(other, overrides), Option.some(router)),
         parent,
       }
 
@@ -78,3 +84,50 @@ export const memory = (
   options: Navigation.MemoryNavigationOptions,
 ): Layer.Layer<never, never, Navigation.Navigation | Router> =>
   Layer.provideMerge(Navigation.memory(options), navigation)
+
+const routerNavigation: Layer.Layer<Router, never, Navigation.Navigation> = Layer.effectContext(
+  Effect.map(Router, (router) => Navigation.Navigation.build(router.navigation).context),
+)
+
+const provideRouterNavigationEffect = Effect.provideSomeLayer(routerNavigation)
+const provideRouterNavigationFx = Fx.provideSomeLayer(routerNavigation)
+
+export const back: Effect.Effect<Router, never, Navigation.Destination> =
+  provideRouterNavigationEffect(Navigation.back)
+
+export const canGoBack: Effect.Effect<Router, never, boolean> & Fx.Fx<Router, never, boolean> =
+  Object.assign(
+    provideRouterNavigationEffect(Navigation.canGoBack),
+    provideRouterNavigationFx(Navigation.canGoBack),
+  )
+
+export const canGoForward: Effect.Effect<Router, never, boolean> & Fx.Fx<Router, never, boolean> =
+  Object.assign(
+    provideRouterNavigationEffect(Navigation.canGoForward),
+    provideRouterNavigationFx(Navigation.canGoForward),
+  )
+
+export const cancelNavigation = Navigation.cancelNavigation
+
+export const forward = provideRouterNavigationEffect(Navigation.forward)
+
+export const navigate: (
+  url: string,
+  options?: Navigation.NavigateOptions,
+) => Effect.Effect<Router, never, Navigation.Destination> = (url, options) =>
+  provideRouterNavigationEffect(Navigation.navigate(url, options))
+
+export const push: (
+  url: string,
+  options?: Omit<Navigation.NavigateOptions, 'history'>,
+) => Effect.Effect<Router, never, Navigation.Destination> = (url, options) =>
+  navigate(url, { ...options, history: 'push' })
+
+export const replace: (
+  url: string,
+  options?: Omit<Navigation.NavigateOptions, 'history'>,
+) => Effect.Effect<Router, never, Navigation.Destination> = (url, options) =>
+  navigate(url, { ...options, history: 'replace' })
+
+export const reload: Effect.Effect<Router, never, Navigation.Destination> =
+  provideRouterNavigationEffect(Navigation.reload)