diff --git a/docs/api/advanced/snapshot.mdx b/docs/api/advanced/snapshot.mdx index 99cc06cb..45dd631f 100644 --- a/docs/api/advanced/snapshot.mdx +++ b/docs/api/advanced/snapshot.mdx @@ -103,14 +103,17 @@ This should be fine, because the expectation is that they execute very quickly ( ## Vanilla JavaScript -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. +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 un-proxied objects or check if objects have changed. It also resolves promises.
-> 💡 Tip -> -> If you are using valtio outside of react, import from `valtio/vanilla` -> -> ```js -> import { proxy, snapshot } from 'valtio/vanilla' -> ``` +
+💡 Tip + +If you are using valtio outside of react, import from `valtio/vanilla` + +```js +import { proxy, snapshot } from 'valtio/vanilla' +``` + +
diff --git a/docs/api/basic/useSnapshot.mdx b/docs/api/basic/useSnapshot.mdx index ee63760a..dc300821 100644 --- a/docs/api/basic/useSnapshot.mdx +++ b/docs/api/basic/useSnapshot.mdx @@ -186,11 +186,15 @@ In dev mode, `useSnapshot` uses React's `useDebugValue` to output a list of fiel
-> !!   There are two disclaimers to -> using the debug value -> -> 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. -> 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. +
+!!   There are two disclaimers to using the debug value + +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. +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. + +
+ +

diff --git a/docs/api/hacks/internals.mdx b/docs/api/hacks/internals.mdx index 68387404..a87c4a7a 100644 --- a/docs/api/hacks/internals.mdx +++ b/docs/api/hacks/internals.mdx @@ -8,10 +8,10 @@ description: '' Valtio exposes some internal capabilities. This isn't for app developers. Use it at your own risk. -# unstable_getInternalStates +# `unstable_getInternalStates` This function exposes the internal states. Modifying such states may result in wrong behaviors. You need to understand the [source code](https://github.com/pmndrs/valtio/blob/main/src/vanilla.ts) thoroughly to use it. -# unstable_replaceInternalFunction +# `unstable_replaceInternalFunction` This function exposes a way to replace some internal functions. It can easily break things. You need to understand the [source code](https://github.com/pmndrs/valtio/blob/main/src/vanilla.ts) thoroughly to use it. diff --git a/docs/guides/computed-properties.mdx b/docs/guides/computed-properties.mdx index 7884ede8..1710c808 100644 --- a/docs/guides/computed-properties.mdx +++ b/docs/guides/computed-properties.mdx @@ -10,8 +10,13 @@ In Valtio you can use object & class getters and setters to create computed prop
-> ℹ️   Note -> 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. +
+ℹ️   Note + +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. + +
+

@@ -42,8 +47,12 @@ However, when you make a snapshot, calls to `snap.doubled` are effectively cache
-> ℹ️   Note -> In the current implementation a computed property should only reference \*\*\_sibling\*\*\* properties, otherwise you'll encounter weird bugs. For example: +
+ℹ️   Note + +In the current implementation a computed property should only reference \*\*\_sibling\*\*\* properties, otherwise you'll encounter weird bugs. For example: + +

diff --git a/docs/how-tos/how-to-easily-access-the-state-from-anywhere-in-the-application.mdx b/docs/how-tos/how-to-easily-access-the-state-from-anywhere-in-the-application.mdx index bfa4587c..54f7649b 100644 --- a/docs/how-tos/how-to-easily-access-the-state-from-anywhere-in-the-application.mdx +++ b/docs/how-tos/how-to-easily-access-the-state-from-anywhere-in-the-application.mdx @@ -47,9 +47,16 @@ export { state, useSnapshot, subscribe }
-> 💡   Using TypeScript? Here are some links for reference -> -> https://www.totaltypescript.com/tsconfig-cheat-sheet
> https://github.com/tsconfig/bases
> https://www.typescriptlang.org/tsconfig/ +
+ 💡   Using TypeScript? Here are some links for reference + +https://www.totaltypescript.com/tsconfig-cheat-sheet
+https://github.com/tsconfig/bases
+https://www.typescriptlang.org/tsconfig/ + +
+ +

diff --git a/docs/how-tos/how-to-organize-actions.mdx b/docs/how-tos/how-to-organize-actions.mdx index b5c61e2b..10b9dc9a 100644 --- a/docs/how-tos/how-to-organize-actions.mdx +++ b/docs/how-tos/how-to-organize-actions.mdx @@ -11,9 +11,14 @@ Here's some recipes to show various patterns are possible.
-> ℹ️   Note -> -> This way is preferred as it is better for code splitting. +
+ℹ️   Note + +This way is preferred as it is better for code splitting. + +
+ +

diff --git a/docs/how-tos/how-to-reset-state.mdx b/docs/how-tos/how-to-reset-state.mdx index 8ecee204..87b878e9 100644 --- a/docs/how-tos/how-to-reset-state.mdx +++ b/docs/how-tos/how-to-reset-state.mdx @@ -40,10 +40,13 @@ const reset = () => {
-> ℹ️   Note -> -> Using `structuredClone()` +
+ℹ️   Note + +Using `structuredClone()`
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. + +
diff --git a/docs/resources/libraries.mdx b/docs/resources/libraries.mdx index f90d63cc..361f328e 100644 --- a/docs/resources/libraries.mdx +++ b/docs/resources/libraries.mdx @@ -10,9 +10,12 @@ Valtio provides bare necessities for proxy state management which is great for m
-> ⚠️   Warning -> -> 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. +
+⚠️   Warning + +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. + +

@@ -32,6 +35,8 @@ Valtio provides bare necessities for proxy state management which is great for m - [valtio-persist](https://github.com/Noitidart/valtio-persist) - Flexible and performant saving of state to disk. +- [valtio-reactive](https://github.com/valtiojs/valtio-reactive) - Valtio-reactive makes valtio a reactive library. + - [valtio-signal](https://github.com/dai-shi/valtio-signal) - Another React binding for Valtio proxy state - [valtio-yjs](https://github.com/dai-shi/valtio-yjs) - Valtio-yjs makes yjs state easy diff --git a/website/styles/prism-theme.css b/website/styles/prism-theme.css index 82862d2b..cb53ed1a 100644 --- a/website/styles/prism-theme.css +++ b/website/styles/prism-theme.css @@ -27,7 +27,7 @@ pre[class*="language-"] { } /* Code blocks */ -pre[class*="language-"] { +pre { padding: 1em; margin: 0.5em 0; overflow: auto; @@ -35,8 +35,18 @@ pre[class*="language-"] { } :not(pre) > code[class*="language-"], -pre[class*="language-"] { +code { background: #2e3440; + padding: 0.1em; +} + +code { + font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", + monospace; +} + +code::before, code::after { + content: '' !important; } /* Inline code */ @@ -123,3 +133,38 @@ pre[class*="language-"] { .token.entity { cursor: help; } + +blockquote.tip p::before, +blockquote.tip p::after, +blockquote.note p::before, +blockquote.note p::after, +blockquote.warning p::before, +blockquote.warning p::after, +blockquote.important p::before, +blockquote.important p::after { + content: '' !important; +} + +blockquote { + padding-left: 1.5rem; +} + +.tip { + border-left: 5px solid #88c0d0; +} + +.note { + border-left: 5px solid #81a1c1; +} + +.warning { + border-left: 5px solid #ebcb8b; +} + +.important { + border-left: 5px solid #a3be8c; +} + +code { + +}