Package @reatom/routing

@reatom/routing

Interfaces

RouteAtom()<Path, Params, Search, Payload, InputParams, InputSearch>

Defined in: routing/route.ts:518

A route atom that matches URLs and provides navigation, loading, and rendering.

Routes are computed atoms that return route parameters when matched, or null when not matched. They also provide navigation actions, data loading, and component rendering capabilities.

Routes can be created with reatomRoute() and nested using .reatomRoute().

Examples

// Create a route
  const userRoute = reatomRoute('users/:userId')

  // Use as computed atom
  const params = userRoute() // { userId: '123' } or null

  // Navigate
  userRoute.go({ userId: '456' })

  // Create nested route
  const userEditRoute = userRoute.reatomRoute('edit')
  // Full path: /users/:userId/edit

// Route with validation and loader
  const userRoute = reatomRoute({
    path: 'users/:userId',
    params: z.object({ userId: z.string().transform(Number) }),
    async loader({ userId }) {
      return fetch(`/api/users/${userId}`).then((r) => r.json())
    },
  })

Extends

Computed<null | Plain<Params & Search>>.RouteExt<Path, Params, Search, Payload, InputParams, InputSearch>

Type Parameters

Path

Path extends string = string

Params

Params extends PathKeys<Path> = PathParams<Path>

Search

Search extends Rec<string> = { }

Payload

Payload = Plain<Params & Search>

InputParams

InputParams = Params

InputSearch

InputSearch = Search

RouteAtom(…params): null | Plain<Params & Search>

Defined in: routing/route.ts:518

A route atom that matches URLs and provides navigation, loading, and rendering.

Routes are computed atoms that return route parameters when matched, or null when not matched. They also provide navigation actions, data loading, and component rendering capabilities.

Routes can be created with reatomRoute() and nested using .reatomRoute().

Parameters

params

…[]

Parameters to pass to the atom

Returns

null | Plain<Params & Search>

The atom’s payload (typically its current state)

Examples

// Create a route
  const userRoute = reatomRoute('users/:userId')

  // Use as computed atom
  const params = userRoute() // { userId: '123' } or null

  // Navigate
  userRoute.go({ userId: '456' })

  // Create nested route
  const userEditRoute = userRoute.reatomRoute('edit')
  // Full path: /users/:userId/edit

// Route with validation and loader
  const userRoute = reatomRoute({
    path: 'users/:userId',
    params: z.object({ userId: z.string().transform(Number) }),
    async loader({ userId }) {
      return fetch(`/api/users/${userId}`).then((r) => r.json())
    },
  })

Properties

__reatom

__reatom: AtomMeta

Defined in: core/atom.ts:106

Reference to the atom’s internal metadata.

Inherited from

Computed.__reatom

actions

actions: Actions<RouteAtom<Path, Params, Search, Payload, InputParams, InputSearch>>

Defined in: core/atom.ts:86

Bind methods to the atom to extend its functionality.

Deprecated

Use extend instead

Inherited from

Computed.actions

child

child: Computed<null | RouteChild>

Defined in: routing/route.ts:481

Deprecated

Use render instead

Inherited from

RouteExt.child

children

children: Computed<RouteChild[]>

Defined in: routing/route.ts:478

Deprecated

Use outlet instead

Inherited from

RouteExt.children

exact

exact: Computed<boolean>

Defined in: routing/route.ts:371

Computed atom indicating if the current URL exactly matches this route.

Returns true only when the URL is an exact match (not a partial match). Useful for conditional rendering that should only appear on the exact route.

Examples

// At URL: /users/123
  usersRoute.exact() // false (partial match)
  userRoute.exact() // true (exact match)

// Only show component on exact route
  {userRoute.exact() && <UserDetails />}

Inherited from

RouteExt.exact

extend

extend: Extend<RouteAtom<Path, Params, Search, Payload, InputParams, InputSearch>>

Defined in: core/atom.ts:92

Extension system to add capabilities to atoms. Allows adding middleware, methods, or other functionality to modify atom behavior.

Inherited from

Computed.extend

go

go: Action<[MaybeVoid<InputParams & InputSearch>, boolean], URL>

Defined in: routing/route.ts:334

