@typed/router 0.13.0 → 0.14.0

package/src/matchRoutes.ts

@@ -0,0 +1,112 @@
+import { identity, pipe } from '@effect/data/Function'
+import * as Option from '@effect/data/Option'
+import * as Effect from '@effect/io/Effect'
+import * as Scope from '@effect/io/Scope'
+import * as Fx from '@typed/fx'
+import { RenderContext } from '@typed/html'
+import { NavigationError } from '@typed/navigation'
+import { ParamsOf } from '@typed/path'
+
+import { Match } from './Match.js'
+import { Redirect } from './Redirect.js'
+import { Router, getCurrentPathFromUrl } from './router.js'
+
+export function matchRoutes<
+  const Matches extends ReadonlyArray<Match.Any>,
+  R = never,
+  E = never,
+  A = never,
+>(
+  matches: Matches,
+  onNotFound: (
+    params: Fx.Filtered<never, never, Readonly<Record<string, string>>>,
+  ) => Fx.Fx<R, E, A> = () => Fx.empty(),
+): Fx.Fx<
+  Router | RenderContext | Scope.Scope | R | Match.Context<Matches[number]>,
+  Exclude<E | Match.Error<Matches[number]>, Redirect>,
+  A | Match.Success<Matches[number]>
+> {
+  type _R = R | Match.Context<Matches[number]> | RenderContext | Router | Scope.Scope
+  type _E = E | Match.Error<Matches[number]> | Redirect
+  type _A = A | Match.Success<Matches[number]>
+
+  type RENDERABLE = Fx.Fx<_R, _E, _A>
+
+  return Fx.gen(function* ($) {
+    const { environment } = yield* $(RenderContext)
+    const isBrowser = environment === 'browser'
+    const router = yield* $(Router)
+    const notFound = onNotFound(router.params) as RENDERABLE
+    const matchers = matches.map((match) => {
+      const nestedRouter = router.define(match.route)
+      const render = pipe(
+        nestedRouter.params,
+        match.render,
+        Fx.provideService(Router, nestedRouter as Router),
+        Fx.scoped,
+      ) as RENDERABLE
+
+      return [
+        match.route,
+        render,
+        match.options?.guard as
+          | ((params: ParamsOf<string>) => Effect.Effect<_R, NavigationError, boolean>)
+          | undefined,
+        match.options?.onMatch as
+          | ((params: ParamsOf<string>) => Effect.Effect<_R, _E, unknown>)
+          | undefined,
+      ] as const
+    })
+    const length = matchers.length
+
+    const matched = yield* $(
+      Fx.makeRef<never, any, RENDERABLE>(Effect.succeed<RENDERABLE>(Fx.empty())),
+    )
+
+    const matchPath = (path: string) =>
+      Effect.gen(function* ($) {
+        for (let i = 0; i < length; ++i) {
+          const [route, render, guard, onMatch] = matchers[i]
+          const params = route.match(path)
+
+          if (Option.isSome(params)) {
+            // If there is a guard and it fails, continue to next route
+            if (guard && !(yield* $(guard(params.value)))) {
+              continue
+            }
+
+            // If there is an onMatch handler, run it and catch any errors
+            // This is useful when you want to add tracking when a route is matched
+            if (onMatch) {
+              yield* $(
+                onMatch(params.value),
+                Effect.catchAllCause((cause) => matched.error(cause)),
+                Effect.forkScoped,
+              )
+            }
+
+            return yield* $(matched.set(render))
+          }
+        }
+
+        return yield* $(matched.set(notFound))
+      })
+
+    // Match a Route when navigation occurs
+    yield* $(
+      router.navigation.onNavigation((event) =>
+        matchPath(getCurrentPathFromUrl(event.destination.url)),
+      ),
+    )
+
+    return pipe(
+      matched,
+      isBrowser ? identity : Fx.take(1),
+      Redirect.switchMatch(
+        (r) => Fx.as(Fx.fromEffect(router.navigation.navigate(r.url, r.options)), Option.none()),
+        Fx.map(Option.some),
+      ),
+      Fx.compact,
+    )
+  })
+}

package/src/router.ts

@@ -1,338 +1,83 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import { pipe } from '@effect/data/Function'
 import * as Option from '@effect/data/Option'
 import * as Effect from '@effect/io/Effect'
