@typed/navigation 0.5.3 → 0.6.0

package/src/Memory.ts

@@ -1,102 +0,0 @@
-import { pipe } from '@effect/data/Function'
-import * as Option from '@effect/data/Option'
-import * as Cause from '@effect/io/Cause'
-import * as Effect from '@effect/io/Effect'
-import * as Layer from '@effect/io/Layer'
-
-import type { DomNavigationOptions } from './DOM.js'
-import {
-  Destination,
-  Navigation,
-  NavigationError,
-  NavigationEvent,
-  NavigationType,
-} from './Navigation.js'
-import { makeIntent } from './memory-intent.js'
-import { Model, makeModel } from './model.js'
-import { createKey } from './util.js'
-
-export interface MemoryNavigationOptions extends DomNavigationOptions {
-  readonly initialUrl: URL
-  readonly initialState?: unknown
-  readonly base?: string
-}
-
-export function memory(options: MemoryNavigationOptions): Layer.Layer<never, never, Navigation> {
-  return Navigation.layerScoped(
-    Effect.gen(function* ($) {
-      const initial: Destination = {
-        key: options.initialKey ?? (yield* $(createKey)),
-        url: options.initialUrl,
-        state: options.initialState,
-      }
-      const initialEvent: NavigationEvent = {
-        destination: initial,
-        hashChange: false,
-        navigationType: NavigationType.Push,
-      }
-
-      const model: Model = yield* $(makeModel([initialEvent], 0))
-      const intent = makeIntent(model, options)
-
-      // Used to ensure ordering of navigation events
-      const lock = Effect.unsafeMakeSemaphore(1).withPermits(1)
-
-      const handleNavigationError =
-        (depth: number) =>
-        (
-          error: NavigationError | Cause.NoSuchElementException,
-        ): Effect.Effect<never, never, Destination> =>
-          Effect.gen(function* ($) {
-            if (depth >= 50) {
-              throw new Error(
-                'Too many redirects. You may have an infinite loop of onNavigation handlers that are redirecting.',
-              )
-            }
-
-            switch (error._tag) {
-              case 'NoSuchElementException':
-              case 'CancelNavigation':
-                return yield* $(model.currentEntry.get)
-              case 'RedirectNavigation':
-                return yield* $(
-                  Effect.catchAll(
-                    intent.navigate(error.url, error),
-                    handleNavigationError(depth + 1),
-                  ),
-                )
-            }
-          })
-
-      const catchNavigationError = <R, A>(
-        effect: Effect.Effect<R, NavigationError | Cause.NoSuchElementException, A>,
-      ) => Effect.catchAll(effect, handleNavigationError(0))
-
-      // Construct our service
-      const navigation: Navigation = {
-        back: lock(catchNavigationError(intent.back)),
-        base: '/',
-        canGoBack: model.canGoBack,
-        canGoForward: model.canGoForward,
-        currentEntry: model.currentEntry,
-        entries: model.entries,
-        forward: lock(catchNavigationError(intent.forward)),
-        goTo: (n) =>
-          pipe(
-            n,
-            intent.goTo,
-            Effect.catchAll((a) => pipe(a, handleNavigationError(0), Effect.map(Option.some))),
-            lock,
-          ),
-        navigate: (url, options) => pipe(intent.navigate(url, options), catchNavigationError, lock),
-        onNavigation: (handler, options) =>
-          pipe(intent.onNavigation(handler, options), catchNavigationError, Effect.asUnit),
-        onNavigationEnd: (handler, options) =>
-          Effect.asUnit(intent.onNavigationEnd(handler, options)),
-        reload: lock(catchNavigationError(intent.reload)),
-      }
-
-      return navigation
-    }),
-  )
-}

package/src/_makeServerWindow.ts

