### source() Example

Source: https://centau.github.io/vide/api/reactivity-core

Example demonstrating how to create, read, and set a source.

```luau
local count = source(0)
print(count())-- 0
count(count() + 1)
print(count()) -- 1
```

--------------------------------

### Simplest example using show()

Source: https://centau.github.io/vide/tut/crash-course/11-dynamic-scopes.html

This is a complete example of rendering UI which has a single button that toggles the opening of a menu.

```luau
local source = vide.source
local create = vide.create
local show = vide.show
local root = vide.root

function Button(props: { Text: string, Activated: () -> () })
    return create "TextButton" {
        Text = props.Text,
        Activated = props.Activated
    }
end

function Menu()
    return create "TextLabel" {
        Text = "This is a menu"
    }
end

function App()
    local toggled = source(false)

    return create "ScreenGui" {
        Button {
            Text = "Toggle Menu",
            Activated = function()
                toggled(not toggled())
            end
        },

        show(toggled, Menu) 
    }
end

root(function()
    App().Parent = game.StarterGui
end)
```

--------------------------------

### derive() Example

Source: https://centau.github.io/vide/api/reactivity-core

Example demonstrating the usage of the derive() function.

```luau
local count = source(0)
local text = derive(function() return `count: {count()}` end)

print(text()) -- "count: 0"

count(1)

print(text()) -- "count: 1"
```

--------------------------------

### Basic Action Example

Source: https://centau.github.io/vide/tut/crash-course/12-actions.html

A simple example demonstrating how to create a TextLabel with an action that prints its text when the instance is created.

```luau
local action = vide.action

create "TextLabel" {
    Text = "test",

    action(function(instance)
        print(instance.Text)
    end)
}

-- will print "test"
```

--------------------------------

### effect() Example

Source: https://centau.github.io/vide/api/reactivity-core

Example demonstrating the usage of the effect() function.

```luau
local count = source(1)

effect(function()
    print(count())
end)

-- prints 1

count(2)

-- prints 2
```

--------------------------------

### values() Example

Source: https://centau.github.io/vide/api/reactivity-dynamic.html

An example demonstrating the usage of the values() function to display items.

```luau
type Item = {
    name: string,
    icon: number
}

local items = source {} :: () -> Array<Item>

local displays = values(items, function(item, i) 
    return ItemDisplay {
        Name = function()
            return i() .. ": " .. item.Name
        end

        Image = "rbxassetid://" .. item.icon,
    }
end)
```

--------------------------------

### context() Example

Source: https://centau.github.io/vide/api/reactivity-utility.html

Demonstrates creating and using a context with context() for managing state across scopes.

```luau
local theme = context()

local function Button()
    print(theme())
end

root(function()
    theme("light", function()
         Button() -- prints "light"

        theme("dark", function()
            Button() -- prints "dark"
        end)
    end)
end)
```

--------------------------------

### cleanup() Example

Source: https://centau.github.io/vide/api/reactivity-utility.html

Demonstrates how cleanup() queues a callback to run when a scope is reran or destroyed.

```luau
local count = source(0)

local destroy = root(function()
    effect(function()
        count()

        cleanup(function()
            print "cleaned"
        end)
    end)
end)

-- nothing printed yet
count(1) -- prints "cleaned"
count(2) -- prints "cleaned"
destroy() -- prints "cleaned"
```

--------------------------------

### mount() example

Source: https://centau.github.io/vide/api/creation.html

Demonstrates how to use the mount() function to render a component into the game's StarterGui.

```luau
local function App()
    return create "ScreenGui" {
        create "TextLabel" { Text = "Vide" }
    }
end

local destroy = mount(App, game.StarterGui)
```

--------------------------------

### batch() Example

Source: https://centau.github.io/vide/api/reactivity-utility.html

Illustrates how batch() prevents effects from running until after a function completes, improving performance.

```luau
local a = source(0)
local b = source(0)

effect(function()
    print(a() + b())
end)

-- prints "0"

batch(function()
    a(1) -- no print
    b(2) -- no print
end)

-- prints "3"
```

--------------------------------

### Creating a ScreenGui with nested elements

Source: https://centau.github.io/vide/tut/crash-course/2-creation.html

This example demonstrates how to create a ScreenGui with a Frame, TextLabels, and a TextButton using vide.create(). It also shows how to set properties, add children, and connect events.

