Inject build information when compiling (#287)

# Problem

It can be useful to know the version, channel, and commit hash for a
given build of Flipbook, especially to help when debugging. We only
include the version right now, the other two would be useful

# Solution

Created a new BuildInfo component which gets mounted on AboutView. It
leverages some new globals that get injected during the darklua build
step.

I've also removed the inclusion of `wally.toml` in the Flipbook plugin
build since the only info we were using was the version, and that's now
supplied via `_G.BUILD_VERSION`

# Checklist

- [x] Ran `lune run test` locally before merging

.darklua.json

@@ -15,11 +15,26 @@
         "indexing_style": "property"
       }
     },
+    {
+      "rule": "inject_global_value",
+      "identifier": "BUILD_VERSION",
+      "env": "BUILD_VERSION"
+    },
+    {
+      "rule": "inject_global_value",
+      "identifier": "BUILD_CHANNEL",
+      "env": "BUILD_CHANNEL"
+    },
+    {
+      "rule": "inject_global_value",
+      "identifier": "BUILD_HASH",
+      "env": "BUILD_HASH"
+    },
     "compute_expression",
     "remove_unused_if_branch",
     "remove_unused_while",
     "filter_after_early_return",
     "remove_nil_declaration",
     "remove_empty_do"
   ]
-}
+}

.lune/lib/compile.luau

@@ -1,7 +1,10 @@
 local constants = require("./constants")
 local fs = require("@lune/fs")
+local serde = require("@lune/serde")
 local run = require("./run")
 
+local wallyToml = serde.decode("toml", fs.readFile("wally.toml"))
+
 type Target = "prod" | "dev"
 
 local PRUNED_FILES = {
@@ -13,24 +16,38 @@ local PRUNED_FILES = {
 local function compile(target: Target)
 	fs.writeDir(constants.BUILD_PATH)
 
+	local commitHash = run("git", { "rev-parse", "--short", "HEAD" })
+
+	local env = {
+		BUILD_VERSION = wallyToml.package.version,
+		BUILD_CHANNEL = if target == "prod" then "production" else "development",
+		BUILD_HASH = commitHash,
+	}
+
 	run("rojo", {
 		"sourcemap",
 		constants.ROJO_BUILD_PROJECT,
 		"-o",
 		constants.DARKLUA_SOURCEMAP_PATH,
 	})
 
+	print("substituting globals", env)
+
 	run("darklua", {
 		"process",
 		constants.SOURCE_PATH,
 		constants.BUILD_PATH,
+	}, {
+		env = env,
 	})
 
 	if target == "dev" then
 		run("darklua", {
 			"process",
 			"example",
 			`{constants.BUILD_PATH}/Example`,
+		}, {
+			env = env,
 		})
 	end
 

build.project.json

@@ -7,9 +7,6 @@
     "Example": {
       "$path": "example"
     },
-    "wally.toml": {
-      "$path": "wally.toml"
-    },
     "$path": "src"
   }
 }

default.project.json

@@ -4,9 +4,6 @@
     "Packages": {
       "$path": "Packages"
     },
-    "wally.toml": {
-      "$path": "wally.toml"
-    },
     "$path": "build"
   }
 }

src/About/AboutView.luau

@@ -1,11 +1,11 @@
 local React = require("@pkg/React")
 
 local RobloxProfile = require("@root/About/RobloxProfile")
+local BuildInfo = require("@root/About/BuildInfo")
 local Sprite = require("@root/Common/Sprite")
 local assets = require("@root/assets")
 local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
 local useTheme = require("@root/Common/useTheme")
-local wally = require(script.Parent.Parent["wally.toml"])
 
 local useMemo = React.useMemo
 
@@ -58,7 +58,7 @@ local function AboutView()
 			Font = theme.font,
 			LayoutOrder = nextLayoutOrder(),
 			Size = UDim2.fromScale(0, 0),
-			Text = `flipbook v{wally.package.version}`,
+			Text = `flipbook {if _G.BUILD_VERSION then _G.BUILD_VERSION else "unreleased"}`,
 			TextColor3 = theme.text,
 			TextSize = theme.headerTextSize,
 			TextWrapped = true,
@@ -130,14 +130,18 @@ local function AboutView()
 			}, authors),
 		}),
 
+		BuildInfo = React.createElement(BuildInfo, {
+			layoutOrder = nextLayoutOrder(),
+		}),
+
 		Copy = React.createElement("TextLabel", {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			BackgroundTransparency = 1,
 			Font = theme.font,
 			LayoutOrder = nextLayoutOrder(),
 			Size = UDim2.fromScale(0, 0),
 			Text = `Copyright © 2021—{currentYear} flipbook-labs`,
-			TextColor3 = theme.text,
+			TextColor3 = theme.textSubtitle,
 			TextSize = theme.textSize,
 			TextWrapped = true,
 		}),

src/About/BuildInfo.luau

@@ -0,0 +1,45 @@
+local React = require("@pkg/React")
+
+local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
+local useTheme = require("@root/Common/useTheme")
+
+local BUILD_INFO = {
+	{ label = "Version", value = _G.BUILD_VERSION },
+	{ label = "Channel", value = _G.BUILD_CHANNEL },
+	{ label = "Hash", value = _G.BUILD_HASH },
+}
+
+export type Props = {
+	layoutOrder: number?,
+}
+
+local function BuildInfo(props: Props)
+	local theme = useTheme()
+
+	local children: { [string]: React.Node } = {}
+	for _, info in BUILD_INFO do
+		children[info.label] = React.createElement("TextLabel", {
+			LayoutOrder = nextLayoutOrder(),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			Font = theme.font,
+			Text = `{info.label}: {info.value}`,
+			TextColor3 = theme.textSubtitle,
+			TextSize = theme.textSize,
+		})
+	end
+
+	return React.createElement("Frame", {
+		LayoutOrder = props.layoutOrder,
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+	}, {
+		Layout = React.createElement("UIListLayout", {
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			Padding = theme.paddingSmall,
+		}),
+	}, children)
+end
+
+return BuildInfo

src/constants.luau

@@ -10,11 +10,6 @@ return {
 	CONTROLS_MIN_HEIGHT = 100, -- px
 	CONTROLS_MAX_HEIGHT = 400, -- px
 
-	-- Enabling dev mode will add flipbook's storybook to the list of available
-	-- storybooks to make localy testing easier. It also adds a [DEV] tag to the
-	-- plugin
-	IS_DEV_MODE = false,
-
 	SPRING_CONFIG = {
 		clamp = true,
 		mass = 0.6,

src/init.server.luau

@@ -10,16 +10,11 @@ local ReactRoblox = require("@pkg/ReactRoblox")
 
 local ContextProviders = require("@root/Common/ContextProviders")
 local PluginApp = require("@root/Plugin/PluginApp")
-local constants = require("@root/constants")
 local createToggleButton = require("@root/Plugin/createToggleButton")
 local createWidget = require("@root/Plugin/createWidget")
 
 local PLUGIN_NAME = "flipbook"
 
-if constants.IS_DEV_MODE then
-	PLUGIN_NAME = "flipbook [DEV]"
-end
-
 local toolbar = plugin:CreateToolbar(PLUGIN_NAME)
 local widget = createWidget(plugin, PLUGIN_NAME)
 local root = ReactRoblox.createRoot(widget)