Support PascalCase instance names for Roblox elements

Updated the transformer to map lowercase tag names to their correct PascalCase Roblox instance names when generating static elements. This ensures that elements like 'textlabel' are emitted as 'TextLabel', improving compatibility and correctness in generated Luau code. Refactored codegen, context, and bridge logic to support this mapping.

Author: evilbocchi

demo/out/benchmark/massive-list.benchmark.luau

@@ -55,7 +55,7 @@ local function OptimizedListItem(_param)
 			TextColor3 = Color3.fromRGB(200, 200, 200),
 			BackgroundTransparency = 1,
 		}))
-	end, { isActive, name, value, id }, "dynamic_frame_dk9zhdi1f")
+	end, { isActive, name, value, id }, "dynamic_frame_cv7coskeu")
 end
 local function MassiveListBenchmark()
 	local itemCount, setItemCount = useState(1000)
@@ -166,7 +166,7 @@ local function MassiveListBenchmark()
 		end
 		-- ▲ ReadonlyArray.map ▲
 		return React.createElement("scrollingframe", _exp, _exp_1, _newValue)
-	end, { itemCount, items, ListComponent }, "dynamic_scrollingframe_em72aoow9"))
+	end, { itemCount, items, ListComponent }, "dynamic_scrollingframe_fnm6x4h2j"))
 end
 -- Alternative ways to use @undecillion
 -- Comment-style for arrow functions

demo/out/benchmark/optimized-list.benchmark.luau

@@ -8,23 +8,23 @@ local React = _react
 local useState = _react.useState
 local useEffect = _react.useEffect
 -- Static declarations - extracted from render functions for optimal performance
-local STATIC_PROPS_TEXTBUTTON_xvu9b2 = {
+local STATIC_PROPS_TEXTBUTTON_nhab4l = {
 	Text = "Toggle First Item",
 	Size = UDim2.new(0.25, 0, 0, 25),
 	Position = UDim2.new(0.5, 0, 0, 30),
 	BackgroundColor3 = Color3.fromRGB(150, 100, 100),
 	TextColor3 = Color3.fromRGB(255, 255, 255),
 }
-local STATIC_PROPS_TEXTLABEL_1v96ge = {
+local STATIC_PROPS_TEXTLABEL_899va2 = {
 	Text = "Click individual items to toggle them. Notice how Decillion only updates changed items.",
 	Size = UDim2.new(1, 0, 0, 50),
 	Position = UDim2.new(0, 0, 0, 60),
 	TextColor3 = Color3.fromRGB(200, 200, 200),
 	BackgroundTransparency = 1,
 	TextWrapped = true,
 }
-local STATIC_ELEMENT_TEXTBUTTON_995je9 = createStaticElement("textbutton", STATIC_PROPS_TEXTBUTTON_xvu9b2)
-local STATIC_ELEMENT_TEXTLABEL_wu7zte = createStaticElement("textlabel", STATIC_PROPS_TEXTLABEL_1v96ge)
+local STATIC_ELEMENT_TEXTBUTTON_5e6h84 = createStaticElement("TextButton", STATIC_PROPS_TEXTBUTTON_nhab4l)
+local STATIC_ELEMENT_TEXTLABEL_1x7js1 = createStaticElement("TextLabel", STATIC_PROPS_TEXTLABEL_899va2)
 --[[
 	*
 	 * Advanced List Optimization Benchmark
@@ -59,7 +59,7 @@ local function TraditionalListItem(_param)
 				end,
 			},
 		}))
-	end, { isActive, name, value }, "dynamic_frame_h97dqb7cy")
+	end, { isActive, name, value }, "dynamic_frame_gu0vp1zvp")
 end
 -- Decillion optimized approach
 local function OptimizedListItem(_param)
@@ -89,7 +89,7 @@ local function OptimizedListItem(_param)
 				end,
 			},
 		}))
