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 crash course

Browse source
This commit is contained in:
Aaron Smith 2023-09-19 14:52:28 +01:00
parent 520b0cca32
commit bb08e2e97a
15 changed files with 272 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

50
docs/tut/crash-course/4-source.md
View file

@ -1,31 +1,15 @@
# Source
*Sources* in Vide are special objects that store a single value. They are the
core of reactivity in Vide, as updates to a source can automatically update
properties or other sources depending on that source.
core of reactivity in Vide. Each source represents a source of data, and they
can be composed and derived to create new sources of data.
A source in Vide can be created using `source()`.
```lua
local vide = require(vide)
local source = vide.source
local function Counter()
local count = source(0)
return create "TextButton" {
Position = UDim2.fromOffset(300, 300),
Size = UDim2.fromOffset(200, 50),
Text = count,
Activated = function()
count(count() + 1)
end
}
end
mount(function() return create "ScreenGui" { Counter {} } end, game.StarterGui)
local count = source(0)
```
The value passed to `source()` is the initial value of the source.
@ -37,15 +21,23 @@ by calling it with no arguments.
count(count() + 1) -- increment count by 1
```
Each call of `Counter {}` will create a new counter, each maintaining their
own count.
Sources can be *derived* by wrapping them in functions. A wrapped source
effectively becomes a new source.
When you assign a function to a non-event property, Vide will immediately run it
and check what sources were read from. When updating those sources again after,
this function will be re-ran and its return value applied to the property.
This is known as *binding* properties.
```lua
local count = source(0)
This allows you as the programmer to not need to manually update UI as the state
of your program changes. You just define how the data maps to UI, and Vide's
reactive system will automatically update any properties depending on sources
that are updated.
local text = function()
return "count: " .. tostring(count())
end
print(text()) -- "count: 0"
count(1)
print(text()) -- "count: 1"
```
You may be wondering why we are using sources instead of plain variables to do
this. The reason is that Vide has an entire reactive system based on sources.
You can write functions to automatically run each time a source is updated. This
can be to update properties, create new instances, print to the terminal, etc.
How this is done will be covered next.