Add visual diffs to syncing (#603)

* Add user confirmation to initial sync

* Use "Accept" instead of "Confirm"

* Draw tree alphabetically for determinism

* Add diff table dropdown

* Add diff table to newly added objects

* Unblock keybind workflow

* Only show reject button when two way is enabled

* Try to patch back to the files when changes are rejected

* Improve text spacing of the prop diff table

* Skip user confirmation of perfect syncs

* Give instances names for debugging UI

* Optimize tree building

* Efficiency: dynamic virtual scrolling & lazy rendering

* Simplify virtual scroller logic and avoid wasteful rerenders

* Remove debug print

* Consistent naming

* Move new patch applied callback into accept

* Pcall archivable

* Keybinds open popup diff window

* Theme rows in diff

* Remove relic of prototype

* Color value visuals and better component name

* changeBatcher is not needed when no sync is active

* Simplify popup roact entrypoint

* Alphabetical prop lists and refactor

* Add a stroke to color blot for contrast

* Make color blots animate transparency with the rest of the page

* StyLua formatting on newly added files

* Remove wasteful table

* Fix diffing custom properties

* Display tables more meaningfully

* Allow children in the button components

* Create a rough tooltip component

* Add tooltips to buttons

* Use provider+trigger schema to avoid tooltip ZIndex issues

* Add triangle point to tooltip

* Tooltip underneath instead of covering

* Cancel hovers when unmounting

* Allow multiple canvases from one provider

* Display above or below depending on available space

* Move patch equality to PatchSet.isEqual

* Use Container

* Remove old submodules

* Reduce false positives in diff

* Add debug log

* Fuzzy equals CFrame in diffs to avoid floating point in

* Fix decodeValue usage

* Support the .changedName patches

* Fix content overlapping border

* Fix tooltip tail alignment

* Fix tooltip text fit

* Whoops, fix it properly

* Move PatchVisualizer to Components

* Provide Connected info with full patch data

* Avoid implicit nil return

* Add patch visualizer to connected page

* Make Current column invisible when visualizing applied patches

* Avoid floating point diffs in a numbers and vectors

plugin/src/PatchSet.lua

@@ -8,6 +8,40 @@ local t = require(Packages.t)
 
 local Types = require(script.Parent.Types)
 
+local function deepEqual(a: any, b: any): boolean
+	local typeA = typeof(a)
+	if typeA ~= typeof(b) then
+		return false
+	end
+
+	if typeof(a) == "table" then
+		local checkedKeys = {}
+
+		for key, value in a do
+			checkedKeys[key] = true
+
+			if deepEqual(value, b[key]) == false then
+				return false
+			end
+		end
+
+		for key, value in b do
+			if checkedKeys[key] then continue end
+			if deepEqual(value, a[key]) == false then
+				return false
+			end
+		end
+
+		return true
+	end
+
+	if a == b then
+		return true
+	end
+
+	return false
+end
+
 local PatchSet = {}
 
 PatchSet.validate = t.interface({
@@ -57,6 +91,32 @@ function PatchSet.hasUpdates(patchSet)
 	return next(patchSet.updated) ~= nil
 end
 
+--[[
+	Tells whether the given PatchSets are equal.
+]]
+function PatchSet.isEqual(patchA, patchB)
+	return deepEqual(patchA, patchB)
+end
+
+--[[
+	Count the number of changes in the given PatchSet.
+]]
+function PatchSet.countChanges(patch)
+	local count = 0
+
+	for _ in patch.added do
+		count += 1
+	end
+	for _ in patch.removed do
+		count += 1
+	end
+	for _ in patch.updated do
+		count += 1
+	end
+
+	return count
+end
+
 --[[
 	Merge multiple PatchSet objects into the given PatchSet.
 ]]