```luau
local create = vide.create

return create "ScreenGui" {
    create "Frame" {
        AnchorPoint = Vector2.new(0.5, 0.5),
        Position = UDim2.fromScale(0.5, 0.5),
        Size = UDim2.fromScale(0.4, 0.7),

        create "TextLabel" {
            Text = "hi"
        },

        create "TextLabel" {
            Text = "bye"
        },

        create "TextButton" {
            Text = "click me",

            Activated = function()
                print "clicked!"
            end
        }
    }
}
```

--------------------------------

### Basic element creation example

Source: https://centau.github.io/vide/api/creation.html

Demonstrates how to use the create() function to create a TextButton with specific properties and an event handler.

```luau
local frame = create "TextButton" {
    Name = "Button",
    Size = UDim2.fromOffset(200, 160),

    Activated = function()
        print "clicked"
    end,

    create "UICorner" {}
}
```

--------------------------------

### Cleanup Example

Source: https://centau.github.io/vide/tut/crash-course/10-cleanup.html

Demonstrates how to use the cleanup() function to queue callbacks for reactive scope destruction or component unmounting.

```luau
local root = vide.root
local source = vide.source
local effect = vide.effect
local cleanup = vide.cleanup

local count = source(0)

local destroy = root(function()
    effect(function()
        local x = count()
        cleanup(function() print(x) end)
    end)

    cleanup(function() print "root destroyed" end)
end)

count(1) -- prints "0"
count(2) -- prints "1"
destroy() -- prints "2" and "root destroyed"
```

--------------------------------

### Action to listen to changed properties example

Source: https://centau.github.io/vide/api/creation.html

Provides an example of using the action() function to create a custom action that listens for changes to a specific property of an instance.

```luau
local function changed(property: string, fn: (new) -> ())
    return action(function(instance)
        local cn = instance:GetPropertyChangedSignal(property):Connect(function()
            fn(instance[property])
        end)

        -- disconnect on scope destruction to allow gc of instance
        cleanup(function()
            cn:Disconnect()
        end)
    end)
end

local output = source ""

create "TextBox" {
    -- will update the output source anytime the text property is changed
    changed("Text", output)
}
```

--------------------------------

### Strict Mode Example

Source: https://centau.github.io/vide/tut/crash-course/13-strict-mode.html

Example demonstrating how strict mode affects derived sources and effects by running them twice.

```luau
local source = vide.source
local effect = vide.effect

vide.strict = true

local count = source(0)

local ran = 0
effect(function()
    count()
    ran += 1
end)

print(ran) -- 2
count(1)
print(ran) -- 4
```

--------------------------------

### Scope Example

Source: https://centau.github.io/vide/tut/crash-course/6-scope.html

Demonstrates the creation and behavior of stable and reactive scopes using `root()`, `source()`, and `effect()`.

```luau
local root = vide.root
local source = vide.source
local effect = vide.effect

local count = source(0)

local function setup()
    effect(function()
        print(count())
    end)
end

setup() -- error, effect() tried to create a reactive scope with no stable scope

local destroy = root(setup) -- ok since effect() was called in a stable scope

count(1) -- prints "1"
count(2) -- prints "2"

destroy()

count(3) -- reactive scope created by effect() is destroyed, it does not rerun
```

--------------------------------

### untrack() Example

Source: https://centau.github.io/vide/api/reactivity-utility.html

Shows how untrack() can be used to read from sources without triggering reactive scope updates.

```luau
local a = source(0)
local b = source(0)

local sum = derive(function()
    return a() + untrack(b)
end)

print(sum()) -- 0
b(1) -- untracked so reactive scope created by derive() does not rerun
print(sum()) -- 0
a(1) -- reactive scope created by derive() reruns
print(sum()) -- 2
```

--------------------------------

### Example Code

Source: https://centau.github.io/vide/tut/crash-course/14-concepts.html

This code demonstrates the creation of a source, a derived source, and an effect within a root scope.

```luau
local count = source(0)

root(function()
    local text = derive(function()
        return "count: " .. count()
    end)

    effect(function()
        print(text())
    end)
end)
```

--------------------------------

### Count Display Component Example

Source: https://centau.github.io/vide/tut/crash-course/7-reactive-component.html

An example of a component that displays an external count passed as a prop.

```luau
local function CountDisplay(props: { count: () -> number })
    local count = props.count

    local instance = create "TextLabel" {}

    effect(function()
        instance.Text = "count: " .. count()
    end)

    return instance
end

local count = source(0)

CountDisplay {
    count = count
}

count(1) -- the CountDisplay component will update to display this count
```

