Superglue

Name	Type	Default value	Defined in
`superglue`	(`state`: `SuperglueState`, `action`: `Action`) => `SuperglueState`	superglueReducer	lib/reducers/index.ts:236
`pages`	(`state`: `AllPages`, `action`: `Action`) => `AllPages`	pageReducer	lib/reducers/index.ts:237

Defined in¶

lib/reducers/index.ts:235

Functions¶

saveAndProcessPage()¶

saveAndProcessPage(pageKey: string, page: VisitResponse | GraftResponse): SaveAndProcessPageThunk

Save and process a rendered view from PropsTemplate. This is the primitive function that visit and remote calls when it receives a page.

If you render a page outside the normal request response cycle, e.g, websocket, you can use this function to save the payload.

Parameters¶

Parameter	Type
`pageKey`	`string`
`page`	`VisitResponse` \| `GraftResponse`

Returns¶

SaveAndProcessPageThunk

Defined in¶

lib/action_creators/index.ts:74

saveResponse()¶

saveResponse(...args: [{pageKey: string;page: VisitResponse; }]): {}

Calling this redux#ActionCreator with Args will return an Action with a payload of type P and (depending on the PrepareAction method used) a meta- and error property of types M and E respectively.

Parameters¶

Parameter	Type
...`args`	[{`pageKey`: `string`;`page`: `VisitResponse`; }]

Returns¶

{}

Defined in¶

lib/actions.ts:15

updateFragments()¶

updateFragments(payload: {name: string;path: string;pageKey: string;value: JSONMappable;previousValue: JSONMappable; }): {}

A redux action called whenever a fragment is received from visit or updated using remote. Its a useful action to use for cross cutting concerns like a shared header or a shopping cart. For example:

import { updateFragments } from '@thoughtbot/superglue'

