vide/docs/tut/crash-course/12-actions.md
Andrea Fletcher 18c1d02d43
Add tag() action for CollectionService tags
Adds a built-in `vide.tag()` action that wraps `Instance:AddTag()` /
`Instance:RemoveTag()` so tags can be applied through `create()` props.

It accepts a static string or array of strings, or a reactive source
returning either. The reactive variant diffs the previous and new tag
sets so only the delta is applied. All tags added by the action are
removed when the surrounding scope is destroyed.

Includes mock support for `AddTag`/`RemoveTag`/`HasTag`/`GetTags`,
tests, API reference docs, and a closing note in the actions tutorial.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-26 22:10:47 -07:00

1.5 KiB

Actions

Actions are special callbacks that you can pass along with properties, to run some code on an instance receiving them.

local action = vide.action

create "TextLabel" {
    Text = "test",

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

-- will print "test"

Actions can be wrapped with functions for reuse. Below is an example of an action used to listen for property changes:

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

The source output will be updated with the new property value any time it is changed externally.

Vide also ships a few common actions out of the box, such as vide.changed() for the pattern above and vide.tag() for adding CollectionService tags to an instance.