mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
132 lines
3.2 KiB
Markdown
132 lines
3.2 KiB
Markdown
# Concepts Summary
|
|
|
|
A summary of all the concepts covered during the crash course.
|
|
|
|
## Source
|
|
|
|
A source of data.
|
|
|
|
Stores a single value that can be updated by the user.
|
|
|
|
## Effect
|
|
|
|
Anything that happens in reponse to a source update.
|
|
|
|
Vide has built-in functions to create effects such as
|
|
|
|
- `effect()` - runs arbitrary user code on source update
|
|
- `derive()` - updates a derived source on source update
|
|
|
|
## Reactive Scope
|
|
|
|
A scope created by certain Vide functions where source updates can be tracked,
|
|
and cleanups queued.
|
|
|
|
When a source used inside a reactive scope is updated, the reactive scope will
|
|
rerun.
|
|
|
|
Reactive scopes are created by functions such as
|
|
|
|
- `root()`
|
|
- `effect()`
|
|
- `derive()`
|
|
|
|
## Owner
|
|
|
|
A reactive scope created within an outer reactive scope, is *owned* by the outer
|
|
reactive scope.
|
|
|
|
When a reactive scope is re-ran or destroyed, all reactive scopes owned by it
|
|
are also destroyed.
|
|
|
|
Vide does not let you create reactive scopes without owners.
|
|
|
|
## Root Reactive Scope
|
|
|
|
A top-level reactive scope. These scopes are an exception to the owner rule.
|
|
|
|
Created by `root()`, which `mount()` uses internally.
|
|
|
|
A root reactive scope can be created on its own. It allows other reactive scopes
|
|
to be created with an owner.
|
|
|
|
Root reactive scopes must be destroyed manually by the user, a function to do
|
|
this is given by `root()`.
|
|
|
|
A root reactive scope can be created within another reactive scope and it will
|
|
not automatically be owned by that scope.
|
|
|
|
## Cleanup
|
|
|
|
Cleans up the result from an effect.
|
|
|
|
Unneeded in most cases, a cleanup is arbitrary code that can be ran before
|
|
a reactive scope is rerun or destroyed, so that the result from the previous
|
|
run can be cleaned up. A cleanup can be queued by using `cleanup()` within
|
|
a reactive scope.
|
|
|
|
## Tracking
|
|
|
|
Reactive scopes are tracking by default, meaning sources read from within scope
|
|
will be tracked.
|
|
|
|
A reactive scope can be made temporarily non-tracking within `untrack()`, so
|
|
that any source used will be ignored. The only function that creates a
|
|
nontracking reactive scope by default is `root()`.
|
|
|
|
## Reactive Graph
|
|
|
|
The combination of reactive scopes can viewed graphically, called a
|
|
*reactive graph*. This can be a more intuitive way to think of the
|
|
relationships between effects and the sources they depend on.
|
|
|
|
### Code
|
|
|
|
```lua
|
|
local count = source(0)
|
|
|
|
root(function()
|
|
local text = derive(function()
|
|
return "count: " .. text()
|
|
end)
|
|
|
|
effect(function()
|
|
print(text())
|
|
end)
|
|
end)
|
|
```
|
|
|
|
### Graph resulting from code
|
|
|
|
```mermaid
|
|
%%{init: {
|
|
"theme": "base",
|
|
"themeVariables": {
|
|
"primaryColor": "#1B1B1F",
|
|
"primaryTextColor": "#fff",
|
|
"primaryBorderColor": "#1B1B1F",
|
|
"lineColor": "#79B8FF",
|
|
"tertiaryColor": "#161618",
|
|
"tertiaryBorderColor": "#1C1C1F"
|
|
}
|
|
}}%%
|
|
|
|
graph LR
|
|
|
|
subgraph root
|
|
text --> effect
|
|
end
|
|
|
|
count --> text
|
|
```
|
|
|
|
Notes:
|
|
|
|
- Since `count` is a source, not an effect, it can exist
|
|
outside of a root reactive scope.
|
|
- An update to `count` will cause `text` to rerun, which
|
|
then causes `effect` to rerun.
|
|
- When the root reactive scope is destroyed, `text` and
|
|
`effect` will be destroyed alongside it, since they are
|
|
owned by it. `count` will be untouched and future updates
|
|
to `count` will have no effect.
|