Build aarch64 windows and linux builds for releases

After 7.4.3 released, I forgot to update the changelog on master. This
fixes that.

.gitattributes

@@ -0,0 +1 @@
+*.lua linguist-language=Luau

.github/workflows/ci.yml

@@ -19,16 +19,12 @@ jobs:
         os: [ubuntu-latest, windows-latest, macos-latest]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         submodules: true
 
     - name: Install Rust
-      uses: actions-rs/toolchain@v1
+      uses: dtolnay/rust-toolchain@stable
-      with:
-        toolchain: stable
-        override: true
-        profile: minimal
 
     - name: Rust cache
       uses: Swatinem/rust-cache@v2
@@ -49,16 +45,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         submodules: true
 
     - name: Install Rust
-      uses: actions-rs/toolchain@v1
+      uses: dtolnay/rust-toolchain@1.70.0
-      with:
-        toolchain: 1.70.0
-        override: true
-        profile: minimal
 
     - name: Rust cache
       uses: Swatinem/rust-cache@v2
@@ -76,15 +68,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         submodules: true
 
     - name: Install Rust
-      uses: actions-rs/toolchain@v1
+      uses: dtolnay/rust-toolchain@stable
       with:
-        toolchain: stable
-        override: true
         components: rustfmt, clippy
 
     - name: Rust cache

.github/workflows/release.yml

@@ -8,26 +8,20 @@ jobs:
   create-release:
     name: Create Release
     runs-on: ubuntu-latest
-    outputs:
-      upload_url: ${{ steps.create_release.outputs.upload_url }}
     steps:
+      - uses: actions/checkout@v4
       - name: Create Release
-        id: create_release
-        uses: actions/create-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
+        run: |
-          tag_name: ${{ github.ref }}
+          gh release create ${{ github.ref_name }} --draft --verify-tag --title ${{ github.ref_name }}
-          release_name: ${{ github.ref }}
-          draft: true
-          prerelease: false
 
   build-plugin:
     needs: ["create-release"]
     name: Build Roblox Studio Plugin
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: true
 
@@ -36,23 +30,19 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           trust-check: false
-          version: 'v0.3.0'
+          version: 'v0.2.6'
 
       - name: Build Plugin
         run: rojo build plugin --output Rojo.rbxm
 
       - name: Upload Plugin to Release
-        uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
+        run: |
-          upload_url: ${{ needs.create-release.outputs.upload_url }}
+          gh release upload ${{ github.ref_name }} Rojo.rbxm
-          asset_path: Rojo.rbxm
-          asset_name: Rojo.rbxm
-          asset_content_type: application/octet-stream
 
       - name: Upload Plugin to Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: Rojo.rbxm
           path: Rojo.rbxm
@@ -69,11 +59,21 @@ jobs:
             target: x86_64-unknown-linux-gnu
             label: linux-x86_64
 
+          - host: linux
+            os: ubuntu-20.04
+            target: aarch64-unknown-linux-gnu
+            label: linux-aarch64
+
           - host: windows
             os: windows-latest
             target: x86_64-pc-windows-msvc
             label: windows-x86_64
 
+          - host: windows
+            os: windows-latest
+            target: aarch64-pc-windows-msvc
+            label: windows-aarch64
+
           - host: macos
             os: macos-latest
             target: x86_64-apple-darwin
@@ -89,24 +89,14 @@ jobs:
     env:
       BIN: rojo
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           submodules: true
 
-      - name: Get Version from Tag
-        shell: bash
-        # https://github.community/t/how-to-get-just-the-tag-name/16241/7#M1027
-        run: |
-          echo "PROJECT_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
-          echo "Version is: ${{ env.PROJECT_VERSION }}"
-
       - name: Install Rust
-        uses: actions-rs/toolchain@v1
+        uses: dtolnay/rust-toolchain@stable
         with:
-          toolchain: stable
+          targets: ${{ matrix.target }}
-          target: ${{ matrix.target }}
-          override: true
-          profile: minimal
 
       - name: Setup Aftman
         uses: ok-nick/setup-aftman@v0.1.0
@@ -122,37 +112,34 @@ jobs:
           # easily.
           CARGO_TARGET_DIR: output
 
-          # On platforms that use OpenSSL, ensure it is statically linked to
+      - name: Generate Artifact Name
-          # make binaries more portable.
-          OPENSSL_STATIC: 1
-
-      - name: Create Release Archive
         shell: bash
+        env:
+          TAG_NAME: ${{ github.ref_name }}
+        run: |
+          echo "ARTIFACT_NAME=$BIN-${TAG_NAME#v}-${{ matrix.label }}.zip" >> "$GITHUB_ENV"
+
+      - name: Create Archive and Upload to Release
+        shell: bash
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           mkdir staging
 
           if [ "${{ matrix.host }}" = "windows" ]; then
             cp "output/${{ matrix.target }}/release/$BIN.exe" staging/
             cd staging
-            7z a ../release.zip *
+            7z a ../$ARTIFACT_NAME *
           else
             cp "output/${{ matrix.target }}/release/$BIN" staging/
             cd staging
-            zip ../release.zip *
+            zip ../$ARTIFACT_NAME *
           fi
 
-      - name: Upload Archive to Release
+          gh release upload ${{ github.ref_name }} ../$ARTIFACT_NAME
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ needs.create-release.outputs.upload_url }}
-          asset_path: release.zip
-          asset_name: ${{ env.BIN }}-${{ env.PROJECT_VERSION }}-${{ matrix.label }}.zip
-          asset_content_type: application/octet-stream
 
       - name: Upload Archive to Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: ${{ env.BIN }}-${{ env.PROJECT_VERSION }}-${{ matrix.label }}.zip
+          path: ${{ env.ARTIFACT_NAME }}
-          path: release.zip
+          name: ${{ env.ARTIFACT_NAME }}

CHANGELOG.md

@@ -1,16 +1,96 @@
 # Rojo Changelog
 
 ## Unreleased Changes
