@typed/navigation 0.17.0 → 0.18.1

package/src/internal/shared.ts

@@ -1,58 +1,85 @@
-import * as HttpClient from "@effect/platform/HttpClient"
-
-import { Schema } from "@effect/schema"
-import type * as Context from "@typed/context"
-import * as RefSubject from "@typed/fx/RefSubject"
-import type { Uuid } from "@typed/id"
-import { GetRandomValues, makeUuid } from "@typed/id"
-import * as Effect from "effect/Effect"
-import * as Either from "effect/Either"
-import * as Option from "effect/Option"
-import type * as Scope from "effect/Scope"
-import type { Commit } from "../Layer.js"
-import type {
-  BeforeNavigationEvent,
-  BeforeNavigationHandler,
-  CancelNavigation,
-  FormDataEvent,
-  FormDataHandler,
-  FormInputFrom,
-  NavigateOptions,
-  Navigation,
-  NavigationError,
-  NavigationEvent,
-  NavigationHandler,
-  ProposedDestination,
-  RedirectError
-} from "../Navigation.js"
-import { Destination, Transition } from "../Navigation.js"
+import * as Headers from '@effect/platform/Headers'
+import * as HttpClient from '@effect/platform/HttpClient'
+import { GetRandomValues, makeUuid4, type Uuid4 } from '@typed/id'
+import * as LazyRef from '@typed/lazy-ref'
+import { Cause, Schema } from 'effect'
+import type * as Context from 'effect/Context'
+import * as Effect from 'effect/Effect'
+import * as Either from 'effect/Either'
+import * as Option from 'effect/Option'
+import type * as Scope from 'effect/Scope'
+import { Destination } from '../Destination.js'
+import {
+  FormSubmitError,
+  type CancelNavigation,
+  type NavigationError,
+  type RedirectError,
+} from '../Error.js'
+import { TransitionEvent, type NavigationEvent } from '../Event.js'
+import type { FormSubmit } from '../Forms.js'
+import type { BeforeNavigationHandler, NavigationHandler } from '../Handler.js'
+import type { Commit } from '../Layer.js'
+import type { NavigateOptions } from '../NavigateOptions.js'
+import type { Navigation } from '../Navigation.js'
+import type { ProposedDestination } from '../ProposedDestination.js'
 
 export type NavigationState = {
   readonly entries: ReadonlyArray<Destination>
   readonly index: number
-  readonly transition: Option.Option<Transition>
+  readonly transition: Option.Option<TransitionEvent>
 }
 
 export const NavigationState = Schema.Struct({
   entries: Schema.Array(Destination),
   index: Schema.Number,
-  transition: Schema.OptionFromNullishOr(Transition, null)
+  transition: Schema.OptionFromNullishOr(TransitionEvent, null),
 })
 
