Skip to main content

BaseComponent

Properties#

ClassName#

</>
BaseComponent.ClassName: string

The Component's ClassName, which is assigned from the first argument of Component.Extend.

Destroyed#

</>
BaseComponent.Destroyed: Signal<>?

The Destroyed signal which is called after everything in the Component is destroyed. This only exists if you explicitly state you want it in the Component.Extend function.

Destroying#

</>
BaseComponent.Destroying: Signal<>?

The Destroying signal which is called immediately after :Destroy is. This only exists if you explicitly state you want it in the Component.Extend function.

DidRedraw#

</>
BaseComponent.DidRedraw: Signal<...RedrawArguments>?

The DidRedraw signal which is called immediately after Component:Redraw is. This only exists if you explicitly state you want it in the Component.Extend function.

GetReducedState#

</>
BaseComponent.GetReducedState: () → {[string]: string}

This function returns the reduced state of the component's store.

Janitor#

</>
BaseComponent.Janitor: Janitor

The component's Janitor. You can add whatever you want cleaned up on :Destroy() to this.

local PrintOnDestroy = Helium.Component.Extend("PrintOnDestroy")
function PrintOnDestroy:Constructor(Message: string)
	self.Janitor:Add(function()
		print(Message)
	end, true)
end

PrintOnDestroy.new("I was destroyed!"):Destroy() -- Prints "I was destroyed!"

QueueRedraw#

</>
BaseComponent.QueueRedraw: () → ()

This function queues a redraw of the component.

local CoinsDisplay = Helium.Component.Extend("CoinsDisplay")
function CoinsDisplay:Constructor(Parent: Instance)
	self.Coins = 0
	self.Gui = self.Janitor:Add(Helium.Make("TextLabel", {
		AnchorPoint = Vector2.new(0.5, 0.5);
		BackgroundTransparency = 1;
		Position = UDim2.fromScale(0.5, 0.5);
		Size = UDim2.fromScale(0.5, 0.5);

		Font = Enum.Font.Gotham;
		Text = "Coins: 0";
		TextColor3 = Color3.new(1, 1, 1);
		TextSize = 24;

		Parent = Parent;
	}), "Destroy")
end

function CoinsDisplay:AddCoin()
	self.Coins += 1
	self.QueueRedraw() -- Queues the Component to be redrawn.
end

CoinsDisplay.RedrawBinding = Helium.RedrawBinding.Heartbeat
function CoinsDisplay:Redraw()
	self.Gui.Text = "Coins: " .. self.Coins
end

local MyCoinsDisplay = CoinsDisplay.new(Parent) -- Shows a TextLabel with the Text == "Coins: 0".
MyCoinsDisplay:AddCoin() -- Now it says "Coins: 1"

RedrawBinding#

</>
BaseComponent.RedrawBinding: RedrawBinding

The Component's RedrawBinding. This is used to determine when the Component's :Redraw() function is called.

Reduction#

</>
BaseComponent.Reduction: {[string]: string}?

The reduction of the store. If this exists, it'll be passed as the first argument of :Redraw().

WillRedraw#

</>
BaseComponent.WillRedraw: Signal<...RedrawArguments>?

The WillRedraw signal which is called immediately before Component:Redraw is. This only exists if you explicitly state you want it in the Component.Extend function.

Functions#

new#

</>
BaseComponent.new(
...: any?--

The arguments you want to pass to the Component's constructor.

) → Component<T>

The constructor of the Component. This version is for store-less components.

local ValuePrinter = Helium.Component.Extend("ValuePrinter")
function ValuePrinter:Constructor(Value: any)
	print("ValuePrinter:Constructor was constructed with:", Value)
end

ValuePrinter.new(1):Destroy() -- prints "ValuePrinter:Constructor was constructed with: 1"

new#

</>
BaseComponent.new(
Store: Store?,--

The store to use for this component.

...: any?--

The extra arguments you want to pass to the Component's constructor.

) → Component<T>

The constructor of the Component.

local ValuePrinterWithStore = Helium.Component.Extend("ValuePrinterWithStore")
function ValuePrinterWithStore:Constructor(Store, Value: any)
	self.Store = Store
	print("ValuePrinterWithStore:Constructor was constructed with:", Value)
end

