Add Headless API

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Rojo Changelog
 
 ## Unreleased Changes
+* Added headless API for Studio companion plugins. ([#639])
 * Rojo now converts any line endings to LF, preventing spurious diffs when syncing Lua files on Windows ([#854])
 * Fixed Rojo plugin failing to connect when project contains certain unreadable properties ([#848])
 * Added popout diff visualizer for table properties like Attributes and Tags ([#834])
@@ -54,6 +55,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!
 
+[#639]: https://github.com/rojo-rbx/rojo/pull/639
 [#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
@@ -96,6 +98,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/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

plugin/src/App/Notifications.lua

@@ -119,14 +119,18 @@ function Notification:render()
 		buttonsX += (count - 1) * 5
 	end
 
-	local paddingY, logoSize = 20, 32
+	local paddingX, paddingY, logoSize = 24, 20, 32
+	local sourceY = if self.props.source then logoSize + 5 else 0
+	local sourceX = if self.props.source
+		then TextService:GetTextSize(self.props.source, 15, Enum.Font.GothamMedium, Vector2.new(350, 15)).X + logoSize + 5
+		else 0
 	local actionsY = if self.props.actions then 35 else 0
-	local contentX = math.max(textBounds.X, buttonsX)
+	local contentX = math.max(textBounds.X, buttonsX, sourceX) + (if self.props.thirdParty then 0 else logoSize + 3) + 2
 
 	local size = self.binding:map(function(value)
 		return UDim2.fromOffset(
-			(35 + 40 + contentX) * value,
-			5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
+			(paddingX + contentX) * value,
+			5 + actionsY + sourceY + paddingY + math.max(logoSize, textBounds.Y)
 		)
 	end)
 
@@ -146,56 +150,69 @@ function Notification:render()
 				transparency = transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
-				Contents = e("Frame", {
-					Size = UDim2.new(0, 35 + contentX, 1, -paddingY),
-					Position = UDim2.new(0, 0, 0, paddingY / 2),
+				Logo = e("ImageLabel", {
+					ImageTransparency = transparency,
+					Image = if self.props.thirdParty
+						then Assets.Images.ThirdPartyPlugin
+						else Assets.Images.PluginButton,
 					BackgroundTransparency = 1,
-				}, {
-					Logo = e("ImageLabel", {
-						ImageTransparency = transparency,
-						Image = Assets.Images.PluginButton,
-						BackgroundTransparency = 1,
-						Size = UDim2.new(0, logoSize, 0, logoSize),
-						Position = UDim2.new(0, 0, 0, 0),
-						AnchorPoint = Vector2.new(0, 0),
-					}),
-					Info = e("TextLabel", {
-						Text = self.props.text,
+					Size = UDim2.new(0, logoSize, 0, logoSize),
+					Position = UDim2.new(0, 0, 0, 0),
+					AnchorPoint = Vector2.new(0, 0),
+				}),
+				Source = if self.props.source
+					then e("TextLabel", {
+						Text = self.props.source,
 						Font = Enum.Font.GothamMedium,
 						TextSize = 15,
 						TextColor3 = theme.Notification.InfoColor,
 						TextTransparency = transparency,
 						TextXAlignment = Enum.TextXAlignment.Left,
-						TextWrapped = true,
-
-						Size = UDim2.new(0, textBounds.X, 0, textBounds.Y),
-						Position = UDim2.fromOffset(35, 0),
+						TextTruncate = Enum.TextTruncate.AtEnd,
 
-						LayoutOrder = 1,
+						Size = UDim2.new(1, -logoSize - 5, 0, logoSize),
+						Position = UDim2.fromOffset(logoSize + 5, 0),
 						BackgroundTransparency = 1,
-					}),
-					Actions = if self.props.actions
-						then e("Frame", {
-							Size = UDim2.new(1, -40, 0, 35),
-							Position = UDim2.new(1, 0, 1, 0),
-							AnchorPoint = Vector2.new(1, 1),
-							BackgroundTransparency = 1,
-						}, {
-							Layout = e("UIListLayout", {
-								FillDirection = Enum.FillDirection.Horizontal,
-								HorizontalAlignment = Enum.HorizontalAlignment.Right,
-								VerticalAlignment = Enum.VerticalAlignment.Center,
-								SortOrder = Enum.SortOrder.LayoutOrder,
-								Padding = UDim.new(0, 5),
-							}),
-							Buttons = Roact.createFragment(actionButtons),
-						})
-						else nil,
+					})
+					else nil,
+				Message = e("TextLabel", {
+					Text = self.props.text,
+					Font = Enum.Font.GothamMedium,
+					TextSize = 15,
+					TextColor3 = theme.Notification.InfoColor,
+					TextTransparency = transparency,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextWrapped = true,
+
+					Size = UDim2.new(0, textBounds.X, 0, textBounds.Y),
+					Position = if self.props.thirdParty
+						then UDim2.fromOffset(0, logoSize + 5)
+						else UDim2.fromOffset(logoSize + 3, 0),
+					BackgroundTransparency = 1,
 				}),
+				Actions = if self.props.actions
+					then e("Frame", {
+						Size = UDim2.new(1, -40, 0, 35),
+						Position = UDim2.new(1, 0, 1, 0),
+						AnchorPoint = Vector2.new(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						Layout = e("UIListLayout", {
+							FillDirection = Enum.FillDirection.Horizontal,
+							HorizontalAlignment = Enum.HorizontalAlignment.Right,
+							VerticalAlignment = Enum.VerticalAlignment.Center,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 5),
+						}),
+						Buttons = Roact.createFragment(actionButtons),
+					})
+					else nil,
 
 				Padding = e("UIPadding", {
-					PaddingLeft = UDim.new(0, 17),
-					PaddingRight = UDim.new(0, 15),
+					PaddingLeft = UDim.new(0, paddingX / 2),
+					PaddingRight = UDim.new(0, paddingX / 2),
+					PaddingTop = UDim.new(0, paddingY / 2),
+					PaddingBottom = UDim.new(0, paddingY / 2),
 				}),
 			}),
 		})
@@ -214,6 +231,8 @@ function Notifications:render()
 			timestamp = notif.timestamp,
 			timeout = notif.timeout,
 			actions = notif.actions,
+			source = notif.source,
+			thirdParty = notif.thirdParty,
 			layoutOrder = (notif.timestamp - baseClock),
 			onClose = function()
 				self.props.onClose(id)