-export const getUrl = (origin: string, urlOrPath: string | URL): URL => {
-  return typeof urlOrPath === "string" ? new URL(urlOrPath, origin) : urlOrPath
+export function getUrl(origin: string, urlOrPath: string | URL, base: string): URL {
+  if (typeof urlOrPath === 'string') {
+    const url = new URL(urlOrPath, origin)
+
+    // If the URL is relative, join it with the base
+    if (isRelativeUrl(urlOrPath)) {
+      url.pathname = joinPath(base, url.pathname)
+    }
+
+    return url
+  }
+
+  return urlOrPath
+}
+
+function isRelativeUrl(url: string) {
+  if (url.includes('://')) return false
+  return true
+}
+
+function joinPath(a: string, b: string) {
+  const aEndsWithSlash = a[a.length - 1] === '/'
+  const bStartsWithSlash = b[0] === '/'
+
+  if (aEndsWithSlash && bStartsWithSlash) {
+    return a + b.slice(1)
+  }
+
+  if (!aEndsWithSlash && !bStartsWithSlash) {
+    return `${a}/${b}`
+  }
+
+  return a + b
 }
 
 export type ModelAndIntent = {
-  readonly state: RefSubject.RefSubject<NavigationState>
-  readonly canGoBack: RefSubject.Computed<boolean>
-  readonly canGoForward: RefSubject.Computed<boolean>
-  readonly beforeHandlers: RefSubject.RefSubject<
+  readonly state: LazyRef.LazyRef<NavigationState>
+
+  readonly beforeHandlers: LazyRef.LazyRef<
     Set<readonly [BeforeNavigationHandler<any, any>, Context.Context<any>]>
   >
-  readonly handlers: RefSubject.RefSubject<Set<readonly [NavigationHandler<any, any>, Context.Context<any>]>>
 
-  readonly formDataHandlers: RefSubject.RefSubject<Set<readonly [FormDataHandler<any, any>, Context.Context<any>]>>
+  readonly handlers: LazyRef.LazyRef<
+    Set<readonly [NavigationHandler<any, any>, Context.Context<any>]>
+  >
 
   readonly commit: Commit
 }
@@ -63,16 +90,18 @@ export function setupFromModelAndIntent(
   modelAndIntent: ModelAndIntent,
   origin: string,
   base: string,
-  getRandomValues: Context.Fn.FnOf<typeof GetRandomValues>,
-  newNavigationState?: () => NavigationState
+  getRandomValues: Context.Tag.Service<typeof GetRandomValues>,
+  newNavigationState?: () => NavigationState,
 ) {
-  const { beforeHandlers, canGoBack, canGoForward, commit, formDataHandlers, handlers, state } = modelAndIntent
-  const entries = RefSubject.map(state, (s) => s.entries)
-  const currentEntry = RefSubject.map(state, (s) => s.entries[s.index])
-  const transition = RefSubject.map(state, (s) => s.transition)
-
-  const runBeforeHandlers = (event: BeforeNavigationEvent) =>
-    Effect.gen(function*() {
+  const { beforeHandlers, commit, handlers, state } = modelAndIntent
+  const canGoBack = LazyRef.map(state, (s) => s.index > 0)
+  const canGoForward = LazyRef.map(state, (s) => s.index < s.entries.length - 1)
+  const entries = LazyRef.map(state, (s) => s.entries)
+  const currentEntry = LazyRef.map(state, (s) => s.entries[s.index])
+  const transition = LazyRef.map(state, (s) => s.transition)
+
+  const runBeforeHandlers = (event: TransitionEvent) =>
+    Effect.gen(function* () {
       const handlers = yield* beforeHandlers
       const matches: Array<Effect.Effect<unknown, RedirectError | CancelNavigation>> = []
 
@@ -80,7 +109,7 @@ export function setupFromModelAndIntent(
         const exit = yield* handler(event).pipe(Effect.provide(ctx), Effect.either)
         if (Either.isRight(exit)) {
           const match = exit.right
-          if (Option.isSome(match)) {
+          if (match !== undefined && Option.isSome(match)) {
             matches.push(Effect.provide(match.value, ctx))
           }
         } else {
@@ -101,13 +130,13 @@ export function setupFromModelAndIntent(
     })
 
   const runHandlers = (event: NavigationEvent) =>
-    Effect.gen(function*() {
+    Effect.gen(function* () {
       const eventHandlers = yield* handlers
       const matches: Array<Effect.Effect<unknown>> = []
 
       for (const [handler, ctx] of eventHandlers) {
         const match = yield* Effect.provide(handler(event), ctx)
-        if (Option.isSome(match)) {
+        if (match !== undefined && Option.isSome(match)) {
           matches.push(Effect.provide(match.value, ctx))
         }
       }
@@ -117,60 +146,18 @@ export function setupFromModelAndIntent(
       }
     })
 
-  const runFormDataHandlers = (
-    event: FormDataEvent
-  ): Effect.Effect<
-    Either.Either<Option.Option<HttpClient.response.ClientResponse>, RedirectError | CancelNavigation>,
-    NavigationError | HttpClient.error.HttpClientError,
-    Scope.Scope | HttpClient.client.Client.Default
-  > =>
-    Effect.gen(function*() {
-      const handlers = yield* formDataHandlers
-      const matches: Array<
-        Effect.Effect<Option.Option<HttpClient.response.ClientResponse>, RedirectError | CancelNavigation>
-      > = []
-
-      for (const [handler, ctx] of handlers) {
-        const exit = yield* handler(event).pipe(Effect.provide(ctx), Effect.either)
-        if (Either.isRight(exit)) {
-          const match = exit.right
-          if (Option.isSome(match)) {
-            matches.push(Effect.provide(match.value, ctx))
-          }
-        } else {
-          return Either.left(exit.left)
-        }
-      }
-
-      if (matches.length > 0) {
-        for (const match of matches) {
-          const exit = yield* Effect.either(match)
-          if (Either.isLeft(exit)) {
-            return Either.left(exit.left)
-          } else if (Option.isSome(exit.right)) {
-            return Either.right(exit.right)
-          }
-        }
-      } else {
-        // Only if there are 0 matches, we'll make a request to the server ourselves
-        const response = yield* makeFormDataRequest(event, Option.getOrElse(event.action, () => event.from.url.href))
-
-        return Either.right(Option.some(response))
-      }
-
-      return Either.right(Option.none())
-    })
-
   const runNavigationEvent = (
-    beforeEvent: BeforeNavigationEvent,
+    beforeEvent: TransitionEvent,
     get: Effect.Effect<NavigationState>,
     set: (a: NavigationState) => Effect.Effect<NavigationState>,
     depth: number,
-    skipCommit: boolean = false
+    skipCommit = false,
   ): Effect.Effect<Destination, NavigationError> =>
-    Effect.gen(function*() {
-      let current = yield* get
-      current = yield* set({ ...current, transition: Option.some(beforeEvent) })
+    Effect.gen(function* () {
+      const current = yield* set({
+        ...(yield* get),
+        transition: Option.some(beforeEvent),
+      })
 
       if (!skipCommit) {
         const beforeError = yield* runBeforeHandlers(beforeEvent)
@@ -180,13 +167,15 @@ export function setupFromModelAndIntent(
         }
       }
 
-      const to = isDestination(beforeEvent.to) ? beforeEvent.to : yield* upgradeProposedDestination(beforeEvent.to)
+      const to = isDestination(beforeEvent.to)
+        ? beforeEvent.to
+        : yield* upgradeProposedDestination(beforeEvent.to)
 
       if (!skipCommit) {
         yield* commit(to, beforeEvent)
       }
 
-      if (newNavigationState) {
+      if (newNavigationState !== undefined) {
         const { entries, index } = yield* set(newNavigationState())
 
         return entries[index]
@@ -194,86 +183,98 @@ export function setupFromModelAndIntent(
         const event: NavigationEvent = {
           type: beforeEvent.type,
           info: beforeEvent.info,
-          destination: to
+          destination: to,
         }
 
-        if (beforeEvent.type === "push") {
+        if (beforeEvent.type === 'push') {
           const index = current.index + 1
           const entries = current.entries.slice(0, index).concat([to])
 
           yield* set({ entries, index, transition: Option.none() })
-        } else if (beforeEvent.type === "replace") {
+        } else if (beforeEvent.type === 'replace') {
           const index = current.index
           const before = current.entries.slice(0, index)
           const after = current.entries.slice(index + 1)
           const entries = [...before, to, ...after]
 
           yield* set({ entries, index, transition: Option.none() })
-        } else if (beforeEvent.type === "reload") {
+        } else if (beforeEvent.type === 'reload') {
           yield* set({ ...current, transition: Option.none() })
         } else {
           const { delta } = beforeEvent
           const nextIndex = current.index + delta
 
-          yield* set({ ...current, index: nextIndex, transition: Option.none() })
+          yield* set({
+            ...current,
+            index: nextIndex,
+            transition: Option.none(),
+          })
         }
 
         yield* runHandlers(event)
       }
 
       return to
-    }).pipe(GetRandomValues.provide(getRandomValues))
+    }).pipe(Effect.provideService(GetRandomValues, getRandomValues))
 
   const handleError = (
     error: RedirectError | CancelNavigation,
     get: Effect.Effect<NavigationState>,
     set: (a: NavigationState) => Effect.Effect<NavigationState>,
-    depth: number
+    depth: number,
   ): Effect.Effect<Destination, NavigationError> =>
-    Effect.gen(function*() {
+    Effect.gen(function* () {
       if (depth >= 25) {
-        return yield* Effect.dieMessage(`Redirect loop detected.`)
+        return yield* Effect.dieMessage('Redirect loop detected.')
       }
 
       const { entries, index } = yield* get
       const from = entries[index]
 
-      if (error._tag === "CancelNavigation") {
+      if (error._tag === 'CancelNavigation') {
         yield* set({ entries, index, transition: Option.none() })
 
         return from
       } else {
-        const event = yield* makeRedirectEvent(origin, error, from)
+        const event = yield* makeRedirectEvent(origin, error, from, base)
 
         return yield* runNavigationEvent(event, get, set, depth + 1)
       }
-    }).pipe(GetRandomValues.provide(getRandomValues))
+    }).pipe(Effect.provideService(GetRandomValues, getRandomValues))
 
-  const navigate = (pathOrUrl: string | URL, options?: NavigateOptions, skipCommit: boolean = false) =>
+  const navigate = (pathOrUrl: string | URL, options?: NavigateOptions, skipCommit = false) =>
     state.runUpdates(({ get, set }) =>
-      Effect.gen(function*() {
+      Effect.gen(function* () {
         const state = yield* get
         const from = state.entries[state.index]
-        const history = options?.history ?? "auto"
-        const to = yield* makeOrUpdateDestination(state, getUrl(origin, pathOrUrl), options?.state, origin).pipe(
-          GetRandomValues.provide(getRandomValues)
-        )
-        const type = history === "auto" ? from.key === to.key ? "replace" : "push" : history
-        const event: BeforeNavigationEvent = {
+        const history = options?.history ?? 'auto'
+        const to = yield* makeOrUpdateDestination(
+          state,
+          getUrl(origin, pathOrUrl, base),
+          options?.state,
+          origin,
+        ).pipe(Effect.provideService(GetRandomValues, getRandomValues))
+
+        const type = history === 'auto' ? (from.key === to.key ? 'replace' : 'push') : history
+        const event: TransitionEvent = {
           type,
           from,
           to,
-          delta: type === "replace" ? 0 : 1,
-          info: options?.info
+          delta: type === 'replace' ? 0 : 1,
+          info: options?.info,
         }
 
         return yield* runNavigationEvent(event, get, set, 0, skipCommit)
-      })
+      }),
     )
 
-  const traverseTo = (key: Destination["key"], options?: { readonly info?: unknown }, skipCommit: boolean = false) =>
+  const traverseTo = (
+    key: Destination['key'],
+    options?: { readonly info?: unknown },
+    skipCommit = false,
+  ) =>
     state.runUpdates(({ get, set }) =>
-      Effect.gen(function*() {
+      Effect.gen(function* () {
         const state = yield* get
         const { entries, index } = state
         const from = entries[index]
@@ -281,23 +282,23 @@ export function setupFromModelAndIntent(
 
         if (nextIndex === -1) return from
 
-        const id = yield* makeUuid.pipe(GetRandomValues.provide(getRandomValues))
+        const id = yield* makeUuid4.pipe(Effect.provideService(GetRandomValues, getRandomValues))
         const to = { ...entries[nextIndex], id }
         const delta = nextIndex - index
-        const event: BeforeNavigationEvent = {
-          type: "traverse",
+        const event: TransitionEvent = {
+          type: 'traverse',
           from,
           to,
           delta,
-          info: options?.info
+          info: options?.info,
         }
 
         return yield* runNavigationEvent(event, get, set, 0, skipCommit)
-      })
+      }),
     )
 
-  const back = (options?: { readonly info?: unknown }, skipCommit: boolean = false) =>
-    Effect.gen(function*() {
+  const back = (options?: { readonly info?: unknown }, skipCommit = false) =>
+    Effect.gen(function* () {
       const { entries, index } = yield* state
       if (index === 0) return entries[index]
       const { key } = entries[index - 1]
@@ -305,8 +306,8 @@ export function setupFromModelAndIntent(
       return yield* traverseTo(key, options, skipCommit)
     })
 
-  const forward = (options?: { readonly info?: unknown }, skipCommit: boolean = false) =>
-    Effect.gen(function*() {
+  const forward = (options?: { readonly info?: unknown }, skipCommit = false) =>
+    Effect.gen(function* () {
       const { entries, index } = yield* state
       if (index === entries.length - 1) return entries[index]
       const { key } = entries[index + 1]
@@ -314,142 +315,95 @@ export function setupFromModelAndIntent(
       return yield* traverseTo(key, options, skipCommit)
     })
 
-  const reload = (options?: { readonly info?: unknown }, skipCommit: boolean = false) =>
+  const reload = (options?: { readonly info?: unknown }, skipCommit = false) =>
     state.runUpdates(({ get, set }) =>
-      Effect.gen(function*() {
+      Effect.gen(function* () {
         const { entries, index } = yield* state
         const current = entries[index]
 
-        const event: BeforeNavigationEvent = {
-          type: "reload",
+        const event: TransitionEvent = {
+          type: 'reload',
           from: current,
           to: current,
           delta: 0,
-          info: options?.info
+          info: options?.info,
         }
 
         return yield* runNavigationEvent(event, get, set, 0, skipCommit)
-      })
+      }),
     )
 
   const beforeNavigation = <R = never, R2 = never>(
-    handler: BeforeNavigationHandler<R, R2>
+    handler: BeforeNavigationHandler<R, R2>,
   ): Effect.Effect<void, never, R | R2 | Scope.Scope> =>
     Effect.contextWithEffect((ctx) => {
       const entry = [handler, ctx] as const
-
-      return Effect.zipRight(
-        RefSubject.update(beforeHandlers, (handlers) => new Set([...handlers, entry])),
-        Effect.addFinalizer(() =>
-          RefSubject.update(beforeHandlers, (handlers) => {
-            const updated = new Set(handlers)
-            updated.delete(entry)
-            return updated
-          })
-        )
+      const acquire = LazyRef.update(beforeHandlers, (handlers) => new Set([...handlers, entry]))
+      const release = Effect.ignoreLogged(
+        LazyRef.update(beforeHandlers, (handlers) => {
+          const updated = new Set(handlers)
+          updated.delete(entry)
+          return updated
+        }),
       )
+
+      return Effect.acquireRelease(acquire, () => release)
     })
 
   const onNavigation = <R = never, R2 = never>(
-    handler: NavigationHandler<R, R2>
+    handler: NavigationHandler<R, R2>,
   ): Effect.Effect<void, never, R | R2 | Scope.Scope> =>
     Effect.contextWithEffect((ctx) => {
       const entry = [handler, ctx] as const
-
-      return Effect.zipRight(
-        RefSubject.update(handlers, (handlers) => new Set([...handlers, entry])),
-        Effect.addFinalizer(() =>
-          RefSubject.update(handlers, (handlers) => {
-            const updated = new Set(handlers)
-            updated.delete(entry)
-            return updated
-          })
-        )
+      const acquire = LazyRef.update(handlers, (handlers) => new Set([...handlers, entry]))
+      const release = Effect.ignoreLogged(
+        LazyRef.update(handlers, (handlers) => {
+          const updated = new Set(handlers)
+          updated.delete(entry)
+          return updated
+        }),
       )
+
+      return Effect.acquireRelease(acquire, () => release)
     })
 
   const updateCurrentEntry = (options: { readonly state: unknown }) =>
     state.runUpdates(({ get, set }) =>
-      Effect.gen(function*() {
+      Effect.gen(function* () {
         const { entries, index } = yield* get
         const current = entries[index]
-        const event: BeforeNavigationEvent = {
-          type: "replace",
+        const event: TransitionEvent = {
+          type: 'replace',
           from: current,
           to: { ...current, state: options.state },
           delta: 0,
-          info: null
+          info: null,
         }
 
         return yield* runNavigationEvent(event, get, set, 0)
-      })
+      }),
     )
 
-  const submit = (
-    data: FormData,
-    input?: Omit<FormInputFrom, "data">
-  ): Effect.Effect<
-    Option.Option<HttpClient.response.ClientResponse>,
-    NavigationError | HttpClient.error.HttpClientError,
-    Scope.Scope | HttpClient.client.Client.Default
-  > =>
-    state.runUpdates(({ get, set }) =>
-      Effect.gen(function*() {
-        const { entries, index } = yield* get
-        const from = entries[index]
-        const event: FormDataEvent = {
-          from,
-          data,
-          name: Option.fromNullable(input?.name),
-          action: Option.fromNullable(input?.action),
-          method: Option.fromNullable(input?.method),
-          encoding: Option.fromNullable(input?.encoding)
-        }
-
-        const either = yield* runFormDataHandlers(event)
-
-        if (Either.isLeft(either)) {
-          yield* handleError(either.left, get, set, 0)
-          return Option.none<HttpClient.response.ClientResponse>()
-        } else {
-          if (Option.isNone(either.right)) {
-            return either.right
-          }
-
-          const response = either.right.value
-
-          // If it is a redirect
-          if (REDIRECT_STATUS_CODES.has(response.status)) {
-            const location = HttpClient.headers.get(response.headers, "location")
-
-            // And we have a location header
-            if (Option.isSome(location)) {
-              // Then we navigate to that location
-              yield* navigate(location.value, { history: "replace" })
-            }
-          }
+  const submit = (form: FormSubmit) =>
+    Effect.gen(function* () {
+      const current = yield* currentEntry
+      // Utilize the action URL if provided, otherwise use the current URL
+      const url = form.action ? getUrl(origin, form.action, base) : current.url
+      // Submit the HTTP request
+      const response = yield* HttpClient[form.method](url, form).pipe(
+        Effect.mapErrorCause((cause) => Cause.fail(new FormSubmitError({ cause }))),
+      )
 
-          return Option.some(response)
+      // If the response is a redirect, navigate to the new URL
+      if (REDIRECT_STATUS_CODES.has(response.status)) {
+        // Get the location header
+        const location = Headers.get(response.headers, 'location')
+        if (Option.isSome(location)) {
+          return [yield* navigate(getUrl(origin, location.value, base), form), response] as const
         }
-      })
-    )
-
-  const onFormData = <R = never, R2 = never>(
-    handler: FormDataHandler<R, R2>
-  ): Effect.Effect<void, never, R | R2 | Scope.Scope> =>
-    Effect.contextWithEffect((ctx) => {
-      const entry = [handler, ctx] as const
+      }
 
-      return Effect.zipRight(
-        RefSubject.update(formDataHandlers, (handlers) => new Set([...handlers, entry])),
-        Effect.addFinalizer(() =>
-          RefSubject.update(formDataHandlers, (handlers) => {
-            const updated = new Set(handlers)
-            updated.delete(entry)
-            return updated
-          })
-        )
-      )
+      return [current, response] as const
     })
 
   const navigation = {
@@ -469,26 +423,26 @@ export function setupFromModelAndIntent(
     traverseTo,
     updateCurrentEntry,
     submit,
-    onFormData
   } satisfies Navigation
 
   return navigation
 }
 
-export function makeRedirectEvent(
+function makeRedirectEvent(
   origin: string,
   redirect: RedirectError,
-  from: Destination
+  from: Destination,
+  base: string,
 ) {
-  return Effect.gen(function*() {
-    const url = getUrl(origin, redirect.path)
+  return Effect.gen(function* () {
+    const url = getUrl(origin, redirect.path, base)
     const to = yield* makeDestination(url, redirect.options?.state, origin)
-    const event: BeforeNavigationEvent = {
-      type: "replace",
+    const event: TransitionEvent = {
+      type: 'replace',
       from,
       to,
       delta: 0,
-      info: redirect.options?.info
+      info: redirect.options?.info,
     }
 
     return event
@@ -499,20 +453,20 @@ export function makeOrUpdateDestination(
   navigationState: NavigationState,
   url: URL,
   state: unknown,
-  origin: string
+  origin: string,
 ) {
-  return Effect.gen(function*() {
+  return Effect.gen(function* () {
     const current = navigationState.entries[navigationState.index]
-    const isSameOriginAndPath = url.origin === current.url.origin && url.pathname === current.url.pathname
-
+    const isSameOriginAndPath =
+      url.origin === current.url.origin && url.pathname === current.url.pathname
     if (isSameOriginAndPath) {
-      const id = yield* makeUuid
+      const id = yield* makeUuid4
       const destination: Destination = {
         id,
         key: current.key,
         url,
         state: getOriginalState(state),
-        sameDocument: url.origin === origin
+        sameDocument: url.origin === origin,
       }
 
       return destination
@@ -523,28 +477,28 @@ export function makeOrUpdateDestination(
 }
 
 export function makeDestination(url: URL, state: unknown, origin: string) {
-  return Effect.gen(function*() {
+  return Effect.gen(function* () {
     if (isPatchedState(state)) {
       const destination: Destination = {
-        id: state.id,
-        key: state.key,
+        id: state.__typed__navigation__id__,
+        key: state.__typed__navigation__key__,
         url,
-        state: state.originalHistoryState,
-        sameDocument: url.origin === origin
+        state: state.__typed__navigation__state__,
+        sameDocument: url.origin === origin,
       }
 
       return destination
     }
 
-    const id = yield* makeUuid
-    const key = yield* makeUuid
+    const id = yield* makeUuid4
+    const key = yield* makeUuid4
 
     const destination: Destination = {
       id,
       key,
       url,
       state,
-      sameDocument: url.origin === origin
+      sameDocument: url.origin === origin,
     }
 
     return destination
@@ -552,16 +506,16 @@ export function makeDestination(url: URL, state: unknown, origin: string) {
 }
 
 export function upgradeProposedDestination(proposed: ProposedDestination) {
-  return Effect.gen(function*() {
-    const id = yield* makeUuid
-    const key = yield* makeUuid
+  return Effect.gen(function* () {
+    const id = yield* makeUuid4
+    const key = yield* makeUuid4
 
     const destination: Destination = {
       id,
       key,
       url: proposed.url,
       state: proposed.state,
-      sameDocument: proposed.sameDocument
+      sameDocument: proposed.sameDocument,
     }
 
     return destination
@@ -569,79 +523,58 @@ export function upgradeProposedDestination(proposed: ProposedDestination) {
 }
 
 export type PatchedState = {
-  readonly id: Uuid
-  readonly key: Uuid
-  readonly originalHistoryState: unknown
+  readonly __typed__navigation__id__: Uuid4
+  readonly __typed__navigation__key__: Uuid4
+  readonly __typed__navigation__state__: unknown
 }
 
 export function isPatchedState(state: unknown): state is PatchedState {
-  if (state === null || !(typeof state === "object") || Array.isArray(state)) return false
-  if ("id" in state && "key" in state && "originalHistoryState" in state) return true
+  if (state === null || !(typeof state === 'object') || Array.isArray(state)) {
+    return false
+  }
+  if ('__typed__navigation__id__' in state && '__typed__navigation__key__' in state) {
+    return true
+  }
   return false
 }
 
 export function getOriginalState(state: unknown) {
-  if (isPatchedState(state)) return state.originalHistoryState
+  if (isPatchedState(state)) return state.__typed__navigation__state__
   return state
 }
 
 export function getOriginFromUrl(url: string | URL) {
   try {
-    if (typeof url === "string") {
+    if (typeof url === 'string') {
       return new URL(url).origin
     } else {
       return url.origin
     }
   } catch {
-    return "http://localhost"
+    return 'http://localhost'
   }
 }
 
 export function isDestination(proposed: ProposedDestination): proposed is Destination {
-  return "id" in proposed && "key" in proposed
+  return 'id' in proposed && 'key' in proposed
 }
 
 const strictEqual = <A>(a: A, b: A) => a === b
 
-export function makeHandlersState() {
-  return Effect.gen(function*() {
-    const beforeHandlers = yield* RefSubject.fromEffect(
-      Effect.sync(() => new Set<readonly [BeforeNavigationHandler<any, any>, Context.Context<any>]>()),
-      { eq: strictEqual }
-    )
-    const handlers = yield* RefSubject.fromEffect(
-      Effect.sync(() => new Set<readonly [NavigationHandler<any, any>, Context.Context<any>]>()),
-      { eq: strictEqual }
-    )
-    const formDataHandlers = yield* RefSubject.fromEffect(
-      Effect.sync(() => new Set<readonly [FormDataHandler<any, any>, Context.Context<any>]>()),
-      { eq: strictEqual }
-    )
-
-    return {
-      beforeHandlers,
-      handlers,
-      formDataHandlers
-    }
-  })
-}
-
-function makeFormDataRequest(event: FormDataEvent, url: string) {
-  const headers = new Headers()
+export const makeHandlersState = Effect.gen(function* () {
+  const beforeHandlers = yield* LazyRef.fromEffect(
+    Effect.sync(
+      () => new Set<readonly [BeforeNavigationHandler<any, any>, Context.Context<any>]>(),
+    ),
+    { eq: strictEqual },
+  )
+  const handlers = yield* LazyRef.fromEffect(
+    Effect.sync(() => new Set<readonly [NavigationHandler<any, any>, Context.Context<any>]>()),
+    { eq: strictEqual },
+  )
 
-  if (Option.isSome(event.encoding)) {
-    headers.set("Content-Type", event.encoding.value)
+  return {
+    beforeHandlers,
+    handlers,
   }
-  const method = Option.getOrElse(event.method, () => "POST")
-
-  return Effect.flatMap(
-    HttpClient.client.Client,
-    (client) =>
-      client(
-        HttpClient.request.make(method as "POST")(url, {
-          headers: HttpClient.headers.fromInput(headers),
-          body: HttpClient.body.formData(event.data)
-        })
-      )
-  )
-}
+})