repository·main·Indexed 43 days ago
https://github.com/centau/videA reactive Luau UI library inspired by SolidJS for building declarative, type-safe user interfaces. Vide features a reactive model using source(), derive(), and effect() for state management, along with utilities like create() for UI instantiation, spring() for physics-based animations, and dynamic rendering tools such as show(), switch(), indexes(), and values().
Vide is a reactive and declarative UI library heavily inspired by Solid. It focuses on a data-oriented approach to programming UIs, emphasizing how data flows through an application.
Key design principles include:
Note on Reactivity: Vide uses the concept of scopes to manage reactivity. While this introduces a learning curve, it is the mechanism that enables Vide's minimal syntax.
An effect is a reactive operation that runs in response to a source update. You create an effect using the effect() function. Effects are part of the reactive graph and will rerun whenever the sources they depend on change.
local count = source(0)
effect(function()
print("The count is: " .. count())
end)A derived source is a new source composed of other sources. It automatically updates when its dependencies change. You can create one using a plain function or explicitly with the derive() function.
local count = source(0)
local text = derive(function()
return "count: " .. count()
end)Vide code operates within two types of scopes that determine how reactivity is handled:
source read within the scope is updated. They are created using effect() or derive(). Reactive scopes cannot be created directly inside another reactive scope.root().Lifecycle and Constraints:
Use stable scopes for initialization or one-off logic, and reactive scopes for logic that must respond to state changes.
In Vide, a component is a function that creates and returns a piece of UI. Components allow you to break your interface into small, reusable chunks.
To define a component, create a function that accepts a single parameter, props, which is used to pass properties into the component. Inside the function, use vide.create to construct the UI elements. You can then compose these components by calling them within other components or UI trees.
local create = vide.create
-- A component definition
local function Button(props: {
Position: UDim2,
Text: string,
Activated: () -> ()
})
return create "TextButton" {
Position = props.Position,
Text = props.Text,
Activated = props.Activated,
-- ... other properties
}
end
-- Using a component inside another
local function Menu()
return create "ScreenGui" {
Button {
Position = UDim2.fromOffset(200, 200),
Text = "back",
Activated = function() print("back") end
}
}
endBoth functions allow you to map table entries to UI elements, but they differ in performance and behavior based on how the source table changes.
values() when:indexes() when:Performance Note: Choosing the correct function can reduce the number of property updates and re-renders.
An effect is a function that runs in response to source updates. It is analogous to a connection in a signal-connection model. When you create an effect using effect(), the function runs its callback immediately once to track which sources are being read. Any source (or derived source) accessed within the effect is automatically tracked; the effect will re-run whenever those sources are updated with a new value.
Key behaviors:
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" printedWhen a source's value needs to be transformed (e.g., converting a number to a string) and that transformed value is consumed by multiple effects, using a standard function wrapper causes the transformation to rerun for every single effect.
To optimize this, use vide.derive(). This creates a new source that runs its transformation function within a reactive scope. The result is cached, so multiple effects reading the derived source will receive the cached value without triggering redundant computations. The transformation only reruns when one of the underlying sources used inside the derive block updates.
local source = vide.source
local effect = vide.effect
local derive = vide.derive
local count = source(0)
-- This transformation runs only once per update, even with multiple effects
local text = derive(function()
print "ran"
return "count: " .. tostring(count())
end)
effect(function() text() end)
effect(function() text() end)
count(1) -- prints "ran" only 1 timeIn Roblox, instances are freed when parented to nil, so explicit destruction is often unnecessary for memory management.
Warning: If you connect a function that references an instance to an event on that same instance, the instance will create a circular reference to itself and will never be freed. In these cases, you must use cleanup() to disconnect the connection or explicitly destroy the instance.
Vide handles automatic memory and lifecycle management through scope cleanup:
cleanup() function.Vide uses Scopes to manage the lifecycle of connections and effects. Instead of manually disconnecting individual signals, you can group them within a scope. When a scope is destroyed, all scopes and effects created within it are also destroyed, preventing memory leaks (e.g., when an effect holds a reference to a UI instance).
There are two types of scopes:
root(). They never rerun. They serve as the parent container for other scopes.effect(). They can rerun when their dependencies change.Crucial Rules for Scopes:
root()).effect) cannot be created inside another reactive scope; it must be created within a stable scope.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() -- This would error if called directly because effect() needs a stable scope
local destroy = root(setup) -- OK: effect() is called inside the stable scope provided by root()
count(1) -- prints "1"
count(2) -- prints "2"
destroy() -- Destroys the root scope and the effect inside it
count(3) -- The effect is gone; nothing is printed