diff --git a/docs/configuration.md b/docs/configuration.md index b8d24266..d4ef38ae 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -1,11 +1,10 @@ You've installed Superglue and now you're ready to configure your app. -Chances are, the first thing you'll want to add a progress bar to your app. ## `application_visit.js` !!! tip - If you want a progress bar, this is likely the first thing you'll - want to configure after installation. + If you want a [progress bar], this is the first thing you'll want to + configure after installation. This file contains the factory that builds the [remote] and [visit] function that will be passed to your page components and used by the @@ -28,8 +27,7 @@ when the internet is down. Stop by the [tutorial] to learn how to work with this file. **Vite Users** This step can be entirely optional if you're using Vite. See - the recipie for more information. - + the [recipe](recipe/vite.md) for more information. This file exports a mapping between a `componentIdentifier` to an imported page component. This gets used in your `application.js` so that superglue knows @@ -46,17 +44,6 @@ const pageIdentifierToPageComponent = { } ``` -It's not uncommon to have multiple identifiers pointing to the same component. -This can be used when building `index` pages use modals instead of a new page for -`show`. - -```js -const pageIdentifierToPageComponent = { - 'posts/index': PostsIndex, - 'posts/show': PostsIndex, -} -``` - [tutorial]: tutorial.md ## `application.js` @@ -66,6 +53,8 @@ component. There's nothing to do here, but if you need finer control of how redux is setup, you can build your own Application using the [source] as inspiration. +[source]: https://github.com/thoughtbot/superglue/blob/main/superglue/lib/index.tsx#L114 +
- [:octicons-arrow-right-24: See complete reference](reference/index.md#application) for `Application` diff --git a/docs/index.md b/docs/index.md index 643ade7c..f1a0ec60 100644 --- a/docs/index.md +++ b/docs/index.md @@ -83,13 +83,12 @@ end ``` Familiar Rails conveniences include form_props (a fork of `form_with` made for React), -flash messages integrated as a [Redux slice], and [Unobtrusive Javascript] -(UJS) helpers. +flash messages integrated as a Redux [slice], and [Unobtrusive Javascript](UJS) helpers. ### It’s React But there are no APIs! The above is injected as a script tag in the DOM so everything -loads in the initial request. Its added to [your Redux state] and passed to +loads in the initial request. Its added to your [Redux state] and passed to the page component in a hook, for example: ```js @@ -140,15 +139,19 @@ your React components to SPA transition to the next page. Next Page ``` -### It’s more! +## A thoughtful pairing -Being able to easily use React in place of ERB isn't enough. Superglue’s secret -sauce is that your `foobar.json.props` is diggable; making any part of your page -dynamic by using a query string. It’s a simpler approach to Turbo Frames and -Turbo Stream. +Superglue is about thoughfully pairing React and Rails that brings out the best +of both frameworks. + +### The return of UJS and diggable templates + +Superglue’s secret sauce is that your `foobar.json.props` is diggable; making +any part of your page dynamic by using a query string. It’s a simpler approach +to Turbo Frames and Turbo Stream. Need to reload a part of the page? Just add a query parameter and combine with -the [UJS helper] attribute `data-sg-remote`: +the [UJS] helper attribute `data-sg-remote`: ```jsx
@@ -168,7 +171,7 @@ This works well for [modals], chat, streaming, and [more]! [secret sauce]: digging.md [UJS]: ujs.md -## One-stop shop +### One-stop shop We know first hand how complex React can be, but we don't shy away from complexity. We want to make things better for everyone and to that end, we have @@ -192,7 +195,7 @@ your team. Integration helpers, and generators for installation and scaffolding. - [:octicons-arrow-right-24: SuperglueJs](https://github.com/thoughtbot/superglue/tree/main/superglue_rails) + [:octicons-arrow-right-24: superglue_rails](https://github.com/thoughtbot/superglue/tree/main/superglue_rails) - __PropsTemplate__ @@ -230,3 +233,9 @@ your team. [:octicons-arrow-right-24: candy_wrapper](https://github.com/thoughtbot/candy_wrapper)
+ + +[Redux state]: ./redux-state-shape.md +[modals]: ./recipes/modals.md +[more]: ./recipes +[slice]: ./cross-cutting-concerns.md#slices diff --git a/docs/page-response.md b/docs/page-response.md index 3f7b2e51..b3064ce1 100644 --- a/docs/page-response.md +++ b/docs/page-response.md @@ -23,10 +23,7 @@ used Superglue's generators, this would be all set for you in ``` ### `data` -Passed to your page component as its props. In a Superglue application, this would -be the contents of your templates, e.g., `index.json.props`. Note that `csrfToken`, -`fragments`, and `pageKey` will be merged with your props. `ownProps` are also -merged when [navigating](functions-passed.md#navigateto) +Your page's content. This can be accessed using the ### `componentIdentifier` A `string` to instruct Superglue which component to render. The generated diff --git a/docs/recipes/infinite-scroll.md b/docs/recipes/infinite-scroll.md new file mode 100644 index 00000000..bba95d38 --- /dev/null +++ b/docs/recipes/infinite-scroll.md @@ -0,0 +1,86 @@ +# Infinite scroll + +In this recipe, we'll add infinite scroll to our application. Superglue doesn't +have an infinite scroll component, but it has tools that make it easy to +work with React's ecosystem. + +Lets begin by adding `react-infinite-scroll-hook` + +``` +yarn add react-infinite-scroll-hook +``` + +And continue off from our [pagination] recipe. + +!!! tip + We'll use the `beforeSave` callback to modify the payload before superglue + saves it to the store. This callback is an option for both `visit` and + `remote` functions. See the + [beforeSave reference](../reference/types.requests/#beforesave-2) for more details. + +```diff +// app/views/posts/index.js + +import React from 'react' +- import {useContent} from '@thoughtbot/superglue' ++ import {useContent, NavigationContext} from '@thoughtbot/superglue' +import PostList from './PostList' +import Header from './Header' ++ import useInfiniteScroll from 'react-infinite-scroll-hook'; + +export default PostIndex = () => { + const { + posts, + header, + pathToNextPage, + pathToPrevPage + } = useContent() + ++ const { remote, pageKey } = useContext(NavigationContext) ++ const { loading, setLoading } = useState(false) ++ const hasNextPage = !!pathToNextPage ++ ++ const beforeSave = (prevPage, receivedPage) => { ++ const prevPosts = prevPage.data.posts ++ const receivedPosts = receivedPage.data.posts ++ receivedPage.data.posts = prevPosts + receivedPosts ++ ++ return receivedPage ++ } ++ ++ const loadMore = () => { ++ setLoading(true) ++ remote(pathToNextPage, {pageKey, beforeSave}) ++ .then(() => setLoading(false)) ++ } ++ ++ const [sentryRef] = useInfiniteScroll({ ++ loading, ++ hasNextPage, ++ onLoadMore: loadMore, ++ }); + + return ( + <> +
+
+ { + posts.list.map(({id, body}) => ( +

{body}

+ )) + } ++ {(loading || hasNextPage) && ( ++

++ loading ++

++ )} +
+- {pathToPrevPage && Prev Page} +- {pathToNextPage && Next Page} + + ) +} + +``` + +[pagination]: ./spa-pagination.md diff --git a/docs/recipes/modals.md b/docs/recipes/modals.md index dfab221d..3782eb17 100644 --- a/docs/recipes/modals.md +++ b/docs/recipes/modals.md @@ -40,7 +40,7 @@ controller and the `page_to_page_mapping.js` the same way. Similarly, we tie the `componentIdentifier` to the same page component. **Vite Users** This step can be entirely optional if you're using Vite. See - the recipie for more information. + the [recipe](recipe/vite.md) for more information. ```js import PostIndex from '../views/posts/index' diff --git a/docs/recipes/shopping-cart.md b/docs/recipes/shopping-cart.md new file mode 100644 index 00000000..7a5b2a6e --- /dev/null +++ b/docs/recipes/shopping-cart.md @@ -0,0 +1,76 @@ +# Shopping cart + +In this recipe, we'll look at how to build a global shopping cart state. One +that can be used in a header for a count of all quantity, a shopping cart +panel, optimistic updates, etc. Here's how to achieve that: + +Render the cart in your props [across all pages] in your +`application.json.props` and mark it as a fragment. + +```ruby +json.data do + json.cart partial: ['cart', fragment: true] do + end + + yield +end +``` + +[across all pages]: ../cross-cutting-concerns.md#layouts + +Add a slice + +```javascript +import { createSlice, createAction } from '@reduxjs/toolkit' +import { updateFragments } from '@thoughtbot/superglue' + +export const cartSlice = createSlice({ + name: 'cart', + initialState: {}, + reducers: { + addToCart: (state, action) => { + ....logic to add something to the cart ... + } + }, + extraReducers: (builder) => { + builder.addCase(updateFragments, (state, action) => { + // Update the slice with the latest and greatest. + return action.value + }) + } +}) +``` + +With `fragment` enabled, the above will populate the slice whenever a page +is received, while allowing you the flexibility to make local edits using +the custom `addToCart` reducer. + +You can use this cart slice as you normally would with Redux selectors + +``` + // For the cart component + const cart = useSelector(state => state.cart) + + // For a header quantity component + const cartCount = cart.lineItems.reduce((memo, line) => memo + line.qty, 0) +``` + +For updates to the backend, add a ujs attribute to a normal form. + +```javascript +
+``` + +```ruby +def create + ... add to cart logic here... + + # This helper will retain the `props_at` param when redirecting, which allows the + # partial rendering of the `show` page. + redirect_back_with_props_at fallback_url: '/' +end +``` + +The above will `POST`, and get redirected back to the original page while +fetching only the cart to update. This will be picked up by `extraReducers` and +update the entire cart state. diff --git a/docs/recipes/spa-pagination.md b/docs/recipes/spa-pagination.md index 21ae9cae..41ec3b3b 100644 --- a/docs/recipes/spa-pagination.md +++ b/docs/recipes/spa-pagination.md @@ -1,6 +1,7 @@ -# Easy SPA Pagination +# SPA (Single Page Application) Pagination -Pagination without reload is easy to add. +In this recipe, we'll be adding pagination that works without reloading the +page. ## Starting point @@ -16,11 +17,16 @@ Lets pretend that we're already able to see a list of posts. ``` === "`index.json.props`" + !!! info + In this example, we have a `sleep` that we will optimize + for later + ```ruby # app/views/posts/index.json.props - json.rightNav do - ... + json.header do + json.name "bob" + sleep 2 end json.posts do @@ -35,20 +41,32 @@ Lets pretend that we're already able to see a list of posts. ``` === "`index.js`" + !!! info + Let's assume `Header` is a simple component that exist. + ```js - # app/views/posts/index.js + // app/views/posts/index.js import React from 'react' - import PostList from './PostList' - import RightNav from './RightNav' + import {useContent} from '@thoughtbot/superglue' + import Header from './Header' + + export default PostIndex = () => { + const { + posts, + header + } = useContent() - export default PostIndex = ({ - posts, - rightNav - }) => { return ( <> - +
+
+ { + posts.list.map(({id, body}) => ( +

{body}

+ )) + } +
) @@ -58,16 +76,19 @@ Lets pretend that we're already able to see a list of posts. ## Add gems -Lets also add Kaminari. +Lets also add Kaminari to your gem file ```terminal -bundle install kaminari +gem 'kaminari' ``` +and `bundle` + ## Add pagination The changes here are almost same with the `.erb` counterpart. We're using -`path_to_next_page` and `path_to_prev_page` which come with Kaminari. +`path_to_next_page` and `path_to_prev_page` which come with Kaminari, both +methods return `nil` if there are no subsequent pages. !!! info Some [helpers] like `paginate` output HTML instead of @@ -92,10 +113,6 @@ The changes here are almost same with the `.erb` counterpart. We're using ```diff # app/views/posts/index.json.props - json.rightNav do - ... - end - json.posts do json.list do json.array! @posts do |post| @@ -111,35 +128,38 @@ The changes here are almost same with the `.erb` counterpart. We're using ``` === "`index.js`" + + ```diff - # app/views/posts/index.js + // app/views/posts/index.js + import React from 'react' - import PostList from './PostList' - import RightNav from './RightNav' - - export default PostIndex = ({ - posts, - rightNav - + pathToNextPage, - + pathToPrevPage - }) => { + import {useContent} from '@thoughtbot/superglue' + import Header from './Header' + + export default PostIndex = () => { + const { + posts, + header, + + pathToNextPage, + + pathToPrevPage + } = useContent() + return ( <> - - + - + Next Page - + - + - + Prev Page - + +
+
+ { + posts.list.map(({id, body}) => ( +

{body}

+ )) + } +
+ + {pathToPrevPage && Prev Page} + + {pathToNextPage && Next Page} ) } - ``` ## Smooth navigation @@ -147,53 +167,54 @@ The changes here are almost same with the `.erb` counterpart. We're using The above adds pagination, but each click on **Next Page** is a new page load. -Lets navigate without a reload. In this example, we're using `data-sg-remote`, +Lets navigate without a reload. In this example, we're using the [UJS] helper `data-sg-visit`, which would set the current page's state to the response without changing the URL. **`index.js`** ```diff -# app/views/posts/index.js +// app/views/posts/index.js + import React from 'react' +import {useContent} from '@thoughtbot/superglue' import PostList from './PostList' -import RightNav from './RightNav' - -export default PostIndex = ({ - posts, - rightNav, - pathToNextPage, - pathToPrevPage -}) => { +import Header from './Header' + +export default PostIndex = () => { + const { + posts, + header, + pathToNextPage, + pathToPrevPage + } = useContent() + return ( <> - - - Next Page - - - Prev Page - +
+
+ { + posts.list.map(({id, body}) => ( +

{body}

+ )) + } +
+- {pathToPrevPage && Prev Page} ++ {pathToPrevPage && Prev Page} +- {pathToNextPage && Next Page} ++ {pathToNextPage && Next Page} ) } - ``` ## Optimize! -Lets skip `data.rightNav` when navigating and dig for `data.posts`. For the -user, only the posts lists change, but the rightNav stays the same. +Lets skip `data.header` when navigating and dig for `data.posts`. For the +user, only the posts lists change, but the header stays the same. !!! info In effect, this achieves the same functionality as [Turbo Frames], but - Superglue leans more on Unobtrusive Javascript and a simple `props_at` for - better ergonomics. + Superglue leans more on Unobtrusive Javascript for better ergonomics. [Turbo Frames]: https://turbo.hotwired.dev/handbook/frames @@ -207,7 +228,7 @@ the `json.posts` while skipping other content on that page. ```diff # app/views/posts/index.json.props -json.rightNav do +json.header do ... end @@ -227,4 +248,9 @@ json.posts do end ``` +
+ - [:octicons-arrow-right-24: Interested in infinite-scroll?](./infinite-scroll.md) + for `visit` +
+[UJS]: ../ujs.md diff --git a/docs/recipes/ssr.md b/docs/recipes/ssr.md index 7dffe021..eb63492e 100644 --- a/docs/recipes/ssr.md +++ b/docs/recipes/ssr.md @@ -1,16 +1,18 @@ # Server-Side Rendering -Superglue does not include server-side rendering out of the box, but you can easily -add it with [humid](https://github.com/thoughtbot/humid). +Superglue's generators does not include Server Side Rendering, but we +can add support using [Humid](https://github.com/thoughtbot/humid), a SSR library +built for Superglue. Follow the [instructions](https://github.com/thoughtbot/humid#installation). -Then, if you're using esbuild, create a `app/javascript/packs/server_rendering.js`: +Then, if you're using esbuild, create a `app/javascript/server_rendering.js`: ```js import React from 'react'; -import { ApplicationBase } from '@thoughtbot/superglue'; +import { Application } from '@thoughtbot/superglue'; +import { buildVisitAndRemote } from './application_visit'; import { pageIdentifierToPageComponent } from './page_to_page_mapping'; -import { buildStore } from './store' +import { store } from './store' import { renderToString } from 'react-dom/server'; require("source-map-support").install({ @@ -22,24 +24,29 @@ require("source-map-support").install({ } }); -class Application extends ApplicationBase { - mapping() { - return pageIdentifierToPageComponent; - } - - visitAndRemote(navRef, store) { - return {visit: () => {}, remote: () => {}} - } - - buildStore(initialState, { superglue, pages}) { - return buildStore(initialState, superglue, pages); - } -} - -setHumidRenderer((json) => { +setHumidRenderer((json, baseUrl, path) => { const initialState = JSON.parse(json) return renderToString( - + , + { + concurrentFeatures: false, + } ) }) ``` @@ -83,6 +90,32 @@ Add a `shim.js` for the above. We'll need this for the v8 environment that mini- ```javascript export {TextEncoder, TextDecoder} from 'text-encoding' + +export function MessageChannel() { + this.port1 = { + postMessage: function (message) { + console.log('Message sent from port1:', message); + }, + }; + + this.port2 = { + addEventListener: function (event, handler) { + console.log(`Event listener added for ${event} on port2`); + this._eventHandler = handler; + }, + removeEventListener: function (event) { + console.log(`Event listener removed for ${event} on port2`); + this._eventHandler = null; + }, + simulateMessage: function (data) { + if (this._eventHandler) { + this._eventHandler({ data }); + } + }, + }; +} + +export const navigator = {language: "en-us"} ``` Add a line to your `package.json` like so: @@ -96,10 +129,10 @@ Use `Humid.render` in all your ERB templates `index.html.erb`: ```diff -
-+
<%= Humid.render(initial_state).html_safe %>
++
<%= Humid.render(initial_state, request.scheme + '://' + request.host_with_port, request.fullpath).html_safe %>
``` -!> Do not render spacing above. If you do, React will not hydrate properly and +!> Do not render spacing inside of `
`. If you do, React will not hydrate properly and warn `Hydration failed because the initial UI does not match what was rendered on the server` Change your `application.js` to use `hydrateRoot`: @@ -109,6 +142,50 @@ Change your `application.js` to use `hydrateRoot`: + import { hydrateRoot } from 'react-dom/client'; ``` -and change the rest of `application.js` accordingly. +and change the rest of `application.js` accordingly. For example: +```js +import React from 'react'; +import { Application, VisitResponse } from '@thoughtbot/superglue'; +import { hydrateRoot } from 'react-dom/client'; +import { buildVisitAndRemote } from './application_visit'; +import { pageIdentifierToPageComponent } from './page_to_page_mapping'; +import { store } from './store' + +if (typeof window !== "undefined") { + document.addEventListener("DOMContentLoaded", function () { + const appEl = document.getElementById("app"); + const location = window.location; + + if (appEl) { + hydrateRoot(appEl, + + ); + } + }); +} +``` + +and add build script your `package.json` to build both the client and server js bundles. For example: +``` + "build": "yarn run build:web && yarn run build:ssr", + "build:web": "esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx --loader:.svg=dataurl --public-path=/assets", + "build:ssr": "node ./build-ssr.mjs", +``` diff --git a/docs/recipes/vite.md b/docs/recipes/vite.md new file mode 100644 index 00000000..0d2939f2 --- /dev/null +++ b/docs/recipes/vite.md @@ -0,0 +1,62 @@ +# Usage with vite + +While you can use any js bundler you want with Superglue. Vite has +conveniences that make working with Superglue easier. + +To get started, go ahead and follow the instructions to install +[vite_rails](https://github.com/ElMassimo/vite_ruby?tab=readme-ov-file#installation-) + + +Next move your `app/javascript/entrypoints/application.jsx` file to +`app/javascript/entrypoints/application.jsx` and update the references. + +!!! info + When using Superglue's installation generator, a `app/javascript/application.jsx` gets + generated. `vite_rails` expects this to be put in an `entrypoints` folder. If you're installing + `vite_rails` after superglue's installation, the is set by `vite_rails` to be `app/javascript/entrypoints`. + +Migrate your `@views`, `@javascript` aliases to `vite.config.mts` + +``` +import { defineConfig } from "vite"; +import path from "path"; + +import RubyPlugin from "vite-plugin-ruby"; + +export default defineConfig({ + resolve: { + alias: { + "@views": path.resolve(__dirname, "app/views"), + "@javascript": path.resolve(__dirname, "app/javascript"), + }, + }, + plugins: [RubyPlugin()], +}); +``` + +Make sure you're using `vite_javascript_tag` in your layout, +`application.html.erb`. + +``` +<%= vite_javascript_tag 'application.jsx' %> +``` + +And finally, one of the more manual process of using superglue is the [manual build] +of your `page_to_page_mapping.js` file. We can improve the developer experience by +removing that step by by using this snippet: + +[manual build]: ../configuration + +```javascript +const pageIdentifierToPageComponent = {} +const pages = import.meta.glob('../views/**/*.jsx', {eager: true}) + +for (const key in pages) { + if (pages.hasOwnProperty(key)) { + const identifier = key.replace("../views/", "").split('.')[0]; + pageIdentifierToPageComponent[identifier] = pages[key].default; + } +} + +export { pageIdentifierToPageComponent } +``` diff --git a/docs/reference/components.Navigation.md b/docs/reference/components.Navigation.md index cef52420..4c01a2ee 100644 --- a/docs/reference/components.Navigation.md +++ b/docs/reference/components.Navigation.md @@ -1,28 +1,38 @@ -## Variables +## Functions -### NavigationContext +### NavigationContext() + +> **NavigationContext**(`props`: `ProviderProps`\<[`NavigationContextProps`](types.md#navigationcontextprops)\>): `ReactNode` + +#### Parameters -> `const` **NavigationContext**: `Context`\<`undefined` \| [`NavigationContextProps`](types.md#navigationcontextprops)\> +| Parameter | Type | +| ------ | ------ | +| `props` | `ProviderProps`\<[`NavigationContextProps`](types.md#navigationcontextprops)\> | + +#### Returns + +`ReactNode` #### Defined in -[lib/components/Navigation.tsx:22](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/components/Navigation.tsx#L22) +[lib/components/Navigation.tsx:23](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/components/Navigation.tsx#L23) -## Functions +*** ### NavigationProvider() -> **NavigationProvider**(`props`: [`NavigationProviderProps`](types.md#navigationproviderprops) & `RefAttributes`\<\{`navigateTo`: [`NavigateTo`](types.md#navigateto-1); \}\>): `ReactNode` +> **NavigationProvider**(`props`: [`NavigationProviderProps`](types.md#navigationproviderprops) & `RefAttributes`\<\{`navigateTo`: `null` \| [`NavigateTo`](types.md#navigateto-1); \}\>): `ReactNode` #### Parameters | Parameter | Type | | ------ | ------ | -| `props` | [`NavigationProviderProps`](types.md#navigationproviderprops) & `RefAttributes`\<\{`navigateTo`: [`NavigateTo`](types.md#navigateto-1); \}\> | +| `props` | [`NavigationProviderProps`](types.md#navigationproviderprops) & `RefAttributes`\<\{`navigateTo`: `null` \| [`NavigateTo`](types.md#navigateto-1); \}\> | #### Returns @@ -30,4 +40,4 @@ #### Defined in -[lib/components/Navigation.tsx:46](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/components/Navigation.tsx#L46) +[lib/components/Navigation.tsx:47](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/components/Navigation.tsx#L47) diff --git a/docs/reference/hooks.md b/docs/reference/hooks.md index 3f0c8860..135d9787 100644 --- a/docs/reference/hooks.md +++ b/docs/reference/hooks.md @@ -14,7 +14,7 @@ A lightweight hook that grabs the superglue state from the store. #### Defined in -[lib/hooks/index.ts:7](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/hooks/index.ts#L7) +[lib/hooks/index.ts:7](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/hooks/index.ts#L7) *** @@ -38,4 +38,4 @@ A lightweight hook that grabs the current page's content from the store. #### Defined in -[lib/hooks/index.ts:14](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/hooks/index.ts#L14) +[lib/hooks/index.ts:14](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/hooks/index.ts#L14) diff --git a/docs/reference/index.md b/docs/reference/index.md index 2f95d0f3..7a6a1f7d 100644 --- a/docs/reference/index.md +++ b/docs/reference/index.md @@ -288,6 +288,12 @@ Re-exports [BuildStore](types.md#buildstore) Re-exports [BuildVisitAndRemote](types.md#buildvisitandremote) + + +### SetupProps + +Re-exports [SetupProps](types.md#setupprops) + ### ApplicationProps @@ -346,7 +352,7 @@ Re-exports [ApplicationVisit](types.requests.md#applicationvisit) #### Defined in -[lib/actions.ts:12](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L12) +[lib/actions.ts:12](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L12) *** @@ -358,7 +364,7 @@ Re-exports [ApplicationVisit](types.requests.md#applicationvisit) #### Defined in -[lib/actions.ts:13](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L13) +[lib/actions.ts:13](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L13) *** @@ -372,12 +378,12 @@ Re-exports [ApplicationVisit](types.requests.md#applicationvisit) | Name | Type | Default value | Defined in | | ------ | ------ | ------ | ------ | -| `superglue` | (`state`: [`SuperglueState`](types.md#supergluestate), `action`: `Action`) => [`SuperglueState`](types.md#supergluestate) | superglueReducer | [lib/reducers/index.ts:229](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/reducers/index.ts#L229) | -| `pages` | (`state`: [`AllPages`](types.md#allpagest), `action`: `Action`) => [`AllPages`](types.md#allpagest) | pageReducer | [lib/reducers/index.ts:230](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/reducers/index.ts#L230) | +| `superglue` | (`state`: [`SuperglueState`](types.md#supergluestate), `action`: `Action`) => [`SuperglueState`](types.md#supergluestate) | superglueReducer | [lib/reducers/index.ts:236](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/reducers/index.ts#L236) | +| `pages` | (`state`: [`AllPages`](types.md#allpagest), `action`: `Action`) => [`AllPages`](types.md#allpagest) | pageReducer | [lib/reducers/index.ts:237](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/reducers/index.ts#L237) | #### Defined in -[lib/reducers/index.ts:228](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/reducers/index.ts#L228) +[lib/reducers/index.ts:235](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/reducers/index.ts#L235) ## Functions @@ -406,7 +412,7 @@ websocket, you can use this function to save the payload. #### Defined in -[lib/action\_creators/index.ts:74](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/action_creators/index.ts#L74) +[lib/action\_creators/index.ts:74](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/action_creators/index.ts#L74) *** @@ -432,7 +438,7 @@ method used) a `meta`- and `error` property of types `M` and `E` respectively. #### Defined in -[lib/actions.ts:15](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L15) +[lib/actions.ts:15](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L15) *** @@ -475,7 +481,7 @@ export const exampleSlice = createSlice({ #### Defined in -[lib/actions.ts:64](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L64) +[lib/actions.ts:64](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L64) *** @@ -512,7 +518,7 @@ navigateTo(targetKey) #### Defined in -[lib/actions.ts:86](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L86) +[lib/actions.ts:86](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L86) *** @@ -543,7 +549,7 @@ dispatch(removePage({ pageKey: '/delete_me_please"})) #### Defined in -[lib/actions.ts:99](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L99) +[lib/actions.ts:99](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L99) *** @@ -579,7 +585,7 @@ export const exampleSlice = createSlice({ #### Defined in -[lib/actions.ts:117](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L117) +[lib/actions.ts:117](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L117) *** @@ -616,7 +622,7 @@ export const exampleSlice = createSlice({ #### Defined in -[lib/actions.ts:135](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L135) +[lib/actions.ts:135](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L135) *** @@ -653,7 +659,7 @@ export const exampleSlice = createSlice({ #### Defined in -[lib/actions.ts:154](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/actions.ts#L154) +[lib/actions.ts:154](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/actions.ts#L154) *** @@ -677,7 +683,40 @@ export const exampleSlice = createSlice({ #### Defined in -[lib/index.tsx:50](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/index.tsx#L50) +[lib/index.tsx:51](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L51) + +*** + + + +### setup() + +> **setup**(`__namedParameters`: [`SetupProps`](types.md#setupprops)): \{`visit`: [`ApplicationVisit`](types.requests.md#applicationvisit);`remote`: [`ApplicationRemote`](types.requests.md#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`](types.md#setupprops) | + +#### Returns + +\{`visit`: [`ApplicationVisit`](types.requests.md#applicationvisit);`remote`: [`ApplicationRemote`](types.requests.md#applicationremote);`nextHistory`: `History`;`initialPageKey`: `string`;`ujs`: `handlers`; \} + +| Name | Type | Default value | Defined in | +| ------ | ------ | ------ | ------ | +| `visit` | [`ApplicationVisit`](types.requests.md#applicationvisit) | - | [lib/index.tsx:99](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L99) | +| `remote` | [`ApplicationRemote`](types.requests.md#applicationremote) | - | [lib/index.tsx:100](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L100) | +| `nextHistory` | `History` | - | [lib/index.tsx:101](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L101) | +| `initialPageKey` | `string` | - | [lib/index.tsx:102](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L102) | +| `ujs` | [`Handlers`](types.md#handlers) | handlers | [lib/index.tsx:103](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L103) | + +#### Defined in + +[lib/index.tsx:73](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L73) *** @@ -705,7 +744,7 @@ use the exported methods used by this component (`start` and `ujsHandler`). #### Defined in -[lib/index.tsx:81](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/index.tsx#L81) +[lib/index.tsx:114](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/index.tsx#L114) *** @@ -730,7 +769,7 @@ Retrieves data from a JSON object using a [Keypath](types.md#keypath) #### Defined in -[lib/utils/immutability.ts:22](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/utils/immutability.ts#L22) +[lib/utils/immutability.ts:22](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/utils/immutability.ts#L22) *** @@ -754,4 +793,4 @@ Converts a url to a PageKey. #### Defined in -[lib/utils/url.ts:64](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/utils/url.ts#L64) +[lib/utils/url.ts:64](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/utils/url.ts#L64) diff --git a/docs/reference/types.actions.md b/docs/reference/types.actions.md index abb21850..1227d19a 100644 --- a/docs/reference/types.actions.md +++ b/docs/reference/types.actions.md @@ -12,10 +12,10 @@ | Property | Type | Overrides | Defined in | | ------ | ------ | ------ | ------ | -| `type` | `string` | `Action.type` | [lib/types/actions.ts:12](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L12) | -| `payload` | \{`pageKey`: `string`;`keyPath`: `string`; \} | - | [lib/types/actions.ts:13](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L13) | -| `payload.pageKey` | `string` | - | [lib/types/actions.ts:14](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L14) | -| `payload.keyPath` | `string` | - | [lib/types/actions.ts:15](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L15) | +| `type` | `string` | `Action.type` | [lib/types/actions.ts:12](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L12) | +| `payload` | \{`pageKey`: `string`;`keyPath`: `string`; \} | - | [lib/types/actions.ts:13](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L13) | +| `payload.pageKey` | `string` | - | [lib/types/actions.ts:14](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L14) | +| `payload.keyPath` | `string` | - | [lib/types/actions.ts:15](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L15) | *** @@ -31,12 +31,12 @@ | Property | Type | Overrides | Defined in | | ------ | ------ | ------ | ------ | -| `type` | `string` | `Action.type` | [lib/types/actions.ts:20](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L20) | -| `payload` | \{`pageKey`: `string`;`url`: `string`;`err`: `unknown`;`keyPath`: `string`; \} | - | [lib/types/actions.ts:21](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L21) | -| `payload.pageKey` | `string` | - | [lib/types/actions.ts:22](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L22) | -| `payload.url` | `string` | - | [lib/types/actions.ts:23](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L23) | -| `payload.err` | `unknown` | - | [lib/types/actions.ts:24](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L24) | -| `payload.keyPath` | `string` | - | [lib/types/actions.ts:25](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L25) | +| `type` | `string` | `Action.type` | [lib/types/actions.ts:20](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L20) | +| `payload` | \{`pageKey`: `string`;`url`: `string`;`err`: `unknown`;`keyPath`: `string`; \} | - | [lib/types/actions.ts:21](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L21) | +| `payload.pageKey` | `string` | - | [lib/types/actions.ts:22](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L22) | +| `payload.url` | `string` | - | [lib/types/actions.ts:23](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L23) | +| `payload.err` | `unknown` | - | [lib/types/actions.ts:24](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L24) | +| `payload.keyPath` | `string` | - | [lib/types/actions.ts:25](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L25) | ## Type Aliases @@ -50,4 +50,4 @@ Tuple of Fetch arguments that Superglue passes to Fetch. #### Defined in -[lib/types/actions.ts:7](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/actions.ts#L7) +[lib/types/actions.ts:7](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/actions.ts#L7) diff --git a/docs/reference/types.md b/docs/reference/types.md index b5eaae78..9a9d6f21 100644 --- a/docs/reference/types.md +++ b/docs/reference/types.md @@ -70,8 +70,8 @@ Re-exports [ApplicationVisit](types.requests.md#applicationvisit) | Property | Type | Defined in | | ------ | ------ | ------ | -| `rsp` | `Response` | [lib/types/index.ts:111](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L111) | -| `json` | [`PageResponse`](types.md#pageresponse) | [lib/types/index.ts:112](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L112) | +| `rsp` | `Response` | [lib/types/index.ts:111](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L111) | +| `json` | [`PageResponse`](types.md#pageresponse) | [lib/types/index.ts:112](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L112) | *** @@ -89,11 +89,11 @@ know would be slower to load. | 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/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/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/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/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/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/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/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/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/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L141) | +| `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) | *** @@ -117,17 +117,17 @@ shape the graft responses for you. | Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | -| `data` | `T` | - | [lib/types/index.ts:151](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L151) | -| `componentIdentifier` | `string` | - | [lib/types/index.ts:152](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L152) | -| `assets` | `string`[] | - | [lib/types/index.ts:153](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L153) | -| `csrfToken?` | `string` | - | [lib/types/index.ts:154](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L154) | -| `fragments` | [`Fragment`](types.md#fragment)[] | - | [lib/types/index.ts:155](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L155) | -| `defers` | [`Defer`](types.md#defer)[] | - | [lib/types/index.ts:156](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L156) | -| `slices` | [`JSONObject`](types.md#jsonobject) | - | [lib/types/index.ts:157](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L157) | -| `renderedAt` | `number` | - | [lib/types/index.ts:159](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L159) | -| `restoreStrategy` | [`RestoreStrategy`](types.md#restorestrategy-1) | - | [lib/types/index.ts:160](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L160) | -| `action` | `"graft"` | - | [lib/types/index.ts:183](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L183) | -| `path` | `string` | Used by superglue to replace the data at that location. | [lib/types/index.ts:184](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L184) | +| `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`](types.md#fragment)[] | - | [lib/types/index.ts:155](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L155) | +| `defers` | [`Defer`](types.md#defer)[] | - | [lib/types/index.ts:156](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L156) | +| `slices` | [`JSONObject`](types.md#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`](types.md#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) | *** @@ -141,8 +141,8 @@ A Fragment identifies a cross cutting concern, like a shared header or footer. | 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:202](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L202) | -| `path` | `string` | A Keypath specifying the location of the fragment | [lib/types/index.ts:203](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L203) | +| `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) | *** @@ -157,12 +157,10 @@ the current page. | Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | -| `currentPageKey` | `string` | The [PageKey](types.md#pagekey-4) of the current page. This can be pass to [Remote](types.requests.md#remote). | [lib/types/index.ts:218](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L218) | -| `pathname` | `string` | The pathname of the current url. | [lib/types/index.ts:220](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L220) | -| `search` | `string` | The query string of the current url. | [lib/types/index.ts:222](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L222) | -| `hash` | `string` | The hash of the current url. | [lib/types/index.ts:224](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L224) | -| `csrfToken?` | `string` | The Rails csrfToken that you can use for forms. | [lib/types/index.ts:226](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L226) | -| `assets` | `string`[] | The tracked asset digests. | [lib/types/index.ts:228](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L228) | +| `currentPageKey` | `string` | The [PageKey](types.md#pagekey-4) (url pathname + search) of the current page. This can be pass to [Remote](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) | *** @@ -187,8 +185,8 @@ The root state for a Superglue application. It occupies | Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | -| `superglue` | [`SuperglueState`](types.md#supergluestate) | Contains readonly metadata about the current page | [lib/types/index.ts:237](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L237) | -| `pages` | [`AllPages`](types.md#allpagest)\<`T`\> | Every [PageResponse](types.md#pageresponse) that superglue recieves is stored here. | [lib/types/index.ts:239](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L239) | +| `superglue` | [`SuperglueState`](types.md#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`](types.md#allpagest)\<`T`\> | Every [PageResponse](types.md#pageresponse) that superglue recieves is stored here. | [lib/types/index.ts:234](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L234) | *** @@ -208,13 +206,13 @@ navigation. | Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | -| `pageKey` | `string` | The URL of the response converted to a pageKey. Superglue uses this to persist the [VisitResponse](types.md#visitresponset) to store, when that happens. | [lib/types/index.ts:253](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L253) | -| `page` | [`VisitResponse`](types.md#visitresponset)\<[`JSONMappable`](types.md#jsonmappable)\> | The [VisitResponse](types.md#visitresponset) of the page | [lib/types/index.ts:255](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L255) | -| `redirected` | `boolean` | Indicates if response was redirected | [lib/types/index.ts:257](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L257) | -| `rsp` | `Response` | The original response object | [lib/types/index.ts:259](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L259) | -| `fetchArgs` | [`FetchArgs`](types.actions.md#fetchargs) | The original args passed to fetch. | [lib/types/index.ts:261](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L261) | -| `componentIdentifier` | `string` | The [ComponentIdentifier](types.md#componentidentifier-3) extracted from the response. | [lib/types/index.ts:263](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L263) | -| `needsRefresh` | `boolean` | `true` when assets locally are detected to be out of date | [lib/types/index.ts:265](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L265) | +| `pageKey` | `string` | The URL of the response converted to a pageKey. Superglue uses this to persist the [VisitResponse](types.md#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`](types.md#visitresponset)\<[`JSONMappable`](types.md#jsonmappable)\> | The [VisitResponse](types.md#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`](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](types.md#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) | *** @@ -234,14 +232,14 @@ navigation. | 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](types.md#visitresponset) to store, when that happens. | [`Meta`](types.md#meta).[`pageKey`](types.md#pagekey) | [lib/types/index.ts:253](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L253) | -| `page` | [`VisitResponse`](types.md#visitresponset)\<[`JSONMappable`](types.md#jsonmappable)\> | The [VisitResponse](types.md#visitresponset) of the page | [`Meta`](types.md#meta).[`page`](types.md#page) | [lib/types/index.ts:255](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L255) | -| `redirected` | `boolean` | Indicates if response was redirected | [`Meta`](types.md#meta).[`redirected`](types.md#redirected) | [lib/types/index.ts:257](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L257) | -| `rsp` | `Response` | The original response object | [`Meta`](types.md#meta).[`rsp`](types.md#rsp-1) | [lib/types/index.ts:259](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L259) | -| `fetchArgs` | [`FetchArgs`](types.actions.md#fetchargs) | The original args passed to fetch. | [`Meta`](types.md#meta).[`fetchArgs`](types.md#fetchargs-1) | [lib/types/index.ts:261](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L261) | -| `componentIdentifier` | `string` | The [ComponentIdentifier](types.md#componentidentifier-3) extracted from the response. | [`Meta`](types.md#meta).[`componentIdentifier`](types.md#componentidentifier-1) | [lib/types/index.ts:263](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L263) | -| `needsRefresh` | `boolean` | `true` when assets locally are detected to be out of date | [`Meta`](types.md#meta).[`needsRefresh`](types.md#needsrefresh) | [lib/types/index.ts:265](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L265) | -| `navigationAction` | [`NavigationAction`](types.md#navigationaction-1) | The [NavigationAction](types.md#navigationaction-1). This can be used for navigation. | - | [lib/types/index.ts:270](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L270) | +| `pageKey` | `string` | The URL of the response converted to a pageKey. Superglue uses this to persist the [VisitResponse](types.md#visitresponset) to store, when that happens. | [`Meta`](types.md#meta).[`pageKey`](types.md#pagekey) | [lib/types/index.ts:248](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L248) | +| `page` | [`VisitResponse`](types.md#visitresponset)\<[`JSONMappable`](types.md#jsonmappable)\> | The [VisitResponse](types.md#visitresponset) of the page | [`Meta`](types.md#meta).[`page`](types.md#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`](types.md#meta).[`redirected`](types.md#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`](types.md#meta).[`rsp`](types.md#rsp-1) | [lib/types/index.ts:254](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L254) | +| `fetchArgs` | [`FetchArgs`](types.actions.md#fetchargs) | The original args passed to fetch. | [`Meta`](types.md#meta).[`fetchArgs`](types.md#fetchargs-1) | [lib/types/index.ts:256](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L256) | +| `componentIdentifier` | `string` | The [ComponentIdentifier](types.md#componentidentifier-3) extracted from the response. | [`Meta`](types.md#meta).[`componentIdentifier`](types.md#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`](types.md#meta).[`needsRefresh`](types.md#needsrefresh) | [lib/types/index.ts:260](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L260) | +| `navigationAction` | [`NavigationAction`](types.md#navigationaction-1) | The [NavigationAction](types.md#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) | *** @@ -253,8 +251,8 @@ navigation. | Property | Type | Defined in | | ------ | ------ | ------ | -| `onClick` | (`event`: `MouseEvent`\<`HTMLDivElement`, `MouseEvent`\>) => `void` | [lib/types/index.ts:314](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L314) | -| `onSubmit` | (`event`: `FormEvent`\<`HTMLDivElement`\>) => `void` | [lib/types/index.ts:315](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L315) | +| `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) | *** @@ -270,10 +268,10 @@ the page state when navigating back | 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:337](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L337) | -| `pageKey` | `string` | The page key in [SuperglueState](types.md#supergluestate) to restore from | [lib/types/index.ts:339](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L339) | -| `posX` | `number` | The scroll position X of the page | [lib/types/index.ts:341](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L341) | -| `posY` | `number` | The scroll position Y of the page | [lib/types/index.ts:343](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L343) | +| `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](types.md#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) | *** @@ -291,7 +289,7 @@ A variation of RequestInit except the headers must be a regular object | 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:370](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L370) | +| `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) | *** @@ -308,11 +306,11 @@ You can also use this to build your own `` component. | Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | -| `navigateTo` | [`NavigateTo`](types.md#navigateto-1) | - | [lib/types/index.ts:420](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L420) | -| `visit` | [`ApplicationVisit`](types.requests.md#applicationvisit) | - | [lib/types/index.ts:421](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L421) | -| `remote` | [`ApplicationRemote`](types.requests.md#applicationremote) | - | [lib/types/index.ts:422](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L422) | -| `pageKey` | `string` | The pagekey that's being used to render the current page component. Useful when used in combination with [Remote](types.requests.md#remote) to create requests that target the current page. | [lib/types/index.ts:423](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L423) | -| `ownProps` | `Record`\<`string`, `unknown`\> | - | [lib/types/index.ts:424](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L424) | +| `navigateTo` | [`NavigateTo`](types.md#navigateto-1) | - | [lib/types/index.ts:414](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L414) | +| `visit` | [`ApplicationVisit`](types.requests.md#applicationvisit) | - | [lib/types/index.ts:415](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L415) | +| `remote` | [`ApplicationRemote`](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](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) | *** @@ -328,11 +326,11 @@ takes a mapping of page components and swaps them when navigating and passes | Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | -| `history` | `History` | - | [lib/types/index.ts:437](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L437) | -| `visit` | [`ApplicationVisit`](types.requests.md#applicationvisit) | - | [lib/types/index.ts:438](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L438) | -| `remote` | [`ApplicationRemote`](types.requests.md#applicationremote) | - | [lib/types/index.ts:439](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L439) | -| `mapping` | `Record`\<`string`, `ComponentType`\<\{\}\>\> | - | [lib/types/index.ts:440](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L440) | -| `initialPageKey` | `string` | The [PageKey](types.md#pagekey-4) that's to be used when first rendering. Used to determine the initial page component to show. | [lib/types/index.ts:441](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L441) | +| `history` | `History` | - | [lib/types/index.ts:431](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L431) | +| `visit` | [`ApplicationVisit`](types.requests.md#applicationvisit) | - | [lib/types/index.ts:432](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L432) | +| `remote` | [`ApplicationRemote`](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](types.md#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) | *** @@ -365,7 +363,7 @@ recommend using using Redux toolkit's `configureStore` to build the store. #### Defined in -[lib/types/index.ts:453](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L453) +[lib/types/index.ts:447](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L447) *** @@ -379,7 +377,7 @@ attributes and passed to your page components and [NavigationContextProps](types You may customize this functionality to your liking, e.g, adding a progress bar. -> **BuildVisitAndRemote**(`navigatorRef`: `RefObject`\<\{`navigateTo`: [`NavigateTo`](types.md#navigateto-1); \}\>, `store`: [`SuperglueStore`](types.md#supergluestore)): \{`visit`: [`ApplicationVisit`](types.requests.md#applicationvisit);`remote`: [`ApplicationRemote`](types.requests.md#applicationremote); \} +> **BuildVisitAndRemote**(`navigatorRef`: `RefObject`\<`null` \| \{`navigateTo`: [`NavigateTo`](types.md#navigateto-1); \}\>, `store`: [`SuperglueStore`](types.md#supergluestore)): \{`visit`: [`ApplicationVisit`](types.requests.md#applicationvisit);`remote`: [`ApplicationRemote`](types.requests.md#applicationremote); \} Provide this callback to [ApplicationProps](types.md#applicationprops) returning a visit and remote function. These functions will be used by Superglue to power its UJS @@ -391,7 +389,7 @@ bar. | Parameter | Type | Description | | ------ | ------ | ------ | -| `navigatorRef` | `RefObject`\<\{`navigateTo`: [`NavigateTo`](types.md#navigateto-1); \}\> | | +| `navigatorRef` | `RefObject`\<`null` \| \{`navigateTo`: [`NavigateTo`](types.md#navigateto-1); \}\> | | | `store` | [`SuperglueStore`](types.md#supergluestore) | | #### Returns @@ -400,12 +398,30 @@ bar. | Name | Type | Defined in | | ------ | ------ | ------ | -| `visit` | [`ApplicationVisit`](types.requests.md#applicationvisit) | [lib/types/index.ts:473](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L473) | -| `remote` | [`ApplicationRemote`](types.requests.md#applicationremote) | [lib/types/index.ts:474](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L474) | +| `visit` | [`ApplicationVisit`](types.requests.md#applicationvisit) | [lib/types/index.ts:467](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L467) | +| `remote` | [`ApplicationRemote`](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:469](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L469) +[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`](types.md#visitresponset)\<[`JSONMappable`](types.md#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`](types.md#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`](types.md#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 https://github.com/remix-run/history. 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`](types.md#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) | *** @@ -415,17 +431,21 @@ bar. Props for the `Application` component +#### Extends + +- `ComponentPropsWithoutRef`\<`"div"`\> + #### Properties | Property | Type | Description | Defined in | | ------ | ------ | ------ | ------ | -| `initialPage` | [`VisitResponse`](types.md#visitresponset)\<[`JSONMappable`](types.md#jsonmappable)\> | The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb template, e.g., index.html.erb | [lib/types/index.ts:486](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L486) | -| `baseUrl` | `string` | The base url prefixed to all calls made by `visit` and `remote`. | [lib/types/index.ts:491](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L491) | -| `path` | `string` | The path of the current page. It should equal to the `location.pathname` + `location.search` + `location.hash` | [lib/types/index.ts:496](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L496) | -| `buildVisitAndRemote` | [`BuildVisitAndRemote`](types.md#buildvisitandremote) | - | [lib/types/index.ts:497](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L497) | -| `mapping` | `Record`\<`string`, `ComponentType`\<\{\}\>\> | - | [lib/types/index.ts:498](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L498) | -| `history?` | `History` | - | [lib/types/index.ts:499](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L499) | -| `store` | [`SuperglueStore`](types.md#supergluestore) | - | [lib/types/index.ts:500](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L500) | +| `initialPage` | [`VisitResponse`](types.md#visitresponset)\<[`JSONMappable`](types.md#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`](types.md#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 https://github.com/remix-run/history. 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`](types.md#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 @@ -447,7 +467,7 @@ A PageKey is a combination of a parsed URL's pathname + query string. No hash. #### Defined in -[lib/types/index.ts:22](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L22) +[lib/types/index.ts:22](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L22) *** @@ -472,7 +492,7 @@ to push into history. If the response was redirected, the [NavigationAction](typ #### Defined in -[lib/types/index.ts:38](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L38) +[lib/types/index.ts:38](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L38) *** @@ -487,7 +507,7 @@ or do nothing. #### Defined in -[lib/types/index.ts:47](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L47) +[lib/types/index.ts:47](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L47) *** @@ -502,7 +522,7 @@ with your page response. #### Defined in -[lib/types/index.ts:53](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L53) +[lib/types/index.ts:53](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L53) *** @@ -534,7 +554,7 @@ data.body.posts.post_id=foobar.title #### Defined in -[lib/types/index.ts:77](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L77) +[lib/types/index.ts:77](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L77) *** @@ -548,7 +568,7 @@ A JSON Primitive value #### Defined in -[lib/types/index.ts:84](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L84) +[lib/types/index.ts:84](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L84) *** @@ -566,7 +586,7 @@ A JSON Object #### Defined in -[lib/types/index.ts:89](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L89) +[lib/types/index.ts:89](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L89) *** @@ -580,7 +600,7 @@ A JSON Object or an array of values #### Defined in -[lib/types/index.ts:96](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L96) +[lib/types/index.ts:96](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L96) *** @@ -594,7 +614,7 @@ A array of JSON key value objects or a JSON Object #### Defined in -[lib/types/index.ts:101](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L101) +[lib/types/index.ts:101](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L101) *** @@ -608,7 +628,7 @@ A primitive or a mappable object #### Defined in -[lib/types/index.ts:106](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L106) +[lib/types/index.ts:106](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L106) *** @@ -633,19 +653,19 @@ layout and view that would shape the visit responses for you. | Name | Type | Defined in | | ------ | ------ | ------ | -| `data` | `T` | [lib/types/index.ts:151](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L151) | -| `componentIdentifier` | [`ComponentIdentifier`](types.md#componentidentifier-3) | [lib/types/index.ts:152](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L152) | -| `assets` | `string`[] | [lib/types/index.ts:153](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L153) | -| `csrfToken`? | `string` | [lib/types/index.ts:154](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L154) | -| `fragments` | [`Fragment`](types.md#fragment)[] | [lib/types/index.ts:155](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L155) | -| `defers` | [`Defer`](types.md#defer)[] | [lib/types/index.ts:156](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L156) | -| `slices` | [`JSONObject`](types.md#jsonobject) | [lib/types/index.ts:157](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L157) | -| `renderedAt` | `number` | [lib/types/index.ts:159](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L159) | -| `restoreStrategy` | [`RestoreStrategy`](types.md#restorestrategy-1) | [lib/types/index.ts:160](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L160) | +| `data` | `T` | [lib/types/index.ts:151](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L151) | +| `componentIdentifier` | [`ComponentIdentifier`](types.md#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`](types.md#fragment)[] | [lib/types/index.ts:155](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L155) | +| `defers` | [`Defer`](types.md#defer)[] | [lib/types/index.ts:156](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L156) | +| `slices` | [`JSONObject`](types.md#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`](types.md#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/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L150) +[lib/types/index.ts:150](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L150) *** @@ -661,7 +681,7 @@ A Page is a VisitResponse that's been saved to the store | Name | Type | Defined in | | ------ | ------ | ------ | -| `savedAt` | `number` | [lib/types/index.ts:167](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L167) | +| `savedAt` | `number` | [lib/types/index.ts:167](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L167) | #### Type Parameters @@ -671,7 +691,7 @@ A Page is a VisitResponse that's been saved to the store #### Defined in -[lib/types/index.ts:166](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L166) +[lib/types/index.ts:166](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L166) *** @@ -687,7 +707,7 @@ superglue_rails, the generators will handle both cases. #### Defined in -[lib/types/index.ts:192](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L192) +[lib/types/index.ts:191](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L191) *** @@ -708,7 +728,7 @@ to mutate the Pages in this store. #### Defined in -[lib/types/index.ts:210](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L210) +[lib/types/index.ts:209](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L209) *** @@ -734,7 +754,7 @@ the [Visit](types.requests.md#visit) function. Typically its already generated i #### Defined in -[lib/types/index.ts:279](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L279) +[lib/types/index.ts:274](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L274) *** @@ -760,7 +780,7 @@ the [Remote](types.requests.md#remote) function. Typically its already generated #### Defined in -[lib/types/index.ts:288](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L288) +[lib/types/index.ts:283](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L283) *** @@ -772,7 +792,7 @@ the [Remote](types.requests.md#remote) function. Typically its already generated #### Defined in -[lib/types/index.ts:293](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L293) +[lib/types/index.ts:288](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L288) *** @@ -788,7 +808,7 @@ generated for you in `store.js` and setup correctly in application.js #### Defined in -[lib/types/index.ts:300](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L300) +[lib/types/index.ts:295](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L295) *** @@ -819,7 +839,7 @@ generated for you in `store.js` and setup correctly in application.js #### Defined in -[lib/types/index.ts:318](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L318) +[lib/types/index.ts:313](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L313) *** @@ -831,7 +851,7 @@ generated for you in `store.js` and setup correctly in application.js #### Defined in -[lib/types/index.ts:346](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L346) +[lib/types/index.ts:341](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L341) *** @@ -843,7 +863,7 @@ generated for you in `store.js` and setup correctly in application.js #### Defined in -[lib/types/index.ts:353](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L353) +[lib/types/index.ts:348](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L348) *** @@ -855,7 +875,7 @@ generated for you in `store.js` and setup correctly in application.js #### Defined in -[lib/types/index.ts:354](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L354) +[lib/types/index.ts:349](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L349) *** @@ -867,7 +887,7 @@ generated for you in `store.js` and setup correctly in application.js #### Defined in -[lib/types/index.ts:361](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L361) +[lib/types/index.ts:356](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L356) *** @@ -875,7 +895,7 @@ generated for you in `store.js` and setup correctly in application.js ### NavigateTo() -> **NavigateTo**: (`path`: [`Keypath`](types.md#keypath), `options`: \{`action`: [`NavigationAction`](types.md#navigationaction-1);`ownProps`: `Record`\<`string`, `unknown`\>; \}) => `boolean` +> **NavigateTo**: (`path`: [`Keypath`](types.md#keypath), `options`: \{`action`: [`NavigationAction`](types.md#navigationaction-1); \}) => `boolean` Passed to every page component and also available as part of a NavigationContext: @@ -901,7 +921,6 @@ call to `visit` or `remote`. | `path` | [`Keypath`](types.md#keypath) | | | `options` | `object` | - | | `options.action` | [`NavigationAction`](types.md#navigationaction-1) | when `none`, `navigateTo` will immediately return `false` | -| `options.ownProps` | `Record`\<`string`, `unknown`\> | additional props that will be passed to the page component | #### Returns @@ -912,4 +931,4 @@ store. #### Defined in -[lib/types/index.ts:400](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/index.ts#L400) +[lib/types/index.ts:394](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/index.ts#L394) diff --git a/docs/reference/types.requests.md b/docs/reference/types.requests.md index ade9f781..d2b8b364 100644 --- a/docs/reference/types.requests.md +++ b/docs/reference/types.requests.md @@ -33,7 +33,7 @@ it for UJS navigation. This is usually generated for you in #### Defined in -[lib/types/requests.ts:22](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L22) +[lib/types/requests.ts:22](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L22) *** @@ -51,12 +51,12 @@ Options for Visit | Property | Type | Description | Inherited from | Defined in | | ------ | ------ | ------ | ------ | ------ | -| `placeholderKey?` | `string` | Defaults to the currentPageKey. When present, Superglue will use the page state located at that pageKey and optimistally navigates to it as the next page's state while the requests resolves. | - | [lib/types/requests.ts:36](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L36) | -| `revisit?` | `boolean` | When `true` and the request method is a GET, changes the `suggestionAction` of the Meta object to `none` so that Superglue does nothing to window.history. When the GET response was redirected, changes `navigationAction` to `replace` | - | [lib/types/requests.ts:43](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L43) | -| `method?` | `string` | The HTTP method | `Omit.method` | [lib/types/requests.ts:68](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L68) | -| `body?` | `BodyInit` | The HTTP body | `Omit.body` | [lib/types/requests.ts:70](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L70) | -| `headers?` | \{\} | The HTTP headers | `Omit.headers` | [lib/types/requests.ts:72](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L72) | -| `beforeSave?` | [`BeforeSave`](types.requests.md#beforesave-2) | - | `Omit.beforeSave` | [lib/types/requests.ts:75](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L75) | +| `placeholderKey?` | `string` | Defaults to the currentPageKey. When present, Superglue will use the page state located at that pageKey and optimistally navigates to it as the next page's state while the requests resolves. | - | [lib/types/requests.ts:36](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L36) | +| `revisit?` | `boolean` | When `true` and the request method is a GET, changes the `suggestionAction` of the Meta object to `none` so that Superglue does nothing to window.history. When the GET response was redirected, changes `navigationAction` to `replace` | - | [lib/types/requests.ts:43](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L43) | +| `method?` | `string` | The HTTP method | `Omit.method` | [lib/types/requests.ts:68](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L68) | +| `body?` | `BodyInit` | The HTTP body | `Omit.body` | [lib/types/requests.ts:70](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L70) | +| `headers?` | \{\} | The HTTP headers | `Omit.headers` | [lib/types/requests.ts:72](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L72) | +| `beforeSave?` | [`BeforeSave`](types.requests.md#beforesave-2) | - | `Omit.beforeSave` | [lib/types/requests.ts:75](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L75) | *** @@ -88,7 +88,7 @@ global usage. #### Defined in -[lib/types/requests.ts:60](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L60) +[lib/types/requests.ts:60](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L60) *** @@ -106,12 +106,12 @@ Options for Visit | Property | Type | Description | Inherited from | Defined in | | ------ | ------ | ------ | ------ | ------ | -| `method?` | `string` | The HTTP method | `BaseProps.method` | [lib/types/requests.ts:68](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L68) | -| `body?` | `BodyInit` | The HTTP body | `BaseProps.body` | [lib/types/requests.ts:70](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L70) | -| `headers?` | \{\} | The HTTP headers | `BaseProps.headers` | [lib/types/requests.ts:72](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L72) | -| `beforeSave?` | [`BeforeSave`](types.requests.md#beforesave-2) | - | `BaseProps.beforeSave` | [lib/types/requests.ts:75](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L75) | -| `pageKey?` | `string` | Specifies where to store the remote payload, if not provided [Remote](types.requests.md#remote) will derive a key from the response's url. | - | [lib/types/requests.ts:86](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L86) | -| `force?` | `boolean` | By default, remote [Remote](types.requests.md#remote) disallows grafting a page response using props_at if the target pageKey provided has a different componentIdentifier. Setting `force: true` will ignore this limitation. This can be useful if you are absolutely sure that the page your grafting onto has a compatible shape with the response received with using props_at. A good example of this is a shared global header. | - | [lib/types/requests.ts:96](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L96) | +| `method?` | `string` | The HTTP method | `BaseProps.method` | [lib/types/requests.ts:68](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L68) | +| `body?` | `BodyInit` | The HTTP body | `BaseProps.body` | [lib/types/requests.ts:70](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L70) | +| `headers?` | \{\} | The HTTP headers | `BaseProps.headers` | [lib/types/requests.ts:72](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L72) | +| `beforeSave?` | [`BeforeSave`](types.requests.md#beforesave-2) | - | `BaseProps.beforeSave` | [lib/types/requests.ts:75](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L75) | +| `pageKey?` | `string` | Specifies where to store the remote payload, if not provided [Remote](types.requests.md#remote) will derive a key from the response's url. | - | [lib/types/requests.ts:86](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L86) | +| `force?` | `boolean` | By default, remote [Remote](types.requests.md#remote) disallows grafting a page response using props_at if the target pageKey provided has a different componentIdentifier. Setting `force: true` will ignore this limitation. This can be useful if you are absolutely sure that the page your grafting onto has a compatible shape with the response received with using props_at. A good example of this is a shared global header. | - | [lib/types/requests.ts:96](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L96) | *** @@ -152,7 +152,7 @@ remote("/posts", {beforeSave}) #### Defined in -[lib/types/requests.ts:119](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L119) +[lib/types/requests.ts:119](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L119) *** @@ -185,7 +185,7 @@ enabled on. #### Defined in -[lib/types/requests.ts:134](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L134) +[lib/types/requests.ts:134](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L134) *** @@ -218,4 +218,4 @@ enabled on. #### Defined in -[lib/types/requests.ts:156](https://github.com/thoughtbot/superglue/blob/596d8e2334d11fa65762247bc4e1bdc41ab87e3e/superglue/lib/types/requests.ts#L156) +[lib/types/requests.ts:156](https://github.com/thoughtbot/superglue/blob/082475a624bd2c23522d97710a5b2ed335eb293c/superglue/lib/types/requests.ts#L156) diff --git a/docs/requests.md b/docs/requests.md index 90fcdb34..34214368 100644 --- a/docs/requests.md +++ b/docs/requests.md @@ -1,9 +1,17 @@ # Requests -When you need more functionality than what UJS offers, Superglue comes with two -functions built around `fetch`, `visit` and `remote`. These are wrapped with -your own implementation in [application_visit.js] and can be accessed via the -NavigationContext. +If you prefer to navigate using Javascript, or need more functionality than what UJS +offers, Superglue comes with two functions built around `fetch`, `visit` and +`remote`. These are wrapped with your own implementation in +[application_visit.js] and can be accessed via the [NavigationContext]. + +[NavigationContext]: ../reference/types/#navigationcontextprops + + +!!! tip + Superglue does not come with a `` component. Instead we encourage you to + build one that is unique to your projects needs using the functions provided by + the [NavigationContext]. ```js import { NavigationContext } from '@thoughtbot/superglue'; @@ -106,16 +114,14 @@ sequenceDiagram for `remote`
+
+ - [:octicons-arrow-right-24: See note](./ujs.md#data-sg-remote) + for differences between `remote` and `data-sg-remote` +
!!! tip "Customizations" You can modify the behavior of `visit` and `remote` functions globally from `application_visit.js`. If you need a global customization, e.g, progress bars, you can add them there. -## Relationship to UJS - -The `visit` and `remote` thunks are called by the UJS implementation. -Only `data-sg-remote` has a slightly modified behavior. Unlike `remote`, -`data-sg-remote` does not derive the `pageKey`. Instead it saves or grafts all -page responses to current page. diff --git a/docs/tutorial.md b/docs/tutorial.md index 49ff7929..46739d60 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -116,7 +116,7 @@ with which response by modifying `app/javascript/page_to_page_mapping.js`. gets rendered. In our case: http://localhost:3000/greet.json **Vite Users** This step can be entirely optional if you're using Vite. See - the recipie for more information. + the [recipe](recipe/vite.md) for more information. === "1. Example `greet.json`" The layout for `show.json.props` is located at `app/views/layouts/application.json.props`. It diff --git a/mkdocs.yml b/mkdocs.yml index eeee7484..a2e45c71 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -98,10 +98,6 @@ nav: - Demo: demo.md - Configuration: configuration.md - - Concepts: - - Page response: page-response.md - - Store shape: redux-state-shape.md - - Navigation: - The return of Rails UJS: ujs.md - Advanced requests: requests.md @@ -111,12 +107,19 @@ nav: - Cross-cutting concerns: cross-cutting-concerns.md - Deferments: deferments.md + - Concepts: + - Page response: page-response.md + - Store shape: redux-state-shape.md + - Recipes: - Modals: recipes/modals.md - Server Side Rendering: recipes/ssr.md - - Easy SPA Navigation: recipes/spa-pagination.md + - Paginate without reloading: recipes/spa-pagination.md + - Infinite Scroll: recipes/infinite-scroll.md - Progress Bars: recipes/progress-bar.md - Turbo Nav: recipes/turbo.md + - Vite: recipes/vite.md + - Shopping cart: recipes/shopping-cart.md - Reference: - Rails Utilities: rails-utils.md diff --git a/superglue/lib/types/index.ts b/superglue/lib/types/index.ts index 960b3ad5..56bf803e 100644 --- a/superglue/lib/types/index.ts +++ b/superglue/lib/types/index.ts @@ -407,6 +407,7 @@ export type NavigateTo = ( * @prop pageKey The pagekey that's being used to render the current page * component. Useful when used in combination with {@link Remote} to create * requests that target the current page. + * @prop search The current pageKey (current url) query params as an object. * @interface */ export type NavigationContextProps = {