Navigate to this route with the given parameters.

Updates the browser URL and triggers route matching. For search-only routes, preserves the current pathname and only updates search parameters.

Examples

userRoute.go({ userId: '123' })
  // Navigates to /users/123

searchRoute.go({ q: 'reatom', page: 2 }, true)
  // Navigates to /search?q=reatom&page=2 and replaces history entry

homeRoute.go() // Navigate without parameters
  // Navigates to /

Param

Route parameters (path + search). Can be omitted if route has no required parameters.

Param

If true, replaces current history entry instead of creating a new one. Defaults to false.

Returns

The new URL object

Inherited from

RouteExt.go

loader

loader: RouteLoader<Plain<Params & Search>, Payload>

Defined in: routing/route.ts:353

Async loader for fetching route data.

Automatically executes when the route becomes active. Extended with withAsyncData extension, which provides loading state, error handling, and retry functionality, automatically rerun (and abort prev run) on params change, or just abort when navigating away.

Example

const ready = userRoute.loader.ready()
  const user = userRoute.loader.data()
  const error = userRoute.loader.error()
  userRoute.loader.retry()

Inherited from

RouteExt.loader

match

match: Computed<boolean>

Defined in: routing/route.ts:391

Computed atom indicating if the current URL matches this route (partial or exact).

Returns true when the route matches, false otherwise. More permissive than exact() - returns true for both exact and partial matches.

Helpful to track the route active state, and to create a route model with memoization.

Used under the hood of the outlet computed.

Example

// At URL: /users/123/edit
  usersRoute.match() // true (partial match)
  userRoute.match() // true (partial match)
  userEditRoute.match() // true (exact match)

Inherited from

RouteExt.match

outlet

outlet: Computed<RouteChild[]>

Defined in: routing/route.ts:462

Computed atom returning an array of all active child route components.

Contains the rendered output from all child routes that are currently matched. Used in parent route render functions to compose child components.

Example

const layoutRoute = reatomRoute({
    render({ outlet }) {
      return html`<div>
        <main>${outlet().map((child) => child)}</main>
      </div>`
    },
  })

Inherited from

RouteExt.outlet

path()

path: (params) => string

Defined in: routing/route.ts:428

Builds a URL path string for this route without navigating.

Useful for creating links or programmatically constructing URLs. Includes search parameters if the route has a search schema.

Parameters

params

MaybeVoid<InputParams & InputSearch>

Route parameters (path + search). Can be omitted if route has no required parameters.

Returns

string

The URL path string (including search params if applicable)

Examples

userRoute.path({ userId: '123' })
  // Returns: '/users/123'

searchRoute.path({ q: 'reatom', page: 2 })
  // Returns: '/search?q=reatom&page=2'

// Use in links
  <a href={userRoute.path({ userId: '123' })}>View User</a>

Inherited from

RouteExt.path

pattern

pattern: Path

Defined in: routing/route.ts:404

The path pattern string for this route.

Helpful for matching links or other route-related logic.

Examples

'/users/:userId'

'/posts/:postId?'

Inherited from

RouteExt.pattern

render

render: Computed<null | RouteChild>

Defined in: routing/route.ts:475

Computed atom returning the rendered component for this route, or null.

Returns the result of the route’s render function when the route matches, null otherwise. Used to render route components in a component tree.

Example

const App = reatomComponent(() => {
    return layoutRoute.render() // Returns the rendered component or null
  })

Inherited from

RouteExt.render

route()

route: {<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>; <SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>; }

Defined in: routing/route.ts:269

Call Signature

<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Call Signature

<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<Params & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

Deprecated

Use reatomRoute instead

Inherited from

RouteExt.route

routes

routes: Rec<RouteAtom>

Defined in: routing/route.ts:444

Registry of all child routes created from this route.

Routes are automatically registered here when created via .reatomRoute(). Useful for accessing all child routes or implementing global route logic.

Example

const layoutRoute = reatomRoute('dashboard')
  const usersRoute = layoutRoute.reatomRoute('users')
  const postsRoute = layoutRoute.reatomRoute('posts')

  // Access all child routes
  layoutRoute.routes // { 'dashboard/users': usersRoute, 'dashboard/posts': postsRoute }

