Superglue

Variables¶

GRAFTING_ERROR¶

const GRAFTING_ERROR: "@@superglue/GRAFTING_ERROR" = '@@superglue/GRAFTING_ERROR'

GRAFTING_SUCCESS¶

const GRAFTING_SUCCESS: "@@superglue/GRAFTING_SUCCESS" = '@@superglue/GRAFTING_SUCCESS'

saveResponse¶

const saveResponse: ActionCreatorWithPreparedPayload\<[{ pageKey: string; page: SaveResponse; }], { pageKey: string; page: SaveResponse; }, "@@superglue/SAVE_RESPONSE", never, never>

Defined in: actions.ts:15

copyPage¶

const copyPage: ActionCreatorWithPayload\<{ from: string; to: string; }, string>

Defined in: actions.ts:61

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)

removePage¶

const removePage: ActionCreatorWithPayload\<{ pageKey: string; }, string>

Defined in: actions.ts:74

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

import { removePage } from '@thoughtbot/superglue'

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

beforeFetch¶

const beforeFetch: ActionCreatorWithPayload\<{ fetchArgs: FetchArgs; }, string>

Defined in: actions.ts:92

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) => {

beforeVisit¶

const beforeVisit: ActionCreatorWithPayload\<{ currentPageKey: string; fetchArgs: FetchArgs; }, string>

Defined in: actions.ts:110

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) => {

beforeRemote¶

const beforeRemote: ActionCreatorWithPayload\<{ currentPageKey: string; fetchArgs: FetchArgs; }, string>

Defined in: actions.ts:129

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) => {

receiveResponse¶

const receiveResponse: ActionCreatorWithPreparedPayload\<[{ pageKey: string; response: PageResponse; }], { pageKey: string; response: PageResponse; }, "@@superglue/RECEIVE_RESPONSE", never, never>

Defined in: actions.ts:176

rootReducer¶

const rootReducer: { superglue: (state: SuperglueState, action: Action) => SuperglueState; pages: (state: AllPages, action: Action) => AllPages; fragments: (state: AllFragments, action: Action) => AllFragments; }

Defined in: reducers/index.ts:290

Type declaration¶

Name	Type	Default value	Defined in
`superglue()`	(`state`: `SuperglueState`, `action`: `Action`) => `SuperglueState`	`superglueReducer`	reducers/index.ts:291
`pages()`	(`state`: `AllPages`, `action`: `Action`) => `AllPages`	`pageReducer`	reducers/index.ts:292
`fragments()`	(`state`: `AllFragments`, `action`: `Action`) => `AllFragments`	`fragmentReducer`	reducers/index.ts:293

Functions¶

saveAndProcessPage()¶

saveAndProcessPage(pageKey: string, page: PageResponse): SaveAndProcessPageThunk

Defined in: action_creators/index.ts:91

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`	`PageResponse`

Returns¶

SaveAndProcessPageThunk

useSetFragment()¶

useSetFragment(): {\<T>(fragmentRef: T, updater: (draft: Unproxy\<Unpack\<T>>) => void): void; \<T>(fragmentId: string, updater: (draft: T) => void): void; }

Defined in: hooks/useSetFragment.tsx:37

Hook for mutating fragments using Immer drafts.

Returns¶

\<T>(fragmentRef: T, updater: (draft: Unproxy\<Unpack\<T>>) => void): void

Updates a fragment using a FragmentRef object.

Type Parameters¶

Type Parameter
`T` extends `Fragment`\<`unknown`, `unknown`>

Parameters¶

Parameter	Type	Description
`fragmentRef`	`T`	Fragment reference object containing __id
`updater`	(`draft`: `Unproxy`\<`Unpack`\<`T`>>) => `void`	Immer draft function for mutating fragment data

Returns¶

void

\<T>(fragmentId: string, updater: (draft: T) => void): void

Updates a fragment using a fragment ID string.

Type Parameters¶

Type Parameter	Default type
`T`	`unknown`

Parameters¶

Parameter	Type	Description
`fragmentId`	`string`	The fragment ID string
`updater`	(`draft`: `T`) => `void`	Immer draft function for mutating fragment data

Returns¶

void

Example¶

const set = useSetFragment()

// Update via fragment reference
set(userRef, draft => {
  draft.name = "Updated Name"
  draft.email = "new@email.com"
})

// Update via fragment ID directly
set('user_123', draft => {
  draft.profile.bio = "Updated bio"
})

useStreamSource()¶

useStreamSource(channel: StreamSourceProps): { connected: boolean; subscription: null | Subscription\<Consumer>; }

Defined in: hooks/useStreamSource.tsx:172

Creates a subscription to an ActionCable channel for real-time streaming updates.

This hook manages the lifecycle of an ActionCable subscription, automatically connecting when the cable is available and cleaning up on unmount. Stream messages are processed through StreamActions to update the Redux store.

Typically used with channel configuration generated by the Rails helper stream_from_props helper in your props templates.

*

Parameters¶

Parameter	Type	Description
`channel`	`StreamSourceProps`	Channel configuration as string or ChannelNameWithParams object, typically generated by Rails `stream_from_props` helper

Returns¶

Object containing connection status and subscription instance

Name	Type	Description	Defined in
`connected`	`boolean`	Whether the ActionCable subscription is currently connected	hooks/useStreamSource.tsx:174
`subscription`	`null` \| `Subscription`\<`Consumer`>	The active ActionCable subscription instance, null if not connected	hooks/useStreamSource.tsx:176

Examples¶

Using the helper:

# app/views/chat_rooms/show.json.props
json.chatChannel stream_from_props("messages")

const content = useContent()
const { connected } = useStreamSource(content.chatChannel)

Basic channel subscription:

const { connected } = useStreamSource('ChatChannel')

Channel with parameters:

const { connected } = useStreamSource({
  channel: 'ChatChannel',
  room_id: roomId
})

Using connection status:

const { connected, subscription } = useStreamSource('NotificationsChannel')

return (
  <div>
    {connected ? 'Connected' : 'Connecting...'}
    {subscription && <span>Subscription active</span>}
  </div>
)

prepareStore()¶

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

Defined in: index.tsx:71

Parameters¶

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

Returns¶

void

setup()¶

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

Defined in: index.tsx:95

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; streamActions: StreamActions; }

Name	Type	Default value	Defined in
`visit`	`ApplicationVisit`	-	index.tsx:123
`remote`	`ApplicationRemote`	-	index.tsx:124
`nextHistory`	`History`	-	index.tsx:125
`initialPageKey`	`string`	-	index.tsx:126
`ujs`	`Handlers`	`handlers`	index.tsx:127
`streamActions`	`StreamActions`	-	index.tsx:128

Application()¶

Application(__namedParameters: ApplicationProps): Element

Defined in: index.tsx:139

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).