View rich diffs for Source property changes (#748)

.gitmodules

@@ -13,3 +13,6 @@
 [submodule "plugin/Packages/TestEZ"]
 	path = plugin/Packages/TestEZ
 	url = https://github.com/roblox/testez.git
+[submodule "plugin/Packages/Highlighter"]
+	path = plugin/Packages/Highlighter
+	url = https://github.com/boatbomber/highlighter.git

CHANGELOG.md

@@ -21,6 +21,7 @@
 * Add `plugin` flag to the `build` command that outputs to the local plugins folder ([#735])
 * Added better support for `Font` properties ([#731])
 * Add new plugin template to the `init` command ([#738])
+* Added rich Source diffs in patch visualizer ([#748])
 
 [#745]: https://github.com/rojo-rbx/rojo/pull/745
 [#668]: https://github.com/rojo-rbx/rojo/pull/668
@@ -42,6 +43,7 @@
 [#735]: https://github.com/rojo-rbx/rojo/pull/735
 [#731]: https://github.com/rojo-rbx/rojo/pull/731
 [#738]: https://github.com/rojo-rbx/rojo/pull/738
+[#748]: https://github.com/rojo-rbx/rojo/pull/748
 
 ## [7.3.0] - April 22, 2023
 * Added `$attributes` to project format. ([#574])

plugin/src/App/Components/CodeLabel.lua

@@ -0,0 +1,61 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Highlighter = require(Packages.Highlighter)
+Highlighter.matchStudioSettings()
+
+local e = Roact.createElement
+
+local CodeLabel = Roact.PureComponent:extend("CodeLabel")
+
+function CodeLabel:init()
+	self.labelRef = Roact.createRef()
+	self.highlightsRef = Roact.createRef()
+end
+
+function CodeLabel:didMount()
+	Highlighter.highlight({
+		textObject = self.labelRef:getValue(),
+	})
+	self:updateHighlights()
+end
+
+function CodeLabel:didUpdate()
+    self:updateHighlights()
+end
+
+function CodeLabel:updateHighlights()
+	local highlights = self.highlightsRef:getValue()
+	if not highlights then
+		return
+	end
+
+	for _, lineLabel in highlights:GetChildren() do
+		local lineNum = tonumber(string.match(lineLabel.Name, "%d+") or "0")
+		lineLabel.BackgroundColor3 = self.props.lineBackground
+		lineLabel.BorderSizePixel = 0
+		lineLabel.BackgroundTransparency = if self.props.markedLines[lineNum] then 0.25 else 1
+	end
+end
+
+function CodeLabel:render()
+	return e("TextLabel", {
+		Size = self.props.size,
+		Position = self.props.position,
+		Text = self.props.text,
+		BackgroundTransparency = 1,
+		Font = Enum.Font.RobotoMono,
+		TextSize = 16,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Top,
+		TextColor3 = Color3.fromRGB(255, 255, 255),
+		[Roact.Ref] = self.labelRef,
+	}, {
+		SyntaxHighlights = e("Folder", {
+			[Roact.Ref] = self.highlightsRef,
+		}),
+	})
+end
+
+return CodeLabel

plugin/src/App/Components/PatchVisualizer/ChangeList.lua

@@ -4,8 +4,10 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local DisplayValue = require(script.Parent.DisplayValue)
 
 local EMPTY_TABLE = {}
@@ -93,6 +95,89 @@ function ChangeList:render()
 			local metadata = values[4] or EMPTY_TABLE
 			local isWarning = metadata.isWarning
 
+			-- Special case for .Source updates
+			-- because we want to display a syntax highlighted diff for better UX
+			if self.props.showSourceDiff and tostring(values[1]) == "Source" then
+				rows[row] = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 30),
+					BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
+					BackgroundColor3 = theme.Diff.Row,
+					BorderSizePixel = 0,
+					LayoutOrder = row,
+				}, {
+					Padding = e("UIPadding", pad),
+					Layout = e("UIListLayout", {
+						FillDirection = Enum.FillDirection.Horizontal,
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						HorizontalAlignment = Enum.HorizontalAlignment.Left,
+						VerticalAlignment = Enum.VerticalAlignment.Center,
+					}),
+					A = e("TextLabel", {
+						Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
+						BackgroundTransparency = 1,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 14,
+						TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextTransparency = props.transparency,
+						TextTruncate = Enum.TextTruncate.AtEnd,
+						Size = UDim2.new(0.3, 0, 1, 0),
+						LayoutOrder = 1,
+					}),
+					Button = e("TextButton", {
+						Text = "",
+						Size = UDim2.new(0.7, 0, 1, -4),
+						LayoutOrder = 2,
+						BackgroundTransparency = 1,
+						[Roact.Event.Activated] = function()
+							if props.showSourceDiff then
+								props.showSourceDiff(tostring(values[2]), tostring(values[3]))
+							end
+						end,
+					}, {
+						e(BorderedContainer, {
+							size = UDim2.new(1, 0, 1, 0),
+							transparency = self.props.transparency:map(function(t)
+								return 0.5 + (0.5 * t)
+							end),
+						}, {
+							Layout = e("UIListLayout", {
+								FillDirection = Enum.FillDirection.Horizontal,
+								SortOrder = Enum.SortOrder.LayoutOrder,
+								HorizontalAlignment = Enum.HorizontalAlignment.Center,
+								VerticalAlignment = Enum.VerticalAlignment.Center,
+								Padding = UDim.new(0, 5),
+							}),
+							Label = e("TextLabel", {
+								Text = "View Diff",
+								BackgroundTransparency = 1,
+								Font = Enum.Font.GothamMedium,
+								TextSize = 14,
+								TextColor3 = theme.Settings.Setting.DescriptionColor,
+								TextXAlignment = Enum.TextXAlignment.Left,
+								TextTransparency = props.transparency,
+								TextTruncate = Enum.TextTruncate.AtEnd,
+								Size = UDim2.new(0, 65, 1, 0),
+								LayoutOrder = 1,
+							}),
+							Icon = e("ImageLabel", {
+								Image = Assets.Images.Icons.Expand,
+								ImageColor3 = theme.Settings.Setting.DescriptionColor,
+								ImageTransparency = self.props.transparency,
+
+								Size = UDim2.new(0, 16, 0, 16),
+								Position = UDim2.new(0.5, 0, 0.5, 0),
+								AnchorPoint = Vector2.new(0.5, 0.5),
+
+								BackgroundTransparency = 1,
+								LayoutOrder = 2,
+							}),
+						}),
+					}),
+				})
+				continue
+			end
+
 			rows[row] = e("Frame", {
 				Size = UDim2.new(1, 0, 0, 30),
 				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -34,6 +34,7 @@ function Expansion:render()
 		ChangeList = e(ChangeList, {
 			changes = props.changeList,
 			transparency = props.transparency,
+			showSourceDiff = props.showSourceDiff,
 		}),
 	})
 end
@@ -170,6 +171,7 @@ function DomLabel:render()
 					indent = indent,
 					transparency = props.transparency,
 					changeList = props.changeList,
+					showSourceDiff = props.showSourceDiff,
 				})
 				else nil,
 			DiffIcon = if props.patchType

plugin/src/App/Components/PatchVisualizer/init.lua

@@ -71,6 +71,7 @@ function PatchVisualizer:render()
 					changeList = node.changeList,
 					depth = depth,
 					transparency = self.props.transparency,
+					showSourceDiff = self.props.showSourceDiff,
 				})
 			)
 		end

plugin/src/App/Components/ScrollingFrame.lua

@@ -23,19 +23,26 @@ local function ScrollingFrame(props)
 			BottomImage = Assets.Images.ScrollBar.Bottom,
 
 			ElasticBehavior = Enum.ElasticBehavior.Always,
-			ScrollingDirection = Enum.ScrollingDirection.Y,
+			ScrollingDirection = props.scrollingDirection or Enum.ScrollingDirection.Y,
 
 			Size = props.size,
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,
 			CanvasSize = props.contentSize:map(function(value)
-				return UDim2.new(0, 0, 0, value.Y)
+				return UDim2.new(
+					0,
+					if (props.scrollingDirection and props.scrollingDirection ~= Enum.ScrollingDirection.Y)
+						then value.X
+						else 0,
+					0,
+					value.Y
+				)
 			end),
 
 			BorderSizePixel = 0,
 			BackgroundTransparency = 1,
 
-			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize]
+			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize],
 		}, props[Roact.Children])
 	end)
 end