Inherited from

RouteExt.routes

set

set: unknown

Defined in: core/atom.ts:79

Inherited from

Computed.set

subscribe: (cb?) => Unsubscribe

Defined in: core/atom.ts:103

Subscribe to state changes, with the first call happening immediately. When a subscriber is added, the callback is immediately invoked with the current state. After that, it’s called whenever the atom’s state changes.

Parameters

cb?

(state) => any

Callback function that receives the atom’s state when it changes

Returns

Unsubscribe

An unsubscribe function that removes the subscription when called

Inherited from

Computed.subscribe

Methods

reatomRoute()

Call Signature

reatomRoute<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

Defined in: routing/route.ts:205

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Inherited from

RouteExt.reatomRoute

Call Signature

reatomRoute<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

Defined in: routing/route.ts:239

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<Params & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

Inherited from

RouteExt.reatomRoute

RouteChild

Defined in: routing/route.ts:72

Type representing a rendered route component/child.

Redeclare this type in your framework module to enable type-safe route rendering. This allows you to use framework-specific types (like JSX.Element, VNode, TemplateResult) as route children.

Examples

// For React/Preact
  declare module '@reatom/core' {
    interface RouteChild extends JSX.Element {}
  }

// For Vue
  declare module '@reatom/core' {
    interface RouteChild extends VNode {}
  }

// For Lit
  declare module '@reatom/core' {
    interface RouteChild extends TemplateResult {}
  }

RouteExt<Path, Params, Search, Payload, InputParams, InputSearch>

Defined in: routing/route.ts:302

Route extension interface for route computed atom.

Extends

RouteMixin<Path, Params>

Extended by

RouteAtom

Type Parameters

Path

Path extends string = string

Params

Params extends PathKeys<Path> = PathParams<Path>

Search

Search extends Rec<string> = { }

Payload

Payload = Plain<Params & Search>

InputParams

InputParams = Params

InputSearch

InputSearch = Search

Properties

child

child: Computed<null | RouteChild>

Defined in: routing/route.ts:481

Deprecated

Use render instead

children

children: Computed<RouteChild[]>

Defined in: routing/route.ts:478

Deprecated

Use outlet instead

exact

exact: Computed<boolean>

Defined in: routing/route.ts:371

Computed atom indicating if the current URL exactly matches this route.

Returns true only when the URL is an exact match (not a partial match). Useful for conditional rendering that should only appear on the exact route.

Examples

// At URL: /users/123
  usersRoute.exact() // false (partial match)
  userRoute.exact() // true (exact match)

// Only show component on exact route
  {userRoute.exact() && <UserDetails />}

go

go: Action<[MaybeVoid<InputParams & InputSearch>, boolean], URL>

Defined in: routing/route.ts:334

Navigate to this route with the given parameters.

Updates the browser URL and triggers route matching. For search-only routes, preserves the current pathname and only updates search parameters.

Examples

userRoute.go({ userId: '123' })
  // Navigates to /users/123

searchRoute.go({ q: 'reatom', page: 2 }, true)
  // Navigates to /search?q=reatom&page=2 and replaces history entry

homeRoute.go() // Navigate without parameters
  // Navigates to /

Param

Route parameters (path + search). Can be omitted if route has no required parameters.

Param

If true, replaces current history entry instead of creating a new one. Defaults to false.

Returns

The new URL object

loader

loader: RouteLoader<Plain<Params & Search>, Payload>

Defined in: routing/route.ts:353

Async loader for fetching route data.

Example

const ready = userRoute.loader.ready()
  const user = userRoute.loader.data()
  const error = userRoute.loader.error()
  userRoute.loader.retry()

match

match: Computed<boolean>

Defined in: routing/route.ts:391

Computed atom indicating if the current URL matches this route (partial or exact).

Returns true when the route matches, false otherwise. More permissive than exact() - returns true for both exact and partial matches.

Helpful to track the route active state, and to create a route model with memoization.

Used under the hood of the outlet computed.

Example

// At URL: /users/123/edit
  usersRoute.match() // true (partial match)
  userRoute.match() // true (partial match)
  userEditRoute.match() // true (exact match)

outlet

outlet: Computed<RouteChild[]>

