Add Headless API

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Rojo Changelog
 
 ## Unreleased Changes
+* Added headless API for Studio companion plugins. ([#631])
 * Added popout diff visualizer for table properties like Attributes and Tags ([#834])
 * Updated Theme to use Studio colors ([#838])
 * Added experimental setting for Auto Connect in playtests ([#840])
@@ -51,6 +52,7 @@
 
     **All** sync rules are reset between project files, so they must be specified in each one when nesting them. This is to ensure that nothing can break other projects by changing how files are synced!
 
+[#631]: https://github.com/rojo-rbx/rojo/pull/631
 [#813]: https://github.com/rojo-rbx/rojo/pull/813
 [#834]: https://github.com/rojo-rbx/rojo/pull/834
 [#838]: https://github.com/rojo-rbx/rojo/pull/838
@@ -89,6 +91,7 @@
 
 ## [7.4.0-rc1] - October 3, 2023
 ### Additions
+
 #### Project format
 * Added support for `.toml` files to `$path` ([#633])
 * Added support for `Font` and `CFrame` attributes ([rbx-dom#299], [rbx-dom#296])

plugin/src/App/Components/ScrollingFrame.lua

@@ -31,6 +31,7 @@ local function ScrollingFrame(props)
 			ElasticBehavior = Enum.ElasticBehavior.Always,
 			ScrollingDirection = props.scrollingDirection or Enum.ScrollingDirection.Y,
 
+			LayoutOrder = props.layoutOrder,
 			Size = props.size,
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,

plugin/src/App/Components/Toggle.lua

@@ -0,0 +1,137 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Theme = require(Plugin.App.Theme)
+
+local Checkbox = require(Plugin.App.Components.Checkbox)
+
+local e = Roact.createElement
+
+local DIVIDER_FADE_SIZE = 0.1
+
+local function getTextBounds(text, textSize, font, lineHeight, bounds)
+	local textBounds = TextService:GetTextSize(text, textSize, font, bounds)
+
+	local lineCount = textBounds.Y / textSize
+	local lineHeightAbsolute = textSize * lineHeight
+
+	return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize))
+end
+
+local Toggle = Roact.Component:extend("Toggle")
+
+function Toggle:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function Toggle:render()
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		return e("Frame", {
+			Size = self.contentSize:map(function(value)
+				return UDim2.new(1, 0, 0, 20 + value.Y + 20)
+			end),
+			LayoutOrder = self.props.layoutOrder,
+			ZIndex = -self.props.layoutOrder,
+			BackgroundTransparency = 1,
+
+			[Roact.Change.AbsoluteSize] = function(object)
+				self.setContainerSize(object.AbsoluteSize)
+			end,
+		}, {
+			Input = e(Checkbox, {
+				active = self.props.active,
+				transparency = self.props.transparency,
+				position = UDim2.new(1, 0, 0.5, 0),
+				anchorPoint = Vector2.new(1, 0.5),
+				onClick = self.props.onClick,
+			}),
+
+			Text = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1,
+			}, {
+				Name = e("TextLabel", {
+					Text = self.props.name,
+					Font = Enum.Font.GothamBold,
+					TextSize = 17,
+					TextColor3 = theme.Setting.NameColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+
+					Size = UDim2.new(1, 0, 0, 17),
+
+					LayoutOrder = 1,
+					BackgroundTransparency = 1,
+				}),
+
+				Description = e("TextLabel", {
+					Text = self.props.description,
+					Font = Enum.Font.Gotham,
+					LineHeight = 1.2,
+					TextSize = 14,
+					TextColor3 = theme.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+					TextWrapped = true,
+
+					Size = self.containerSize:map(function(value)
+						local offset = self.props.options ~= nil and 120 or 40
+						local textBounds = getTextBounds(
+							self.props.description,
+							14,
+							Enum.Font.Gotham,
+							1.2,
+							Vector2.new(value.X - offset, math.huge)
+						)
+						return UDim2.new(1, -offset, 0, textBounds.Y)
+					end),
+
+					LayoutOrder = 2,
+					BackgroundTransparency = 1,
+				}),
+
+				Layout = e("UIListLayout", {
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 6),
+
+					[Roact.Change.AbsoluteContentSize] = function(object)
+						self.setContentSize(object.AbsoluteContentSize)
+					end,
+				}),
+
+				Padding = e("UIPadding", {
+					PaddingTop = UDim.new(0, 20),
+					PaddingBottom = UDim.new(0, 20),
+				}),
+			}),
+
+			Divider = e("Frame", {
+				BackgroundColor3 = theme.DividerColor,
+				BackgroundTransparency = self.props.transparency,
+				Size = UDim2.new(1, 0, 0, 1),
+				BorderSizePixel = 0,
+			}, {
+				Gradient = e("UIGradient", {
+					Transparency = NumberSequence.new({
+						NumberSequenceKeypoint.new(0, 1),
+						NumberSequenceKeypoint.new(DIVIDER_FADE_SIZE, 0),
+						NumberSequenceKeypoint.new(1 - DIVIDER_FADE_SIZE, 0),
+						NumberSequenceKeypoint.new(1, 1),
+					}),
+				}),
+			}),
+		})
+	end)
+end
+
+return Toggle

plugin/src/App/ConflictAPIPopup.lua

@@ -0,0 +1,129 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Config = require(Plugin.Config)
+local Version = require(Plugin.Version)
+local Theme = require(Plugin.App.Theme)
+
+local TextButton = require(Plugin.App.Components.TextButton)
+
+local e = Roact.createElement
+
+local ConflictAPIPopup = Roact.Component:extend("ConflictAPIPopup")
+
+function ConflictAPIPopup:render()
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		return e("Frame", {
+			BackgroundTransparency = 1,
+			Size = UDim2.new(1, 0, 1, 0),
+		}, {
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 20),
+				PaddingRight = UDim.new(0, 20),
+				PaddingTop = UDim.new(0, 15),
+				PaddingBottom = UDim.new(0, 15),
+			}),
+
+			Details = e("Frame", {
+				BackgroundTransparency = 1,
+				Size = UDim2.new(1, 0, 1, 0),
+			}, {
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 15),
+					HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				}),
+
+				Info = e("TextLabel", {
+					BackgroundTransparency = 1,
+					Size = UDim2.new(1, 0, 0, 0),
+					AutomaticSize = Enum.AutomaticSize.Y,
+					Text = "There is already a Rojo API exposed by a Rojo plugin. Do you want to overwrite it with this one?",
+					Font = Enum.Font.GothamMedium,
+					TextSize = 17,
+					TextColor3 = theme.Setting.NameColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextWrapped = true,
+					TextTransparency = self.props.transparency,
+					LayoutOrder = 1,
+				}),
+
+				Existing = e("TextLabel", {
+					BackgroundTransparency = 1,
+					Size = UDim2.new(1, 0, 0, 0),
+					AutomaticSize = Enum.AutomaticSize.Y,
+					Text = string.format(
+						"Existing: Version %s, Protocol %d",
+						Version.display(self.props.existingAPI.Version),
+						self.props.existingAPI.ProtocolVersion
+					),
+					Font = Enum.Font.Gotham,
+					TextSize = 15,
+					TextColor3 = theme.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+					LayoutOrder = 2,
+				}),
+
+				Incoming = e("TextLabel", {
+					BackgroundTransparency = 1,
+					Size = UDim2.new(1, 0, 0, 0),
+					AutomaticSize = Enum.AutomaticSize.Y,
+					Text = string.format(
+						"Incoming: Version %s, Protocol %d",
+						Version.display(Config.version),
+						Config.protocolVersion
+					),
+					Font = Enum.Font.Gotham,
+					TextSize = 15,
+					TextColor3 = theme.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+					LayoutOrder = 3,
+				}),
+			}),
+
+			Actions = e("Frame", {
+				BackgroundTransparency = 1,
+				Size = UDim2.new(1, 0, 0, 34),
+				Position = UDim2.fromScale(0, 1),
+				AnchorPoint = Vector2.new(0, 1),
+			}, {
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 10),
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+				}),
+
+				Keep = e(TextButton, {
+					text = "Keep",
+					style = "Bordered",
+					transparency = self.props.transparency,
+					layoutOrder = 1,
+					onClick = function()
+						self.props.onDeny()
+					end,
+				}),
+
+				Overwrite = e(TextButton, {
+					text = "Overwrite",
+					style = "Solid",
+					transparency = self.props.transparency,
+					layoutOrder = 2,
+					onClick = function()
+						self.props.onAccept()
+					end,
+				}),
+			}),
+		})
+	end)
+end
+
+return ConflictAPIPopup