hakowork/vide
3
0
Fork 0
mirror of https://github.com/centau/vide.git synced 2026-08-20 14:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update docs

Browse source
This commit is contained in:
Aaron Smith 2023-09-27 16:44:39 +01:00
parent 3959f5119e
commit 9b6be14441
14 changed files with 308 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

41
docs/tut/crash-course/5-effect.md
View file

@ -1,8 +1,8 @@
# Effects
Effects are functions that are ran in response to source updates. They are
called effects because they cause *side-effects* when reacting to source updates
which are pure.
called effects because they cause *side-effects* when reacting to source
updates.
Effects are created using `effect()`.
@ -26,10 +26,10 @@ from inside a reactive scope will be tracked, so that if any of those sources
update, the effect will be reran too.
The callback is first ran immediately inside the `effect()` call to initially
figure out what sources are being used.
track sources used.
Effects also work with derived sources, it doesn't matter how deeply nested a
source is.
Effects also work with derived sources, it doesn't matter how deeply nested
inside a function a source is.
```lua
local source = vide.source
@ -50,15 +50,7 @@ count(2)
-- "doubled count: 4" printed
```
Derived sources should be a *pure computation*. A pure computation is one where
the same input will always produce the same output.
All observable changes to the user are considered to be side-effects of pure
computations.
Sources, derived sources, and effects form what is called a *reactive graph*.
In the above example, the following graph is formed. Anywhere
an update occures, everything further down the graph is updated.
The reactive graph for the above example:
```mermaid
%%{init: {
@ -69,25 +61,12 @@ an update occures, everything further down the graph is updated.
"primaryBorderColor": "#1B1B1F",
"lineColor": "#79B8FF",
"tertiaryColor": "#161618",
"tertiaryBorderColor": "#161618"
"tertiaryBorderColor": "#fff"
}
}}%%
flowchart LR
count --> doubled --> effect
count --> effect
```
You should not update other sources using an effect. Improper usage can lead to
a cyclic loop in the graph, causing an infinite loop when it tries to update.
Sources should be derived instead.
## Root Reactive Scopes
Effects must be created within another reactive scope. This is so that the
effect itself can be tracked and later freed when the parent reactive scope is
destroyed, such as from unmounting an app. The example code above will not
actually work unless it is ran inside a root reactive scope, such as one created
by `vide.mount(function)`. This generally isn't a concern since you can assume
that all your components will be created within a single `mount()` call, which
happens only once at the top level, where you put together your UI and parent it
to a ScreenGUI.