Skip to content

Commit e21edb3

Browse files
authored
docs: changed markdown alerts to use emojis instead to work with both github the website (#993)
* changed github alerts to use emojis instead to work with both github and valtio.dev * changed emoji codes to just use emojis * ran prettier * added more emojis * ran prettier * fixed span * changed emoji to use text * removed span * removed span
1 parent f3cbd01 commit e21edb3

File tree

8 files changed

+45
-12
lines changed

8 files changed

+45
-12
lines changed

docs/api/advanced/snapshot.mdx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,10 @@ This should be fine, because the expectation is that they execute very quickly (
105105

106106
In VanillaJS, `snapshot` is not necessary to access proxied object values, inside or outside of subscribe. However, it is useful, for example, to keep a serializable list of unproxied objects or check if objects have changed. It also resolves promises.
107107

108-
> [!TIP]
108+
<br />
109+
110+
> 💡 Tip
111+
>
109112
> If you are using valtio outside of react, import from `valtio/vanilla`
110113
>
111114
> ```js

docs/api/basic/useSnapshot.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,16 @@ return <div>{profile.name}</div>
184184

185185
In dev mode, `useSnapshot` uses React's `useDebugValue` to output a list of fields that were accessed during rendering, i.e. which specific fields will trigger re-render when the tracking proxy changes.
186186

187-
> [!IMPORTANT]There are two disclaimers to using the debug value
187+
<br />
188+
189+
> !! &nbsp; There are two disclaimers to
190+
> using the debug value
188191
>
189192
> 1. Due to the way `useSnapshot` uses a proxy to recorded accesses _after_ `useSnapshot` has returned, the fields listed in `useDebugValue` are technically from the _previous_ render.
190193
> 2. Object getter and class getter calls are not included in the `useDebugValue` output, but don't worry, they are actually correctly tracked internally and correctly trigger re-renders when changed.
191194
195+
<br />
196+
192197
## Codesandbox demo
193198

194199
https://codesandbox.io/s/ping-pong-with-valtio-wb25s?file=/src/App.js

docs/guides/computed-properties.mdx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ description: 'Use object getters and setters'
88

99
In Valtio you can use object & class getters and setters to create computed properties.
1010

11-
> [!NOTE]
11+
<br />
12+
13+
> ℹ️ &nbsp; Note
1214
> Getters in JavaScript are a more advanced feature of the language, so Valtio recommends using them with caution. That said, if you are a more advanced JavaScript programmer, they should work as you expect; see the "Note about using `this`" section below.
1315
16+
<br />
17+
1418
## Simple object getter
1519

1620
```js
@@ -36,8 +40,12 @@ When you call `state.doubled` on the `state` proxy, it is not cached, and will b
3640

3741
However, when you make a snapshot, calls to `snap.doubled` are effectively cached, because the value of an object getter is copied during the snapshot process.
3842

39-
> [!NOTE]
40-
> In the current implementation a computed property should only reference **_sibling_** properties, otherwise you'll encounter weird bugs. For example:
43+
<br />
44+
45+
> ℹ️ &nbsp; Note
46+
> In the current implementation a computed property should only reference \*\*\_sibling\*\*\* properties, otherwise you'll encounter weird bugs. For example:
47+
48+
<br />
4149

4250
```js
4351
const user = proxy({

docs/how-tos/how-to-easily-access-the-state-from-anywhere-in-the-application.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,14 @@ export { state, useSnapshot, subscribe }
4545
}
4646
```
4747

48-
> [!TIP] Using TypeScript? Here are some links for reference
48+
<br />
49+
50+
> 💡 &nbsp; Using TypeScript? Here are some links for reference
51+
>
4952
> https://www.totaltypescript.com/tsconfig-cheat-sheet<br /> > https://github.com/tsconfig/bases<br /> > https://www.typescriptlang.org/tsconfig/
5053
54+
<br />
55+
5156
3. Add the **Module Resolver** plugin the plugins in your `babel.config.js`:
5257

5358
```js

docs/how-tos/how-to-organize-actions.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,14 @@ Here's some recipes to show various patterns are possible.
99

1010
## Action functions defined in module
1111

12-
> [!NOTE]
12+
<br />
13+
14+
> ℹ️ &nbsp; Note
15+
>
1316
> This way is preferred as it is better for code splitting.
1417
18+
<br />
19+
1520
```js
1621
import { proxy } from 'valtio'
1722

docs/how-tos/how-to-reset-state.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,12 @@ const reset = () => {
3838
}
3939
```
4040

41-
> [!NOTE]
41+
<br />
42+
43+
> ℹ️ &nbsp; Note
44+
>
4245
> Using `structuredClone()`
4346
47+
<br />
48+
4449
In 2022, there was a new global function added called `structuredClone` that is widely available in most modern browsers. You can use `structuredClone` in the same way as `deepClone` above, however `deepClone` is preferred as it will be aware of any `ref`s in your state.

docs/how-tos/how-valtio-works.mdx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,6 @@ s7.obj === s8.obj // is true because obj is not changed
7878

7979
### `useSnapshot()` by examples
8080

81-
> [!NOTE]
82-
> In the example below, we are bringing the state m
83-
8481
```jsx
8582
import { proxy, useSnapshot } from 'valtio'
8683

docs/resources/libraries.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@ section: 'Resources'
88

99
Valtio provides bare necessities for proxy state management which is great for most projects; however, some users wish to extend the library's feature set. This can be done using 3rd-party libraries created by the community.
1010

11-
> [!WARNING]
11+
<br />
12+
13+
> ⚠️ &nbsp; Warning
14+
>
1215
> Disclaimer: These libraries may have bugs, limited maintenance, or other limitations and are not officially recommended by pmndrs or the valtio maintainers. This list is to provide a good starting point for someone looking to extend valtio's feature set.
1316
17+
<br />
18+
1419
- [electron-valtio](https://github.com/water-a/electron-valtio) - Share state between the Electron main process and various renderer windows via valtio
1520

1621
- [eslint-plugin-valtio](https://github.com/pmndrs/eslint-plugin-valtio) - Eslint plugin for valtio

0 commit comments

Comments
 (0)