@@ -1,28 +0,0 @@
-import type { Window, GlobalThis } from '@typed/dom'
-import * as happyDom from 'happy-dom'
-
-export interface ServerWindowOptions {
-  readonly url: string
-
-  readonly innerWidth?: number
-  readonly innerHeight?: number
-  readonly settings?: {
-    readonly disableJavaScriptEvaluation: boolean
-    readonly disableJavaScriptFileLoading: boolean
-    readonly disableCSSFileLoading: boolean
-    readonly enableFileSystemHttpRequests: boolean
-  }
-}
-
-export function makeServerWindow(
-  options?: ServerWindowOptions,
-): Window & GlobalThis & Pick<InstanceType<typeof happyDom.Window>, 'happyDOM'> {
-  const win: Window & GlobalThis & Pick<InstanceType<typeof happyDom.Window>, 'happyDOM'> =
-    new happyDom.Window({
-      ...options,
-    }) as any
-
-  return win
-}
-
-export const html5Doctype = '<!DOCTYPE html>'

package/src/dom-intent.ts

@@ -1,268 +0,0 @@
-import { Option } from '@effect/data/Option'
-import * as Effect from '@effect/io/Effect'
-import { Location } from '@typed/dom'
-
-import type { DomNavigationOptions } from './DOM.js'
-import {
-  Destination,
-  NavigateOptions,
-  NavigationError,
-  NavigationEvent,
-  NavigationType,
-} from './Navigation.js'
-import { Model } from './model.js'
-import {
-  Notify,
-  NotifyEnd,
-  Save,
-  makeGoTo,
-  makeNotify,
-  makeNotifyEnd,
-  makeOnNavigation,
-  makeOnNavigationEnd,
-} from './shared-intent.js'
-import { saveToStorage } from './storage.js'
-import { createKey, getUrl } from './util.js'
-
-// Roughly the number of History entries in a browser anyways
-const DEFAULT_MAX_ENTRIES = 50
-
-export type DomIntent = {
-  readonly back: (skipHistory: boolean) => ReturnType<ReturnType<typeof makeGo>>
-
-  readonly forward: (skipHistory: boolean) => ReturnType<ReturnType<typeof makeGo>>
-
-  readonly push: ReturnType<typeof makePush>
-
-  readonly replace: ReturnType<typeof makeReplace>
-
-  readonly navigate: (
-    url: string,
-    options?: NavigateOptions,
-  ) => ReturnType<ReturnType<typeof makePush | typeof makeReplace>>
-
-  readonly notify: Notify
-
-  readonly go: ReturnType<typeof makeGo>
-
-  readonly goTo: (
-    key: string,
-  ) => Effect.Effect<Storage | History, NavigationError, Option<Destination>>
-
-  readonly reload: ReturnType<typeof makeReload>
-
-  readonly onNavigation: ReturnType<typeof makeOnNavigation>
-
-  readonly onNavigationEnd: ReturnType<typeof makeOnNavigationEnd>
-}
-
-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, 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),
-    forward: (skipHistory: boolean) => go(1, skipHistory),
-    push,
-    replace,
-    navigate: (url: string, options: NavigateOptions = {}) =>
-      options.history === 'replace' ? replace(url, options) : push(url, options),
-    notify,
-    go: go,
-    goTo: makeGoTo(model, go),
-    reload: makeReload(model, notify, save),
-    onNavigation: makeOnNavigation(model),
-    onNavigationEnd: makeOnNavigationEnd(model),
-  } as const
-}
-
-export type Intent = ReturnType<typeof makeIntent>
-
-export const makeSave =
-  (model: Model) =>
-  (event: NavigationEvent): Effect.Effect<Storage, never, void> =>
-    Effect.gen(function* ($) {
-      const events = yield* $(model.events)
-      const index = yield* $(model.index)
-
-      // Save to storage
-      yield* $(saveToStorage(events, index))
-
-      // Update current entry
-      yield* $(model.currentEntry.set(event.destination))
-
-      // Update canGoBack
-      yield* $(model.canGoBack.set(index > 0))
-
-      // Update canGoForward
-      yield* $(model.canGoForward.set(index < events.length - 1))
-    })
-
-export const makeReload = (model: Model, notify: Notify, save: Save<Storage>) =>
-  Effect.gen(function* ($) {
-    const i = yield* $(model.index.get)
-    const e = yield* $(model.events)
-    const event = e[i]
-    const reloadEvent = { ...event, navigationType: NavigationType.Reload }
-
-    yield* $(notify(reloadEvent))
-    yield* $(save(reloadEvent))
-
-    const location = yield* $(Location)
-
-    location.reload()
-
-    return event.destination
-  })
-
-export const makeReplace =
-  (
-    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)
-      const entry = yield* $(model.currentEntry.get)
-      const destination: Destination = {
-        key: entry.key,
-        url: getUrl(url, base, location.origin),
-        state: options.state,
-      }
-      const event: NavigationEvent = {
-        destination,
-        hashChange: entry.url.hash !== destination.url.hash,
-        navigationType: NavigationType.Replace,
-      }
-
-      yield* $(notify(event))
-
-      if (!skipHistory) {
-        history.replaceState({ key: destination.key, state: options.state }, '', url)
-      }
-
-      const currentIndex = yield* $(model.index)
-
-      yield* $(
-        model.events.update((entries) => {
-          const updated = entries.slice(0)
-          updated[currentIndex] = event
-          return updated
-        }),
-      )
-
-      yield* $(save(event))
-      yield* $(notifyEnd(event))
-
-      return destination
-    })
-
-export const makePush =
-  (
-    model: Model,
-    notify: Notify,
-    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: destinationUrl,
-        state: options.state,
-      }
-      const event: NavigationEvent = {
-        destination,
-        hashChange: entry.url.hash !== destination.url.hash,
-        navigationType: NavigationType.Push,
-      }
-
-      // Notify event handlers
-      yield* $(notify(event))
-
-      if (!skipHistory) {
-        history.pushState({ key: destination.key, state: options.state }, '', url)
-      }
-
-      const currentIndex = yield* $(model.index)
-
-      // Remove all entries after the current index
-      // and add the new destination to the end
-      yield* $(
-        model.events.update((entries) => {
-          const updated = entries.slice(0, currentIndex + 1)
-          updated.push(event)
-          return updated.slice(-maxEntries)
-        }),
-      )
-
-      // Update the index to the new destination
-      yield* $(model.index.update((i) => Math.min(i + 1, maxEntries)))
-
-      yield* $(save(event))
-      yield* $(notifyEnd(event))
-
-      return destination
-    })
-
-export const makeGo =
-  (model: Model, notify: Notify, notifyEnd: NotifyEnd, save: Save<Storage>, history: History) =>
-  (delta: number, skipHistory = false) =>
-    Effect.gen(function* ($) {
-      const currentEntries = yield* $(model.events)
-      const totalEntries = currentEntries.length
-      const currentIndex = yield* $(model.index)
-
-      // Nothing to do here
-      if (delta === 0) return currentEntries[currentIndex].destination
-
-      const nextIndex =
-        delta > 0
-          ? Math.min(currentIndex + delta, totalEntries - 1)
-          : Math.min(Math.max(currentIndex + delta, 0))
-      const nextEntry = currentEntries[nextIndex]
-
-      yield* $(
-        notify({
-          ...nextEntry,
-          navigationType: nextIndex > currentIndex ? NavigationType.Forward : NavigationType.Back,
-        }),
-      )
-
-      if (!skipHistory) {
-        history.go(delta)
-      }
-
-      yield* $(model.index.set(nextIndex))
-
-      yield* $(save(nextEntry))
-
-      yield* $(notifyEnd(nextEntry))
-
-      return nextEntry.destination
-    })

