> For the complete documentation index, see [llms.txt](https://jho406.gitbook.io/breezy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jho406.gitbook.io/breezy/docs/reference/types.md). # types ### References #### FetchArgs Re-exports [FetchArgs](/breezy/docs/reference/types.actions.md#fetchargs) #### GraftingSuccessAction Re-exports [GraftingSuccessAction](/breezy/docs/reference/types.actions.md#graftingsuccessaction) #### GraftingErrorAction Re-exports [GraftingErrorAction](/breezy/docs/reference/types.actions.md#graftingerroraction) #### Visit Re-exports [Visit](/breezy/docs/reference/types.requests.md#visit) #### VisitProps Re-exports [VisitProps](/breezy/docs/reference/types.requests.md#visitprops) #### Remote Re-exports [Remote](/breezy/docs/reference/types.requests.md#remote) #### RemoteProps Re-exports [RemoteProps](/breezy/docs/reference/types.requests.md#remoteprops) #### BeforeSave Re-exports [BeforeSave](/breezy/docs/reference/types.requests.md#beforesave-2) #### ApplicationRemote Re-exports [ApplicationRemote](/breezy/docs/reference/types.requests.md#applicationremote) #### ApplicationVisit Re-exports [ApplicationVisit](/breezy/docs/reference/types.requests.md#applicationvisit) ### Interfaces #### ParsedResponse **Properties** | Property | Type | Defined in | | -------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `rsp` | `Response` | [lib/types/index.ts:111](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L111) | | `json` | [`PageResponse`](#pageresponse) | [lib/types/index.ts:112](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L112) | *** #### Defer Defer is a node in the page response thats been intentionally filled with empty or placeholder data for the purposes of fetching it later. You would typically use it with props\_template for parts of a page that you know would be slower to load. **Properties** | Property | Type | Description | Defined in | | --------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `url` | `string` | A url with props\_at keypath in the query parameter to indicate how to dig for the data, and where to place the data. | [lib/types/index.ts:137](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L137) | | `type` | `"auto"` \| `"manual"` | When set to `auto` Superglue will automatically make the request using the `url`. When set to `manual`, Superglue does nothing, and you would need to manually use `remote` with the `url` to fetch the missing data. | [lib/types/index.ts:138](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L138) | | `path` | `string` | A keypath indicates how to dig for the data and where to place the data. | [lib/types/index.ts:139](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L139) | | `successAction` | `string` | a user defined action for Superglue to dispatch when auto deferement is successful | [lib/types/index.ts:140](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L140) | | `failAction` | `string` | a user defined action for Superglue to dispatch when auto deferement failed | [lib/types/index.ts:141](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L141) | *** #### GraftResponse\ The GraftResponse is a protocol, a shape that is responsible for partial updates using props\_template's digging functionality in Superglue. Its meant to be implemented by the server and if you are using superglue\_rails, the generators would have generated a props\_template layout and view that would shape the graft responses for you. **Type Parameters** | Type Parameter | Default type | | -------------- | ------------------------------- | | `T` | [`JSONMappable`](#jsonmappable) | **Properties** | Property | Type | Description | Defined in | | --------------------- | --------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `data` | `T` | - | [lib/types/index.ts:151](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L151) | | `componentIdentifier` | `string` | - | [lib/types/index.ts:152](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L152) | | `assets` | `string`\[] | - | [lib/types/index.ts:153](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L153) | | `csrfToken?` | `string` | - | [lib/types/index.ts:154](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L154) | | `fragments` | [`Fragment`](#fragment)\[] | - | [lib/types/index.ts:155](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L155) | | `defers` | [`Defer`](#defer)\[] | - | [lib/types/index.ts:156](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L156) | | `slices` | [`JSONObject`](#jsonobject) | - | [lib/types/index.ts:157](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L157) | | `renderedAt` | `number` | - | [lib/types/index.ts:159](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L159) | | `restoreStrategy` | [`RestoreStrategy`](#restorestrategy-1) | - | [lib/types/index.ts:160](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L160) | | `action` | `"graft"` | - | [lib/types/index.ts:182](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L182) | | `path` | `string` | Used by superglue to replace the data at that location. | [lib/types/index.ts:183](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L183) | *** #### Fragment A Fragment identifies a cross cutting concern, like a shared header or footer. **Properties** | Property | Type | Description | Defined in | | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `type` | `string` | A user supplied string identifying a fragment. This is usually created using [props\_template](https://github.com/thoughtbot/props_template?tab=readme-ov-file#jsonfragments) | [lib/types/index.ts:201](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L201) | | `path` | `string` | A Keypath specifying the location of the fragment | [lib/types/index.ts:202](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L202) | *** #### SuperglueState A read only state that contains meta information about the current page. **Properties** | Property | Type | Description | Defined in | | ---------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `currentPageKey` | `string` | The [PageKey](#pagekey-4) (url pathname + search) of the current page. This can be pass to [Remote](/breezy/docs/reference/types.requests.md#remote). | [lib/types/index.ts:217](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L217) | | `search` | `Record`<`string`, `undefined` \| `string`> | The query string object of the current url. | [lib/types/index.ts:219](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L219) | | `csrfToken?` | `string` | The Rails csrfToken that you can use for forms. | [lib/types/index.ts:221](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L221) | | `assets` | `string`\[] | The tracked asset digests. | [lib/types/index.ts:223](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L223) | *** #### RootState\ The root state for a Superglue application. It occupies 2 keys in your app. **Type Parameters** | Type Parameter | Default type | | -------------- | ------------------------------- | | `T` | [`JSONMappable`](#jsonmappable) | **Indexable** \[`name`: `string`]: `unknown` **Properties** | Property | Type | Description | Defined in | | ----------- | ----------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `superglue` | [`SuperglueState`](#supergluestate) | Contains readonly metadata about the current page | [lib/types/index.ts:232](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L232) | | `pages` | [`AllPages`](#allpagest)<`T`> | Every [PageResponse](#pageresponse) that superglue receives is stored here. | [lib/types/index.ts:234](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L234) | *** #### Meta Meta is passed to the Promise when visit or remote resolves and contains additional information for navigation. **Extended by** * [`VisitMeta`](#visitmeta) **Properties** | Property | Type | Description | Defined in | | --------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `pageKey` | `string` | The URL of the response converted to a pageKey. Superglue uses this to persist the [VisitResponse](#visitresponset) to store, when that happens. | [lib/types/index.ts:248](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L248) | | `page` | [`VisitResponse`](#visitresponset)<[`JSONMappable`](#jsonmappable)> | The [VisitResponse](#visitresponset) of the page | [lib/types/index.ts:250](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L250) | | `redirected` | `boolean` | Indicates if response was redirected | [lib/types/index.ts:252](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L252) | | `rsp` | `Response` | The original response object | [lib/types/index.ts:254](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L254) | | `fetchArgs` | [`FetchArgs`](/breezy/docs/reference/types.actions.md#fetchargs) | The original args passed to fetch. | [lib/types/index.ts:256](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L256) | | `componentIdentifier` | `string` | The [ComponentIdentifier](#componentidentifier-3) extracted from the response. | [lib/types/index.ts:258](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L258) | | `needsRefresh` | `boolean` | `true` when assets locally are detected to be out of date | [lib/types/index.ts:260](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L260) | *** #### VisitMeta Meta is passed to the Promise when visit or remote resolves and contains additional information for navigation. **Extends** * [`Meta`](#meta) **Properties** | Property | Type | Description | Inherited from | Defined in | | --------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `pageKey` | `string` | The URL of the response converted to a pageKey. Superglue uses this to persist the [VisitResponse](#visitresponset) to store, when that happens. | [`Meta`](#meta).[`pageKey`](#pagekey) | [lib/types/index.ts:248](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L248) | | `page` | [`VisitResponse`](#visitresponset)<[`JSONMappable`](#jsonmappable)> | The [VisitResponse](#visitresponset) of the page | [`Meta`](#meta).[`page`](#page) | [lib/types/index.ts:250](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L250) | | `redirected` | `boolean` | Indicates if response was redirected | [`Meta`](#meta).[`redirected`](#redirected) | [lib/types/index.ts:252](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L252) | | `rsp` | `Response` | The original response object | [`Meta`](#meta).[`rsp`](#rsp-1) | [lib/types/index.ts:254](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L254) | | `fetchArgs` | [`FetchArgs`](/breezy/docs/reference/types.actions.md#fetchargs) | The original args passed to fetch. | [`Meta`](#meta).[`fetchArgs`](#fetchargs-1) | [lib/types/index.ts:256](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L256) | | `componentIdentifier` | `string` | The [ComponentIdentifier](#componentidentifier-3) extracted from the response. | [`Meta`](#meta).[`componentIdentifier`](#componentidentifier-1) | [lib/types/index.ts:258](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L258) | | `needsRefresh` | `boolean` | `true` when assets locally are detected to be out of date | [`Meta`](#meta).[`needsRefresh`](#needsrefresh) | [lib/types/index.ts:260](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L260) | | `navigationAction` | [`NavigationAction`](#navigationaction-1) | The [NavigationAction](#navigationaction-1). This can be used for navigation. | - | [lib/types/index.ts:265](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L265) | *** #### Handlers **Properties** | Property | Type | Defined in | | ---------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `onClick` | (`event`: `MouseEvent`<`HTMLDivElement`, `MouseEvent`>) => `void` | [lib/types/index.ts:309](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L309) | | `onSubmit` | (`event`: `FormEvent`<`HTMLDivElement`>) => `void` | [lib/types/index.ts:310](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L310) | *** #### HistoryState The state that is saved to history.state. Superglue stores information about the current page so that it can restore the page state when navigating back **Properties** | Property | Type | Description | Defined in | | ----------- | -------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `superglue` | `true` | Is always `true` so superglue can differentiate pages that have superglue enabled or not | [lib/types/index.ts:332](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L332) | | `pageKey` | `string` | The page key in [SuperglueState](#supergluestate) to restore from | [lib/types/index.ts:334](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L334) | | `posX` | `number` | The scroll position X of the page | [lib/types/index.ts:336](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L336) | | `posY` | `number` | The scroll position Y of the page | [lib/types/index.ts:338](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L338) | *** #### BasicRequestInit A variation of RequestInit except the headers must be a regular object **Extends** * `RequestInit` **Properties** | Property | Type | Description | Overrides | Defined in | | ---------- | ---- | --------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `headers?` | {} | A Headers object, an object literal, or an array of two-item arrays to set request's headers. | `RequestInit.headers` | [lib/types/index.ts:365](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L365) | *** #### NavigationContextProps Superglue comes with a Navigation component that provides a context with access to [Visit](/breezy/docs/reference/types.requests.md#visit), [Remote](/breezy/docs/reference/types.requests.md#remote) and other useful tooling. You can also use this to build your own `` component. **Properties** | Property | Type | Description | Defined in | | ------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `navigateTo` | [`NavigateTo`](#navigateto-1) | - | [lib/types/index.ts:414](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L414) | | `visit` | [`ApplicationVisit`](/breezy/docs/reference/types.requests.md#applicationvisit) | - | [lib/types/index.ts:415](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L415) | | `remote` | [`ApplicationRemote`](/breezy/docs/reference/types.requests.md#applicationremote) | - | [lib/types/index.ts:416](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L416) | | `pageKey` | `string` | The pagekey that's being used to render the current page component. Useful when used in combination with [Remote](/breezy/docs/reference/types.requests.md#remote) to create requests that target the current page. | [lib/types/index.ts:417](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L417) | | `search` | `Record`<`string`, `undefined` \| `string`> | The current pageKey (current url) query params as an object. | [lib/types/index.ts:418](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L418) | *** #### NavigationProviderProps This is the navigation component that gets used by [ApplicationProps](#applicationprops). The component takes a mapping of page components and swaps them when navigating and passes [NavigateTo](#navigateto-1) to all page components. **Properties** | Property | Type | Description | Defined in | | ---------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `history` | `History` | - | [lib/types/index.ts:431](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L431) | | `visit` | [`ApplicationVisit`](/breezy/docs/reference/types.requests.md#applicationvisit) | - | [lib/types/index.ts:432](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L432) | | `remote` | [`ApplicationRemote`](/breezy/docs/reference/types.requests.md#applicationremote) | - | [lib/types/index.ts:433](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L433) | | `mapping` | `Record`<`string`, `ComponentType`<{}>> | - | [lib/types/index.ts:434](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L434) | | `initialPageKey` | `string` | The [PageKey](#pagekey-4) that's to be used when first rendering. Used to determine the initial page component to show. | [lib/types/index.ts:435](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L435) | *** #### BuildStore() Provide this callback to [ApplicationProps](#applicationprops) returning a Redux store for Superglue to use. This would be setup and generated for you in `store.js`. We recommend using using Redux toolkit's `configureStore` to build the store. > **BuildStore**(`initialState`: [`RootState`](#rootstatet)<[`JSONMappable`](#jsonmappable)>, `reducer`: {`superglue`: `superglueReducer`;`pages`: `pageReducer`; }): [`SuperglueStore`](#supergluestore) Provide this callback to [ApplicationProps](#applicationprops) returning a Redux store for Superglue to use. This would be setup and generated for you in `store.js`. We recommend using using Redux toolkit's `configureStore` to build the store. **Parameters** | Parameter | Type | Description | | ------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | | `initialState` | [`RootState`](#rootstatet)<[`JSONMappable`](#jsonmappable)> | A preconfigured intial state to pass to your store. | | `reducer` | `object` | A preconfigured reducer | | `reducer.superglue` | (`state`: [`SuperglueState`](#supergluestate), `action`: `Action`) => [`SuperglueState`](#supergluestate) | - | | `reducer.pages` | (`state`: [`AllPages`](#allpagest), `action`: `Action`) => [`AllPages`](#allpagest) | - | **Returns** [`SuperglueStore`](#supergluestore) **Defined in** [lib/types/index.ts:447](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L447) *** #### BuildVisitAndRemote() Provide this callback to [ApplicationProps](#applicationprops) returning a visit and remote function. These functions will be used by Superglue to power its UJS attributes and passed to your page components and [NavigationContextProps](#navigationcontextprops). You may customize this functionality to your liking, e.g, adding a progress bar. > **BuildVisitAndRemote**(`navigatorRef`: `RefObject`<`null` | {`navigateTo`: [`NavigateTo`](#navigateto-1); }>, `store`: [`SuperglueStore`](#supergluestore)): {`visit`: [`ApplicationVisit`](/breezy/docs/reference/types.requests.md#applicationvisit);`remote`: [`ApplicationRemote`](/breezy/docs/reference/types.requests.md#applicationremote); } Provide this callback to [ApplicationProps](#applicationprops) returning a visit and remote function. These functions will be used by Superglue to power its UJS attributes and passed to your page components and [NavigationContextProps](#navigationcontextprops). You may customize this functionality to your liking, e.g, adding a progress bar. **Parameters** | Parameter | Type | Description | | -------------- | ---------------------------------------------------------------------- | ----------- | | `navigatorRef` | `RefObject`<`null` \| {`navigateTo`: [`NavigateTo`](#navigateto-1); }> | | | `store` | [`SuperglueStore`](#supergluestore) | | **Returns** {`visit`: [`ApplicationVisit`](/breezy/docs/reference/types.requests.md#applicationvisit);`remote`: [`ApplicationRemote`](/breezy/docs/reference/types.requests.md#applicationremote); } | Name | Type | Defined in | | -------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `visit` | [`ApplicationVisit`](/breezy/docs/reference/types.requests.md#applicationvisit) | [lib/types/index.ts:467](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L467) | | `remote` | [`ApplicationRemote`](/breezy/docs/reference/types.requests.md#applicationremote) | [lib/types/index.ts:468](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L468) | **Defined in** [lib/types/index.ts:463](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L463) *** #### SetupProps **Properties** | Property | Type | Description | Defined in | | --------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `initialPage` | [`VisitResponse`](#visitresponset)<[`JSONMappable`](#jsonmappable)> | The global var SUPERGLUE\_INITIAL\_PAGE\_STATE is set by your erb template, e.g., index.html.erb | [lib/types/index.ts:477](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L477) | | `baseUrl` | `string` | The base url prefixed to all calls made by `visit` and `remote`. | [lib/types/index.ts:482](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L482) | | `path` | `string` | The path of the current page. It should equal to the `location.pathname` + `location.search` + `location.hash` | [lib/types/index.ts:487](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L487) | | `store` | [`SuperglueStore`](#supergluestore) | The exported store from store.js. If you used the generators it would contain slices for superglue, pages, and the flash. | [lib/types/index.ts:492](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L492) | | `buildVisitAndRemote` | [`BuildVisitAndRemote`](#buildvisitandremote) | A factory function that will return a `visit` and `remote` function. All of Superglue and UJS will use these functions. You should customize the function, for example, to add a progress bar. | [lib/types/index.ts:499](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L499) | | `history?` | `History` | An optional history object . If none is provided Superglue will create one for you. | [lib/types/index.ts:504](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L504) | | `navigatorRef` | `RefObject`<`null` \| {`navigateTo`: [`NavigateTo`](#navigateto-1); }> | A ref object created from the Application component that will be passed to buildVisitAndRemote | [lib/types/index.ts:508](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L508) | *** #### ApplicationProps Props for the `Application` component **Extends** * `ComponentPropsWithoutRef`<`"div"`> **Properties** | Property | Type | Description | Defined in | | --------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `initialPage` | [`VisitResponse`](#visitresponset)<[`JSONMappable`](#jsonmappable)> | The global var SUPERGLUE\_INITIAL\_PAGE\_STATE is set by your erb template, e.g., index.html.erb | [lib/types/index.ts:522](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L522) | | `baseUrl` | `string` | The base url prefixed to all calls made by `visit` and `remote`. | [lib/types/index.ts:527](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L527) | | `path` | `string` | The path of the current page. It should equal to the `location.pathname` + `location.search` + `location.hash` | [lib/types/index.ts:532](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L532) | | `buildVisitAndRemote` | [`BuildVisitAndRemote`](#buildvisitandremote) | A factory function that will return a `visit` and `remote` function. All of Superglue and UJS will use these functions. You should customize the function, for example, to add a progress bar. | [lib/types/index.ts:539](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L539) | | `mapping` | `Record`<`string`, `ComponentType`<{}>> | A mapping between your page props and page component. This is setup for you in page\_to\_page\_mapping. | [lib/types/index.ts:544](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L544) | | `history?` | `History` | An optional history object . If none is provided Superglue will create one for you. | [lib/types/index.ts:549](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L549) | | `store` | [`SuperglueStore`](#supergluestore) | The exported store from store.js. If you used the generators it would contain slices for superglue, pages, and the flash. | [lib/types/index.ts:554](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L554) | ### Type Aliases #### PageKey > **PageKey**: `string` A PageKey is a combination of a parsed URL's pathname + query string. No hash. * **Example** ```ts /posts?foobar=123 ``` **Defined in** [lib/types/index.ts:22](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L22) *** #### RestoreStrategy > **RestoreStrategy**: `"fromCacheOnly"` | `"revisitOnly"` | `"fromCacheAndRevisitInBackground"` Defines the behavior when navigating to a page that is already stored on the client. For example, when navigating back. When the page already exists in the store: * `fromCacheOnly` - Use the cached page that exists on the store, only. * `revisitOnly` - Ignore the cache and make a request for the latest page. If the response was 200, the [NavigationAction](#navigationaction-1) would be `none` as we don't want to push into history. If the response was redirected, the [NavigationAction](#navigationaction-1) would be set to `replace`. * `fromCacheAndRevisitInBackground` - Use the cache version of the page so superglue can optimistically navigate to it, then make an additional request for the latest version. **Defined in** [lib/types/index.ts:38](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L38) *** #### NavigationAction > **NavigationAction**: `"push"` | `"replace"` | `"none"` A NavigationAction is used to tell Superglue to history.push, history.replace or do nothing. **Defined in** [lib/types/index.ts:47](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L47) *** #### ComponentIdentifier > **ComponentIdentifier**: `string` An identifier that Superglue will uses to determine which page component to render with your page response. **Defined in** [lib/types/index.ts:53](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L53) *** #### Keypath > **Keypath**: `string` A keypath is a string representing the location of a piece of data. Superglue uses the keypath to dig for or update data. **Examples** Object access ``` data.header.avatar ``` Array access ``` data.body.posts.0.title ``` Array with lookahead ``` data.body.posts.post_id=foobar.title ``` **Defined in** [lib/types/index.ts:77](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L77) *** #### JSONPrimitive > **JSONPrimitive**: `string` | `number` | `boolean` | `null` | `undefined` A JSON Primitive value **Defined in** [lib/types/index.ts:84](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L84) *** #### JSONObject > **JSONObject**: {} A JSON Object **Index Signature** \[`key`: `string`]: [`JSONValue`](#jsonvalue) **Defined in** [lib/types/index.ts:89](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L89) *** #### JSONMappable > **JSONMappable**: [`JSONValue`](#jsonvalue)\[] | [`JSONObject`](#jsonobject) A JSON Object or an array of values **Defined in** [lib/types/index.ts:96](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L96) *** #### JSONKeyable > **JSONKeyable**: [`JSONObject`](#jsonobject)\[] | [`JSONObject`](#jsonobject) A array of JSON key value objects or a JSON Object **Defined in** [lib/types/index.ts:101](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L101) *** #### JSONValue > **JSONValue**: [`JSONPrimitive`](#jsonprimitive) | [`JSONMappable`](#jsonmappable) A primitive or a mappable object **Defined in** [lib/types/index.ts:106](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L106) *** #### VisitResponse\ > **VisitResponse**<`T`>: {`data`: `T`;`componentIdentifier`: [`ComponentIdentifier`](#componentidentifier-3);`assets`: `string`\[];`csrfToken`: `string`;`fragments`: [`Fragment`](#fragment)\[];`defers`: [`Defer`](#defer)\[];`slices`: [`JSONObject`](#jsonobject);`renderedAt`: `number`;`restoreStrategy`: [`RestoreStrategy`](#restorestrategy-1); } The VisitResponse is a protocol, a shape that is responsible for full page visits in Superglue. Its meant to be implemented by the server and if you are using superglue\_rails, the generators would have generated a props\_template layout and view that would shape the visit responses for you. **Type Parameters** | Type Parameter | Default type | | -------------- | ------------------------------- | | `T` | [`JSONMappable`](#jsonmappable) | **Type declaration** | Name | Type | Defined in | | --------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `data` | `T` | [lib/types/index.ts:151](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L151) | | `componentIdentifier` | [`ComponentIdentifier`](#componentidentifier-3) | [lib/types/index.ts:152](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L152) | | `assets` | `string`\[] | [lib/types/index.ts:153](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L153) | | `csrfToken`? | `string` | [lib/types/index.ts:154](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L154) | | `fragments` | [`Fragment`](#fragment)\[] | [lib/types/index.ts:155](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L155) | | `defers` | [`Defer`](#defer)\[] | [lib/types/index.ts:156](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L156) | | `slices` | [`JSONObject`](#jsonobject) | [lib/types/index.ts:157](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L157) | | `renderedAt` | `number` | [lib/types/index.ts:159](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L159) | | `restoreStrategy` | [`RestoreStrategy`](#restorestrategy-1) | [lib/types/index.ts:160](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L160) | **Defined in** [lib/types/index.ts:150](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L150) *** #### Page\ > **Page**<`T`>: [`VisitResponse`](#visitresponset)<`T`> & {`savedAt`: `number`; } A Page is a VisitResponse that's been saved to the store **Type declaration** | Name | Type | Defined in | | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `savedAt` | `number` | [lib/types/index.ts:167](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L167) | **Type Parameters** | Type Parameter | Default type | | -------------- | ------------------------------- | | `T` | [`JSONMappable`](#jsonmappable) | **Defined in** [lib/types/index.ts:166](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L166) *** #### PageResponse > **PageResponse**: [`GraftResponse`](#graftresponset) | [`VisitResponse`](#visitresponset) A PageResponse can be either a [GraftResponse](#graftresponset) or a [VisitResponse](#visitresponset). Its meant to be implemented by the server and if you are using superglue\_rails, the generators will handle both cases. **Defined in** [lib/types/index.ts:191](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L191) *** #### AllPages\ > **AllPages**<`T`>: `Record`<[`PageKey`](#pagekey-4), [`Page`](#paget)<`T`>> The store where all page responses are stored indexed by PageKey. You are encouraged to mutate the Pages in this store. **Type Parameters** | Type Parameter | Default type | | -------------- | ------------------------------- | | `T` | [`JSONMappable`](#jsonmappable) | **Defined in** [lib/types/index.ts:209](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L209) *** #### VisitCreator() > **VisitCreator**: (`input`: `string` | [`PageKey`](#pagekey-4), `options`: [`VisitProps`](/breezy/docs/reference/types.requests.md#visitprops)) => [`VisitMetaThunk`](#visitmetathunk) VisitCreator is a Redux action creator that returns a thunk. Use this to build the [Visit](/breezy/docs/reference/types.requests.md#visit) function. Typically its already generated in `application_visit.js` **Parameters** | Parameter | Type | | --------- | ------------------------------------------------------------------- | | `input` | `string` \| [`PageKey`](#pagekey-4) | | `options` | [`VisitProps`](/breezy/docs/reference/types.requests.md#visitprops) | **Returns** [`VisitMetaThunk`](#visitmetathunk) **Defined in** [lib/types/index.ts:274](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L274) *** #### RemoteCreator() > **RemoteCreator**: (`input`: `string` | [`PageKey`](#pagekey-4), `options`: [`RemoteProps`](/breezy/docs/reference/types.requests.md#remoteprops)) => [`MetaThunk`](#metathunk) RemoteCreator is a Redux action creator that returns a thunk. Use this to build the [Remote](/breezy/docs/reference/types.requests.md#remote) function. Typically its already generated in `application_visit.js` **Parameters** | Parameter | Type | | --------- | --------------------------------------------------------------------- | | `input` | `string` \| [`PageKey`](#pagekey-4) | | `options` | [`RemoteProps`](/breezy/docs/reference/types.requests.md#remoteprops) | **Returns** [`MetaThunk`](#metathunk) **Defined in** [lib/types/index.ts:283](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L283) *** #### Dispatch > **Dispatch**: `ThunkDispatch`<[`RootState`](#rootstatet), `undefined`, `Action`> **Defined in** [lib/types/index.ts:288](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L288) *** #### SuperglueStore > **SuperglueStore**: `EnhancedStore`<[`RootState`](#rootstatet), `Action`, `Tuple`<\[`StoreEnhancer`<{`dispatch`: [`Dispatch`](#dispatch); }>, `StoreEnhancer`]>> A Store created with Redux Toolkit's `configureStore` setup with reducers from Superglue. If you are using superglue\_rails this would have been generated for you in `store.js` and setup correctly in application.js **Defined in** [lib/types/index.ts:295](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L295) *** #### UJSHandlers() > **UJSHandlers**: (`{ ujsAttributePrefix, visit, remote, store, }`: {`ujsAttributePrefix`: `string`;`visit`: [`ApplicationVisit`](/breezy/docs/reference/types.requests.md#applicationvisit);`remote`: [`ApplicationRemote`](/breezy/docs/reference/types.requests.md#applicationremote);`store`: [`SuperglueStore`](#supergluestore); }) => [`Handlers`](#handlers) **Parameters** | Parameter | Type | | ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | | `{ ujsAttributePrefix, visit, remote, store, }` | `object` | | `{ ujsAttributePrefix, visit, remote, store, }.ujsAttributePrefix` | `string` | | `{ ujsAttributePrefix, visit, remote, store, }.visit` | [`ApplicationVisit`](/breezy/docs/reference/types.requests.md#applicationvisit) | | `{ ujsAttributePrefix, visit, remote, store, }.remote` | [`ApplicationRemote`](/breezy/docs/reference/types.requests.md#applicationremote) | | `{ ujsAttributePrefix, visit, remote, store, }.store` | [`SuperglueStore`](#supergluestore) | **Returns** [`Handlers`](#handlers) **Defined in** [lib/types/index.ts:313](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L313) *** #### SaveAndProcessPageThunk > **SaveAndProcessPageThunk**: `ThunkAction`<`Promise`<`void`>, [`RootState`](#rootstatet), `undefined`, `Action`> **Defined in** [lib/types/index.ts:341](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L341) *** #### MetaThunk > **MetaThunk**: `ThunkAction`<`Promise`<[`Meta`](#meta)>, [`RootState`](#rootstatet), `undefined`, `Action`> **Defined in** [lib/types/index.ts:348](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L348) *** #### VisitMetaThunk > **VisitMetaThunk**: `ThunkAction`<`Promise`<[`VisitMeta`](#visitmeta)>, [`RootState`](#rootstatet), `undefined`, `Action`> **Defined in** [lib/types/index.ts:349](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L349) *** #### DefermentThunk > **DefermentThunk**: `ThunkAction`<`Promise`<`void`\[]>, [`RootState`](#rootstatet), `undefined`, `Action`> **Defined in** [lib/types/index.ts:356](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L356) *** #### NavigateTo() > **NavigateTo**: (`path`: [`Keypath`](#keypath), `options`: {`action`: [`NavigationAction`](#navigationaction-1); }) => `boolean` Passed to every page component and also available as part of a NavigationContext: ```js import { NavigationContext } from '@thoughtbot/superglue'; const { navigateTo } = useContext(NavigationContext) ``` Manually navigate using pages that exists in the store and restores scroll position. `navigateTo` is what [Visit](/breezy/docs/reference/types.requests.md#visit) in your `application_visit.js` ultimately calls. If there is an existing page in your store `navigateTo` will restore the props, render the correct component, and return `true`. Otherwise, it will return `false`. This is useful if you want to restore an existing page before making a call to `visit` or `remote`. **Parameters** | Parameter | Type | Description | | ---------------- | ----------------------------------------- | --------------------------------------------------------- | | `path` | [`Keypath`](#keypath) | | | `options` | `object` | - | | `options.action` | [`NavigationAction`](#navigationaction-1) | when `none`, `navigateTo` will immediately return `false` | **Returns** `boolean` `true` if the navigation was a success, `false` if the page was not found in the store. **Defined in** [lib/types/index.ts:394](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L394)