Defined in: routing/route.ts:462

Computed atom returning an array of all active child route components.

Contains the rendered output from all child routes that are currently matched. Used in parent route render functions to compose child components.

Example

const layoutRoute = reatomRoute({
    render({ outlet }) {
      return html`<div>
        <main>${outlet().map((child) => child)}</main>
      </div>`
    },
  })

path()

path: (params) => string

Defined in: routing/route.ts:428

Builds a URL path string for this route without navigating.

Useful for creating links or programmatically constructing URLs. Includes search parameters if the route has a search schema.

Parameters

params

MaybeVoid<InputParams & InputSearch>

Route parameters (path + search). Can be omitted if route has no required parameters.

Returns

string

The URL path string (including search params if applicable)

Examples

userRoute.path({ userId: '123' })
  // Returns: '/users/123'

searchRoute.path({ q: 'reatom', page: 2 })
  // Returns: '/search?q=reatom&page=2'

// Use in links
  <a href={userRoute.path({ userId: '123' })}>View User</a>

pattern

pattern: Path

Defined in: routing/route.ts:404

The path pattern string for this route.

Helpful for matching links or other route-related logic.

Examples

'/users/:userId'

'/posts/:postId?'

render

render: Computed<null | RouteChild>

Defined in: routing/route.ts:475

Computed atom returning the rendered component for this route, or null.

Returns the result of the route’s render function when the route matches, null otherwise. Used to render route components in a component tree.

Example

const App = reatomComponent(() => {
    return layoutRoute.render() // Returns the rendered component or null
  })

route()

route: {<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>; <SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>; }

Defined in: routing/route.ts:269

Call Signature

<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Call Signature

<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<Params & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

Deprecated

Use reatomRoute instead

Inherited from

RouteMixin.route

routes

routes: Rec<RouteAtom>

Defined in: routing/route.ts:444

Registry of all child routes created from this route.

Routes are automatically registered here when created via .reatomRoute(). Useful for accessing all child routes or implementing global route logic.

Example

const layoutRoute = reatomRoute('dashboard')
  const usersRoute = layoutRoute.reatomRoute('users')
  const postsRoute = layoutRoute.reatomRoute('posts')

  // Access all child routes
  layoutRoute.routes // { 'dashboard/users': usersRoute, 'dashboard/posts': postsRoute }

Methods

reatomRoute()

Call Signature

reatomRoute<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

Defined in: routing/route.ts:205

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Inherited from

RouteMixin.reatomRoute

Call Signature

reatomRoute<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

Defined in: routing/route.ts:239

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<Params & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

Inherited from

RouteMixin.reatomRoute

RouteLoader()<Params, Payload>

Defined in: routing/route.ts:297

Route loader interface describing async data loading capabilities, mostly crafted from withAsyncData extension, see loader property of a route for examples.

Extends

Computed<Promise<Payload>>.AsyncDataExt<[Params], Payload, undefined | Payload, Error | undefined>

Type Parameters

Params

Params extends Rec = Rec

Payload

Payload = any

RouteLoader(…params): Promise

Defined in: routing/route.ts:297

Route loader interface describing async data loading capabilities, mostly crafted from withAsyncData extension, see loader property of a route for examples.

Parameters

params

…[]

Parameters to pass to the atom

Returns

Promise

The atom’s payload (typically its current state)

Properties

__reatom

__reatom: AtomMeta

Defined in: core/atom.ts:106

Reference to the atom’s internal metadata.

Inherited from

Computed.__reatom

abort

abort: Action<[any]>

Defined in: extensions/withAbort.ts:11

Inherited from

AsyncDataExt.abort

actions

actions: Actions<RouteLoader<Params, Payload>>

Defined in: core/atom.ts:86

Bind methods to the atom to extend its functionality.

Deprecated

Use extend instead

Inherited from

Computed.actions

data

data: Atom<undefined | Payload>

Defined in: async/withAsyncData.ts:31

Atom that stores the fetched data Updated automatically when the async operation completes successfully

Inherited from

AsyncDataExt.data

error

error: Atom<undefined | Error>

Defined in: async/withAsync.ts:81

Atom containing the most recent error or undefined if no error has occurred

