@typed/navigation 0.17.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 } 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,138 +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 Effect.gen(function* () {
+          if (event._tag === 'PushState') {
             return yield* navigation.navigate(event.url, {}, event.skipCommit)
-          } else if (event._tag === "ReplaceState") {
+          } 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 to = entries[toIndex]
 
-            return 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 })
+            return yield* navigation.updateCurrentEntry({
+              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))
           }
         }
@@ -165,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,
@@ -214,76 +205,117 @@ 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 { 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),
-            history.state,
-            location.origin
-          ),
-          (destination): NavigationState => ({ entries: [destination], index: 0, transition: Option.none() })
-        )
+          makeDestination(new URL(location.href), getHistoryState(), location.origin),
+          (destination): NavigationState => ({
+            entries: [destination],
+            index: 0,
+            transition: Option.none(),
+          }),
+        ),
       ),
-      { eq: Equivalence.make(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 = ({ 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") {
-          history.pushState({ id, key, originalHistoryState: state }, "", url)
-        } else if (type === "replace") {
-          history.replaceState({ id, key, originalHistoryState: state }, "", url)
-        } else if (event.type === "reload") {
+        if (type === 'push') {
+          history.pushState(
+            {
+              __typed__navigation__id__: id,
+              __typed__navigation__key__: key,
+              __typed__navigation__state__: state,
+            },
+            '',
+            url,
+          )
+        } else if (type === 'replace') {
+          history.replaceState(
+            {
+              __typed__navigation__id__: id,
+              __typed__navigation__key__: key,
+              __typed__navigation__state__: state,
+            },
+            '',
+            url,
+          )
+        } else if (event.type === 'reload') {
           location.reload()
         } else {
           history.go(event.delta)
+
+          history.replaceState(
+            {
+              __typed__navigation__id__: id,
+              __typed__navigation__key__: key,
+              __typed__navigation__state__: state,
+            },
+            '',
+            window.location.href,
+          )
         }
       })
 
     return {
       state,
-      canGoBack,
-      canGoForward,
       beforeHandlers,
       handlers,
-      formDataHandlers,
-      commit
+      commit,
     } satisfies ModelAndIntent
   })
 }
 
 type HistoryEvent = PushStateEvent | ReplaceStateEvent | TraverseEvent | TraverseToEvent
 
-type PushStateEvent = { _tag: "PushState"; state: unknown; url: URL; skipCommit: boolean }
-type ReplaceStateEvent = { _tag: "ReplaceState"; state: unknown; url: Option.Option<URL>; skipCommit: boolean }
-type TraverseEvent = { _tag: "Traverse"; delta: number; skipCommit: boolean }
-type TraverseToEvent = { _tag: "TraverseTo"; key: Uuid; state: unknown; skipCommit: boolean }
+type PushStateEvent = {
+  _tag: 'PushState'
+  state: unknown
+  url: URL
+  skipCommit: boolean
+}
+type ReplaceStateEvent = {
+  _tag: 'ReplaceState'
+  state: unknown
+  url: Option.Option<URL>
+  skipCommit: boolean
+}
+type TraverseEvent = { _tag: 'Traverse'; delta: number; skipCommit: boolean }
+type TraverseToEvent = {
+  _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")
+  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 getState = stateDescriptor?.get?.bind(history)
+  const getStateDescriptor = stateDescriptor?.get?.bind(history)
+
+  const getHistoryState = () => getStateDescriptor?.()
 
   const original: History = {
     get length() {
@@ -296,80 +328,84 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
       history.scrollRestoration = mode
     },
     get state() {
-      return getState?.() ?? history.state
+      return getHistoryState()
     },
     ...methods,
     pushState(data, _, url) {
-      if (!stateDescriptor) {
-        ;(history as any).state = data
-      }
-
-      return methods.pushState(data, _, url)
+      return methods.pushState(data, _, url?.toString())
     },
     replaceState(data, _, url) {
-      if (!stateDescriptor) {
-        ;(history as any).state = data
-      }
-
-      return methods.replaceState(data, _, url)
-    }
+      return methods.replaceState(data, _, url?.toString())
+    },
   }
 
   history.pushState = (state, _, url) => {
     if (url) {
-      onEvent({ _tag: "PushState", state, url: getUrl(location.origin, url), skipCommit: false })
+      onEvent({
+        _tag: 'PushState',
+        state,
+        url: getUrl(location.origin, url, base),
+        skipCommit: false,
+      })
     } else {
-      onEvent({ _tag: "ReplaceState", state, url: Option.none(), skipCommit: false })
+      onEvent({
+        _tag: 'ReplaceState',
+        state,
+        url: Option.none(),
+        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 })
-  }
-
-  // In a proper browser this will allow patching to hide the id/key's associated with the state
-  if (stateDescriptor) {
-    try {
-      Object.defineProperty(history, "state", {
-        get() {
-          return getOriginalState(stateDescriptor.get!.call(history))
-        }
-      })
-    } catch {
-      // We tried, but it didn't work
-    }
+    onEvent({ _tag: 'Traverse', delta: 1, skipCommit: false })
   }
 
   const onHashChange = (ev: HashChangeEvent) => {
-    onEvent({ _tag: "ReplaceState", state: history.state, url: Option.some(new URL(ev.newURL)), skipCommit: false })
+    onEvent({
+      _tag: 'ReplaceState',
+      state: history.state,
+      url: Option.some(new URL(ev.newURL)),
+      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", key: ev.state.key, state: ev.state.originalHistoryState, skipCommit: true })
+      onEvent({
+        _tag: 'TraverseTo',
+        key: ev.state.__typed__navigation__key__,
+        state: ev.state.__typed__navigation__state__,
+        skipCommit: true,
+      })
     } else {
-      onEvent({ _tag: "ReplaceState", state: ev.state, url: Option.some(new URL(location.href)), skipCommit: true })
+      onEvent({
+        _tag: 'ReplaceState',
+        state: ev.state,
+        url: Option.some(new URL(location.href)),
+        skipCommit: true,
+      })
     }
   }
 
-  window.addEventListener("popstate", onPopState, { capture: true })
+  window.addEventListener('popstate', onPopState, { capture: true })
 
   const unpatch = Effect.sync(() => {
     history.pushState = original.pushState
@@ -380,20 +416,52 @@ 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', {
+    get() {
+      return getOriginalState(getStateDescriptor?.() ?? history.state)
+    },
+    set(value) {
+      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)
+      } else {
+        // 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,
+          {
+            __typed__navigation__id__,
+            __typed__navigation__key__,
+            __typed__navigation__state__: value,
+          } satisfies PatchedState,
+          '',
+          location.href,
+        )
+      }
+
+      return value
+    },
   })
 
   return {
+    getHistoryState,
     original,
     patched: history,
-    unpatch
+    unpatch,
   } as const
 }
 
@@ -411,17 +479,19 @@ function scopedRuntime<R>(): Effect.Effect<ScopedRuntime<R>, never, R | Scope.Sc
     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
-        }))
+        fiber.addObserver(
+          Exit.match({
+            onFailure: (cause) => reject(Runtime.makeFiberFailure(cause)),
+            onSuccess: resolve,
+          }),
+        )
       })
 
     return {
       runtime,
       scope: Context.unsafeGet(runtime.context, Scope.Scope),
       run: (eff) => runFork(eff, { scope }),
-      runPromise
+      runPromise,
     } as const
   })
 }