Essence | Lightweight UI framework for plugins & games

Resources Community Resources
, , ,
#1

Hello fellow people, today I want to introduce Essence; a lightweight UI framework where you can directly interact with your components without using the state managment option.

Features

  • Modular architecture, no worries about spaghetti code.
  • Re-usable components.
  • State managment with optional computation.
  • Interact with components outside the stack.

Installation Methods:

  • Wally Package Manager (Risky version)
  • Rojo (Risky version)
  • GitHub Releases (Stable version)

Links

Example Usage

local Component = {}
local Essence = require(game.ReplicatedStorage.Essence)

function Component:Render(props)
    return Essence.new("ImageButton", {
        Parent = game.Players.LocalPlayer.PlayerGui:WaitForChild("ScreenGui"),
        Size = UDim2.fromOffset(200, 50),
        Image = "",

        Children = {
            Label = Essence.new("TextLabel", {
                Size = UDim2.fromScale(1, 1),
                Text = Essence.getState("Clicks", props.InitialClicks),
            })
        }
    })
end

-- This function only does exist
-- on production component.
function Component:Increment()
    self.Label.State.Clicks += 1
end

--

local PComp = Essence.build(
    Essence.new(Component, {
        InitialClicks = 20,
    })
)

PComp.Instance.MouseButton1Click:Connect(function()
    PComp:Increment()
end)

With that code snippet, you can check the true power of Essence without even experimenting with it. Note that this UI framework is meant for plugins and not games, use it for games at your own risk!

3 Likes
#2

Is there a reason to use this over Roact?

#3

Yes, you can interact with the components without using state managment, the true power of Essence is the ProductionElement class which acts like a Roblox instance and you can modify its state outside the Render stack.

Here’s an example snippet of ProductionElement

local PComp = Essence.build(
    Essence.new(Component, {
        InitialClicks = 20,
    })
)

PComp.Instance.MouseButton1Click:Connect(function()
    PComp:Increment()
end)
#4

you can already use bindings

local component = Roact.component:extend("yay")
function component:init()
   self.text, self.changetext = Roact.createBinding("yeah")
end

function component:render()
  return roact.createElement("TextLabel", {
     Text = self.text
  })
end

and whats wrong with state management? also is this the only benefit?

#5

But you cannot interact with the Component outside the Component table. And yes, that’s the only one benefit over Roact but that only one benefit is extremely useful for people like me that want to create custom components without losing authority over the Luau objects. By the way, note that this is only for plugins and not games, libraries like StudioWidgets do not use Roact for that reason and they use their own table classes to create the components.

I would also like to tell you that this is an experimental concept and obviously I will be continously trying to improve the library.

#6

Wetatables are here to save you.

local component = Roact.component:extend("yay")
local passthistabletothescripts = {}
function component:init()
   self.text, self.changetext = Roact.createBinding("yeah")
   setmetatable(passthistabletothescripts, {
      __index = function(slef, index)
         return self[index]
     end
   })
end

function component:render()
  return roact.createElement("TextLabel", {
     Text = self.text
  })
end

I understand. Alright good luck

1 Like
#7

Release 1.0.2 is now here!

  • Fragments
  • Parent property to production elements
  • Compute state to children state

Report any issues to the GitHub issues page of the repository.

1 Like