--------------------------------

### Enabling Strict Mode

Source: https://centau.github.io/vide/api/strict-mode.html

Example of how to enable strict mode globally in the Vide library.

```luau
vide.strict = true
```

--------------------------------

### Action for Property Change Listener

Source: https://centau.github.io/vide/tut/crash-course/12-actions.html

An example showing how to create a reusable action that listens for property changes on an instance and updates a reactive source. It also demonstrates using `effect` to print the updated value and `cleanup` to manage connections.

```luau
local action = vide.action
local source = vide.source
local effect = vide.effect
local cleanup = vide.cleanup

local function changed(property: string, callback: (new) -> ()) 
    return action(function(instance)
        local connection = instance:GetPropertyChangedSignal(property):Connect(function()
            callback(instance[property])
        end)

        -- remember to clean up the connection when the reactive scope the action
        -- is ran in is destroyed, so the instance can be garbage collected
        cleanup(connection)
    end)
end

local output = source ""

local instance = create "TextBox" {
    changed("Text", output)
}

effect(function()
    print(output())
end)

instance.Text = "foo" -- "foo" will be printed by the effect
```

--------------------------------

### Recreating `indexes()`

Source: https://centau.github.io/vide/tut/advanced/dynamic-scopes.html

This is a more complex example demonstrating the recreation of the `indexes()` function. It manages multiple scopes independently using `root()` and handles the creation, update, and destruction of scopes for dynamic collections. It also includes cleanup logic to destroy all scopes when the parent scope is destroyed.

```luau
local function indexes<I, VI, VO>(
    input: () -> Map<I, VI>,
    transform: (value: () -> VI, index: I) -> VO
)
    local index_caches = {} :: Map<I, {
        previous_input: VI,
        output: VO,
        source: (VI) -> VI,
        destroy: () -> ()
    }?>

    -- destroy all scopes if the parent scope is destroyed
    cleanup(function()
        for _, cache in index_caches do
            assert(cache).destroy()
        end
    end)

    return derive(function()
        local new_input = input()

        -- destroy scopes of removed indexes
        for i, cache in index_caches do
            if new_input[i] == nil then
                assert(cache).destroy()
                index_caches[i] = nil
            end
        end

        -- create scopes or update sources of added or changed index values
        for i, v in new_input do
            local cache = index_caches[i]

            if cache == nil then -- no scope created for this index, create one
                local src = source(v)

                local destroy, result = root(function()
                    return transform(src, i)
                end)

                index_caches[i] = {
                    destroy = destroy,
                    source = src,
                    output = result,
                    previous_input = v
                }
            elseif cache.previous_input ~= v then -- scope exists, update source
                cache.previous_input = v
                cache.source(v)
            else -- scope exists and value has not changed; do nothing
            end
        end

        -- return the cached output values as an array
        local array = table.create(#index_caches)

        for _, cache in index_caches do
            table.insert(array, assert(cache).output)
        end
        
        return array
    end)
end
```

--------------------------------

### Implicit Effect for Children

Source: https://centau.github.io/vide/tut/crash-course/8-implicit-effect.html

This example shows how to use implicit effects for managing children. A source returning an instance or an array of instances will automatically trigger effects to update the children of the parent.

```luau
local items = source {
    create "TextLabel" { Text = "A" }
}

local function List(props: { children: () -> { Instance } })
    return create "Frame" {
        create "UIListLayout" {},
        props.children
    }
end

local list = List { children = items } -- creates a list with text label "A"

items {
    create "TextLabel" { Text = "B" },
    create "TextLabel" { Text = "C" }
}

-- this will automatically unparent text label "A", and parent labels "B" and "C"
```

--------------------------------

### Implicit Effect

Source: https://centau.github.io/vide/tut/crash-course/8-implicit-effect.html

This example demonstrates how to implicitly create an effect to update the Text property of a TextButton. When the count source is updated, the Text property is automatically updated without explicitly defining an effect.

```luau
local create = vide.create
local source = vide.source

local function Counter()
    local count = source(0)

    return create "TextButton" {
        Activated = function()
            count(count() + 1)
        end,

        Text = function()
            return "count: " .. count()
        end
    }
end
```

--------------------------------

### Creating a source

Source: https://centau.github.io/vide/tut/crash-course/4-source.html

A source can be created using `source()`. The value passed to `source()` is the initial value of the source.

