types
Last updated
Was this helpful?
Last updated
Was this helpful?
Re-exports
Re-exports
Re-exports
Re-exports
Re-exports
Re-exports
Properties
rsp
Response
json
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
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.
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.
path
string
A keypath indicates how to dig for the data and where to place the data.
successAction
string
a user defined action for Superglue to dispatch when auto deferement is successful
failAction
string
a user defined action for Superglue to dispatch when auto deferement failed
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
T
Properties
data
T
-
componentIdentifier
string
-
assets
string[]
-
csrfToken?
string
-
fragments
-
defers
-
slices
-
renderedAt
number
-
restoreStrategy
-
action
"graft"
-
path
string
Used by superglue to replace the data at that location.
A Fragment identifies a cross cutting concern, like a shared header or footer.
Properties
type
string
path
string
A Keypath specifying the location of the fragment
A read only state that contains meta information about the current page.
Properties
currentPageKey
string
search
Record<string, undefined | string>
The query string object of the current url.
csrfToken?
string
The Rails csrfToken that you can use for forms.
assets
string[]
The tracked asset digests.
The root state for a Superglue application. It occupies 2 keys in your app.
Type Parameters
T
Indexable
[name: string]: unknown
Properties
superglue
Contains readonly metadata about the current page
pages
Meta is passed to the Promise when visit or remote resolves and contains additional information for navigation.
Extended by
Properties
pageKey
string
page
redirected
boolean
Indicates if response was redirected
rsp
Response
The original response object
fetchArgs
The original args passed to fetch.
componentIdentifier
string
needsRefresh
boolean
true when assets locally are detected to be out of date
Meta is passed to the Promise when visit or remote resolves and contains additional information for navigation.
Extends
Properties
pageKey
string
page
redirected
boolean
Indicates if response was redirected
rsp
Response
The original response object
fetchArgs
The original args passed to fetch.
componentIdentifier
string
needsRefresh
boolean
true when assets locally are detected to be out of date
navigationAction
-
Properties
onClick
(event: MouseEvent<HTMLDivElement, MouseEvent>) => void
onSubmit
(event: FormEvent<HTMLDivElement>) => void
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
superglue
true
Is always true so superglue can differentiate pages that have superglue enabled or not
pageKey
string
posX
number
The scroll position X of the page
posY
number
The scroll position Y of the page
A variation of RequestInit except the headers must be a regular object
Extends
RequestInit
Properties
headers?
{}
A Headers object, an object literal, or an array of two-item arrays to set request's headers.
RequestInit.headers
You can also use this to build your own <Link> component.
Properties
navigateTo
-
visit
-
remote
-
pageKey
string
search
Record<string, undefined | string>
The current pageKey (current url) query params as an object.
Properties
history
History
-
visit
-
remote
-
mapping
Record<string, ComponentType<{}>>
-
initialPageKey
string
Parameters
initialState
A preconfigured intial state to pass to your store.
reducer
object
A preconfigured reducer
reducer.superglue
-
reducer.pages
-
Returns
Defined in
Parameters
navigatorRef
store
Returns
visit
remote
Defined in
Properties
initialPage
The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb template, e.g., index.html.erb
baseUrl
string
The base url prefixed to all calls made by visit and remote.
path
string
The path of the current page. It should equal to the location.pathname + location.search + location.hash
store
The exported store from store.js. If you used the generators it would contain slices for superglue, pages, and the flash.
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.
history?
History
An optional history object https://github.com/remix-run/history. If none is provided Superglue will create one for you.
navigatorRef
A ref object created from the Application component that will be passed to buildVisitAndRemote
Props for the Application component
Extends
ComponentPropsWithoutRef<"div">
Properties
initialPage
The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb template, e.g., index.html.erb
baseUrl
string
The base url prefixed to all calls made by visit and remote.
path
string
The path of the current page. It should equal to the location.pathname + location.search + location.hash
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.
mapping
Record<string, ComponentType<{}>>
A mapping between your page props and page component. This is setup for you in page_to_page_mapping.
history?
History
An optional history object https://github.com/remix-run/history. If none is provided Superglue will create one for you.
store
The exported store from store.js. If you used the generators it would contain slices for superglue, pages, and the flash.
PageKey:
string
A PageKey is a combination of a parsed URL's pathname + query string. No hash.
Example
Defined in
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.
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
NavigationAction:
"push"|"replace"|"none"
A NavigationAction is used to tell Superglue to history.push, history.replace or do nothing.
Defined in
ComponentIdentifier:
string
An identifier that Superglue will uses to determine which page component to render with your page response.
Defined in
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
Array access
Array with lookahead
Defined in
JSONPrimitive:
string|number|boolean|null|undefined
A JSON Primitive value
Defined in
JSONObject: {}
A JSON Object
Index Signature
Defined in
A JSON Object or an array of values
Defined in
A array of JSON key value objects or a JSON Object
Defined in
A primitive or a mappable object
Defined in
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
T
Type declaration
data
T
componentIdentifier
assets
string[]
csrfToken?
string
fragments
defers
slices
renderedAt
number
restoreStrategy
Defined in
A Page is a VisitResponse that's been saved to the store
Type declaration
savedAt
number
Type Parameters
T
Defined in
Defined in
The store where all page responses are stored indexed by PageKey. You are encouraged to mutate the Pages in this store.
Type Parameters
T
Defined in
Parameters
input
options
Returns
Defined in
Parameters
input
options
Returns
Defined in
Defined in
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
Parameters
{ ujsAttributePrefix, visit, remote, store, }
object
{ ujsAttributePrefix, visit, remote, store, }.ujsAttributePrefix
string
{ ujsAttributePrefix, visit, remote, store, }.visit
{ ujsAttributePrefix, visit, remote, store, }.remote
{ ujsAttributePrefix, visit, remote, store, }.store
Returns
Defined in
Defined in
Defined in
Defined in
Defined in
Passed to every page component and also available as part of a NavigationContext:
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
path
options
object
-
options.action
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
Re-exports
Re-exports
Re-exports
Re-exports
[]
[]
A user supplied string identifying a fragment. This is usually created using
The (url pathname + search) of the current page. This can be pass to .
<T>
Every that superglue recieves is stored here.
The URL of the response converted to a pageKey. Superglue uses this to persist the to store, when that happens.
<>
The of the page
The extracted from the response.
The URL of the response converted to a pageKey. Superglue uses this to persist the to store, when that happens.
.
<>
The of the page
.
.
.
.
The extracted from the response.
.
.
The . This can be used for navigation.
The page key in to restore from
Superglue comes with a Navigation component that provides a context with access to , and other useful tooling.
The pagekey that's being used to render the current page component. Useful when used in combination with to create requests that target the current page.
This is the navigation component that gets used by . The component takes a mapping of page components and swaps them when navigating and passes to all page components.
The that's to be used when first rendering. Used to determine the initial page component to show.
Provide this callback to 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: <>, reducer: {superglue: superglueReducer;pages: pageReducer; }):
Provide this callback to 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.
<>
(state: , action: Action) =>
(state: , action: Action) =>
Provide this callback to 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 . You may customize this functionality to your liking, e.g, adding a progress bar.
BuildVisitAndRemote(navigatorRef: RefObject<null | {navigateTo: ; }>, store: ): {visit: ;remote: ; }
Provide this callback to 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 . You may customize this functionality to your liking, e.g, adding a progress bar.
RefObject<null | {navigateTo: ; }>
{visit: ;remote: ; }
<>
RefObject<null | {navigateTo: ; }>
<>
revisitOnly - Ignore the cache and make a request for the latest page. If the response was 200, the would be none as we don't want to push into history. If the response was redirected, the would be set to replace.
[key: string]:
JSONMappable: [] |
JSONKeyable: [] |
JSONValue: |
VisitResponse<T>: {data: T;componentIdentifier: ;assets: string[];csrfToken: string;fragments: [];defers: [];slices: ;renderedAt: number;restoreStrategy: ; }
[]
[]
Page<T>: <T> & {savedAt: number; }
PageResponse: |
A PageResponse can be either a or a . Its meant to be implemented by the server and if you are using superglue_rails, the generators will handle both cases.
AllPages<T>: Record<, <T>>
VisitCreator: (input: string | , options: ) =>
VisitCreator is a Redux action creator that returns a thunk. Use this to build the function. Typically its already generated in application_visit.js
string |
RemoteCreator: (input: string | , options: ) =>
RemoteCreator is a Redux action creator that returns a thunk. Use this to build the function. Typically its already generated in application_visit.js
string |
Dispatch: ThunkDispatch<, undefined, Action>
SuperglueStore: EnhancedStore<, Action, Tuple<[StoreEnhancer<{dispatch: ; }>, StoreEnhancer]>>
UJSHandlers: ({ ujsAttributePrefix, visit, remote, store, }: {ujsAttributePrefix: string;visit: ;remote: ;store: ; }) =>
SaveAndProcessPageThunk: ThunkAction<Promise<void>, , undefined, Action>
MetaThunk: ThunkAction<Promise<>, , undefined, Action>
VisitMetaThunk: ThunkAction<Promise<>, , undefined, Action>
DefermentThunk: ThunkAction<Promise<void[]>, , undefined, Action>
NavigateTo: (path: , options: {action: ; }) => boolean
Manually navigate using pages that exists in the store and restores scroll position. navigateTo is what in your application_visit.js ultimately calls.