Inherited from

AsyncDataExt.error

extend

extend: Extend<RouteLoader<Params, Payload>>

Defined in: core/atom.ts:92

Extension system to add capabilities to atoms. Allows adding middleware, methods, or other functionality to modify atom behavior.

Inherited from

Computed.extend

onFulfill

onFulfill: Action<[Payload, [Params]], { params: [Params]; payload: Payload; }>

Defined in: async/withAsync.ts:45

Action that is called when the promise resolves successfully

Param

The resolved value from the promise

Param

The original parameters passed to the atom/action

Returns

An object containing the payload and parameters

Inherited from

AsyncDataExt.onFulfill

onReject

onReject: Action<[Error, [Params]], { error: undefined | Error; params: [Params]; }>

Defined in: async/withAsync.ts:57

Action that is called when the promise rejects with an error

Param

The error thrown by the promise

Param

The original parameters passed to the atom/action

Returns

An object containing the error and parameters

Inherited from

AsyncDataExt.onReject

onSettle

onSettle: Action<[{ params: [Params]; payload: Payload; } | { error: undefined | Error; params: [Params]; }], { params: [Params]; payload: Payload; } | { error: undefined | Error; params: [Params]; }>

Defined in: async/withAsync.ts:68

Action called after either successful resolution or rejection

Param

Either a payload+params object or an error+params object

Returns

The same result object that was passed in

Inherited from

AsyncDataExt.onSettle

pending

pending: Computed<number>

Defined in: async/withAsync.ts:78

Computed atom tracking how many async operations are currently pending

Returns

Number of pending operations (0 when none are pending)

Inherited from

AsyncDataExt.pending

ready

ready: Computed<boolean>

Defined in: async/withAsync.ts:36

Computed atom that indicates when no async operations are pending

Returns

Boolean indicating if all operations have completed (true) or some are still pending (false)

Inherited from

AsyncDataExt.ready

set

set: unknown

Defined in: core/atom.ts:79

Inherited from

Computed.set

subscribe: (cb?) => Unsubscribe

Defined in: core/atom.ts:103

Parameters

cb?

(state) => any

Callback function that receives the atom’s state when it changes

Returns

Unsubscribe

An unsubscribe function that removes the subscription when called

Inherited from

Computed.subscribe

RouteMixin<Path, Params>

Defined in: routing/route.ts:190

Extended by

RouteExt

Type Parameters

Path

Path extends string

Params

Params extends PathKeys<Path> = PathParams<Path>

Properties

route()

route: {<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>; <SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>; }

Defined in: routing/route.ts:269

Call Signature

<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Call Signature

<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<Params & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

Deprecated

Use reatomRoute instead

Methods

reatomRoute()

Call Signature

reatomRoute<SubPath>(path, name?): RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

Defined in: routing/route.ts:205

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`${Path}/${SubPath}`, Plain<Params & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Call Signature

reatomRoute<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

Defined in: routing/route.ts:239

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<Params & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`${Path extends `${Path}?` ? Path : Path}/${SubPath}`, Plain<Params & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<Params & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

RouteOptions<Path, Params, Search, ParamsOutput, SearchOutput, LoaderParams, Payload>

Defined in: routing/route.ts:103

Configuration options for creating a route.

Routes can be created with just a path string, or with a full configuration object that includes validation schemas, data loaders, and render functions.

Examples

// Simple path-only route
  const route = reatomRoute('users/:userId')

// Route with validation and loader
  const route = reatomRoute({
    path: 'users/:userId',
    params: z.object({
      userId: z.string().regex(/^\d+$/).transform(Number),
    }),
    search: z.object({ tab: z.enum(['posts', 'comments']).optional() }),
    async loader(params) {
      return fetch(`/api/users/${params.userId}`).then((r) => r.json())
    },
  })

// Search-only route (no path, preserves current pathname)
  const dialogRoute = reatomRoute({
    search: z.object({ dialog: z.enum(['login', 'signup']).optional() }),
  })

Type Parameters

Path

Path extends string = ""

Params

Params extends PathKeys<Path> = PathParams<Path>

Search

Search extends Partial<Rec<string>> = { }

ParamsOutput

ParamsOutput = Params

SearchOutput