```luau
local source = vide.source

local count = source(0)
```

--------------------------------

### Optimized Derivation with derive()

Source: https://centau.github.io/vide/tut/crash-course/9-derived-source.html

Shows how to use derive() to create a new source that runs its function reactively only when its dependencies update, caching results.

```luau
local source = vide.source
local effect = vide.effect
local derive = vide.derive

local count = source(0)

local text = derive(function()
    print "ran"
    return "count: " .. tostring(count())
end)

effect(function() text() end)
effect(function() text() end)

count(1) -- prints "ran" x1
```

--------------------------------

### Pure Function vs. Derived Source Performance

Source: https://centau.github.io/vide/api/reactivity-core

Comparison illustrating the performance difference between a pure function and a derived source when read multiple times.

```luau
local count = source(0)

local text = function()
    print "ran"
    return `count: {count()}`
end

count(1)
print(text()) -- prints "ran" followed by "count: 1"
print(text()) -- prints "ran" followed by "count: 1"
```

```luau
local count = source(0)

local text = derive(function() 
    print "ran"
    return `count: {count()}`
end) 

count(1) -- prints "ran"
print(text()) -- prints "count: 1"
print(text()) -- prints "count: 1"
```

--------------------------------

### show() REACTIVE

Source: https://centau.github.io/vide/api/reactivity-dynamic.html

Shows a component if the source is truthy. Optionally shows a fallback component if the source is falsey.

```luau
function show<T>(source: () -> unknown, component: Constructor<T>): () -> T?
function show<T, U>(source: () -> unknown, component: Constructor<T>, fallback: () -> U): () -> T | U

type Constructor<T> = () -> (T, number?)
```

--------------------------------

### Recreating `switch()`

Source: https://centau.github.io/vide/tut/advanced/dynamic-scopes.html

This snippet shows the implementation of the `switch()` function, which maps a key to a component and renders it conditionally. It uses `derive` and `untrack` similar to the `show()` function.

```luau
local function switch(key)
    return function(map)
        return derive(function()
            local component = map[key()]
            return if component then untrack(component) else nil
        end)
    end
end
```

--------------------------------

### mount() function signature

Source: https://centau.github.io/vide/api/creation.html

Defines the type signature for the mount() function, which runs a function in a new stable scope and optionally applies its result to a target instance.

```luau
function mount<T>(component: () -> T, target: Instance?): () -> ()
```

--------------------------------

### Setting and reading a source's value

Source: https://centau.github.io/vide/tut/crash-course/4-source.html

The value of a source can be set by calling it with an argument, and can be read by calling it with no arguments.

```luau
count(count() + 1) -- increment count by 1
```

--------------------------------

### spring()

Source: https://centau.github.io/vide/api/animation.html

Returns a new source with a value always moving towards the input source value.

```luau
function spring<T>(
    source: () -> T & Animatable,
    period: number = 1,
    damping_ratio: number = 1
): (() -> T, SpringControl<T>)

type Animatable = number | CFrame | Color3 | UDim | UDim2 | Vector2 | Vector3 | Rect

type SpringControl<T> = ({
    position: T?,
    velocity: T?,
    impulse: T?
}) -> ()

```

--------------------------------

### create() function signature

Source: https://centau.github.io/vide/api/creation.html

Defines the type signature for the create() function, which can accept a string class name or an Instance, and returns a function to apply properties.

```luau
function create(class: string): (Properties) -> Instance
function create(instance: Instance): (Properties) -> Instance

type Properties = Map<string|number, unknown>
```

--------------------------------

### Using indexes() to create a component for each index in a table

Source: https://centau.github.io/vide/tut/crash-course/11-dynamic-scopes.html

Each component created is done so in a new and independent stable scope. The indexes of the table are checked each source update to prevent redunant destruction and recreation of UI elements.

```luau
local source = vide.source
local create = vide.create
local indexes = vide.indexes
local root = vide.root

local function Todo(props: {
    Text: () -> string,
    Position: number,
    Activated: () -> ()
})
    return create "TextButton" {
        Text = function() return props.Position .. ": " .. props.Text() end,
        LayoutOrder = props.Position,
        Activated = Activated
    }
end

local function TodoList(props: { List: () -> Array<string> })
    return create "Frame" {
        create "UIListLayout" {},

        indexes(props.List, function(text, i)  
            return Todo { 
                Text = text,
                Position = i,
                Activated = function() -- remove the todo when clicked
                    local list = props.List()
                    table.remove(list, i)
                    props.List(list)
                end
            }
        end)
    }
end

function App()
    local list = source {
        "finish the crash course",
        "star Vide's GitHub"
    }

    return create "ScreenGui" {
        TodoList { List = list },
    }
end

root(function()
    App().Parent = game.StarterGui
end)
```