ValuePrinterWithStore.new(Helium.Store.new(function() end, {}), 1):Destroy() -- prints "ValuePrinterWithStore:Constructor was constructed with: 1"

Constructor#

</>
BaseComponent:Constructor(
...: any?--

The arguments you are creating the Component with.

) → ()

The Component's Constructor function. This version is for store-less components. This should be overwritten.

local CoinsDisplay = Helium.Component.Extend("CoinsDisplay")
function CoinsDisplay:Constructor(Parent: Instance)
	self.Gui = self.Janitor:Add(Helium.Make("TextLabel", {
		AnchorPoint = Vector2.new(0.5, 0.5);
		BackgroundTransparency = 1;
		Position = UDim2.fromScale(0.5, 0.5);
		Size = UDim2.fromScale(0.5, 0.5);

		Font = Enum.Font.Gotham;
		Text = "Coins: 1";
		TextColor3 = Color3.new(1, 1, 1);
		TextSize = 24;

		Parent = Parent;
	}), "Destroy")
end

CoinsDisplay.new(Parent) -- Shows a TextLabel with the Text == "Coins: 1".

Constructor#

</>
BaseComponent:Constructor(
Store: Store?,--

The store to use for this component.

...: any?--

The arguments you are creating the Component with.

) → ()

The Component's Constructor function. This should be overwritten.

local CoinsDisplay = Helium.Component.Extend("CoinsDisplay")

function CoinsDisplay:Constructor(Store, Parent: Instance)
	self.Store = Store
	self.Gui = self.Janitor:Add(Helium.Make("TextLabel", {
		AnchorPoint = Vector2.new(0.5, 0.5);
		BackgroundTransparency = 1;
		Position = UDim2.fromScale(0.5, 0.5);
		Size = UDim2.fromScale(0.5, 0.5);

		Font = Enum.Font.Gotham;
		Text = "Coins: 0";
		TextColor3 = Color3.new(1, 1, 1);
		TextSize = 24;

		Parent = Parent;
	}), "Destroy")
end

type CoinsReduction = {Coins: number}

CoinsDisplay.Reduction = {Coins = "GuiData.Coins"}
CoinsDisplay.RedrawBinding = Helium.RedrawBinding.Heartbeat
function CoinsDisplay:Redraw(CoinsReduction: CoinsReduction)
	self.Gui.Text = "Coins: " .. CoinsReduction.Coins
end

local CoinsStore = Helium.Store.new(function(Action, GetState, SetState)
	if Action.Type == "AddCoin" then
		local Coins = GetState("GuiData", "Coins")
		SetState("GuiData", "Coins", Coins + 1)
	end
end, {GuiData = {Coins = 0}})

local MyCoinsDisplay = CoinsDisplay.new(CoinsStore, Parent) -- Shows a TextLabel with the Text == "Coins: 0".
for _ = 1, 10 do
	task.wait(1)
	CoinsStore:Fire({Type = "AddCoin"})
end

MyCoinsDisplay:Destroy()

Destroy#

</>
BaseComponent:Destroy() → ()

Destroys the Component and its Janitor.

warning

This renders the component completely unusable. You wont' be able to call any further methods on it.

Redraw#

</>
BaseComponent:Redraw(
ReducedState: {[any]: any}?,--

The reduced state if BaseComponent.Reduction exists.

DeltaTime: number,--

The DeltaTime since the last frame.

WorldDeltaTime: number?--

The world delta time since the last frame. This only exists when RedrawBinding == Stepped.

) → ()

The Component's Redraw function. This can be overwritten if you need it to be.

local CoinsDisplay = Helium.Component.Extend("CoinsDisplay")
function CoinsDisplay:Constructor(Parent: Instance)
	self.Coins = 0
	self.Gui = self.Janitor:Add(Helium.Make("TextLabel", {
		AnchorPoint = Vector2.new(0.5, 0.5);
		BackgroundTransparency = 1;
		Position = UDim2.fromScale(0.5, 0.5);
		Size = UDim2.fromScale(0.5, 0.5);

		Font = Enum.Font.Gotham;
		Text = "Coins: 0";
		TextColor3 = Color3.new(1, 1, 1);
		TextSize = 24;

		Parent = Parent;
	}), "Destroy")
end

function CoinsDisplay:AddCoin()
	self.Coins += 1
	self.QueueRedraw()
end

