@typed/navigation 0.18.0 → 0.18.1

package/src/internal/fromWindow.ts

@@ -1,22 +1,20 @@
-import * as Equivalence from "@effect/schema/Equivalence"
-import * as Context from "@typed/context"
-import { Window } from "@typed/dom/Window"
-import * as RefSubject from "@typed/fx/RefSubject"
-import { GetRandomValues, Uuid } from "@typed/id"
-
-import * as Effect from "effect/Effect"
-import type * as Fiber from "effect/Fiber"
-import * as Option from "effect/Option"
-import * as Runtime from "effect/Runtime"
-import * as Scope from "effect/Scope"
-
-import * as Schema from "@effect/schema/Schema"
-import * as Exit from "effect/Exit"
-import type * as Layer from "effect/Layer"
-import type { Commit } from "../Layer.js"
-import type { BeforeNavigationEvent, Destination, NavigationEvent, Transition } from "../Navigation.js"
-import { Navigation, NavigationError } from "../Navigation.js"
-import type { ModelAndIntent, PatchedState } from "./shared.js"
+import { GetRandomValues, Uuid4 } from '@typed/id'
+import * as LazyRef from '@typed/lazy-ref'
+import { Schema } from 'effect'
+import * as Context from 'effect/Context'
+import * as Effect from 'effect/Effect'
+import * as Exit from 'effect/Exit'
+import type * as Fiber from 'effect/Fiber'
+import * as Layer from 'effect/Layer'
+import * as Option from 'effect/Option'
+import * as Runtime from 'effect/Runtime'
+import * as Scope from 'effect/Scope'
+import type { Destination } from '../Destination.js'
+import { NavigationError } from '../Error.js'
+import type { NavigationEvent, TransitionEvent } from '../Event.js'
+import type { Commit } from '../Layer.js'
+import { Navigation } from '../Navigation.js'
+import type { ModelAndIntent, PatchedState } from './shared.js'
 import {
   getOriginalState,
   getUrl,
@@ -24,169 +22,130 @@ import {
   makeDestination,
   makeHandlersState,
   NavigationState,
-  setupFromModelAndIntent
-} from "./shared.js"
-
-/* eslint-disable @typescript-eslint/consistent-type-imports */
-type NativeNavigation = import("@virtualstate/navigation").Navigation
-type NativeEntry = import("@virtualstate/navigation").NavigationHistoryEntry
-type NativeEvent = import("@virtualstate/navigation").NavigationEventMap["navigate"]
-/* eslint-enable @typescript-eslint/consistent-type-imports */
-
-declare global {
-  export interface Window {
-    navigation?: NativeNavigation
-  }
-}
+  setupFromModelAndIntent,
+} from './shared.js'
 