--------------------------------

### Recreating `show()`

Source: https://centau.github.io/vide/tut/advanced/dynamic-scopes.html

This code snippet demonstrates how to recreate the basic `show()` function, which conditionally renders a component based on a toggle. It highlights the use of `untrack()` to create a new stable scope, preventing errors when a reactive scope is nested within another.

```luau
local function show(toggle: () -> unknown, component: () -> Instance)
    return derive(function()
        return if toggle() then untrack(component) else nil
    end)
end
```

--------------------------------

### indexes() REACTIVE

Source: https://centau.github.io/vide/api/reactivity-dynamic.html

Shows a component for each index in a table.

```luau
function indexes<KI, VI, VO>(
    source: () -> Map<KI, VI>,
    constructor: (value: () -> VI, index: KI) -> (VO, number?)
): Array<VO>
```

```luau
type Item = {
    name: string,
    icon: number
}

local items = source {} :: () -> Array<Item>

local displays = indexes(items, function(item, i)
    return ItemDisplay {
        Name = function()
            return i .. ": " .. item().name
        end,

        Image = function()
            return "rbxassetid://" .. item().icon
        end,
    }
end)
```

--------------------------------

### Derived sources

Source: https://centau.github.io/vide/tut/crash-course/4-source.html

Sources can be _derived_ by wrapping them in functions.

```luau
local count = source(0)

local text = function()
    return "count: " .. tostring(count())
end

print(text()) -- "count: 0"
count(1)
print(text()) -- "count: 1"
```

--------------------------------

### Basic Effect Creation

Source: https://centau.github.io/vide/tut/crash-course/5-effect.html

Demonstrates the creation of an effect that prints the value of a source when it changes.

```luau
local source = vide.source
local effect = vide.effect

local count = source(0)

effect(function()
    print("count: " .. count())
end)

-- "count: 0" printed
count(1)
-- "count: 1" printed
```

--------------------------------

### switch() REACTIVE

Source: https://centau.github.io/vide/api/reactivity-dynamic.html

Shows one of a set of components depending on a source and a mapping table.

```luau
function switch<K, V>(source: () -> K): (map: Map<K, Constructor<V>>): () -> V?

type Constructor<T> = () -> (T, number?)
```

```luau
local logged = source(false)

local button = switch(logged) {
    [true] = function()
        return Button { Text = "Log out", Toggle = logged }
    end,

    [false] = function()
        return Button { Text = "Log in",  Toggle = logged }
    end
}
```

--------------------------------

### source() Type Definition

Source: https://centau.github.io/vide/api/reactivity-core

Type definition for the source() function, which creates a new source.

```luau
function source<T>(value: T): Source<T>

type Source<T> =
    () -> T -- get
    & (T) -> ()

```

--------------------------------

### root() Type Definition

Source: https://centau.github.io/vide/api/reactivity-core

Type definition for the root() function, which runs a function in a new stable scope.

```luau
function root<T...>(fn: (Destructor) -> T...): (Destructor, T...)

type Destructor = () -> ()

```

--------------------------------

### Updating a table in a source

Source: https://centau.github.io/vide/tut/crash-course/11-dynamic-scopes.html

When you edit a table in a source, you must set that table again to actually update the source.

```luau
local src = source { 1, 2 }
local data = src()
table.insert(data, 3) -- no effects will run
src(data) -- effects will run
```

--------------------------------

### Effect Tracking Derived Sources

Source: https://centau.github.io/vide/tut/crash-course/5-effect.html

Shows how effects automatically track derived sources, even when nested within functions.

```luau
local source = vide.source
local effect = vide.effect

local count = source(1)

local doubled = function()
    return count() * 2
end

effect(function()
    print("doubled count: " .. doubled())
end)

-- "doubled count: 2" printed
count(2)
-- "doubled count: 4" printed
```

--------------------------------

### Untracking Sources within Effects

Source: https://centau.github.io/vide/tut/crash-course/5-effect.html

Illustrates how to read from a source within an effect without triggering the effect's rerun using `untrack()`.