SearchOutput = Search

LoaderParams

LoaderParams = Plain<ParamsOutput & SearchOutput>

Payload

Payload = LoaderParams

Properties

child()?

optional child: (children) => RouteChild

Defined in: routing/route.ts:187

Parameters

children

Computed<RouteChild[]>

Returns

RouteChild

Deprecated

Use render({outlet}) instead

loader()?

optional loader: (params) => Promise<Payload>

Defined in: routing/route.ts:167

Async function that loads data when the route becomes active.

Receives validated parameters (path + search params combined). Automatically aborted when navigating away from the route.

Parameters

params

LoaderParams

Returns

Promise<Payload>

Example

async loader({ userId, tab }) {
  const user = await fetch(`/api/users/${userId}`).then(r => r.json())
  return user
  }

params?

optional params: StandardSchemaV1<Params, ParamsOutput>

Defined in: routing/route.ts:139

Schema to validate and transform path parameters. Uses Standard Schema (compatible with Zod, Valibot, etc.).

URL parameters are always strings, so validation schemas should accept strings and transform them to the desired types.

Example

params: z.object({
    userId: z.string().regex(/^\d+$/).transform(Number),
  })

path?

optional path: Path

Defined in: routing/route.ts:125

Path pattern string. Use :paramName for required parameters and :paramName? for optional parameters.

Examples

'users/:userId'

'posts/:postId?'

'api/products/:productId/settings'

render()?

optional render: (options) => RouteChild

Defined in: routing/route.ts:184

Function that renders the route component. Receives an outlet computed that contains all active child route components.

This enables framework-agnostic component composition where routes define their own components that are automatically composed hierarchically.

Parameters

options

outlet

Computed<RouteChild[]>

Returns

RouteChild

Example

render({ outlet }) {
  return html`<div>
  <header>My App</header>
  <main>${outlet().map(child => child)}</main>
  </div>`
  }

search?

optional search: StandardSchemaV1<Search, SearchOutput>

Defined in: routing/route.ts:153

Schema to validate and transform search/query parameters. Uses Standard Schema (compatible with Zod, Valibot, etc.).

Note: All search parameters should be optional in the schema.

Example

search: z.object({
    sort: z.enum(['asc', 'desc']).optional(),
    page: z.string().transform(Number).default('1'),
  })

SearchParamsAtom()

Defined in: routing/searchParams.ts:9

Interface for the search parameters atom.

Extends

Computed<Record<string, string>>

SearchParamsAtom(…params): Payload

Defined in: routing/searchParams.ts:9

Interface for the search parameters atom.

Parameters

params

…[]

Parameters to pass to the atom

Returns

Payload

The atom’s payload (typically its current state)

Properties

__reatom

__reatom: AtomMeta

Defined in: core/atom.ts:106

Reference to the atom’s internal metadata.

Inherited from

Computed.__reatom

actions

actions: Actions<SearchParamsAtom>

Defined in: core/atom.ts:86

Bind methods to the atom to extend its functionality.

Deprecated

Use extend instead

Inherited from

Computed.actions

del

del: Action<[string, boolean], void>

Defined in: routing/searchParams.ts:25

Delete a search parameter.

Param

Parameter name to delete

Param

Whether to replace the current history entry

extend

extend: Extend<SearchParamsAtom>

Defined in: core/atom.ts:92

Extension system to add capabilities to atoms. Allows adding middleware, methods, or other functionality to modify atom behavior.

Inherited from

Computed.extend

set

set: Action<[string, string, boolean], void>

Defined in: routing/searchParams.ts:17

Set a search parameter.

Param

Parameter name

Param

Parameter value

Param

Whether to replace the current history entry

Overrides

Computed.set

subscribe: (cb?) => Unsubscribe

Defined in: core/atom.ts:103

Parameters

cb?

(state) => any

Callback function that receives the atom’s state when it changes

Returns

Unsubscribe

An unsubscribe function that removes the subscription when called

Inherited from

Computed.subscribe

Methods

lens()

Call Signature

lens<T>(key, parse?): Atom<T>

Defined in: routing/searchParams.ts:33

Create an atom that synchronizes with a specific search parameter.

Type Parameters

T