-import type * as Layer from '@effect/io/Layer'
-import * as Runtime from '@effect/io/Runtime'
-import type * as Scope from '@effect/io/Scope'
-import * as Context from '@typed/context'
-import { Document, Location, History, addWindowListener } from '@typed/dom'
-import * as Fx from '@typed/fx'
-import type * as html from '@typed/html'
-import { RenderContext } from '@typed/html'
-import * as Path from '@typed/path'
-import * as Route from '@typed/route'
-
-export interface Router<out R = never, out E = never, in out P extends string = string> {
-  /**
-   * The base route the Router is starting from.
-   */
-  readonly route: Route.Route<R, E, P>
-
-  /**
-   * The current path of the application
-   */
-  readonly currentPath: Fx.RefSubject<never, string>
-
-  /**
-   * The current matched params of the router
-   */
-  readonly params: Fx.Fx<R, E, Path.ParamsOf<P>>
-
+import * as Layer from '@effect/io/Layer'
+import { Tag } from '@typed/context'
+import { GlobalThis, Window, DomServices, domServices, localStorage } from '@typed/dom'
+import { Filtered } from '@typed/fx'
+import * as Navigation from '@typed/navigation'
+import { ParamsOf, PathJoin } from '@typed/path'
+import { Route } from '@typed/route'
+
+export interface Router<in out P extends string = string> {
   /**
-   * The current outlet of this Router
+   * The base Route for this Router instance.
    */
-  readonly outlet: Fx.RefSubject<Redirect, html.Renderable>
+  readonly route: Route<P>
 
   /**
-   * Helper for constructing a path from a route relative to the router.
+   * The current params for the current path.
    */
-  readonly createPath: <R2 extends Route.Route<any, any, string>, P extends Route.ParamsOf<R2>>(
-    route: R2,
-    ...[params]: [keyof P] extends [never] ? [] : [P]
-  ) => Effect.Effect<
-    R,
-    never,
-    Path.PathJoin<
-      [Path.Interpolate<Route.PathOf<R>, Route.ParamsOf<R>>, Path.Interpolate<Route.PathOf<R2>, P>]
-    >
-  >
+  readonly params: Filtered<never, never, ParamsOf<P>>
 
   /**
-   * Helper for constructing a nested router
+   * Construct a new Router instance by defining a new Route which is concatenated
+   * to the current Route.
    */
-  readonly define: <R2, E2, Path2 extends string>(
-    route: Route.Route<R2, E2, Path2>,
-  ) => Router<R | R2, E | E2, Path.PathJoin<[P, Path2]>>
+  readonly define: <P2 extends string>(route: Route<P2>) => Router<PathJoin<[P, P2]>>
 
   /**
-   * The parent router if one exists
+   * The parent Router instance if one exists.
    */
-  readonly parent: Option.Option<Router<any, string>>
+  readonly parent: Option.Option<Router<string>>
 
   /**
-   * Provide all the resources needed for a Router
+   * The Navigation Service
    */
-  readonly provideContext: (environment: Context.Context<R>) => Router<never, E, P>
-}
-
-export const Router = Object.assign(Context.Tag<Router>('@typed/router/Router'), {
-  make: function makeRouter<R = never, E = never, P extends string = string>(
-    route: Route.Route<R, E, P>,
-    currentPath: Fx.RefSubject<never, string>,
-    parent: Option.Option<Router<any, any, string>> = Option.none(),
-  ): Router<R, E, P> {
-    const outlet = Fx.RefSubject.unsafeMake<Redirect, html.Renderable>(
-      Effect.sync((): html.Renderable => null),
-    )
-
-    const createPath = <R2 extends Route.Route<any, any, string>, P extends Route.ParamsOf<R2>>(
-      other: R2,
-      ...[params]: [keyof P] extends [never] ? [] : [P]
-    ): Effect.Effect<
-      R,
-      E,
-      Path.PathJoin<
-        [
-          Path.Interpolate<Route.PathOf<R>, Route.ParamsOf<R>>,
-          Path.Interpolate<Route.PathOf<R2>, P>,
-        ]
-      >
-    > =>
-      Effect.gen(function* ($) {
-        const path = yield* $(currentPath.get)
-        const baseParams = yield* $(route.match(path))
-
-        if (Option.isNone(baseParams)) {
-          return yield* $(
-            Effect.dieMessage(
-              `Can not create path when the parent can not be matched.
-                Parent Route: ${route.path}
-                Current Route: ${other.path}
-                Current Path: ${path}`,
-            ),
-          )
-        }
-
-        return route.concat(other).make({ ...baseParams.value, ...params } as any) as any
-      })
-
-    const router: Router<R, E, P> = {
-      route,
-      currentPath,
-      params: pipe(currentPath, Fx.switchMapEffect(route.match), Fx.compact, Fx.hold),
-      outlet,
-      createPath: createPath as Router<R, P>['createPath'],
-      define: <R2, E2, Path2 extends string>(other: Route.Route<R2, E2, Path2>) =>
-        makeRouter(route.concat(other), currentPath, Option.some(router as any)) as any,
-      provideContext: (env) => provideContext(env)(router),
-      parent,
-    }
-
-    return router
-  },
-})
-
-export const outlet: Fx.Fx<RenderContext | Router, Redirect, html.Renderable> =
-  RenderContext.withFx(({ environment }) =>
-    Router.withFx((r) =>
-      environment === 'browser'
-        ? r.outlet
-        : pipe(
-            r.outlet,
-            Fx.skipUntil((x) => x !== null),
-            Fx.take(1),
-          ),
-    ),
-  )
-
-export const currentPath: Fx.Fx<Router, never, string> = Router.withFx((r) => r.currentPath)
-
-export function provideContext<R>(environment: Context.Context<R>) {
-  return <E, P extends string>(router: Router<R, E, P>): Router<never, E, P> => {
-    const provided: Router<never, E, P> = {
-      ...router,
-      params: pipe(router.params, Fx.provideContext(environment)),
-      route: Route.provideContext(environment)(router.route),
-      createPath: ((other, ...params) =>
-        Effect.provideContext<R>(environment)(router.createPath(other, ...params))) as Router<
-        never,
-        P
-      >['createPath'],
-      provideContext: (env) => provideContext(env)(provided),
-    }
-
-    return provided
-  }
-}
-
-export interface Redirect {
-  readonly _tag: 'Redirect'
-  readonly path: string
-}
-
-export namespace Redirect {
-  export const make = (path: string): Redirect => ({ _tag: 'Redirect', path })
-
-  export const is = (r: unknown): r is Redirect =>
-    typeof r === 'object' && r !== null && '_tag' in r && r._tag === 'Redirect'
-}
-
-export function redirect(path: string) {
-  return Effect.fail<Redirect>(Redirect.make(path))
+  readonly navigation: Navigation.Navigation
 }
 
-redirect.fx = (path: string): Fx.Fx<never, Redirect, never> =>
-  Fx.fail<Redirect>(Redirect.make(path))
-
-export const redirectTo = <R, E, P extends string>(
-  route: Route.Route<R, E, P>,
-  ...[params]: [keyof Path.ParamsOf<P>] extends [never] ? [{}?] : [Path.ParamsOf<P>]
-): Effect.Effect<Router, Redirect, never> =>
-  pipe(
-    Router.withEffect((r) => r.createPath(route as any, params as any)),
-    Effect.flatMap(redirect),
-  )
-
-redirectTo.fx = <R, E, P extends string>(
-  route: Route.Route<R, E, P>,
-  ...params: [keyof Path.ParamsOf<P>] extends [never] ? [{}?] : [(path: string) => Path.ParamsOf<P>]
-): Fx.Fx<Router, Redirect, never> =>
-  pipe(
-    Router.withEffect((r) => r.createPath(route as any, params as any)),
-    Fx.fromEffect,
-    Fx.switchMap(redirect.fx),
-  )
-
-// TOOD: Add support for reading <base> tag for default Router path.
+export const Router = Tag<Router>('Router')
 
-export const makeRouter = (
-  currentPath?: Fx.RefSubject<never, string>,
-): Effect.Effect<Location | History | Window | Document | Scope.Scope, never, Router> =>
+export const navigation: Layer.Layer<Navigation.Navigation, never, Router> = Router.layer(
   Effect.gen(function* ($) {
-    const history = yield* $(History)
-    const location = yield* $(Location)
-
-    if (!currentPath) {
-      currentPath = Fx.RefSubject.unsafeMake(
-        Effect.sync(() => getCurrentPathFromLocation(location)),
-      )
-    }
-
-    // Patch history events to emit an event when the path changes
-    const historyEvents = yield* $(patchHistory)
-
-    // Update the current path when events occur:
-    // - popstate
-    // - hashchange
-    // - history events
-    yield* $(
-      Fx.mergeAll(addWindowListener('popstate'), addWindowListener('hashchange'), historyEvents),
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      Fx.switchMapEffect(() => currentPath!.set(getCurrentPathFromLocation(location))),
-      Fx.drain,
-      Effect.forkScoped,
-    )
-
-    // Listen to path changes and update the current history location, if necessary
-    yield* $(
-      pipe(
-        currentPath,
-        Fx.skipRepeats,
-        Fx.observe((path) =>
-          Effect.sync(() => {
-            if (path !== getCurrentPathFromLocation(location)) {
-              history.pushState({}, '', path)
-            }
-          }),
-        ),
-        Effect.forkScoped,
-      ),
+    const navigation = yield* $(Navigation.Navigation)
+    const currentPath = navigation.currentEntry.map((destination) =>
+      getCurrentPathFromUrl(destination.url),
     )
 
-    // Find the configured base path
-    const document = yield* $(Document)
-    const base = document.querySelector('base')
-    const baseHref = base ? getBasePathFromHref(base.href) : '/'
-
-    // Make our base router
-    return Router.make(Route.Route(baseHref), currentPath) as Router
-  })
-
-export const live = (
-  currentPath?: Fx.RefSubject<never, string>,
-): Layer.Layer<Location | History | Window | Document, never, Router<never, never, string>> =>
-  Router.layerScoped(makeRouter(currentPath))
-
-export function getCurrentPathFromLocation(location: Location | HTMLAnchorElement | URL) {
-  return location.pathname + location.search + location.hash
-}
-
-export const getCurrentPath = Router.withEffect((r) => r.currentPath.get)
-
-export const getBasePath = Router.with((r) => {
-  const routers: Router<any, any>[] = [r]
-  let current: Router<any, any> = r
-
-  while (Option.isSome(current.parent)) {
-    current = current.parent.value
-    routers.push(current)
-  }
-
-  return routers.reduceRight((acc, r) => Path.pathJoin(r.route.path, acc), '')
-})
-
-const patchHistory = Effect.gen(function* ($) {
-  const history = yield* $(History)
-  const historyEvents = Fx.makeSubject<never, void>()
-  const runtime = yield* $(Effect.runtime<never>())
-  const runFork = Runtime.runFork(runtime)
-  const cleanup = patchHistory_(history, () => runFork(historyEvents.event()))
-
-  // unpatch history upon finalization
-  yield* $(Effect.addFinalizer(() => Effect.sync(cleanup)))
-
-  return historyEvents
-})
-
-function patchHistory_(history: History, sendEvent: () => void) {
-  const pushState = history.pushState.bind(history)
-  const replaceState = history.replaceState.bind(history)
-  const go = history.go.bind(history)
-  const back = history.back.bind(history)
-  const forward = history.forward.bind(history)
-
-  history.pushState = function (state, title, url) {
-    pushState(state, title, url)
-    sendEvent()
-  }
-
-  history.replaceState = function (state, title, url) {
-    replaceState(state, title, url)
-    sendEvent()
-  }
-
-  history.go = function (delta) {
-    go(delta)
-    sendEvent()
-  }
-
-  history.back = function () {
-    back()
-    sendEvent()
-  }
+    function makeRouter<P extends string>(
+      route: Route<P>,
+      parent: Option.Option<Router<any>>,
+    ): Router<P> {
+      const router: Router<P> = {
+        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)),
+        parent,
+      }
+
+      return router
+    }
 
-  history.forward = function () {
-    forward()
-    sendEvent()
-  }
+    return makeRouter(Route(navigation.base), Option.none())
+  }),
+)
 
-  // Reset history to original state
-  return () => {
-    history.pushState = pushState
-    history.replaceState = replaceState
-    history.go = go
-    history.back = back
-    history.forward = forward
-  }
+export function getCurrentPathFromUrl(url: URL): string {
+  return url.pathname + url.search + url.hash
 }
 
-function getBasePathFromHref(href: string) {
-  try {
-    const url = new URL(href)
+export const dom = (
+  options?: Navigation.DomNavigationOptions,
+): Layer.Layer<GlobalThis | Window, never, DomServices | Navigation.Navigation | Router> =>
+  Layer.provideMerge(
+    localStorage,
+    Layer.provideMerge(domServices, Layer.provideMerge(Navigation.dom(options), navigation)),
+  )
 
-    return getCurrentPathFromLocation(url)
-  } catch {
-    return href
-  }
-}
+export const memory = (
+  options: Navigation.MemoryNavigationOptions,
+): Layer.Layer<never, never, Navigation.Navigation | Router> =>
+  Layer.provideMerge(Navigation.memory(options), navigation)

package/tsconfig.build.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["src/**/*.test.ts"]
+  "exclude": [
+    "src/**/*.test.ts",
+    "src/**/*.test-d.ts",
+    "dist"
+  ]
 }