Introduce examples and example runner (#86)

examples/clock/init.lua

@@ -0,0 +1,43 @@
+return function()
+	local PlayerGui = game:GetService("Players").LocalPlayer.PlayerGui
+
+	local Roact = require(game.ReplicatedStorage.Roact)
+
+	local function ClockApp(props)
+		local time = props.time
+
+		return Roact.createElement("ScreenGui", nil, {
+			Main = Roact.createElement("TextLabel", {
+				Size = UDim2.new(0, 400, 0, 300),
+				Position = UDim2.new(0.5, 0, 0.5, 0),
+				AnchorPoint = Vector2.new(0.5, 0.5),
+				Text = "The current time is: " .. time,
+			}),
+		})
+	end
+
+	local running = true
+	local currentTime = 0
+	local handle = Roact.reify(Roact.createElement(ClockApp, {
+		time = currentTime,
+	}), PlayerGui)
+
+	spawn(function()
+		while running do
+			currentTime = currentTime + 1
+
+			handle = Roact.reconcile(handle, Roact.createElement(ClockApp, {
+				time = currentTime,
+			}))
+
+			wait(1)
+		end
+	end)
+
+	local function stop()
+		running = false
+		Roact.teardown(handle)
+	end
+
+	return stop
+end

examples/hello-roact/init.lua

@@ -0,0 +1,22 @@
+return function()
+	local PlayerGui = game:GetService("Players").LocalPlayer.PlayerGui
+
+	local Roact = require(game.ReplicatedStorage.Roact)
+
+	local app = Roact.createElement("ScreenGui", nil, {
+		Main = Roact.createElement("TextLabel", {
+			Size = UDim2.new(0, 400, 0, 300),
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Text = "Hello, Roact!",
+		}),
+	})
+
+	local handle = Roact.reify(app, PlayerGui)
+
+	local function stop()
+		Roact.teardown(handle)
+	end
+
+	return stop
+end

examples/start-examples.client.lua

@@ -0,0 +1,114 @@
+local PlayerGui = game:GetService("Players").LocalPlayer.PlayerGui
+
+local exampleData = {
+	{
+		name = "hello-roact",
+		label = "Hello, Roact!",
+	},
+	{
+		name = "clock",
+		label = "Clock",
+	},
+}
+
+for _, example in ipairs(exampleData) do
+	example.source = script.Parent:WaitForChild(example.name)
+	example.start = require(example.source)
+end
+
+local Examples = {}
+
+Examples.exampleList = nil
+
+function Examples.makeBackButton()
+	local screenGui = Instance.new("ScreenGui")
+	screenGui.Name = "Back to Examples"
+
+	local button = Instance.new("TextButton")
+	button.Font = Enum.Font.SourceSans
+	button.TextSize = 20
+	button.Size = UDim2.new(0, 150, 0, 80)
+	button.Position = UDim2.new(0, 0, 0.5, 0)
+	button.AnchorPoint = Vector2.new(0, 0.5)
+	button.Text = "Back to Examples"
+	button.BackgroundColor3 = Color3.new(0.9, 0.9, 0.9)
+	button.BorderColor3 = Color3.new(0, 0, 0)
+
+	button.Activated:Connect(function()
+		screenGui:Destroy()
+
+		Examples.onStop()
+		Examples.onStop = nil
+
+		Examples.exampleList = Examples.makeExampleList()
+		Examples.exampleList.Parent = PlayerGui
+	end)
+
+	button.Parent = screenGui
+
+	return screenGui
+end
+
+function Examples.openExample(example)
+	Examples.exampleList:Destroy()
+
+	local back = Examples.makeBackButton()
+	back.Parent = PlayerGui
+
+	Examples.onStop = example.start()
+end
+
+function Examples.makeExampleList()
+	local screenGui = Instance.new("ScreenGui")
+	screenGui.Name = "Roact Examples"
+
+	local exampleList = Instance.new("ScrollingFrame")
+	exampleList.Size = UDim2.new(0, 400, 0, 600)
+	exampleList.CanvasSize = UDim2.new(0, 400, 0, 80 * #exampleData)
+	exampleList.Position = UDim2.new(0.5, 0, 0.5, 0)
+	exampleList.AnchorPoint = Vector2.new(0.5, 0.5)
+	exampleList.BorderSizePixel = 2
+	exampleList.BackgroundColor3 = Color3.new(1, 1, 1)
+	exampleList.TopImage = "rbxassetid://29050676"
+	exampleList.MidImage = "rbxassetid://29050676"
+	exampleList.BottomImage = "rbxassetid://29050676"
+	exampleList.Parent = screenGui
+
+	local listLayout = Instance.new("UIListLayout")
+	listLayout.SortOrder = Enum.SortOrder.LayoutOrder
+	listLayout.Parent = exampleList
+
+	for index, example in ipairs(exampleData) do
+		local label = ("%s\nexamples/%s"):format(example.label, example.name)
+
+		local exampleCard = Instance.new("TextButton")
+		exampleCard.Name = "Example: " .. example.name
+		exampleCard.BackgroundColor3 = Color3.new(0.9, 0.9, 0.9)
+		exampleCard.BorderSizePixel = 0
+		exampleCard.Text = label
+		exampleCard.Font = Enum.Font.SourceSans
+		exampleCard.TextSize = 20
+		exampleCard.Size = UDim2.new(1, 0, 0, 80)
+		exampleCard.LayoutOrder = index
+
+		exampleCard.Activated:Connect(function()
+			Examples.openExample(example)
+		end)
+
+		exampleCard.Parent = exampleList
+
+		local bottomBorder = Instance.new("Frame")
+		bottomBorder.Name = "Bottom Border"
+		bottomBorder.Position = UDim2.new(0, 0, 1, -1)
+		bottomBorder.Size = UDim2.new(0, 400, 0, 1)
+		bottomBorder.BorderSizePixel = 0
+		bottomBorder.BackgroundColor3 = Color3.new(0, 0, 0)
+		bottomBorder.ZIndex = 2
+		bottomBorder.Parent = exampleCard
+	end
+
+	return screenGui
+end
+
+Examples.exampleList = Examples.makeExampleList()
+Examples.exampleList.Parent = PlayerGui

rojo.json

@@ -6,13 +6,9 @@
       "path": "lib",
       "target": "ReplicatedStorage.Roact"
     },
-    "benches": {
-      "path": "benchmarks",
-      "target": "ReplicatedStorage.Benchmarks"
-    },
-    "start-benchmarks": {
-      "path": "start-benchmarks.server.lua",
-      "target": "ServerScriptService.start-benchmarks"
+    "examples": {
+      "path": "examples",
+      "target": "StarterPlayer.StarterPlayerScripts"
     },
     "testez": {
       "path": "modules/testez/lib",