@typed/navigation 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed/navigation",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,11 +19,11 @@
     }
   },
   "dependencies": {
-    "@effect/data": "^0.17.0",
+    "@effect/data": "^0.17.1",
     "@effect/io": "^0.36.1",
-    "@typed/context": "0.16.5",
-    "@typed/dom": "8.16.5",
-    "@typed/fx": "1.15.3",
+    "@typed/context": "0.16.6",
+    "@typed/dom": "8.16.6",
+    "@typed/fx": "1.15.4",
     "@typed/path": "0.5.2",
     "happy-dom": "^10.5.2"
   },
@@ -35,5 +35,5 @@
     "@types/node": "^20.4.5",
     "vitest": "0.33.0"
   },
-  "gitHead": "3a927e781eafd30f8c240137db0aa4c505b5249d"
+  "gitHead": "ea7f8dd7aee2a9d47f1feb7c16524178a47f30df"
 }

package/project.json

@@ -33,6 +33,9 @@
     },
     "test": {
       "executor": "@nrwl/vite:test",
+      "options": {
+        "config": "packages/navigation/vite.config.mjs"
+      },
       "configurations": {
         "watch": {
           "watch": true

package/src/DOM.test.ts

@@ -19,7 +19,6 @@ import {
   redirect,
 } from './Navigation.js'
 import { makeServerWindow } from './_makeServerWindow.js'
-import { encodeDestination } from './json.js'
 import { getStoredEvents } from './storage.js'
 
 const serviceNavigation = (url: string, options: DomNavigationOptions = {}) => {
@@ -687,9 +686,7 @@ function popstate(destination: Destination) {
     const globalThis = yield* $(GlobalThis)
     const state = {
       // Not a full event, but enough to get the test to pass
-      event: {
-        destination: encodeDestination(destination),
-      },
+      key: destination.key,
       state: destination.state,
     }
     const event = new globalThis.PopStateEvent('popstate')

package/src/DOM.ts

@@ -10,7 +10,6 @@ import * as Fx from '@typed/fx'
 import { Destination, DestinationKey, Navigation, NavigationError } from './Navigation.js'
 import { makeIntent } from './dom-intent.js'
 import { onHistoryEvent, patchHistory } from './history.js'
-import { NavigationEventJson } from './json.js'
 import { makeModel } from './model.js'
 import { getInitialValues } from './storage.js'
 
@@ -33,15 +32,18 @@ export const dom = (
     Effect.gen(function* ($) {
       // Get resources
       const context = yield* $(Effect.context<NavigationServices>())
-      const history = Context.get(context, History)
       const document = Context.get(context, Document)
       const base = document.querySelector('base')
       const baseHref = base ? getBasePathFromHref(base.href) : '/'
 
+      // Patch History API to enable sending events
+      const [history, historyEvents] = yield* $(patchHistory)
+
       // Create model and intent
       const [initialEntries, initialIndex] = yield* $(getInitialValues(baseHref, options))
+
       const model = yield* $(makeModel(initialEntries, initialIndex))
-      const intent = makeIntent(model, baseHref, options)
+      const intent = makeIntent(model, baseHref, history, options)
 
       // Used to ensure ordering of navigation events
       const lock = Effect.unsafeMakeSemaphore(1).withPermits(1)
@@ -108,38 +110,33 @@ export const dom = (
         reload: provideLocked(catchNavigationError(intent.reload)),
       }
 
-      // Patch History API to enable sending events
-      const historyEvents = yield* $(patchHistory)
-
       // Listen to various events and update our model
       yield* $(
         Fx.mergeAll(
           // Listen to history events and keep track of entries
           pipe(
             historyEvents,
-            Fx.flatMapEffect((event) => lock(onHistoryEvent(event, intent))),
+            Fx.mapEffect((event) => lock(onHistoryEvent(event, intent))),
           ),
           // Listen to hash changes and push them to the history
           pipe(
             addWindowListener('hashchange', { capture: true }),
-            Fx.flatMapEffect((ev) => lock(intent.push(ev.newURL, { state: history.state }, true))),
+            Fx.mapEffect((ev) => lock(intent.push(ev.newURL, { state: history.state }, true))),
           ),
           // Listen to popstate events and go to the correct entry
           pipe(
             addWindowListener('popstate'),
-            Fx.map((ev) => {
-              // TODO: Should we throw some kind of error here?
-              // This should never happen if you are solely using the Navigation Service
-              if (!ev.state || !ev.state.event) {
-                return Option.none()
-              }
-
-              const navigation = ev.state.event as NavigationEventJson
-
-              return Option.some(lock(intent.goTo(navigation.destination.key)))
-            }),
-            Fx.compact,
-            Fx.flattenEffect,
+            Fx.mapEffect(
+              Effect.unifiedFn((ev) => {
+                // TODO: Should we throw some kind of error here?
+                // This should never happen if you are solely using the Navigation Service
+                if (!ev.state || !ev.state.key) {
+                  return lock(intent.push(location.href, { state: history.state }, true))
+                }
+
+                return lock(intent.goTo(ev.state.key))
+              }),
+            ),
           ),
         ),
         Fx.drain,

package/src/dom-intent.ts

@@ -1,7 +1,6 @@
 import { Option } from '@effect/data/Option'
-import * as Cause from '@effect/io/Cause'
 import * as Effect from '@effect/io/Effect'
-import { History, Location } from '@typed/dom'
+import { Location } from '@typed/dom'
 
 import type { DomNavigationOptions } from './DOM.js'
 import {
@@ -11,8 +10,6 @@ import {
   NavigationEvent,
   NavigationType,
 } from './Navigation.js'
-import { ServiceId } from './constant.js'
-import { encodeEvent } from './json.js'
 import { Model } from './model.js'
 import {
   Notify,
@@ -50,11 +47,7 @@ export type DomIntent = {
 
   readonly goTo: (
     key: string,
-  ) => Effect.Effect<
-    Storage | History,
-    Cause.NoSuchElementException | NavigationError,
-    Option<Destination>
-  >
+  ) => Effect.Effect<Storage | History, NavigationError, Option<Destination>>
 
   readonly reload: ReturnType<typeof makeReload>
 
@@ -66,15 +59,16 @@ export type DomIntent = {
 export const makeIntent = (
   model: Model,
   base: string,
+  history: History,
   options: DomNavigationOptions,
 ): DomIntent => {
   const maxEntries = Math.abs(options.maxEntries ?? DEFAULT_MAX_ENTRIES)
   const notify = makeNotify(model)
   const notifyEnd = makeNotifyEnd(model)
   const save = makeSave(model)
-  const go = makeGo(model, notify, notifyEnd, save)
-  const replace = makeReplace(model, notify, notifyEnd, save, base)
-  const push = makePush(model, notify, notifyEnd, save, base, maxEntries)
+  const go = makeGo(model, notify, notifyEnd, save, history)
+  const replace = makeReplace(model, notify, notifyEnd, save, history, base)
+  const push = makePush(model, notify, notifyEnd, save, base, history, maxEntries)
 
   return {
     back: (skipHistory: boolean) => go(-1, skipHistory),
@@ -96,7 +90,7 @@ export type Intent = ReturnType<typeof makeIntent>
 
 export const makeSave =
   (model: Model) =>
-  (event: NavigationEvent): Effect.Effect<Storage, Cause.NoSuchElementException, void> =>
+  (event: NavigationEvent): Effect.Effect<Storage, never, void> =>
     Effect.gen(function* ($) {
       const events = yield* $(model.events)
       const index = yield* $(model.index)
@@ -132,7 +126,14 @@ export const makeReload = (model: Model, notify: Notify, save: Save<Storage>) =>
   })
 
 export const makeReplace =
-  (model: Model, notify: Notify, notifyEnd: NotifyEnd, save: Save<Storage>, base: string) =>
+  (
+    model: Model,
+    notify: Notify,
+    notifyEnd: NotifyEnd,
+    save: Save<Storage>,
+    history: History,
+    base: string,
+  ) =>
   (url: string, options: NavigateOptions = {}, skipHistory = false) =>
     Effect.gen(function* ($) {
       const location = yield* $(Location)
@@ -151,14 +152,7 @@ export const makeReplace =
       yield* $(notify(event))
 
       if (!skipHistory) {
-        const history = yield* $(History)
-
-        history.replaceState.call(
-          ServiceId,
-          { state: options.state, event: encodeEvent(event) },
-          '',
-          url,
-        )
+        history.replaceState({ key: destination.key, state: options.state }, '', url)
       }
 
       const currentIndex = yield* $(model.index)
@@ -184,15 +178,22 @@ export const makePush =
     notifyEnd: NotifyEnd,
     save: Save<Storage>,
     base: string,
+    history: History,
     maxEntries: number,
   ) =>
   (url: string, options: NavigateOptions = {}, skipHistory = false) =>
     Effect.gen(function* ($) {
       const location = yield* $(Location)
       const entry = yield* $(model.currentEntry.get)
+      const destinationUrl = getUrl(url, base, location.origin)
+
+      if (entry.url.href === destinationUrl.href) {
+        return entry
+      }
+
       const destination: Destination = {
         key: yield* $(createKey),
-        url: getUrl(url, base, location.origin),
+        url: destinationUrl,
         state: options.state,
       }
       const event: NavigationEvent = {
@@ -205,14 +206,7 @@ export const makePush =
       yield* $(notify(event))
 
       if (!skipHistory) {
-        const history = yield* $(History)
-
-        history.pushState.call(
-          ServiceId,
-          { state: options.state, event: encodeEvent(event) },
-          '',
-          url,
-        )
+        history.pushState({ key: destination.key, state: options.state }, '', url)
       }
 
       const currentIndex = yield* $(model.index)
@@ -228,7 +222,7 @@ export const makePush =
       )
 
       // Update the index to the new destination
-      yield* $(model.index.update((i) => i + 1))
+      yield* $(model.index.update((i) => Math.min(i + 1, maxEntries)))
 
       yield* $(save(event))
       yield* $(notifyEnd(event))
@@ -237,7 +231,7 @@ export const makePush =
     })
 
 export const makeGo =
-  (model: Model, notify: Notify, notifyEnd: NotifyEnd, save: Save<Storage>) =>
+  (model: Model, notify: Notify, notifyEnd: NotifyEnd, save: Save<Storage>, history: History) =>
   (delta: number, skipHistory = false) =>
     Effect.gen(function* ($) {
       const currentEntries = yield* $(model.events)
@@ -250,7 +244,7 @@ export const makeGo =
       const nextIndex =
         delta > 0
           ? Math.min(currentIndex + delta, totalEntries - 1)
-          : Math.max(currentIndex + delta, 0)
+          : Math.min(Math.max(currentIndex + delta, 0))
       const nextEntry = currentEntries[nextIndex]
 
       yield* $(
@@ -261,9 +255,7 @@ export const makeGo =
       )
 
       if (!skipHistory) {
-        const history = yield* $(History)
-
-        history.go.call(ServiceId, delta)
+        history.go(delta)
       }
 
       yield* $(model.index.set(nextIndex))

package/src/history.ts

@@ -7,7 +7,6 @@ import { History } from '@typed/dom'
 import * as Fx from '@typed/fx'
 
 import { Destination, NavigationError } from './Navigation.js'
-import { ServiceId } from './constant.js'
 import { DomIntent } from './dom-intent.js'
 
 export type HistoryEvent = PushStateEvent | ReplaceStateEvent | GoEvent | BackEvent | ForwardEvent
@@ -40,9 +39,33 @@ export interface ForwardEvent {
 export const patchHistory: Effect.Effect<
   History | Scope.Scope,
   never,
-  Fx.Subject<never, HistoryEvent>
+  readonly [History, Fx.Subject<never, HistoryEvent>]
 > = Effect.gen(function* ($) {
   const history = yield* $(History)
+
+  const stateDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(history), 'state')
+
+  // Create a clone that always operates on the original history
+  const clone: History = {
+    get length() {
+      return history.length
+    },
+    get scrollRestoration() {
+      return history.scrollRestoration
+    },
+    set scrollRestoration(value) {
+      history.scrollRestoration = value
+    },
+    get state() {
+      return stateDescriptor?.get?.call(history)
+    },
+    back: history.back.bind(history),
+    forward: history.forward.bind(history),
+    go: history.go.bind(history),
+    pushState: history.pushState.bind(history),
+    replaceState: history.replaceState.bind(history),
+  }
+
   const scope = yield* $(Effect.scope)
   const historyEvents = Fx.makeSubject<never, HistoryEvent>()
   const runtime = yield* $(Effect.runtime<never>())
@@ -54,7 +77,7 @@ export const patchHistory: Effect.Effect<
   // unpatch history upon finalization
   yield* $(Effect.addFinalizer(() => Effect.sync(cleanup)))
 
-  return historyEvents
+  return [clone, historyEvents]
 })
 
 function patchHistory_(history: History, sendEvent: (event: HistoryEvent) => void) {
@@ -64,45 +87,40 @@ function patchHistory_(history: History, sendEvent: (event: HistoryEvent) => voi
   const back = history.back
   const forward = history.forward
 
-  history.pushState = function (state, title, url) {
-    pushState.call(history, state, title, url)
-
-    if (url && this !== ServiceId) sendEvent({ _tag: 'PushState', state, url: url.toString() })
+  history.pushState = function (state, _, url) {
+    if (url) sendEvent({ _tag: 'PushState', state, url: url.toString() })
   }
 
-  history.replaceState = function (state, title, url) {
-    replaceState.call(history, state, title, url)
-
-    if (url && this !== ServiceId) sendEvent({ _tag: 'ReplaceState', state, url: url.toString() })
+  history.replaceState = function (state, _, url) {
+    if (url) sendEvent({ _tag: 'ReplaceState', state, url: url.toString() })
   }
 
   history.go = function (delta) {
     if (!delta) return
 
-    go.call(history, delta)
-    if (this !== ServiceId) sendEvent({ _tag: 'Go', delta })
+    sendEvent({ _tag: 'Go', delta })
   }
 
   history.back = function () {
-    back.call(history)
-    if (this !== ServiceId) sendEvent({ _tag: 'Back' })
+    sendEvent({ _tag: 'Back' })
   }
 
   history.forward = function () {
-    forward.call(history)
-    if (this !== ServiceId) sendEvent({ _tag: 'Forward' })
+    sendEvent({ _tag: 'Forward' })
   }
 
   const stateDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(history), 'state')
+
+  // Override state to always return the original state
   Object.defineProperty(history, 'state', {
-    ...stateDescriptor,
     get() {
-      return stateDescriptor?.get?.call(history)?.state
+      const state = stateDescriptor?.get?.call(history)
+
+      if (state && state.key && state.state) return state.state
+
+      return state
     },
   })
-  Object.defineProperty(history, 'originalState', {
-    ...stateDescriptor,
-  })
 
   // Reset history to original state
   return () => {
@@ -112,7 +130,9 @@ function patchHistory_(history: History, sendEvent: (event: HistoryEvent) => voi
     history.back = back
     history.forward = forward
 
-    if (stateDescriptor) Object.defineProperty(history, 'state', stateDescriptor)
+    if (stateDescriptor) {
+      Object.defineProperty(history, 'state', stateDescriptor)
+    }
   }
 }
 

package/src/memory-intent.ts

@@ -1,5 +1,4 @@
 import { Option } from '@effect/data/Option'
-import * as Cause from '@effect/io/Cause'
 import * as Effect from '@effect/io/Effect'
 
 import type { MemoryNavigationOptions } from './Memory.js'
@@ -42,9 +41,7 @@ export type MemoryIntent = {
 
   readonly go: ReturnType<typeof makeGo>
 
-  readonly goTo: (
-    key: string,
-  ) => Effect.Effect<never, Cause.NoSuchElementException | NavigationError, Option<Destination>>
+  readonly goTo: (key: string) => Effect.Effect<never, NavigationError, Option<Destination>>
 
   readonly reload: ReturnType<typeof makeReload>
 
@@ -83,7 +80,7 @@ export type Intent = ReturnType<typeof makeIntent>
 
 export const makeSave: (
   model: Model,
-) => (event: NavigationEvent) => Effect.Effect<never, Cause.NoSuchElementException, void> =
+) => (event: NavigationEvent) => Effect.Effect<never, never, void> =
   (model: Model) => (event: NavigationEvent) =>
     Effect.gen(function* ($) {
       const events = yield* $(model.events)
@@ -209,7 +206,7 @@ export const makeGo = (model: Model, notify: Notify, save: Save<never>) => (delt
     yield* $(
       notify({
         ...nextEntry,
-        navigationType: nextIndex > currentIndex ? NavigationType.Forward : NavigationType.Back,
+        navigationType: getNavigationType(currentIndex, nextIndex),
       }),
     )
 
@@ -219,3 +216,9 @@ export const makeGo = (model: Model, notify: Notify, save: Save<never>) => (delt
 
     return nextEntry.destination
   })
+
+function getNavigationType(currentIndex: number, nextIndex: number): NavigationType {
+  if (nextIndex > currentIndex) return NavigationType.Forward
+  if (nextIndex < currentIndex) return NavigationType.Back
+  return NavigationType.Reload
+}

package/src/shared-intent.ts

@@ -1,5 +1,4 @@
 import * as Option from '@effect/data/Option'
-import * as Cause from '@effect/io/Cause'
 import * as Effect from '@effect/io/Effect'
 import * as Scope from '@effect/io/Scope'
 
@@ -9,9 +8,7 @@ import { Model } from './model.js'
 export type Notify = (event: NavigationEvent) => Effect.Effect<never, NavigationError, void>
 export type NotifyEnd = (event: NavigationEvent) => Effect.Effect<never, never, void>
 
-export type Save<R> = (
-  event: NavigationEvent,
-) => Effect.Effect<R, Cause.NoSuchElementException, void>
+export type Save<R> = (event: NavigationEvent) => Effect.Effect<R, never, void>
 
 // Anytime there are changes to the model, we need to notify all event handlers
 export const makeNotify = (model: Model) => (event: NavigationEvent) =>
@@ -102,7 +99,7 @@ export const makeGoTo =
     model: Model,
     go: (delta: number, skipHistory?: boolean) => Effect.Effect<R, E, Destination>,
   ) =>
-  (key: string): Effect.Effect<R, Cause.NoSuchElementException | E, Option.Option<Destination>> =>
+  (key: string): Effect.Effect<R, E, Option.Option<Destination>> =>
     Effect.gen(function* ($) {
       const entries = yield* $(model.entries)
       const currentIndex = yield* $(model.index)

package/src/storage.ts

@@ -69,7 +69,7 @@ export const getInitialValues = (
     const initial: Destination = {
       key: options.initialKey ?? (yield* $(createKey)),
       url: initialUrl,
-      state: history.state?.state,
+      state: history.state,
     }
     const initialEvent: NavigationEvent = {
       destination: initial,