-export const fromWindow: Layer.Layer<Navigation, never, Window> = Navigation.scoped(
-  Window.withEffect((window) => {
-    const getRandomValues = (length: number) => Effect.sync(() => window.crypto.getRandomValues(new Uint8Array(length)))
-    return Effect.gen(function*() {
+export const fromWindow: (window: Window) => Layer.Layer<Navigation, never, GetRandomValues> = (
+  window: Window,
+) =>
+  Layer.scoped(
+    Navigation,
+    Effect.gen(function* () {
+      const getRandomValues = yield* GetRandomValues
       const { run, runPromise } = yield* scopedRuntime<never>()
       const hasNativeNavigation = !!window.navigation
+      const base = getBaseHref(window)
       const modelAndIntent = yield* hasNativeNavigation
-        ? setupWithNavigation(window.navigation!, runPromise)
-        : setupWithHistory(window, (event) => run(handleHistoryEvent(event)))
+        ? setupWithNavigation(window.navigation, runPromise)
+        : setupWithHistory(window, base, (event) => run(handleHistoryEvent(event)))
 
       const navigation = setupFromModelAndIntent(
         modelAndIntent,
         window.location.origin,
-        getBaseHref(window),
+        base,
         getRandomValues,
-        hasNativeNavigation
-          ? () => getNavigationState(window.navigation!)
-          : undefined
+        hasNativeNavigation ? () => getNavigationState(window.navigation) : undefined,
       )
 
       return navigation
 
       function handleHistoryEvent(event: HistoryEvent) {
-        return Effect.gen(function*() {
-          if (event._tag === "PushState") {
-            return yield* navigation.navigate(
-              event.url,
-              {},
-              event.skipCommit
-            )
-          } else if (event._tag === "ReplaceState") {
+        return Effect.gen(function* () {
+          if (event._tag === 'PushState') {
+            return yield* navigation.navigate(event.url, {}, event.skipCommit)
+          } else if (event._tag === 'ReplaceState') {
             if (Option.isSome(event.url)) {
               return yield* navigation.navigate(
                 event.url.value,
-                { history: "replace", state: event.state },
-                event.skipCommit
+                { history: 'replace', state: event.state },
+                event.skipCommit,
               )
             } else {
               return yield* navigation.updateCurrentEntry(event)
             }
-          } else if (event._tag === "Traverse") {
+          } else if (event._tag === 'Traverse') {
             const { entries, index } = yield* modelAndIntent.state
-            const toIndex = Math.min(
-              Math.max(0, index + event.delta),
-              entries.length - 1
-            )
+            const toIndex = Math.min(Math.max(0, index + event.delta), entries.length - 1)
             const to = entries[toIndex]
 
-            const result = yield* navigation.traverseTo(
-              to.key,
-              {},
-              event.skipCommit
-            )
+            const result = yield* navigation.traverseTo(to.key, {}, event.skipCommit)
 
             return result
           } else {
             yield* navigation.traverseTo(event.key, {}, event.skipCommit)
             return yield* navigation.updateCurrentEntry({
-              state: event.state
+              state: event.state,
             })
           }
         })
       }
-    }).pipe(GetRandomValues.provide(getRandomValues))
-  })
-)
+    }),
+  )
 
 function getBaseHref(window: Window) {
-  const base = window.document.querySelector("base")
-  return base ? base.href : "/"
+  const base = window.document.querySelector('base')
+  return base ? base.href : '/'
 }
 
-const getNavigationState = (navigation: NativeNavigation): NavigationState => {
+const getNavigationState = (navigation: globalThis.Navigation): NavigationState => {
   const entries = navigation.entries().map(nativeEntryToDestination)
-  const { index } = navigation.currentEntry
+  // biome-ignore lint/style/noNonNullAssertion: <explanation>
+  const { index } = navigation.currentEntry!
 
   return {
     entries,
     index,
-    transition: Option.none<Transition>()
+    transition: Option.none<TransitionEvent>(),
   }
 }
 
 function setupWithNavigation(
-  navigation: NativeNavigation,
-  runPromise: <E, A>(effect: Effect.Effect<A, E, Scope.Scope>) => Promise<A>
+  navigation: globalThis.Navigation,
+  runPromise: <E, A>(effect: Effect.Effect<A, E, Scope.Scope>) => Promise<A>,
 ): Effect.Effect<ModelAndIntent, never, Scope.Scope | GetRandomValues> {
-  return Effect.gen(function*() {
-    const state = yield* RefSubject.fromEffect(
+  return Effect.gen(function* () {
+    const state = yield* LazyRef.fromEffect(
       Effect.sync((): NavigationState => getNavigationState(navigation)),
       {
-        eq: Equivalence.make(
-          Schema.typeSchema(Schema.typeSchema(NavigationState))
-        )
-      }
+        eq: Schema.equivalence(Schema.typeSchema(NavigationState)),
+      },
     )
-    const canGoBack = RefSubject.map(state, (s) => s.index > 0)
-    const canGoForward = RefSubject.map(
-      state,
-      (s) => s.index < s.entries.length - 1
-    )
-    const { beforeHandlers, formDataHandlers, handlers } = yield* makeHandlersState()
-    const commit: Commit = (to: Destination, event: BeforeNavigationEvent) =>
-      Effect.gen(function*(_) {
+    const { beforeHandlers, handlers } = yield* makeHandlersState
+    const commit: Commit = (to: Destination, event: TransitionEvent) =>
+      Effect.gen(function* () {
         const { key, state, url } = to
         const { info, type } = event
 
-        if (type === "push" || type === "replace") {
-          yield* _(
-            Effect.promise(
-              () =>
-                navigation.navigate(url.toString(), {
-                  history: type,
-                  state,
-                  info
-                }).committed
-            ),
-            Effect.catchAllDefect((error) => Effect.fail(new NavigationError({ error })))
-          )
-        } else if (event.type === "reload") {
-          yield* _(
-            Effect.promise(() => navigation.reload({ state, info }).committed),
-            Effect.catchAllDefect((error) => Effect.fail(new NavigationError({ error })))
+        if (type === 'push' || type === 'replace') {
+          yield* Effect.promise(
+            () =>
+              navigation.navigate(url.toString(), {
+                history: type,
+                state,
+                info,
+              }).committed,
           )
+        } else if (event.type === 'reload') {
+          yield* Effect.promise(() => navigation.reload({ state, info }).committed)
         } else {
-          yield* _(
-            Effect.promise(
-              () => navigation.traverseTo(key, { info }).committed
-            ),
-            Effect.catchAllDefect((error) => Effect.fail(new NavigationError({ error })))
-          )
+          yield* Effect.promise(() => navigation.traverseTo(key, { info }).committed)
         }
-      })
+      }).pipe(Effect.catchAllDefect((cause) => new NavigationError({ cause })))
 
-    const runHandlers = (native: NativeEvent) =>
-      Effect.gen(function*() {
+    const runHandlers = (native: globalThis.NavigationEventMap['navigate']) =>
+      Effect.gen(function* () {
         const eventHandlers = yield* handlers
         const matches: Array<Effect.Effect<unknown>> = []
-
         const event: NavigationEvent = {
           type: native.navigationType,
-          destination: nativeEntryToDestination(navigation.currentEntry),
-          info: native.info
+          // biome-ignore lint/style/noNonNullAssertion: <explanation>
+          destination: nativeEntryToDestination(navigation.currentEntry!),
+          info: native.info,
         }
 
         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))
           }
         }
@@ -196,39 +155,40 @@ function setupWithNavigation(
         }
       })
 
-    navigation.addEventListener("navigate", (ev) => {
+    navigation.addEventListener('navigate', (ev) => {
       if (shouldNotIntercept(ev)) return
 
       ev.intercept({
-        handler: () => runPromise(runHandlers(ev))
+        handler: () => runPromise(runHandlers(ev)),
       })
     })
 
     return {
       state,
-      canGoBack,
-      canGoForward,
       beforeHandlers,
       handlers,
-      formDataHandlers,
-      commit
+      commit,
     } as const
   })
 }
 
 function nativeEntryToDestination(
-  entry: Pick<NativeEntry, "id" | "key" | "url" | "getState" | "sameDocument">
+  entry: Pick<
+    globalThis.NavigationHistoryEntry,
+    'id' | 'key' | 'url' | 'getState' | 'sameDocument'
+  >,
 ): Destination {
   return {
-    id: Uuid(entry.id),
-    key: Uuid(entry.key),
+    id: Uuid4.make(entry.id),
+    key: Uuid4.make(entry.key),
+    // biome-ignore lint/style/noNonNullAssertion: <explanation>
     url: new URL(entry.url!),
     state: entry.getState(),
-    sameDocument: entry.sameDocument
+    sameDocument: entry.sameDocument,
   }
 }
 
-function shouldNotIntercept(navigationEvent: NativeEvent): boolean {
+function shouldNotIntercept(navigationEvent: globalThis.NavigationEventMap['navigate']): boolean {
   return (
     !navigationEvent.canIntercept ||
     // If this is just a hashChange,
@@ -245,69 +205,54 @@ function shouldNotIntercept(navigationEvent: NativeEvent): boolean {
 
 function setupWithHistory(
   window: Window,
-  onEvent: (event: HistoryEvent) => void
+  base: string,
+  onEvent: (event: HistoryEvent) => void,
 ): Effect.Effect<ModelAndIntent, never, GetRandomValues | Scope.Scope> {
-  return Effect.gen(function*() {
+  return Effect.gen(function* () {
     const { location } = window
-    const {
-      getHistoryState,
-      original: history,
-      unpatch
-    } = patchHistory(window, onEvent)
+    const { getHistoryState, original: history, unpatch } = patchHistory(window, onEvent, base)
 
     yield* Effect.addFinalizer(() => unpatch)
 
-    const state = yield* RefSubject.fromEffect(
+    const state = yield* LazyRef.fromEffect(
       Effect.suspend(() =>
         Effect.map(
-          makeDestination(
-            new URL(location.href),
-            getHistoryState(),
-            location.origin
-          ),
+          makeDestination(new URL(location.href), getHistoryState(), location.origin),
           (destination): NavigationState => ({
             entries: [destination],
             index: 0,
-            transition: Option.none()
-          })
-        )
+            transition: Option.none(),
+          }),
+        ),
       ),
-      { eq: Equivalence.make(Schema.typeSchema(NavigationState)) }
-    )
-    const canGoBack = RefSubject.map(state, (s) => s.index > 0)
-    const canGoForward = RefSubject.map(
-      state,
-      (s) => s.index < s.entries.length - 1
+      { eq: Schema.equivalence(Schema.typeSchema(NavigationState)) },
     )
-    const { beforeHandlers, formDataHandlers, handlers } = yield* makeHandlersState()
-    const commit: Commit = (
-      { id, key, state, url }: Destination,
-      event: BeforeNavigationEvent
-    ) =>
+    const { beforeHandlers, handlers } = yield* makeHandlersState
+    const commit: Commit = ({ id, key, state, url }: Destination, event: TransitionEvent) =>
       Effect.sync(() => {
         const { type } = event
 
-        if (type === "push") {
+        if (type === 'push') {
           history.pushState(
             {
               __typed__navigation__id__: id,
               __typed__navigation__key__: key,
-              __typed__navigation__state__: state
+              __typed__navigation__state__: state,
             },
-            "",
-            url
+            '',
+            url,
           )
-        } else if (type === "replace") {
+        } else if (type === 'replace') {
           history.replaceState(
             {
               __typed__navigation__id__: id,
               __typed__navigation__key__: key,
-              __typed__navigation__state__: state
+              __typed__navigation__state__: state,
             },
-            "",
-            url
+            '',
+            url,
           )
-        } else if (event.type === "reload") {
+        } else if (event.type === 'reload') {
           location.reload()
         } else {
           history.go(event.delta)
@@ -316,63 +261,57 @@ function setupWithHistory(
             {
               __typed__navigation__id__: id,
               __typed__navigation__key__: key,
-              __typed__navigation__state__: state
+              __typed__navigation__state__: state,
             },
-            "",
-            window.location.href
+            '',
+            window.location.href,
           )
         }
       })
 
     return {
       state,
-      canGoBack,
-      canGoForward,
       beforeHandlers,
       handlers,
-      formDataHandlers,
-      commit
+      commit,
     } satisfies ModelAndIntent
   })
 }
 
-type HistoryEvent =
-  | PushStateEvent
-  | ReplaceStateEvent
-  | TraverseEvent
-  | TraverseToEvent
+type HistoryEvent = PushStateEvent | ReplaceStateEvent | TraverseEvent | TraverseToEvent
 
 type PushStateEvent = {
-  _tag: "PushState"
+  _tag: 'PushState'
   state: unknown
   url: URL
   skipCommit: boolean
 }
 type ReplaceStateEvent = {
-  _tag: "ReplaceState"
+  _tag: 'ReplaceState'
   state: unknown
   url: Option.Option<URL>
   skipCommit: boolean
 }
-type TraverseEvent = { _tag: "Traverse"; delta: number; skipCommit: boolean }
+type TraverseEvent = { _tag: 'Traverse'; delta: number; skipCommit: boolean }
 type TraverseToEvent = {
-  _tag: "TraverseTo"
-  key: Uuid
+  _tag: 'TraverseTo'
+  key: Uuid4
   state: unknown
   skipCommit: boolean
 }
 
-function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
+function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void, base: string) {
   const { history, location } = window
-  const stateDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(history), "state") ||
-    Object.getOwnPropertyDescriptor(history, "state")
+  const stateDescriptor =
+    Object.getOwnPropertyDescriptor(Object.getPrototypeOf(history), 'state') ||
+    Object.getOwnPropertyDescriptor(history, 'state')
 
   const methods = {
     pushState: history.pushState.bind(history),
     replaceState: history.replaceState.bind(history),
     go: history.go.bind(history),
     back: history.back.bind(history),
-    forward: history.forward.bind(history)
+    forward: history.forward.bind(history),
   }
   const getStateDescriptor = stateDescriptor?.get?.bind(history)
 
@@ -397,76 +336,76 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
     },
     replaceState(data, _, url) {
       return methods.replaceState(data, _, url?.toString())
-    }
+    },
   }
 
   history.pushState = (state, _, url) => {
     if (url) {
       onEvent({
-        _tag: "PushState",
+        _tag: 'PushState',
         state,
-        url: getUrl(location.origin, url),
-        skipCommit: false
+        url: getUrl(location.origin, url, base),
+        skipCommit: false,
       })
     } else {
       onEvent({
-        _tag: "ReplaceState",
+        _tag: 'ReplaceState',
         state,
         url: Option.none(),
-        skipCommit: false
+        skipCommit: false,
       })
     }
   }
   history.replaceState = (state, _, url) => {
     onEvent({
-      _tag: "ReplaceState",
+      _tag: 'ReplaceState',
       state,
-      url: url ? Option.some(getUrl(location.origin, url)) : Option.none(),
-      skipCommit: false
+      url: url ? Option.some(getUrl(location.origin, url, base)) : Option.none(),
+      skipCommit: false,
     })
   }
   history.go = (delta) => {
     if (delta && delta !== 0) {
-      onEvent({ _tag: "Traverse", delta, skipCommit: false })
+      onEvent({ _tag: 'Traverse', delta, skipCommit: false })
     }
   }
   history.back = () => {
-    onEvent({ _tag: "Traverse", delta: -1, skipCommit: false })
+    onEvent({ _tag: 'Traverse', delta: -1, skipCommit: false })
   }
   history.forward = () => {
-    onEvent({ _tag: "Traverse", delta: 1, skipCommit: false })
+    onEvent({ _tag: 'Traverse', delta: 1, skipCommit: false })
   }
 
   const onHashChange = (ev: HashChangeEvent) => {
     onEvent({
-      _tag: "ReplaceState",
+      _tag: 'ReplaceState',
       state: history.state,
       url: Option.some(new URL(ev.newURL)),
-      skipCommit: false
+      skipCommit: false,
     })
   }
 
-  window.addEventListener("hashchange", onHashChange, { capture: true })
+  window.addEventListener('hashchange', onHashChange, { capture: true })
 
   const onPopState = (ev: PopStateEvent) => {
     if (isPatchedState(ev.state)) {
       onEvent({
-        _tag: "TraverseTo",
+        _tag: 'TraverseTo',
         key: ev.state.__typed__navigation__key__,
         state: ev.state.__typed__navigation__state__,
-        skipCommit: true
+        skipCommit: true,
       })
     } else {
       onEvent({
-        _tag: "ReplaceState",
+        _tag: 'ReplaceState',
         state: ev.state,
         url: Option.some(new URL(location.href)),
-        skipCommit: true
+        skipCommit: true,
       })
     }
   }
 
-  window.addEventListener("popstate", onPopState, { capture: true })
+  window.addEventListener('popstate', onPopState, { capture: true })
 
   const unpatch = Effect.sync(() => {
     history.pushState = original.pushState
@@ -477,28 +416,28 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
 
     if (stateDescriptor) {
       try {
-        Object.defineProperty(history, "state", stateDescriptor)
+        Object.defineProperty(history, 'state', stateDescriptor)
       } catch {
         // We tried, but it didn't work
       }
     }
 
-    window.removeEventListener("hashchange", onHashChange)
-    window.removeEventListener("popstate", onPopState)
+    window.removeEventListener('hashchange', onHashChange)
+    window.removeEventListener('popstate', onPopState)
   })
 
-  Object.defineProperty(history, "state", {
+  Object.defineProperty(history, 'state', {
     get() {
-      console.log("here")
       return getOriginalState(getStateDescriptor?.() ?? history.state)
     },
     set(value) {
-      const { __typed__navigation__id__, __typed__navigation__key__ } = getStateDescriptor?.() ?? original.state
+      const { __typed__navigation__id__, __typed__navigation__key__ } =
+        getStateDescriptor?.() ?? original.state
 
       if (isPatchedState(value)) {
         // The setter is not actually modifying the history.state
         // We need to call the original replaceState to update the actual state
-        original.replaceState.call(history, value, "", location.href)
+        original.replaceState.call(history, value, '', location.href)
       } else {
         // The setter is not actually modifying the history.state
         // We need to call the original replaceState to update the actual state
@@ -507,54 +446,44 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
           {
             __typed__navigation__id__,
             __typed__navigation__key__,
-            __typed__navigation__state__: value
+            __typed__navigation__state__: value,
           } satisfies PatchedState,
-          "",
-          location.href
+          '',
+          location.href,
         )
       }
 
       return value
-    }
+    },
   })
 
   return {
     getHistoryState,
     original,
     patched: history,
-    unpatch
+    unpatch,
   } as const
 }
 
 type ScopedRuntime<R> = {
   readonly runtime: Runtime.Runtime<R | Scope.Scope>
   readonly scope: Scope.Scope
-  readonly run: <E, A>(
-    effect: Effect.Effect<A, E, R | Scope.Scope>
-  ) => Fiber.RuntimeFiber<A, E>
-  readonly runPromise: <E, A>(
-    effect: Effect.Effect<A, E, R | Scope.Scope>
-  ) => Promise<A>
+  readonly run: <E, A>(effect: Effect.Effect<A, E, R | Scope.Scope>) => Fiber.RuntimeFiber<A, E>
+  readonly runPromise: <E, A>(effect: Effect.Effect<A, E, R | Scope.Scope>) => Promise<A>
 }
 
-function scopedRuntime<R>(): Effect.Effect<
-  ScopedRuntime<R>,
-  never,
-  R | Scope.Scope
-> {
+function scopedRuntime<R>(): Effect.Effect<ScopedRuntime<R>, never, R | Scope.Scope> {
   return Effect.map(Effect.runtime<R | Scope.Scope>(), (runtime) => {
     const scope = Context.get(runtime.context, Scope.Scope)
     const runFork = Runtime.runFork(runtime)
-    const runPromise = <E, A>(
-      effect: Effect.Effect<A, E, R | Scope.Scope>
-    ): Promise<A> =>
+    const runPromise = <E, A>(effect: Effect.Effect<A, E, R | Scope.Scope>): Promise<A> =>
       new Promise((resolve, reject) => {
         const fiber = runFork(effect, { scope })
         fiber.addObserver(
           Exit.match({
             onFailure: (cause) => reject(Runtime.makeFiberFailure(cause)),
-            onSuccess: resolve
-          })
+            onSuccess: resolve,
+          }),
         )
       })
 
@@ -562,7 +491,7 @@ function scopedRuntime<R>(): Effect.Effect<
       runtime,
       scope: Context.unsafeGet(runtime.context, Scope.Scope),
       run: (eff) => runFork(eff, { scope }),
-      runPromise
+      runPromise,
     } as const
   })
 }