```luau
local source = vide.source
local effect = vide.effect
local untrack = vide.untrack

local a = source(0)
local b = source(0)

effect(function()
    print(`a: {a()} b: {untrack(b)}`)
end)

a(1) -- prints "a: 1 b: 0"
b(1) -- prints nothing
a(2) -- prints "a: 2 b: 1"
```

--------------------------------

### action() function signature

Source: https://centau.github.io/vide/api/creation.html

Defines the type signature for the action() function, which creates a special object for custom actions on instances.

```luau
function action((Instance) -> (), priority: number = 1): Action
```

--------------------------------

### values() Type Signature

Source: https://centau.github.io/vide/api/reactivity-dynamic.html

The type signature for the values() function in Luau.

```luau
function values<KI, VI, VO>(
    source: () -> Map<KI, VI>,
    constructor: (value: VI, index: () -> KI) -> (VO, number?)
): Array<VO>
```

--------------------------------

### Redundant Reruns Without Derive

Source: https://centau.github.io/vide/tut/crash-course/9-derived-source.html

Illustrates a scenario where a function wrapping a source reruns unnecessarily for each effect using it.

```luau
local source = vide.source
local effect = vide.effect

local count = source(0)

local text = function()
    print "ran"
    return "count: " .. tostring(count())
end

effect(function() text() end)
effect(function() text() end)

count(1) -- prints "ran" x2
```

--------------------------------

### Explicit Effect (for comparison)

Source: https://centau.github.io/vide/tut/crash-course/8-implicit-effect.html

This is the equivalent explicit effect implementation for comparison. It shows the manual creation of an effect to update the Text property.

```luau
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
```

--------------------------------

### Menu Component using Button

Source: https://centau.github.io/vide/tut/crash-course/3-components.html

A Menu component that utilizes the Button component to create interactive buttons.

```luau
local create = vide.create

local Button = require(Button)

local function Menu()
    return create "ScreenGui" {
        Button {
            Position = UDim2.fromOffset(200, 200),
            Text = "back",
            Activated = function()
                print "go to previous page"
            end
        },

        Button {
            Position = UDim2.fromOffset(400, 200),
            Text = "next",
            Activated = function()
                print "go to next page"
            end
        }
    }
end
```

--------------------------------

### Delaying the destruction of the scope with show()

Source: https://centau.github.io/vide/tut/crash-course/11-dynamic-scopes.html

All dynamic scope functions also support delaying the destruction of the scope. This is useful for playing any sort of animation or effect before the UI instance is removed.

```lua
local function Menu(props: { Visible: () -> boolean })
    local transparency = spring(function()
        return if p.Visible then 0 else 1
    end

    return create "Frame" {
        BackgroundTransparency = transparency
    }
end

local toggled = source(true)

create "ScreenGui" {
    show(toggled, function(_, present) 
        return Menu { p.Visible = present }, 3 -- give a generous 3 seconds for the spring to complete before destroying
    end)
}

toggled(false)
-- `present` will go `false` immediately
-- transparency will begin being sprung
-- after 3 seconds the scope is destroyed, giving the spring enough time to complete
```

--------------------------------

### changed() function signature

Source: https://centau.github.io/vide/api/creation.html

Defines the type signature for the changed() function, a wrapper for action() to easily listen for property changes.

```luau
function changed(property: string, fn: (unknown) -> ()): Action
```

--------------------------------

### Button Component

Source: https://centau.github.io/vide/tut/crash-course/3-components.html

A reusable Button component that takes properties like Position, Text, and an Activated callback.

```luau
local create = vide.create

local function Button(props: {
    Position: UDim2,
    Text: string,
    Activated: () -> ()
})
    return create "TextButton" {
        BackgroundColor3 = Color3.fromRGB(50, 50, 50),
        TextColor3 = Color3.fromRGB(255, 255, 255),
        Size = UDim2.fromOffset(200, 150),

        Position = props.Position,
        Text = props.Text,
        Activated = props.Activated,

        create "UICorner" {}
    }
end

return Button
```

--------------------------------

### derive() Type Definition

Source: https://centau.github.io/vide/api/reactivity-core

Type definition for the derive() function, which computes a value for a new source within a reactive scope.

```luau
function derive<T>(fn: () -> T): () -> T

```

--------------------------------

### effect() Type Definition

Source: https://centau.github.io/vide/api/reactivity-core

Type definition for the effect() function, which runs a function in a new reactive scope.

```luau
function effect(fn: () -> ())

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.