export const exampleSlice = createSlice({
 name: 'Example',
 initialState: {},
 extraReducers: (builder) => {
   builder.addCase(updateFragments, (state, action) => {
     // Update the slice using the latest and greatest.
     return action.value

Parameters¶

Parameter	Type
`payload`	`object`
`payload.name`	`string`
`payload.path`	`string`
`payload.pageKey`	`string`
`payload.value`	`JSONMappable`
`payload.previousValue`?	`JSONMappable`

Returns¶

{}

Defined in¶

lib/actions.ts:64

copyPage()¶

copyPage(payload: {from: string;to: string; }): {}

A redux action you can dispatch to copy a page from one pageKey to another. Its a very useful way to create optimistic updates with a URL change. For example:

import { copyPage, remote } from '@thoughtbot/superglue'

dispatch(copyPage({ from: originalKey, to: targetKey}))

... make edits to target page and finally

navigateTo(targetKey)

Parameters¶

Parameter	Type
`payload`	`object`
`payload.from`	`string`
`payload.to`	`string`

Returns¶

{}

Defined in¶

lib/actions.ts:86

removePage()¶

removePage(payload: {pageKey: string; }): {}

A redux action you can dispatch to remove a page from your store.

import { removePage } from '@thoughtbot/superglue'

dispatch(removePage({ pageKey: '/delete_me_please"}))

Parameters¶

Parameter	Type
`payload`	`object`
`payload.pageKey`	`string`

Returns¶

{}

Defined in¶

lib/actions.ts:99

beforeFetch()¶

beforeFetch(payload: {fetchArgs: FetchArgs; }): {}

A redux action called before a fetch takes place. It will fire in remote and visit. You can hook into this event in your redux slices like this:

import { beforeFetch } from '@thoughtbot/superglue'

export const exampleSlice = createSlice({
 name: 'Example',
 initialState: {},
 extraReducers: (builder) => {
   builder.addCase(beforeFetch, (state, action) => {

Parameters¶

Parameter	Type
`payload`	`object`
`payload.fetchArgs`	`FetchArgs`

Returns¶

{}

Defined in¶

lib/actions.ts:117

beforeVisit()¶

beforeVisit(payload: {currentPageKey: string;fetchArgs: FetchArgs; }): {}

A redux action called before a visit takes place. You can hook into this event in your redux slices like this:

import { beforeVisit } from '@thoughtbot/superglue'

export const exampleSlice = createSlice({
 name: 'Example',
 initialState: {},
 extraReducers: (builder) => {
   builder.addCase(beforeVisit, (state, action) => {

Parameters¶

Parameter	Type
`payload`	`object`
`payload.currentPageKey`	`string`
`payload.fetchArgs`	`FetchArgs`

Returns¶

{}

Defined in¶

lib/actions.ts:135

beforeRemote()¶

beforeRemote(payload: {currentPageKey: string;fetchArgs: FetchArgs; }): {}

A redux action called before remote takes place. You can hook into this event in your redux slices like this:

import { beforeRemote } from '@thoughtbot/superglue'

export const exampleSlice = createSlice({
 name: 'Example',
 initialState: {},
 extraReducers: (builder) => {
   builder.addCase(beforeRemote, (state, action) => {

Parameters¶

Parameter	Type
`payload`	`object`
`payload.currentPageKey`	`string`
`payload.fetchArgs`	`FetchArgs`

Returns¶

{}

Defined in¶

lib/actions.ts:154

prepareStore()¶

prepareStore(store: SuperglueStore, initialPage: VisitResponse, path: string): void

Parameters¶

Parameter	Type
`store`	`SuperglueStore`
`initialPage`	`VisitResponse`
`path`	`string`

Returns¶

void

Defined in¶

lib/index.tsx:51

setup()¶

setup(__namedParameters: SetupProps): {visit: ApplicationVisit;remote: ApplicationRemote;nextHistory: History;initialPageKey: string;ujs: handlers; }

This is the setup function that the Application calls. Use this function if you like to build your own Application component.

Parameters¶

Parameter	Type
`__namedParameters`	`SetupProps`

Returns¶

{visit: ApplicationVisit;remote: ApplicationRemote;nextHistory: History;initialPageKey: string;ujs: handlers; }

Name	Type	Default value	Defined in
`visit`	`ApplicationVisit`	-	lib/index.tsx:99
`remote`	`ApplicationRemote`	-	lib/index.tsx:100
`nextHistory`	`History`	-	lib/index.tsx:101
`initialPageKey`	`string`	-	lib/index.tsx:102
`ujs`	`Handlers`	handlers	lib/index.tsx:103

Defined in¶

lib/index.tsx:73

Application()¶

Application(__namedParameters: ApplicationProps): Element

The entry point to your superglue application. It sets up the redux Provider, redux state and the Navigation component.

This is a simple component, you can override this by copying the source code and use the exported methods used by this component (start and ujsHandler).

Parameters¶

Parameter	Type
`__namedParameters`	`ApplicationProps`

Returns¶

Element

Defined in¶

lib/index.tsx:114

getIn()¶

getIn(node: JSONMappable, path: string): JSONValue

Retrieves data from a JSON object using a Keypath

Parameters¶

Parameter	Type	Description
`node`	`JSONMappable`
`path`	`string`

Returns¶

JSONValue

Defined in¶

lib/utils/immutability.ts:22

urlToPageKey()¶

urlToPageKey(url: string): PageKey

Converts a url to a PageKey.

Parameters¶

Parameter	Type	Description
`url`	`string`

Returns¶

PageKey

Defined in¶

lib/utils/url.ts:64

Superglue

References¶

useSuperglue¶

useContent¶

NavigationProvider¶

NavigationContext¶

superglueReducer¶

pageReducer¶

FetchArgs¶

GraftingSuccessAction¶

GraftingErrorAction¶

PageKey¶

RestoreStrategy¶

NavigationAction¶

ComponentIdentifier¶

Keypath¶

JSONPrimitive¶

JSONObject¶

JSONMappable¶

JSONKeyable¶

JSONValue¶

ParsedResponse¶

Defer¶

VisitResponse¶

Page¶

GraftResponse¶

PageResponse¶

Fragment¶

AllPages¶

SuperglueState¶

RootState¶

Meta¶

VisitMeta¶

VisitCreator¶

RemoteCreator¶

Dispatch¶

SuperglueStore¶

Handlers¶

UJSHandlers¶

HistoryState¶

SaveAndProcessPageThunk¶

MetaThunk¶

VisitMetaThunk¶

DefermentThunk¶

BasicRequestInit¶

NavigateTo¶

NavigationContextProps¶

NavigationProviderProps¶

BuildStore¶

BuildVisitAndRemote¶

SetupProps¶

ApplicationProps¶

Visit¶

VisitProps¶

Remote¶

RemoteProps¶

BeforeSave¶

ApplicationRemote¶

ApplicationVisit¶

Variables¶

GRAFTING_ERROR¶

Defined in¶

GRAFTING_SUCCESS¶

Defined in¶

rootReducer¶

Type declaration¶

Defined in¶

Functions¶

saveAndProcessPage()¶

Parameters¶

Returns¶

Defined in¶

saveResponse()¶

Parameters¶

Returns¶

Defined in¶

updateFragments()¶

Parameters¶

Returns¶

Defined in¶