Update docs

This commit is contained in:
Aaron Smith 2023-09-28 16:39:25 +01:00
parent 9b6be14441
commit 46937c6979
16 changed files with 157 additions and 116 deletions

View file

@ -1,7 +1,7 @@
# Root Reactive Scopes
Any reactive scopes created, such as one from `effect()`, must be done so within
a "root" reactive scope. This is the main purpose of `mount()`, which you use
Any reactive scopes created, such as by `effect()`, must be done so within a
"root" reactive scope. This is the main purpose of `mount()`, which you use
once at the top level to create your app as shown in the first introduction.
This is so that when the app is unmounted, it can clean up any reactive scopes
@ -25,7 +25,18 @@ vide.mount(App) -- works!
App() -- will error since effect() was not called within a reactive scope
```
The reactive graph for the above example:
Mounting returns a function that when called will destroy any reactive scopes
created during the `mount()` call.
```lua
local unmount = mount(App)
unmount()
```
Vide's reactivity can be represented graphically, as a *reactive graph*.
The reactive graph for the above example looks like so:
```mermaid
%%{init: {
@ -40,10 +51,18 @@ The reactive graph for the above example:
}
}}%%
flowchart
graph
subgraph root
subgraph root["mount"]
direction LR
count --> effect
end
```
When the `mount` scope is destroyed, the `effect` scope will also be destroyed
since it was created within it.
You don't need to worry about ensuring all your effects are created within a
root scope, since you should be creating all your UI and corresponding effects
within a top-level `mount()` call that puts all your UI together. So it is safe
to assume that any effect you create will be created under this top level scope.