+* Projects may now manually link `Ref` properties together using `Attributes`. ([#843])
+ 	This has two parts: using `id` or `$id` in JSON files or a `Rojo_Target` attribute, an Instance
+    is given an ID. Then, that ID may be used elsewhere in the project to point to an Instance
+    using an attribute named `Rojo_Target_PROP_NAME`, where `PROP_NAME` is the name of a property.
 
-## [7.4.4] - August 22nd, 2024
+    As an example, here is a `model.json` for an ObjectValue that refers to itself:
-* Fixed issue with reading attributes from `Lighting` in new place files
+
-* `Instance.Archivable` will now default to `true` when building a project into a binary (`rbxm`/`rbxl`) file rather than `false`.
+    ```json
+    {
+        "id": "arbitrary string",
+        "attributes": {
+            "Rojo_Target_Value": "arbitrary string"
+        }
+    }
+    ```
+
+    This is a very rough implementation and the usage will become more ergonomic
+    over time.
+
+* Updated Undo/Redo history to be more robust ([#915])
+* Added popout diff visualizer for table properties like Attributes and Tags ([#834])
+* Updated Theme to use Studio colors ([#838])
+* Improved patch visualizer UX ([#883])
+* Added update notifications for newer compatible versions in the Studio plugin. ([#832])
+* Added experimental setting for Auto Connect in playtests ([#840])
+* Improved settings UI ([#886])
+* `Open Scripts Externally` option can now be changed while syncing ([#911])
+* Projects may now specify rules for syncing files as if they had a different file extension. ([#813])
+ 	This is specified via a new field on project files, `syncRules`:
+
+ 	```json
+ 	{
+ 	 	"syncRules": [
+ 	 	 	{
+ 	 	 	 	"pattern": "*.foo",
+ 	 	 	 	"use": "text",
+                "exclude": "*.exclude.foo",
+ 	 	 	},
+ 	 	 	{
+ 	 	 	 	"pattern": "*.bar.baz",
+ 	 	 	 	"use": "json",
+ 	 	 	 	"suffix": ".bar.baz",
+ 	 	 	},
+ 	 	],
+ 	 	"name": "SyncRulesAreCool",
+ 	 	"tree": {
+ 	 	 	"$path": "src"
+ 	 	}
+ 	}
+ 	```
+
+ 	The `pattern` field is a glob used to match the sync rule to files. If present, the `suffix` field allows you to specify parts of a file's name get cut off by Rojo to name the Instance, including the file extension. If it isn't specified, Rojo will only cut off the first part of the file extension, up to the first dot.
+
+    Additionally, the `exclude` field allows files to be excluded from the sync rule if they match a pattern specified by it. If it's not present, all files that match `pattern` will be modified using the sync rule.
+
+ 	The `use` field corresponds to one of the potential file type that Rojo will currently include in a project. Files that match the provided pattern will be treated as if they had the file extension for that file type. A full list is below:
+
+ 	| `use` value    | file extension  |
+ 	|:---------------|:----------------|
+ 	| `serverScript` | `.server.lua`   |
+ 	| `clientScript` | `.client.lua`   |
+ 	| `moduleScript` | `.lua`          |
+ 	| `json`         | `.json`         |
+ 	| `toml`         | `.toml`         |
+ 	| `csv`          | `.csv`          |
+ 	| `text`         | `.txt`          |
+ 	| `jsonModel`    | `.model.json`   |
+ 	| `rbxm`         | `.rbxm`         |
+ 	| `rbxmx`        | `.rbxmx`        |
+ 	| `project`      | `.project.json` |
+ 	| `ignore`       | None!           |
+
+    **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!
+
+[#813]: https://github.com/rojo-rbx/rojo/pull/813
+[#832]: https://github.com/rojo-rbx/rojo/pull/832
+[#834]: https://github.com/rojo-rbx/rojo/pull/834
+[#838]: https://github.com/rojo-rbx/rojo/pull/838
+[#840]: https://github.com/rojo-rbx/rojo/pull/840
+[#843]: https://github.com/rojo-rbx/rojo/pull/843
+[#883]: https://github.com/rojo-rbx/rojo/pull/883
+[#886]: https://github.com/rojo-rbx/rojo/pull/886
+[#911]: https://github.com/rojo-rbx/rojo/pull/911
+[#915]: https://github.com/rojo-rbx/rojo/pull/915
 
 ## [7.4.3] - August 6th, 2024
 * Fixed issue with building binary files introduced in 7.4.2
 * Fixed `value of type nil cannot be converted to number` warning spam in output. [#955]
 
-[#955]: https://github.com/rojo-rbx/rojo/pull/893
+[#955]: https://github.com/rojo-rbx/rojo/pull/955
 
 ## [7.4.2] - July 23, 2024
 * Added Never option to Confirmation ([#893])
@@ -25,7 +105,8 @@
 
 ## [7.4.1] - February 20, 2024
 * Made the `name` field optional on project files ([#870])
- 	Files named `default.project.json` inherit the name of the folder they're in and all other projects
+
+	Files named `default.project.json` inherit the name of the folder they're in and all other projects
     are named as expect (e.g. `foo.project.json` becomes an Instance named `foo`)
 
     There is no change in behavior if `name` is set.

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "rojo"
-version = "7.4.4"
+version = "7.4.0"
 rust-version = "1.70.0"
 authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 description = "Enables professional-grade development tools for Roblox developers"
@@ -26,7 +26,9 @@ default = []
 # Enable this feature to live-reload assets from the web UI.
 dev_live_assets = []
 
-profile-with-tracy = ["profiling/profile-with-tracy", "tracy-client"]
+# Run Rojo with this feature to open a Tracy session.
+# Currently uses protocol v63, last supported in Tracy 0.9.1.
+profile-with-tracy = ["profiling/profile-with-tracy"]
 
 [workspace]
 members = ["crates/*"]
@@ -55,40 +57,39 @@ rbx_reflection = "4.7.0"
 rbx_reflection_database = "0.2.12"
 rbx_xml = "0.13.5"
 
-anyhow = "1.0.44"
+anyhow = "1.0.80"
-backtrace = "0.3.61"
+backtrace = "0.3.69"
 bincode = "1.3.3"
-crossbeam-channel = "0.5.1"
+crossbeam-channel = "0.5.12"
-csv = "1.1.6"
+csv = "1.3.0"
-env_logger = "0.9.0"
+env_logger = "0.9.3"
-fs-err = "2.6.0"
+fs-err = "2.11.0"
-futures = "0.3.17"
+futures = "0.3.30"
-globset = "0.4.8"
+globset = "0.4.14"
 humantime = "2.1.0"
-hyper = { version = "0.14.13", features = ["server", "tcp", "http1"] }
+hyper = { version = "0.14.28", features = ["server", "tcp", "http1"] }
 jod-thread = "0.1.2"
-log = "0.4.14"
+log = "0.4.21"
 maplit = "1.0.2"
-num_cpus = "1.15.0"
+num_cpus = "1.16.0"
-opener = "0.5.0"
+opener = "0.5.2"
-rayon = "1.7.0"
+rayon = "1.9.0"
-reqwest = { version = "0.11.10", features = [
+reqwest = { version = "0.11.24", default-features = false, features = [
     "blocking",
     "json",
-    "native-tls-vendored",
+    "rustls-tls",
 ] }
 ritz = "0.1.0"
 roblox_install = "1.0.0"
-serde = { version = "1.0.130", features = ["derive", "rc"] }
+serde = { version = "1.0.197", features = ["derive", "rc"] }
-serde_json = "1.0.68"
+serde_json = "1.0.114"
-toml = "0.5.9"
+toml = "0.5.11"
-termcolor = "1.1.2"
+termcolor = "1.4.1"
-thiserror = "1.0.30"
+thiserror = "1.0.57"
-tokio = { version = "1.12.0", features = ["rt", "rt-multi-thread"] }
+tokio = { version = "1.36.0", features = ["rt", "rt-multi-thread"] }
-uuid = { version = "1.0.0", features = ["v4", "serde"] }
+uuid = { version = "1.7.0", features = ["v4", "serde"] }
-clap = { version = "3.1.18", features = ["derive"] }
+clap = { version = "3.2.25", features = ["derive"] }
-profiling = "1.0.6"
+profiling = "1.0.15"
-tracy-client = { version = "0.13.2", optional = true }
 
 [target.'cfg(windows)'.dependencies]
 winreg = "0.10.1"
@@ -96,20 +97,20 @@ winreg = "0.10.1"
 [build-dependencies]
 memofs = { version = "0.3.0", path = "crates/memofs" }
 
-embed-resource = "1.6.4"
+embed-resource = "1.8.0"
-anyhow = "1.0.44"
+anyhow = "1.0.80"
 bincode = "1.3.3"
-fs-err = "2.6.0"
+fs-err = "2.11.0"
 maplit = "1.0.2"
-semver = "1.0.19"
+semver = "1.0.22"
 
 [dev-dependencies]
 rojo-insta-ext = { path = "crates/rojo-insta-ext" }
 
-criterion = "0.3.5"
+criterion = "0.3.6"
-insta = { version = "1.8.0", features = ["redactions", "yaml"] }
+insta = { version = "1.36.1", features = ["redactions", "yaml"] }
-paste = "1.0.5"
+paste = "1.0.14"
-pretty_assertions = "1.2.1"
+pretty_assertions = "1.4.0"
-serde_yaml = "0.8.21"
+serde_yaml = "0.8.26"
-tempfile = "3.2.0"
+tempfile = "3.10.1"
-walkdir = "2.3.2"
+walkdir = "2.5.0"

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <a href="https://rojo.space"><img src="assets/logo-512.png" alt="Rojo" height="217" /></a>
+    <a href="https://rojo.space"><img src="assets/brand_images/logo-512.png" alt="Rojo" height="217" /></a>
 </div>
 
 <div>&nbsp;</div>
@@ -43,4 +43,4 @@ Pull requests are welcome!
 Rojo supports Rust 1.70.0 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.
 
 ## License
-Rojo is available under the terms of the Mozilla Public License, Version 2.0. See [LICENSE.txt](LICENSE.txt) for details.
+Rojo is available under the terms of the Mozilla Public License, Version 2.0. See [LICENSE.txt](LICENSE.txt) for details.

aftman.toml

@@ -1,5 +1,5 @@
 [tools]
-rojo = "rojo-rbx/rojo@7.4.1"
+rojo = "rojo-rbx/rojo@7.3.0"
 selene = "Kampfkarren/selene@0.26.1"
 stylua = "JohnnyMorganz/stylua@0.18.2"
 run-in-roblox = "rojo-rbx/run-in-roblox@0.3.0"

crates/memofs/Cargo.toml

@@ -11,7 +11,7 @@ homepage = "https://github.com/rojo-rbx/rojo/tree/master/memofs"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-crossbeam-channel = "0.5.1"
+crossbeam-channel = "0.5.12"
-fs-err = "2.3.0"
+fs-err = "2.11.0"
-notify = "4.0.15"
+notify = "4.0.17"
-serde = { version = "1.0", features = ["derive"] }
+serde = { version = "1.0.197", features = ["derive"] }

crates/rojo-insta-ext/Cargo.toml

@@ -6,5 +6,5 @@ edition = "2018"
 publish = false
 
 [dependencies]
-serde = "1.0.99"
+serde = "1.0.197"
-serde_yaml = "0.8.9"
+serde_yaml = "0.8.26"

plugin/Version.txt

@@ -1 +1 @@
-7.4.4
+7.4.0

plugin/src/App/Components/ClassIcon.lua

@@ -0,0 +1,126 @@
+local StudioService = game:GetService("StudioService")
+local AssetService = game:GetService("AssetService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local e = Roact.createElement
+
+local EditableImage = require(Plugin.App.Components.EditableImage)
+
+local imageCache = {}
+local function getImageSizeAndPixels(image)
+	if not imageCache[image] then
+		local editableImage = AssetService:CreateEditableImageAsync(image)
+		imageCache[image] = {
+			Size = editableImage.Size,
+			Pixels = editableImage:ReadPixels(Vector2.zero, editableImage.Size),
+		}
+	end
+
+	return imageCache[image].Size, table.clone(imageCache[image].Pixels)
+end
+
+local function getRecoloredClassIcon(className, color)
+	local iconProps = StudioService:GetClassIcon(className)
+
+	if iconProps and color then
+		local success, editableImageSize, editableImagePixels = pcall(function()
+			local size, pixels = getImageSizeAndPixels(iconProps.Image)
+
+			local minVal, maxVal = math.huge, -math.huge
+			for i = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
+					continue
+				end
+				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])
+
+				minVal = math.min(minVal, pixelVal)
+				maxVal = math.max(maxVal, pixelVal)
+			end
+
+			local hue, sat, val = color:ToHSV()
+			for i = 1, #pixels, 4 do
+				if pixels[i + 3] == 0 then
+					continue
+				end
+
+				local pixelVal = math.max(pixels[i], pixels[i + 1], pixels[i + 2])
+				local newVal = val
+				if minVal < maxVal then
+					-- Remap minVal - maxVal to val*0.9 - val
+					newVal = val * (0.9 + 0.1 * (pixelVal - minVal) / (maxVal - minVal))
+				end
+
+				local newPixelColor = Color3.fromHSV(hue, sat, newVal)
+				pixels[i], pixels[i + 1], pixels[i + 2] = newPixelColor.R, newPixelColor.G, newPixelColor.B
+			end
+			return size, pixels
+		end)
+		if success then
+			iconProps.EditableImagePixels = editableImagePixels
+			iconProps.EditableImageSize = editableImageSize
+		end
+	end
+
+	return iconProps
+end
+
+local ClassIcon = Roact.PureComponent:extend("ClassIcon")
+
+function ClassIcon:init()
+	self.state = {
+		iconProps = nil,
+	}
+end
+
+function ClassIcon:updateIcon()
+	local props = self.props
+	local iconProps = getRecoloredClassIcon(props.className, props.color)
+	self:setState({
+		iconProps = iconProps,
+	})
+end
+
+function ClassIcon:didMount()
+	self:updateIcon()
+end
+
+function ClassIcon:didUpdate(lastProps)
+	if lastProps.className ~= self.props.className or lastProps.color ~= self.props.color then
+		self:updateIcon()
+	end
+end
+
+function ClassIcon:render()
+	local iconProps = self.state.iconProps
+	if not iconProps then
+		return nil
+	end
+
+	return e(
+		"ImageLabel",
+		{
+			Size = self.props.size,
+			Position = self.props.position,
+			LayoutOrder = self.props.layoutOrder,
+			AnchorPoint = self.props.anchorPoint,
+			ImageTransparency = self.props.transparency,
+			Image = iconProps.Image,
+			ImageRectOffset = iconProps.ImageRectOffset,
+			ImageRectSize = iconProps.ImageRectSize,
+			BackgroundTransparency = 1,
+		},
+		if iconProps.EditableImagePixels
+			then e(EditableImage, {
+				size = iconProps.EditableImageSize,
+				pixels = iconProps.EditableImagePixels,
+			})
+			else nil
+	)
+end
+
+return ClassIcon

plugin/src/App/Components/Dropdown.lua

@@ -109,9 +109,7 @@ function Dropdown:render()
 			}, {
 				DropArrow = e("ImageLabel", {
 					Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow,
-					ImageColor3 = self.openBinding:map(function(a)
+					ImageColor3 = theme.IconColor,
-						return theme.Closed.IconColor:Lerp(theme.Open.IconColor, a)
-					end),
 					ImageTransparency = self.props.transparency,
 
 					Size = UDim2.new(0, 18, 0, 18),

plugin/src/App/Components/EditableImage.lua

@@ -0,0 +1,41 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local e = Roact.createElement
+
+local EditableImage = Roact.PureComponent:extend("EditableImage")
+
+function EditableImage:init()
+	self.ref = Roact.createRef()
+end
+
+function EditableImage:writePixels()
+	local image = self.ref.current
+	if not image then
+		return
+	end
+	if not self.props.pixels then
+		return
+	end
+
+	image:WritePixels(Vector2.zero, self.props.size, self.props.pixels)
+end
+
+function EditableImage:render()
+	return e("EditableImage", {
+		Size = self.props.size,
+		[Roact.Ref] = self.ref,
+	})
+end
+
+function EditableImage:didMount()
+	self:writePixels()
+end
+
+function EditableImage:didUpdate()
+	self:writePixels()
+end
+
+return EditableImage

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

@@ -14,6 +14,123 @@ local EMPTY_TABLE = {}
 
 local e = Roact.createElement
 
+local function ViewDiffButton(props)
+	return Theme.with(function(theme)
+		return e("TextButton", {
+			Text = "",
+			Size = UDim2.new(0.7, 0, 1, -4),
+			LayoutOrder = 2,
+			BackgroundTransparency = 1,
+			[Roact.Event.Activated] = props.onClick,
+		}, {
+			e(BorderedContainer, {
+				size = UDim2.new(1, 0, 1, 0),
+				transparency = 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 = 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,
+				}),
+			}),
+		})
+	end)
+end
+
+local function RowContent(props)
+	local values = props.values
+	local metadata = props.metadata
+
+	if props.showStringDiff and values[1] == "Source" then
+		-- Special case for .Source updates
+		return e(ViewDiffButton, {
+			transparency = props.transparency,
+			onClick = function()
+				if not props.showStringDiff then
+					return
+				end
+				props.showStringDiff(tostring(values[2]), tostring(values[3]))
+			end,
+		})
+	end
+
+	if props.showTableDiff and (type(values[2]) == "table" or type(values[3]) == "table") then
+		-- Special case for table properties (like Attributes/Tags)
+		return e(ViewDiffButton, {
+			transparency = props.transparency,
+			onClick = function()
+				if not props.showTableDiff then
+					return
+				end
+				props.showTableDiff(values[2], values[3])
+			end,
+		})
+	end
+
+	return Theme.with(function(theme)
+		return Roact.createFragment({
+			ColumnB = e(
+				"Frame",
+				{
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0.35, 0, 1, 0),
+					LayoutOrder = 2,
+				},
+				e(DisplayValue, {
+					value = values[2],
+					transparency = props.transparency,
+					textColor = if metadata.isWarning
+						then theme.Diff.Warning
+						else theme.Settings.Setting.DescriptionColor,
+				})
+			),
+			ColumnC = e(
+				"Frame",
+				{
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0.35, 0, 1, 0),
+					LayoutOrder = 3,
+				},
+				e(DisplayValue, {
+					value = values[3],
+					transparency = props.transparency,
+					textColor = if metadata.isWarning
+						then theme.Diff.Warning
+						else theme.Settings.Setting.DescriptionColor,
+				})
+			),
+		})
+	end)
+end
+
 local ChangeList = Roact.Component:extend("ChangeList")
 
 function ChangeList:init()
@@ -36,8 +153,9 @@ function ChangeList:render()
 			PaddingRight = UDim.new(0, 5),
 		}
 
+		local headerRow = changes[1]
 		local headers = e("Frame", {
-			Size = UDim2.new(1, 0, 0, 30),
+			Size = UDim2.new(1, 0, 0, 24),
 			BackgroundTransparency = rowTransparency,
 			BackgroundColor3 = theme.Diff.Row,
 			LayoutOrder = 0,
@@ -49,36 +167,36 @@ function ChangeList:render()
 				HorizontalAlignment = Enum.HorizontalAlignment.Left,
 				VerticalAlignment = Enum.VerticalAlignment.Center,
 			}),
-			A = e("TextLabel", {
+			ColumnA = e("TextLabel", {
-				Text = tostring(changes[1][1]),
+				Text = tostring(headerRow[1]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
 				Size = UDim2.new(0.3, 0, 1, 0),
 				LayoutOrder = 1,
 			}),
-			B = e("TextLabel", {
+			ColumnB = e("TextLabel", {
-				Text = tostring(changes[1][2]),
+				Text = tostring(headerRow[2]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
 				Size = UDim2.new(0.35, 0, 1, 0),
 				LayoutOrder = 2,
 			}),
-			C = e("TextLabel", {
+			ColumnC = e("TextLabel", {
-				Text = tostring(changes[1][3]),
+				Text = tostring(headerRow[3]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
@@ -95,91 +213,8 @@ 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),
+				Size = UDim2.new(1, 0, 0, 24),
 				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
 				BackgroundColor3 = theme.Diff.Row,
 				BorderSizePixel = 0,
@@ -192,44 +227,25 @@ function ChangeList:render()
 					HorizontalAlignment = Enum.HorizontalAlignment.Left,
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 				}),
-				A = e("TextLabel", {
+				ColumnA = 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,
+					TextColor3 = if isWarning then theme.Diff.Warning else theme.TextColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
 					TextTruncate = Enum.TextTruncate.AtEnd,
 					Size = UDim2.new(0.3, 0, 1, 0),
 					LayoutOrder = 1,
 				}),
-				B = e(
+				Content = e(RowContent, {
-					"Frame",
+					values = values,
-					{
+					metadata = metadata,
-						BackgroundTransparency = 1,
+					transparency = props.transparency,
-						Size = UDim2.new(0.35, 0, 1, 0),
+					showStringDiff = props.showStringDiff,
-						LayoutOrder = 2,
+					showTableDiff = props.showTableDiff,
-					},
+				}),
-					e(DisplayValue, {
-						value = values[2],
-						transparency = props.transparency,
-						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
-					})
-				),
-				C = e(
-					"Frame",
-					{
-						BackgroundTransparency = 1,
-						Size = UDim2.new(0.35, 0, 1, 0),
-						LayoutOrder = 3,
-					},
-					e(DisplayValue, {
-						value = values[3],
-						transparency = props.transparency,
-						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
-					})
-				),
 			})
 		end
 
@@ -253,8 +269,8 @@ function ChangeList:render()
 		}, {
 			Headers = headers,
 			Values = e(ScrollingFrame, {
-				size = UDim2.new(1, 0, 1, -30),
+				size = UDim2.new(1, 0, 1, -24),
-				position = UDim2.new(0, 0, 0, 30),
+				position = UDim2.new(0, 0, 0, 24),
 				contentSize = self.contentSize,
 				transparency = props.transparency,
 			}, rows),

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

@@ -30,7 +30,7 @@ local function DisplayValue(props)
 					}),
 				}),
 				Label = e("TextLabel", {
-					Text = string.format("%d,%d,%d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
+					Text = string.format("%d, %d, %d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
 					TextSize = 14,
@@ -104,8 +104,13 @@ local function DisplayValue(props)
 		-- Or special text handling tostring for some?
 		-- Will add as needed, let's see what cases arise.
 
+		local textRepresentation = string.gsub(tostring(props.value), "%s", " ")
+		if t == "string" then
+			textRepresentation = '"' .. textRepresentation .. '"'
+		end
+
 		return e("TextLabel", {
-			Text = string.gsub(tostring(props.value), "%s", " "),
+			Text = textRepresentation,
 			BackgroundTransparency = 1,
 			Font = Enum.Font.GothamMedium,
 			TextSize = 14,

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

@@ -1,5 +1,4 @@
 local SelectionService = game:GetService("Selection")
-local StudioService = game:GetService("StudioService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
@@ -15,7 +14,8 @@ local bindingUtil = require(Plugin.App.bindingUtil)
 local e = Roact.createElement
 
 local ChangeList = require(script.Parent.ChangeList)
-local Tooltip = require(script.Parent.Parent.Tooltip)
+local Tooltip = require(Plugin.App.Components.Tooltip)
+local ClassIcon = require(Plugin.App.Components.ClassIcon)
 
 local Expansion = Roact.Component:extend("Expansion")
 
@@ -28,13 +28,14 @@ function Expansion:render()
 
 	return e("Frame", {
 		BackgroundTransparency = 1,
-		Size = UDim2.new(1, -props.indent, 1, -30),
+		Size = UDim2.new(1, -props.indent, 1, -24),
-		Position = UDim2.new(0, props.indent, 0, 30),
+		Position = UDim2.new(0, props.indent, 0, 24),
 	}, {
 		ChangeList = e(ChangeList, {
 			changes = props.changeList,
 			transparency = props.transparency,
-			showSourceDiff = props.showSourceDiff,
+			showStringDiff = props.showStringDiff,
+			showTableDiff = props.showTableDiff,
 		}),
 	})
 end
@@ -43,7 +44,7 @@ local DomLabel = Roact.Component:extend("DomLabel")
 
 function DomLabel:init()
 	local initHeight = self.props.elementHeight:getValue()
-	self.expanded = initHeight > 30
+	self.expanded = initHeight > 24
 
 	self.motor = Flipper.SingleMotor.new(initHeight)
 	self.binding = bindingUtil.fromMotor(self.motor)
@@ -52,7 +53,7 @@ function DomLabel:init()
 		renderExpansion = self.expanded,
 	})
 	self.motor:onStep(function(value)
-		local renderExpansion = value > 30
+		local renderExpansion = value > 24
 
 		self.props.setElementHeight(value)
 		if self.props.updateEvent then
@@ -80,7 +81,7 @@ function DomLabel:didUpdate(prevProps)
 	then
 		-- Close the expansion when the domlabel is changed to a different thing
 		self.expanded = false
-		self.motor:setGoal(Flipper.Spring.new(30, {
+		self.motor:setGoal(Flipper.Spring.new(24, {
 			frequency = 5,
 			dampingRatio = 1,
 		}))
@@ -89,17 +90,49 @@ end
 
 function DomLabel:render()
 	local props = self.props
+	local depth = props.depth or 1
 
 	return Theme.with(function(theme)
-		local iconProps = StudioService:GetClassIcon(props.className)
+		local color = if props.isWarning
-		local indent = (props.depth or 0) * 20 + 25
+			then theme.Diff.Warning
+			elseif props.patchType then theme.Diff[props.patchType]
+			else theme.TextColor
+
+		local indent = (depth - 1) * 12 + 15
 
 		-- Line guides help indent depth remain readable
 		local lineGuides = {}
-		for i = 1, props.depth or 0 do
+		for i = 2, depth do
-			lineGuides["Line_" .. i] = e("Frame", {
+			if props.depthsComplete[i] then
-				Size = UDim2.new(0, 2, 1, 2),
+				continue
-				Position = UDim2.new(0, (20 * i) + 15, 0, -1),
+			end
+			if props.isFinalChild and i == depth then
+				-- This line stops halfway down to merge with our connector for the right angle
+				lineGuides["Line_" .. i] = e("Frame", {
+					Size = UDim2.new(0, 2, 0, 15),
+					Position = UDim2.new(0, (12 * (i - 1)) + 6, 0, -1),
+					BorderSizePixel = 0,
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				})
+			else
+				-- All other lines go all the way
+				-- with the exception of the final element, which stops halfway down
+				lineGuides["Line_" .. i] = e("Frame", {
+					Size = UDim2.new(0, 2, 1, if props.isFinalElement then -9 else 2),
+					Position = UDim2.new(0, (12 * (i - 1)) + 6, 0, -1),
+					BorderSizePixel = 0,
+					BackgroundTransparency = props.transparency,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				})
+			end
+		end
+
+		if depth ~= 1 then
+			lineGuides["Connector"] = e("Frame", {
+				Size = UDim2.new(0, 8, 0, 2),
+				Position = UDim2.new(0, 2 + (12 * props.depth), 0, 12),
+				AnchorPoint = Vector2.xAxis,
 				BorderSizePixel = 0,
 				BackgroundTransparency = props.transparency,
 				BackgroundColor3 = theme.BorderedContainer.BorderColor,
@@ -108,9 +141,8 @@ function DomLabel:render()
 
 		return e("Frame", {
 			ClipsDescendants = true,
-			BackgroundColor3 = if props.patchType then theme.Diff[props.patchType] else nil,
+			BackgroundTransparency = if props.elementIndex % 2 == 0 then 0.985 else 1,
-			BorderSizePixel = 0,
+			BackgroundColor3 = theme.Diff.Row,
-			BackgroundTransparency = props.patchType and props.transparency or 1,
 			Size = self.binding:map(function(expand)
 				return UDim2.new(1, 0, 0, expand)
 			end),
@@ -140,8 +172,8 @@ function DomLabel:render()
 
 						if props.changeList then
 							self.expanded = not self.expanded
-							local goalHeight = 30
+							local goalHeight = 24
-								+ (if self.expanded then math.clamp(#props.changeList * 30, 30, 30 * 6) else 0)
+								+ (if self.expanded then math.clamp(#props.changeList * 24, 24, 24 * 6) else 0)
 							self.motor:setGoal(Flipper.Spring.new(goalHeight, {
 								frequency = 5,
 								dampingRatio = 1,
@@ -166,46 +198,81 @@ function DomLabel:render()
 					indent = indent,
 					transparency = props.transparency,
 					changeList = props.changeList,
-					showSourceDiff = props.showSourceDiff,
+					showStringDiff = props.showStringDiff,
+					showTableDiff = props.showTableDiff,
 				})
 				else nil,
 			DiffIcon = if props.patchType
 				then e("ImageLabel", {
 					Image = Assets.Images.Diff[props.patchType],
-					ImageColor3 = theme.AddressEntry.PlaceholderColor,
+					ImageColor3 = color,
 					ImageTransparency = props.transparency,
 					BackgroundTransparency = 1,
-					Size = UDim2.new(0, 20, 0, 20),
+					Size = UDim2.new(0, 14, 0, 14),
-					Position = UDim2.new(0, 0, 0, 15),
+					Position = UDim2.new(0, 0, 0, 12),
 					AnchorPoint = Vector2.new(0, 0.5),
 				})
 				else nil,
-			ClassIcon = e("ImageLabel", {
+			ClassIcon = e(ClassIcon, {
-				Image = iconProps.Image,
+				className = props.className,
-				ImageTransparency = props.transparency,
+				color = color,
-				ImageRectOffset = iconProps.ImageRectOffset,
+				transparency = props.transparency,
-				ImageRectSize = iconProps.ImageRectSize,
+				size = UDim2.new(0, 16, 0, 16),
-				BackgroundTransparency = 1,
+				position = UDim2.new(0, indent + 2, 0, 12),
-				Size = UDim2.new(0, 20, 0, 20),
+				anchorPoint = Vector2.new(0, 0.5),
-				Position = UDim2.new(0, indent, 0, 15),
-				AnchorPoint = Vector2.new(0, 0.5),
 			}),
 			InstanceName = e("TextLabel", {
-				Text = (if props.isWarning then "⚠ " else "") .. props.name .. (props.hint and string.format(
+				Text = (if props.isWarning then "⚠ " else "") .. props.name,
-					'  <font color="#%s">%s</font>',
-					theme.AddressEntry.PlaceholderColor:ToHex(),
-					props.hint
-				) or ""),
 				RichText = true,
 				BackgroundTransparency = 1,
-				Font = Enum.Font.GothamMedium,
+				Font = if props.patchType then Enum.Font.GothamBold else Enum.Font.GothamMedium,
 				TextSize = 14,
-				TextColor3 = if props.isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
+				TextColor3 = color,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
-				Size = UDim2.new(1, -indent - 50, 0, 30),
+				Size = UDim2.new(1, -indent - 50, 0, 24),
-				Position = UDim2.new(0, indent + 30, 0, 0),
+				Position = UDim2.new(0, indent + 22, 0, 0),
+			}),
+			ChangeInfo = e("Frame", {
+				BackgroundTransparency = 1,
+				Size = UDim2.new(1, -indent - 80, 0, 24),
+				Position = UDim2.new(1, -2, 0, 0),
+				AnchorPoint = Vector2.new(1, 0),
+			}, {
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Horizontal,
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 4),
+				}),
+				Edits = if props.changeInfo and props.changeInfo.edits
+					then e("TextLabel", {
+						Text = props.changeInfo.edits .. if props.changeInfo.failed then "," else "",
+						BackgroundTransparency = 1,
+						Font = Enum.Font.Gotham,
+						TextSize = 14,
+						TextColor3 = theme.SubTextColor,
+						TextTransparency = props.transparency,
+						Size = UDim2.new(0, 0, 0, 16),
+						AutomaticSize = Enum.AutomaticSize.X,
+						LayoutOrder = 2,
+					})
+					else nil,
+				Failed = if props.changeInfo and props.changeInfo.failed
+					then e("TextLabel", {
+						Text = props.changeInfo.failed,
+						BackgroundTransparency = 1,
+						Font = Enum.Font.Gotham,
+						TextSize = 14,
+						TextColor3 = theme.Diff.Warning,
+						TextTransparency = props.transparency,
+						Size = UDim2.new(0, 0, 0, 16),
+						AutomaticSize = Enum.AutomaticSize.X,
+						LayoutOrder = 6,
+					})
+					else nil,
 			}),
 			LineGuides = e("Folder", nil, lineGuides),
 		})

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

@@ -8,8 +8,8 @@ local PatchTree = require(Plugin.PatchTree)
 local PatchSet = require(Plugin.PatchSet)
 
 local Theme = require(Plugin.App.Theme)
-local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 
 local e = Roact.createElement
 
@@ -55,33 +55,60 @@ function PatchVisualizer:render()
 	end
 
 	-- Recusively draw tree
-	local scrollElements, elementHeights = {}, {}
+	local scrollElements, elementHeights, elementIndex = {}, {}, 0
 
 	if patchTree then
+		local elementTotal = patchTree:getCount()
+		local depthsComplete = {}
 		local function drawNode(node, depth)
-			local elementHeight, setElementHeight = Roact.createBinding(30)
+			elementIndex += 1
-			table.insert(elementHeights, elementHeight)
+
-			table.insert(
+			local parentNode = patchTree:getNode(node.parentId)
-				scrollElements,
+			local isFinalChild = true
-				e(DomLabel, {
+			if parentNode then
-					updateEvent = self.updateEvent,
+				for _id, sibling in parentNode.children do
-					elementHeight = elementHeight,
+					if type(sibling) == "table" and sibling.name and sibling.name > node.name then
-					setElementHeight = setElementHeight,
+						isFinalChild = false
-					patchType = node.patchType,
+						break
-					className = node.className,
+					end
-					isWarning = node.isWarning,
+				end
-					instance = node.instance,
+			end
-					name = node.name,
+
-					hint = node.hint,
+			local elementHeight, setElementHeight = Roact.createBinding(24)
-					changeList = node.changeList,
+			elementHeights[elementIndex] = elementHeight
-					depth = depth,
+			scrollElements[elementIndex] = e(DomLabel, {
-					transparency = self.props.transparency,
+				transparency = self.props.transparency,
-					showSourceDiff = self.props.showSourceDiff,
+				showStringDiff = self.props.showStringDiff,
-				})
+				showTableDiff = self.props.showTableDiff,
-			)
+				updateEvent = self.updateEvent,
+				elementHeight = elementHeight,
+				setElementHeight = setElementHeight,
+				elementIndex = elementIndex,
+				isFinalElement = elementIndex == elementTotal,
+				depth = depth,
+				depthsComplete = table.clone(depthsComplete),
+				hasChildren = (node.children ~= nil and next(node.children) ~= nil),
+				isFinalChild = isFinalChild,
+				patchType = node.patchType,
+				className = node.className,
+				isWarning = node.isWarning,
+				instance = node.instance,
+				name = node.name,
+				changeInfo = node.changeInfo,
+				changeList = node.changeList,
+			})
+
+			if isFinalChild then
+				depthsComplete[depth] = true
+			end
 		end
 
 		patchTree:forEach(function(node, depth)
+			depthsComplete[depth] = false
+			for i = depth + 1, #depthsComplete do
+				depthsComplete[i] = nil
+			end
+
 			drawNode(node, depth)
 		end)
 	end
@@ -91,6 +118,7 @@ function PatchVisualizer:render()
 			transparency = self.props.transparency,
 			size = self.props.size,
 			position = self.props.position,
+			anchorPoint = self.props.anchorPoint,
 			layoutOrder = self.props.layoutOrder,
 		}, {
 			CleanMerge = e("TextLabel", {
@@ -98,14 +126,15 @@ function PatchVisualizer:render()
 				Text = "No changes to sync, project is up to date.",
 				Font = Enum.Font.GothamMedium,
 				TextSize = 15,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = theme.TextColor,
 				TextWrapped = true,
 				Size = UDim2.new(1, 0, 1, 0),
 				BackgroundTransparency = 1,
 			}),
 
 			VirtualScroller = e(VirtualScroller, {
-				size = UDim2.new(1, 0, 1, 0),
+				size = UDim2.new(1, 0, 1, -2),
+				position = UDim2.new(0, 0, 0, 2),
 				transparency = self.props.transparency,
 				count = #scrollElements,
 				updateEvent = self.updateEvent.Event,

plugin/src/App/Components/ScrollingFrame.lua

@@ -10,6 +10,12 @@ local bindingUtil = require(Plugin.App.bindingUtil)
 
 local e = Roact.createElement
 
+local scrollDirToAutoSize = {
+	[Enum.ScrollingDirection.X] = Enum.AutomaticSize.X,
+	[Enum.ScrollingDirection.Y] = Enum.AutomaticSize.Y,
+	[Enum.ScrollingDirection.XY] = Enum.AutomaticSize.XY,
+}
+
 local function ScrollingFrame(props)
 	return Theme.with(function(theme)
 		return e("ScrollingFrame", {
@@ -28,16 +34,21 @@ local function ScrollingFrame(props)
 			Size = props.size,
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,
-			CanvasSize = props.contentSize:map(function(value)
+			CanvasSize = if props.contentSize
-				return UDim2.new(
+				then props.contentSize:map(function(value)
-					0,
+					return UDim2.new(
-					if (props.scrollingDirection and props.scrollingDirection ~= Enum.ScrollingDirection.Y)
+						0,
-						then value.X
+						if (props.scrollingDirection and props.scrollingDirection ~= Enum.ScrollingDirection.Y)
-						else 0,
+							then value.X
-					0,
+							else 0,
-					value.Y
+						0,
-				)
+						value.Y
-			end),
+					)
+				end)
+				else UDim2.new(),
+			AutomaticCanvasSize = if props.contentSize == nil
+				then scrollDirToAutoSize[props.scrollingDirection or Enum.ScrollingDirection.XY]
+				else nil,
 
 			BorderSizePixel = 0,
 			BackgroundTransparency = 1,

plugin/src/App/Components/SlicedImage.lua

@@ -20,6 +20,7 @@ local function SlicedImage(props)
 		Size = props.size,
 		Position = props.position,
 		AnchorPoint = props.anchorPoint,
+		AutomaticSize = props.automaticSize,
 
 		ZIndex = props.zIndex,
 		LayoutOrder = props.layoutOrder,

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

@@ -9,6 +9,7 @@ local Log = require(Packages.Log)
 local Highlighter = require(Packages.Highlighter)
 local StringDiff = require(script:FindFirstChild("StringDiff"))
 
+local Timer = require(Plugin.Timer)
 local Theme = require(Plugin.App.Theme)
 
 local CodeLabel = require(Plugin.App.Components.CodeLabel)
@@ -52,7 +53,7 @@ function StringDiffVisualizer:updateScriptBackground()
 end
 
 function StringDiffVisualizer:didUpdate(previousProps)
-	if previousProps.oldText ~= self.props.oldText or previousProps.newText ~= self.props.newText then
+	if previousProps.oldString ~= self.props.oldString or previousProps.newString ~= self.props.newString then
 		self:calculateContentSize()
 		local add, remove = self:calculateDiffLines()
 		self:setState({
@@ -63,28 +64,29 @@ function StringDiffVisualizer:didUpdate(previousProps)
 end
 
 function StringDiffVisualizer:calculateContentSize()
-	local oldText, newText = self.props.oldText, self.props.newText
+	local oldString, newString = self.props.oldString, self.props.newString
 
-	local oldTextBounds = TextService:GetTextSize(oldText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+	local oldStringBounds = TextService:GetTextSize(oldString, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
-	local newTextBounds = TextService:GetTextSize(newText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+	local newStringBounds = TextService:GetTextSize(newString, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
 
 	self.setContentSize(
-		Vector2.new(math.max(oldTextBounds.X, newTextBounds.X), math.max(oldTextBounds.Y, newTextBounds.Y))
+		Vector2.new(math.max(oldStringBounds.X, newStringBounds.X), math.max(oldStringBounds.Y, newStringBounds.Y))
 	)
 end
 
 function StringDiffVisualizer:calculateDiffLines()
-	local oldText, newText = self.props.oldText, self.props.newText
+	Timer.start("StringDiffVisualizer:calculateDiffLines")
+	local oldString, newString = self.props.oldString, self.props.newString
 
 	-- Diff the two texts
 	local startClock = os.clock()
-	local diffs = StringDiff.findDiffs(oldText, newText)
+	local diffs = StringDiff.findDiffs(oldString, newString)
 	local stopClock = os.clock()
 
 	Log.trace(
 		"Diffing {} byte and {} byte strings took {} microseconds and found {} diff sections",
-		#oldText,
+		#oldString,
-		#newText,
+		#newString,
 		math.round((stopClock - startClock) * 1000 * 1000),
 		#diffs
 	)
@@ -133,11 +135,12 @@ function StringDiffVisualizer:calculateDiffLines()
 		end
 	end
 
+	Timer.stop()
 	return add, remove
 end
 
 function StringDiffVisualizer:render()
-	local oldText, newText = self.props.oldText, self.props.newText
+	local oldString, newString = self.props.oldString, self.props.newString
 
 	return Theme.with(function(theme)
 		return e(BorderedContainer, {
@@ -175,7 +178,7 @@ function StringDiffVisualizer:render()
 				Source = e(CodeLabel, {
 					size = UDim2.new(1, 0, 1, 0),
 					position = UDim2.new(0, 0, 0, 0),
-					text = oldText,
+					text = oldString,
 					lineBackground = theme.Diff.Remove,
 					markedLines = self.state.remove,
 				}),
@@ -190,7 +193,7 @@ function StringDiffVisualizer:render()
 				Source = e(CodeLabel, {
 					size = UDim2.new(1, 0, 1, 0),
 					position = UDim2.new(0, 0, 0, 0),
-					text = newText,
+					text = newString,
 					lineBackground = theme.Diff.Add,
 					markedLines = self.state.add,
 				}),

plugin/src/App/Components/TableDiffVisualizer/Array.lua

@@ -0,0 +1,195 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Timer = require(Plugin.Timer)
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local DisplayValue = require(Plugin.App.Components.PatchVisualizer.DisplayValue)
+
+local e = Roact.createElement
+
+local Array = Roact.Component:extend("Array")
+
+function Array:init()
+	self:setState({
+		diff = self:calculateDiff(),
+	})
+end
+
+function Array:calculateDiff()
+	Timer.start("Array:calculateDiff")
+	--[[
+		Find the indexes that are added or removed from the array,
+		and display them side by side with gaps for the indexes that
+		dont exist in the opposite array.
+	]]
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+
+	local i, j = 1, 1
+	local diff = {}
+
+	while i <= #oldTable and j <= #newTable do
+		if oldTable[i] == newTable[j] then
+			table.insert(diff, { oldTable[i], newTable[j] }) -- Unchanged
+			i += 1
+			j += 1
+		elseif not table.find(newTable, oldTable[i], j) then
+			table.insert(diff, { oldTable[i], nil }) -- Removal
+			i += 1
+		elseif not table.find(oldTable, newTable[j], i) then
+			table.insert(diff, { nil, newTable[j] }) -- Addition
+			j += 1
+		else
+			if table.find(newTable, oldTable[i], j) then
+				table.insert(diff, { nil, newTable[j] }) -- Addition
+				j += 1
+			else
+				table.insert(diff, { oldTable[i], nil }) -- Removal
+				i += 1
+			end
+		end
+	end
+
+	-- Handle remaining elements
+	while i <= #oldTable do
+		table.insert(diff, { oldTable[i], nil }) -- Remaining Removals
+		i += 1
+	end
+	while j <= #newTable do
+		table.insert(diff, { nil, newTable[j] }) -- Remaining Additions
+		j += 1
+	end
+
+	Timer.stop()
+	return diff
+end
+
+function Array:didUpdate(previousProps)
+	if previousProps.oldTable ~= self.props.oldTable or previousProps.newTable ~= self.props.newTable then
+		self:setState({
+			diff = self:calculateDiff(),
+		})
+	end
+end
+
+function Array:render()
+	return Theme.with(function(theme)
+		local diff = self.state.diff
+		local lines = table.create(#diff)
+
+		for i, element in diff do
+			local oldValue = element[1]
+			local newValue = element[2]
+
+			local patchType = if oldValue == nil then "Add" elseif newValue == nil then "Remove" else "Remain"
+
+			table.insert(
+				lines,
+				e("Frame", {
+					Size = UDim2.new(1, 0, 0, 25),
+					BackgroundTransparency = if patchType == "Remain" then 1 else self.props.transparency,
+					BackgroundColor3 = if patchType == "Remain" then theme.Diff.Row else theme.Diff[patchType],
+					BorderSizePixel = 0,
+					LayoutOrder = i,
+				}, {
+					DiffIcon = if patchType ~= "Remain"
+						then e("ImageLabel", {
+							Image = Assets.Images.Diff[patchType],
+							ImageColor3 = theme.AddressEntry.PlaceholderColor,
+							ImageTransparency = self.props.transparency,
+							BackgroundTransparency = 1,
+							Size = UDim2.new(0, 15, 0, 15),
+							Position = UDim2.new(0, 7, 0.5, 0),
+							AnchorPoint = Vector2.new(0, 0.5),
+						})
+						else nil,
+					Old = e("Frame", {
+						Size = UDim2.new(0.5, -30, 1, 0),
+						Position = UDim2.new(0, 30, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						Display = if oldValue ~= nil
+							then e(DisplayValue, {
+								value = oldValue,
+								transparency = self.props.transparency,
+								textColor = theme.Settings.Setting.DescriptionColor,
+							})
+							else nil,
+					}),
+					New = e("Frame", {
+						Size = UDim2.new(0.5, -10, 1, 0),
+						Position = UDim2.new(0.5, 5, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						Display = if newValue ~= nil
+							then e(DisplayValue, {
+								value = newValue,
+								transparency = self.props.transparency,
+								textColor = theme.Settings.Setting.DescriptionColor,
+							})
+							else nil,
+					}),
+				})
+			)
+		end
+
+		return Roact.createFragment({
+			Headers = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 25),
+				BackgroundTransparency = self.props.transparency:map(function(t)
+					return 0.95 + (0.05 * t)
+				end),
+				BackgroundColor3 = theme.Diff.Row,
+			}, {
+				ColumnA = e("TextLabel", {
+					Size = UDim2.new(0.5, -30, 1, 0),
+					Position = UDim2.new(0, 30, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "Old",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				ColumnB = e("TextLabel", {
+					Size = UDim2.new(0.5, -10, 1, 0),
+					Position = UDim2.new(0.5, 5, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "New",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				Separator = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 1),
+					Position = UDim2.new(0, 0, 1, 0),
+					BackgroundTransparency = 0,
+					BorderSizePixel = 0,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				}),
+			}),
+			KeyValues = e(ScrollingFrame, {
+				position = UDim2.new(0, 1, 0, 25),
+				size = UDim2.new(1, -2, 1, -27),
+				scrollingDirection = Enum.ScrollingDirection.Y,
+				transparency = self.props.transparency,
+			}, {
+				Layout = e("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					VerticalAlignment = Enum.VerticalAlignment.Top,
+				}),
+				Lines = Roact.createFragment(lines),
+			}),
+		})
+	end)
+end
+
+return Array

plugin/src/App/Components/TableDiffVisualizer/Dictionary.lua

@@ -0,0 +1,211 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Timer = require(Plugin.Timer)
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local DisplayValue = require(Plugin.App.Components.PatchVisualizer.DisplayValue)
+
+local e = Roact.createElement
+
+local Dictionary = Roact.Component:extend("Dictionary")
+
+function Dictionary:init()
+	self:setState({
+		diff = self:calculateDiff(),
+	})
+end
+
+function Dictionary:calculateDiff()
+	Timer.start("Dictionary:calculateDiff")
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+
+	-- Diff the two tables and find the added keys, removed keys, and changed keys
+	local diff = {}
+
+	for key, oldValue in oldTable do
+		local newValue = newTable[key]
+		if newValue == nil then
+			table.insert(diff, {
+				key = key,
+				patchType = "Remove",
+			})
+		elseif newValue ~= oldValue then
+			-- Note: should this do some sort of deep comparison for various types?
+			table.insert(diff, {
+				key = key,
+				patchType = "Edit",
+			})
+		else
+			table.insert(diff, {
+				key = key,
+				patchType = "Remain",
+			})
+		end
+	end
+	for key in newTable do
+		if oldTable[key] == nil then
+			table.insert(diff, {
+				key = key,
+				patchType = "Add",
+			})
+		end
+	end
+
+	table.sort(diff, function(a, b)
+		return a.key < b.key
+	end)
+
+	Timer.stop()
+	return diff
+end
+
+function Dictionary:didUpdate(previousProps)
+	if previousProps.oldTable ~= self.props.oldTable or previousProps.newTable ~= self.props.newTable then
+		self:setState({
+			diff = self:calculateDiff(),
+		})
+	end
+end
+
+function Dictionary:render()
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+	local diff = self.state.diff
+
+	return Theme.with(function(theme)
+		local lines = table.create(#diff)
+		for order, line in diff do
+			local key = line.key
+			local oldValue = oldTable[key]
+			local newValue = newTable[key]
+
+			table.insert(
+				lines,
+				e("Frame", {
+					Size = UDim2.new(1, 0, 0, 25),
+					LayoutOrder = order,
+					BorderSizePixel = 0,
+					BackgroundTransparency = if line.patchType == "Remain" then 1 else self.props.transparency,
+					BackgroundColor3 = if line.patchType == "Remain"
+						then theme.Diff.Row
+						else theme.Diff[line.patchType],
+				}, {
+					DiffIcon = if line.patchType ~= "Remain"
+						then e("ImageLabel", {
+							Image = Assets.Images.Diff[line.patchType],
+							ImageColor3 = theme.AddressEntry.PlaceholderColor,
+							ImageTransparency = self.props.transparency,
+							BackgroundTransparency = 1,
+							Size = UDim2.new(0, 15, 0, 15),
+							Position = UDim2.new(0, 7, 0.5, 0),
+							AnchorPoint = Vector2.new(0, 0.5),
+						})
+						else nil,
+					KeyName = e("TextLabel", {
+						Size = UDim2.new(0.3, -15, 1, 0),
+						Position = UDim2.new(0, 30, 0, 0),
+						BackgroundTransparency = 1,
+						Text = key,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 14,
+						TextColor3 = theme.Settings.Setting.DescriptionColor,
+						TextTruncate = Enum.TextTruncate.AtEnd,
+					}),
+					OldValue = e("Frame", {
+						Size = UDim2.new(0.35, -7, 1, 0),
+						Position = UDim2.new(0.3, 15, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						e(DisplayValue, {
+							value = oldValue,
+							transparency = self.props.transparency,
+							textColor = theme.Settings.Setting.DescriptionColor,
+						}),
+					}),
+					NewValue = e("Frame", {
+						Size = UDim2.new(0.35, -8, 1, 0),
+						Position = UDim2.new(0.65, 8, 0, 0),
+						BackgroundTransparency = 1,
+					}, {
+						e(DisplayValue, {
+							value = newValue,
+							transparency = self.props.transparency,
+							textColor = theme.Settings.Setting.DescriptionColor,
+						}),
+					}),
+				})
+			)
+		end
+
+		return Roact.createFragment({
+			Headers = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 25),
+				BackgroundTransparency = self.props.transparency:map(function(t)
+					return 0.95 + (0.05 * t)
+				end),
+				BackgroundColor3 = theme.Diff.Row,
+			}, {
+				ColumnA = e("TextLabel", {
+					Size = UDim2.new(0.3, -15, 1, 0),
+					Position = UDim2.new(0, 30, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "Key",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				ColumnB = e("TextLabel", {
+					Size = UDim2.new(0.35, -7, 1, 0),
+					Position = UDim2.new(0.3, 15, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "Old",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				ColumnC = e("TextLabel", {
+					Size = UDim2.new(0.35, -8, 1, 0),
+					Position = UDim2.new(0.65, 8, 0, 0),
+					BackgroundTransparency = 1,
+					Text = "New",
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.GothamBold,
+					TextSize = 14,
+					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+				}),
+				Separator = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 1),
+					Position = UDim2.new(0, 0, 1, 0),
+					BackgroundTransparency = 0,
+					BorderSizePixel = 0,
+					BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				}),
+			}),
+			KeyValues = e(ScrollingFrame, {
+				position = UDim2.new(0, 1, 0, 25),
+				size = UDim2.new(1, -2, 1, -27),
+				scrollingDirection = Enum.ScrollingDirection.Y,
+				transparency = self.props.transparency,
+			}, {
+				Layout = e("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					VerticalAlignment = Enum.VerticalAlignment.Top,
+				}),
+				Lines = Roact.createFragment(lines),
+			}),
+		})
+	end)
+end
+
+return Dictionary

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

@@ -0,0 +1,48 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local Array = require(script:FindFirstChild("Array"))
+local Dictionary = require(script:FindFirstChild("Dictionary"))
+
+local e = Roact.createElement
+
+local TableDiffVisualizer = Roact.Component:extend("TableDiffVisualizer")
+
+function TableDiffVisualizer:render()
+	local oldTable, newTable = self.props.oldTable or {}, self.props.newTable or {}
+
+	-- Ensure we're diffing tables, not mixing types
+	if type(oldTable) ~= "table" then
+		oldTable = {}
+	end
+	if type(newTable) ~= "table" then
+		newTable = {}
+	end
+
+	local isArray = next(newTable) == 1 or next(oldTable) == 1
+
+	return e(BorderedContainer, {
+		size = self.props.size,
+		position = self.props.position,
+		anchorPoint = self.props.anchorPoint,
+		transparency = self.props.transparency,
+	}, {
+		Content = if isArray
+			then e(Array, {
+				oldTable = oldTable,
+				newTable = newTable,
+				transparency = self.props.transparency,
+			})
+			else e(Dictionary, {
+				oldTable = oldTable,
+				newTable = newTable,
+				transparency = self.props.transparency,
+			}),
+	})
+end
+
+return TableDiffVisualizer

plugin/src/App/Components/Tag.lua

@@ -0,0 +1,56 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Assets = require(Plugin.Assets)
+
+local SlicedImage = require(Plugin.App.Components.SlicedImage)
+
+local e = Roact.createElement
+
+return function(props)
+	return e(SlicedImage, {
+		slice = Assets.Slices.RoundedBackground,
+		color = props.color,
+		transparency = props.transparency:map(function(transparency)
+			return 0.9 + (0.1 * transparency)
+		end),
+		layoutOrder = props.layoutOrder,
+		position = props.position,
+		anchorPoint = props.anchorPoint,
+		size = UDim2.new(0, 0, 0, 16),
+		automaticSize = Enum.AutomaticSize.X,
+	}, {
+		Padding = e("UIPadding", {
+			PaddingLeft = UDim.new(0, 4),
+			PaddingRight = UDim.new(0, 4),
+			PaddingTop = UDim.new(0, 2),
+			PaddingBottom = UDim.new(0, 2),
+		}),
+		Icon = if props.icon
+			then e("ImageLabel", {
+				Size = UDim2.new(0, 12, 0, 12),
+				Position = UDim2.new(0, 0, 0.5, 0),
+				AnchorPoint = Vector2.new(0, 0.5),
+				Image = props.icon,
+				BackgroundTransparency = 1,
+				ImageColor3 = props.color,
+				ImageTransparency = props.transparency,
+			})
+			else nil,
+		Text = e("TextLabel", {
+			Text = props.text,
+			Font = Enum.Font.GothamMedium,
+			TextSize = 12,
+			TextColor3 = props.color,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextTransparency = props.transparency,
+			Size = UDim2.new(0, 0, 1, 0),
+			Position = UDim2.new(0, if props.icon then 15 else 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.X,
+			BackgroundTransparency = 1,
+		}),
+	})
+end

plugin/src/App/Components/Tooltip.lua

@@ -163,7 +163,6 @@ local Trigger = Roact.Component:extend("TooltipTrigger")
 function Trigger:init()
 	self.id = HttpService:GenerateGUID(false)
 	self.ref = Roact.createRef()
-	self.mousePos = Vector2.zero
 	self.showingPopup = false
 
 	self.destroy = function()
@@ -195,18 +194,22 @@ end
 function Trigger:isHovering()
 	local rbx = self.ref.current
 	if rbx then
-		local pos = rbx.AbsolutePosition
+		return rbx.GuiState == Enum.GuiState.Hover
-		local size = rbx.AbsoluteSize
-		local mousePos = self.mousePos
-
-		return mousePos.X >= pos.X
-			and mousePos.X <= pos.X + size.X
-			and mousePos.Y >= pos.Y
-			and mousePos.Y <= pos.Y + size.Y
 	end
 	return false
 end
 
+function Trigger:getMousePos()
+	local rbx = self.ref.current
+	if rbx then
+		local widget = rbx:FindFirstAncestorOfClass("DockWidgetPluginGui")
+		if widget then
+			return widget:GetRelativeMousePosition()
+		end
+	end
+	return Vector2.zero
+end
+
 function Trigger:managePopup()
 	if self:isHovering() then
 		if self.showingPopup or self.showDelayThread then
@@ -217,7 +220,7 @@ function Trigger:managePopup()
 		self.showDelayThread = task.delay(DELAY, function()
 			self.props.context.addTip(self.id, {
 				Text = self.props.text,
-				Position = self.mousePos,
+				Position = self:getMousePos(),
 				Trigger = self.ref,
 			})
 			self.showDelayThread = nil
@@ -234,13 +237,7 @@ function Trigger:managePopup()
 end
 
 function Trigger:render()
-	local function recalculate(rbx)
+	local function recalculate()
-		local widget = rbx:FindFirstAncestorOfClass("DockWidgetPluginGui")
-		if not widget then
-			return
-		end
-		self.mousePos = widget:GetRelativeMousePosition()
-
 		self:managePopup()
 	end
 
@@ -250,11 +247,9 @@ function Trigger:render()
 		ZIndex = self.props.zIndex or 100,
 		[Roact.Ref] = self.ref,
 
+		[Roact.Change.GuiState] = recalculate,
 		[Roact.Change.AbsolutePosition] = recalculate,
 		[Roact.Change.AbsoluteSize] = recalculate,
-		[Roact.Event.MouseMoved] = recalculate,
-		[Roact.Event.MouseLeave] = recalculate,
-		[Roact.Event.MouseEnter] = recalculate,
 	})
 end
 

plugin/src/App/Components/VirtualScroller.lua

@@ -131,8 +131,8 @@ function VirtualScroller:render()
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,
 			BackgroundTransparency = props.backgroundTransparency or 1,
-			BackgroundColor3 = props.backgroundColor3,
+			BackgroundColor3 = props.backgroundColor3 or theme.BorderedContainer.BackgroundColor,
-			BorderColor3 = props.borderColor3,
+			BorderColor3 = props.borderColor3 or theme.BorderedContainer.BorderColor,
 			CanvasSize = self.totalCanvas:map(function(s)
 				return UDim2.fromOffset(0, s)
 			end),

plugin/src/App/StatusPages/Confirming.lua

@@ -4,14 +4,16 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local Timer = require(Plugin.Timer)
+local PatchTree = require(Plugin.PatchTree)
 local Settings = require(Plugin.Settings)
 local Theme = require(Plugin.App.Theme)
 local TextButton = require(Plugin.App.Components.TextButton)
-local Header = require(Plugin.App.Components.Header)
 local StudioPluginGui = require(Plugin.App.Components.Studio.StudioPluginGui)
 local Tooltip = require(Plugin.App.Components.Tooltip)
 local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
 local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
+local TableDiffVisualizer = require(Plugin.App.Components.TableDiffVisualizer)
 
 local e = Roact.createElement
 
@@ -22,30 +24,50 @@ function ConfirmingPage:init()
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
 
 	self:setState({
-		showingSourceDiff = false,
+		patchTree = nil,
-		oldSource = "",
+		showingStringDiff = false,
-		newSource = "",
+		oldString = "",
+		newString = "",
+		showingTableDiff = false,
+		oldTable = {},
+		newTable = {},
 	})
+
+	if self.props.confirmData and self.props.confirmData.patch and self.props.confirmData.instanceMap then
+		self:buildPatchTree()
+	end
+end
+
+function ConfirmingPage:didUpdate(prevProps)
+	if prevProps.confirmData ~= self.props.confirmData then
+		self:buildPatchTree()
+	end
+end
+
+function ConfirmingPage:buildPatchTree()
+	Timer.start("ConfirmingPage:buildPatchTree")
+	self:setState({
+		patchTree = PatchTree.build(
+			self.props.confirmData.patch,
+			self.props.confirmData.instanceMap,
+			{ "Property", "Current", "Incoming" }
+		),
+	})
+	Timer.stop()
 end
 
 function ConfirmingPage:render()
 	return Theme.with(function(theme)
 		local pageContent = Roact.createFragment({
-			Header = e(Header, {
-				transparency = self.props.transparency,
-				layoutOrder = 1,
-			}),
-
 			Title = e("TextLabel", {
 				Text = string.format(
 					"Sync changes for project '%s':",
 					self.props.confirmData.serverInfo.projectName or "UNKNOWN"
 				),
-				LayoutOrder = 2,
 				Font = Enum.Font.Gotham,
 				LineHeight = 1.2,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = self.props.transparency,
 				Size = UDim2.new(1, 0, 0, 20),
@@ -53,19 +75,24 @@ function ConfirmingPage:render()
 			}),
 
 			PatchVisualizer = e(PatchVisualizer, {
-				size = UDim2.new(1, 0, 1, -150),
+				size = UDim2.new(1, 0, 1, -100),
 				transparency = self.props.transparency,
 				layoutOrder = 3,
 
-				changeListHeaders = { "Property", "Current", "Incoming" },
+				patchTree = self.state.patchTree,
-				patch = self.props.confirmData.patch,
-				instanceMap = self.props.confirmData.instanceMap,
 
-				showSourceDiff = function(oldSource: string, newSource: string)
+				showStringDiff = function(oldString: string, newString: string)
 					self:setState({
-						showingSourceDiff = true,
+						showingStringDiff = true,
-						oldSource = oldSource,
+						oldString = oldString,
-						newSource = newSource,
+						newString = newString,
+					})
+				end,
+				showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
+					self:setState({
+						showingTableDiff = true,
+						oldTable = oldTable,
+						newTable = newTable,
 					})
 				end,
 			}),
@@ -121,6 +148,11 @@ function ConfirmingPage:render()
 				}),
 			}),
 
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 8),
+				PaddingRight = UDim.new(0, 8),
+			}),
+
 			Layout = e("UIListLayout", {
 				HorizontalAlignment = Enum.HorizontalAlignment.Center,
 				VerticalAlignment = Enum.VerticalAlignment.Center,
@@ -129,15 +161,10 @@ function ConfirmingPage:render()
 				Padding = UDim.new(0, 10),
 			}),
 
-			Padding = e("UIPadding", {
+			StringDiff = e(StudioPluginGui, {
-				PaddingLeft = UDim.new(0, 20),
+				id = "Rojo_ConfirmingStringDiff",
-				PaddingRight = UDim.new(0, 20),
+				title = "String diff",
-			}),
+				active = self.state.showingStringDiff,
-
-			SourceDiff = e(StudioPluginGui, {
-				id = "Rojo_ConfirmingSourceDiff",
-				title = "Source diff",
-				active = self.state.showingSourceDiff,
 				isEphemeral = true,
 
 				initDockState = Enum.InitialDockState.Float,
@@ -149,7 +176,7 @@ function ConfirmingPage:render()
 
 				onClose = function()
 					self:setState({
-						showingSourceDiff = false,
+						showingStringDiff = false,
 					})
 				end,
 			}, {
@@ -165,8 +192,46 @@ function ConfirmingPage:render()
 							anchorPoint = Vector2.new(0, 0),
 							transparency = self.props.transparency,
 
-							oldText = self.state.oldSource,
+							oldString = self.state.oldString,
-							newText = self.state.newSource,
+							newString = self.state.newString,
+						}),
+					}),
+				}),
+			}),
+
+			TableDiff = e(StudioPluginGui, {
+				id = "Rojo_ConfirmingTableDiff",
+				title = "Table diff",
+				active = self.state.showingTableDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = true,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingTableDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(TableDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldTable = self.state.oldTable,
+							newTable = self.state.newTable,
 						}),
 					}),
 				}),

plugin/src/App/StatusPages/Connected.lua

@@ -3,9 +3,8 @@ local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
-local Flipper = require(Packages.Flipper)
 
-local bindingUtil = require(Plugin.App.bindingUtil)
+local timeUtil = require(Plugin.timeUtil)
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local PatchSet = require(Plugin.PatchSet)
@@ -18,86 +17,188 @@ local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local Tooltip = require(Plugin.App.Components.Tooltip)
 local PatchVisualizer = require(Plugin.App.Components.PatchVisualizer)
 local StringDiffVisualizer = require(Plugin.App.Components.StringDiffVisualizer)
+local TableDiffVisualizer = require(Plugin.App.Components.TableDiffVisualizer)
 
 local e = Roact.createElement
 
-local AGE_UNITS = {
+local ChangesViewer = Roact.Component:extend("ChangesViewer")
-	{ 31556909, "year" },
-	{ 2629743, "month" },
-	{ 604800, "week" },
-	{ 86400, "day" },
-	{ 3600, "hour" },
-	{
-		60,
-		"minute",
-	},
-}
-function timeSinceText(elapsed: number): string
-	if elapsed < 3 then
-		return "just now"
-	end
 
-	local ageText = string.format("%d seconds ago", elapsed)
+function ChangesViewer:init()
-
-	for _, UnitData in ipairs(AGE_UNITS) do
-		local UnitSeconds, UnitName = UnitData[1], UnitData[2]
-		if elapsed > UnitSeconds then
-			local c = math.floor(elapsed / UnitSeconds)
-			ageText = string.format("%d %s%s ago", c, UnitName, c > 1 and "s" or "")
-			break
-		end
-	end
-
-	return ageText
-end
-
-local ChangesDrawer = Roact.Component:extend("ChangesDrawer")
-
-function ChangesDrawer:init()
 	-- Hold onto the serve session during the lifecycle of this component
 	-- so that it can still render during the fade out after disconnecting
 	self.serveSession = self.props.serveSession
 end
 
-function ChangesDrawer:render()
+function ChangesViewer:render()
-	if self.props.rendered == false or self.serveSession == nil then
+	if self.props.rendered == false or self.serveSession == nil or self.props.patchData == nil then
 		return nil
 	end
 
+	local unapplied = PatchSet.countChanges(self.props.patchData.unapplied)
+	local applied = PatchSet.countChanges(self.props.patchData.patch) - unapplied
+
 	return Theme.with(function(theme)
-		return e(BorderedContainer, {
+		return Roact.createFragment({
-			transparency = self.props.transparency,
+			Navbar = e("Frame", {
-			size = self.props.height:map(function(y)
+				Size = UDim2.new(1, 0, 0, 40),
-				return UDim2.new(1, 0, y, -220 * y)
+				BackgroundTransparency = 1,
-			end),
-			position = UDim2.new(0, 0, 1, 0),
-			anchorPoint = Vector2.new(0, 1),
-			layoutOrder = self.props.layoutOrder,
-		}, {
-			Close = e(IconButton, {
-				icon = Assets.Images.Icons.Close,
-				iconSize = 24,
-				color = theme.ConnectionDetails.DisconnectColor,
-				transparency = self.props.transparency,
-
-				position = UDim2.new(1, 0, 0, 0),
-				anchorPoint = Vector2.new(1, 0),
-
-				onClick = self.props.onClose,
 			}, {
-				Tip = e(Tooltip.Trigger, {
+				Close = e(IconButton, {
-					text = "Close the patch visualizer",
+					icon = Assets.Images.Icons.Close,
+					iconSize = 24,
+					color = theme.Settings.Navbar.BackButtonColor,
+					transparency = self.props.transparency,
+
+					position = UDim2.new(0, 0, 0.5, 0),
+					anchorPoint = Vector2.new(0, 0.5),
+
+					onClick = self.props.onBack,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Close",
+					}),
+				}),
+
+				Title = e("TextLabel", {
+					Text = "Sync",
+					Font = Enum.Font.GothamMedium,
+					TextSize = 17,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextColor3 = theme.TextColor,
+					TextTransparency = self.props.transparency,
+					Size = UDim2.new(1, -40, 0, 20),
+					Position = UDim2.new(0, 40, 0, 0),
+					BackgroundTransparency = 1,
+				}),
+
+				Subtitle = e("TextLabel", {
+					Text = DateTime.fromUnixTimestamp(self.props.patchData.timestamp):FormatLocalTime("LTS", "en-us"),
+					TextXAlignment = Enum.TextXAlignment.Left,
+					Font = Enum.Font.Gotham,
+					TextSize = 15,
+					TextColor3 = theme.SubTextColor,
+					TextTruncate = Enum.TextTruncate.AtEnd,
+					TextTransparency = self.props.transparency,
+					Size = UDim2.new(1, -40, 0, 16),
+					Position = UDim2.new(0, 40, 0, 20),
+					BackgroundTransparency = 1,
+				}),
+
+				Info = e("Frame", {
+					BackgroundTransparency = 1,
+					Size = UDim2.new(0, 10, 0, 24),
+					AutomaticSize = Enum.AutomaticSize.X,
+					Position = UDim2.new(1, -5, 0.5, 0),
+					AnchorPoint = Vector2.new(1, 0.5),
+				}, {
+					Tooltip = e(Tooltip.Trigger, {
+						text = `{applied} changes applied`
+							.. (if unapplied > 0 then `, {unapplied} changes failed` else ""),
+					}),
+					Content = e("Frame", {
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0, 0, 1, 0),
+						AutomaticSize = Enum.AutomaticSize.X,
+					}, {
+						Layout = e("UIListLayout", {
+							FillDirection = Enum.FillDirection.Horizontal,
+							HorizontalAlignment = Enum.HorizontalAlignment.Right,
+							VerticalAlignment = Enum.VerticalAlignment.Center,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 4),
+						}),
+
+						StatusIcon = e("ImageLabel", {
+							BackgroundTransparency = 1,
+							Image = if unapplied > 0
+								then Assets.Images.Icons.SyncWarning
+								else Assets.Images.Icons.SyncSuccess,
+							ImageColor3 = if unapplied > 0 then theme.Diff.Warning else theme.TextColor,
+							Size = UDim2.new(0, 24, 0, 24),
+							LayoutOrder = 10,
+						}),
+						StatusSpacer = e("Frame", {
+							BackgroundTransparency = 1,
+							Size = UDim2.new(0, 6, 0, 4),
+							LayoutOrder = 9,
+						}),
+						AppliedIcon = e("ImageLabel", {
+							BackgroundTransparency = 1,
+							Image = Assets.Images.Icons.Checkmark,
+							ImageColor3 = theme.TextColor,
+							Size = UDim2.new(0, 16, 0, 16),
+							LayoutOrder = 1,
+						}),
+						AppliedText = e("TextLabel", {
+							Text = applied,
+							Font = Enum.Font.Gotham,
+							TextSize = 15,
+							TextColor3 = theme.TextColor,
+							TextTransparency = self.props.transparency,
+							Size = UDim2.new(0, 0, 1, 0),
+							AutomaticSize = Enum.AutomaticSize.X,
+							BackgroundTransparency = 1,
+							LayoutOrder = 2,
+						}),
+						Warnings = if unapplied > 0
+							then Roact.createFragment({
+								WarningsSpacer = e("Frame", {
+									BackgroundTransparency = 1,
+									Size = UDim2.new(0, 4, 0, 4),
+									LayoutOrder = 3,
+								}),
+								UnappliedIcon = e("ImageLabel", {
+									BackgroundTransparency = 1,
+									Image = Assets.Images.Icons.Exclamation,
+									ImageColor3 = theme.Diff.Warning,
+									Size = UDim2.new(0, 4, 0, 16),
+									LayoutOrder = 4,
+								}),
+								UnappliedText = e("TextLabel", {
+									Text = unapplied,
+									Font = Enum.Font.Gotham,
+									TextSize = 15,
+									TextColor3 = theme.Diff.Warning,
+									TextTransparency = self.props.transparency,
+									Size = UDim2.new(0, 0, 1, 0),
+									AutomaticSize = Enum.AutomaticSize.X,
+									BackgroundTransparency = 1,
+									LayoutOrder = 5,
+								}),
+							})
+							else nil,
+					}),
+				}),
+
+				Divider = e("Frame", {
+					BackgroundColor3 = theme.Settings.DividerColor,
+					BackgroundTransparency = self.props.transparency,
+					Size = UDim2.new(1, 0, 0, 1),
+					Position = UDim2.new(0, 0, 1, 0),
+					BorderSizePixel = 0,
+				}, {
+					Gradient = e("UIGradient", {
+						Transparency = NumberSequence.new({
+							NumberSequenceKeypoint.new(0, 1),
+							NumberSequenceKeypoint.new(0.1, 0),
+							NumberSequenceKeypoint.new(0.9, 0),
+							NumberSequenceKeypoint.new(1, 1),
+						}),
+					}),
 				}),
 			}),
 
-			PatchVisualizer = e(PatchVisualizer, {
+			Patch = e(PatchVisualizer, {
-				size = UDim2.new(1, 0, 1, 0),
+				size = UDim2.new(1, -10, 1, -65),
+				position = UDim2.new(0, 5, 1, -5),
+				anchorPoint = Vector2.new(0, 1),
 				transparency = self.props.transparency,
-				layoutOrder = 3,
+				layoutOrder = self.props.layoutOrder,
 
 				patchTree = self.props.patchTree,
 
-				showSourceDiff = self.props.showSourceDiff,
+				showStringDiff = self.props.showStringDiff,
+				showTableDiff = self.props.showTableDiff,
 			}),
 		})
 	end)
@@ -165,20 +266,7 @@ function ConnectedPage:getChangeInfoText()
 	if patchData == nil then
 		return ""
 	end
-
+	return timeUtil.elapsedToText(DateTime.now().UnixTimestamp - patchData.timestamp)
-	local elapsed = os.time() - patchData.timestamp
-	local unapplied = PatchSet.countChanges(patchData.unapplied)
-
-	return "<i>Synced "
-		.. timeSinceText(elapsed)
-		.. (if unapplied > 0
-			then string.format(
-				', <font color="#FF8E3C">but %d change%s failed to apply</font>',
-				unapplied,
-				unapplied == 1 and "" or "s"
-			)
-			else "")
-		.. "</i>"
 end
 
 function ConnectedPage:startChangeInfoTextUpdater()
@@ -188,17 +276,13 @@ function ConnectedPage:startChangeInfoTextUpdater()
 	-- Start a new updater
 	self.changeInfoTextUpdater = task.defer(function()
 		while true do
-			if self.state.hoveringChangeInfo then
+			self.setChangeInfoText(self:getChangeInfoText())
-				self.setChangeInfoText("<u>" .. self:getChangeInfoText() .. "</u>")
-			else
-				self.setChangeInfoText(self:getChangeInfoText())
-			end
 
-			local elapsed = os.time() - self.props.patchData.timestamp
+			local elapsed = DateTime.now().UnixTimestamp - self.props.patchData.timestamp
 			local updateInterval = 1
 
 			-- Update timestamp text as frequently as currently needed
-			for _, UnitData in ipairs(AGE_UNITS) do
+			for _, UnitData in ipairs(timeUtil.AGE_UNITS) do
 				local UnitSeconds = UnitData[1]
 				if elapsed > UnitSeconds then
 					updateInterval = UnitSeconds
@@ -219,29 +303,12 @@ function ConnectedPage:stopChangeInfoTextUpdater()
 end
 
 function ConnectedPage:init()
-	self.changeDrawerMotor = Flipper.SingleMotor.new(0)
-	self.changeDrawerHeight = bindingUtil.fromMotor(self.changeDrawerMotor)
-
-	self.changeDrawerMotor:onStep(function(value)
-		local renderChanges = value > 0.05
-
-		self:setState(function(state)
-			if state.renderChanges == renderChanges then
-				return nil
-			end
-
-			return {
-				renderChanges = renderChanges,
-			}
-		end)
-	end)
-
 	self:setState({
 		renderChanges = false,
 		hoveringChangeInfo = false,
-		showingSourceDiff = false,
+		showingStringDiff = false,
-		oldSource = "",
+		oldString = "",
-		newSource = "",
+		newString = "",
 	})
 
 	self.changeInfoText, self.setChangeInfoText = Roact.createBinding("")
@@ -258,12 +325,16 @@ function ConnectedPage:didUpdate(previousProps)
 		-- New patch recieved
 		self:startChangeInfoTextUpdater()
 		self:setState({
-			showingSourceDiff = false,
+			showingStringDiff = false,
 		})
 	end
 end
 
 function ConnectedPage:render()
+	local syncWarning = self.props.patchData
+		and self.props.patchData.unapplied
+		and PatchSet.countChanges(self.props.patchData.unapplied) > 0
+
 	return Theme.with(function(theme)
 		return Roact.createFragment({
 			Padding = e("UIPadding", {
@@ -278,9 +349,88 @@ function ConnectedPage:render()
 				Padding = UDim.new(0, 10),
 			}),
 
-			Header = e(Header, {
+			Heading = e("Frame", {
-				transparency = self.props.transparency,
+				BackgroundTransparency = 1,
-				layoutOrder = 1,
+				Size = UDim2.new(1, 0, 0, 32),
+			}, {
+				Header = e(Header, {
+					transparency = self.props.transparency,
+				}),
+
+				ChangeInfo = e("TextButton", {
+					Text = "",
+					Size = UDim2.new(0, 0, 1, 0),
+					AutomaticSize = Enum.AutomaticSize.X,
+					BackgroundColor3 = theme.BorderedContainer.BorderedColor,
+					BackgroundTransparency = if self.state.hoveringChangeInfo then 0.7 else 1,
+					BorderSizePixel = 0,
+					Position = UDim2.new(1, -5, 0.5, 0),
+					AnchorPoint = Vector2.new(1, 0.5),
+					[Roact.Event.MouseEnter] = function()
+						self:setState({
+							hoveringChangeInfo = true,
+						})
+					end,
+					[Roact.Event.MouseLeave] = function()
+						self:setState({
+							hoveringChangeInfo = false,
+						})
+					end,
+					[Roact.Event.Activated] = function()
+						self:setState(function(prevState)
+							prevState = prevState or {}
+							return {
+								renderChanges = not prevState.renderChanges,
+							}
+						end)
+					end,
+				}, {
+					Corner = e("UICorner", {
+						CornerRadius = UDim.new(0, 5),
+					}),
+					Tooltip = e(Tooltip.Trigger, {
+						text = if self.state.renderChanges then "Hide changes" else "View changes",
+					}),
+					Content = e("Frame", {
+						BackgroundTransparency = 1,
+						Size = UDim2.new(0, 0, 1, 0),
+						AutomaticSize = Enum.AutomaticSize.X,
+					}, {
+						Layout = e("UIListLayout", {
+							FillDirection = Enum.FillDirection.Horizontal,
+							HorizontalAlignment = Enum.HorizontalAlignment.Center,
+							VerticalAlignment = Enum.VerticalAlignment.Center,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 5),
+						}),
+						Padding = e("UIPadding", {
+							PaddingLeft = UDim.new(0, 5),
+							PaddingRight = UDim.new(0, 5),
+						}),
+						Text = e("TextLabel", {
+							BackgroundTransparency = 1,
+							Text = self.changeInfoText,
+							Font = Enum.Font.Gotham,
+							TextSize = 15,
+							TextColor3 = if syncWarning then theme.Diff.Warning else theme.Header.VersionColor,
+							TextTransparency = self.props.transparency,
+							TextXAlignment = Enum.TextXAlignment.Right,
+							Size = UDim2.new(0, 0, 1, 0),
+							AutomaticSize = Enum.AutomaticSize.X,
+							LayoutOrder = 1,
+						}),
+						Icon = e("ImageLabel", {
+							BackgroundTransparency = 1,
+							Image = if syncWarning
+								then Assets.Images.Icons.SyncWarning
+								else Assets.Images.Icons.SyncSuccess,
+							ImageColor3 = if syncWarning then theme.Diff.Warning else theme.Header.VersionColor,
+							ImageTransparency = self.props.transparency,
+							Size = UDim2.new(0, 24, 0, 24),
+							LayoutOrder = 2,
+						}),
+					}),
+				}),
 			}),
 
 			ConnectionDetails = e(ConnectionDetails, {
@@ -330,83 +480,65 @@ function ConnectedPage:render()
 				}),
 			}),
 
-			ChangeInfo = e("TextButton", {
+			ChangesViewer = e(StudioPluginGui, {
-				Text = self.changeInfoText,
+				id = "Rojo_ChangesViewer",
-				Font = Enum.Font.Gotham,
+				title = "View changes",
-				TextSize = 14,
+				active = self.state.renderChanges,
-				TextWrapped = true,
+				isEphemeral = true,
-				RichText = true,
-				TextColor3 = theme.Header.VersionColor,
-				TextXAlignment = Enum.TextXAlignment.Left,
-				TextYAlignment = Enum.TextYAlignment.Top,
-				TextTransparency = self.props.transparency,
 
-				Size = UDim2.new(1, 0, 0, 28),
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = true,
+				floatingSize = Vector2.new(400, 500),
+				minimumSize = Vector2.new(300, 300),
 
-				LayoutOrder = 4,
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
-				BackgroundTransparency = 1,
 
-				[Roact.Event.MouseEnter] = function()
+				onClose = function()
 					self:setState({
-						hoveringChangeInfo = true,
+						renderChanges = false,
 					})
-					self.setChangeInfoText("<u>" .. self:getChangeInfoText() .. "</u>")
-				end,
-
-				[Roact.Event.MouseLeave] = function()
-					self:setState({
-						hoveringChangeInfo = false,
-					})
-					self.setChangeInfoText(self:getChangeInfoText())
-				end,
-
-				[Roact.Event.Activated] = function()
-					if self.state.renderChanges then
-						self.changeDrawerMotor:setGoal(Flipper.Spring.new(0, {
-							frequency = 4,
-							dampingRatio = 1,
-						}))
-					else
-						self.changeDrawerMotor:setGoal(Flipper.Spring.new(1, {
-							frequency = 3,
-							dampingRatio = 1,
-						}))
-					end
 				end,
 			}, {
-				Tooltip = e(Tooltip.Trigger, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
-					text = if self.state.renderChanges then "Hide the changes" else "View the changes",
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						Changes = e(ChangesViewer, {
+							transparency = self.props.transparency,
+							rendered = self.state.renderChanges,
+							patchData = self.props.patchData,
+							patchTree = self.props.patchTree,
+							serveSession = self.props.serveSession,
+							showStringDiff = function(oldString: string, newString: string)
+								self:setState({
+									showingStringDiff = true,
+									oldString = oldString,
+									newString = newString,
+								})
+							end,
+							showTableDiff = function(oldTable: { [any]: any? }, newTable: { [any]: any? })
+								self:setState({
+									showingTableDiff = true,
+									oldTable = oldTable,
+									newTable = newTable,
+								})
+							end,
+							onBack = function()
+								self:setState({
+									renderChanges = false,
+								})
+							end,
+						}),
+					}),
 				}),
 			}),
 
-			ChangesDrawer = e(ChangesDrawer, {
+			StringDiff = e(StudioPluginGui, {
-				rendered = self.state.renderChanges,
+				id = "Rojo_ConnectedStringDiff",
-				transparency = self.props.transparency,
+				title = "String diff",
-				patchTree = self.props.patchTree,
+				active = self.state.showingStringDiff,
-				serveSession = self.props.serveSession,
-				height = self.changeDrawerHeight,
-				layoutOrder = 5,
-
-				showSourceDiff = function(oldSource: string, newSource: string)
-					self:setState({
-						showingSourceDiff = true,
-						oldSource = oldSource,
-						newSource = newSource,
-					})
-				end,
-
-				onClose = function()
-					self.changeDrawerMotor:setGoal(Flipper.Spring.new(0, {
-						frequency = 4,
-						dampingRatio = 1,
-					}))
-				end,
-			}),
-
-			SourceDiff = e(StudioPluginGui, {
-				id = "Rojo_ConnectedSourceDiff",
-				title = "Source diff",
-				active = self.state.showingSourceDiff,
 				isEphemeral = true,
 
 				initDockState = Enum.InitialDockState.Float,
@@ -418,7 +550,7 @@ function ConnectedPage:render()
 
 				onClose = function()
 					self:setState({
-						showingSourceDiff = false,
+						showingStringDiff = false,
 					})
 				end,
 			}, {
@@ -434,8 +566,46 @@ function ConnectedPage:render()
 							anchorPoint = Vector2.new(0, 0),
 							transparency = self.props.transparency,
 
-							oldText = self.state.oldSource,
+							oldString = self.state.oldString,
-							newText = self.state.newSource,
+							newString = self.state.newString,
+						}),
+					}),
+				}),
+			}),
+
+			TableDiff = e(StudioPluginGui, {
+				id = "Rojo_ConnectedTableDiff",
+				title = "Table diff",
+				active = self.state.showingTableDiff,
+				isEphemeral = true,
+
+				initDockState = Enum.InitialDockState.Float,
+				overridePreviousState = false,
+				floatingSize = Vector2.new(500, 350),
+				minimumSize = Vector2.new(400, 250),
+
+				zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+				onClose = function()
+					self:setState({
+						showingTableDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(TableDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldTable = self.state.oldTable,
+							newTable = self.state.newTable,
 						}),
 					}),
 				}),

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -13,10 +13,23 @@ local Theme = require(Plugin.App.Theme)
 local Checkbox = require(Plugin.App.Components.Checkbox)
 local Dropdown = require(Plugin.App.Components.Dropdown)
 local IconButton = require(Plugin.App.Components.IconButton)
+local Tag = require(Plugin.App.Components.Tag)
 
 local e = Roact.createElement
 
 local DIVIDER_FADE_SIZE = 0.1
+local TAG_TYPES = {
+	unstable = {
+		text = "UNSTABLE",
+		icon = Assets.Images.Icons.Warning,
+		color = { "Settings", "Setting", "UnstableColor" },
+	},
+	debug = {
+		text = "DEBUG",
+		icon = Assets.Images.Icons.Debug,
+		color = { "Settings", "Setting", "DebugColor" },
+	},
+}
 
 local function getTextBounds(text, textSize, font, lineHeight, bounds)
 	local textBounds = TextService:GetTextSize(text, textSize, font, bounds)
@@ -27,6 +40,17 @@ local function getTextBounds(text, textSize, font, lineHeight, bounds)
 	return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize))
 end
 
+local function getThemeColorFromPath(theme, path)
+	local color = theme
+	for _, key in path do
+		if color[key] == nil then
+			return theme.BrandColor
+		end
+		color = color[key]
+	end
+	return color
+end
+
 local Setting = Roact.Component:extend("Setting")
 
 function Setting:init()
@@ -51,11 +75,11 @@ end
 
 function Setting:render()
 	return Theme.with(function(theme)
-		theme = theme.Settings
+		local settingsTheme = theme.Settings
 
 		return e("Frame", {
 			Size = self.contentSize:map(function(value)
-				return UDim2.new(1, 0, 0, 20 + value.Y + 20)
+				return UDim2.new(1, 0, 0, value.Y + 20)
 			end),
 			LayoutOrder = self.props.layoutOrder,
 			ZIndex = -self.props.layoutOrder,
@@ -106,7 +130,7 @@ function Setting:render()
 					then e(IconButton, {
 						icon = Assets.Images.Icons.Reset,
 						iconSize = 24,
-						color = theme.BackButtonColor,
+						color = settingsTheme.BackButtonColor,
 						transparency = self.props.transparency,
 						visible = self.props.showReset,
 						layoutOrder = -1,
@@ -120,29 +144,49 @@ function Setting:render()
 				Size = UDim2.new(1, 0, 1, 0),
 				BackgroundTransparency = 1,
 			}, {
-				Name = e("TextLabel", {
+				Heading = e("Frame", {
-					Text = (if self.props.experimental then '<font color="#FF8E3C">⚠ </font>' else "")
+					Size = UDim2.new(1, 0, 0, 16),
-						.. self.props.name,
-					Font = Enum.Font.GothamBold,
-					TextSize = 17,
-					TextColor3 = theme.Setting.NameColor,
-					TextXAlignment = Enum.TextXAlignment.Left,
-					TextTransparency = self.props.transparency,
-					RichText = true,
-
-					Size = UDim2.new(1, 0, 0, 17),
-
-					LayoutOrder = 1,
 					BackgroundTransparency = 1,
+				}, {
+					Layout = e("UIListLayout", {
+						VerticalAlignment = Enum.VerticalAlignment.Center,
+						FillDirection = Enum.FillDirection.Horizontal,
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						Padding = UDim.new(0, 5),
+					}),
+					Tag = if self.props.tag and TAG_TYPES[self.props.tag]
+						then e(Tag, {
+							layoutOrder = 1,
+							transparency = self.props.transparency,
+							text = TAG_TYPES[self.props.tag].text,
+							icon = TAG_TYPES[self.props.tag].icon,
+							color = getThemeColorFromPath(theme, TAG_TYPES[self.props.tag].color),
+						})
+						else nil,
+					Name = e("TextLabel", {
+						Text = self.props.name,
+						Font = Enum.Font.GothamBold,
+						TextSize = 16,
+						TextColor3 = if self.props.tag and TAG_TYPES[self.props.tag]
+							then getThemeColorFromPath(theme, TAG_TYPES[self.props.tag].color)
+							else settingsTheme.Setting.NameColor,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextTransparency = self.props.transparency,
+						RichText = true,
+
+						Size = UDim2.new(1, 0, 0, 16),
+
+						LayoutOrder = 2,
+						BackgroundTransparency = 1,
+					}),
 				}),
 
 				Description = e("TextLabel", {
-					Text = (if self.props.experimental then '<font color="#FF8E3C">[Experimental] </font>' else "")
+					Text = self.props.description,
-						.. self.props.description,
 					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
 					TextSize = 14,
-					TextColor3 = theme.Setting.DescriptionColor,
+					TextColor3 = settingsTheme.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 					TextWrapped = true,
@@ -152,11 +196,9 @@ function Setting:render()
 						containerSize = self.containerSize,
 						inputSize = self.inputSize,
 					}):map(function(values)
-						local desc = (if self.props.experimental then "[Experimental] " else "")
-							.. self.props.description
 						local offset = values.inputSize.X + 5
 						local textBounds = getTextBounds(
-							desc,
+							self.props.description,
 							14,
 							Enum.Font.Gotham,
 							1.2,
@@ -165,7 +207,7 @@ function Setting:render()
 						return UDim2.new(1, -offset, 0, textBounds.Y)
 					end),
 
-					LayoutOrder = 2,
+					LayoutOrder = 3,
 					BackgroundTransparency = 1,
 				}),
 
@@ -173,21 +215,16 @@ function Setting:render()
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 					FillDirection = Enum.FillDirection.Vertical,
 					SortOrder = Enum.SortOrder.LayoutOrder,
-					Padding = UDim.new(0, 6),
+					Padding = UDim.new(0, 5),
 
 					[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,
+				BackgroundColor3 = settingsTheme.DividerColor,
 				BackgroundTransparency = self.props.transparency,
 				Size = UDim2.new(1, 0, 0, 1),
 				BorderSizePixel = 0,

plugin/src/App/StatusPages/Settings/init.lua

@@ -75,142 +75,188 @@ function SettingsPage:init()
 end
 
 function SettingsPage:render()
+	local layoutOrder = 0
+	local function layoutIncrement()
+		layoutOrder += 1
+		return layoutOrder
+	end
+
 	return Theme.with(function(theme)
 		theme = theme.Settings
 
-		return e(ScrollingFrame, {
+		return Roact.createFragment({
-			size = UDim2.new(1, 0, 1, 0),
-			contentSize = self.contentSize,
-			transparency = self.props.transparency,
-		}, {
 			Navbar = e(Navbar, {
 				onBack = self.props.onBack,
 				transparency = self.props.transparency,
-				layoutOrder = 0,
+				layoutOrder = layoutIncrement(),
 			}),
-
+			Content = e(ScrollingFrame, {
-			ShowNotifications = e(Setting, {
+				size = UDim2.new(1, 0, 1, -47),
-				id = "showNotifications",
+				position = UDim2.new(0, 0, 0, 47),
-				name = "Show Notifications",
+				contentSize = self.contentSize,
-				description = "Popup notifications in viewport",
 				transparency = self.props.transparency,
-				layoutOrder = 1,
+			}, {
-			}),
+				ShowNotifications = e(Setting, {
-
+					id = "showNotifications",
-			SyncReminder = e(Setting, {
+					name = "Show Notifications",
-				id = "syncReminder",
+					description = "Popup notifications in viewport",
-				name = "Sync Reminder",
-				description = "Notify to sync when opening a place that has previously been synced",
-				transparency = self.props.transparency,
-				visible = Settings:getBinding("showNotifications"),
-				layoutOrder = 2,
-			}),
-
-			ConfirmationBehavior = e(Setting, {
-				id = "confirmationBehavior",
-				name = "Confirmation Behavior",
-				description = "When to prompt for confirmation before syncing",
-				transparency = self.props.transparency,
-				layoutOrder = 3,
-
-				options = confirmationBehaviors,
-			}),
-
-			LargeChangesConfirmationThreshold = e(Setting, {
-				id = "largeChangesConfirmationThreshold",
-				name = "Confirmation Threshold",
-				description = "How many modified instances to be considered a large change",
-				transparency = self.props.transparency,
-				layoutOrder = 4,
-				visible = Settings:getBinding("confirmationBehavior"):map(function(value)
-					return value == "Large Changes"
-				end),
-				input = e(TextInput, {
-					size = UDim2.new(0, 40, 0, 28),
-					text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
-						return tostring(value)
-					end),
 					transparency = self.props.transparency,
-					enabled = true,
+					layoutOrder = layoutIncrement(),
-					onEntered = function(text)
+				}),
-						local number = tonumber(string.match(text, "%d+"))
+
-						if number then
+				SyncReminder = e(Setting, {
-							Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
+					id = "syncReminder",
-						else
+					name = "Sync Reminder",
-							-- Force text back to last valid value
+					description = "Notify to sync when opening a place that has previously been synced",
-							Settings:set(
+					transparency = self.props.transparency,
-								"largeChangesConfirmationThreshold",
+					visible = Settings:getBinding("showNotifications"),
-								Settings:get("largeChangesConfirmationThreshold")
+					layoutOrder = layoutIncrement(),
-							)
+				}),
-						end
+
+				ConfirmationBehavior = e(Setting, {
+					id = "confirmationBehavior",
+					name = "Confirmation Behavior",
+					description = "When to prompt for confirmation before syncing",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+
+					options = confirmationBehaviors,
+				}),
+
+				LargeChangesConfirmationThreshold = e(Setting, {
+					id = "largeChangesConfirmationThreshold",
+					name = "Confirmation Threshold",
+					description = "How many modified instances to be considered a large change",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+					visible = Settings:getBinding("confirmationBehavior"):map(function(value)
+						return value == "Large Changes"
+					end),
+					input = e(TextInput, {
+						size = UDim2.new(0, 40, 0, 28),
+						text = Settings:getBinding("largeChangesConfirmationThreshold"):map(function(value)
+							return tostring(value)
+						end),
+						transparency = self.props.transparency,
+						enabled = true,
+						onEntered = function(text)
+							local number = tonumber(string.match(text, "%d+"))
+							if number then
+								Settings:set("largeChangesConfirmationThreshold", math.clamp(number, 1, 999))
+							else
+								-- Force text back to last valid value
+								Settings:set(
+									"largeChangesConfirmationThreshold",
+									Settings:get("largeChangesConfirmationThreshold")
+								)
+							end
+						end,
+					}),
+				}),
+
+				PlaySounds = e(Setting, {
+					id = "playSounds",
+					name = "Play Sounds",
+					description = "Toggle sound effects",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				CheckForUpdates = e(Setting, {
+					id = "checkForUpdates",
+					name = "Check For Updates",
+					description = "Notify about newer compatible Rojo releases",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				CheckForPreleases = e(Setting, {
+					id = "checkForPrereleases",
+					name = "Include Prerelease Updates",
+					description = "Include prereleases when checking for updates",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+					visible = if string.find(debug.traceback(), "\n[^\n]-user_.-$") == nil
+						then false -- Must be a local install to allow prerelease checks
+						else Settings:getBinding("checkForUpdates"),
+				}),
+
+				AutoConnectPlaytestServer = e(Setting, {
+					id = "autoConnectPlaytestServer",
+					name = "Auto Connect Playtest Server",
+					description = "Automatically connect game server to Rojo when playtesting while connected in Edit",
+					tag = "unstable",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				OpenScriptsExternally = e(Setting, {
+					id = "openScriptsExternally",
+					name = "Open Scripts Externally",
+					description = "Attempt to open scripts in an external editor",
+					tag = "unstable",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				TwoWaySync = e(Setting, {
+					id = "twoWaySync",
+					name = "Two-Way Sync",
+					description = "Editing files in Studio will sync them into the filesystem",
+					locked = self.props.syncActive,
+					tag = "unstable",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+				}),
+
+				LogLevel = e(Setting, {
+					id = "logLevel",
+					name = "Log Level",
+					description = "Plugin output verbosity level",
+					tag = "debug",
+					transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
+
+					options = invertedLevels,
+					showReset = Settings:getBinding("logLevel"):map(function(value)
+						return value ~= "Info"
+					end),
+					onReset = function()
+						Settings:set("logLevel", "Info")
 					end,
 				}),
-			}),
 
-			PlaySounds = e(Setting, {
+				TypecheckingEnabled = e(Setting, {
-				id = "playSounds",
+					id = "typecheckingEnabled",
-				name = "Play Sounds",
+					name = "Typechecking",
-				description = "Toggle sound effects",
+					description = "Toggle typechecking on the API surface",
-				transparency = self.props.transparency,
+					tag = "debug",
-				layoutOrder = 5,
+					transparency = self.props.transparency,
-			}),
+					layoutOrder = layoutIncrement(),
+				}),
 
-			OpenScriptsExternally = e(Setting, {
+				TimingLogsEnabled = e(Setting, {
-				id = "openScriptsExternally",
+					id = "timingLogsEnabled",
-				name = "Open Scripts Externally",
+					name = "Timing Logs",
-				description = "Attempt to open scripts in an external editor",
+					description = "Toggle logging timing of internal actions for benchmarking Rojo performance",
-				locked = self.props.syncActive,
+					tag = "debug",
-				experimental = true,
+					transparency = self.props.transparency,
-				transparency = self.props.transparency,
+					layoutOrder = layoutIncrement(),
-				layoutOrder = 6,
+				}),
-			}),
 
-			TwoWaySync = e(Setting, {
+				Layout = e("UIListLayout", {
-				id = "twoWaySync",
+					FillDirection = Enum.FillDirection.Vertical,
-				name = "Two-Way Sync",
+					SortOrder = Enum.SortOrder.LayoutOrder,
-				description = "Editing files in Studio will sync them into the filesystem",
-				locked = self.props.syncActive,
-				experimental = true,
-				transparency = self.props.transparency,
-				layoutOrder = 7,
-			}),
 
-			LogLevel = e(Setting, {
+					[Roact.Change.AbsoluteContentSize] = function(object)
-				id = "logLevel",
+						self.setContentSize(object.AbsoluteContentSize)
-				name = "Log Level",
+					end,
-				description = "Plugin output verbosity level",
+				}),
-				transparency = self.props.transparency,
-				layoutOrder = 100,
 
-				options = invertedLevels,
+				Padding = e("UIPadding", {
-				showReset = Settings:getBinding("logLevel"):map(function(value)
+					PaddingLeft = UDim.new(0, 20),
-					return value ~= "Info"
+					PaddingRight = UDim.new(0, 20),
-				end),
+				}),
-				onReset = function()
-					Settings:set("logLevel", "Info")
-				end,
-			}),
-
-			TypecheckingEnabled = e(Setting, {
-				id = "typecheckingEnabled",
-				name = "Typechecking",
-				description = "Toggle typechecking on the API surface",
-				transparency = self.props.transparency,
-				layoutOrder = 101,
-			}),
-
-			Layout = e("UIListLayout", {
-				FillDirection = Enum.FillDirection.Vertical,
-				SortOrder = Enum.SortOrder.LayoutOrder,
-
-				[Roact.Change.AbsoluteContentSize] = function(object)
-					self.setContentSize(object.AbsoluteContentSize)
-				end,
-			}),
-
-			Padding = e("UIPadding", {
-				PaddingLeft = UDim.new(0, 20),
-				PaddingRight = UDim.new(0, 20),
 			}),
 		})
 	end)

plugin/src/App/Theme.lua

@@ -24,227 +24,7 @@ local strict = require(script.Parent.Parent.strict)
 
 local BRAND_COLOR = Color3.fromHex("E13835")
 
-local lightTheme = strict("LightTheme", {
+local Context = Roact.createContext({})
-	BackgroundColor = Color3.fromHex("FFFFFF"),
-	Button = {
-		Solid = {
-			ActionFillColor = Color3.fromHex("FFFFFF"),
-			ActionFillTransparency = 0.8,
-			Enabled = {
-				TextColor = Color3.fromHex("FFFFFF"),
-				BackgroundColor = BRAND_COLOR,
-			},
-			Disabled = {
-				TextColor = Color3.fromHex("FFFFFF"),
-				BackgroundColor = BRAND_COLOR,
-			},
-		},
-		Bordered = {
-			ActionFillColor = Color3.fromHex("000000"),
-			ActionFillTransparency = 0.9,
-			Enabled = {
-				TextColor = Color3.fromHex("393939"),
-				BorderColor = Color3.fromHex("ACACAC"),
-			},
-			Disabled = {
-				TextColor = Color3.fromHex("393939"),
-				BorderColor = Color3.fromHex("ACACAC"),
-			},
-		},
-	},
-	Checkbox = {
-		Active = {
-			IconColor = Color3.fromHex("FFFFFF"),
-			BackgroundColor = BRAND_COLOR,
-		},
-		Inactive = {
-			IconColor = Color3.fromHex("EEEEEE"),
-			BorderColor = Color3.fromHex("AFAFAF"),
-		},
-	},
-	Dropdown = {
-		TextColor = Color3.fromHex("000000"),
-		BorderColor = Color3.fromHex("AFAFAF"),
-		BackgroundColor = Color3.fromHex("EEEEEE"),
-		Open = {
-			IconColor = BRAND_COLOR,
-		},
-		Closed = {
-			IconColor = Color3.fromHex("EEEEEE"),
-		},
-	},
-	TextInput = {
-		Enabled = {
-			TextColor = Color3.fromHex("000000"),
-			PlaceholderColor = Color3.fromHex("8C8C8C"),
-			BorderColor = Color3.fromHex("ACACAC"),
-		},
-		Disabled = {
-			TextColor = Color3.fromHex("393939"),
-			PlaceholderColor = Color3.fromHex("8C8C8C"),
-			BorderColor = Color3.fromHex("AFAFAF"),
-		},
-		ActionFillColor = Color3.fromHex("000000"),
-		ActionFillTransparency = 0.9,
-	},
-	AddressEntry = {
-		TextColor = Color3.fromHex("000000"),
-		PlaceholderColor = Color3.fromHex("8C8C8C"),
-	},
-	BorderedContainer = {
-		BorderColor = Color3.fromHex("CBCBCB"),
-		BackgroundColor = Color3.fromHex("EEEEEE"),
-	},
-	Spinner = {
-		ForegroundColor = BRAND_COLOR,
-		BackgroundColor = Color3.fromHex("EEEEEE"),
-	},
-	Diff = {
-		Add = Color3.fromHex("baffbd"),
-		Remove = Color3.fromHex("ffbdba"),
-		Edit = Color3.fromHex("bacdff"),
-		Row = Color3.fromHex("000000"),
-		Warning = Color3.fromHex("FF8E3C"),
-	},
-	ConnectionDetails = {
-		ProjectNameColor = Color3.fromHex("000000"),
-		AddressColor = Color3.fromHex("000000"),
-		DisconnectColor = BRAND_COLOR,
-	},
-	Settings = {
-		DividerColor = Color3.fromHex("CBCBCB"),
-		Navbar = {
-			BackButtonColor = Color3.fromHex("000000"),
-			TextColor = Color3.fromHex("000000"),
-		},
-		Setting = {
-			NameColor = Color3.fromHex("000000"),
-			DescriptionColor = Color3.fromHex("5F5F5F"),
-		},
-	},
-	Header = {
-		LogoColor = BRAND_COLOR,
-		VersionColor = Color3.fromHex("727272"),
-	},
-	Notification = {
-		InfoColor = Color3.fromHex("000000"),
-		CloseColor = BRAND_COLOR,
-	},
-	ErrorColor = Color3.fromHex("000000"),
-	ScrollBarColor = Color3.fromHex("000000"),
-})
-
-local darkTheme = strict("DarkTheme", {
-	BackgroundColor = Color3.fromHex("2E2E2E"),
-	Button = {
-		Solid = {
-			ActionFillColor = Color3.fromHex("FFFFFF"),
-			ActionFillTransparency = 0.8,
-			Enabled = {
-				TextColor = Color3.fromHex("FFFFFF"),
-				BackgroundColor = BRAND_COLOR,
-			},
-			Disabled = {
-				TextColor = Color3.fromHex("FFFFFF"),
-				BackgroundColor = BRAND_COLOR,
-			},
-		},
-		Bordered = {
-			ActionFillColor = Color3.fromHex("FFFFFF"),
-			ActionFillTransparency = 0.9,
-			Enabled = {
-				TextColor = Color3.fromHex("DBDBDB"),
-				BorderColor = Color3.fromHex("535353"),
-			},
-			Disabled = {
-				TextColor = Color3.fromHex("DBDBDB"),
-				BorderColor = Color3.fromHex("535353"),
-			},
-		},
-	},
-	Checkbox = {
-		Active = {
-			IconColor = Color3.fromHex("FFFFFF"),
-			BackgroundColor = BRAND_COLOR,
-		},
-		Inactive = {
-			IconColor = Color3.fromHex("484848"),
-			BorderColor = Color3.fromHex("5A5A5A"),
-		},
-	},
-	Dropdown = {
-		TextColor = Color3.fromHex("FFFFFF"),
-		BorderColor = Color3.fromHex("5A5A5A"),
-		BackgroundColor = Color3.fromHex("2B2B2B"),
-		Open = {
-			IconColor = BRAND_COLOR,
-		},
-		Closed = {
-			IconColor = Color3.fromHex("484848"),
-		},
-	},
-	TextInput = {
-		Enabled = {
-			TextColor = Color3.fromHex("FFFFFF"),
-			PlaceholderColor = Color3.fromHex("8B8B8B"),
-			BorderColor = Color3.fromHex("535353"),
-		},
-		Disabled = {
-			TextColor = Color3.fromHex("484848"),
-			PlaceholderColor = Color3.fromHex("8B8B8B"),
-			BorderColor = Color3.fromHex("5A5A5A"),
-		},
-		ActionFillColor = Color3.fromHex("FFFFFF"),
-		ActionFillTransparency = 0.9,
-	},
-	AddressEntry = {
-		TextColor = Color3.fromHex("FFFFFF"),
-		PlaceholderColor = Color3.fromHex("8B8B8B"),
-	},
-	BorderedContainer = {
-		BorderColor = Color3.fromHex("535353"),
-		BackgroundColor = Color3.fromHex("2B2B2B"),
-	},
-	Spinner = {
-		ForegroundColor = BRAND_COLOR,
-		BackgroundColor = Color3.fromHex("2B2B2B"),
-	},
-	Diff = {
-		Add = Color3.fromHex("273732"),
-		Remove = Color3.fromHex("3F2D32"),
-		Edit = Color3.fromHex("193345"),
-		Row = Color3.fromHex("FFFFFF"),
-		Warning = Color3.fromHex("FF8E3C"),
-	},
-	ConnectionDetails = {
-		ProjectNameColor = Color3.fromHex("FFFFFF"),
-		AddressColor = Color3.fromHex("FFFFFF"),
-		DisconnectColor = Color3.fromHex("FFFFFF"),
-	},
-	Settings = {
-		DividerColor = Color3.fromHex("535353"),
-		Navbar = {
-			BackButtonColor = Color3.fromHex("FFFFFF"),
-			TextColor = Color3.fromHex("FFFFFF"),
-		},
-		Setting = {
-			NameColor = Color3.fromHex("FFFFFF"),
-			DescriptionColor = Color3.fromHex("D3D3D3"),
-		},
-	},
-	Header = {
-		LogoColor = BRAND_COLOR,
-		VersionColor = Color3.fromHex("D3D3D3"),
-	},
-	Notification = {
-		InfoColor = Color3.fromHex("FFFFFF"),
-		CloseColor = Color3.fromHex("FFFFFF"),
-	},
-	ErrorColor = Color3.fromHex("FFFFFF"),
-	ScrollBarColor = Color3.fromHex("FFFFFF"),
-})
-
-local Context = Roact.createContext(lightTheme)
 
 local StudioProvider = Roact.Component:extend("StudioProvider")
 
@@ -252,21 +32,160 @@ local StudioProvider = Roact.Component:extend("StudioProvider")
 function StudioProvider:updateTheme()
 	local studioTheme = getStudio().Theme
 
-	if studioTheme.Name == "Light" then
+	local isDark = studioTheme.Name == "Dark"
-		self:setState({
-			theme = lightTheme,
-		})
-	elseif studioTheme.Name == "Dark" then
-		self:setState({
-			theme = darkTheme,
-		})
-	else
-		Log.warn("Unexpected theme '{}'' -- falling back to light theme!", studioTheme.Name)
 
-		self:setState({
+	local theme = strict(studioTheme.Name .. "Theme", {
-			theme = lightTheme,
+		BrandColor = BRAND_COLOR,
-		})
+		BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground),
-	end
+		TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
+		SubTextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
+		Button = {
+			Solid = {
+				-- Solid uses brand theming, not Studio theming.
+				ActionFillColor = Color3.fromHex("FFFFFF"),
+				ActionFillTransparency = 0.8,
+				Enabled = {
+					TextColor = Color3.fromHex("FFFFFF"),
+					BackgroundColor = BRAND_COLOR,
+				},
+				Disabled = {
+					TextColor = Color3.fromHex("FFFFFF"),
+					BackgroundColor = BRAND_COLOR,
+				},
+			},
+			Bordered = {
+				ActionFillColor = studioTheme:GetColor(
+					Enum.StudioStyleGuideColor.ButtonText,
+					Enum.StudioStyleGuideModifier.Selected
+				),
+				ActionFillTransparency = 0.9,
+				Enabled = {
+					TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.ButtonText),
+					BorderColor = studioTheme:GetColor(
+						Enum.StudioStyleGuideColor.CheckedFieldBorder,
+						Enum.StudioStyleGuideModifier.Disabled
+					),
+				},
+				Disabled = {
+					TextColor = studioTheme:GetColor(
+						Enum.StudioStyleGuideColor.ButtonText,
+						Enum.StudioStyleGuideModifier.Disabled
+					),
+					BorderColor = studioTheme:GetColor(
+						Enum.StudioStyleGuideColor.CheckedFieldBorder,
+						Enum.StudioStyleGuideModifier.Disabled
+					),
+				},
+			},
+		},
+		Checkbox = {
+			Active = {
+				-- Active checkboxes use brand theming, not Studio theming.
+				IconColor = Color3.fromHex("FFFFFF"),
+				BackgroundColor = BRAND_COLOR,
+			},
+			Inactive = {
+				IconColor = studioTheme:GetColor(
+					Enum.StudioStyleGuideColor.CheckedFieldIndicator,
+					Enum.StudioStyleGuideModifier.Disabled
+				),
+				BorderColor = studioTheme:GetColor(
+					Enum.StudioStyleGuideColor.CheckedFieldBorder,
+					Enum.StudioStyleGuideModifier.Disabled
+				),
+			},
+		},
+		Dropdown = {
+			TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.ButtonText),
+			BorderColor = studioTheme:GetColor(
+				Enum.StudioStyleGuideColor.CheckedFieldBorder,
+				Enum.StudioStyleGuideModifier.Disabled
+			),
+			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainBackground),
+			IconColor = studioTheme:GetColor(
+				Enum.StudioStyleGuideColor.CheckedFieldIndicator,
+				Enum.StudioStyleGuideModifier.Disabled
+			),
+		},
+		TextInput = {
+			Enabled = {
+				TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+				PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
+				BorderColor = studioTheme:GetColor(
+					Enum.StudioStyleGuideColor.CheckedFieldBorder,
+					Enum.StudioStyleGuideModifier.Disabled
+				),
+			},
+			Disabled = {
+				TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
+				PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
+				BorderColor = studioTheme:GetColor(
+					Enum.StudioStyleGuideColor.CheckedFieldBorder,
+					Enum.StudioStyleGuideModifier.Disabled
+				),
+			},
+			ActionFillColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			ActionFillTransparency = 0.9,
+		},
+		AddressEntry = {
+			TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			PlaceholderColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.SubText),
+		},
+		BorderedContainer = {
+			BorderColor = studioTheme:GetColor(
+				Enum.StudioStyleGuideColor.CheckedFieldBorder,
+				Enum.StudioStyleGuideModifier.Disabled
+			),
+			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground),
+		},
+		Spinner = {
+			ForegroundColor = BRAND_COLOR,
+			BackgroundColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InputFieldBackground),
+		},
+		Diff = {
+			-- Studio doesn't have good colors since their diffs use backgrounds, not text
+			Add = if isDark then Color3.fromRGB(143, 227, 154) else Color3.fromRGB(41, 164, 45),
+			Remove = if isDark then Color3.fromRGB(242, 125, 125) else Color3.fromRGB(150, 29, 29),
+			Edit = if isDark then Color3.fromRGB(120, 154, 248) else Color3.fromRGB(0, 70, 160),
+			Row = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			Warning = studioTheme:GetColor(Enum.StudioStyleGuideColor.WarningText),
+		},
+		ConnectionDetails = {
+			ProjectNameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			AddressColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			DisconnectColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+		},
+		Settings = {
+			DividerColor = studioTheme:GetColor(
+				Enum.StudioStyleGuideColor.CheckedFieldBorder,
+				Enum.StudioStyleGuideModifier.Disabled
+			),
+			Navbar = {
+				BackButtonColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+				TextColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			},
+			Setting = {
+				NameColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+				DescriptionColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
+				UnstableColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.WarningText),
+				DebugColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.InfoText),
+			},
+		},
+		Header = {
+			LogoColor = BRAND_COLOR,
+			VersionColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.MainText),
+		},
+		Notification = {
+			InfoColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+			CloseColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+		},
+		ErrorColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+		ScrollBarColor = studioTheme:GetColor(Enum.StudioStyleGuideColor.BrightText),
+	})
+
+	self:setState({
+		theme = theme,
+	})
 end
 
 function StudioProvider:init()

plugin/src/App/init.lua

@@ -23,6 +23,7 @@ local PatchTree = require(Plugin.PatchTree)
 local preloadAssets = require(Plugin.preloadAssets)
 local soundPlayer = require(Plugin.soundPlayer)
 local ignorePlaceIds = require(Plugin.ignorePlaceIds)
+local timeUtil = require(Plugin.timeUtil)
 local Theme = require(script.Theme)
 
 local Page = require(script.Page)
@@ -118,6 +119,13 @@ function App:init()
 		end)
 	end)
 
+	self.disconnectUpdatesCheckChanged = Settings:onChanged("checkForUpdates", function()
+		self:checkForUpdates()
+	end)
+	self.disconnectPrereleasesCheckChanged = Settings:onChanged("checkForPrereleases", function()
+		self:checkForUpdates()
+	end)
+
 	self:setState({
 		appStatus = AppStatus.NotConnected,
 		guiEnabled = false,
@@ -131,38 +139,63 @@ function App:init()
 		toolbarIcon = Assets.Images.PluginButton,
 	})
 
-	if
+	if RunService:IsEdit() then
-		RunService:IsEdit()
+		self:checkForUpdates()
-		and self.serveSession == nil
+
-		and Settings:get("syncReminder")
+		if
-		and self:getLastSyncTimestamp()
+			Settings:get("syncReminder")
-		and (self:isSyncLockAvailable())
+			and self.serveSession == nil
-	then
+			and self:getLastSyncTimestamp()
-		self:addNotification("You've previously synced this place. Would you like to reconnect?", 300, {
+			and (self:isSyncLockAvailable())
-			Connect = {
+		then
-				text = "Connect",
+			self:addNotification("You've previously synced this place. Would you like to reconnect?", 300, {
-				style = "Solid",
+				Connect = {
-				layoutOrder = 1,
+					text = "Connect",
-				onClick = function(notification)
+					style = "Solid",
-					notification:dismiss()
+					layoutOrder = 1,
-					self:startSession()
+					onClick = function(notification)
-				end,
+						notification:dismiss()
-			},
+						self:startSession()
-			Dismiss = {
+					end,
-				text = "Dismiss",
+				},
-				style = "Bordered",
+				Dismiss = {
-				layoutOrder = 2,
+					text = "Dismiss",
-				onClick = function(notification)
+					style = "Bordered",
-					notification:dismiss()
+					layoutOrder = 2,
-				end,
+					onClick = function(notification)
-			},
+						notification:dismiss()
-		})
+					end,
+				},
+			})
+		end
 	end
+
+	if self:isAutoConnectPlaytestServerAvailable() then
+		self:useRunningConnectionInfo()
+		self:startSession()
+	end
+	self.autoConnectPlaytestServerListener = Settings:onChanged("autoConnectPlaytestServer", function(enabled)
+		if enabled then
+			if self:isAutoConnectPlaytestServerWriteable() and self.serveSession ~= nil then
+				-- Write the existing session
+				local baseUrl = self.serveSession.__apiContext.__baseUrl
+				self:setRunningConnectionInfo(baseUrl)
+			end
+		else
+			self:clearRunningConnectionInfo()
+		end
+	end)
 end
 
 function App:willUnmount()
 	self.waypointConnection:Disconnect()
 	self.confirmationBindable:Destroy()
+
+	self.disconnectUpdatesCheckChanged()
+	self.disconnectPrereleasesCheckChanged()
+
+	self.autoConnectPlaytestServerListener()
+	self:clearRunningConnectionInfo()
 end
 
 function App:addNotification(
@@ -207,6 +240,40 @@ function App:closeNotification(id: number)
 	})
 end
 
+function App:checkForUpdates()
+	if not Settings:get("checkForUpdates") then
+		return
+	end
+
+	local isLocalInstall = string.find(debug.traceback(), "\n[^\n]-user_.-$") ~= nil
+	local latestCompatibleVersion = Version.retrieveLatestCompatible({
+		version = Config.version,
+		includePrereleases = isLocalInstall and Settings:get("checkForPrereleases"),
+	})
+	if not latestCompatibleVersion then
+		return
+	end
+
+	self:addNotification(
+		string.format(
+			"A newer compatible version of Rojo, %s, was published %s! Go to the Rojo releases page to learn more.",
+			Version.display(latestCompatibleVersion.version),
+			timeUtil.elapsedToText(DateTime.now().UnixTimestamp - latestCompatibleVersion.publishedUnixTimestamp)
+		),
+		500,
+		{
+			Dismiss = {
+				text = "Dismiss",
+				style = "Bordered",
+				layoutOrder = 2,
+				onClick = function(notification)
+					notification:dismiss()
+				end,
+			},
+		}
+	)
+end
+
 function App:getPriorEndpoint()
 	local priorEndpoints = Settings:get("priorEndpoints")
 	if not priorEndpoints then
@@ -278,10 +345,7 @@ function App:getHostAndPort()
 	local host = self.host:getValue()
 	local port = self.port:getValue()
 
-	local host = if #host > 0 then host else Config.defaultHost
+	return if #host > 0 then host else Config.defaultHost, if #port > 0 then port else Config.defaultPort
-	local port = if #port > 0 then port else Config.defaultPort
-
-	return host, port
 end
 
 function App:isSyncLockAvailable()
@@ -349,6 +413,49 @@ function App:releaseSyncLock()
 	Log.trace("Could not relase sync lock because it is owned by {}", lock.Value)
 end
 
+function App:isAutoConnectPlaytestServerAvailable()
+	return RunService:IsRunMode()
+		and RunService:IsServer()
+		and Settings:get("autoConnectPlaytestServer")
+		and workspace:GetAttribute("__Rojo_ConnectionUrl")
+end
+
+function App:isAutoConnectPlaytestServerWriteable()
+	return RunService:IsEdit() and Settings:get("autoConnectPlaytestServer")
+end
+
+function App:setRunningConnectionInfo(baseUrl: string)
+	if not self:isAutoConnectPlaytestServerWriteable() then
+		return
+	end
+
+	Log.trace("Setting connection info for play solo auto-connect")
+	workspace:SetAttribute("__Rojo_ConnectionUrl", baseUrl)
+end
+
+function App:clearRunningConnectionInfo()
+	if not RunService:IsEdit() then
+		-- Only write connection info from edit mode
+		return
+	end
+
+	Log.trace("Clearing connection info for play solo auto-connect")
+	workspace:SetAttribute("__Rojo_ConnectionUrl", nil)
+end
+
+function App:useRunningConnectionInfo()
+	local connectionInfo = workspace:GetAttribute("__Rojo_ConnectionUrl")
+	if not connectionInfo then
+		return
+	end
+
+	Log.trace("Using connection info for play solo auto-connect")
+	local host, port = string.match(connectionInfo, "^(.+):(.-)$")
+
+	self.setHost(host)
+	self.setPort(port)
+end
+
 function App:startSession()
 	local claimedLock, priorOwner = self:claimSyncLock()
 	if not claimedLock then
@@ -367,11 +474,6 @@ function App:startSession()
 
 	local host, port = self:getHostAndPort()
 
-	local sessionOptions = {
-		openScriptsExternally = Settings:get("openScriptsExternally"),
-		twoWaySync = Settings:get("twoWaySync"),
-	}
-
 	local baseUrl = if string.find(host, "^https?://")
 		then string.format("%s:%s", host, port)
 		else string.format("http://%s:%s", host, port)
@@ -379,8 +481,7 @@ function App:startSession()
 
 	local serveSession = ServeSession.new({
 		apiContext = apiContext,
-		openScriptsExternally = sessionOptions.openScriptsExternally,
+		twoWaySync = Settings:get("twoWaySync"),
-		twoWaySync = sessionOptions.twoWaySync,
 	})
 
 	self.cleanupPrecommit = serveSession.__reconciler:hookPrecommit(function(patch, instanceMap)
@@ -399,7 +500,7 @@ function App:startSession()
 	end)
 
 	serveSession:hookPostcommit(function(patch, _instanceMap, unapplied)
-		local now = os.time()
+		local now = DateTime.now().UnixTimestamp
 		local old = self.state.patchData
 
 		if PatchSet.isEmpty(patch) then
@@ -441,6 +542,7 @@ function App:startSession()
 			self:addNotification("Connecting to session...")
 		elseif status == ServeSession.Status.Connected then
 			self.knownProjects[details] = true
+			self:setRunningConnectionInfo(baseUrl)
 
 			local address = ("%s:%s"):format(host, port)
 			self:setState({
@@ -453,6 +555,7 @@ function App:startSession()
 		elseif status == ServeSession.Status.Disconnected then
 			self.serveSession = nil
 			self:releaseSyncLock()
+			self:clearRunningConnectionInfo()
 			self:setState({
 				patchData = {
 					patch = PatchSet.newEmpty(),
@@ -488,6 +591,12 @@ function App:startSession()
 			return "Accept"
 		end
 
+		-- Play solo auto-connect does not require confirmation
+		if self:isAutoConnectPlaytestServerAvailable() then
+			Log.trace("Accepting patch without confirmation because play solo auto-connect is enabled")
+			return "Accept"
+		end
+
 		local confirmationBehavior = Settings:get("confirmationBehavior")
 		if confirmationBehavior == "Initial" then
 			-- Only confirm if we haven't synced this project yet this session
@@ -606,7 +715,7 @@ function App:render()
 		value = self.props.plugin,
 	}, {
 		e(Theme.StudioProvider, nil, {
-			e(Tooltip.Provider, nil, {
+			tooltip = e(Tooltip.Provider, nil, {
 				gui = e(StudioPluginGui, {
 					id = pluginName,
 					title = pluginName,

plugin/src/Assets.lua

@@ -25,6 +25,12 @@ local Assets = {
 			Back = "rbxassetid://6017213752",
 			Reset = "rbxassetid://10142422327",
 			Expand = "rbxassetid://12045401097",
+			Warning = "rbxassetid://16571019891",
+			Debug = "rbxassetid://16588411361",
+			Checkmark = "rbxassetid://16571012729",
+			Exclamation = "rbxassetid://16571172190",
+			SyncSuccess = "rbxassetid://16565035221",
+			SyncWarning = "rbxassetid://16565325171",
 		},
 		Diff = {
 			Add = "rbxassetid://10434145835",

plugin/src/InstanceMap.lua

@@ -112,9 +112,12 @@ end
 
 function InstanceMap:destroyInstance(instance)
 	local id = self.fromInstances[instance]
-
 	local descendants = instance:GetDescendants()
-	instance:Destroy()
+
+	-- Because the user might want to Undo this change, we cannot use Destroy
+	-- since that locks that parent and prevents ChangeHistoryService from
+	-- ever bringing it back. Instead, we parent to nil.
+	instance.Parent = nil
 
 	-- After the instance is successfully destroyed,
 	-- we can remove all the id mappings

plugin/src/PatchSet.lua

@@ -211,9 +211,11 @@ end
 function PatchSet.countChanges(patch)
 	local count = 0
 
-	for _ in patch.added do
+	for _, add in patch.added do
-		-- Adding an instance is 1 change
+		-- Adding an instance is 1 change per property
-		count += 1
+		for _ in add.Properties do
+			count += 1
+		end
 	end
 	for _ in patch.removed do
 		-- Removing an instance is 1 change

plugin/src/PatchTree.lua

@@ -11,6 +11,7 @@ local Packages = Rojo.Packages
 
 local Log = require(Packages.Log)
 
+local Timer = require(Plugin.Timer)
 local Types = require(Plugin.Types)
 local decodeValue = require(Plugin.Reconciler.decodeValue)
 local getProperty = require(Plugin.Reconciler.getProperty)
@@ -78,6 +79,15 @@ function Tree.new()
 	return setmetatable(tree, Tree)
 end
 
+-- Iterates over all nodes and counts them up
+function Tree:getCount()
+	local count = 0
+	self:forEach(function()
+		count += 1
+	end)
+	return count
+end
+
 -- Iterates over all sub-nodes, depth first
 -- node is where to start from, defaults to root
 -- depth is used for recursion but can be used to set the starting depth
@@ -122,6 +132,7 @@ end
 -- props must contain id, and cannot contain children or parentId
 -- other than those three, it can hold anything
 function Tree:addNode(parent, props)
+	Timer.start("Tree:addNode")
 	assert(props.id, "props must contain id")
 
 	parent = parent or "ROOT"
@@ -132,6 +143,7 @@ function Tree:addNode(parent, props)
 		for k, v in props do
 			node[k] = v
 		end
+		Timer.stop()
 		return node
 	end
 
@@ -142,18 +154,21 @@ function Tree:addNode(parent, props)
 	local parentNode = self:getNode(parent)
 	if not parentNode then
 		Log.warn("Failed to create node since parent doesnt exist: {}, {}", parent, props)
+		Timer.stop()
 		return
 	end
 
 	parentNode.children[node.id] = node
 	self.idToNode[node.id] = node
 
+	Timer.stop()
 	return node
 end
 
 -- Given a list of ancestor ids in descending order, builds the nodes for them
 -- using the patch and instanceMap info
 function Tree:buildAncestryNodes(previousId: string?, ancestryIds: { string }, patch, instanceMap)
+	Timer.start("Tree:buildAncestryNodes")
 	-- Build nodes for ancestry by going up the tree
 	previousId = previousId or "ROOT"
 
@@ -171,6 +186,8 @@ function Tree:buildAncestryNodes(previousId: string?, ancestryIds: { string }, p
 		})
 		previousId = ancestorId
 	end
+
+	Timer.stop()
 end
 
 local PatchTree = {}
@@ -178,10 +195,12 @@ local PatchTree = {}
 -- Builds a new tree from a patch and instanceMap
 -- uses changeListHeaders in node.changeList
 function PatchTree.build(patch, instanceMap, changeListHeaders)
+	Timer.start("PatchTree.build")
 	local tree = Tree.new()
 
 	local knownAncestors = {}
 
+	Timer.start("patch.updated")
 	for _, change in patch.updated do
 		local instance = instanceMap.fromIds[change.id]
 		if not instance then
@@ -209,15 +228,14 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)
 		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
 
 		-- Gather detail text
-		local changeList, hint = nil, nil
+		local changeList, changeInfo = nil, nil
 		if next(change.changedProperties) or change.changedName then
 			changeList = {}
 
-			local hintBuffer, i = {}, 0
+			local changeIndex = 0
 			local function addProp(prop: string, current: any?, incoming: any?, metadata: any?)
-				i += 1
+				changeIndex += 1
-				hintBuffer[i] = prop
+				changeList[changeIndex] = { prop, current, incoming, metadata }
-				changeList[i] = { prop, current, incoming, metadata }
 			end
 
 			-- Gather the changes
@@ -237,19 +255,9 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)
 				)
 			end
 
-			-- Finalize detail values
+			changeInfo = {
-
+				edits = changeIndex,
-			-- Trim hint to top 3
+			}
-			table.sort(hintBuffer)
-			if #hintBuffer > 3 then
-				hintBuffer = {
-					hintBuffer[1],
-					hintBuffer[2],
-					hintBuffer[3],
-					i - 3 .. " more",
-				}
-			end
-			hint = table.concat(hintBuffer, ", ")
 
 			-- Sort changes and add header
 			table.sort(changeList, function(a, b)
@@ -265,11 +273,13 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)
 			className = instance.ClassName,
 			name = instance.Name,
 			instance = instance,
-			hint = hint,
+			changeInfo = changeInfo,
 			changeList = changeList,
 		})
 	end
+	Timer.stop()
 
+	Timer.start("patch.removed")
 	for _, idOrInstance in patch.removed do
 		local instance = if Types.RbxId(idOrInstance) then instanceMap.fromIds[idOrInstance] else idOrInstance
 		if not instance then
@@ -311,7 +321,9 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)
 			instance = instance,
 		})
 	end
+	Timer.stop()
 
+	Timer.start("patch.added")
 	for id, change in patch.added do
 		-- Gather ancestors from existing DOM or future additions
 		local ancestryIds = {}
@@ -346,36 +358,24 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)
 		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
 
 		-- Gather detail text
-		local changeList, hint = nil, nil
+		local changeList, changeInfo = nil, nil
 		if next(change.Properties) then
 			changeList = {}
 
-			local hintBuffer, i = {}, 0
+			local changeIndex = 0
+			local function addProp(prop: string, incoming: any)
+				changeIndex += 1
+				changeList[changeIndex] = { prop, "N/A", incoming }
+			end
+
 			for prop, incoming in change.Properties do
-				i += 1
-				hintBuffer[i] = prop
-
 				local success, incomingValue = decodeValue(incoming, instanceMap)
-				if success then
+				addProp(prop, if success then incomingValue else select(2, next(incoming)))
-					table.insert(changeList, { prop, "N/A", incomingValue })
-				else
-					table.insert(changeList, { prop, "N/A", select(2, next(incoming)) })
-				end
 			end
 
-			-- Finalize detail values
+			changeInfo = {
-
+				edits = changeIndex,
-			-- Trim hint to top 3
+			}
-			table.sort(hintBuffer)
-			if #hintBuffer > 3 then
-				hintBuffer = {
-					hintBuffer[1],
-					hintBuffer[2],
-					hintBuffer[3],
-					i - 3 .. " more",
-				}
-			end
-			hint = table.concat(hintBuffer, ", ")
 
 			-- Sort changes and add header
 			table.sort(changeList, function(a, b)
@@ -390,40 +390,32 @@ function PatchTree.build(patch, instanceMap, changeListHeaders)
 			patchType = "Add",
 			className = change.ClassName,
 			name = change.Name,
-			hint = hint,
+			changeInfo = changeInfo,
 			changeList = changeList,
 			instance = instanceMap.fromIds[id],
 		})
 	end
+	Timer.stop()
 
+	Timer.stop()
 	return tree
 end
 
--- Creates a deep copy of a tree for immutability purposes in Roact
-function PatchTree.clone(tree)
-	if not tree then
-		return
-	end
-
-	local newTree = Tree.new()
-	tree:forEach(function(node)
-		newTree:addNode(node.parentId, table.clone(node))
-	end)
-
-	return newTree
-end
-
 -- Updates the metadata of a tree with the unapplied patch and currently existing instances
 -- Builds a new tree from the data if one isn't provided
 -- Always returns a new tree for immutability purposes in Roact
 function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
+	Timer.start("PatchTree.updateMetadata")
 	if tree then
-		tree = PatchTree.clone(tree)
+		-- A shallow copy is enough for our purposes here since we really only need a new top-level object
+		-- for immutable comparison checks in Roact
+		tree = table.clone(tree)
 	else
 		tree = PatchTree.build(patch, instanceMap)
 	end
 
 	-- Update isWarning metadata
+	Timer.start("isWarning")
 	for _, failedChange in unappliedPatch.updated do
 		local node = tree:getNode(failedChange.id)
 		if not node then
@@ -436,6 +428,8 @@ function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
 		if not node.changeList then
 			continue
 		end
+
+		local warnings = 0
 		for _, change in node.changeList do
 			local property = change[1]
 			local propertyFailedToApply = if property == "Name"
@@ -446,6 +440,8 @@ function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
 				-- This change didn't fail, no need to mark
 				continue
 			end
+
+			warnings += 1
 			if change[4] == nil then
 				change[4] = { isWarning = true }
 			else
@@ -453,6 +449,11 @@ function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
 			end
 			Log.trace("  Marked property as warning: {}.{}", node.name, property)
 		end
+
+		node.changeInfo = {
+			edits = (node.changeInfo.edits or (#node.changeList - 1)) - warnings,
+			failed = if warnings > 0 then warnings else nil,
+		}
 	end
 	for failedAdditionId in unappliedPatch.added do
 		local node = tree:getNode(failedAdditionId)
@@ -466,6 +467,7 @@ function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
 		if not node.changeList then
 			continue
 		end
+
 		for _, change in node.changeList do
 			-- Failed addition means that all properties failed to be added
 			if change[4] == nil then
@@ -475,6 +477,10 @@ function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
 			end
 			Log.trace("  Marked property as warning: {}.{}", node.name, change[1])
 		end
+
+		node.changeInfo = {
+			failed = node.changeInfo.edits or (#node.changeList - 1),
+		}
 	end
 	for _, failedRemovalIdOrInstance in unappliedPatch.removed do
 		local failedRemovalId = if Types.RbxId(failedRemovalIdOrInstance)
@@ -492,8 +498,10 @@ function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
 		node.isWarning = true
 		Log.trace("Marked node as warning: {} {}", node.id, node.name)
 	end
+	Timer.stop()
 
 	-- Update if instances exist
+	Timer.start("instanceAncestry")
 	tree:forEach(function(node)
 		if node.instance then
 			if node.instance.Parent == nil and node.instance ~= game then
@@ -509,7 +517,9 @@ function PatchTree.updateMetadata(tree, patch, instanceMap, unappliedPatch)
 			end
 		end
 	end)
+	Timer.stop()
 
+	Timer.stop()
 	return tree
 end
 

plugin/src/Reconciler/applyPatch.lua

@@ -20,6 +20,11 @@ local setProperty = require(script.Parent.setProperty)
 
 local function applyPatch(instanceMap, patch)
 	local patchTimestamp = DateTime.now():FormatLocalTime("LTS", "en-us")
+	local historyRecording = ChangeHistoryService:TryBeginRecording("Rojo: Patch " .. patchTimestamp)
+	if not historyRecording then
+		-- There can only be one recording at a time
+		Log.debug("Failed to begin history recording for " .. patchTimestamp .. ". Another recording is in progress.")
+	end
 
 	-- Tracks any portions of the patch that could not be applied to the DOM.
 	local unappliedPatch = PatchSet.newEmpty()
@@ -62,6 +67,9 @@ local function applyPatch(instanceMap, patch)
 		if parentInstance == nil then
 			-- This would be peculiar. If you create an instance with no
 			-- parent, were you supposed to create it at all?
+			if historyRecording then
+				ChangeHistoryService:FinishRecording(historyRecording, Enum.FinishRecordingOperation.Commit)
+			end
 			invariant(
 				"Cannot add an instance from a patch that has no parent.\nInstance {} with parent {}.\nState: {:#?}",
 				id,
@@ -164,10 +172,14 @@ local function applyPatch(instanceMap, patch)
 			end
 
 			-- See you later, original instance.
-			--
+
+			-- Because the user might want to Undo this change, we cannot use Destroy
+			-- since that locks that parent and prevents ChangeHistoryService from
+			-- ever bringing it back. Instead, we parent to nil.
+
 			-- TODO: Can this fail? Some kinds of instance may not appreciate
-			-- being destroyed, like services.
+			-- being reparented, like services.
-			instance:Destroy()
+			instance.Parent = nil
 
 			-- This completes your rebuilding a plane mid-flight safety
 			-- instruction. Please sit back, relax, and enjoy your flight.
@@ -214,7 +226,9 @@ local function applyPatch(instanceMap, patch)
 		end
 	end
 
-	ChangeHistoryService:SetWaypoint("Rojo: Patch " .. patchTimestamp)
+	if historyRecording then
+		ChangeHistoryService:FinishRecording(historyRecording, Enum.FinishRecordingOperation.Commit)
+	end
 
 	return unappliedPatch
 end

plugin/src/Reconciler/applyPatch.spec.lua

@@ -4,25 +4,41 @@ return function()
 	local InstanceMap = require(script.Parent.Parent.InstanceMap)
 	local PatchSet = require(script.Parent.Parent.PatchSet)
 
-	local dummy = Instance.new("Folder")
+	local container = Instance.new("Folder")
-	local function wasDestroyed(instance)
+
+	local tempContainer = Instance.new("Folder")
+	local function wasRemoved(instance)
 		-- If an instance was destroyed, its parent property is locked.
-		local ok = pcall(function()
+		-- If an instance was removed, its parent property is nil.
+		-- We need to ensure we only remove, so that ChangeHistoryService can still Undo.
+
+		local isParentUnlocked = pcall(function()
 			local oldParent = instance.Parent
-			instance.Parent = dummy
+			instance.Parent = tempContainer
 			instance.Parent = oldParent
 		end)
 
-		return not ok
+		return instance.Parent == nil and isParentUnlocked
 	end
 
+	beforeEach(function()
+		container:ClearAllChildren()
+	end)
+
+	afterAll(function()
+		container:Destroy()
+		tempContainer:Destroy()
+	end)
+
 	it("should return an empty patch if given an empty patch", function()
 		local patch = applyPatch(InstanceMap.new(), PatchSet.newEmpty())
 		assert(PatchSet.isEmpty(patch), "expected remaining patch to be empty")
 	end)
 
-	it("should destroy instances listed for remove", function()
+	it("should remove instances listed for remove", function()
 		local root = Instance.new("Folder")
+		root.Name = "ROOT"
+		root.Parent = container
 
 		local child = Instance.new("Folder")
 		child.Name = "Child"
@@ -38,14 +54,16 @@ return function()
 		local unapplied = applyPatch(instanceMap, patch)
 		assert(PatchSet.isEmpty(unapplied), "expected remaining patch to be empty")
 
-		assert(not wasDestroyed(root), "expected root to be left alone")
+		assert(not wasRemoved(root), "expected root to be left alone")
-		assert(wasDestroyed(child), "expected child to be destroyed")
+		assert(wasRemoved(child), "expected child to be removed")
 
 		instanceMap:stop()
 	end)
 
-	it("should destroy IDs listed for remove", function()
+	it("should remove IDs listed for remove", function()
 		local root = Instance.new("Folder")
+		root.Name = "ROOT"
+		root.Parent = container
 
 		local child = Instance.new("Folder")
 		child.Name = "Child"
@@ -62,8 +80,8 @@ return function()
 		assert(PatchSet.isEmpty(unapplied), "expected remaining patch to be empty")
 		expect(instanceMap:size()).to.equal(1)
 
-		assert(not wasDestroyed(root), "expected root to be left alone")
+		assert(not wasRemoved(root), "expected root to be left alone")
-		assert(wasDestroyed(child), "expected child to be destroyed")
+		assert(wasRemoved(child), "expected child to be removed")
 
 		instanceMap:stop()
 	end)
@@ -73,6 +91,8 @@ return function()
 		-- tests on reify, not here.
 
 		local root = Instance.new("Folder")
+		root.Name = "ROOT"
+		root.Parent = container
 
 		local instanceMap = InstanceMap.new()
 		instanceMap:insert("ROOT", root)
@@ -113,6 +133,8 @@ return function()
 
 	it("should return unapplied additions when instances cannot be created", function()
 		local root = Instance.new("Folder")
+		root.Name = "ROOT"
+		root.Parent = container
 
 		local instanceMap = InstanceMap.new()
 		instanceMap:insert("ROOT", root)
@@ -159,6 +181,7 @@ return function()
 	it("should recreate instances when changedClassName is set, preserving children", function()
 		local root = Instance.new("Folder")
 		root.Name = "Initial Root Name"
+		root.Parent = container
 
 		local child = Instance.new("Folder")
 		child.Name = "Child"

plugin/src/Reconciler/init.lua

@@ -3,9 +3,14 @@
 	and mutating the Roblox DOM.
 ]]
 
-local Packages = script.Parent.Parent.Packages
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
 local Log = require(Packages.Log)
 
+local Timer = require(Plugin.Timer)
+
 local applyPatch = require(script.applyPatch)
 local hydrate = require(script.hydrate)
 local diff = require(script.diff)
@@ -57,31 +62,55 @@ function Reconciler:hookPostcommit(callback: (patch: any, instanceMap: any, unap
 end
 
 function Reconciler:applyPatch(patch)
+	Timer.start("Reconciler:applyPatch")
+
+	Timer.start("precommitCallbacks")
+	-- Precommit callbacks must be serial in order to obey the contract that
+	-- they execute before commit
 	for _, callback in self.__precommitCallbacks do
 		local success, err = pcall(callback, patch, self.__instanceMap)
 		if not success then
 			Log.warn("Precommit hook errored: {}", err)
 		end
 	end
+	Timer.stop()
 
+	Timer.start("apply")
 	local unappliedPatch = applyPatch(self.__instanceMap, patch)
+	Timer.stop()
 
+	Timer.start("postcommitCallbacks")
+	-- Postcommit callbacks can be called with spawn since regardless of firing order, they are
+	-- guaranteed to be called after the commit
 	for _, callback in self.__postcommitCallbacks do
-		local success, err = pcall(callback, patch, self.__instanceMap, unappliedPatch)
+		task.spawn(function()
-		if not success then
+			local success, err = pcall(callback, patch, self.__instanceMap, unappliedPatch)
-			Log.warn("Postcommit hook errored: {}", err)
+			if not success then
-		end
+				Log.warn("Postcommit hook errored: {}", err)
+			end
+		end)
 	end
+	Timer.stop()
+
+	Timer.stop()
 
 	return unappliedPatch
 end
 
 function Reconciler:hydrate(virtualInstances, rootId, rootInstance)
-	return hydrate(self.__instanceMap, virtualInstances, rootId, rootInstance)
+	Timer.start("Reconciler:hydrate")
+	local result = hydrate(self.__instanceMap, virtualInstances, rootId, rootInstance)
+	Timer.stop()
+
+	return result
 end
 
 function Reconciler:diff(virtualInstances, rootId)
-	return diff(self.__instanceMap, virtualInstances, rootId)
+	Timer.start("Reconciler:diff")
+	local success, result = diff(self.__instanceMap, virtualInstances, rootId)
+	Timer.stop()
+
+	return success, result
 end
 
 return Reconciler

plugin/src/Reconciler/setProperty.lua

@@ -7,7 +7,7 @@ local Log = require(Packages.Log)
 local RbxDom = require(Packages.RbxDom)
 local Error = require(script.Parent.Error)
 
-local function setProperty(instance: Instance, propertyName: string, value: unknown): boolean
+local function setProperty(instance, propertyName, value)
 	local descriptor = RbxDom.findCanonicalPropertyDescriptor(instance.ClassName, propertyName)
 
 	-- We can skip unknown properties; they're not likely reflected to Lua.
@@ -28,13 +28,6 @@ local function setProperty(instance: Instance, propertyName: string, value: unkn
 			})
 	end
 
-	if value == nil then
-		if descriptor.dataType == "Float32" or descriptor.dataType == "Float64" then
-			Log.trace("Skipping nil {} property {}.{}", descriptor.dataType, instance.ClassName, propertyName)
-			return true
-		end
-	end
-
 	local writeSuccess, err = descriptor:write(instance, value)
 
 	if not writeSuccess then

plugin/src/ServeSession.lua

@@ -13,6 +13,7 @@ local InstanceMap = require(script.Parent.InstanceMap)
 local PatchSet = require(script.Parent.PatchSet)
 local Reconciler = require(script.Parent.Reconciler)
 local strict = require(script.Parent.strict)
+local Settings = require(script.Parent.Settings)
 
 local Status = strict("Session.Status", {
 	NotStarted = "NotStarted",
@@ -50,7 +51,6 @@ ServeSession.Status = Status
 
 local validateServeOptions = t.strictInterface({
 	apiContext = t.table,
-	openScriptsExternally = t.boolean,
 	twoWaySync = t.boolean,
 })
 
@@ -89,7 +89,6 @@ function ServeSession.new(options)
 	self = {
 		__status = Status.NotStarted,
 		__apiContext = options.apiContext,
-		__openScriptsExternally = options.openScriptsExternally,
 		__twoWaySync = options.twoWaySync,
 		__reconciler = reconciler,
 		__instanceMap = instanceMap,
@@ -170,7 +169,7 @@ function ServeSession:__applyGameAndPlaceId(serverInfo)
 end
 
 function ServeSession:__onActiveScriptChanged(activeScript)
-	if not self.__openScriptsExternally then
+	if not Settings:get("openScriptsExternally") then
 		Log.trace("Not opening script {} because feature not enabled.", activeScript)
 
 		return

plugin/src/Settings.lua

@@ -14,11 +14,15 @@ local defaultSettings = {
 	twoWaySync = false,
 	showNotifications = true,
 	syncReminder = true,
+	checkForUpdates = true,
+	checkForPrereleases = false,
+	autoConnectPlaytestServer = false,
 	confirmationBehavior = "Initial",
 	largeChangesConfirmationThreshold = 5,
 	playSounds = true,
 	typecheckingEnabled = false,
 	logLevel = "Info",
+	timingLogsEnabled = false,
 	priorEndpoints = {},
 }
 

plugin/src/Timer.lua

@@ -0,0 +1,57 @@
+local Settings = require(script.Parent.Settings)
+
+local clock = os.clock
+
+local Timer = {
+	_entries = {},
+}
+
+function Timer._start(label)
+	local start = clock()
+	if not label then
+		error("[Rojo-Timer] Timer.start: label is required", 2)
+		return
+	end
+
+	table.insert(Timer._entries, { label, start })
+end
+
+function Timer._stop()
+	local stop = clock()
+
+	local entry = table.remove(Timer._entries)
+	if not entry then
+		error("[Rojo-Timer] Timer.stop: no label to stop", 2)
+		return
+	end
+
+	local label = entry[1]
+	if #Timer._entries > 0 then
+		local priorLabels = {}
+		for _, priorEntry in ipairs(Timer._entries) do
+			table.insert(priorLabels, priorEntry[1])
+		end
+		label = table.concat(priorLabels, "/") .. "/" .. label
+	end
+
+	local start = entry[2]
+	local duration = stop - start
+	print(string.format("[Rojo-Timer] %s took %.3f ms", label, duration * 1000))
+end
+
+-- Replace functions with no-op if not in debug mode
+local function no_op() end
+local function setFunctions(enabled)
+	if enabled then
+		Timer.start = Timer._start
+		Timer.stop = Timer._stop
+	else
+		Timer.start = no_op
+		Timer.stop = no_op
+	end
+end
+
+Settings:onChanged("timingLogsEnabled", setFunctions)
+setFunctions(Settings:get("timingLogsEnabled"))
+
+return Timer

plugin/src/Version.lua

@@ -1,3 +1,7 @@
+local Packages = script.Parent.Parent.Packages
+local Http = require(Packages.Http)
+local Promise = require(Packages.Promise)
+
 local function compare(a, b)
 	if a > b then
 		return 1
@@ -30,7 +34,48 @@ function Version.compare(a, b)
 		return minor
 	end
 
-	return revision
+	if revision ~= 0 then
+		return revision
+	end
+
+	local aPrerelease = if a[4] == "" then nil else a[4]
+	local bPrerelease = if b[4] == "" then nil else b[4]
+
+	-- If neither are prerelease, they are the same
+	if aPrerelease == nil and bPrerelease == nil then
+		return 0
+	end
+
+	-- If one is prerelease it is older
+	if aPrerelease ~= nil and bPrerelease == nil then
+		return -1
+	end
+	if aPrerelease == nil and bPrerelease ~= nil then
+		return 1
+	end
+
+	-- If they are both prereleases, compare those based on number
+	local aPrereleaseNumeric = string.match(aPrerelease, "(%d+).*$")
+	local bPrereleaseNumeric = string.match(bPrerelease, "(%d+).*$")
+
+	if aPrereleaseNumeric == nil or bPrereleaseNumeric == nil then
+		-- If one or both lack a number, comparing isn't meaningful
+		return 0
+	end
+	return compare(tonumber(aPrereleaseNumeric) or 0, tonumber(bPrereleaseNumeric) or 0)
+end
+
+function Version.parse(versionString: string)
+	local version = { string.match(versionString, "^v?(%d+)%.(%d+)%.(%d+)(.*)$") }
+	for i, v in version do
+		version[i] = tonumber(v) or v
+	end
+
+	if version[4] == "" then
+		version[4] = nil
+	end
+
+	return version
 end
 
 function Version.display(version)
@@ -43,4 +88,64 @@ function Version.display(version)
 	return output
 end
 
+function Version.retrieveLatestCompatible(options: {
+	version: { number },
+	includePrereleases: boolean?,
+}): {
+	version: { number },
+	prerelease: boolean,
+	publishedUnixTimestamp: number,
+}?
+	local success, releases = Http.get("https://api.github.com/repos/rojo-rbx/rojo/releases?per_page=10")
+		:andThen(function(response)
+			if response.code >= 400 then
+				local message = string.format("HTTP %s:\n%s", tostring(response.code), response.body)
+
+				return Promise.reject(message)
+			end
+
+			return response
+		end)
+		:andThen(Http.Response.json)
+		:await()
+
+	if success == false or type(releases) ~= "table" or next(releases) ~= 1 then
+		return nil
+	end
+
+	-- Iterate through releases, looking for the latest compatible version
+	local latestCompatible = nil
+	for _, release in releases do
+		-- Skip prereleases if they are not requested
+		if (not options.includePrereleases) and release.prerelease then
+			continue
+		end
+
+		local releaseVersion = Version.parse(release.tag_name)
+
+		-- Skip releases that are potentially incompatible
+		if releaseVersion[1] > options.version[1] then
+			continue
+		end
+
+		-- Skip releases that are older than the latest compatible version
+		if latestCompatible ~= nil and Version.compare(releaseVersion, latestCompatible.version) <= 0 then
+			continue
+		end
+
+		latestCompatible = {
+			version = releaseVersion,
+			prerelease = release.prerelease,
+			publishedUnixTimestamp = DateTime.fromIsoDate(release.published_at).UnixTimestamp,
+		}
+	end
+
+	-- Don't return anything if the latest found is not newer than the current version
+	if latestCompatible == nil or Version.compare(latestCompatible.version, options.version) <= 0 then
+		return nil
+	end
+
+	return latestCompatible
+end
+
 return Version

plugin/src/Version.spec.lua

@@ -3,6 +3,7 @@ return function()
 
 	it("should compare equal versions", function()
 		expect(Version.compare({ 1, 2, 3 }, { 1, 2, 3 })).to.equal(0)
+		expect(Version.compare({ 1, 2, 3, "rc1" }, { 1, 2, 3, "rc1" })).to.equal(0)
 		expect(Version.compare({ 0, 4, 0 }, { 0, 4 })).to.equal(0)
 		expect(Version.compare({ 0, 0, 123 }, { 0, 0, 123 })).to.equal(0)
 		expect(Version.compare({ 26 }, { 26 })).to.equal(0)
@@ -13,6 +14,7 @@ return function()
 	it("should compare newer, older versions", function()
 		expect(Version.compare({ 1 }, { 0 })).to.equal(1)
 		expect(Version.compare({ 1, 1 }, { 1, 0 })).to.equal(1)
+		expect(Version.compare({ 1, 2, 3 }, { 1, 2, 0 })).to.equal(1)
 	end)
 
 	it("should compare different major versions", function()
@@ -25,4 +27,37 @@ return function()
 		expect(Version.compare({ 1, 2, 3 }, { 1, 3, 2 })).to.equal(-1)
 		expect(Version.compare({ 50, 1 }, { 50, 2 })).to.equal(-1)
 	end)
+
+	it("should compare different patch versions", function()
+		expect(Version.compare({ 1, 1, 3 }, { 1, 1, 2 })).to.equal(1)
+		expect(Version.compare({ 1, 1, 2 }, { 1, 1, 3 })).to.equal(-1)
+		expect(Version.compare({ 1, 1, 3, "-rc1" }, { 1, 1, 2, "-rc2" })).to.equal(1)
+		expect(Version.compare({ 1, 1, 2, "-rc5" }, { 1, 1, 3, "-alpha" })).to.equal(-1)
+	end)
+
+	it("should compare prerelease tags", function()
+		expect(Version.compare({ 1, 0, 0, "-alpha" }, { 1, 0, 0 })).to.equal(-1)
+		expect(Version.compare({ 1, 0, 0 }, { 1, 0, 0, "-alpha" })).to.equal(1)
+		expect(Version.compare({ 1, 0, 0, "-rc1" }, { 1, 0, 0, "-rc2" })).to.equal(-1)
+		expect(Version.compare({ 1, 0, 0, "-rc2" }, { 1, 0, 0, "-rc1" })).to.equal(1)
+
+		-- Non number prereleases are not compared since that isn't meaningful
+		expect(Version.compare({ 1, 0, 0, "-alpha" }, { 1, 0, 0, "-beta" })).to.equal(0)
+	end)
+
+	it("should parse version from strings", function()
+		local a = Version.parse("v1.0.0")
+		expect(a).to.be.ok()
+		expect(a[1]).to.equal(1)
+		expect(a[2]).to.equal(0)
+		expect(a[3]).to.equal(0)
+		expect(a[4]).to.equal(nil)
+
+		local b = Version.parse("7.3.1-rc1")
+		expect(b).to.be.ok()
+		expect(b[1]).to.equal(7)
+		expect(b[2]).to.equal(3)
+		expect(b[3]).to.equal(1)
+		expect(b[4]).to.equal("-rc1")
+	end)
 end

plugin/src/timeUtil.lua

@@ -0,0 +1,31 @@
+local timeUtil = {}
+
+timeUtil.AGE_UNITS = table.freeze({
+	{ 31556909, "year" },
+	{ 2629743, "month" },
+	{ 604800, "week" },
+	{ 86400, "day" },
+	{ 3600, "hour" },
+	{ 60, "minute" },
+})
+
+function timeUtil.elapsedToText(elapsed: number): string
+	if elapsed < 3 then
+		return "just now"
+	end
+
+	local ageText = string.format("%d seconds ago", elapsed)
+
+	for _, UnitData in timeUtil.AGE_UNITS do
+		local UnitSeconds, UnitName = UnitData[1], UnitData[2]
+		if elapsed > UnitSeconds then
+			local c = math.floor(elapsed / UnitSeconds)
+			ageText = string.format("%d %s%s ago", c, UnitName, c > 1 and "s" or "")
+			break
+		end
+	end
+
+	return ageText
+end
+
+return timeUtil

rojo-test/build-test-snapshots/end_to_end__tests__build__no_name_top_level_project.snap

@@ -1,6 +1,6 @@
 ---
 source: tests/tests/build.rs
-assertion_line: 104
+assertion_line: 107
 expression: contents
 ---
 <roblox version="4">

rojo-test/build-test-snapshots/end_to_end__tests__build__rbxmx_in_folder.snap

@@ -1,6 +1,7 @@
 ---
 source: tests/tests/build.rs
 expression: contents
+
 ---
 <roblox version="4">
   <Item class="Folder" referent="0">
@@ -24,7 +25,6 @@ expression: contents
           <R21>0</R21>
           <R22>1</R22>
         </CoordinateFrame>
-        <bool name="NeedsPivotMigration">false</bool>
         <Ref name="PrimaryPart">null</Ref>
         <BinaryString name="Tags"></BinaryString>
       </Properties>

rojo-test/build-test-snapshots/end_to_end__tests__build__sync_rule_alone.snap

@@ -0,0 +1,18 @@
+---
+source: tests/tests/build.rs
+assertion_line: 102
+expression: contents
+---
+<roblox version="4">
+  <Item class="Folder" referent="0">
+    <Properties>
+      <string name="Name">sync_rule_alone</string>
+    </Properties>
+    <Item class="StringValue" referent="1">
+      <Properties>
+        <string name="Name">foo</string>
+        <string name="Value">Hello, world!</string>
+      </Properties>
+    </Item>
+  </Item>
+</roblox>

rojo-test/build-test-snapshots/end_to_end__tests__build__sync_rule_complex.snap

@@ -0,0 +1,43 @@
+---
+source: tests/tests/build.rs
+assertion_line: 104
+expression: contents
+---
+<roblox version="4">
+  <Item class="Folder" referent="0">
+    <Properties>
+      <string name="Name">sync_rule_complex</string>
+    </Properties>
+    <Item class="Script" referent="1">
+      <Properties>
+        <string name="Name">bar</string>
+        <token name="RunContext">0</token>
+        <string name="Source">-- Hello, from bar (a Script)!</string>
+      </Properties>
+    </Item>
+    <Item class="LocalScript" referent="2">
+      <Properties>
+        <string name="Name">baz</string>
+        <string name="Source">-- Hello, from baz (a LocalScript)!</string>
+      </Properties>
+    </Item>
+    <Item class="StringValue" referent="3">
+      <Properties>
+        <string name="Name">cat</string>
+        <string name="Value">Hello, from cat (a StringValue)!</string>
+      </Properties>
+    </Item>
+    <Item class="ModuleScript" referent="4">
+      <Properties>
+        <string name="Name">foo</string>
+        <string name="Source">-- Hello, from foo (a ModuleScript)!</string>
+      </Properties>
+    </Item>
+    <Item class="StringValue" referent="5">
+      <Properties>
+        <string name="Name">qux</string>
+        <string name="Value">Hello, from qux (a .rojo file that's turned into a StringValue)!</string>
+      </Properties>
+    </Item>
+  </Item>
+</roblox>

rojo-test/build-test-snapshots/end_to_end__tests__build__sync_rule_nested_projects.snap

@@ -0,0 +1,12 @@
+---
+source: tests/tests/build.rs
+assertion_line: 104
+expression: contents
+---
+<roblox version="4">
+  <Item class="Folder" referent="0">
+    <Properties>
+      <string name="Name">sync_rule_nested_projects</string>
+    </Properties>
+  </Item>
+</roblox>

rojo-test/build-test-snapshots/end_to_end__tests__build__unresolved_values.snap

@@ -1,6 +1,7 @@
 ---
 source: tests/tests/build.rs
 expression: contents
+
 ---
 <roblox version="4">
   <Item class="DataModel" referent="0">
@@ -21,7 +22,6 @@ expression: contents
     <Item class="Workspace" referent="2">
       <Properties>
         <string name="Name">Workspace</string>
-        <bool name="NeedsPivotMigration">false</bool>
       </Properties>
       <Item class="BoolValue" referent="3">
         <Properties>

rojo-test/build-tests/sync_rule_alone/default.project.json

@@ -0,0 +1,12 @@
+{
+  "name": "sync_rule_alone",
+  "tree": {
+    "$path": "src"
+  },
+  "syncRules": [
+    {
+      "pattern": "*.nothing",
+      "use": "text"
+    }
+  ]
+}

rojo-test/build-tests/sync_rule_alone/src/foo.nothing

@@ -0,0 +1 @@
+Hello, world!

rojo-test/build-tests/sync_rule_complex/default.project.json

@@ -0,0 +1,30 @@
+{
+  "name": "sync_rule_complex",
+  "tree": {
+    "$path": "src"
+  },
+  "syncRules": [
+    {
+      "pattern": "*.module",
+      "use": "moduleScript"
+    },
+    {
+      "pattern": "*.server",
+      "use": "serverScript"
+    },
+    {
+      "pattern": "*.client",
+      "use": "clientScript"
+    },
+    {
+      "pattern": "*.rojo",
+      "exclude": "*.ignore.rojo",
+      "use": "project"
+    },
+    {
+      "pattern": "*.dog.rojo2",
+      "use": "text",
+      "suffix": ".dog.rojo2"
+    }
+  ]
+}

rojo-test/build-tests/sync_rule_complex/src/bar.server

@@ -0,0 +1 @@
+-- Hello, from bar (a Script)!

rojo-test/build-tests/sync_rule_complex/src/baz.client

@@ -0,0 +1 @@
+-- Hello, from baz (a LocalScript)!

rojo-test/build-tests/sync_rule_complex/src/cat.dog.rojo2

@@ -0,0 +1 @@
+Hello, from cat (a StringValue)!

rojo-test/build-tests/sync_rule_complex/src/foo.module

@@ -0,0 +1 @@
+-- Hello, from foo (a ModuleScript)!

rojo-test/build-tests/sync_rule_complex/src/qux.rojo

@@ -0,0 +1,9 @@
+{
+  "name": "qux",
+  "tree": {
+    "$className": "StringValue",
+    "$properties": {
+      "Value": "Hello, from qux (a .rojo file that's turned into a StringValue)!"
+    }
+  }
+}

rojo-test/build-tests/sync_rule_complex/src/rat.ignore.rojo

@@ -0,0 +1 @@
+This file should be ignored!

rojo-test/build-tests/sync_rule_nested_projects/default.project.json

@@ -0,0 +1,12 @@
+{
+  "name": "sync_rule_nested_projects",
+  "tree": {
+    "$path": "nested.project.json"
+  },
+  "syncRules": [
+    {
+      "pattern": "*.rojo",
+      "use": "text"
+    }
+  ]
+}

rojo-test/build-tests/sync_rule_nested_projects/nested.project.json

@@ -0,0 +1,12 @@
+{
+  "name": "nested",
+  "tree": {
+    "$path": "src"
+  },
+  "syncRules": [
+    {
+      "pattern": "*.txt",
+      "use": "ignore"
+    }
+  ]
+}

rojo-test/build-tests/sync_rule_nested_projects/src/ignored.rojo

@@ -0,0 +1 @@
+This shouldn't be in the built file. If it is, something is wrong.

rojo-test/build-tests/sync_rule_nested_projects/src/ignored.txt

@@ -0,0 +1 @@
+This shouldn't be in the built file. If it is, something is wrong.

rojo-test/serve-test-snapshots/end_to_end__tests__serve__empty_json_model_all-2.snap

@@ -1,6 +1,7 @@
 ---
 source: tests/tests/serve.rs
 expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+
 ---
 instances:
   id-2:
@@ -21,9 +22,7 @@ instances:
       ignoreUnknownInstances: false
     Name: test
     Parent: id-2
-    Properties:
+    Properties: {}
-      NeedsPivotMigration:
-        Bool: false
 messageCursor: 1
 sessionId: id-1
 

rojo-test/serve-test-snapshots/end_to_end__tests__serve__empty_json_model_subscribe.snap

@@ -1,6 +1,7 @@
 ---
 source: tests/tests/serve.rs
 expression: "subscribe_response.intern_and_redact(&mut redactions, ())"
+
 ---
 messageCursor: 1
 messages:
@@ -13,9 +14,7 @@ messages:
           ignoreUnknownInstances: false
         Name: test
         Parent: id-2
-        Properties:
+        Properties: {}
-          NeedsPivotMigration:
-            Bool: false
     removed: []
     updated: []
 sessionId: id-1

rojo-test/serve-test-snapshots/end_to_end__tests__serve__no_name_top_level_project_all-2.snap

@@ -1,5 +1,6 @@
 ---
 source: tests/tests/serve.rs
+assertion_line: 370
 expression: "read_response.intern_and_redact(&mut redactions, root_id)"
 ---
 instances:
@@ -16,4 +17,3 @@ instances:
         String: "If this isn't named `no_name_top_level_project`, something went wrong!"
 messageCursor: 0
 sessionId: id-1
-

rojo-test/serve-test-snapshots/end_to_end__tests__serve__no_name_top_level_project_all.snap

@@ -1,6 +1,6 @@
 ---
 source: tests/tests/serve.rs
-assertion_line: 306
+assertion_line: 357
 expression: "read_response.intern_and_redact(&mut redactions, root_id)"
 ---
 instances:

rojo-test/serve-test-snapshots/end_to_end__tests__serve__no_name_top_level_project_info.snap

@@ -1,6 +1,6 @@
 ---
 source: tests/tests/serve.rs
-assertion_line: 300
+assertion_line: 351
 expression: redactions.redacted_yaml(info)
 ---
 expectedPlaceIds: ~

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_all-2.snap

@@ -0,0 +1,141 @@
+---
+source: tests/tests/serve.rs
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-10:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-10
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectPointer
+    Parent: id-9
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: project target
+      Value:
+        Ref: id-9
+  id-11:
+    Children: []
+    ClassName: Model
+    Id: id-11
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ProjectPointer
+    Parent: id-7
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_PrimaryPart:
+            String: project target
+      PrimaryPart:
+        Ref: id-9
+  id-2:
+    Children:
+      - id-3
+    ClassName: DataModel
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ref_properties
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children:
+      - id-4
+      - id-5
+      - id-7
+      - id-9
+    ClassName: Workspace
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: Workspace
+    Parent: id-2
+    Properties: {}
+  id-4:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-4
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: CrossFormatPointer
+    Parent: id-3
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-5:
+    Children:
+      - id-6
+    ClassName: Folder
+    Id: id-5
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderTarget
+    Parent: id-3
+    Properties: {}
+  id-6:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-6
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderPointer
+    Parent: id-5
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-7:
+    Children:
+      - id-8
+      - id-11
+    ClassName: Folder
+    Id: id-7
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelTarget
+    Parent: id-3
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Id:
+            String: model target 2
+  id-8:
+    Children: []
+    ClassName: Model
+    Id: id-8
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelPointer
+    Parent: id-7
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_PrimaryPart:
+            String: model target 2
+      PrimaryPart:
+        Ref: id-7
+  id-9:
+    Children:
+      - id-10
+    ClassName: Folder
+    Id: id-9
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectTarget
+    Parent: id-3
+    Properties: {}
+messageCursor: 1
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_all.snap

@@ -0,0 +1,121 @@
+---
+source: tests/tests/serve.rs
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-10:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-10
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectPointer
+    Parent: id-9
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: project target
+      Value:
+        Ref: id-9
+  id-2:
+    Children:
+      - id-3
+    ClassName: DataModel
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ref_properties
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children:
+      - id-4
+      - id-5
+      - id-7
+      - id-9
+    ClassName: Workspace
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: Workspace
+    Parent: id-2
+    Properties: {}
+  id-4:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-4
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: CrossFormatPointer
+    Parent: id-3
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-5:
+    Children:
+      - id-6
+    ClassName: Folder
+    Id: id-5
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderTarget
+    Parent: id-3
+    Properties: {}
+  id-6:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-6
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderPointer
+    Parent: id-5
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-7:
+    Children:
+      - id-8
+    ClassName: Folder
+    Id: id-7
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelTarget
+    Parent: id-3
+    Properties: {}
+  id-8:
+    Children: []
+    ClassName: Model
+    Id: id-8
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelPointer
+    Parent: id-7
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_PrimaryPart:
+            String: model target
+      PrimaryPart:
+        Ref: id-7
+  id-9:
+    Children:
+      - id-10
+    ClassName: Folder
+    Id: id-9
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectTarget
+    Parent: id-3
+    Properties: {}
+messageCursor: 0
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_info.snap

@@ -0,0 +1,13 @@
+---
+source: tests/tests/serve.rs
+expression: redactions.redacted_yaml(info)
+---
+expectedPlaceIds: ~
+gameId: ~
+placeId: ~
+projectName: ref_properties
+protocolVersion: 4
+rootInstanceId: id-2
+serverVersion: "[server-version]"
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_patch_update_all-2.snap

@@ -0,0 +1,120 @@
+---
+source: tests/tests/serve.rs
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-10:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-10
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectPointer
+    Parent: id-9
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: project target
+      Value:
+        Ref: id-9
+  id-2:
+    Children:
+      - id-3
+    ClassName: DataModel
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ref_properties
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children:
+      - id-4
+      - id-5
+      - id-7
+      - id-9
+    ClassName: Workspace
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: Workspace
+    Parent: id-2
+    Properties: {}
+  id-4:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-4
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: CrossFormatPointer
+    Parent: id-3
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-5:
+    Children:
+      - id-6
+    ClassName: Folder
+    Id: id-5
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderTarget
+    Parent: id-3
+    Properties: {}
+  id-6:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-6
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderPointer
+    Parent: id-5
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-7:
+    Children:
+      - id-8
+    ClassName: Folder
+    Id: id-7
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelTarget
+    Parent: id-3
+    Properties: {}
+  id-8:
+    Children: []
+    ClassName: Model
+    Id: id-8
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelPointer
+    Parent: id-7
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_PrimaryPart:
+            String: model target
+      PrimaryPart:
+        Ref: id-7
+  id-9:
+    Children:
+      - id-10
+    ClassName: Folder
+    Id: id-9
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectTarget
+    Parent: id-3
+    Properties: {}
+messageCursor: 0
+sessionId: id-1

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_patch_update_all.snap

@@ -0,0 +1,120 @@
+---
+source: tests/tests/serve.rs
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-10:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-10
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectPointer
+    Parent: id-9
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: project target
+      Value:
+        Ref: id-9
+  id-2:
+    Children:
+      - id-3
+    ClassName: DataModel
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ref_properties
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children:
+      - id-4
+      - id-5
+      - id-7
+      - id-9
+    ClassName: Workspace
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: Workspace
+    Parent: id-2
+    Properties: {}
+  id-4:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-4
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: CrossFormatPointer
+    Parent: id-3
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-5:
+    Children:
+      - id-6
+    ClassName: Folder
+    Id: id-5
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderTarget
+    Parent: id-3
+    Properties: {}
+  id-6:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-6
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: FolderPointer
+    Parent: id-5
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: folder target
+      Value:
+        Ref: id-5
+  id-7:
+    Children:
+      - id-8
+    ClassName: Folder
+    Id: id-7
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelTarget
+    Parent: id-3
+    Properties: {}
+  id-8:
+    Children: []
+    ClassName: Model
+    Id: id-8
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ModelPointer
+    Parent: id-7
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_PrimaryPart:
+            String: model target
+      PrimaryPart:
+        Ref: id-7
+  id-9:
+    Children:
+      - id-10
+    ClassName: Folder
+    Id: id-9
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: ProjectTarget
+    Parent: id-3
+    Properties: {}
+messageCursor: 0
+sessionId: id-1

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_patch_update_info.snap

@@ -0,0 +1,12 @@
+---
+source: tests/tests/serve.rs
+expression: redactions.redacted_yaml(info)
+---
+expectedPlaceIds: ~
+gameId: ~
+placeId: ~
+projectName: ref_properties
+protocolVersion: 4
+rootInstanceId: id-2
+serverVersion: "[server-version]"
+sessionId: id-1

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_remove_all-2.snap

@@ -0,0 +1,33 @@
+---
+source: tests/tests/serve.rs
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-2:
+    Children:
+      - id-3
+    ClassName: Folder
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ref_properties_remove
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: pointer
+    Parent: id-2
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: test pointer
+      Value:
+        Ref: id-4
+messageCursor: 1
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_remove_all.snap

@@ -0,0 +1,47 @@
+---
+source: tests/tests/serve.rs
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-2:
+    Children:
+      - id-3
+      - id-4
+    ClassName: Folder
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: ref_properties_remove
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: pointer
+    Parent: id-2
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Target_Value:
+            String: test pointer
+      Value:
+        Ref: id-4
+  id-4:
+    Children: []
+    ClassName: ObjectValue
+    Id: id-4
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: target
+    Parent: id-2
+    Properties:
+      Attributes:
+        Attributes:
+          Rojo_Id:
+            String: test pointer
+messageCursor: 0
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_remove_info.snap

@@ -0,0 +1,13 @@
+---
+source: tests/tests/serve.rs
+expression: redactions.redacted_yaml(info)
+---
+expectedPlaceIds: ~
+gameId: ~
+placeId: ~
+projectName: ref_properties_remove
+protocolVersion: 4
+rootInstanceId: id-2
+serverVersion: "[server-version]"
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_remove_subscribe.snap

@@ -0,0 +1,12 @@
+---
+source: tests/tests/serve.rs
+expression: "subscribe_response.intern_and_redact(&mut redactions, ())"
+---
+messageCursor: 1
+messages:
+  - added: {}
+    removed:
+      - id-4
+    updated: []
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__ref_properties_subscribe.snap

@@ -0,0 +1,46 @@
+---
+source: tests/tests/serve.rs
+expression: "subscribe_response.intern_and_redact(&mut redactions, ())"
+---
+messageCursor: 1
+messages:
+  - added:
+      id-11:
+        Children: []
+        ClassName: Model
+        Id: id-11
+        Metadata:
+          ignoreUnknownInstances: false
+        Name: ProjectPointer
+        Parent: id-7
+        Properties:
+          Attributes:
+            Attributes:
+              Rojo_Target_PrimaryPart:
+                String: project target
+          PrimaryPart:
+            Ref: id-9
+    removed: []
+    updated:
+      - changedClassName: ~
+        changedMetadata:
+          ignoreUnknownInstances: false
+        changedName: ~
+        changedProperties:
+          Attributes:
+            Attributes:
+              Rojo_Id:
+                String: model target 2
+        id: id-7
+      - changedClassName: ~
+        changedMetadata: ~
+        changedName: ~
+        changedProperties:
+          Attributes:
+            Attributes:
+              Rojo_Target_PrimaryPart:
+                String: model target 2
+          PrimaryPart: ~
+        id: id-8
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__sync_rule_alone_all.snap

@@ -0,0 +1,30 @@
+---
+source: tests/tests/serve.rs
+assertion_line: 268
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-2:
+    Children:
+      - id-3
+    ClassName: Folder
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: sync_rule_alone
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children: []
+    ClassName: StringValue
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: foo
+    Parent: id-2
+    Properties:
+      Value:
+        String: "Hello, world!"
+messageCursor: 0
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__sync_rule_alone_info.snap

@@ -0,0 +1,14 @@
+---
+source: tests/tests/serve.rs
+assertion_line: 265
+expression: redactions.redacted_yaml(info)
+---
+expectedPlaceIds: ~
+gameId: ~
+placeId: ~
+projectName: sync_rule_alone
+protocolVersion: 4
+rootInstanceId: id-2
+serverVersion: "[server-version]"
+sessionId: id-1
+

rojo-test/serve-test-snapshots/end_to_end__tests__serve__sync_rule_complex_all.snap

@@ -0,0 +1,80 @@
+---
+source: tests/tests/serve.rs
+assertion_line: 284
+expression: "read_response.intern_and_redact(&mut redactions, root_id)"
+---
+instances:
+  id-2:
+    Children:
+      - id-3
+      - id-4
+      - id-5
+      - id-6
+      - id-7
+    ClassName: Folder
+    Id: id-2
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: sync_rule_complex
+    Parent: "00000000000000000000000000000000"
+    Properties: {}
+  id-3:
+    Children: []
+    ClassName: Script
+    Id: id-3
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: bar
+    Parent: id-2
+    Properties:
+      RunContext:
+        Enum: 0
+      Source:
+        String: "-- Hello, from bar (a Script)!"
+  id-4:
+    Children: []
+    ClassName: LocalScript
+    Id: id-4
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: baz
+    Parent: id-2
+    Properties:
+      Source:
+        String: "-- Hello, from baz (a LocalScript)!"
+  id-5:
+    Children: []
+    ClassName: StringValue
+    Id: id-5
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: cat
+    Parent: id-2
+    Properties:
+      Value:
+        String: "Hello, from cat (a StringValue)!"
+  id-6:
+    Children: []
+    ClassName: ModuleScript
+    Id: id-6
+    Metadata:
+      ignoreUnknownInstances: false
+    Name: foo
+    Parent: id-2
+    Properties:
+      Source:
+        String: "-- Hello, from foo (a ModuleScript)!"
+  id-7:
+    Children: []
+    ClassName: StringValue
+    Id: id-7
+    Metadata:
+      ignoreUnknownInstances: true
+    Name: qux
+    Parent: id-2
+    Properties:
+      Value:
+        String: "Hello, from qux (a .rojo file that's turned into a StringValue)!"
+messageCursor: 0
+sessionId: id-1
+