-	end, { isActive, name, value }, "dynamic_frame_mw530qa01")
+	end, { isActive, name, value }, "dynamic_frame_fqmtyi0jd")
 end
 local function OptimizedListBenchmark()
 	local itemCount, setItemCount = useState(100)
@@ -200,7 +200,7 @@ local function OptimizedListBenchmark()
 		Event = {
 			MouseButton1Click = triggerFullRerender,
 		},
-	}), STATIC_ELEMENT_TEXTBUTTON_995je9, React.createElement("textbutton", {
+	}), STATIC_ELEMENT_TEXTBUTTON_5e6h84, React.createElement("textbutton", {
 		Text = `Items: {itemCount}`,
 		Size = UDim2.new(0.25, 0, 0, 25),
 		Position = UDim2.new(0.75, 0, 0, 30),
@@ -211,7 +211,7 @@ local function OptimizedListBenchmark()
 				return setItemCount(if itemCount == 100 then 500 elseif itemCount == 500 then 1000 else 100)
 			end,
 		},
-	}), STATIC_ELEMENT_TEXTLABEL_wu7zte), useMemoizedBlock(function(itemCount, items, ListComponent)
+	}), STATIC_ELEMENT_TEXTLABEL_1x7js1), useMemoizedBlock(function(itemCount, items, ListComponent)
 		local _exp = {
 			Size = UDim2.new(1, 0, 1, -120),
 			Position = UDim2.new(0, 0, 0, 120),
@@ -240,7 +240,7 @@ local function OptimizedListBenchmark()
 		end
 		-- ▲ ReadonlyArray.map ▲
 		return React.createElement("scrollingframe", _exp, _exp_1, _newValue)
-	end, { itemCount, items, ListComponent }, "dynamic_scrollingframe_2t8lkrlmn"))
+	end, { itemCount, items, ListComponent }, "dynamic_scrollingframe_smspxz21k"))
 end
 return {
 	default = OptimizedListBenchmark,

demo/out/benchmark/simple-performance.benchmark.luau

@@ -7,14 +7,14 @@ local _react = TS.import(script, game:GetService("ReplicatedStorage"), "rbxts_in
 local React = _react
 local useState = _react.useState
 -- Static declarations - extracted from render functions for optimal performance
-local STATIC_PROPS_TEXTLABEL_v53xua = {
+local STATIC_PROPS_TEXTLABEL_h5h0qv = {
 	Text = "Check console for render times. Optimized should be significantly faster!",
 	Size = UDim2.new(1, 0, 0, 20),
 	Position = UDim2.new(0, 0, 0, 55),
 	TextColor3 = Color3.fromRGB(200, 200, 200),
 	BackgroundTransparency = 1,
 }
-local STATIC_ELEMENT_TEXTLABEL_3bmyd4 = createStaticElement("textlabel", STATIC_PROPS_TEXTLABEL_v53xua)
+local STATIC_ELEMENT_TEXTLABEL_zey1ls = createStaticElement("TextLabel", STATIC_PROPS_TEXTLABEL_h5h0qv)
 --[[
 	*
 	 * Simple Performance Test: Shows the clear difference between optimized and unoptimized rendering
@@ -51,7 +51,7 @@ local function OptimizedItem(_param)
 			TextColor3 = Color3.fromRGB(255, 255, 255),
 			BackgroundTransparency = 1,
 		}))
-	end, { isHighlighted, text }, "dynamic_frame_naa0t64o9")
+	end, { isHighlighted, text }, "dynamic_frame_exj728egs")
 end
 local function SimplePerformanceTest()
 	local itemCount, setItemCount = useState(500)
@@ -134,7 +134,7 @@ local function SimplePerformanceTest()
 				return setItemCount(if itemCount == 100 then 500 elseif itemCount == 500 then 1000 else 100)
 			end,
 		},
