@typed/navigation 0.17.0 → 0.18.0

package/src/Navigation.ts

@@ -2,6 +2,7 @@
  * @since 1.0.0
  */
 
+import type { HttpClientError, HttpClientResponse } from "@effect/platform"
 import type * as HttpClient from "@effect/platform/HttpClient"
 import { ParseResult } from "@effect/schema"
 import * as Equivalence from "@effect/schema/Equivalence"
@@ -68,9 +69,9 @@ export interface Navigation {
     data: FormData,
     formInput?: Simplify<Omit<FormInputFrom, "data">>
   ) => Effect.Effect<
-    Option.Option<HttpClient.response.ClientResponse>,
-    NavigationError | HttpClient.error.HttpClientError,
-    Scope.Scope | HttpClient.client.Client.Default
+    Option.Option<HttpClientResponse.HttpClientResponse>,
+    NavigationError | HttpClientError.HttpClientError,
+    Scope.Scope | HttpClient.HttpClient.Service
   >
 
   readonly onFormData: <R = never, R2 = never>(
@@ -234,7 +235,7 @@ export type FormDataHandler<R, R2> = (
   event: FormDataEvent
 ) => Effect.Effect<
   Option.Option<
-    Effect.Effect<Option.Option<HttpClient.response.ClientResponse>, RedirectError | CancelNavigation, R2>
+    Effect.Effect<Option.Option<HttpClientResponse.HttpClientResponse>, RedirectError | CancelNavigation, R2>
   >,
   RedirectError | CancelNavigation,
   R
@@ -283,8 +284,8 @@ export const FileSchemaFrom = Schema.Struct({
  */
 export type FileSchemaFrom = Schema.Schema.Encoded<typeof FileSchemaFrom>
 
-const decodeBase64 = ParseResult.decode(Schema.Base64)
-const encodeBase64 = ParseResult.encode(Schema.Base64)
+const decodeBase64 = ParseResult.decode(Schema.Uint8ArrayFromBase64Url)
+const encodeBase64 = ParseResult.encode(Schema.Uint8ArrayFromBase64Url)
 
 /**
  * @since 1.0.0
@@ -306,27 +307,28 @@ export const FileSchema = FileSchemaFrom.pipe(
 /**
  * @since 1.0.0
  */
-export const FormDataSchema = Schema.Record(Schema.String, Schema.Union(Schema.String, FileSchema)).pipe(
-  Schema.transform(
-    Schema.instanceOf(FormData),
-    {
-      decode: (formData) => {
-        const data = new FormData()
-
-        for (const [key, value] of Object.entries(formData)) {
-          if (value instanceof File) {
-            data.append(key, value, value.name)
-          } else {
-            data.append(key, value)
+export const FormDataSchema = Schema.Record({ key: Schema.String, value: Schema.Union(Schema.String, FileSchema) })
+  .pipe(
+    Schema.transform(
+      Schema.instanceOf(FormData),
+      {
+        decode: (formData) => {
+          const data = new FormData()
+
+          for (const [key, value] of Object.entries(formData)) {
+            if (value instanceof File) {
+              data.append(key, value, value.name)
+            } else {
+              data.append(key, value)
+            }
           }
-        }
 
-        return data
-      },
-      encode: (formData) => Object.fromEntries(formData.entries())
-    }
+          return data
+        },
+        encode: (formData) => Object.fromEntries(formData.entries())
+      }
+    )
   )
-)
 
 const optionNullable = { as: "Option", nullable: true } as const
 
@@ -334,10 +336,10 @@ const optionNullable = { as: "Option", nullable: true } as const
  * @since 1.0.0
  */
 export const FormInputSchema = Schema.Struct({
-  name: Schema.optional(Schema.String, optionNullable),
-  action: Schema.optional(Schema.String, optionNullable),
-  method: Schema.optional(Schema.String, optionNullable),
-  encoding: Schema.optional(Schema.String, optionNullable),
+  name: Schema.optionalWith(Schema.String, optionNullable),
+  action: Schema.optionalWith(Schema.String, optionNullable),
+  method: Schema.optionalWith(Schema.String, optionNullable),
+  encoding: Schema.optionalWith(Schema.String, optionNullable),
   data: FormDataSchema
 })
 
@@ -515,9 +517,9 @@ export function submit(
   data: FormData,
   formInput?: Simplify<Omit<FormInputFrom, "data">>
 ): Effect.Effect<
-  Option.Option<HttpClient.response.ClientResponse>,
-  NavigationError | HttpClient.error.HttpClientError,
-  Navigation | HttpClient.client.Client.Default | Scope.Scope
+  Option.Option<HttpClientResponse.HttpClientResponse>,
+  NavigationError | HttpClientError.HttpClientError,
+  Navigation | HttpClient.HttpClient.Service | Scope.Scope
 > {
   return Navigation.withEffect((n) => n.submit(data, formInput))
 }

package/src/internal/fromWindow.ts

@@ -16,7 +16,7 @@ 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 type { ModelAndIntent, PatchedState } from "./shared.js"
 import {
   getOriginalState,
   getUrl,
@@ -54,7 +54,9 @@ export const fromWindow: Layer.Layer<Navigation, never, Window> = Navigation.sco
         window.location.origin,
         getBaseHref(window),
         getRandomValues,
-        hasNativeNavigation ? () => getNavigationState(window.navigation!) : undefined
+        hasNativeNavigation
+          ? () => getNavigationState(window.navigation!)
+          : undefined
       )
 
       return navigation
@@ -62,7 +64,11 @@ export const fromWindow: Layer.Layer<Navigation, never, Window> = Navigation.sco
       function handleHistoryEvent(event: HistoryEvent) {
         return Effect.gen(function*() {
           if (event._tag === "PushState") {
-            return yield* navigation.navigate(event.url, {}, event.skipCommit)
+            return yield* navigation.navigate(
+              event.url,
+              {},
+              event.skipCommit
+            )
           } else if (event._tag === "ReplaceState") {
             if (Option.isSome(event.url)) {
               return yield* navigation.navigate(
@@ -75,19 +81,28 @@ export const fromWindow: Layer.Layer<Navigation, never, Window> = Navigation.sco
             }
           } 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]
 
-            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)
-    )
+    }).pipe(GetRandomValues.provide(getRandomValues))
   })
 )
 
@@ -114,10 +129,17 @@ function setupWithNavigation(
   return Effect.gen(function*() {
     const state = yield* RefSubject.fromEffect(
       Effect.sync((): NavigationState => getNavigationState(navigation)),
-      { eq: Equivalence.make(Schema.typeSchema(Schema.typeSchema(NavigationState))) }
+      {
+        eq: Equivalence.make(
+          Schema.typeSchema(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 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*(_) {
@@ -126,7 +148,14 @@ function setupWithNavigation(
 
         if (type === "push" || type === "replace") {
           yield* _(
-            Effect.promise(() => navigation.navigate(url.toString(), { history: type, state, info }).committed),
+            Effect.promise(
+              () =>
+                navigation.navigate(url.toString(), {
+                  history: type,
+                  state,
+                  info
+                }).committed
+            ),
             Effect.catchAllDefect((error) => Effect.fail(new NavigationError({ error })))
           )
         } else if (event.type === "reload") {
@@ -136,7 +165,9 @@ function setupWithNavigation(
           )
         } else {
           yield* _(
-            Effect.promise(() => navigation.traverseTo(key, { info }).committed),
+            Effect.promise(
+              () => navigation.traverseTo(key, { info }).committed
+            ),
             Effect.catchAllDefect((error) => Effect.fail(new NavigationError({ error })))
           )
         }
@@ -218,7 +249,11 @@ function setupWithHistory(
 ): Effect.Effect<ModelAndIntent, never, GetRandomValues | Scope.Scope> {
   return Effect.gen(function*() {
     const { location } = window
-    const { original: history, unpatch } = patchHistory(window, onEvent)
+    const {
+      getHistoryState,
+      original: history,
+      unpatch
+    } = patchHistory(window, onEvent)
 
     yield* Effect.addFinalizer(() => unpatch)
 
@@ -227,29 +262,65 @@ function setupWithHistory(
         Effect.map(
           makeDestination(
             new URL(location.href),
-            history.state,
+            getHistoryState(),
             location.origin
           ),
-          (destination): NavigationState => ({ entries: [destination], index: 0, transition: Option.none() })
+          (destination): NavigationState => ({
+            entries: [destination],
+            index: 0,
+            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)
+    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 commit: Commit = (
+      { id, key, state, url }: Destination,
+      event: BeforeNavigationEvent
+    ) =>
       Effect.sync(() => {
         const { type } = event
 
         if (type === "push") {
-          history.pushState({ id, key, originalHistoryState: state }, "", url)
+          history.pushState(
+            {
+              __typed__navigation__id__: id,
+              __typed__navigation__key__: key,
+              __typed__navigation__state__: state
+            },
+            "",
+            url
+          )
         } else if (type === "replace") {
-          history.replaceState({ id, key, originalHistoryState: state }, "", url)
+          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
+          )
         }
       })
 
@@ -265,16 +336,36 @@ function setupWithHistory(
   })
 }
 
-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 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 TraverseToEvent = {
+  _tag: "TraverseTo"
+  key: Uuid
+  state: unknown
+  skipCommit: boolean
+}
 
 function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
   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),
@@ -283,7 +374,9 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
     back: history.back.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,30 +389,32 @@ 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),
+        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) => {
@@ -342,30 +437,32 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
     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
-    }
-  }
-
   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 })
 
   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
+      })
     }
   }
 
@@ -390,7 +487,39 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
     window.removeEventListener("popstate", onPopState)
   })
 
+  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
+
+      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
@@ -400,21 +529,33 @@ function patchHistory(window: Window, onEvent: (event: HistoryEvent) => void) {
 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
-        }))
+        fiber.addObserver(
+          Exit.match({
+            onFailure: (cause) => reject(Runtime.makeFiberFailure(cause)),
+            onSuccess: resolve
+          })
+        )
       })
 
     return {