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

66
docs/tut/crash-course/6-stateful-component.md
View file

@ -1,66 +0,0 @@
# Stateful Components
A stateful component is a component that stores and displays some data.
Stateful components in Vide are created using sources and effects - sources to
store the data, and effects to display the data.
```lua
local create = vide.create
local source = vide.source
local effect = vide.effect
local function Counter()
local count = source(0)
local instance = create "TextButton" {
Activated = function()
count(count() + 1)
end
}
effect(function()
instance.Text = "count: " .. count()
end)
return instance
end
```
Above is an example of a counter component, that when clicked, will increment
its internal count, and automatically update its text to reflect that count.
Each instance of `Counter()` will maintain its own independent count, since the
count source is created inside the scope of the component.
External sources can also be passed into components for them to use.
```lua
local function Counter(props: { count: () -> number })
local count = props.count
local instance = create "TextButton" {
Activated = function()
count(count() + 1)
end
}
effect(function()
instance.Text = "count: " .. count()
end)
return instance
end
local count = source(0)
Counter {
count = count
}
count(1) -- the Counter component will update to display this count
```
Sources can be created internally or passed in from externally, there are no
restrictions on how they are used as long as the effect is created within a
reactive scope so that it can be tracked.