T = string

Parameters

key

string

Parameter name

parse?

(value?) => T

Function to parse parameter string value to desired type

Returns

Atom<T>

Call Signature

lens<T>(key, options): Atom<T>

Defined in: routing/searchParams.ts:51

Create an atom that synchronizes with a specific search parameter using advanced options.

Type Parameters

T

T = string

Parameters

key

string

Parameter name

options

Configuration options for the lens

name?

string

Optional name of the created atom

parse?

(value?) => T

Optional function to parse the parameter string value into the desired type

path?

string

Optional path to limit the scope of synchronization to specific URL paths

replace?

boolean

Optional boolean to specify if history entries should be replaced (default: false)

serialize?

(value) => undefined | string

Optional function to serialize the value back into a string

Returns

Atom<T>

Type Aliases

PathKeys<Path>

PathKeys<Path> = Record<keyof PathParams<Path>, any>

Defined in: routing/route.ts:45

Type Parameters

Path

Path extends string

PathParams<Path>

PathParams<Path> = Path extends `:${infer Param}/${infer Rest}` ? { [key in Param]: string } & PathParams<Rest> : Path extends `:${infer MaybeOptionalParam}` ? MaybeOptionalParam extends `${infer OptionalParam}?` ? { [key in OptionalParam]?: string } : { [key in MaybeOptionalParam]: string } : Path extends `${string}/${infer Rest}` ? PathParams<Rest> : object

Defined in: routing/route.ts:34

Extracts parameter types from a route path pattern string.

Extracts parameter names from path patterns like :userId, :postId?, etc. and creates a type mapping parameter names to their types.

Type Parameters

Path

Path extends string = string

Examples

type Params = PathParams<'users/:userId/posts/:postId?'>
  // Params = { userId: string; postId?: string }

type Params = PathParams<':id'>
  // Params = { id: string }

Variables

is404

const is404: Computed<boolean>

Defined in: routing/route.ts:877

A computed atom that indicates whether the current URL matches any defined routes.

Returns true when no routes match the current URL (404 scenario), and false when at least one route matches.

This is useful for implementing fallback UI, displaying “page not found” messages, or redirecting users when they navigate to non-existent pages.

Returns

A boolean indicating whether the current URL is not matched by any route

reatomRoute()

reatomRoute: {<SubPath>(path, name?): RouteAtom<`/${SubPath}`, Plain<object & PathParams<SubPath>>, { }, { }>; <SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`/${SubPath}`, Plain<object & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<object & SubParams>, Plain<SubSearch>>; }

Defined in: routing/route.ts:858

Creates a new route atom with the given path pattern or configuration.

Routes automatically sync with the browser URL and provide type-safe navigation, parameter validation, data loading, and component rendering.

Call Signature

<SubPath>(path, name?): RouteAtom<`/${SubPath}`, Plain<object & PathParams<SubPath>>, { }, { }>

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`/${SubPath}`, Plain<object & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Call Signature

<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`/${SubPath}`, Plain<object & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<object & SubParams>, Plain<SubSearch>>

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<object & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`/${SubPath}`, Plain<object & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<object & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

Examples

// Simple path route
  const homeRoute = reatomRoute('')
  const aboutRoute = reatomRoute('about')
  const userRoute = reatomRoute('users/:userId')

// Route with validation schemas
  import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'users/:userId',
    params: z.object({
      userId: z.string().regex(/^\d+$/).transform(Number),
    }),
    search: z.object({
      tab: z.enum(['posts', 'comments']).optional(),
    }),
  })

  userRoute() // null
  userRoute.go({ userId: '123', tab: 'posts' })
  // URL: /users/123?tab=posts
  userRoute() // { userId: 123, tab: 'posts' }

// Route with loader
  const userRoute = reatomRoute({
    path: 'users/:userId',
    async loader({ userId }) {
      const user = await fetch(`/api/users/${userId}`).then((r) =>
        r.json(),
      )
      return user
    },
  })

// Search-only route (preserves pathname)
  const dialogRoute = reatomRoute({
    search: z.object({
      dialog: z.enum(['login', 'signup']).optional(),
    }),
  })