package/src/history.ts

@@ -1,165 +0,0 @@
-import * as Cause from '@effect/io/Cause'
-import * as Effect from '@effect/io/Effect'
-import * as Fiber from '@effect/io/Fiber'
-import * as Runtime from '@effect/io/Runtime'
-import * as Scope from '@effect/io/Scope'
-import { History } from '@typed/dom'
-import * as Fx from '@typed/fx'
-
-import { Destination, NavigationError } from './Navigation.js'
-import { DomIntent } from './dom-intent.js'
-
-export type HistoryEvent = PushStateEvent | ReplaceStateEvent | GoEvent | BackEvent | ForwardEvent
-
-export interface PushStateEvent {
-  readonly _tag: 'PushState'
-  readonly state: unknown
-  readonly url: string
-}
-
-export interface ReplaceStateEvent {
-  readonly _tag: 'ReplaceState'
-  readonly state: unknown
-  readonly url: string
-}
-
-export interface GoEvent {
-  readonly _tag: 'Go'
-  readonly delta: number
-}
-
-export interface BackEvent {
-  readonly _tag: 'Back'
-}
-
-export interface ForwardEvent {
-  readonly _tag: 'Forward'
-}
-
-export const patchHistory: Effect.Effect<
-  History | Scope.Scope,
-  never,
-  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() {
-      const state = stateDescriptor?.get?.call(history)
-
-      if (state && state.key && state.state) return state.state
-
-      return state
-    },
-    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>())
-  const runFork = Runtime.runFork(runtime)
-  const cleanup = patchHistory_(history, (event: HistoryEvent) =>
-    runFork(Effect.flatMap(Effect.forkIn(historyEvents.event(event), scope), Fiber.join)),
-  )
-
-  // unpatch history upon finalization
-  yield* $(Effect.addFinalizer(() => Effect.sync(cleanup)))
-
-  return [clone, historyEvents]
-})
-
-function patchHistory_(history: History, sendEvent: (event: HistoryEvent) => void) {
-  const pushState = history.pushState
-  const replaceState = history.replaceState
-  const go = history.go
-  const back = history.back
-  const forward = history.forward
-
-  history.pushState = function (state, _, url) {
-    if (url) sendEvent({ _tag: 'PushState', 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
-
-    sendEvent({ _tag: 'Go', delta })
-  }
-
-  history.back = function () {
-    sendEvent({ _tag: 'Back' })
-  }
-
-  history.forward = function () {
-    sendEvent({ _tag: 'Forward' })
-  }
-
-  const stateDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(history), 'state')
-
-  // Override state to always return the original state
-  Object.defineProperty(history, 'state', {
-    get() {
-      const state = stateDescriptor?.get?.call(history)
-
-      if (state && state.key && state.state) return state.state
-
-      return state
-    },
-  })
-
-  // Reset history to original state
-  return () => {
-    history.pushState = pushState
-    history.replaceState = replaceState
-    history.go = go
-    history.back = back
-    history.forward = forward
-
-    if (stateDescriptor) {
-      Object.defineProperty(history, 'state', stateDescriptor)
-    }
-  }
-}
-
-export function onHistoryEvent(
-  event: HistoryEvent,
-  intent: DomIntent,
-): Effect.Effect<
-  History | Location | Storage,
-  Cause.NoSuchElementException | NavigationError,
-  Destination
-> {
-  return Effect.gen(function* ($) {
-    switch (event._tag) {
-      case 'PushState':
-        return yield* $(intent.push(event.url, { state: event.state }, true))
-      case 'ReplaceState':
-        return yield* $(intent.replace(event.url, { state: event.state }, true))
-      case 'Back':
-        return yield* $(intent.back(true))
-      case 'Forward':
-        return yield* $(intent.forward(true))
-      case 'Go':
-        return yield* $(intent.go(event.delta, true))
-    }
-  })
-}

package/src/json.ts

@@ -1,31 +0,0 @@
-import { Destination, NavigationEvent } from './Navigation.js'
-
-export type NavigationEventJson = {
-  readonly [K in keyof NavigationEvent]: NavigationEvent[K] extends Destination
-    ? DestinationJson
-    : NavigationEvent[K]
-}
-
-type DestinationJson = {
-  readonly [K in keyof Destination]: Destination[K] extends URL ? string : Destination[K]
-}
-
-export const decodeDestination = (d: DestinationJson): Destination => ({
-  ...d,
-  url: new URL(d.url),
-})
-
-export const decodeNavigationEvent = (event: NavigationEventJson): NavigationEvent => ({
-  ...event,
-  destination: decodeDestination(event.destination),
-})
-
-export const encodeEvent = (event: NavigationEvent): NavigationEventJson => ({
-  ...event,
-  destination: encodeDestination(event.destination),
-})
-
-export const encodeDestination = (destination: Destination): DestinationJson => ({
-  ...destination,
-  url: destination.url.href,
-})