CoinsDisplay.RedrawBinding = Helium.RedrawBinding.Heartbeat
function CoinsDisplay:Redraw()
	self.Gui.Text = "Coins: " .. self.Coins
end

local MyCoinsDisplay = CoinsDisplay.new(Parent) -- Creates a TextLabel under Parent with the Text saying "Coins: 0"
MyCoinsDisplay:AddCoin() -- Calls :Redraw() and now the TextLabel says "Coins: 1"
Show raw api
{
    "functions": [
        {
            "name": "Constructor",
            "desc": "The Component's Constructor function. This version is for store-less components. This should be overwritten.\n\n```lua\nlocal CoinsDisplay = Helium.Component.Extend(\"CoinsDisplay\")\nfunction CoinsDisplay:Constructor(Parent: Instance)\n\tself.Gui = self.Janitor:Add(Helium.Make(\"TextLabel\", {\n\t\tAnchorPoint = Vector2.new(0.5, 0.5);\n\t\tBackgroundTransparency = 1;\n\t\tPosition = UDim2.fromScale(0.5, 0.5);\n\t\tSize = UDim2.fromScale(0.5, 0.5);\n\n\t\tFont = Enum.Font.Gotham;\n\t\tText = \"Coins: 1\";\n\t\tTextColor3 = Color3.new(1, 1, 1);\n\t\tTextSize = 24;\n\n\t\tParent = Parent;\n\t}), \"Destroy\")\nend\n\nCoinsDisplay.new(Parent) -- Shows a TextLabel with the Text == \"Coins: 1\".\n```",
            "params": [
                {
                    "name": "...",
                    "desc": "The arguments you are creating the Component with.",
                    "lua_type": "any?"
                }
            ],
            "returns": [],
            "function_type": "method",
            "source": {
                "line": 145,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "Constructor",
            "desc": "The Component's Constructor function. This should be overwritten.\n\n```lua\nlocal CoinsDisplay = Helium.Component.Extend(\"CoinsDisplay\")\n\nfunction CoinsDisplay:Constructor(Store, Parent: Instance)\n\tself.Store = Store\n\tself.Gui = self.Janitor:Add(Helium.Make(\"TextLabel\", {\n\t\tAnchorPoint = Vector2.new(0.5, 0.5);\n\t\tBackgroundTransparency = 1;\n\t\tPosition = UDim2.fromScale(0.5, 0.5);\n\t\tSize = UDim2.fromScale(0.5, 0.5);\n\n\t\tFont = Enum.Font.Gotham;\n\t\tText = \"Coins: 0\";\n\t\tTextColor3 = Color3.new(1, 1, 1);\n\t\tTextSize = 24;\n\n\t\tParent = Parent;\n\t}), \"Destroy\")\nend\n\ntype CoinsReduction = {Coins: number}\n\nCoinsDisplay.Reduction = {Coins = \"GuiData.Coins\"}\nCoinsDisplay.RedrawBinding = Helium.RedrawBinding.Heartbeat\nfunction CoinsDisplay:Redraw(CoinsReduction: CoinsReduction)\n\tself.Gui.Text = \"Coins: \" .. CoinsReduction.Coins\nend\n\nlocal CoinsStore = Helium.Store.new(function(Action, GetState, SetState)\n\tif Action.Type == \"AddCoin\" then\n\t\tlocal Coins = GetState(\"GuiData\", \"Coins\")\n\t\tSetState(\"GuiData\", \"Coins\", Coins + 1)\n\tend\nend, {GuiData = {Coins = 0}})\n\nlocal MyCoinsDisplay = CoinsDisplay.new(CoinsStore, Parent) -- Shows a TextLabel with the Text == \"Coins: 0\".\nfor _ = 1, 10 do\n\ttask.wait(1)\n\tCoinsStore:Fire({Type = \"AddCoin\"})\nend\n\nMyCoinsDisplay:Destroy()\n```",
            "params": [
                {
                    "name": "Store",
                    "desc": "The store to use for this component.",
                    "lua_type": "Store?"
                },
                {
                    "name": "...",
                    "desc": "The arguments you are creating the Component with.",
                    "lua_type": "any?"
                }
            ],
            "returns": [],
            "function_type": "method",
            "source": {
                "line": 196,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "Redraw",
            "desc": "The Component's Redraw function. This can be overwritten if you need it to be.\n\n```lua\nlocal CoinsDisplay = Helium.Component.Extend(\"CoinsDisplay\")\nfunction CoinsDisplay:Constructor(Parent: Instance)\n\tself.Coins = 0\n\tself.Gui = self.Janitor:Add(Helium.Make(\"TextLabel\", {\n\t\tAnchorPoint = Vector2.new(0.5, 0.5);\n\t\tBackgroundTransparency = 1;\n\t\tPosition = UDim2.fromScale(0.5, 0.5);\n\t\tSize = UDim2.fromScale(0.5, 0.5);\n\n\t\tFont = Enum.Font.Gotham;\n\t\tText = \"Coins: 0\";\n\t\tTextColor3 = Color3.new(1, 1, 1);\n\t\tTextSize = 24;\n\n\t\tParent = Parent;\n\t}), \"Destroy\")\nend\n\nfunction CoinsDisplay:AddCoin()\n\tself.Coins += 1\n\tself.QueueRedraw()\nend\n\nCoinsDisplay.RedrawBinding = Helium.RedrawBinding.Heartbeat\nfunction CoinsDisplay:Redraw()\n\tself.Gui.Text = \"Coins: \" .. self.Coins\nend\n\nlocal MyCoinsDisplay = CoinsDisplay.new(Parent) -- Creates a TextLabel under Parent with the Text saying \"Coins: 0\"\nMyCoinsDisplay:AddCoin() -- Calls :Redraw() and now the TextLabel says \"Coins: 1\"\n```",
            "params": [
                {
                    "name": "ReducedState",
                    "desc": "The reduced state if `BaseComponent.Reduction` exists.",
                    "lua_type": "{[any]: any}?"
                },
                {
                    "name": "DeltaTime",
                    "desc": "The DeltaTime since the last frame.",
                    "lua_type": "number"
                },
                {
                    "name": "WorldDeltaTime",
                    "desc": "The world delta time since the last frame. This only exists when `RedrawBinding` == `Stepped`.",
                    "lua_type": "number?"
                }
            ],
            "returns": [],
            "function_type": "method",
            "source": {
                "line": 240,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "Destroy",
            "desc": "Destroys the Component and its Janitor.\n\n:::warning\nThis renders the component completely unusable. You wont' be able to call any further methods on it.\n:::",
            "params": [],
            "returns": [],
            "function_type": "method",
            "source": {
                "line": 249,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "new",
            "desc": "The constructor of the Component. This version is for store-less components.\n\n```lua\nlocal ValuePrinter = Helium.Component.Extend(\"ValuePrinter\")\nfunction ValuePrinter:Constructor(Value: any)\n\tprint(\"ValuePrinter:Constructor was constructed with:\", Value)\nend\n\nValuePrinter.new(1):Destroy() -- prints \"ValuePrinter:Constructor was constructed with: 1\"\n```",
            "params": [
                {
                    "name": "...",
                    "desc": "The arguments you want to pass to the Component's constructor.",
                    "lua_type": "any?"
                }
            ],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "Component<T>"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 273,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "new",
            "desc": "The constructor of the Component.\n\n```lua\nlocal ValuePrinterWithStore = Helium.Component.Extend(\"ValuePrinterWithStore\")\nfunction ValuePrinterWithStore:Constructor(Store, Value: any)\n\tself.Store = Store\n\tprint(\"ValuePrinterWithStore:Constructor was constructed with:\", Value)\nend\n\nValuePrinterWithStore.new(Helium.Store.new(function() end, {}), 1):Destroy() -- prints \"ValuePrinterWithStore:Constructor was constructed with: 1\"\n```",
            "params": [
                {
                    "name": "Store",
                    "desc": "The store to use for this component.",
                    "lua_type": "Store?"
                },
                {
                    "name": "...",
                    "desc": "The extra arguments you want to pass to the Component's constructor.",
                    "lua_type": "any?"
                }
            ],
            "returns": [
                {
                    "desc": "",
                    "lua_type": "Component<T>"
                }
            ],
            "function_type": "static",
            "source": {
                "line": 291,
                "path": "src/Component/BaseComponent.lua"
            }
        }
    ],
    "properties": [
        {
            "name": "Janitor",
            "desc": "The component's Janitor. You can add whatever you want cleaned up on `:Destroy()` to this.\n\n```lua\nlocal PrintOnDestroy = Helium.Component.Extend(\"PrintOnDestroy\")\nfunction PrintOnDestroy:Constructor(Message: string)\n\tself.Janitor:Add(function()\n\t\tprint(Message)\n\tend, true)\nend\n\nPrintOnDestroy.new(\"I was destroyed!\"):Destroy() -- Prints \"I was destroyed!\"\n```",
            "lua_type": "Janitor",
            "source": {
                "line": 31,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "GetReducedState",
            "desc": "This function returns the reduced state of the component's store.",
            "lua_type": "() -> {[string]: string}",
            "source": {
                "line": 37,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "QueueRedraw",
            "desc": "This function queues a redraw of the component.\n\n```lua\nlocal CoinsDisplay = Helium.Component.Extend(\"CoinsDisplay\")\nfunction CoinsDisplay:Constructor(Parent: Instance)\n\tself.Coins = 0\n\tself.Gui = self.Janitor:Add(Helium.Make(\"TextLabel\", {\n\t\tAnchorPoint = Vector2.new(0.5, 0.5);\n\t\tBackgroundTransparency = 1;\n\t\tPosition = UDim2.fromScale(0.5, 0.5);\n\t\tSize = UDim2.fromScale(0.5, 0.5);\n\n\t\tFont = Enum.Font.Gotham;\n\t\tText = \"Coins: 0\";\n\t\tTextColor3 = Color3.new(1, 1, 1);\n\t\tTextSize = 24;\n\n\t\tParent = Parent;\n\t}), \"Destroy\")\nend\n\nfunction CoinsDisplay:AddCoin()\n\tself.Coins += 1\n\tself.QueueRedraw() -- Queues the Component to be redrawn.\nend\n\nCoinsDisplay.RedrawBinding = Helium.RedrawBinding.Heartbeat\nfunction CoinsDisplay:Redraw()\n\tself.Gui.Text = \"Coins: \" .. self.Coins\nend\n\nlocal MyCoinsDisplay = CoinsDisplay.new(Parent) -- Shows a TextLabel with the Text == \"Coins: 0\".\nMyCoinsDisplay:AddCoin() -- Now it says \"Coins: 1\"\n```",
            "lua_type": "() -> ()",
            "source": {
                "line": 76,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "ClassName",
            "desc": "The Component's ClassName, which is assigned from the first argument of `Component.Extend`.",
            "lua_type": "string",
            "source": {
                "line": 82,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "RedrawBinding",
            "desc": "The Component's RedrawBinding. This is used to determine when the Component's `:Redraw()` function is called.",
            "lua_type": "RedrawBinding",
            "source": {
                "line": 88,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "Reduction",
            "desc": "The reduction of the store. If this exists, it'll be passed as the first argument of `:Redraw()`.",
            "lua_type": "{[string]: string}?",
            "source": {
                "line": 94,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "Destroyed",
            "desc": "The Destroyed signal which is called after everything in the Component is destroyed. This only exists if you explicitly state you want it in the `Component.Extend` function.",
            "lua_type": "Signal<>?",
            "source": {
                "line": 100,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "Destroying",
            "desc": "The Destroying signal which is called immediately after `:Destroy` is. This only exists if you explicitly state you want it in the `Component.Extend` function.",
            "lua_type": "Signal<>?",
            "source": {
                "line": 106,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "WillRedraw",
            "desc": "The WillRedraw signal which is called immediately before `Component:Redraw` is. This only exists if you explicitly state you want it in the `Component.Extend` function.",
            "lua_type": "Signal<...RedrawArguments>?",
            "source": {
                "line": 112,
                "path": "src/Component/BaseComponent.lua"
            }
        },
        {
            "name": "DidRedraw",
            "desc": "The DidRedraw signal which is called immediately after `Component:Redraw` is. This only exists if you explicitly state you want it in the `Component.Extend` function.",
            "lua_type": "Signal<...RedrawArguments>?",
            "source": {
                "line": 118,
                "path": "src/Component/BaseComponent.lua"
            }
        }
    ],
    "types": [],
    "name": "BaseComponent",
    "desc": "",
    "source": {
        "line": 11,
        "path": "src/Component/BaseComponent.lua"
    }
}