// Route with component rendering
  const layoutRoute = reatomRoute({
    render({ outlet }) {
      return html`<div>
        <header>My App</header>
        <main>${outlet().map((child) => child)}</main>
      </div>`
    },
  })

Param

Either a path pattern string or a route configuration object

Param

Optional name for the route atom (for debugging)

Returns

A new RouteAtom instance

route()

route: {<SubPath>(path, name?): RouteAtom<`/${SubPath}`, Plain<object & PathParams<SubPath>>, { }, { }>; <SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`/${SubPath}`, Plain<object & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<object & SubParams>, Plain<SubSearch>>; } = reatomRoute

Defined in: routing/route.ts:862

Call Signature

<SubPath>(path, name?): RouteAtom<`/${SubPath}`, Plain<object & PathParams<SubPath>>, { }, { }>

Create a sub-route by appending a path pattern to the current route.

Type Parameters

SubPath

SubPath extends string

Parameters

path

SubPath

The sub-path pattern to append (e.g., ‘users’, ':userId', ‘posts/:postId?‘)

name?

string

Returns

RouteAtom<`/${SubPath}`, Plain<object & PathParams<SubPath>>, { }, { }>

A new RouteAtom for the combined path pattern

Example

const usersRoute = reatomRoute('users') // Creates /users route
  const userRoute = usersRoute.reatomRoute(':userId') // Creates /users/:userId route

Call Signature

<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>(options, name?): RouteAtom<`/${SubPath}`, Plain<object & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<object & SubParams>, Plain<SubSearch>>

Create a sub-route with validation schemas for parameters and search params.

Type Parameters

SubPath

SubPath extends string = ""

SubParams

SubParams extends PathKeys<SubPath> = PathParams<SubPath>

SubSearch

SubSearch extends Partial<Rec<string>> = { }

SubParamsOutput

SubParamsOutput = SubParams

SubSearchOutput

SubSearchOutput = SubSearch

LoaderParams

LoaderParams = Plain<object & SubParamsOutput & SubSearchOutput>

Payload

Payload = LoaderParams

Parameters

options

RouteOptions<SubPath, SubParams, SubSearch, SubParamsOutput, SubSearchOutput, LoaderParams, Payload>

Route configuration object or just a path string

name?

string

Returns

RouteAtom<`/${SubPath}`, Plain<object & SubParamsOutput>, Plain<SubSearchOutput>, Payload, Plain<object & SubParams>, Plain<SubSearch>>

A new RouteAtom for the combined path with validation

Example

import { z } from 'zod'

  const userRoute = reatomRoute({
    path: 'user/:id',
    params: z.object({ id: z.number() }), // Should match the path
    search: z.object({ sort: z.enum(['asc', 'desc']).optional() }),
  })

  // Navigate with validated params
  userRoute.go({ id: 123, tab: 'profile' })

Deprecated

Use reatomRoute instead

searchParamsAtom

const searchParamsAtom: SearchParamsAtom

Defined in: routing/searchParams.ts:69

Create an atom that represents search parameters from the URL.

Functions

withSearchParams()

Call Signature

withSearchParams<T>(key, parse?): <Target>(target) => Target

Defined in: routing/searchParams.ts:112

Create an atom that synchronizes with a URL search parameter.

Type Parameters

T

T = string

Parameters

key

string

The parameter name to synchronize with

parse?

(value?) => T

Function to parse string value to desired type

Returns

<Target>(target): Target

Type Parameters

Target

Target extends Atom<T, [T]>

Parameters

target

Target

Returns

Target

Call Signature

withSearchParams<T>(key, options): <Target>(target) => Target

Defined in: routing/searchParams.ts:132

Create an atom that synchronizes with a URL search parameter.

Type Parameters

T

T = string

Parameters

key

string

Parameter name

options

Configuration options for the lens

parse?

(value?) => T

Optional function to parse the parameter string value into the desired type

path?

string

Optional path to limit the scope of synchronization to specific URL paths

replace?

boolean

Optional boolean to specify if history entries should be replaced (default: false)

serialize?

(value) => undefined | string

Optional function to serialize the value back into a string

Returns

<Target>(target): Target

Type Parameters

Target

Target extends Atom<T, [T]>

Parameters

target

Target

Returns

Target