Vuxel - Version 0.3.0-alpha
Changelog
Vuxel Module
New Features
Context API (self) for Component Referencing
Description: Introduced a self-based context API that allows each component to reference itself and its children directly without needing Vuxel:GetRef.
Usage: Components within a template structure can now access each other by name via self. This allows straightforward access to parent and sibling components, making it easier to handle events, properties, and behaviors within a component hierarchy.
Benefits: This new system reduces reliance on the Vuxel:GetRef function for direct child-to-child or parent-to-child access, significantly cleaning up the code and enhancing readability.
Implementation Details:
The Components.Template function was updated to use self as a table containing references to each named component in the hierarchy.
self is populated by assigning each component to self[component.Name] based on the Name property specified in each template.
Example:
local MyComponentTemplate = {
Class = "Frame",
Name = "MainFrame",
Children = {
{
Class = "TextLabel",
Name = "TitleLabel",
Text = "Hello, Vuxel!",
},
{
Class = "TextButton",
Name = "ActionButton",
Text = "Click Me",
Events = {
MouseButton1Click = function(self)
print("Button clicked:", self.TitleLabel.Text) -- Accessing sibling component TitleLabel
self.TitleLabel.Text = "Clicked!"
end
}
}
}
}
Enhancements
Lifecycle Hooks
Updated Lifecycle hooks (onMounted and onDestroyed) to allow them to be used as props on template-based tables.
Usage: Define lifecycle hooks directly in the Lifecycle property of any component in a template. The lifecycle hooks will automatically execute when the component is mounted or destroyed, respectively.
Available Lifecycle Hooks Props:
-
onMounted: Called after the component has been parented in the hierarchy.
-
onDestroyed: Called just before the component is destroyed.
Example:
local MyComponentTemplate = {
Class = "Frame",
Name = "MainFrame",
Lifecycle = {
onMounted = function(self)
print("Mounted:", self.MainFrame)
end,
onDestroyed = function(self)
print("Destroyed:", self.MainFrame)
end
},
Children = {
{
Class = "TextLabel",
Name = "TitleLabel",
Text = "Lifecycle Demo"
}
}
}
Automatic Template Wrapping in Vuxel.CreateApp
Vuxel.CreateApp now accepts either a raw template structure or a templated component and will automatically wrap it using Vuxel.Template if needed. This will warn, it is better practice to use Vuxel.Template before Vuxel.CreateApp! See Utility.CreateApp(UIFrame) on the vuxel docs!
Summary of Benefits
-
Improved Readability and Maintainability: The new
self context API simplifies component referencing, leading to cleaner, more readable code without needing frequent GetRef calls.
-
Enhanced Modularity: Lifecycle hooks props enable allow for quicker declaration within the table based templates.
-
Fallback Developer Experience: Automatically handle
Vuxel.Template calls within CreateApp in case CreateApp is called on a non templated table.
