Skip to content

Commit 83309fe

Browse files
committed
Update docs
1 parent 7ba5c96 commit 83309fe

11 files changed

Lines changed: 551 additions & 341 deletions

docs/client-updates.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ The `useSetFragment` hook returns a setter function that lets you update any
1616
fragment by its ID:
1717

1818
```jsx
19-
import { useSetFragment } from '@thoughtbot/superglue'
19+
import React from 'react'
20+
import { useContent, useSetFragment } from '@thoughtbot/superglue'
2021

2122
function ShoppingCart() {
2223
const content = useContent()
@@ -76,6 +77,9 @@ references](./performance.md#preventing-over-rendering-with-fragment-refs) passe
7677
between components:
7778

7879
```jsx
80+
import React from 'react'
81+
import { useSetFragment } from '@thoughtbot/superglue'
82+
7983
function PostCard({ postRef }) {
8084
const set = useSetFragment()
8185

@@ -114,6 +118,9 @@ Fragments are composable and can contain references to other fragments. If you
114118
need to update a nested fragment, you can update them using nested `set` calls.
115119

116120
```jsx
121+
import React from 'react'
122+
import { useContent, useSetFragment} from '@thoughtbot/superglue'
123+
117124
function PostList() {
118125
const content = useContent()
119126
const set = useSetFragment()
@@ -149,10 +156,13 @@ function PostList() {
149156
For optimistic updates, combine client-side updates with server requests:
150157

151158
```jsx
159+
import React, { useContext } from 'react'
160+
import { useContent, useSetFragment, NavigationContext } from '@thoughtbot/superglue'
161+
152162
function LikeButton({ postId }) {
153163
const content = useContent()
154164
const set = useSetFragment()
155-
const { remote } = useNavigationContext()
165+
const { remote } = useContext(NavigationContext)
156166

157167
const toggleLike = async () => {
158168
// Optimistic update

docs/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Overview
22

3-
__Superglue is The Rails Way of building React applications.__ Refreshingly
3+
__Superglue is The Rails Way of building React Rails applications.__ Refreshingly
44
familiar. No APIs. No client-side routing. Batteries included.
55

66
<div class="grid cards" markdown>
@@ -166,7 +166,7 @@ end
166166
broadcast_save_props(model: @post) # Updates all connected clients instantly
167167
```
168168

169-
Give rendered partials identity with Fragments, and optimistically update them
169+
Give rendered partials identity with [Fragments](./fragments.md), and optimistically update them
170170
client side.
171171

172172
```ruby

docs/reference/components.Navigation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
> `const` **NavigationContext**: `Context`\<[`NavigationContextProps`](types.md#navigationcontextprops)\>
88
9-
Defined in: [components/Navigation.tsx:23](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/components/Navigation.tsx#L23)
9+
Defined in: [components/Navigation.tsx:23](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/components/Navigation.tsx#L23)
1010

1111
***
1212

@@ -16,4 +16,4 @@ Defined in: [components/Navigation.tsx:23](https://github.com/thoughtbot/supergl
1616

1717
> `const` **NavigationProvider**: `ForwardRefExoticComponent`\<[`NavigationProviderProps`](types.md#navigationproviderprops) & `RefAttributes`\<\{ `navigateTo`: `null` \| [`NavigateTo`](types.md#navigateto); \}\>\>
1818
19-
Defined in: [components/Navigation.tsx:47](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/components/Navigation.tsx#L47)
19+
Defined in: [components/Navigation.tsx:47](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/components/Navigation.tsx#L47)

docs/reference/hooks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
> **useSuperglue**(): [`SuperglueState`](types.md#supergluestate)
88
9-
Defined in: [hooks/index.ts:10](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/hooks/index.ts#L10)
9+
Defined in: [hooks/index.ts:10](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/index.ts#L10)
1010

1111
A lightweight hook that grabs the superglue state from the store.
1212

docs/reference/hooks.useContent.md

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,32 @@
11
## Type Aliases
22

3+
<a id="fragmentproxy"></a>
4+
5+
### FragmentProxy
6+
7+
> **FragmentProxy** = \{ `__fragment`: `true`; \}
8+
9+
Defined in: [hooks/useContent.tsx:13](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/useContent.tsx#L13)
10+
11+
#### Properties
12+
13+
<a id="__fragment"></a>
14+
15+
##### \_\_fragment
16+
17+
> **\_\_fragment**: `true`
18+
19+
Defined in: [hooks/useContent.tsx:13](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/useContent.tsx#L13)
20+
21+
***
22+
323
<a id="proxiedcontent"></a>
424

525
### ProxiedContent\<T\>
626

7-
> **ProxiedContent**\<`T`\> = `T` & \{ readonly \[K in keyof T\]: T\[K\] extends Fragment\<infer U, true\> ? ProxiedContent\<U\> : T\[K\] extends Fragment\<infer U, false \| undefined\> ? ProxiedContent\<U\> \| undefined : T\[K\] extends (infer U)\[\] ? ProxiedContent\<U\>\[\] : T\[K\] extends object ? ProxiedContent\<T\[K\]\> : T\[K\] \}
27+
> **ProxiedContent**\<`T`\> = `T` *extends* [`Fragment`](types.md#fragment)\<infer U, `true`\> ? [`ProxiedContent`](#proxiedcontent)\<`U`\> & [`FragmentProxy`](#fragmentproxy) : `T` *extends* [`Fragment`](types.md#fragment)\<infer U, `false` \| `undefined`\> ? [`ProxiedContent`](#proxiedcontent)\<`U`\> & [`FragmentProxy`](#fragmentproxy) \| `undefined` : `T` *extends* infer U[] ? [`ProxiedContent`](#proxiedcontent)\<`U`\>[] : `T` *extends* `object` ? `{ [K in keyof T]: ProxiedContent<T[K]> }` : `T`
828
9-
Defined in: [hooks/useContent.tsx:17](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/hooks/useContent.tsx#L17)
29+
Defined in: [hooks/useContent.tsx:18](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/useContent.tsx#L18)
1030

1131
A proxy type that enables reactive access to nested content with automatic fragment resolution
1232

@@ -24,7 +44,7 @@ A proxy type that enables reactive access to nested content with automatic fragm
2444

2545
> **FragmentRefOrId** = [`FragmentRef`](types.md#fragmentref) \| `string`
2646
27-
Defined in: [hooks/useContent.tsx:33](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/hooks/useContent.tsx#L33)
47+
Defined in: [hooks/useContent.tsx:32](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/useContent.tsx#L32)
2848

2949
Union type for fragment references, accepting either FragmentRef objects or string IDs
3050

@@ -38,7 +58,7 @@ Union type for fragment references, accepting either FragmentRef objects or stri
3858

3959
> **useContent**\<`T`\>(): [`ProxiedContent`](#proxiedcontent)\<`T`\>
4060
41-
Defined in: [hooks/useContent.tsx:79](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/hooks/useContent.tsx#L79)
61+
Defined in: [hooks/useContent.tsx:78](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/useContent.tsx#L78)
4262

4363
Returns a proxy for accessing your page's content e.g, `index.json.props`,
4464
`show.json.props`, etc.
@@ -97,7 +117,7 @@ const cart = useContent('userCart')
97117

98118
> **useContent**\<`T`\>(`fragmentRef`: [`FragmentRefOrId`](#fragmentreforid)): [`ProxiedContent`](#proxiedcontent)\<`T`\>
99119
100-
Defined in: [hooks/useContent.tsx:109](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/hooks/useContent.tsx#L109)
120+
Defined in: [hooks/useContent.tsx:108](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/useContent.tsx#L108)
101121

102122
Passing in a fragment to useContent allows us to scope the tracking of
103123
fragments to that hook usage. Its useful in performance scenarios where you
@@ -147,7 +167,7 @@ SlidingCart will update only if the fragment referenced by `cartRef` updates.
147167

148168
> **unproxy**\<`T`\>(`proxy`: `T`): [`Unproxy`](types.md#unproxy)\<`T`\>
149169
150-
Defined in: [hooks/useContent.tsx:173](https://github.com/thoughtbot/superglue/blob/46e766e2cea01dff2e2730d3b74a6719c2b2fe9f/superglue/lib/hooks/useContent.tsx#L173)
170+
Defined in: [hooks/useContent.tsx:172](https://github.com/thoughtbot/superglue/blob/6828bbda8f8692c93cd2c69d86a8a10fbb351d20/superglue/lib/hooks/useContent.tsx#L172)
151171

152172
Extracts the underlying state from an [useContent](#usecontent) proxy
153173

0 commit comments

Comments
 (0)