-	}), STATIC_ELEMENT_TEXTLABEL_3bmyd4), useMemoizedBlock(function(itemCount, items, ItemComponent)
+	}), STATIC_ELEMENT_TEXTLABEL_zey1ls), useMemoizedBlock(function(itemCount, items, ItemComponent)
 		local _exp = {
 			Size = UDim2.new(1, 0, 1, -80),
 			Position = UDim2.new(0, 0, 0, 80),
@@ -161,7 +161,7 @@ local function SimplePerformanceTest()
 		end
 		-- ▲ ReadonlyArray.map ▲
 		return React.createElement("scrollingframe", _exp, _exp_1, _newValue)
-	end, { itemCount, items, ItemComponent }, "dynamic_scrollingframe_ko3hc3oyg"))
+	end, { itemCount, items, ItemComponent }, "dynamic_scrollingframe_ofg059k84"))
 end
 return {
 	default = SimplePerformanceTest,

demo/out/counter.luau

@@ -5,31 +5,31 @@ local _react = TS.import(script, game:GetService("ReplicatedStorage"), "rbxts_in
 local React = _react
 local useState = _react.useState
 -- Static declarations - extracted from render functions for optimal performance
-local STATIC_PROPS_TEXTLABEL_4qbg3s = {
+local STATIC_PROPS_TEXTLABEL_mpanhh = {
 	Text = "Optimized Counter App",
 	TextColor3 = Color3.fromRGB(255, 255, 255),
 	BackgroundTransparency = 1,
 	Size = UDim2.new(1, 0, 1, 0),
 }
-local STATIC_PROPS_TEXTLABEL_5rx6df = {
+local STATIC_PROPS_TEXTLABEL_5mqbly = {
 	Text = "Performance: Decillion Optimized",
 	TextColor3 = Color3.fromRGB(200, 200, 200),
 	BackgroundTransparency = 1,
 	Size = UDim2.new(1, 0, 1, 0),
 }
-local STATIC_PROPS_FRAME_l7b4n1 = {
+local STATIC_PROPS_FRAME_5o6iiy = {
 	BackgroundColor3 = Color3.fromRGB(50, 50, 50),
 	Size = UDim2.new(1, 0, 0, 50),
 }
-local STATIC_PROPS_FRAME_3afnud = {
+local STATIC_PROPS_FRAME_7t6bzl = {
 	Size = UDim2.new(1, 0, 0, 100),
 	Position = UDim2.new(0, 0, 0, 160),
 	BackgroundColor3 = Color3.fromRGB(60, 60, 60),
 }
-local STATIC_ELEMENT_TEXTLABEL_rqbjh5 = createStaticElement("textlabel", STATIC_PROPS_TEXTLABEL_4qbg3s)
-local STATIC_ELEMENT_FRAME_i98rh4 = createStaticElement("frame", STATIC_PROPS_FRAME_l7b4n1, STATIC_ELEMENT_TEXTLABEL_rqbjh5)
-local STATIC_ELEMENT_TEXTLABEL_mkv9lk = createStaticElement("textlabel", STATIC_PROPS_TEXTLABEL_5rx6df)
-local STATIC_ELEMENT_FRAME_pabiud = createStaticElement("frame", STATIC_PROPS_FRAME_3afnud, STATIC_ELEMENT_TEXTLABEL_mkv9lk)
+local STATIC_ELEMENT_TEXTLABEL_thasf6 = createStaticElement("TextLabel", STATIC_PROPS_TEXTLABEL_mpanhh)
+local STATIC_ELEMENT_FRAME_d22n8y = createStaticElement("Frame", STATIC_PROPS_FRAME_5o6iiy, STATIC_ELEMENT_TEXTLABEL_thasf6)
+local STATIC_ELEMENT_TEXTLABEL_xymm1y = createStaticElement("TextLabel", STATIC_PROPS_TEXTLABEL_5mqbly)
+local STATIC_ELEMENT_FRAME_djaofb = createStaticElement("Frame", STATIC_PROPS_FRAME_7t6bzl, STATIC_ELEMENT_TEXTLABEL_xymm1y)
 local function Counter()
 	local count, setCount = useState(0)
 	local increment = function()
@@ -41,7 +41,7 @@ local function Counter()
 	return React.createElement("frame", {
 		Size = UDim2.new(1, 0, 1, 0),
 		BackgroundColor3 = Color3.fromRGB(30, 30, 30),
-	}, STATIC_ELEMENT_FRAME_i98rh4, React.createElement("textlabel", {
+	}, STATIC_ELEMENT_FRAME_d22n8y, React.createElement("textlabel", {
 		Text = `Count: {count}`,
 		TextColor3 = Color3.fromRGB(255, 255, 255),
 		BackgroundColor3 = Color3.fromRGB(100, 100, 100),
@@ -65,7 +65,7 @@ local function Counter()
 		Event = {
 			MouseButton1Click = decrement,
 		},
-	}), STATIC_ELEMENT_FRAME_pabiud)
+	}), STATIC_ELEMENT_FRAME_djaofb)
 end
 return {
 	default = Counter,

demo/out/flamework-class.luau

@@ -6,11 +6,11 @@ local Service = TS.import(script, game:GetService("ReplicatedStorage"), "rbxts_i
 local ReactRoblox = TS.import(script, game:GetService("ReplicatedStorage"), "rbxts_include", "node_modules", "@rbxts", "react-roblox")
 local Workspace = TS.import(script, game:GetService("ReplicatedStorage"), "rbxts_include", "node_modules", "@rbxts", "services").Workspace
 -- Static declarations - extracted from render functions for optimal performance
-local STATIC_PROPS_TEXTLABEL_8c02o3 = {
+local STATIC_PROPS_TEXTLABEL_pqpj5q = {
 	Text = "Static Element",
 }
-local STATIC_ELEMENT_TEXTLABEL_w1e011 = createStaticElement("textlabel", STATIC_PROPS_TEXTLABEL_8c02o3)
-local STATIC_ELEMENT_FRAME_qyud6u = createStaticElement("frame", nil, STATIC_ELEMENT_TEXTLABEL_w1e011)
+local STATIC_ELEMENT_TEXTLABEL_4x3z3d = createStaticElement("TextLabel", STATIC_PROPS_TEXTLABEL_pqpj5q)
+local STATIC_ELEMENT_FRAME_9k0ofg = createStaticElement("Frame", nil, STATIC_ELEMENT_TEXTLABEL_4x3z3d)
 local FlameworkClass
 do
 	FlameworkClass = setmetatable({}, {
@@ -26,7 +26,7 @@ do
 	function FlameworkClass:constructor()
 	end
 	function FlameworkClass:createStaticElement()
-		return STATIC_ELEMENT_FRAME_qyud6u
+		return STATIC_ELEMENT_FRAME_9k0ofg
 	end
 	function FlameworkClass:onInit()
 		print("FlameworkClass initialized!")

demo/out/hello-world.story.luau

@@ -4,18 +4,18 @@ local createStaticElement = TS.import(script, game:GetService("ReplicatedStorage
 local React = TS.import(script, game:GetService("ReplicatedStorage"), "rbxts_include", "node_modules", "@rbxts", "react")
 local ReactRoblox = TS.import(script, game:GetService("ReplicatedStorage"), "rbxts_include", "node_modules", "@rbxts", "react-roblox")
 -- Static declarations - extracted from render functions for optimal performance
-local STATIC_PROPS_TEXTLABEL_hn8l67 = {
+local STATIC_PROPS_TEXTLABEL_px79uv = {
 	AnchorPoint = Vector2.new(0.5, 0.5),
 	BackgroundColor3 = Color3.new(1, 1, 1),
 	Position = UDim2.new(0.5, 0, 0.5, 0),
 	Size = UDim2.new(0, 200, 0, 200),
 	Text = "Hello, world!",
 }
-local STATIC_ELEMENT_TEXTLABEL_wi19i3 = createStaticElement("textlabel", STATIC_PROPS_TEXTLABEL_hn8l67)
+local STATIC_ELEMENT_TEXTLABEL_0bi77o = createStaticElement("TextLabel", STATIC_PROPS_TEXTLABEL_px79uv)
 return {
 	react = React,
 	reactRoblox = ReactRoblox,
 	story = function()
-		return STATIC_ELEMENT_TEXTLABEL_wi19i3
+		return STATIC_ELEMENT_TEXTLABEL_0bi77o
 	end,
 }

transformer/src/codegen.ts

@@ -52,14 +52,14 @@ export function generateBlockId(tagName: string): string {
  * - Lowercase tags (frame, textlabel) become string literals
  * - PascalCase tags (Counter, MyComponent) become identifiers
  */
-function createTagReference(tagName: string): ts.Expression {
+function createTagReference(tagName: string, tagToInstanceNameMap: Map<string, string>): ts.Expression {
     // Check if tag name starts with uppercase (PascalCase component)
     if (tagName[0] && tagName[0] === tagName[0].toUpperCase()) {
         // React component - use identifier
         return ts.factory.createIdentifier(tagName);
     } else {
         // HTML-like element - use string literal
-        return ts.factory.createStringLiteral(tagName);
+        return ts.factory.createStringLiteral(tagToInstanceNameMap.get(tagName.toLowerCase()) || tagName);
     }
 }
 
@@ -70,9 +70,10 @@ export function createStaticElementCall(
     tagName: string,
     propsArg: ts.Expression,
     children: ts.Expression[] = [],
+    tagToInstanceNameMap: Map<string, string>,
 ): ts.CallExpression {
     return ts.factory.createCallExpression(ts.factory.createIdentifier("createStaticElement"), undefined, [
-        createTagReference(tagName),
+        createTagReference(tagName, tagToInstanceNameMap),
         propsArg,
         ...children,
     ]);

transformer/src/roblox-bridge.ts

@@ -77,6 +77,19 @@ class RobloxBridge {
         this.initialized = true;
     }
 
+    /**
+     * Get a mapping of tag names to instance names for Roblox elements
+     *
+     * @returns A map of tag names to instance names
+     */
+    getTagToInstanceNameMap() {
+        const map = new Map<string, string>();
+        for (const instanceName of this.staticConstructors) {
+            map.set(instanceName.toLowerCase(), instanceName);
+        }
+        return map;
+    }
+
     private resolveRobloxDTs(program: ts.Program): ts.ResolvedModuleFull | undefined {
         // First try the standard TypeScript module resolution
         const standardResolve = ts.resolveModuleName(

transformer/src/transformer.ts

@@ -124,6 +124,7 @@ export class DecillionTransformer {
             blockAnalyzer,
             skipTransformFunctions: new Set<string>(),
             functionContextStack: [],
+            tagToInstanceNameMap: robloxStaticDetector.getTagToInstanceNameMap(),
         };
     }
 
@@ -194,7 +195,7 @@ function generateStaticElement(
         propsArg = ts.factory.createIdentifier("undefined");
     }
 
-    const elementCall = createStaticElementCall(tagName, propsArg, children);
+    const elementCall = createStaticElementCall(tagName, propsArg, children, context.tagToInstanceNameMap);
 
     // Check if we should extract the full static element to module level
     if (extractFullElement && isCompletelyStatic(node, context)) {

transformer/src/types.ts

@@ -58,4 +58,6 @@ export interface OptimizationContext {
     skipTransformFunctions: Set<string>;
     /** Stack of current function context to track if we're inside a skip function */
     functionContextStack: string[];
+    /** Map of tag names to Roblox instance names */
+    tagToInstanceNameMap: Map<string, string>;
 }