Release Rojo v7.4.4 (#964)

Backports the release of memofs v0.3.0

.editorconfig

@@ -23,4 +23,7 @@ insert_final_newline = true
 insert_final_newline = true
 
 [*.lua]
+indent_style = tab
+
+[*.luau]
 indent_style = tab

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# stylua formatting
+0f8e1625d572a5fe0f7b5c08653ff92cc837d346

.github/FUNDING.yml

@@ -1 +0,0 @@
-patreon: lpghatguy

.github/workflows/changelog.yml

@@ -0,0 +1,23 @@
+name: Changelog Check
+
+on:
+  pull_request:
+    types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
+    branches:
+      - master
+
+jobs:
+  build:
+    name: Check Actions
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    
+    - name: Changelog check
+      uses: Zomzog/changelog-checker@v1.3.0
+      with:
+        fileName: CHANGELOG.md 
+        noChangelogLabel: skip changelog
+        checkNotification: Simple
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci.yml

@@ -12,45 +12,73 @@ on:
 jobs:
   build:
     name: Build and Test
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
 
     strategy:
       matrix:
-        rust_version: [stable, 1.69.0]
+        os: [ubuntu-latest, windows-latest, macos-latest]
 
     steps:
     - uses: actions/checkout@v3
+      with:
+        submodules: true
 
     - name: Install Rust
       uses: actions-rs/toolchain@v1
       with:
-        toolchain: ${{ matrix.rust_version }}
+        toolchain: stable
         override: true
         profile: minimal
 
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
     - name: Setup Aftman
       uses: ok-nick/setup-aftman@v0.3.0
       with:
         version: 'v0.2.7'
 
-    - name: Install packages
-      run: |
-        cd plugin
-        wally install
-        cd ..
-
     - name: Build
       run: cargo build --locked --verbose
 
     - name: Test
       run: cargo test --locked --verbose
 
-  lint:
+  msrv:
-    name: Rustfmt and Clippy
+    name: Check MSRV
     runs-on: ubuntu-latest
 
     steps:
     - uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - name: Install Rust
+      uses: actions-rs/toolchain@v1
+      with:
+        toolchain: 1.70.0
+        override: true
+        profile: minimal
+
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
+    - name: Setup Aftman
+      uses: ok-nick/setup-aftman@v0.3.0
+      with:
+        version: 'v0.2.7'
+
+    - name: Build
+      run: cargo build --locked --verbose
+
+  lint:
+    name: Rustfmt, Clippy, Stylua, & Selene
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
 
     - name: Install Rust
       uses: actions-rs/toolchain@v1
@@ -59,19 +87,23 @@ jobs:
         override: true
         components: rustfmt, clippy
 
+    - name: Rust cache
+      uses: Swatinem/rust-cache@v2
+
     - name: Setup Aftman
       uses: ok-nick/setup-aftman@v0.3.0
       with:
         version: 'v0.2.7'
 
-    - name: Install packages
+    - name: Stylua
-      run: |
+      run: stylua --check plugin/src
-        cd plugin
+
-        wally install
+    - name: Selene
-        cd ..
+      run: selene plugin/src
 
     - name: Rustfmt
       run: cargo fmt -- --check
 
     - name: Clippy
-      run: cargo clippy
+      run: cargo clippy
+

.github/workflows/release.yml

@@ -28,19 +28,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          submodules: true
 
       - name: Setup Aftman
         uses: ok-nick/setup-aftman@v0.1.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           trust-check: false
-          version: 'v0.2.6'
+          version: 'v0.3.0'
-
-      - name: Install packages
-        run: |
-          cd plugin
-          wally install
-          cd ..
 
       - name: Build Plugin
         run: rojo build plugin --output Rojo.rbxm
@@ -94,6 +90,8 @@ jobs:
       BIN: rojo
     steps:
       - uses: actions/checkout@v3
+        with:
+          submodules: true
 
       - name: Get Version from Tag
         shell: bash
@@ -117,15 +115,8 @@ jobs:
           trust-check: false
           version: 'v0.2.6'
 
-      - name: Install packages
-        run: |
-          cd plugin
-          wally install
-          cd ..
-        shell: bash
-
       - name: Build Release
-        run: cargo build --release --locked --verbose
+        run: cargo build --release --locked --verbose --target ${{ matrix.target }}
         env:
           # Build into a known directory so we can find our build artifact more
           # easily.
@@ -141,11 +132,11 @@ jobs:
           mkdir staging
 
           if [ "${{ matrix.host }}" = "windows" ]; then
-            cp "output/release/$BIN.exe" staging/
+            cp "output/${{ matrix.target }}/release/$BIN.exe" staging/
             cd staging
             7z a ../release.zip *
           else
-            cp "output/release/$BIN" staging/
+            cp "output/${{ matrix.target }}/release/$BIN" staging/
             cd staging
             zip ../release.zip *
           fi

.gitignore

@@ -13,9 +13,6 @@
 # Test places for the Roblox Studio Plugin
 /plugin/*.rbxlx
 
-# Packages for the Roblox Studio Plugin
-/plugin/*Packages
-
 # Roblox Studio holds 'lock' files on places
 *.rbxl.lock
 *.rbxlx.lock

.gitmodules

@@ -0,0 +1,18 @@
+[submodule "plugin/Packages/Roact"]
+	path = plugin/Packages/Roact
+	url = https://github.com/roblox/roact.git
+[submodule "plugin/Packages/Flipper"]
+	path = plugin/Packages/Flipper
+	url = https://github.com/reselim/flipper.git
+[submodule "plugin/Packages/Promise"]
+	path = plugin/Packages/Promise
+	url = https://github.com/evaera/roblox-lua-promise.git
+[submodule "plugin/Packages/t"]
+	path = plugin/Packages/t
+	url = https://github.com/osyrisrblx/t.git
+[submodule "plugin/Packages/TestEZ"]
+	path = plugin/Packages/TestEZ
+	url = https://github.com/roblox/testez.git
+[submodule "plugin/Packages/Highlighter"]
+	path = plugin/Packages/Highlighter
+	url = https://github.com/boatbomber/highlighter.git

CHANGELOG.md

@@ -2,6 +2,232 @@
 
 ## Unreleased Changes
 
+## [7.4.4] - August 22nd, 2024
+* 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`.
+
+## [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
+
+## [7.4.2] - July 23, 2024
+* Added Never option to Confirmation ([#893])
+* Fixed removing trailing newlines ([#903])
+* Updated the internal property database, correcting an issue with `SurfaceAppearance.Color` that was reported [here][Surface_Appearance_Color_1] and [here][Surface_Appearance_Color_2] ([#948])
+
+[#893]: https://github.com/rojo-rbx/rojo/pull/893
+[#903]: https://github.com/rojo-rbx/rojo/pull/903
+[#948]: https://github.com/rojo-rbx/rojo/pull/948
+[Surface_Appearance_Color_1]: https://devforum.roblox.com/t/jailbreak-custom-character-turned-shiny-black-no-texture/3075563
+[Surface_Appearance_Color_2]: https://devforum.roblox.com/t/surfaceappearance-not-displaying-correctly/3075588
+
+## [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
+    are named as expect (e.g. `foo.project.json` becomes an Instance named `foo`)
+
+    There is no change in behavior if `name` is set.
+* Fixed incorrect results when building model pivots ([#865])
+* Fixed incorrect results when serving model pivots ([#868])
+* Rojo now converts any line endings to LF, preventing spurious diffs when syncing Lua files on Windows ([#854])
+* Fixed Rojo plugin failing to connect when project contains certain unreadable properties ([#848])
+* Fixed various cases where patch visualizer would not display sync failures ([#845], [#844])
+* Fixed http error handling so Rojo can be used in Github Codespaces ([#847])
+
+[#848]: https://github.com/rojo-rbx/rojo/pull/848
+[#845]: https://github.com/rojo-rbx/rojo/pull/845
+[#844]: https://github.com/rojo-rbx/rojo/pull/844
+[#847]: https://github.com/rojo-rbx/rojo/pull/847
+[#854]: https://github.com/rojo-rbx/rojo/pull/854
+[#865]: https://github.com/rojo-rbx/rojo/pull/865
+[#868]: https://github.com/rojo-rbx/rojo/pull/868
+[#870]: https://github.com/rojo-rbx/rojo/pull/870
+
+## [7.4.0] - January 16, 2024
+* Improved the visualization for array properties like Tags ([#829])
+* Significantly improved performance of `rojo serve`, `rojo build --watch`, and `rojo sourcemap --watch` on macOS. ([#830])
+* Changed *.lua files that init command generates to *.luau ([#831])
+* Does not remind users to sync if the sync lock is claimed already ([#833])
+
+[#829]: https://github.com/rojo-rbx/rojo/pull/829
+[#830]: https://github.com/rojo-rbx/rojo/pull/830
+[#831]: https://github.com/rojo-rbx/rojo/pull/831
+[#833]: https://github.com/rojo-rbx/rojo/pull/833
+
+## [7.4.0-rc3] - October 25, 2023
+* Changed `sourcemap --watch` to only generate the sourcemap when it's necessary ([#800])
+* Switched script source property getter and setter to `ScriptEditorService` methods ([#801])
+
+ 	This ensures that the script editor reflects any changes Rojo makes to a script while it is open in the script editor.
+
+* Fixed issues when handling `SecurityCapabilities` values ([#803], [#807])
+* Fixed Rojo plugin erroring out when attempting to sync attributes with invalid names ([#809])
+
+[#800]: https://github.com/rojo-rbx/rojo/pull/800
+[#801]: https://github.com/rojo-rbx/rojo/pull/801
+[#803]: https://github.com/rojo-rbx/rojo/pull/803
+[#807]: https://github.com/rojo-rbx/rojo/pull/807
+[#809]: https://github.com/rojo-rbx/rojo/pull/809
+
+## [7.4.0-rc2] - October 3, 2023
+* Fixed bug with parsing version for plugin validation ([#797])
+
+[#797]: https://github.com/rojo-rbx/rojo/pull/797
+
+## [7.4.0-rc1] - October 3, 2023
+### Additions
+#### Project format
+* Added support for `.toml` files to `$path` ([#633])
+* Added support for `Font` and `CFrame` attributes ([rbx-dom#299], [rbx-dom#296])
+* Added the `emitLegacyScripts` field to the project format ([#765]). The behavior is outlined below:
+
+	| `emitLegacyScripts` Value | Action Taken by Rojo                                                                                             |
+	|---------------------------|------------------------------------------------------------------------------------------------------------------|
+	| false                     | Rojo emits Scripts with the appropriate `RunContext` for `*.client.lua` and `*.server.lua` files in the project. |
+	| true   (default)          | Rojo emits LocalScripts and Scripts with legacy `RunContext` (same behavior as previously).                      |
+
+
+	It can be used like this:
+	```json
+	{
+		"emitLegacyScripts": false,
+		"name": "MyCoolRunContextProject",
+		"tree": {
+			"$path": "src"
+		}
+	}
+	```
+
+* Added `Terrain` classname inference, similar to services ([#771])
+
+	`Terrain` may now be defined in projects without using `$className`:
+	```json
+	"Workspace": {
+		"Terrain": {
+			"$path": "path/to/terrain.rbxm"
+		}
+	}
+	```
+
+* Added support for `Terrain.MaterialColors` ([#770])
+
+	`Terrain.MaterialColors` is now represented in projects in a human readable format:
+	```json
+	"Workspace": {
+		"Terrain": {
+			"$path": "path/to/terrain.rbxm"
+			"$properties": {
+				"MaterialColors": {
+					"Grass": [10, 20, 30],
+					"Asphalt": [40, 50, 60],
+					"LeafyGrass": [255, 155, 55]
+				}
+			}
+		}
+	}
+	```
+
+* Added better support for `Font` properties ([#731])
+
+	`FontFace` properties may now be defined using implicit property syntax:
+	```json
+	"TextBox": {
+		"$className": "TextBox",
+		"$properties": {
+			"FontFace": {
+				"family": "rbxasset://fonts/families/RobotoMono.json",
+				"weight": "Thin",
+				"style": "Normal"
+			}
+		}
+	}
+	```
+
+#### Patch visualizer and notifications
+* Added a setting to control patch confirmation behavior ([#774])
+
+	This is a new setting for controlling when the Rojo plugin prompts for confirmation before syncing. It has four options:
+    * Initial (default): prompts only once for a project in a given Studio session
+    * Always: always prompts for confirmation
+    * Large Changes: only prompts when there are more than X changed instances. The number of instances is configurable - an additional setting for the number of instances becomes available when this option is chosen
+    * Unlisted PlaceId: only prompts if the place ID is not present in servePlaceIds
+
+* Added the ability to select Instances in patch visualizer ([#709])
+
+	Double-clicking an instance in the patch visualizer sets Roblox Studio's selection to the instance.
+
+* Added a sync reminder notification. ([#689])
+
+	Rojo detects if you have previously synced to a place, and displays a notification reminding you to sync again:
+
+	![Rojo reminds you to sync a place that you've synced previously](https://user-images.githubusercontent.com/40185666/242397435-ccdfddf2-a63f-420c-bc18-a6e3d6455bba.png)
+
+* Added rich Source diffs in patch visualizer ([#748])
+
+	A "View Diff" button for script sources is now present in the patch visualizer. Clicking it displays a side-by-side diff of the script changes:
+
+	![The patch visualizer contains a "view diff" button](https://user-images.githubusercontent.com/40185666/256065992-3f03558f-84b0-45a1-80eb-901f348cf067.png)
+
+	![The "View Diff" button opens a widget that displays a diff](https://user-images.githubusercontent.com/40185666/256066084-1d9d8fe8-7dad-4ee7-a542-b4aee35a5644.png)
+
+* Patch visualizer now indicates what changes failed to apply. ([#717])
+
+	A clickable warning label is displayed when the Rojo plugin is unable to apply changes. Clicking the label displays precise information about which changes failed:
+
+	![Patch visualizer displays a clickable warning label when changes fail to apply](https://user-images.githubusercontent.com/40185666/252063660-f08399ef-1e16-4f1c-bed8-552821f98cef.png)
+
+
+#### Miscellaneous
+* Added `plugin` flag to the `build` command that outputs to the local plugins folder ([#735])
+
+	This is a flag that builds a Rojo project into Roblox Studio's plugins directory. This allows you to build a Rojo project and load it into Studio as a plugin without having to type the full path to the plugins directory. It can be used like this: `rojo build <PATH-TO-PROJECT> --plugin <FILE-NAME>`
+
+* Added new plugin template to the `init` command ([#738])
+
+	This is a new template geared towards plugins. It is similar to the model template, but creates a `Script` instead of a `ModuleScript` in the `src` directory. It can be used like this: `rojo init --kind plugin`
+
+* Added protection against syncing non-place projects as a place. ([#691])
+* Add buttons for navigation on the Connected page ([#722])
+
+### Fixes
+* Significantly improved performance of `rojo sourcemap` ([#668])
+* Fixed the diff visualizer of connected sessions. ([#674])
+* Fixed disconnected session activity. ([#675])
+* Skip confirming patches that contain only a datamodel name change. ([#688])
+* Fix Rojo breaking when users undo/redo in Studio ([#708])
+* Improve tooltip behavior ([#723])
+* Better settings controls ([#725])
+* Rework patch visualizer with many fixes and improvements ([#713], [#726], [#755])
+
+[#668]: https://github.com/rojo-rbx/rojo/pull/668
+[#674]: https://github.com/rojo-rbx/rojo/pull/674
+[#675]: https://github.com/rojo-rbx/rojo/pull/675
+[#688]: https://github.com/rojo-rbx/rojo/pull/688
+[#689]: https://github.com/rojo-rbx/rojo/pull/689
+[#691]: https://github.com/rojo-rbx/rojo/pull/691
+[#709]: https://github.com/rojo-rbx/rojo/pull/709
+[#708]: https://github.com/rojo-rbx/rojo/pull/708
+[#713]: https://github.com/rojo-rbx/rojo/pull/713
+[#717]: https://github.com/rojo-rbx/rojo/pull/717
+[#722]: https://github.com/rojo-rbx/rojo/pull/722
+[#723]: https://github.com/rojo-rbx/rojo/pull/723
+[#725]: https://github.com/rojo-rbx/rojo/pull/725
+[#726]: https://github.com/rojo-rbx/rojo/pull/726
+[#633]: https://github.com/rojo-rbx/rojo/pull/633
+[#735]: https://github.com/rojo-rbx/rojo/pull/735
+[#731]: https://github.com/rojo-rbx/rojo/pull/731
+[#738]: https://github.com/rojo-rbx/rojo/pull/738
+[#748]: https://github.com/rojo-rbx/rojo/pull/748
+[#755]: https://github.com/rojo-rbx/rojo/pull/755
+[#765]: https://github.com/rojo-rbx/rojo/pull/765
+[#770]: https://github.com/rojo-rbx/rojo/pull/770
+[#771]: https://github.com/rojo-rbx/rojo/pull/771
+[#774]: https://github.com/rojo-rbx/rojo/pull/774
+[rbx-dom#299]: https://github.com/rojo-rbx/rbx-dom/pull/299
+[rbx-dom#296]: https://github.com/rojo-rbx/rbx-dom/pull/296
+
 ## [7.3.0] - April 22, 2023
 * Added `$attributes` to project format. ([#574])
 * Added `--watch` flag to `rojo sourcemap`. ([#602])
@@ -566,4 +792,4 @@ This is a general maintenance release for the Rojo 0.5.x release series.
 * More robust syncing with a new reconciler
 
 ## [0.1.0](https://github.com/rojo-rbx/rojo/releases/tag/v0.1.0) (November 29, 2017)
-* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)
+* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)

Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "rojo"
-version = "7.3.0"
+version = "7.4.4"
-rust-version = "1.68.2"
+rust-version = "1.70.0"
 authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 description = "Enables professional-grade development tools for Roblox developers"
 license = "MPL-2.0"
@@ -12,9 +12,7 @@ readme = "README.md"
 edition = "2021"
 build = "build.rs"
 
-exclude = [
+exclude = ["/test-projects/**"]
-    "/test-projects/**",
-]
 
 [profile.dev]
 panic = "abort"
@@ -42,7 +40,7 @@ name = "build"
 harness = false
 
 [dependencies]
-memofs = { version = "0.2.0", path = "crates/memofs" }
+memofs = { version = "0.3.0", path = "crates/memofs" }
 
 # These dependencies can be uncommented when working on rbx-dom simultaneously
 # rbx_binary = { path = "../rbx-dom/rbx_binary" }
@@ -51,11 +49,11 @@ memofs = { version = "0.2.0", path = "crates/memofs" }
 # rbx_reflection_database = { path = "../rbx-dom/rbx_reflection_database" }
 # rbx_xml = { path = "../rbx-dom/rbx_xml" }
 
-rbx_binary = "0.7.0"
+rbx_binary = "0.7.7"
-rbx_dom_weak = "2.4.0"
+rbx_dom_weak = "2.9.0"
-rbx_reflection = "4.2.0"
+rbx_reflection = "4.7.0"
-rbx_reflection_database = "0.2.6"
+rbx_reflection_database = "0.2.12"
-rbx_xml = "0.13.0"
+rbx_xml = "0.13.5"
 
 anyhow = "1.0.44"
 backtrace = "0.3.61"
@@ -71,13 +69,19 @@ hyper = { version = "0.14.13", features = ["server", "tcp", "http1"] }
 jod-thread = "0.1.2"
 log = "0.4.14"
 maplit = "1.0.2"
-notify = "4.0.17"
+num_cpus = "1.15.0"
 opener = "0.5.0"
-reqwest = { version = "0.11.10", features = ["blocking", "json", "native-tls-vendored"] }
+rayon = "1.7.0"
+reqwest = { version = "0.11.10", features = [
+    "blocking",
+    "json",
+    "native-tls-vendored",
+] }
 ritz = "0.1.0"
 roblox_install = "1.0.0"
 serde = { version = "1.0.130", features = ["derive", "rc"] }
 serde_json = "1.0.68"
+toml = "0.5.9"
 termcolor = "1.1.2"
 thiserror = "1.0.30"
 tokio = { version = "1.12.0", features = ["rt", "rt-multi-thread"] }
@@ -90,13 +94,14 @@ tracy-client = { version = "0.13.2", optional = true }
 winreg = "0.10.1"
 
 [build-dependencies]
-memofs = { version = "0.2.0", path = "crates/memofs" }
+memofs = { version = "0.3.0", path = "crates/memofs" }
 
 embed-resource = "1.6.4"
 anyhow = "1.0.44"
 bincode = "1.3.3"
 fs-err = "2.6.0"
 maplit = "1.0.2"
+semver = "1.0.19"
 
 [dev-dependencies]
 rojo-insta-ext = { path = "crates/rojo-insta-ext" }

README.md

@@ -8,7 +8,6 @@
     <a href="https://github.com/rojo-rbx/rojo/actions"><img src="https://github.com/rojo-rbx/rojo/workflows/CI/badge.svg" alt="Actions status" /></a>
     <a href="https://crates.io/crates/rojo"><img src="https://img.shields.io/crates/v/rojo.svg?label=latest%20release" alt="Latest server version" /></a>
     <a href="https://rojo.space/docs"><img src="https://img.shields.io/badge/docs-website-brightgreen.svg" alt="Rojo Documentation" /></a>
-    <a href="https://www.patreon.com/lpghatguy"><img src="https://img.shields.io/badge/sponsor-patreon-red" alt="Patreon" /></a>
 </div>
 
 <hr />
@@ -41,7 +40,7 @@ Check out our [contribution guide](CONTRIBUTING.md) for detailed instructions fo
 
 Pull requests are welcome!
 
-Rojo supports Rust 1.58.1 and newer. The minimum supported version of Rust is based on the latest versions of the dependencies that Rojo has.
+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.

aftman.toml

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

assets/default-model-project/README.md

@@ -2,7 +2,7 @@
 Generated by [Rojo](https://github.com/rojo-rbx/rojo) {rojo_version}.
 
 ## Getting Started
-To build this library or plugin, use:
+To build this library, use:
 
 ```bash
 rojo build -o "{project_name}.rbxmx"

assets/default-plugin-project/README.md

@@ -0,0 +1,17 @@
+# {project_name}
+Generated by [Rojo](https://github.com/rojo-rbx/rojo) {rojo_version}.
+
+## Getting Started
+To build this plugin to your local plugins folder, use:
+
+```bash
+rojo build -p "{project_name}.rbxm"
+```
+
+You can include the `watch` flag to re-build it on save:
+
+```bash
+rojo build -p "{project_name}.rbxm" --watch
+```
+
+For more help, check out [the Rojo documentation](https://rojo.space/docs).

assets/default-plugin-project/default.project.json

@@ -0,0 +1,6 @@
+{
+  "name": "{project_name}",
+  "tree": {
+    "$path": "src"
+  }
+}

assets/default-plugin-project/gitignore.txt

@@ -0,0 +1,3 @@
+# Plugin model files
+/{project_name}.rbxmx
+/{project_name}.rbxm

benches/build.rs

@@ -31,11 +31,12 @@ fn bench_build_place(c: &mut Criterion, name: &str, path: &str) {
 fn place_setup<P: AsRef<Path>>(input_path: P) -> (TempDir, BuildCommand) {
     let dir = tempdir().unwrap();
     let input = input_path.as_ref().to_path_buf();
-    let output = dir.path().join("output.rbxlx");
+    let output = Some(dir.path().join("output.rbxlx"));
 
     let options = BuildCommand {
         project: input,
         watch: false,
+        plugin: None,
         output,
     };
 

build.rs

@@ -7,6 +7,7 @@ use fs_err as fs;
 use fs_err::File;
 use maplit::hashmap;
 use memofs::VfsSnapshot;
+use semver::Version;
 
 fn snapshot_from_fs_path(path: &Path) -> io::Result<VfsSnapshot> {
     println!("cargo:rerun-if-changed={}", path.display());
@@ -43,6 +44,15 @@ fn main() -> Result<(), anyhow::Error> {
     let root_dir = env::var_os("CARGO_MANIFEST_DIR").unwrap();
     let plugin_root = PathBuf::from(root_dir).join("plugin");
 
+    let our_version = Version::parse(env::var_os("CARGO_PKG_VERSION").unwrap().to_str().unwrap())?;
+    let plugin_version =
+        Version::parse(fs::read_to_string(plugin_root.join("Version.txt"))?.trim())?;
+
+    assert_eq!(
+        our_version, plugin_version,
+        "plugin version does not match Cargo version"
+    );
+
     let snapshot = VfsSnapshot::dir(hashmap! {
         "default.project.json" => snapshot_from_fs_path(&plugin_root.join("default.project.json"))?,
         "fmt" => snapshot_from_fs_path(&plugin_root.join("fmt"))?,
@@ -51,10 +61,11 @@ fn main() -> Result<(), anyhow::Error> {
         "rbx_dom_lua" => snapshot_from_fs_path(&plugin_root.join("rbx_dom_lua"))?,
         "src" => snapshot_from_fs_path(&plugin_root.join("src"))?,
         "Packages" => snapshot_from_fs_path(&plugin_root.join("Packages"))?,
+        "Version.txt" => snapshot_from_fs_path(&plugin_root.join("Version.txt"))?,
     });
 
     let out_path = Path::new(&out_dir).join("plugin.bincode");
-    let out_file = File::create(&out_path)?;
+    let out_file = File::create(out_path)?;
 
     bincode::serialize_into(out_file, &snapshot)?;
 

crates/memofs/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased Changes
 
+## 0.3.0 (2024-03-15)
+* Changed `StdBackend` file watching component to use minimal recursive watches. [#830]
+* Added `Vfs::read_to_string` and `Vfs::read_to_string_lf_normalized` [#854]
+
+[#830]: https://github.com/rojo-rbx/rojo/pull/830
+[#854]: https://github.com/rojo-rbx/rojo/pull/854
+
 ## 0.2.0 (2021-08-23)
 * Updated to `crossbeam-channel` 0.5.1.
 
@@ -15,4 +22,4 @@
 * Improved error messages using the [fs-err](https://crates.io/crates/fs-err) crate.
 
 ## 0.1.0 (2020-03-10)
-* Initial release
+* Initial release

crates/memofs/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "memofs"
 description = "Virtual filesystem with configurable backends."
-version = "0.2.0"
+version = "0.3.0"
 authors = ["Lucien Greathouse <me@lpghatguy.com>"]
 edition = "2018"
 readme = "README.md"

crates/memofs/src/in_memory_fs.rs

@@ -50,6 +50,12 @@ impl InMemoryFs {
     }
 }
 
+impl Default for InMemoryFs {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
 #[derive(Debug)]
 struct InMemoryFsInner {
     entries: HashMap<PathBuf, Entry>,

crates/memofs/src/lib.rs

@@ -22,9 +22,9 @@ mod noop_backend;
 mod snapshot;
 mod std_backend;
 
-use std::io;
 use std::path::{Path, PathBuf};
 use std::sync::{Arc, Mutex, MutexGuard};
+use std::{io, str};
 
 pub use in_memory_fs::InMemoryFs;
 pub use noop_backend::NoopBackend;
@@ -155,6 +155,24 @@ impl VfsInner {
         Ok(Arc::new(contents))
     }
 
+    fn read_to_string<P: AsRef<Path>>(&mut self, path: P) -> io::Result<Arc<String>> {
+        let path = path.as_ref();
+        let contents = self.backend.read(path)?;
+
+        if self.watch_enabled {
+            self.backend.watch(path)?;
+        }
+
+        let contents_str = str::from_utf8(&contents).map_err(|_| {
+            io::Error::new(
+                io::ErrorKind::InvalidData,
+                format!("File was not valid UTF-8: {}", path.display()),
+            )
+        })?;
+
+        Ok(Arc::new(contents_str.into()))
+    }
+
     fn write<P: AsRef<Path>, C: AsRef<[u8]>>(&mut self, path: P, contents: C) -> io::Result<()> {
         let path = path.as_ref();
         let contents = contents.as_ref();
@@ -194,11 +212,8 @@ impl VfsInner {
     }
 
     fn commit_event(&mut self, event: &VfsEvent) -> io::Result<()> {
-        match event {
+        if let VfsEvent::Remove(path) = event {
-            VfsEvent::Remove(path) => {
+            let _ = self.backend.unwatch(path);
-                let _ = self.backend.unwatch(&path);
-            }
-            _ => {}
         }
 
         Ok(())
@@ -261,6 +276,33 @@ impl Vfs {
         self.inner.lock().unwrap().read(path)
     }
 
+    /// Read a file from the VFS (or from the underlying backend if it isn't
+    /// resident) into a string.
+    ///
+    /// Roughly equivalent to [`std::fs::read_to_string`][std::fs::read_to_string].
+    ///
+    /// [std::fs::read_to_string]: https://doc.rust-lang.org/stable/std/fs/fn.read_to_string.html
+    #[inline]
+    pub fn read_to_string<P: AsRef<Path>>(&self, path: P) -> io::Result<Arc<String>> {
+        let path = path.as_ref();
+        self.inner.lock().unwrap().read_to_string(path)
+    }
+
+    /// Read a file from the VFS (or the underlying backend if it isn't
+    /// resident) into a string, and normalize its line endings to LF.
+    ///
+    /// Roughly equivalent to [`std::fs::read_to_string`][std::fs::read_to_string], but also performs
+    /// line ending normalization.
+    ///
+    /// [std::fs::read_to_string]: https://doc.rust-lang.org/stable/std/fs/fn.read_to_string.html
+    #[inline]
+    pub fn read_to_string_lf_normalized<P: AsRef<Path>>(&self, path: P) -> io::Result<Arc<String>> {
+        let path = path.as_ref();
+        let contents = self.inner.lock().unwrap().read_to_string(path)?;
+
+        Ok(contents.replace("\r\n", "\n").into())
+    }
+
     /// Write a file to the VFS and the underlying backend.
     ///
     /// Roughly equivalent to [`std::fs::write`][std::fs::write].
@@ -431,3 +473,23 @@ impl VfsLock<'_> {
         self.inner.commit_event(event)
     }
 }
+
+#[cfg(test)]
+mod test {
+    use crate::{InMemoryFs, Vfs, VfsSnapshot};
+
+    /// https://github.com/rojo-rbx/rojo/issues/899
+    #[test]
+    fn read_to_string_lf_normalized_keeps_trailing_newline() {
+        let mut imfs = InMemoryFs::new();
+        imfs.load_snapshot("test", VfsSnapshot::file("bar\r\nfoo\r\n\r\n"))
+            .unwrap();
+
+        let vfs = Vfs::new(imfs);
+
+        assert_eq!(
+            vfs.read_to_string_lf_normalized("test").unwrap().as_str(),
+            "bar\nfoo\n\n"
+        );
+    }
+}

crates/memofs/src/noop_backend.rs

@@ -74,3 +74,9 @@ impl VfsBackend for NoopBackend {
         ))
     }
 }
+
+impl Default for NoopBackend {
+    fn default() -> Self {
+        Self::new()
+    }
+}

crates/memofs/src/std_backend.rs

@@ -1,8 +1,8 @@
-use std::io;
+use std::path::{Path, PathBuf};
-use std::path::Path;
 use std::sync::mpsc;
 use std::thread;
 use std::time::Duration;
+use std::{collections::HashSet, io};
 
 use crossbeam_channel::Receiver;
 use notify::{watcher, DebouncedEvent, RecommendedWatcher, RecursiveMode, Watcher};
@@ -13,6 +13,7 @@ use crate::{DirEntry, Metadata, ReadDir, VfsBackend, VfsEvent};
 pub struct StdBackend {
     watcher: RecommendedWatcher,
     watcher_receiver: Receiver<VfsEvent>,
+    watches: HashSet<PathBuf>,
 }
 
 impl StdBackend {
@@ -48,6 +49,7 @@ impl StdBackend {
         Self {
             watcher,
             watcher_receiver: rx,
+            watches: HashSet::new(),
         }
     }
 }
@@ -97,14 +99,30 @@ impl VfsBackend for StdBackend {
     }
 
     fn watch(&mut self, path: &Path) -> io::Result<()> {
-        self.watcher
+        if self.watches.contains(path)
-            .watch(path, RecursiveMode::NonRecursive)
+            || path
-            .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
+                .ancestors()
+                .any(|ancestor| self.watches.contains(ancestor))
+        {
+            Ok(())
+        } else {
+            self.watches.insert(path.to_path_buf());
+            self.watcher
+                .watch(path, RecursiveMode::Recursive)
+                .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
+        }
     }
 
     fn unwatch(&mut self, path: &Path) -> io::Result<()> {
+        self.watches.remove(path);
         self.watcher
             .unwatch(path)
             .map_err(|inner| io::Error::new(io::ErrorKind::Other, inner))
     }
 }
+
+impl Default for StdBackend {
+    fn default() -> Self {
+        Self::new()
+    }
+}

plugin/Version.txt

@@ -0,0 +1 @@
+7.4.4

plugin/default.project.json

@@ -1,25 +1,27 @@
 {
-	"name": "Rojo",
+  "name": "Rojo",
-	"tree": {
+  "tree": {
-		"$className": "Folder",
+    "$className": "Folder",
-		"Plugin": {
+    "Plugin": {
-			"$path": "src"
+      "$path": "src"
-		},
+    },
-		"Packages": {
+    "Packages": {
-			"$path": "Packages",
+      "$path": "Packages",
-
+      "Log": {
-			"Log": {
+        "$path": "log"
-				"$path": "log"
+      },
-			},
+      "Http": {
-			"Http": {
+        "$path": "http"
-				"$path": "http"
+      },
-			},
+      "Fmt": {
-			"Fmt": {
+        "$path": "fmt"
-				"$path": "fmt"
+      },
-			},
+      "RbxDom": {
-			"RbxDom": {
+        "$path": "rbx_dom_lua"
-				"$path": "rbx_dom_lua"
+      }
-			}
+    },
-		}
+    "Version": {
-	}
+      "$path": "Version.txt"
-}
+    }
+  }
+}

plugin/http/Error.lua

@@ -3,12 +3,12 @@ Error.__index = Error
 
 Error.Kind = {
 	HttpNotEnabled = {
-		message = "Rojo requires HTTP access, which is not enabled.\n" ..
+		message = "Rojo requires HTTP access, which is not enabled.\n"
-			"Check your game settings, located in the 'Home' tab of Studio.",
+			.. "Check your game settings, located in the 'Home' tab of Studio.",
 	},
 	ConnectFailed = {
-		message = "Couldn't connect to the Rojo server.\n" ..
+		message = "Couldn't connect to the Rojo server.\n"
-			"Make sure the server is running — use 'rojo serve' to run it!",
+			.. "Make sure the server is running — use 'rojo serve' to run it!",
 	},
 	Timeout = {
 		message = "HTTP request timed out.",
@@ -63,4 +63,13 @@ function Error.fromRobloxErrorString(message)
 	return Error.new(Error.Kind.Unknown, message)
 end
 
+function Error.fromResponse(response)
+	local lower = (response.body or ""):lower()
+	if response.code == 408 or response.code == 504 or lower:find("timed? ?out") then
+		return Error.new(Error.Kind.Timeout)
+	end
+
+	return Error.new(Error.Kind.Unknown, string.format("%s: %s", tostring(response.code), tostring(response.body)))
+end
+
 return Error

plugin/http/init.lua

@@ -30,8 +30,13 @@ local function performRequest(requestParams)
 			end)
 
 			if success then
-				Log.trace("Request {} success, status code {}", requestId, response.StatusCode)
+				Log.trace("Request {} success, response {:#?}", requestId, response)
-				resolve(HttpResponse.fromRobloxResponse(response))
+				local httpResponse = HttpResponse.fromRobloxResponse(response)
+				if httpResponse:isSuccess() then
+					resolve(httpResponse)
+				else
+					reject(HttpError.fromResponse(httpResponse))
+				end
 			else
 				Log.trace("Request {} failure: {:?}", requestId, response)
 				reject(HttpError.fromRobloxErrorString(response))
@@ -63,4 +68,4 @@ function Http.jsonDecode(source)
 	return HttpService:JSONDecode(source)
 end
 
-return Http
+return Http

plugin/rbx_dom_lua/EncodedValue.lua

@@ -20,8 +20,8 @@ local function serializeFloat(value)
 	return value
 end
 
-local ALL_AXES = {"X", "Y", "Z"}
+local ALL_AXES = { "X", "Y", "Z" }
-local ALL_FACES = {"Right", "Top", "Back", "Left", "Bottom", "Front"}
+local ALL_FACES = { "Right", "Top", "Back", "Left", "Bottom", "Front" }
 
 local EncodedValue = {}
 
@@ -37,7 +37,10 @@ types = {
 				if ok then
 					output[key] = result
 				else
-					local warning = ("Could not decode attribute value of type %q: %s"):format(typeof(value), tostring(result))
+					local warning = ("Could not decode attribute value of type %q: %s"):format(
+						typeof(value),
+						tostring(result)
+					)
 					warn(warning)
 				end
 			end
@@ -53,7 +56,10 @@ types = {
 				if ok then
 					output[key] = result
 				else
-					local warning = ("Could not encode attribute value of type %q: %s"):format(typeof(value), tostring(result))
+					local warning = ("Could not encode attribute value of type %q: %s"):format(
+						typeof(value),
+						tostring(result)
+					)
 					warn(warning)
 				end
 			end
@@ -111,6 +117,7 @@ types = {
 			local pos = pod.position
 			local orient = pod.orientation
 
+			--stylua: ignore
 			return CFrame.new(
 				pos[1], pos[2], pos[3],
 				orient[1][1], orient[1][2], orient[1][3],
@@ -120,17 +127,14 @@ types = {
 		end,
 
 		toPod = function(roblox)
-			local x, y, z,
+			local x, y, z, r00, r01, r02, r10, r11, r12, r20, r21, r22 = roblox:GetComponents()
-				r00, r01, r02,
-				r10, r11, r12,
-				r20, r21, r22 = roblox:GetComponents()
 
 			return {
-				position = {x, y, z},
+				position = { x, y, z },
 				orientation = {
-					{r00, r01, r02},
+					{ r00, r01, r02 },
-					{r10, r11, r12},
+					{ r10, r11, r12 },
-					{r20, r21, r22},
+					{ r20, r21, r22 },
 				},
 			}
 		end,
@@ -140,7 +144,7 @@ types = {
 		fromPod = unpackDecoder(Color3.new),
 
 		toPod = function(roblox)
-			return {roblox.r, roblox.g, roblox.b}
+			return { roblox.r, roblox.g, roblox.b }
 		end,
 	},
 
@@ -161,10 +165,7 @@ types = {
 			local keypoints = {}
 
 			for index, keypoint in ipairs(pod.keypoints) do
-				keypoints[index] = ColorSequenceKeypoint.new(
+				keypoints[index] = ColorSequenceKeypoint.new(keypoint.time, types.Color3.fromPod(keypoint.color))
-					keypoint.time,
-					types.Color3.fromPod(keypoint.color)
-				)
 			end
 
 			return ColorSequence.new(keypoints)
@@ -265,11 +266,32 @@ types = {
 		toPod = identity,
 	},
 
+	MaterialColors = {
+		fromPod = function(pod: { [string]: { number } })
+			local real = {}
+			for name, color in pod do
+				real[Enum.Material[name]] = Color3.fromRGB(color[1], color[2], color[3])
+			end
+			return real
+		end,
+		toPod = function(roblox: { [Enum.Material]: Color3 })
+			local pod = {}
+			for material, color in roblox do
+				pod[material.Name] = {
+					math.round(math.clamp(color.R, 0, 1) * 255),
+					math.round(math.clamp(color.G, 0, 1) * 255),
+					math.round(math.clamp(color.B, 0, 1) * 255),
+				}
+			end
+			return pod
+		end,
+	},
+
 	NumberRange = {
 		fromPod = unpackDecoder(NumberRange.new),
 
 		toPod = function(roblox)
-			return {roblox.Min, roblox.Max}
+			return { roblox.Min, roblox.Max }
 		end,
 	},
 
@@ -278,11 +300,7 @@ types = {
 			local keypoints = {}
 
 			for index, keypoint in ipairs(pod.keypoints) do
-				keypoints[index] = NumberSequenceKeypoint.new(
+				keypoints[index] = NumberSequenceKeypoint.new(keypoint.time, keypoint.value, keypoint.envelope)
-					keypoint.time,
-					keypoint.value,
-					keypoint.envelope
-				)
 			end
 
 			return NumberSequence.new(keypoints)
@@ -337,10 +355,7 @@ types = {
 
 	Ray = {
 		fromPod = function(pod)
-			return Ray.new(
+			return Ray.new(types.Vector3.fromPod(pod.origin), types.Vector3.fromPod(pod.direction))
-				types.Vector3.fromPod(pod.origin),
-				types.Vector3.fromPod(pod.direction)
-			)
 		end,
 
 		toPod = function(roblox)
@@ -353,10 +368,7 @@ types = {
 
 	Rect = {
 		fromPod = function(pod)
-			return Rect.new(
+			return Rect.new(types.Vector2.fromPod(pod[1]), types.Vector2.fromPod(pod[2]))
-				types.Vector2.fromPod(pod[1]),
-				types.Vector2.fromPod(pod[2])
-			)
 		end,
 
 		toPod = function(roblox)
@@ -368,31 +380,28 @@ types = {
 	},
 
 	Ref = {
-		fromPod = function(_pod)
+		fromPod = function(_)
 			error("Ref cannot be decoded on its own")
 		end,
 
-		toPod = function(_roblox)
+		toPod = function(_)
 			error("Ref can not be encoded on its own")
 		end,
 	},
 
 	Region3 = {
-		fromPod = function(pod)
+		fromPod = function(_)
 			error("Region3 is not implemented")
 		end,
 
-		toPod = function(roblox)
+		toPod = function(_)
 			error("Region3 is not implemented")
 		end,
 	},
 
 	Region3int16 = {
 		fromPod = function(pod)
-			return Region3int16.new(
+			return Region3int16.new(types.Vector3int16.fromPod(pod[1]), types.Vector3int16.fromPod(pod[2]))
-				types.Vector3int16.fromPod(pod[1]),
-				types.Vector3int16.fromPod(pod[2])
-			)
 		end,
 
 		toPod = function(roblox)
@@ -404,11 +413,11 @@ types = {
 	},
 
 	SharedString = {
-		fromPod = function(pod)
+		fromPod = function(_pod)
 			error("SharedString is not supported")
 		end,
 
-		toPod = function(roblox)
+		toPod = function(_roblox)
 			error("SharedString is not supported")
 		end,
 	},
@@ -422,16 +431,13 @@ types = {
 		fromPod = unpackDecoder(UDim.new),
 
 		toPod = function(roblox)
-			return {roblox.Scale, roblox.Offset}
+			return { roblox.Scale, roblox.Offset }
 		end,
 	},
 
 	UDim2 = {
 		fromPod = function(pod)
-			return UDim2.new(
+			return UDim2.new(types.UDim.fromPod(pod[1]), types.UDim.fromPod(pod[2]))
-				types.UDim.fromPod(pod[1]),
-				types.UDim.fromPod(pod[2])
-			)
 		end,
 
 		toPod = function(roblox)
@@ -462,7 +468,7 @@ types = {
 		fromPod = unpackDecoder(Vector2int16.new),
 
 		toPod = function(roblox)
-			return {roblox.X, roblox.Y}
+			return { roblox.X, roblox.Y }
 		end,
 	},
 
@@ -482,14 +488,37 @@ types = {
 		fromPod = unpackDecoder(Vector3int16.new),
 
 		toPod = function(roblox)
-			return {roblox.X, roblox.Y, roblox.Z}
+			return { roblox.X, roblox.Y, roblox.Z }
 		end,
 	},
 }
 
+types.OptionalCFrame = {
+	fromPod = function(pod)
+		if pod == nil then
+			return nil
+		else
+			return types.CFrame.fromPod(pod)
+		end
+	end,
+
+	toPod = function(roblox)
+		if roblox == nil then
+			return nil
+		else
+			return types.CFrame.toPod(roblox)
+		end
+	end,
+}
+
 function EncodedValue.decode(encodedValue)
 	local ty, value = next(encodedValue)
 
+	if ty == nil then
+		-- If the encoded pair is empty, assume it is an unoccupied optional value
+		return true, nil
+	end
+
 	local typeImpl = types[ty]
 	if typeImpl == nil then
 		return false, "Couldn't decode value " .. tostring(ty)

plugin/rbx_dom_lua/EncodedValue.spec.lua

@@ -1,72 +0,0 @@
-return function()
-	local HttpService = game:GetService("HttpService")
-	
-	local EncodedValue = require(script.Parent.EncodedValue)
-	local allValues = require(script.Parent.allValues)
-
-	local function deepEq(a, b)
-		if typeof(a) ~= typeof(b) then
-			return false
-		end
-
-		local ty = typeof(a)
-
-		if ty == "table" then
-			local visited = {}
-			
-			for key, valueA in pairs(a) do
-				visited[key] = true
-				
-				if not deepEq(valueA, b[key]) then
-					return false
-				end
-			end
-
-			for key, valueB in pairs(b) do
-				if visited[key] then
-					continue
-				end
-
-				if not deepEq(valueB, a[key]) then
-					return false
-				end
-			end
-
-			return true
-		else
-			return a == b
-		end
-	end
-
-	local extraAssertions = {
-		CFrame = function(value)
-			expect(value).to.equal(CFrame.new(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12))
-		end,
-	}
-
-	for testName, testEntry in pairs(allValues) do
-		it("round trip " .. testName, function()
-			local ok, decoded = EncodedValue.decode(testEntry.value)
-			assert(ok, decoded)
-
-			if extraAssertions[testName] ~= nil then
-				extraAssertions[testName](decoded)
-			end
-
-			local ok, encoded = EncodedValue.encode(decoded, testEntry.ty)
-			assert(ok, encoded)
-
-			if not deepEq(encoded, testEntry.value) then
-				local expected = HttpService:JSONEncode(testEntry.value)
-				local actual = HttpService:JSONEncode(encoded)
-
-				local message = string.format(
-					"Round-trip results did not match.\nExpected:\n%s\nActual:\n%s",
-					expected, actual
-				)
-
-				error(message)
-			end
-		end)
-	end
-end

plugin/rbx_dom_lua/Error.lua

@@ -25,4 +25,4 @@ function Error:__tostring()
 	return ("Error(%s: %s)"):format(self.kind, tostring(self.extra))
 end
 
-return Error
+return Error

plugin/rbx_dom_lua/allValues.json

@@ -230,6 +230,118 @@
     },
     "ty": "Int64"
   },
+  "MaterialColors": {
+    "value": {
+      "MaterialColors": {
+        "Grass": [
+          106,
+          127,
+          63
+        ],
+        "Slate": [
+          63,
+          127,
+          107
+        ],
+        "Concrete": [
+          127,
+          102,
+          63
+        ],
+        "Brick": [
+          138,
+          86,
+          62
+        ],
+        "Sand": [
+          143,
+          126,
+          95
+        ],
+        "WoodPlanks": [
+          139,
+          109,
+          79
+        ],
+        "Rock": [
+          102,
+          108,
+          111
+        ],
+        "Glacier": [
+          101,
+          176,
+          234
+        ],
+        "Snow": [
+          195,
+          199,
+          218
+        ],
+        "Sandstone": [
+          137,
+          90,
+          71
+        ],
+        "Mud": [
+          58,
+          46,
+          36
+        ],
+        "Basalt": [
+          30,
+          30,
+          37
+        ],
+        "Ground": [
+          102,
+          92,
+          59
+        ],
+        "CrackedLava": [
+          232,
+          156,
+          74
+        ],
+        "Asphalt": [
+          115,
+          123,
+          107
+        ],
+        "Cobblestone": [
+          132,
+          123,
+          90
+        ],
+        "Ice": [
+          129,
+          194,
+          224
+        ],
+        "LeafyGrass": [
+          115,
+          132,
+          74
+        ],
+        "Salt": [
+          198,
+          189,
+          181
+        ],
+        "Limestone": [
+          206,
+          173,
+          148
+        ],
+        "Pavement": [
+          148,
+          148,
+          140
+        ]
+      }
+    },
+    "ty": "MaterialColors"
+  },
   "NumberRange": {
     "value": {
       "NumberRange": [
@@ -258,6 +370,41 @@
     },
     "ty": "NumberSequence"
   },
+  "OptionalCFrame-None": {
+    "value": {
+      "OptionalCFrame": null
+    },
+    "ty": "OptionalCFrame"
+  },
+  "OptionalCFrame-Some": {
+    "value": {
+      "OptionalCFrame": {
+        "position": [
+          0.0,
+          0.0,
+          0.0
+        ],
+        "orientation": [
+          [
+            1.0,
+            0.0,
+            0.0
+          ],
+          [
+            0.0,
+            1.0,
+            0.0
+          ],
+          [
+            0.0,
+            0.0,
+            1.0
+          ]
+        ]
+      }
+    },
+    "ty": "OptionalCFrame"
+  },
   "PhysicalProperties-Custom": {
     "value": {
       "PhysicalProperties": {

plugin/rbx_dom_lua/base64.lua

@@ -136,4 +136,4 @@ end
 return {
 	decode = decodeBase64,
 	encode = encodeBase64,
-}
+}

plugin/rbx_dom_lua/base64.spec.lua

@@ -1,29 +0,0 @@
-return function()
-	local base64 = require(script.Parent.base64)
-
-	it("should encode and decode", function()
-		local function try(str, expected)
-			local encoded = base64.encode(str)
-			expect(encoded).to.equal(expected)
-			expect(base64.decode(encoded)).to.equal(str)
-		end
-
-		try("Man", "TWFu")
-		try("Ma", "TWE=")
-		try("M", "TQ==")
-		try("ManM", "TWFuTQ==")
-		try(
-			[[Man is distinguished, not only by his reason, but by this ]]..
-			[[singular passion from other animals, which is a lust of the ]]..
-			[[mind, that by a perseverance of delight in the continued and ]]..
-			[[indefatigable generation of knowledge, exceeds the short ]]..
-			[[vehemence of any carnal pleasure.]],
-			[[TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sI]]..
-			[[GJ1dCBieSB0aGlzIHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYW]]..
-			[[xzLCB3aGljaCBpcyBhIGx1c3Qgb2YgdGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJ]]..
-			[[zZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGludWVkIGFuZCBpbmRl]]..
-			[[ZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRoZ]]..
-			[[SBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=]]
-		)
-	end)
-end

plugin/rbx_dom_lua/customProperties.lua

@@ -1,4 +1,45 @@
 local CollectionService = game:GetService("CollectionService")
+local ScriptEditorService = game:GetService("ScriptEditorService")
+
+--- A list of `Enum.Material` values that are used for Terrain.MaterialColors
+local TERRAIN_MATERIAL_COLORS = {
+	Enum.Material.Grass,
+	Enum.Material.Slate,
+	Enum.Material.Concrete,
+	Enum.Material.Brick,
+	Enum.Material.Sand,
+	Enum.Material.WoodPlanks,
+	Enum.Material.Rock,
+	Enum.Material.Glacier,
+	Enum.Material.Snow,
+	Enum.Material.Sandstone,
+	Enum.Material.Mud,
+	Enum.Material.Basalt,
+	Enum.Material.Ground,
+	Enum.Material.CrackedLava,
+	Enum.Material.Asphalt,
+	Enum.Material.Cobblestone,
+	Enum.Material.Ice,
+	Enum.Material.LeafyGrass,
+	Enum.Material.Salt,
+	Enum.Material.Limestone,
+	Enum.Material.Pavement,
+}
+
+local function isAttributeNameValid(attributeName)
+	-- For SetAttribute to succeed, the attribute name must be less than or
+	-- equal to 100 characters...
+	return #attributeName <= 100
+		-- ...and must only contain alphanumeric characters, periods, hyphens,
+		-- underscores, or forward slashes.
+		and attributeName:match("[^%w%.%-_/]") == nil
+end
+
+local function isAttributeNameReserved(attributeName)
+	-- For SetAttribute to succeed, attribute names must not use the RBX
+	-- prefix, which is reserved by Roblox.
+	return attributeName:sub(1, 3) == "RBX"
+end
 
 -- Defines how to read and write properties that aren't directly scriptable.
 --
@@ -11,18 +52,40 @@ return {
 			end,
 			write = function(instance, _, value)
 				local existing = instance:GetAttributes()
+				local didAllWritesSucceed = true
 
-				for key, attr in pairs(value) do
+				for attributeName, attributeValue in pairs(value) do
-					instance:SetAttribute(key, attr)
+					if isAttributeNameReserved(attributeName) then
+						-- If the attribute name is reserved, then we don't
+						-- really care about reporting any failures about
+						-- it.
+						continue
+					end
+
+					if not isAttributeNameValid(attributeName) then
+						didAllWritesSucceed = false
+						continue
+					end
+
+					instance:SetAttribute(attributeName, attributeValue)
 				end
 
-				for key in pairs(existing) do
+				for existingAttributeName in pairs(existing) do
-					if value[key] == nil then
+					if isAttributeNameReserved(existingAttributeName) then
-						instance:SetAttribute(key, nil)
+						continue
+					end
+
+					if not isAttributeNameValid(existingAttributeName) then
+						didAllWritesSucceed = false
+						continue
+					end
+
+					if value[existingAttributeName] == nil then
+						instance:SetAttribute(existingAttributeName, nil)
 					end
 				end
 
-				return true
+				return didAllWritesSucceed
 			end,
 		},
 		Tags = {
@@ -52,10 +115,10 @@ return {
 	},
 	LocalizationTable = {
 		Contents = {
-			read = function(instance, key)
+			read = function(instance, _)
 				return true, instance:GetContents()
 			end,
-			write = function(instance, key, value)
+			write = function(instance, _, value)
 				instance:SetContents(value)
 				return true
 			end,
@@ -70,5 +133,68 @@ return {
 				return true, instance:ScaleTo(value)
 			end,
 		},
+		WorldPivotData = {
+			read = function(instance)
+				return true, instance.WorldPivot
+			end,
+			write = function(instance, _, value)
+				if value == nil then
+					return true, nil
+				else
+					instance.WorldPivot = value
+					return true
+				end
+			end,
+		},
+	},
+	Terrain = {
+		MaterialColors = {
+			read = function(instance: Terrain)
+				-- There's no way to get a list of every color, so we have to
+				-- make one.
+				local colors = {}
+				for _, material in TERRAIN_MATERIAL_COLORS do
+					colors[material] = instance:GetMaterialColor(material)
+				end
+
+				return true, colors
+			end,
+			write = function(instance: Terrain, _, value: { [Enum.Material]: Color3 })
+				for material, color in value do
+					instance:SetMaterialColor(material, color)
+				end
+				return true
+			end,
+		},
+	},
+	Script = {
+		Source = {
+			read = function(instance: Script)
+				return true, ScriptEditorService:GetEditorSource(instance)
+			end,
+			write = function(instance: Script, _, value: string)
+				task.spawn(function()
+					ScriptEditorService:UpdateSourceAsync(instance, function()
+						return value
+					end)
+				end)
+				return true
+			end,
+		},
+	},
+	ModuleScript = {
+		Source = {
+			read = function(instance: ModuleScript)
+				return true, ScriptEditorService:GetEditorSource(instance)
+			end,
+			write = function(instance: ModuleScript, _, value: string)
+				task.spawn(function()
+					ScriptEditorService:UpdateSourceAsync(instance, function()
+						return value
+					end)
+				end)
+				return true
+			end,
+		},
 	},
 }

plugin/rbx_dom_lua/init.lua

@@ -24,7 +24,8 @@ local function findCanonicalPropertyDescriptor(className, propertyName)
 				return PropertyDescriptor.fromRaw(
 					currentClass.Properties[aliasData.AliasFor],
 					currentClassName,
-					aliasData.AliasFor)
+					aliasData.AliasFor
+				)
 			end
 
 			return nil

plugin/rbx_dom_lua/init.spec.lua

@@ -1,7 +0,0 @@
-return function()
-	local RbxDom = require(script.Parent)
-
-	it("should load", function()
-		expect(RbxDom).to.be.ok()
-	end)
-end

plugin/src/ApiContext.lua

@@ -11,13 +11,6 @@ local validateApiInfo = Types.ifEnabled(Types.ApiInfoResponse)
 local validateApiRead = Types.ifEnabled(Types.ApiReadResponse)
 local validateApiSubscribe = Types.ifEnabled(Types.ApiSubscribeResponse)
 
---[[
-	Returns a promise that will never resolve nor reject.
-]]
-local function hangingPromise()
-	return Promise.new(function() end)
-end
-
 local function rejectFailedRequests(response)
 	if response.code >= 400 then
 		local message = string.format("HTTP %s:\n%s", tostring(response.code), response.body)
@@ -31,15 +24,17 @@ end
 local function rejectWrongProtocolVersion(infoResponseBody)
 	if infoResponseBody.protocolVersion ~= Config.protocolVersion then
 		local message = (
-			"Found a Rojo dev server, but it's using a different protocol version, and is incompatible." ..
+			"Found a Rojo dev server, but it's using a different protocol version, and is incompatible."
-			"\nMake sure you have matching versions of both the Rojo plugin and server!" ..
+			.. "\nMake sure you have matching versions of both the Rojo plugin and server!"
-			"\n\nYour client is version %s, with protocol version %s. It expects server version %s." ..
+			.. "\n\nYour client is version %s, with protocol version %s. It expects server version %s."
-			"\nYour server is version %s, with protocol version %s." ..
+			.. "\nYour server is version %s, with protocol version %s."
-			"\n\nGo to https://github.com/rojo-rbx/rojo for more details."
+			.. "\n\nGo to https://github.com/rojo-rbx/rojo for more details."
 		):format(
-			Version.display(Config.version), Config.protocolVersion,
+			Version.display(Config.version),
+			Config.protocolVersion,
 			Config.expectedServerVersionString,
-			infoResponseBody.serverVersion, infoResponseBody.protocolVersion
+			infoResponseBody.serverVersion,
+			infoResponseBody.protocolVersion
 		)
 
 		return Promise.reject(message)
@@ -66,14 +61,11 @@ local function rejectWrongPlaceId(infoResponseBody)
 			end
 
 			local message = (
-				"Found a Rojo server, but its project is set to only be used with a specific list of places." ..
+				"Found a Rojo server, but its project is set to only be used with a specific list of places."
-				"\nYour place ID is %s, but needs to be one of these:" ..
+				.. "\nYour place ID is %s, but needs to be one of these:"
-				"\n%s" ..
+				.. "\n%s"
-				"\n\nTo change this list, edit 'servePlaceIds' in your .project.json file."
+				.. "\n\nTo change this list, edit 'servePlaceIds' in your .project.json file."
-			):format(
+			):format(tostring(game.PlaceId), table.concat(idList, "\n"))
-				tostring(game.PlaceId),
-				table.concat(idList, "\n")
-			)
 
 			return Promise.reject(message)
 		end
@@ -93,6 +85,7 @@ function ApiContext.new(baseUrl)
 		__sessionId = nil,
 		__messageCursor = -1,
 		__connected = true,
+		__activeRequests = {},
 	}
 
 	return setmetatable(self, ApiContext)
@@ -113,6 +106,11 @@ end
 
 function ApiContext:disconnect()
 	self.__connected = false
+	for request in self.__activeRequests do
+		Log.trace("Cancelling request {}", request)
+		request:cancel()
+	end
+	self.__activeRequests = {}
 end
 
 function ApiContext:setMessageCursor(index)
@@ -142,18 +140,15 @@ end
 function ApiContext:read(ids)
 	local url = ("%s/api/read/%s"):format(self.__baseUrl, table.concat(ids, ","))
 
-	return Http.get(url)
+	return Http.get(url):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
-		:andThen(rejectFailedRequests)
+		if body.sessionId ~= self.__sessionId then
-		:andThen(Http.Response.json)
+			return Promise.reject("Server changed ID")
-		:andThen(function(body)
+		end
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
 
-			assert(validateApiRead(body))
+		assert(validateApiRead(body))
 
-			return body
+		return body
-		end)
+	end)
 end
 
 function ApiContext:write(patch)
@@ -190,63 +185,58 @@ function ApiContext:write(patch)
 
 	body = Http.jsonEncode(body)
 
-	return Http.post(url, body)
+	return Http.post(url, body):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(responseBody)
-		:andThen(rejectFailedRequests)
+		Log.info("Write response: {:?}", responseBody)
-		:andThen(Http.Response.json)
-		:andThen(function(body)
-			Log.info("Write response: {:?}", body)
 
-			return body
+		return responseBody
-		end)
+	end)
 end
 
 function ApiContext:retrieveMessages()
 	local url = ("%s/api/subscribe/%s"):format(self.__baseUrl, self.__messageCursor)
 
 	local function sendRequest()
-		return Http.get(url)
+		local request = Http.get(url):catch(function(err)
-			:catch(function(err)
+			if err.type == Http.Error.Kind.Timeout and self.__connected then
-				if err.type == Http.Error.Kind.Timeout then
+				return sendRequest()
-					if self.__connected then
-						return sendRequest()
-					else
-						return hangingPromise()
-					end
-				end
-
-				return Promise.reject(err)
-			end)
-	end
-
-	return sendRequest()
-		:andThen(rejectFailedRequests)
-		:andThen(Http.Response.json)
-		:andThen(function(body)
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
 			end
 
-			assert(validateApiSubscribe(body))
+			return Promise.reject(err)
-
-			self:setMessageCursor(body.messageCursor)
-
-			return body.messages
 		end)
+
+		Log.trace("Tracking request {}", request)
+		self.__activeRequests[request] = true
+
+		return request:finally(function(...)
+			Log.trace("Cleaning up request {}", request)
+			self.__activeRequests[request] = nil
+			return ...
+		end)
+	end
+
+	return sendRequest():andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
+		if body.sessionId ~= self.__sessionId then
+			return Promise.reject("Server changed ID")
+		end
+
+		assert(validateApiSubscribe(body))
+
+		self:setMessageCursor(body.messageCursor)
+
+		return body.messages
+	end)
 end
 
 function ApiContext:open(id)
 	local url = ("%s/api/open/%s"):format(self.__baseUrl, id)
 
-	return Http.post(url, "")
+	return Http.post(url, ""):andThen(rejectFailedRequests):andThen(Http.Response.json):andThen(function(body)
-		:andThen(rejectFailedRequests)
+		if body.sessionId ~= self.__sessionId then
-		:andThen(Http.Response.json)
+			return Promise.reject("Server changed ID")
-		:andThen(function(body)
+		end
-			if body.sessionId ~= self.__sessionId then
-				return Promise.reject("Server changed ID")
-			end
 
-			return nil
+		return nil
-		end)
+	end)
 end
 
 return ApiContext

plugin/src/App/Components/Checkbox.lua

@@ -23,12 +23,10 @@ end
 
 function Checkbox:didUpdate(lastProps)
 	if lastProps.active ~= self.props.active then
-		self.motor:setGoal(
+		self.motor:setGoal(Flipper.Spring.new(self.props.active and 1 or 0, {
-			Flipper.Spring.new(self.props.active and 1 or 0, {
+			frequency = 6,
-				frequency = 6,
+			dampingRatio = 1.1,
-				dampingRatio = 1.1,
+		}))
-			})
-		)
 	end
 end
 
@@ -51,10 +49,16 @@ function Checkbox:render()
 			ZIndex = self.props.zIndex,
 			BackgroundTransparency = 1,
 
-			[Roact.Event.Activated] = self.props.onClick,
+			[Roact.Event.Activated] = function()
+				if self.props.locked then
+					return
+				end
+				self.props.onClick()
+			end,
 		}, {
 			StateTip = e(Tooltip.Trigger, {
-				text = if self.props.active then "Enabled" else "Disabled",
+				text = (if self.props.locked then "[LOCKED] " else "")
+					.. (if self.props.active then "Enabled" else "Disabled"),
 			}),
 
 			Active = e(SlicedImage, {
@@ -65,7 +69,7 @@ function Checkbox:render()
 				zIndex = 2,
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Active,
+					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Active,
 					ImageColor3 = theme.Active.IconColor,
 					ImageTransparency = activeTransparency,
 
@@ -84,7 +88,9 @@ function Checkbox:render()
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				Icon = e("ImageLabel", {
-					Image = Assets.Images.Checkbox.Inactive,
+					Image = if self.props.locked
+						then Assets.Images.Checkbox.Locked
+						else Assets.Images.Checkbox.Inactive,
 					ImageColor3 = theme.Inactive.IconColor,
 					ImageTransparency = self.props.transparency,
 

plugin/src/App/Components/CodeLabel.lua

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

plugin/src/App/Components/Dropdown.lua

@@ -29,13 +29,17 @@ function Dropdown:init()
 	})
 end
 
-function Dropdown:didUpdate()
+function Dropdown:didUpdate(prevProps)
-	self.openMotor:setGoal(
+	if self.props.locked and not prevProps.locked then
-		Flipper.Spring.new(self.state.open and 1 or 0, {
+		self:setState({
-			frequency = 6,
+			open = false,
-			dampingRatio = 1.1,
 		})
-	)
+	end
+
+	self.openMotor:setGoal(Flipper.Spring.new(self.state.open and 1 or 0, {
+		frequency = 6,
+		dampingRatio = 1.1,
+	}))
 end
 
 function Dropdown:render()
@@ -46,10 +50,7 @@ function Dropdown:render()
 		local width = -1
 		for i, option in self.props.options do
 			local text = tostring(option or "")
-			local textSize = TextService:GetTextSize(
+			local textSize = TextService:GetTextSize(text, 15, Enum.Font.GothamMedium, Vector2.new(math.huge, 20))
-				text, 15, Enum.Font.GothamMedium,
-				Vector2.new(math.huge, 20)
-			)
 			if textSize.X > width then
 				width = textSize.X
 			end
@@ -68,6 +69,9 @@ function Dropdown:render()
 				Font = Enum.Font.GothamMedium,
 
 				[Roact.Event.Activated] = function()
+					if self.props.locked then
+						return
+					end
 					self:setState({
 						open = false,
 					})
@@ -81,7 +85,7 @@ function Dropdown:render()
 		end
 
 		return e("ImageButton", {
-			Size = UDim2.new(0, width+50, 0, 28),
+			Size = UDim2.new(0, width + 50, 0, 28),
 			Position = self.props.position,
 			AnchorPoint = self.props.anchorPoint,
 			LayoutOrder = self.props.layoutOrder,
@@ -89,6 +93,9 @@ function Dropdown:render()
 			BackgroundTransparency = 1,
 
 			[Roact.Event.Activated] = function()
+				if self.props.locked then
+					return
+				end
 				self:setState({
 					open = not self.state.open,
 				})
@@ -101,7 +108,7 @@ function Dropdown:render()
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				DropArrow = e("ImageLabel", {
-					Image = Assets.Images.Dropdown.Arrow,
+					Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow,
 					ImageColor3 = self.openBinding:map(function(a)
 						return theme.Closed.IconColor:Lerp(theme.Open.IconColor, a)
 					end),
@@ -128,40 +135,42 @@ function Dropdown:render()
 					TextTransparency = self.props.transparency,
 				}),
 			}),
-			Options = if self.state.open then e(SlicedImage, {
+			Options = if self.state.open
-				slice = Assets.Slices.RoundedBackground,
+				then e(SlicedImage, {
-				color = theme.BackgroundColor,
+					slice = Assets.Slices.RoundedBackground,
-				position = UDim2.new(1, 0, 1, 3),
+					color = theme.BackgroundColor,
-				size = self.openBinding:map(function(a)
+					position = UDim2.new(1, 0, 1, 3),
-					return UDim2.new(1, 0, a*math.min(3, #self.props.options), 0)
+					size = self.openBinding:map(function(a)
-				end),
+						return UDim2.new(1, 0, a * math.min(3, #self.props.options), 0)
-				anchorPoint = Vector2.new(1, 0),
+					end),
-			}, {
+					anchorPoint = Vector2.new(1, 0),
-				Border = e(SlicedImage, {
-					slice = Assets.Slices.RoundedBorder,
-					color = theme.BorderColor,
-					transparency = self.props.transparency,
-					size = UDim2.new(1, 0, 1, 0),
-				}),
-				ScrollingFrame = e(ScrollingFrame, {
-					size = UDim2.new(1, -4, 1, -4),
-					position = UDim2.new(0, 2, 0, 2),
-					transparency = self.props.transparency,
-					contentSize = self.contentSize,
 				}, {
-					Layout = e("UIListLayout", {
+					Border = e(SlicedImage, {
-						VerticalAlignment = Enum.VerticalAlignment.Top,
+						slice = Assets.Slices.RoundedBorder,
-						FillDirection = Enum.FillDirection.Vertical,
+						color = theme.BorderColor,
-						SortOrder = Enum.SortOrder.LayoutOrder,
+						transparency = self.props.transparency,
-						Padding = UDim.new(0, 0),
+						size = UDim2.new(1, 0, 1, 0),
-
-						[Roact.Change.AbsoluteContentSize] = function(object)
-							self.setContentSize(object.AbsoluteContentSize)
-						end,
 					}),
-					Roact.createFragment(optionButtons),
+					ScrollingFrame = e(ScrollingFrame, {
-				}),
+						size = UDim2.new(1, -4, 1, -4),
-			}) else nil,
+						position = UDim2.new(0, 2, 0, 2),
+						transparency = self.props.transparency,
+						contentSize = self.contentSize,
+					}, {
+						Layout = e("UIListLayout", {
+							VerticalAlignment = Enum.VerticalAlignment.Top,
+							FillDirection = Enum.FillDirection.Vertical,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 0),
+
+							[Roact.Change.AbsoluteContentSize] = function(object)
+								self.setContentSize(object.AbsoluteContentSize)
+							end,
+						}),
+						Options = Roact.createFragment(optionButtons),
+					}),
+				})
+				else nil,
 		})
 	end)
 end

plugin/src/App/Components/IconButton.lua

@@ -38,15 +38,11 @@ function IconButton:render()
 		[Roact.Event.Activated] = self.props.onClick,
 
 		[Roact.Event.MouseEnter] = function()
-			self.motor:setGoal(
+			self.motor:setGoal(Flipper.Spring.new(1, HOVER_SPRING_PROPS))
-				Flipper.Spring.new(1, HOVER_SPRING_PROPS)
-			)
 		end,
 
 		[Roact.Event.MouseLeave] = function()
-			self.motor:setGoal(
+			self.motor:setGoal(Flipper.Spring.new(0, HOVER_SPRING_PROPS))
-				Flipper.Spring.new(0, HOVER_SPRING_PROPS)
-			)
 		end,
 	}, {
 		Icon = e("ImageLabel", {

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

@@ -4,10 +4,14 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 
+local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local DisplayValue = require(script.Parent.DisplayValue)
 
+local EMPTY_TABLE = {}
+
 local e = Roact.createElement
 
 local ChangeList = Roact.Component:extend("ChangeList")
@@ -26,8 +30,6 @@ function ChangeList:render()
 			return 0.93 + (0.07 * t)
 		end)
 
-		local columnVisibility = props.columnVisibility
-
 		local rows = {}
 		local pad = {
 			PaddingLeft = UDim.new(0, 5),
@@ -48,7 +50,6 @@ function ChangeList:render()
 				VerticalAlignment = Enum.VerticalAlignment.Center,
 			}),
 			A = e("TextLabel", {
-				Visible = columnVisibility[1],
 				Text = tostring(changes[1][1]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -61,7 +62,6 @@ function ChangeList:render()
 				LayoutOrder = 1,
 			}),
 			B = e("TextLabel", {
-				Visible = columnVisibility[2],
 				Text = tostring(changes[1][2]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -74,7 +74,6 @@ function ChangeList:render()
 				LayoutOrder = 2,
 			}),
 			C = e("TextLabel", {
-				Visible = columnVisibility[3],
 				Text = tostring(changes[1][3]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -93,6 +92,92 @@ function ChangeList:render()
 				continue -- Skip headers, already handled above
 			end
 
+			local metadata = values[4] or EMPTY_TABLE
+			local isWarning = metadata.isWarning
+
+			-- Special case for .Source updates
+			-- because we want to display a syntax highlighted diff for better UX
+			if self.props.showSourceDiff and tostring(values[1]) == "Source" then
+				rows[row] = e("Frame", {
+					Size = UDim2.new(1, 0, 0, 30),
+					BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
+					BackgroundColor3 = theme.Diff.Row,
+					BorderSizePixel = 0,
+					LayoutOrder = row,
+				}, {
+					Padding = e("UIPadding", pad),
+					Layout = e("UIListLayout", {
+						FillDirection = Enum.FillDirection.Horizontal,
+						SortOrder = Enum.SortOrder.LayoutOrder,
+						HorizontalAlignment = Enum.HorizontalAlignment.Left,
+						VerticalAlignment = Enum.VerticalAlignment.Center,
+					}),
+					A = e("TextLabel", {
+						Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
+						BackgroundTransparency = 1,
+						Font = Enum.Font.GothamMedium,
+						TextSize = 14,
+						TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
+						TextXAlignment = Enum.TextXAlignment.Left,
+						TextTransparency = props.transparency,
+						TextTruncate = Enum.TextTruncate.AtEnd,
+						Size = UDim2.new(0.3, 0, 1, 0),
+						LayoutOrder = 1,
+					}),
+					Button = e("TextButton", {
+						Text = "",
+						Size = UDim2.new(0.7, 0, 1, -4),
+						LayoutOrder = 2,
+						BackgroundTransparency = 1,
+						[Roact.Event.Activated] = function()
+							if props.showSourceDiff then
+								props.showSourceDiff(tostring(values[2]), tostring(values[3]))
+							end
+						end,
+					}, {
+						e(BorderedContainer, {
+							size = UDim2.new(1, 0, 1, 0),
+							transparency = self.props.transparency:map(function(t)
+								return 0.5 + (0.5 * t)
+							end),
+						}, {
+							Layout = e("UIListLayout", {
+								FillDirection = Enum.FillDirection.Horizontal,
+								SortOrder = Enum.SortOrder.LayoutOrder,
+								HorizontalAlignment = Enum.HorizontalAlignment.Center,
+								VerticalAlignment = Enum.VerticalAlignment.Center,
+								Padding = UDim.new(0, 5),
+							}),
+							Label = e("TextLabel", {
+								Text = "View Diff",
+								BackgroundTransparency = 1,
+								Font = Enum.Font.GothamMedium,
+								TextSize = 14,
+								TextColor3 = theme.Settings.Setting.DescriptionColor,
+								TextXAlignment = Enum.TextXAlignment.Left,
+								TextTransparency = props.transparency,
+								TextTruncate = Enum.TextTruncate.AtEnd,
+								Size = UDim2.new(0, 65, 1, 0),
+								LayoutOrder = 1,
+							}),
+							Icon = e("ImageLabel", {
+								Image = Assets.Images.Icons.Expand,
+								ImageColor3 = theme.Settings.Setting.DescriptionColor,
+								ImageTransparency = self.props.transparency,
+
+								Size = UDim2.new(0, 16, 0, 16),
+								Position = UDim2.new(0.5, 0, 0.5, 0),
+								AnchorPoint = Vector2.new(0.5, 0.5),
+
+								BackgroundTransparency = 1,
+								LayoutOrder = 2,
+							}),
+						}),
+					}),
+				})
+				continue
+			end
+
 			rows[row] = e("Frame", {
 				Size = UDim2.new(1, 0, 0, 30),
 				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
@@ -108,12 +193,11 @@ function ChangeList:render()
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 				}),
 				A = e("TextLabel", {
-					Visible = columnVisibility[1],
+					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
-					Text = tostring(values[1]),
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
 					TextSize = 14,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
 					TextTruncate = Enum.TextTruncate.AtEnd,
@@ -123,7 +207,6 @@ function ChangeList:render()
 				B = e(
 					"Frame",
 					{
-						Visible = columnVisibility[2],
 						BackgroundTransparency = 1,
 						Size = UDim2.new(0.35, 0, 1, 0),
 						LayoutOrder = 2,
@@ -131,12 +214,12 @@ function ChangeList:render()
 					e(DisplayValue, {
 						value = values[2],
 						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					})
 				),
 				C = e(
 					"Frame",
 					{
-						Visible = columnVisibility[3],
 						BackgroundTransparency = 1,
 						Size = UDim2.new(0.35, 0, 1, 0),
 						LayoutOrder = 3,
@@ -144,6 +227,7 @@ function ChangeList:render()
 					e(DisplayValue, {
 						value = values[3],
 						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					})
 				),
 			})

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

@@ -34,7 +34,7 @@ local function DisplayValue(props)
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
 					TextSize = 14,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextColor3 = props.textColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
 					TextTruncate = Enum.TextTruncate.AtEnd,
@@ -42,7 +42,6 @@ local function DisplayValue(props)
 					Position = UDim2.new(0, 25, 0, 0),
 				}),
 			})
-
 		elseif t == "table" then
 			-- Showing a memory address for tables is useless, so we want to show the best we can
 			local textRepresentation = nil
@@ -54,18 +53,33 @@ local function DisplayValue(props)
 			elseif next(props.value) == nil then
 				-- If it's empty, show empty braces
 				textRepresentation = "{}"
+			elseif next(props.value) == 1 then
+				-- We don't need to support mixed tables, so checking the first key is enough
+				-- to determine if it's a simple array
+				local out, i = table.create(#props.value), 0
+				for _, v in props.value do
+					i += 1
+
+					-- Wrap strings in quotes
+					if type(v) == "string" then
+						v = '"' .. v .. '"'
+					end
+
+					out[i] = tostring(v)
+				end
+				textRepresentation = "{ " .. table.concat(out, ", ") .. " }"
 			else
-				-- If it has children, list them out
+				-- Otherwise, show the table contents as a dictionary
 				local out, i = {}, 0
 				for k, v in pairs(props.value) do
 					i += 1
 
 					-- Wrap strings in quotes
 					if type(k) == "string" then
-						k = "\"" .. k .. "\""
+						k = '"' .. k .. '"'
 					end
 					if type(v) == "string" then
-						v = "\"" .. v .. "\""
+						v = '"' .. v .. '"'
 					end
 
 					out[i] = string.format("[%s] = %s", tostring(k), tostring(v))
@@ -78,7 +92,7 @@ local function DisplayValue(props)
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamMedium,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = props.textColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
@@ -95,7 +109,7 @@ local function DisplayValue(props)
 			BackgroundTransparency = 1,
 			Font = Enum.Font.GothamMedium,
 			TextSize = 14,
-			TextColor3 = theme.Settings.Setting.DescriptionColor,
+			TextColor3 = props.textColor,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTransparency = props.transparency,
 			TextTruncate = Enum.TextTruncate.AtEnd,

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

@@ -1,3 +1,4 @@
+local SelectionService = game:GetService("Selection")
 local StudioService = game:GetService("StudioService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
@@ -14,6 +15,7 @@ local bindingUtil = require(Plugin.App.bindingUtil)
 local e = Roact.createElement
 
 local ChangeList = require(script.Parent.ChangeList)
+local Tooltip = require(script.Parent.Parent.Tooltip)
 
 local Expansion = Roact.Component:extend("Expansion")
 
@@ -32,7 +34,7 @@ function Expansion:render()
 		ChangeList = e(ChangeList, {
 			changes = props.changeList,
 			transparency = props.transparency,
-			columnVisibility = props.columnVisibility,
+			showSourceDiff = props.showSourceDiff,
 		}),
 	})
 end
@@ -40,11 +42,6 @@ end
 local DomLabel = Roact.Component:extend("DomLabel")
 
 function DomLabel:init()
-	self.maxElementHeight = 0
-	if self.props.changeList then
-		self.maxElementHeight = math.clamp(#self.props.changeList * 30, 30, 30 * 6)
-	end
-
 	local initHeight = self.props.elementHeight:getValue()
 	self.expanded = initHeight > 30
 
@@ -74,6 +71,22 @@ function DomLabel:init()
 	end)
 end
 
+function DomLabel:didUpdate(prevProps)
+	if
+		prevProps.instance ~= self.props.instance
+		or prevProps.patchType ~= self.props.patchType
+		or prevProps.name ~= self.props.name
+		or prevProps.changeList ~= self.props.changeList
+	then
+		-- Close the expansion when the domlabel is changed to a different thing
+		self.expanded = false
+		self.motor:setGoal(Flipper.Spring.new(30, {
+			frequency = 5,
+			dampingRatio = 1,
+		}))
+	end
+end
+
 function DomLabel:render()
 	local props = self.props
 
@@ -84,21 +97,16 @@ function DomLabel:render()
 		-- Line guides help indent depth remain readable
 		local lineGuides = {}
 		for i = 1, props.depth or 0 do
-			table.insert(
+			lineGuides["Line_" .. i] = e("Frame", {
-				lineGuides,
+				Size = UDim2.new(0, 2, 1, 2),
-				e("Frame", {
+				Position = UDim2.new(0, (20 * i) + 15, 0, -1),
-					Name = "Line_" .. i,
+				BorderSizePixel = 0,
-					Size = UDim2.new(0, 2, 1, 2),
+				BackgroundTransparency = props.transparency,
-					Position = UDim2.new(0, (20 * i) + 15, 0, -1),
+				BackgroundColor3 = theme.BorderedContainer.BorderColor,
-					BorderSizePixel = 0,
+			})
-					BackgroundTransparency = props.transparency,
-					BackgroundColor3 = theme.BorderedContainer.BorderColor,
-				})
-			)
 		end
 
 		return e("Frame", {
-			Name = "Change",
 			ClipsDescendants = true,
 			BackgroundColor3 = if props.patchType then theme.Diff[props.patchType] else nil,
 			BorderSizePixel = 0,
@@ -111,27 +119,54 @@ function DomLabel:render()
 				PaddingLeft = UDim.new(0, 10),
 				PaddingRight = UDim.new(0, 10),
 			}),
-			ExpandButton = if props.changeList
+			Button = e("TextButton", {
-				then e("TextButton", {
+				BackgroundTransparency = 1,
-					BackgroundTransparency = 1,
+				Text = "",
-					Text = "",
+				Size = UDim2.new(1, 0, 1, 0),
-					Size = UDim2.new(1, 0, 1, 0),
+				[Roact.Event.Activated] = function(_rbx: Instance, _input: InputObject, clickCount: number)
-					[Roact.Event.Activated] = function()
+					if clickCount == 1 then
-						self.expanded = not self.expanded
+						-- Double click opens the instance in explorer
-						self.motor:setGoal(Flipper.Spring.new((self.expanded and self.maxElementHeight or 0) + 30, {
+						self.lastDoubleClickTime = os.clock()
-							frequency = 5,
+						if props.instance then
-							dampingRatio = 1,
+							SelectionService:Set({ props.instance })
-						}))
+						end
-					end,
+					elseif clickCount == 0 then
-				})
+						-- Single click expands the changes
-				else nil,
+						task.wait(0.25)
+						if os.clock() - (self.lastDoubleClickTime or 0) <= 0.25 then
+							-- This is a double click, so don't expand
+							return
+						end
+
+						if props.changeList then
+							self.expanded = not self.expanded
+							local goalHeight = 30
+								+ (if self.expanded then math.clamp(#props.changeList * 30, 30, 30 * 6) else 0)
+							self.motor:setGoal(Flipper.Spring.new(goalHeight, {
+								frequency = 5,
+								dampingRatio = 1,
+							}))
+						end
+					end
+				end,
+			}, {
+				StateTip = if (props.instance or props.changeList)
+					then e(Tooltip.Trigger, {
+						text = (if props.changeList
+							then "Click to " .. (if self.expanded then "hide" else "view") .. " changes"
+							else "") .. (if props.instance
+							then (if props.changeList then " & d" else "D") .. "ouble click to open in Explorer"
+							else ""),
+					})
+					else nil,
+			}),
 			Expansion = if props.changeList
 				then e(Expansion, {
 					rendered = self.state.renderExpansion,
 					indent = indent,
 					transparency = props.transparency,
 					changeList = props.changeList,
-					columnVisibility = props.columnVisibility,
+					showSourceDiff = props.showSourceDiff,
 				})
 				else nil,
 			DiffIcon = if props.patchType
@@ -156,7 +191,7 @@ function DomLabel:render()
 				AnchorPoint = Vector2.new(0, 0.5),
 			}),
 			InstanceName = e("TextLabel", {
-				Text = props.name .. (props.hint and string.format(
+				Text = (if props.isWarning then "⚠ " else "") .. props.name .. (props.hint and string.format(
 					'  <font color="#%s">%s</font>',
 					theme.AddressEntry.PlaceholderColor:ToHex(),
 					props.hint
@@ -165,7 +200,7 @@ function DomLabel:render()
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamMedium,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = if props.isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,

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

@@ -1,143 +1,18 @@
-local HttpService = game:GetService("HttpService")
-
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
-local Log = require(Packages.Log)
 
+local PatchTree = require(Plugin.PatchTree)
 local PatchSet = require(Plugin.PatchSet)
-local decodeValue = require(Plugin.Reconciler.decodeValue)
-local getProperty = require(Plugin.Reconciler.getProperty)
 
+local Theme = require(Plugin.App.Theme)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local VirtualScroller = require(Plugin.App.Components.VirtualScroller)
 
 local e = Roact.createElement
 
-local function alphabeticalNext(t, state)
-	-- Equivalent of the next function, but returns the keys in the alphabetic
-	-- order of node names. We use a temporary ordered key table that is stored in the
-	-- table being iterated.
-
-	local key = nil
-	if state == nil then
-		-- First iteration, generate the index
-		local orderedIndex, i = table.create(5), 0
-		for k in t do
-			i += 1
-			orderedIndex[i] = k
-		end
-		table.sort(orderedIndex, function(a, b)
-			local nodeA, nodeB = t[a], t[b]
-			return (nodeA.name or "") < (nodeB.name or "")
-		end)
-
-		t.__orderedIndex = orderedIndex
-		key = orderedIndex[1]
-	else
-		-- Fetch the next value
-		for i, orderedState in t.__orderedIndex do
-			if orderedState == state then
-				key = t.__orderedIndex[i + 1]
-				break
-			end
-		end
-	end
-
-	if key then
-		return key, t[key]
-	end
-
-	-- No more value to return, cleanup
-	t.__orderedIndex = nil
-	return
-end
-
-local function alphabeticalPairs(t)
-	-- Equivalent of the pairs() iterator, but sorted
-	return alphabeticalNext, t, nil
-end
-
-local function Tree()
-	local tree = {
-		idToNode = {},
-		ROOT = {
-			className = "DataModel",
-			name = "ROOT",
-			children = {},
-		},
-	}
-	-- Add ROOT to idToNode or it won't be found by getNode since that searches *within* ROOT
-	tree.idToNode["ROOT"] = tree.ROOT
-
-	function tree:getNode(id, target)
-		if self.idToNode[id] then
-			return self.idToNode[id]
-		end
-
-		for nodeId, node in target or tree.ROOT.children do
-			if nodeId == id then
-				self.idToNode[id] = node
-				return node
-			end
-			local descendant = self:getNode(id, node.children)
-			if descendant then
-				return descendant
-			end
-		end
-
-		return nil
-	end
-
-	function tree:addNode(parent, props)
-		parent = parent or "ROOT"
-
-		local node = self:getNode(props.id)
-		if node then
-			for k, v in props do
-				node[k] = v
-			end
-			return node
-		end
-
-		node = table.clone(props)
-		node.children = {}
-
-		local parentNode = self:getNode(parent)
-		if not parentNode then
-			Log.warn("Failed to create node since parent doesnt exist: {}, {}", parent, props)
-			return
-		end
-
-		parentNode.children[node.id] = node
-		self.idToNode[node.id] = node
-
-		return node
-	end
-
-	function tree:buildAncestryNodes(ancestry, patch, instanceMap)
-		-- Build nodes for ancestry by going up the tree
-		local previousId = "ROOT"
-		for _, ancestorId in ancestry do
-			local value = instanceMap.fromIds[ancestorId] or patch.added[ancestorId]
-			if not value then
-				Log.warn("Failed to find ancestor object for " .. ancestorId)
-				continue
-			end
-			self:addNode(previousId, {
-				id = ancestorId,
-				className = value.ClassName,
-				name = value.Name,
-			})
-			previousId = ancestorId
-		end
-	end
-
-	return tree
-end
-
 local DomLabel = require(script.DomLabel)
 
 local PatchVisualizer = Roact.Component:extend("PatchVisualizer")
@@ -153,250 +28,96 @@ function PatchVisualizer:willUnmount()
 end
 
 function PatchVisualizer:shouldUpdate(nextProps)
+	if self.props.patchTree ~= nextProps.patchTree then
+		return true
+	end
+
 	local currentPatch, nextPatch = self.props.patch, nextProps.patch
-
+	if currentPatch ~= nil or nextPatch ~= nil then
-	return not PatchSet.isEqual(currentPatch, nextPatch)
+		return not PatchSet.isEqual(currentPatch, nextPatch)
-end
-
-function PatchVisualizer:buildTree(patch, instanceMap)
-	local tree = Tree()
-
-	for _, change in patch.updated do
-		local instance = instanceMap.fromIds[change.id]
-		if not instance then
-			continue
-		end
-
-		-- Gather ancestors from existing DOM
-		local ancestry = {}
-		local parentObject = instance.Parent
-		local parentId = instanceMap.fromInstances[parentObject]
-		while parentObject do
-			table.insert(ancestry, 1, parentId)
-			parentObject = parentObject.Parent
-			parentId = instanceMap.fromInstances[parentObject]
-		end
-
-		tree:buildAncestryNodes(ancestry, patch, instanceMap)
-
-		-- Gather detail text
-		local changeList, hint = nil, nil
-		if next(change.changedProperties) or change.changedName then
-			changeList = {}
-
-			local hintBuffer, i = {}, 0
-			local function addProp(prop: string, current: any?, incoming: any?)
-				i += 1
-				hintBuffer[i] = prop
-				changeList[i] = { prop, current, incoming }
-			end
-
-			-- Gather the changes
-
-			if change.changedName then
-				addProp("Name", instance.Name, change.changedName)
-			end
-
-			for prop, incoming in change.changedProperties do
-				local incomingSuccess, incomingValue = decodeValue(incoming, instanceMap)
-				local currentSuccess, currentValue = getProperty(instance, prop)
-
-				addProp(
-					prop,
-					if currentSuccess then currentValue else "[Error]",
-					if incomingSuccess then incomingValue else next(incoming)
-				)
-			end
-
-			-- Finalize detail values
-
-			-- 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)
-				return a[1] < b[1]
-			end)
-			table.insert(changeList, 1, { "Property", "Current", "Incoming" })
-		end
-
-		-- Add this node to tree
-		tree:addNode(instanceMap.fromInstances[instance.Parent], {
-			id = change.id,
-			patchType = "Edit",
-			className = instance.ClassName,
-			name = instance.Name,
-			hint = hint,
-			changeList = changeList,
-		})
 	end
 
-	for _, instance in patch.removed do
+	return false
-		-- Gather ancestors from existing DOM
-		-- (note that they may have no ID if they're being removed as unknown)
-		local ancestry = {}
-		local parentObject = instance.Parent
-		local parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
-		while parentObject do
-			instanceMap:insert(parentId, parentObject)
-			table.insert(ancestry, 1, parentId)
-			parentObject = parentObject.Parent
-			parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
-		end
-
-		tree:buildAncestryNodes(ancestry, patch, instanceMap)
-
-		-- Add this node to tree
-		local nodeId = instanceMap.fromInstances[instance] or HttpService:GenerateGUID(false)
-		instanceMap:insert(nodeId, instance)
-		tree:addNode(instanceMap.fromInstances[instance.Parent], {
-			id = nodeId,
-			patchType = "Remove",
-			className = instance.ClassName,
-			name = instance.Name,
-		})
-	end
-
-	for _, change in patch.added do
-		-- Gather ancestors from existing DOM or future additions
-		local ancestry = {}
-		local parentId = change.Parent
-		local parentData = patch.added[parentId]
-		local parentObject = instanceMap.fromIds[parentId]
-		while parentId do
-			table.insert(ancestry, 1, parentId)
-			parentId = nil
-
-			if parentData then
-				parentId = parentData.Parent
-				parentData = patch.added[parentId]
-				parentObject = instanceMap.fromIds[parentId]
-			elseif parentObject then
-				parentObject = parentObject.Parent
-				parentId = instanceMap.fromInstances[parentObject]
-				parentData = patch.added[parentId]
-			end
-		end
-
-		tree:buildAncestryNodes(ancestry, patch, instanceMap)
-
-		-- Gather detail text
-		local changeList, hint = nil, nil
-		if next(change.Properties) then
-			changeList = {}
-
-			local hintBuffer, i = {}, 0
-			for prop, incoming in change.Properties do
-				i += 1
-				hintBuffer[i] = prop
-
-				local success, incomingValue = decodeValue(incoming, instanceMap)
-				if success then
-					table.insert(changeList, { prop, "N/A", incomingValue })
-				else
-					table.insert(changeList, { prop, "N/A", next(incoming) })
-				end
-			end
-
-			-- Finalize detail values
-
-			-- 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)
-				return a[1] < b[1]
-			end)
-			table.insert(changeList, 1, { "Property", "Current", "Incoming" })
-		end
-
-		-- Add this node to tree
-		tree:addNode(change.Parent, {
-			id = change.Id,
-			patchType = "Add",
-			className = change.ClassName,
-			name = change.Name,
-			hint = hint,
-			changeList = changeList,
-		})
-	end
-
-	return tree
 end
 
 function PatchVisualizer:render()
-	local patch = self.props.patch
+	local patchTree = self.props.patchTree
-	local instanceMap = self.props.instanceMap
+	if patchTree == nil and self.props.patch ~= nil then
-
+		patchTree = PatchTree.build(
-	local tree = self:buildTree(patch, instanceMap)
+			self.props.patch,
+			self.props.instanceMap,
+			self.props.changeListHeaders or { "Property", "Current", "Incoming" }
+		)
+		if self.props.unappliedPatch then
+			patchTree =
+				PatchTree.updateMetadata(patchTree, self.props.patch, self.props.instanceMap, self.props.unappliedPatch)
+		end
+	end
 
 	-- Recusively draw tree
 	local scrollElements, elementHeights = {}, {}
-	local function drawNode(node, depth)
-		local elementHeight, setElementHeight = Roact.createBinding(30)
-		table.insert(elementHeights, elementHeight)
-		table.insert(
-			scrollElements,
-			e(DomLabel, {
-				columnVisibility = self.props.columnVisibility,
-				updateEvent = self.updateEvent,
-				elementHeight = elementHeight,
-				setElementHeight = setElementHeight,
-				patchType = node.patchType,
-				className = node.className,
-				name = node.name,
-				hint = node.hint,
-				changeList = node.changeList,
-				depth = depth,
-				transparency = self.props.transparency,
-			})
-		)
 
-		for _, childNode in alphabeticalPairs(node.children) do
+	if patchTree then
-			drawNode(childNode, depth + 1)
+		local function drawNode(node, depth)
+			local elementHeight, setElementHeight = Roact.createBinding(30)
+			table.insert(elementHeights, elementHeight)
+			table.insert(
+				scrollElements,
+				e(DomLabel, {
+					updateEvent = self.updateEvent,
+					elementHeight = elementHeight,
+					setElementHeight = setElementHeight,
+					patchType = node.patchType,
+					className = node.className,
+					isWarning = node.isWarning,
+					instance = node.instance,
+					name = node.name,
+					hint = node.hint,
+					changeList = node.changeList,
+					depth = depth,
+					transparency = self.props.transparency,
+					showSourceDiff = self.props.showSourceDiff,
+				})
+			)
 		end
-	end
+
-	for _, node in alphabeticalPairs(tree.ROOT.children) do
+		patchTree:forEach(function(node, depth)
-		drawNode(node, 0)
+			drawNode(node, depth)
+		end)
 	end
 
-	return e(BorderedContainer, {
+	return Theme.with(function(theme)
-		transparency = self.props.transparency,
+		return e(BorderedContainer, {
-		size = self.props.size,
-		position = self.props.position,
-		layoutOrder = self.props.layoutOrder,
-	}, {
-		VirtualScroller = e(VirtualScroller, {
-			size = UDim2.new(1, 0, 1, 0),
 			transparency = self.props.transparency,
-			count = #scrollElements,
+			size = self.props.size,
-			updateEvent = self.updateEvent.Event,
+			position = self.props.position,
-			render = function(i)
+			layoutOrder = self.props.layoutOrder,
-				return scrollElements[i]
+		}, {
-			end,
+			CleanMerge = e("TextLabel", {
-			getHeightBinding = function(i)
+				Visible = #scrollElements == 0,
-				return elementHeights[i]
+				Text = "No changes to sync, project is up to date.",
-			end,
+				Font = Enum.Font.GothamMedium,
-		}),
+				TextSize = 15,
-	})
+				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextWrapped = true,
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1,
+			}),
+
+			VirtualScroller = e(VirtualScroller, {
+				size = UDim2.new(1, 0, 1, 0),
+				transparency = self.props.transparency,
+				count = #scrollElements,
+				updateEvent = self.updateEvent.Event,
+				render = function(i)
+					return scrollElements[i]
+				end,
+				getHeightBinding = function(i)
+					return elementHeights[i]
+				end,
+			}),
+		})
+	end)
 end
 
 return PatchVisualizer

plugin/src/App/Components/ScrollingFrame.lua

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

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

@@ -0,0 +1,441 @@
+--[[
+    Based on DiffMatchPatch by Neil Fraser.
+    https://github.com/google/diff-match-patch
+]]
+
+export type DiffAction = number
+export type Diff = { actionType: DiffAction, value: string }
+export type Diffs = { Diff }
+
+local StringDiff = {
+	ActionTypes = table.freeze({
+		Equal = 0,
+		Delete = 1,
+		Insert = 2,
+	}),
+}
+
+function StringDiff.findDiffs(text1: string, text2: string): Diffs
+	-- Validate inputs
+	if type(text1) ~= "string" or type(text2) ~= "string" then
+		error(
+			string.format(
+				"Invalid inputs to StringDiff.findDiffs, expected strings and got (%s, %s)",
+				type(text1),
+				type(text2)
+			),
+			2
+		)
+	end
+
+	-- Shortcut if the texts are identical
+	if text1 == text2 then
+		return { { actionType = StringDiff.ActionTypes.Equal, value = text1 } }
+	end
+
+	-- Trim off any shared prefix and suffix
+	-- These are easy to detect and can be dealt with quickly without needing a complex diff
+	-- and later we simply add them as Equal to the start and end of the diff
+	local sharedPrefix, sharedSuffix
+	local prefixLength = StringDiff._sharedPrefix(text1, text2)
+	if prefixLength > 0 then
+		-- Store the prefix
+		sharedPrefix = string.sub(text1, 1, prefixLength)
+		-- Now trim it off
+		text1 = string.sub(text1, prefixLength + 1)
+		text2 = string.sub(text2, prefixLength + 1)
+	end
+
+	local suffixLength = StringDiff._sharedSuffix(text1, text2)
+	if suffixLength > 0 then
+		-- Store the suffix
+		sharedSuffix = string.sub(text1, -suffixLength)
+		-- Now trim it off
+		text1 = string.sub(text1, 1, -suffixLength - 1)
+		text2 = string.sub(text2, 1, -suffixLength - 1)
+	end
+
+	-- Compute the diff on the middle block where the changes lie
+	local diffs = StringDiff._computeDiff(text1, text2)
+
+	-- Restore the prefix and suffix
+	if sharedPrefix then
+		table.insert(diffs, 1, { actionType = StringDiff.ActionTypes.Equal, value = sharedPrefix })
+	end
+	if sharedSuffix then
+		table.insert(diffs, { actionType = StringDiff.ActionTypes.Equal, value = sharedSuffix })
+	end
+
+	-- Cleanup the diff
+	diffs = StringDiff._reorderAndMerge(diffs)
+
+	return diffs
+end
+
+function StringDiff._sharedPrefix(text1: string, text2: string): number
+	-- Uses a binary search to find the largest common prefix between the two strings
+	-- Performance analysis: http://neil.fraser.name/news/2007/10/09/
+
+	-- Shortcut common cases
+	if (#text1 == 0) or (#text2 == 0) or (string.byte(text1, 1) ~= string.byte(text2, 1)) then
+		return 0
+	end
+
+	local pointerMin = 1
+	local pointerMax = math.min(#text1, #text2)
+	local pointerMid = pointerMax
+	local pointerStart = 1
+	while pointerMin < pointerMid do
+		if string.sub(text1, pointerStart, pointerMid) == string.sub(text2, pointerStart, pointerMid) then
+			pointerMin = pointerMid
+			pointerStart = pointerMin
+		else
+			pointerMax = pointerMid
+		end
+		pointerMid = math.floor(pointerMin + (pointerMax - pointerMin) / 2)
+	end
+
+	return pointerMid
+end
+
+function StringDiff._sharedSuffix(text1: string, text2: string): number
+	-- Uses a binary search to find the largest common suffix between the two strings
+	-- Performance analysis: http://neil.fraser.name/news/2007/10/09/
+
+	-- Shortcut common cases
+	if (#text1 == 0) or (#text2 == 0) or (string.byte(text1, -1) ~= string.byte(text2, -1)) then
+		return 0
+	end
+
+	local pointerMin = 1
+	local pointerMax = math.min(#text1, #text2)
+	local pointerMid = pointerMax
+	local pointerEnd = 1
+	while pointerMin < pointerMid do
+		if string.sub(text1, -pointerMid, -pointerEnd) == string.sub(text2, -pointerMid, -pointerEnd) then
+			pointerMin = pointerMid
+			pointerEnd = pointerMin
+		else
+			pointerMax = pointerMid
+		end
+		pointerMid = math.floor(pointerMin + (pointerMax - pointerMin) / 2)
+	end
+
+	return pointerMid
+end
+
+function StringDiff._computeDiff(text1: string, text2: string): Diffs
+	-- Assumes that the prefix and suffix have already been trimmed off
+	-- and shortcut returns have been made so these texts must be different
+
+	local text1Length, text2Length = #text1, #text2
+
+	if text1Length == 0 then
+		-- It's simply inserting all of text2 into text1
+		return { { actionType = StringDiff.ActionTypes.Insert, value = text2 } }
+	end
+
+	if text2Length == 0 then
+		-- It's simply deleting all of text1
+		return { { actionType = StringDiff.ActionTypes.Delete, value = text1 } }
+	end
+
+	local longText = if text1Length > text2Length then text1 else text2
+	local shortText = if text1Length > text2Length then text2 else text1
+	local shortTextLength = #shortText
+
+	-- Shortcut if the shorter string exists entirely inside the longer one
+	local indexOf = if shortTextLength == 0 then nil else string.find(longText, shortText, 1, true)
+	if indexOf ~= nil then
+		local diffs = {
+			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, 1, indexOf - 1) },
+			{ actionType = StringDiff.ActionTypes.Equal, value = shortText },
+			{ actionType = StringDiff.ActionTypes.Insert, value = string.sub(longText, indexOf + shortTextLength) },
+		}
+		-- Swap insertions for deletions if diff is reversed
+		if text1Length > text2Length then
+			diffs[1].actionType, diffs[3].actionType = StringDiff.ActionTypes.Delete, StringDiff.ActionTypes.Delete
+		end
+		return diffs
+	end
+
+	if shortTextLength == 1 then
+		-- Single character string
+		-- After the previous shortcut, the character can't be an equality
+		return {
+			{ actionType = StringDiff.ActionTypes.Delete, value = text1 },
+			{ actionType = StringDiff.ActionTypes.Insert, value = text2 },
+		}
+	end
+
+	return StringDiff._bisect(text1, text2)
+end
+
+function StringDiff._bisect(text1: string, text2: string): Diffs
+	-- Find the 'middle snake' of a diff, split the problem in two
+	-- and return the recursively constructed diff
+	-- See Myers 1986 paper: An O(ND) Difference Algorithm and Its Variations
+
+	-- Cache the text lengths to prevent multiple calls
+	local text1Length = #text1
+	local text2Length = #text2
+
+	local _sub, _element
+	local maxD = math.ceil((text1Length + text2Length) / 2)
+	local vOffset = maxD
+	local vLength = 2 * maxD
+	local v1 = table.create(vLength)
+	local v2 = table.create(vLength)
+
+	-- Setting all elements to -1 is faster in Lua than mixing integers and nil
+	for x = 0, vLength - 1 do
+		v1[x] = -1
+		v2[x] = -1
+	end
+	v1[vOffset + 1] = 0
+	v2[vOffset + 1] = 0
+	local delta = text1Length - text2Length
+
+	-- If the total number of characters is odd, then
+	-- the front path will collide with the reverse path
+	local front = (delta % 2 ~= 0)
+
+	-- Offsets for start and end of k loop
+	-- Prevents mapping of space beyond the grid
+	local k1Start = 0
+	local k1End = 0
+	local k2Start = 0
+	local k2End = 0
+	for d = 0, maxD - 1 do
+		-- Walk the front path one step
+		for k1 = -d + k1Start, d - k1End, 2 do
+			local k1_offset = vOffset + k1
+			local x1
+			if (k1 == -d) or ((k1 ~= d) and (v1[k1_offset - 1] < v1[k1_offset + 1])) then
+				x1 = v1[k1_offset + 1]
+			else
+				x1 = v1[k1_offset - 1] + 1
+			end
+			local y1 = x1 - k1
+			while
+				(x1 <= text1Length)
+				and (y1 <= text2Length)
+				and (string.sub(text1, x1, x1) == string.sub(text2, y1, y1))
+			do
+				x1 = x1 + 1
+				y1 = y1 + 1
+			end
+			v1[k1_offset] = x1
+			if x1 > text1Length + 1 then
+				-- Ran off the right of the graph
+				k1End = k1End + 2
+			elseif y1 > text2Length + 1 then
+				-- Ran off the bottom of the graph
+				k1Start = k1Start + 2
+			elseif front then
+				local k2_offset = vOffset + delta - k1
+				if k2_offset >= 0 and k2_offset < vLength and v2[k2_offset] ~= -1 then
+					-- Mirror x2 onto top-left coordinate system
+					local x2 = text1Length - v2[k2_offset] + 1
+					if x1 > x2 then
+						-- Overlap detected
+						return StringDiff._bisectSplit(text1, text2, x1, y1)
+					end
+				end
+			end
+		end
+
+		-- Walk the reverse path one step
+		for k2 = -d + k2Start, d - k2End, 2 do
+			local k2_offset = vOffset + k2
+			local x2
+			if (k2 == -d) or ((k2 ~= d) and (v2[k2_offset - 1] < v2[k2_offset + 1])) then
+				x2 = v2[k2_offset + 1]
+			else
+				x2 = v2[k2_offset - 1] + 1
+			end
+			local y2 = x2 - k2
+			while
+				(x2 <= text1Length)
+				and (y2 <= text2Length)
+				and (string.sub(text1, -x2, -x2) == string.sub(text2, -y2, -y2))
+			do
+				x2 = x2 + 1
+				y2 = y2 + 1
+			end
+			v2[k2_offset] = x2
+			if x2 > text1Length + 1 then
+				-- Ran off the left of the graph
+				k2End = k2End + 2
+			elseif y2 > text2Length + 1 then
+				-- Ran off the top of the graph
+				k2Start = k2Start + 2
+			elseif not front then
+				local k1_offset = vOffset + delta - k2
+				if k1_offset >= 0 and k1_offset < vLength and v1[k1_offset] ~= -1 then
+					local x1 = v1[k1_offset]
+					local y1 = vOffset + x1 - k1_offset
+					-- Mirror x2 onto top-left coordinate system
+					x2 = text1Length - x2 + 1
+					if x1 > x2 then
+						-- Overlap detected
+						return StringDiff._bisectSplit(text1, text2, x1, y1)
+					end
+				end
+			end
+		end
+	end
+
+	-- Number of diffs equals number of characters, no commonality at all
+	return {
+		{ actionType = StringDiff.ActionTypes.Delete, value = text1 },
+		{ actionType = StringDiff.ActionTypes.Insert, value = text2 },
+	}
+end
+
+function StringDiff._bisectSplit(text1: string, text2: string, x: number, y: number): Diffs
+	-- Given the location of the 'middle snake',
+	-- split the diff in two parts and recurse
+
+	local text1a = string.sub(text1, 1, x - 1)
+	local text2a = string.sub(text2, 1, y - 1)
+	local text1b = string.sub(text1, x)
+	local text2b = string.sub(text2, y)
+
+	-- Compute both diffs serially
+	local diffs = StringDiff.findDiffs(text1a, text2a)
+	local diffsB = StringDiff.findDiffs(text1b, text2b)
+
+	-- Merge diffs
+	table.move(diffsB, 1, #diffsB, #diffs + 1, diffs)
+	return diffs
+end
+
+function StringDiff._reorderAndMerge(diffs: Diffs): Diffs
+	-- Reorder and merge like edit sections and merge equalities
+	-- Any edit section can move as long as it doesn't cross an equality
+
+	-- Add a dummy entry at the end
+	table.insert(diffs, { actionType = StringDiff.ActionTypes.Equal, value = "" })
+
+	local pointer = 1
+	local countDelete, countInsert = 0, 0
+	local textDelete, textInsert = "", ""
+	local commonLength
+	while diffs[pointer] do
+		local actionType = diffs[pointer].actionType
+		if actionType == StringDiff.ActionTypes.Insert then
+			countInsert = countInsert + 1
+			textInsert = textInsert .. diffs[pointer].value
+			pointer = pointer + 1
+		elseif actionType == StringDiff.ActionTypes.Delete then
+			countDelete = countDelete + 1
+			textDelete = textDelete .. diffs[pointer].value
+			pointer = pointer + 1
+		elseif actionType == StringDiff.ActionTypes.Equal then
+			-- Upon reaching an equality, check for prior redundancies
+			if countDelete + countInsert > 1 then
+				if (countDelete > 0) and (countInsert > 0) then
+					-- Factor out any common prefixies
+					commonLength = StringDiff._sharedPrefix(textInsert, textDelete)
+					if commonLength > 0 then
+						local back_pointer = pointer - countDelete - countInsert
+						if
+							(back_pointer > 1) and (diffs[back_pointer - 1].actionType == StringDiff.ActionTypes.Equal)
+						then
+							diffs[back_pointer - 1].value = diffs[back_pointer - 1].value
+								.. string.sub(textInsert, 1, commonLength)
+						else
+							table.insert(diffs, 1, {
+								actionType = StringDiff.ActionTypes.Equal,
+								value = string.sub(textInsert, 1, commonLength),
+							})
+							pointer = pointer + 1
+						end
+						textInsert = string.sub(textInsert, commonLength + 1)
+						textDelete = string.sub(textDelete, commonLength + 1)
+					end
+					-- Factor out any common suffixies
+					commonLength = StringDiff._sharedSuffix(textInsert, textDelete)
+					if commonLength ~= 0 then
+						diffs[pointer].value = string.sub(textInsert, -commonLength) .. diffs[pointer].value
+						textInsert = string.sub(textInsert, 1, -commonLength - 1)
+						textDelete = string.sub(textDelete, 1, -commonLength - 1)
+					end
+				end
+				-- Delete the offending records and add the merged ones
+				pointer = pointer - countDelete - countInsert
+				for _ = 1, countDelete + countInsert do
+					table.remove(diffs, pointer)
+				end
+				if #textDelete > 0 then
+					table.insert(diffs, pointer, { actionType = StringDiff.ActionTypes.Delete, value = textDelete })
+					pointer = pointer + 1
+				end
+				if #textInsert > 0 then
+					table.insert(diffs, pointer, { actionType = StringDiff.ActionTypes.Insert, value = textInsert })
+					pointer = pointer + 1
+				end
+				pointer = pointer + 1
+			elseif (pointer > 1) and (diffs[pointer - 1].actionType == StringDiff.ActionTypes.Equal) then
+				-- Merge this equality with the previous one
+				diffs[pointer - 1].value = diffs[pointer - 1].value .. diffs[pointer].value
+				table.remove(diffs, pointer)
+			else
+				pointer = pointer + 1
+			end
+			countInsert, countDelete = 0, 0
+			textDelete, textInsert = "", ""
+		end
+	end
+	if diffs[#diffs].value == "" then
+		-- Remove the dummy entry at the end
+		diffs[#diffs] = nil
+	end
+
+	-- Second pass: look for single edits surrounded on both sides by equalities
+	-- which can be shifted sideways to eliminate an equality
+	-- e.g: A<ins>BA</ins>C -> <ins>AB</ins>AC
+	local changes = false
+	pointer = 2
+	-- Intentionally ignore the first and last element (don't need checking)
+	while pointer < #diffs do
+		local prevDiff, nextDiff = diffs[pointer - 1], diffs[pointer + 1]
+		if
+			(prevDiff.actionType == StringDiff.ActionTypes.Equal)
+			and (nextDiff.actionType == StringDiff.ActionTypes.Equal)
+		then
+			-- This is a single edit surrounded by equalities
+			local currentDiff = diffs[pointer]
+			local currentText = currentDiff.value
+			local prevText = prevDiff.value
+			local nextText = nextDiff.value
+			if #prevText == 0 then
+				table.remove(diffs, pointer - 1)
+				changes = true
+			elseif string.sub(currentText, -#prevText) == prevText then
+				-- Shift the edit over the previous equality
+				currentDiff.value = prevText .. string.sub(currentText, 1, -#prevText - 1)
+				nextDiff.value = prevText .. nextDiff.value
+				table.remove(diffs, pointer - 1)
+				changes = true
+			elseif string.sub(currentText, 1, #nextText) == nextText then
+				-- Shift the edit over the next equality
+				prevDiff.value = prevText .. nextText
+				currentDiff.value = string.sub(currentText, #nextText + 1) .. nextText
+				table.remove(diffs, pointer + 1)
+				changes = true
+			end
+		end
+		pointer = pointer + 1
+	end
+
+	-- If shifts were made, the diffs need reordering and another shift sweep
+	if changes then
+		return StringDiff._reorderAndMerge(diffs)
+	end
+
+	return diffs
+end
+
+return StringDiff

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

@@ -0,0 +1,202 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Log = require(Packages.Log)
+local Highlighter = require(Packages.Highlighter)
+local StringDiff = require(script:FindFirstChild("StringDiff"))
+
+local Theme = require(Plugin.App.Theme)
+
+local CodeLabel = require(Plugin.App.Components.CodeLabel)
+local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+
+local e = Roact.createElement
+
+local StringDiffVisualizer = Roact.Component:extend("StringDiffVisualizer")
+
+function StringDiffVisualizer:init()
+	self.scriptBackground, self.setScriptBackground = Roact.createBinding(Color3.fromRGB(0, 0, 0))
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+
+	-- Ensure that the script background is up to date with the current theme
+	self.themeChangedConnection = settings().Studio.ThemeChanged:Connect(function()
+		task.defer(function()
+			-- Defer to allow Highlighter to process the theme change first
+			self:updateScriptBackground()
+		end)
+	end)
+
+	self:calculateContentSize()
+	self:updateScriptBackground()
+
+	self:setState({
+		add = {},
+		remove = {},
+	})
+end
+
+function StringDiffVisualizer:willUnmount()
+	self.themeChangedConnection:Disconnect()
+end
+
+function StringDiffVisualizer:updateScriptBackground()
+	local backgroundColor = Highlighter.getTokenColor("background")
+	if backgroundColor ~= self.scriptBackground:getValue() then
+		self.setScriptBackground(backgroundColor)
+	end
+end
+
+function StringDiffVisualizer:didUpdate(previousProps)
+	if previousProps.oldText ~= self.props.oldText or previousProps.newText ~= self.props.newText then
+		self:calculateContentSize()
+		local add, remove = self:calculateDiffLines()
+		self:setState({
+			add = add,
+			remove = remove,
+		})
+	end
+end
+
+function StringDiffVisualizer:calculateContentSize()
+	local oldText, newText = self.props.oldText, self.props.newText
+
+	local oldTextBounds = TextService:GetTextSize(oldText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+	local newTextBounds = TextService:GetTextSize(newText, 16, Enum.Font.RobotoMono, Vector2.new(99999, 99999))
+
+	self.setContentSize(
+		Vector2.new(math.max(oldTextBounds.X, newTextBounds.X), math.max(oldTextBounds.Y, newTextBounds.Y))
+	)
+end
+
+function StringDiffVisualizer:calculateDiffLines()
+	local oldText, newText = self.props.oldText, self.props.newText
+
+	-- Diff the two texts
+	local startClock = os.clock()
+	local diffs = StringDiff.findDiffs(oldText, newText)
+	local stopClock = os.clock()
+
+	Log.trace(
+		"Diffing {} byte and {} byte strings took {} microseconds and found {} diff sections",
+		#oldText,
+		#newText,
+		math.round((stopClock - startClock) * 1000 * 1000),
+		#diffs
+	)
+
+	-- Determine which lines to highlight
+	local add, remove = {}, {}
+
+	local oldLineNum, newLineNum = 1, 1
+	for _, diff in diffs do
+		local actionType, text = diff.actionType, diff.value
+		local lines = select(2, string.gsub(text, "\n", "\n"))
+
+		if actionType == StringDiff.ActionTypes.Equal then
+			oldLineNum += lines
+			newLineNum += lines
+		elseif actionType == StringDiff.ActionTypes.Insert then
+			if lines > 0 then
+				local textLines = string.split(text, "\n")
+				for i, textLine in textLines do
+					if string.match(textLine, "%S") then
+						add[newLineNum + i - 1] = true
+					end
+				end
+			else
+				if string.match(text, "%S") then
+					add[newLineNum] = true
+				end
+			end
+			newLineNum += lines
+		elseif actionType == StringDiff.ActionTypes.Delete then
+			if lines > 0 then
+				local textLines = string.split(text, "\n")
+				for i, textLine in textLines do
+					if string.match(textLine, "%S") then
+						remove[oldLineNum + i - 1] = true
+					end
+				end
+			else
+				if string.match(text, "%S") then
+					remove[oldLineNum] = true
+				end
+			end
+			oldLineNum += lines
+		else
+			Log.warn("Unknown diff action: {} {}", actionType, text)
+		end
+	end
+
+	return add, remove
+end
+
+function StringDiffVisualizer:render()
+	local oldText, newText = self.props.oldText, self.props.newText
+
+	return Theme.with(function(theme)
+		return e(BorderedContainer, {
+			size = self.props.size,
+			position = self.props.position,
+			anchorPoint = self.props.anchorPoint,
+			transparency = self.props.transparency,
+		}, {
+			Background = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				Position = UDim2.new(0, 0, 0, 0),
+				BorderSizePixel = 0,
+				BackgroundColor3 = self.scriptBackground,
+				ZIndex = -10,
+			}, {
+				UICorner = e("UICorner", {
+					CornerRadius = UDim.new(0, 5),
+				}),
+			}),
+			Separator = e("Frame", {
+				Size = UDim2.new(0, 2, 1, 0),
+				Position = UDim2.new(0.5, 0, 0, 0),
+				AnchorPoint = Vector2.new(0.5, 0),
+				BorderSizePixel = 0,
+				BackgroundColor3 = theme.BorderedContainer.BorderColor,
+				BackgroundTransparency = 0.5,
+			}),
+			Old = e(ScrollingFrame, {
+				position = UDim2.new(0, 2, 0, 2),
+				size = UDim2.new(0.5, -7, 1, -4),
+				scrollingDirection = Enum.ScrollingDirection.XY,
+				transparency = self.props.transparency,
+				contentSize = self.contentSize,
+			}, {
+				Source = e(CodeLabel, {
+					size = UDim2.new(1, 0, 1, 0),
+					position = UDim2.new(0, 0, 0, 0),
+					text = oldText,
+					lineBackground = theme.Diff.Remove,
+					markedLines = self.state.remove,
+				}),
+			}),
+			New = e(ScrollingFrame, {
+				position = UDim2.new(0.5, 5, 0, 2),
+				size = UDim2.new(0.5, -7, 1, -4),
+				scrollingDirection = Enum.ScrollingDirection.XY,
+				transparency = self.props.transparency,
+				contentSize = self.contentSize,
+			}, {
+				Source = e(CodeLabel, {
+					size = UDim2.new(1, 0, 1, 0),
+					position = UDim2.new(0, 0, 0, 0),
+					text = newText,
+					lineBackground = theme.Diff.Add,
+					markedLines = self.state.add,
+				}),
+			}),
+		})
+	end)
+end
+
+return StringDiffVisualizer

plugin/src/App/Components/Studio/StudioPluginAction.lua

@@ -10,11 +10,15 @@ local StudioPluginContext = require(script.Parent.StudioPluginContext)
 
 local e = Roact.createElement
 
-local StudioPluginAction  = Roact.Component:extend("StudioPluginAction")
+local StudioPluginAction = Roact.Component:extend("StudioPluginAction")
 
 function StudioPluginAction:init()
 	self.pluginAction = self.props.plugin:CreatePluginAction(
-		self.props.name, self.props.title, self.props.description, self.props.icon, self.props.bindable
+		self.props.name,
+		self.props.title,
+		self.props.description,
+		self.props.icon,
+		self.props.bindable
 	)
 
 	self.pluginAction.Triggered:Connect(self.props.onTriggered)
@@ -31,9 +35,12 @@ end
 local function StudioPluginActionWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioPluginAction, Dictionary.merge(props, {
+			return e(
-				plugin = plugin,
+				StudioPluginAction,
-			}))
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Studio/StudioPluginGui.lua

@@ -1,3 +1,5 @@
+local HttpService = game:GetService("HttpService")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -36,7 +38,10 @@ function StudioPluginGui:init()
 		minimumSize.Y
 	)
 
-	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(self.props.id, dockWidgetPluginGuiInfo)
+	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(
+		if self.props.isEphemeral then HttpService:GenerateGUID(false) else self.props.id,
+		dockWidgetPluginGuiInfo
+	)
 
 	pluginGui.Name = self.props.id
 	pluginGui.Title = self.props.title
@@ -76,6 +81,12 @@ function StudioPluginGui:didUpdate(lastProps)
 	if self.props.active ~= lastProps.active then
 		-- This is intentionally in didUpdate to make sure the initial active state
 		-- (if the PluginGui is open initially) is preserved.
+
+		-- Studio widgets are very unreliable and sometimes need to be flickered
+		-- in order to force them to render correctly
+		-- This happens within a single frame so it doesn't flicker visibly
+		self.pluginGui.Enabled = self.props.active
+		self.pluginGui.Enabled = not self.props.active
 		self.pluginGui.Enabled = self.props.active
 	end
 end

plugin/src/App/Components/Studio/StudioToggleButton.lua

@@ -18,12 +18,8 @@ StudioToggleButton.defaultProps = {
 }
 
 function StudioToggleButton:init()
-	local button = self.props.toolbar:CreateButton(
+	local button =
-		self.props.name,
+		self.props.toolbar:CreateButton(self.props.name, self.props.tooltip, self.props.icon, self.props.text)
-		self.props.tooltip,
-		self.props.icon,
-		self.props.text
-	)
 
 	button.Click:Connect(function()
 		if self.props.onClick then
@@ -61,9 +57,12 @@ end
 local function StudioToggleButtonWrapper(props)
 	return e(StudioToolbarContext.Consumer, {
 		render = function(toolbar)
-			return e(StudioToggleButton, Dictionary.merge(props, {
+			return e(
-				toolbar = toolbar,
+				StudioToggleButton,
-			}))
+				Dictionary.merge(props, {
+					toolbar = toolbar,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/Studio/StudioToolbar.lua

@@ -36,9 +36,12 @@ end
 local function StudioToolbarWrapper(props)
 	return e(StudioPluginContext.Consumer, {
 		render = function(plugin)
-			return e(StudioToolbar, Dictionary.merge(props, {
+			return e(
-				plugin = plugin,
+				StudioToolbar,
-			}))
+				Dictionary.merge(props, {
+					plugin = plugin,
+				})
+			)
 		end,
 	})
 end

plugin/src/App/Components/TextButton.lua

@@ -41,10 +41,8 @@ end
 
 function TextButton:render()
 	return Theme.with(function(theme)
-		local textSize = TextService:GetTextSize(
+		local textSize =
-			self.props.text, 18, Enum.Font.GothamSemibold,
+			TextService:GetTextSize(self.props.text, 18, Enum.Font.GothamMedium, Vector2.new(math.huge, math.huge))
-			Vector2.new(math.huge, math.huge)
-		)
 
 		local style = self.props.style
 
@@ -85,7 +83,7 @@ function TextButton:render()
 
 			Text = e("TextLabel", {
 				Text = self.props.text,
-				Font = Enum.Font.GothamSemibold,
+				Font = Enum.Font.GothamMedium,
 				TextSize = 18,
 				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.TextColor, theme.Disabled.TextColor),
 				TextTransparency = self.props.transparency,
@@ -124,7 +122,11 @@ function TextButton:render()
 
 			Background = style == "Solid" and e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BackgroundColor, theme.Disabled.BackgroundColor),
+				color = bindingUtil.mapLerp(
+					bindingEnabled,
+					theme.Enabled.BackgroundColor,
+					theme.Disabled.BackgroundColor
+				),
 				transparency = self.props.transparency,
 
 				size = UDim2.new(1, 0, 1, 0),

plugin/src/App/Components/TextInput.lua

@@ -0,0 +1,107 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Flipper = require(Packages.Flipper)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+
+local SPRING_PROPS = {
+	frequency = 5,
+	dampingRatio = 1,
+}
+
+local e = Roact.createElement
+
+local TextInput = Roact.Component:extend("TextInput")
+
+function TextInput:init()
+	self.motor = Flipper.GroupMotor.new({
+		hover = 0,
+		enabled = self.props.enabled and 1 or 0,
+	})
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function TextInput:didUpdate(lastProps)
+	if lastProps.enabled ~= self.props.enabled then
+		self.motor:setGoal({
+			enabled = Flipper.Spring.new(self.props.enabled and 1 or 0),
+		})
+	end
+end
+
+function TextInput:render()
+	return Theme.with(function(theme)
+		theme = theme.TextInput
+
+		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
+		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")
+
+		return e(SlicedImage, {
+			slice = Assets.Slices.RoundedBorder,
+			color = bindingUtil.mapLerp(bindingEnabled, theme.Enabled.BorderColor, theme.Disabled.BorderColor),
+			transparency = self.props.transparency,
+
+			size = self.props.size or UDim2.new(1, 0, 1, 0),
+			position = self.props.position,
+			layoutOrder = self.props.layoutOrder,
+			anchorPoint = self.props.anchorPoint,
+		}, {
+			HoverOverlay = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBackground,
+				color = theme.ActionFillColor,
+				transparency = Roact.joinBindings({
+					hover = bindingHover:map(function(value)
+						return 1 - value
+					end),
+					transparency = self.props.transparency,
+				}):map(function(values)
+					return bindingUtil.blendAlpha({ theme.ActionFillTransparency, values.hover, values.transparency })
+				end),
+				size = UDim2.new(1, 0, 1, 0),
+				zIndex = -1,
+			}),
+			Input = e("TextBox", {
+				BackgroundTransparency = 1,
+				Size = UDim2.fromScale(1, 1),
+				Text = self.props.text,
+				PlaceholderText = self.props.placeholder,
+				Font = Enum.Font.GothamMedium,
+				TextColor3 = bindingUtil.mapLerp(bindingEnabled, theme.Disabled.TextColor, theme.Enabled.TextColor),
+				PlaceholderColor3 = bindingUtil.mapLerp(
+					bindingEnabled,
+					theme.Disabled.PlaceholderColor,
+					theme.Enabled.PlaceholderColor
+				),
+				TextSize = 18,
+				TextEditable = self.props.enabled,
+				ClearTextOnFocus = self.props.clearTextOnFocus,
+
+				[Roact.Event.MouseEnter] = function()
+					self.motor:setGoal({
+						hover = Flipper.Spring.new(1, SPRING_PROPS),
+					})
+				end,
+
+				[Roact.Event.MouseLeave] = function()
+					self.motor:setGoal({
+						hover = Flipper.Spring.new(0, SPRING_PROPS),
+					})
+				end,
+
+				[Roact.Event.FocusLost] = function(rbx)
+					self.props.onEntered(rbx.Text)
+				end,
+			}),
+			Children = Roact.createFragment(self.props[Roact.Children]),
+		})
+	end)
+end
+
+return TextInput

plugin/src/App/Components/Tooltip.lua

@@ -22,12 +22,16 @@ local TooltipContext = Roact.createContext({})
 
 local function Popup(props)
 	local textSize = TextService:GetTextSize(
-		props.Text, 16, Enum.Font.GothamMedium, Vector2.new(math.min(props.parentSize.X, 160), math.huge)
+		props.Text,
+		16,
+		Enum.Font.GothamMedium,
+		Vector2.new(math.min(props.parentSize.X, 160), math.huge)
 	) + TEXT_PADDING + (Vector2.one * 2)
 
 	local trigger = props.Trigger:getValue()
 
-	local spaceBelow = props.parentSize.Y - (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
+	local spaceBelow = props.parentSize.Y
+		- (trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y - Y_OVERLAP + TAIL_SIZE)
 	local spaceAbove = trigger.AbsolutePosition.Y + Y_OVERLAP - TAIL_SIZE
 
 	-- If there's not enough space below, and there's more space above, then show the tooltip above the trigger
@@ -39,7 +43,10 @@ local function Popup(props)
 	if displayAbove then
 		Y = math.max(trigger.AbsolutePosition.Y - TAIL_SIZE - textSize.Y + Y_OVERLAP, 0)
 	else
-		Y = math.min(trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP, props.parentSize.Y - textSize.Y)
+		Y = math.min(
+			trigger.AbsolutePosition.Y + trigger.AbsoluteSize.Y + TAIL_SIZE - Y_OVERLAP,
+			props.parentSize.Y - textSize.Y
+		)
 	end
 
 	return Theme.with(function(theme)
@@ -64,17 +71,9 @@ local function Popup(props)
 
 			Tail = e("ImageLabel", {
 				ZIndex = 100,
-				Position =
+				Position = if displayAbove
-					if displayAbove then
+					then UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 1, -1)
-						UDim2.new(
+					else UDim2.new(0, math.clamp(props.Position.X - X, 6, textSize.X - 6), 0, -TAIL_SIZE + 1),
-							0, math.clamp(props.Position.X - X, 6, textSize.X-6),
-							1, -1
-						)
-					else
-						UDim2.new(
-							0, math.clamp(props.Position.X - X, 6, textSize.X-6),
-							0, -TAIL_SIZE+1
-						),
 				Size = UDim2.fromOffset(TAIL_SIZE, TAIL_SIZE),
 				AnchorPoint = Vector2.new(0.5, 0),
 				Rotation = if displayAbove then 180 else 0,
@@ -90,7 +89,7 @@ local function Popup(props)
 					ImageColor3 = theme.BorderedContainer.BorderColor,
 					ImageTransparency = props.transparency,
 				}),
-			})
+			}),
 		})
 	end)
 end
@@ -165,46 +164,97 @@ function Trigger:init()
 	self.id = HttpService:GenerateGUID(false)
 	self.ref = Roact.createRef()
 	self.mousePos = Vector2.zero
+	self.showingPopup = false
 
 	self.destroy = function()
 		self.props.context.removeTip(self.id)
+		self.showingPopup = false
 	end
 end
 
 function Trigger:willUnmount()
 	if self.showDelayThread then
-		task.cancel(self.showDelayThread)
+		pcall(task.cancel, self.showDelayThread)
 	end
 	if self.destroy then
 		self.destroy()
 	end
 end
 
+function Trigger:didUpdate(prevProps)
+	if prevProps.text ~= self.props.text then
+		-- Any existing popup is now invalid
+		self.props.context.removeTip(self.id)
+		self.showingPopup = false
+
+		-- Let the new text propagate
+		self:managePopup()
+	end
+end
+
+function Trigger:isHovering()
+	local rbx = self.ref.current
+	if rbx then
+		local pos = rbx.AbsolutePosition
+		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:managePopup()
+	if self:isHovering() then
+		if self.showingPopup or self.showDelayThread then
+			-- Don't duplicate popups
+			return
+		end
+
+		self.showDelayThread = task.delay(DELAY, function()
+			self.props.context.addTip(self.id, {
+				Text = self.props.text,
+				Position = self.mousePos,
+				Trigger = self.ref,
+			})
+			self.showDelayThread = nil
+			self.showingPopup = true
+		end)
+	else
+		if self.showDelayThread then
+			pcall(task.cancel, self.showDelayThread)
+			self.showDelayThread = nil
+		end
+		self.props.context.removeTip(self.id)
+		self.showingPopup = false
+	end
+end
+
 function Trigger:render()
+	local function recalculate(rbx)
+		local widget = rbx:FindFirstAncestorOfClass("DockWidgetPluginGui")
+		if not widget then
+			return
+		end
+		self.mousePos = widget:GetRelativeMousePosition()
+
+		self:managePopup()
+	end
+
 	return e("Frame", {
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
 		ZIndex = self.props.zIndex or 100,
 		[Roact.Ref] = self.ref,
 
-		[Roact.Event.MouseMoved] = function(_rbx, x, y)
+		[Roact.Change.AbsolutePosition] = recalculate,
-			self.mousePos = Vector2.new(x, y)
+		[Roact.Change.AbsoluteSize] = recalculate,
-		end,
+		[Roact.Event.MouseMoved] = recalculate,
-		[Roact.Event.MouseEnter] = function()
+		[Roact.Event.MouseLeave] = recalculate,
-			self.showDelayThread = task.delay(DELAY, function()
+		[Roact.Event.MouseEnter] = recalculate,
-				self.props.context.addTip(self.id, {
-					Text = self.props.text,
-					Position = self.mousePos,
-					Trigger = self.ref,
-				})
-			end)
-		end,
-		[Roact.Event.MouseLeave] = function()
-			if self.showDelayThread then
-				task.cancel(self.showDelayThread)
-			end
-			self.props.context.removeTip(self.id)
-		end,
 	})
 end
 

plugin/src/App/Components/TouchRipple.lua

@@ -24,9 +24,7 @@ function TouchRipple:init()
 	})
 	self.binding = bindingUtil.fromMotor(self.motor)
 
-	self.position, self.setPosition = Roact.createBinding(
+	self.position, self.setPosition = Roact.createBinding(Vector2.new(0, 0))
-		Vector2.new(0, 0)
-	)
 end
 
 function TouchRipple:reset()
@@ -43,10 +41,7 @@ function TouchRipple:calculateRadius(position)
 	local container = self.ref.current
 
 	if container then
-		local corner = Vector2.new(
+		local corner = Vector2.new(math.floor((1 - position.X) + 0.5), math.floor((1 - position.Y) + 0.5))
-			math.floor((1 - position.X) + 0.5),
-			math.floor((1 - position.Y) + 0.5)
-		)
 
 		local size = container.AbsoluteSize
 		local ratio = size / math.min(size.X, size.Y)
@@ -93,10 +88,7 @@ function TouchRipple:render()
 				input:GetPropertyChangedSignal("UserInputState"):Connect(function()
 					local userInputState = input.UserInputState
 
-					if
+					if userInputState == Enum.UserInputState.Cancel or userInputState == Enum.UserInputState.End then
-						userInputState == Enum.UserInputState.Cancel
-						or userInputState == Enum.UserInputState.End
-					then
 						self.motor:setGoal({
 							opacity = Flipper.Spring.new(0, {
 								frequency = 5,
@@ -127,8 +119,10 @@ function TouchRipple:render()
 					local containerAspect = containerSize.X / containerSize.Y
 
 					return UDim2.new(
-						currentSize / math.max(containerAspect, 1), 0,
+						currentSize / math.max(containerAspect, 1),
-						currentSize * math.min(containerAspect, 1), 0
+						0,
+						currentSize * math.min(containerAspect, 1),
+						0
 					)
 				end
 			end),

plugin/src/App/Components/VirtualScroller.lua

@@ -99,18 +99,30 @@ function VirtualScroller:refresh()
 	})
 end
 
+function VirtualScroller:didUpdate(previousProps)
+	if self.props.count ~= previousProps.count then
+		-- Items have changed, so we need to refresh
+		self:refresh()
+	end
+end
+
 function VirtualScroller:render()
 	local props, state = self.props, self.state
 
 	local items = {}
 	for i = state.Start, state.End do
+		local content = props.render(i)
+		if content == nil then
+			continue
+		end
+
 		items["Item" .. i] = e("Frame", {
 			LayoutOrder = i,
 			Size = props.getHeightBinding(i):map(function(height)
 				return UDim2.new(1, 0, 0, height)
 			end),
 			BackgroundTransparency = 1,
-		}, props.render(i))
+		}, content)
 	end
 
 	return Theme.with(function(theme)

plugin/src/App/Notifications.lua

@@ -7,6 +7,7 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 local Flipper = require(Packages.Flipper)
+local Log = require(Packages.Log)
 
 local bindingUtil = require(script.Parent.bindingUtil)
 
@@ -14,6 +15,7 @@ local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local TextButton = require(Plugin.App.Components.TextButton)
 
 local baseClock = DateTime.now().UnixTimestampMillis
 
@@ -28,37 +30,31 @@ function Notification:init()
 	self.lifetime = self.props.timeout
 
 	self.motor:onStep(function(value)
-		if value <= 0 then
+		if value <= 0 and self.props.onClose then
-			if self.props.onClose then
+			self.props.onClose()
-				self.props.onClose()
-			end
 		end
 	end)
 end
 
 function Notification:dismiss()
-	self.motor:setGoal(
+	self.motor:setGoal(Flipper.Spring.new(0, {
-		Flipper.Spring.new(0, {
+		frequency = 5,
-			frequency = 5,
+		dampingRatio = 1,
-			dampingRatio = 1,
+	}))
-		})
-	)
 end
 
 function Notification:didMount()
-	self.motor:setGoal(
+	self.motor:setGoal(Flipper.Spring.new(1, {
-		Flipper.Spring.new(1, {
+		frequency = 3,
-			frequency = 3,
+		dampingRatio = 1,
-			dampingRatio = 1,
+	}))
-		})
-	)
 
 	self.props.soundPlayer:play(Assets.Sounds.Notification)
 
 	self.timeout = task.spawn(function()
 		local clock = os.clock()
 		local seen = false
-		while task.wait(1/10) do
+		while task.wait(1 / 10) do
 			local now = os.clock()
 			local dt = now - clock
 			clock = now
@@ -86,23 +82,51 @@ function Notification:willUnmount()
 end
 
 function Notification:render()
-	local time = DateTime.fromUnixTimestampMillis(self.props.timestamp)
-
-	local textBounds = TextService:GetTextSize(
-		self.props.text,
-		15,
-		Enum.Font.GothamSemibold,
-		Vector2.new(350, 700)
-	)
-
 	local transparency = self.binding:map(function(value)
 		return 1 - value
 	end)
 
+	local textBounds = TextService:GetTextSize(self.props.text, 15, Enum.Font.GothamMedium, Vector2.new(350, 700))
+
+	local actionButtons = {}
+	local buttonsX = 0
+	if self.props.actions then
+		local count = 0
+		for key, action in self.props.actions do
+			actionButtons[key] = e(TextButton, {
+				text = action.text,
+				style = action.style,
+				onClick = function()
+					local success, err = pcall(action.onClick, self)
+					if not success then
+						Log.warn("Error in notification action: " .. tostring(err))
+					end
+				end,
+				layoutOrder = -action.layoutOrder,
+				transparency = transparency,
+			})
+
+			buttonsX += TextService:GetTextSize(
+				action.text,
+				18,
+				Enum.Font.GothamMedium,
+				Vector2.new(math.huge, math.huge)
+			).X + 30
+
+			count += 1
+		end
+
+		buttonsX += (count - 1) * 5
+	end
+
+	local paddingY, logoSize = 20, 32
+	local actionsY = if self.props.actions then 35 else 0
+	local contentX = math.max(textBounds.X, buttonsX)
+
 	local size = self.binding:map(function(value)
 		return UDim2.fromOffset(
-			(35+40+textBounds.X)*value,
+			(35 + 40 + contentX) * value,
-			math.max(14+20+textBounds.Y, 32+20)
+			5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
 		)
 	end)
 
@@ -122,22 +146,22 @@ function Notification:render()
 				transparency = transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
-				TextContainer = e("Frame", {
+				Contents = e("Frame", {
-					Size = UDim2.new(0, 35+textBounds.X, 1, -20),
+					Size = UDim2.new(0, 35 + contentX, 1, -paddingY),
-					Position = UDim2.new(0, 0, 0, 10),
+					Position = UDim2.new(0, 0, 0, paddingY / 2),
-					BackgroundTransparency = 1
+					BackgroundTransparency = 1,
 				}, {
 					Logo = e("ImageLabel", {
 						ImageTransparency = transparency,
 						Image = Assets.Images.PluginButton,
 						BackgroundTransparency = 1,
-						Size = UDim2.new(0, 32, 0, 32),
+						Size = UDim2.new(0, logoSize, 0, logoSize),
-						Position = UDim2.new(0, 0, 0.5, 0),
+						Position = UDim2.new(0, 0, 0, 0),
-						AnchorPoint = Vector2.new(0, 0.5),
+						AnchorPoint = Vector2.new(0, 0),
 					}),
 					Info = e("TextLabel", {
 						Text = self.props.text,
-						Font = Enum.Font.GothamSemibold,
+						Font = Enum.Font.GothamMedium,
 						TextSize = 15,
 						TextColor3 = theme.Notification.InfoColor,
 						TextTransparency = transparency,
@@ -150,27 +174,30 @@ function Notification:render()
 						LayoutOrder = 1,
 						BackgroundTransparency = 1,
 					}),
-					Time = e("TextLabel", {
+					Actions = if self.props.actions
-						Text = time:FormatLocalTime("LTS", "en-us"),
+						then e("Frame", {
-						Font = Enum.Font.Code,
+							Size = UDim2.new(1, -40, 0, 35),
-						TextSize = 12,
+							Position = UDim2.new(1, 0, 1, 0),
-						TextColor3 = theme.Notification.InfoColor,
+							AnchorPoint = Vector2.new(1, 1),
-						TextTransparency = transparency,
+							BackgroundTransparency = 1,
-						TextXAlignment = Enum.TextXAlignment.Left,
+						}, {
-
+							Layout = e("UIListLayout", {
-						Size = UDim2.new(1, -35, 0, 14),
+								FillDirection = Enum.FillDirection.Horizontal,
-						Position = UDim2.new(0, 35, 1, -14),
+								HorizontalAlignment = Enum.HorizontalAlignment.Right,
-
+								VerticalAlignment = Enum.VerticalAlignment.Center,
-						LayoutOrder = 1,
+								SortOrder = Enum.SortOrder.LayoutOrder,
-						BackgroundTransparency = 1,
+								Padding = UDim.new(0, 5),
-					}),
+							}),
+							Buttons = Roact.createFragment(actionButtons),
+						})
+						else nil,
 				}),
 
 				Padding = e("UIPadding", {
 					PaddingLeft = UDim.new(0, 17),
 					PaddingRight = UDim.new(0, 15),
 				}),
-			})
+			}),
 		})
 	end)
 end
@@ -180,15 +207,16 @@ local Notifications = Roact.Component:extend("Notifications")
 function Notifications:render()
 	local notifs = {}
 
-	for index, notif in ipairs(self.props.notifications) do
+	for id, notif in self.props.notifications do
-		notifs[notif] = e(Notification, {
+		notifs["NotifID_" .. id] = e(Notification, {
 			soundPlayer = self.props.soundPlayer,
 			text = notif.text,
 			timestamp = notif.timestamp,
 			timeout = notif.timeout,
+			actions = notif.actions,
 			layoutOrder = (notif.timestamp - baseClock),
 			onClose = function()
-				self.props.onClose(index)
+				self.props.onClose(id)
 			end,
 		})
 	end

plugin/src/App/Page.lua

@@ -15,7 +15,7 @@ local Page = Roact.Component:extend("Page")
 
 function Page:init()
 	self:setState({
-		rendered = self.props.active
+		rendered = self.props.active,
 	})
 
 	self.motor = Flipper.SingleMotor.new(self.props.active and 1 or 0)
@@ -51,20 +51,21 @@ function Page:render()
 		Size = UDim2.new(1, 0, 1, 0),
 		BackgroundTransparency = 1,
 	}, {
-		Component = e(self.props.component, Dictionary.merge(self.props, {
+		Component = e(
-			transparency = transparency,
+			self.props.component,
-		}))
+			Dictionary.merge(self.props, {
+				transparency = transparency,
+			})
+		),
 	})
 end
 
 function Page:didUpdate(lastProps)
 	if self.props.active ~= lastProps.active then
-		self.motor:setGoal(
+		self.motor:setGoal(Flipper.Spring.new(self.props.active and 1 or 0, {
-			Flipper.Spring.new(self.props.active and 1 or 0, {
+			frequency = 6,
-				frequency = 6,
+			dampingRatio = 1,
-				dampingRatio = 1,
+		}))
-			})
-		)
 	end
 end
 

plugin/src/App/StatusPages/Confirming.lua

@@ -1,5 +1,3 @@
-local TextService = game:GetService("TextService")
-
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -13,6 +11,7 @@ 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 e = Roact.createElement
 
@@ -21,6 +20,12 @@ local ConfirmingPage = Roact.Component:extend("ConfirmingPage")
 function ConfirmingPage:init()
 	self.contentSize, self.setContentSize = Roact.createBinding(0)
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+
+	self:setState({
+		showingSourceDiff = false,
+		oldSource = "",
+		newSource = "",
+	})
 end
 
 function ConfirmingPage:render()
@@ -52,9 +57,17 @@ function ConfirmingPage:render()
 				transparency = self.props.transparency,
 				layoutOrder = 3,
 
-				columnVisibility = {true, true, true},
+				changeListHeaders = { "Property", "Current", "Incoming" },
 				patch = self.props.confirmData.patch,
 				instanceMap = self.props.confirmData.instanceMap,
+
+				showSourceDiff = function(oldSource: string, newSource: string)
+					self:setState({
+						showingSourceDiff = true,
+						oldSource = oldSource,
+						newSource = newSource,
+					})
+				end,
 			}),
 
 			Buttons = e("Frame", {
@@ -70,7 +83,7 @@ function ConfirmingPage:render()
 					onClick = self.props.onAbort,
 				}, {
 					Tip = e(Tooltip.Trigger, {
-						text = "Stop the connection process"
+						text = "Stop the connection process",
 					}),
 				}),
 
@@ -83,7 +96,7 @@ function ConfirmingPage:render()
 						onClick = self.props.onReject,
 					}, {
 						Tip = e(Tooltip.Trigger, {
-							text = "Push Studio changes to the Rojo server"
+							text = "Push Studio changes to the Rojo server",
 						}),
 					})
 					else nil,
@@ -96,7 +109,7 @@ function ConfirmingPage:render()
 					onClick = self.props.onAccept,
 				}, {
 					Tip = e(Tooltip.Trigger, {
-						text = "Pull Rojo server changes to Studio"
+						text = "Pull Rojo server changes to Studio",
 					}),
 				}),
 
@@ -120,6 +133,44 @@ function ConfirmingPage:render()
 				PaddingLeft = UDim.new(0, 20),
 				PaddingRight = UDim.new(0, 20),
 			}),
+
+			SourceDiff = e(StudioPluginGui, {
+				id = "Rojo_ConfirmingSourceDiff",
+				title = "Source diff",
+				active = self.state.showingSourceDiff,
+				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({
+						showingSourceDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(StringDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldText = self.state.oldSource,
+							newText = self.state.newSource,
+						}),
+					}),
+				}),
+			}),
 		})
 
 		if self.props.createPopup then
@@ -130,10 +181,10 @@ function ConfirmingPage:render()
 					self.props.confirmData.serverInfo.projectName or "UNKNOWN"
 				),
 				active = true,
+				isEphemeral = true,
 
 				initDockState = Enum.InitialDockState.Float,
-				initEnabled = true,
+				overridePreviousState = false,
-				overridePreviousState = true,
 				floatingSize = Vector2.new(500, 350),
 				minimumSize = Vector2.new(400, 250),
 

plugin/src/App/StatusPages/Connected.lua

@@ -10,15 +10,28 @@ local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local PatchSet = require(Plugin.PatchSet)
 
+local StudioPluginGui = require(Plugin.App.Components.Studio.StudioPluginGui)
 local Header = require(Plugin.App.Components.Header)
 local IconButton = require(Plugin.App.Components.IconButton)
+local TextButton = require(Plugin.App.Components.TextButton)
 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 e = Roact.createElement
 
-local AGE_UNITS = { {31556909, "year"}, {2629743, "month"}, {604800, "week"}, {86400, "day"}, {3600, "hour"}, {60, "minute"}, }
+local AGE_UNITS = {
+	{ 31556909, "year" },
+	{ 2629743, "month" },
+	{ 604800, "week" },
+	{ 86400, "day" },
+	{ 3600, "hour" },
+	{
+		60,
+		"minute",
+	},
+}
 function timeSinceText(elapsed: number): string
 	if elapsed < 3 then
 		return "just now"
@@ -26,11 +39,11 @@ function timeSinceText(elapsed: number): string
 
 	local ageText = string.format("%d seconds ago", elapsed)
 
-	for _,UnitData in ipairs(AGE_UNITS) do
+	for _, UnitData in ipairs(AGE_UNITS) do
 		local UnitSeconds, UnitName = UnitData[1], UnitData[2]
 		if elapsed > UnitSeconds then
-			local c = math.floor(elapsed/UnitSeconds)
+			local c = math.floor(elapsed / UnitSeconds)
-			ageText = string.format("%d %s%s ago", c, UnitName, c>1 and "s" or "")
+			ageText = string.format("%d %s%s ago", c, UnitName, c > 1 and "s" or "")
 			break
 		end
 	end
@@ -38,45 +51,53 @@ function timeSinceText(elapsed: number): string
 	return ageText
 end
 
-local function ChangesDrawer(props)
+local ChangesDrawer = Roact.Component:extend("ChangesDrawer")
-	if props.rendered == false then
+
+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()
+	if self.props.rendered == false or self.serveSession == nil then
 		return nil
 	end
 
 	return Theme.with(function(theme)
 		return e(BorderedContainer, {
-			transparency = props.transparency,
+			transparency = self.props.transparency,
-			size = props.height:map(function(y)
+			size = self.props.height:map(function(y)
-				return UDim2.new(1, 0, y, -180 * y)
+				return UDim2.new(1, 0, y, -220 * y)
 			end),
 			position = UDim2.new(0, 0, 1, 0),
 			anchorPoint = Vector2.new(0, 1),
-			layoutOrder = props.layoutOrder,
+			layoutOrder = self.props.layoutOrder,
 		}, {
 			Close = e(IconButton, {
 				icon = Assets.Images.Icons.Close,
 				iconSize = 24,
 				color = theme.ConnectionDetails.DisconnectColor,
-				transparency = props.transparency,
+				transparency = self.props.transparency,
 
 				position = UDim2.new(1, 0, 0, 0),
 				anchorPoint = Vector2.new(1, 0),
 
-				onClick = props.onClose,
+				onClick = self.props.onClose,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Close the patch visualizer"
+					text = "Close the patch visualizer",
 				}),
 			}),
 
 			PatchVisualizer = e(PatchVisualizer, {
 				size = UDim2.new(1, 0, 1, 0),
-				transparency = props.transparency,
+				transparency = self.props.transparency,
 				layoutOrder = 3,
 
-				columnVisibility = {true, false, true},
+				patchTree = self.props.patchTree,
-				patch = props.patchInfo:getValue().patch,
+
-				instanceMap = props.serveSession.__instanceMap,
+				showSourceDiff = self.props.showSourceDiff,
 			}),
 		})
 	end)
@@ -91,7 +112,7 @@ local function ConnectionDetails(props)
 		}, {
 			TextContainer = e("Frame", {
 				Size = UDim2.new(1, 0, 1, 0),
-				BackgroundTransparency = 1
+				BackgroundTransparency = 1,
 			}, {
 				ProjectName = e("TextLabel", {
 					Text = props.projectName,
@@ -129,22 +150,6 @@ local function ConnectionDetails(props)
 				}),
 			}),
 
-			Disconnect = e(IconButton, {
-				icon = Assets.Images.Icons.Close,
-				iconSize = 24,
-				color = theme.ConnectionDetails.DisconnectColor,
-				transparency = props.transparency,
-
-				position = UDim2.new(1, 0, 0.5, 0),
-				anchorPoint = Vector2.new(1, 0.5),
-
-				onClick = props.onDisconnect,
-			}, {
-				Tip = e(Tooltip.Trigger, {
-					text = "Disconnect from the Rojo sync server"
-				}),
-			}),
-
 			Padding = e("UIPadding", {
 				PaddingLeft = UDim.new(0, 17),
 				PaddingRight = UDim.new(0, 15),
@@ -155,6 +160,64 @@ end
 
 local ConnectedPage = Roact.Component:extend("ConnectedPage")
 
+function ConnectedPage:getChangeInfoText()
+	local patchData = self.props.patchData
+	if patchData == nil then
+		return ""
+	end
+
+	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()
+	-- Cancel any existing updater
+	self:stopChangeInfoTextUpdater()
+
+	-- Start a new updater
+	self.changeInfoTextUpdater = task.defer(function()
+		while true do
+			if self.state.hoveringChangeInfo then
+				self.setChangeInfoText("<u>" .. self:getChangeInfoText() .. "</u>")
+			else
+				self.setChangeInfoText(self:getChangeInfoText())
+			end
+
+			local elapsed = os.time() - self.props.patchData.timestamp
+			local updateInterval = 1
+
+			-- Update timestamp text as frequently as currently needed
+			for _, UnitData in ipairs(AGE_UNITS) do
+				local UnitSeconds = UnitData[1]
+				if elapsed > UnitSeconds then
+					updateInterval = UnitSeconds
+					break
+				end
+			end
+
+			task.wait(updateInterval)
+		end
+	end)
+end
+
+function ConnectedPage:stopChangeInfoTextUpdater()
+	if self.changeInfoTextUpdater then
+		task.cancel(self.changeInfoTextUpdater)
+		self.changeInfoTextUpdater = nil
+	end
+end
+
 function ConnectedPage:init()
 	self.changeDrawerMotor = Flipper.SingleMotor.new(0)
 	self.changeDrawerHeight = bindingUtil.fromMotor(self.changeDrawerMotor)
@@ -175,7 +238,29 @@ function ConnectedPage:init()
 
 	self:setState({
 		renderChanges = false,
+		hoveringChangeInfo = false,
+		showingSourceDiff = false,
+		oldSource = "",
+		newSource = "",
 	})
+
+	self.changeInfoText, self.setChangeInfoText = Roact.createBinding("")
+
+	self:startChangeInfoTextUpdater()
+end
+
+function ConnectedPage:willUnmount()
+	self:stopChangeInfoTextUpdater()
+end
+
+function ConnectedPage:didUpdate(previousProps)
+	if self.props.patchData.timestamp ~= previousProps.patchData.timestamp then
+		-- New patch recieved
+		self:startChangeInfoTextUpdater()
+		self:setState({
+			showingSourceDiff = false,
+		})
+	end
 end
 
 function ConnectedPage:render()
@@ -207,16 +292,46 @@ function ConnectedPage:render()
 				onDisconnect = self.props.onDisconnect,
 			}),
 
+			Buttons = e("Frame", {
+				Size = UDim2.new(1, 0, 0, 34),
+				LayoutOrder = 3,
+				BackgroundTransparency = 1,
+				ZIndex = 2,
+			}, {
+				Settings = e(TextButton, {
+					text = "Settings",
+					style = "Bordered",
+					transparency = self.props.transparency,
+					layoutOrder = 1,
+					onClick = self.props.onNavigateSettings,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "View and modify plugin settings",
+					}),
+				}),
+
+				Disconnect = e(TextButton, {
+					text = "Disconnect",
+					style = "Solid",
+					transparency = self.props.transparency,
+					layoutOrder = 2,
+					onClick = self.props.onDisconnect,
+				}, {
+					Tip = e(Tooltip.Trigger, {
+						text = "Disconnect from the Rojo sync server",
+					}),
+				}),
+
+				Layout = e("UIListLayout", {
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
+					FillDirection = Enum.FillDirection.Horizontal,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 10),
+				}),
+			}),
+
 			ChangeInfo = e("TextButton", {
-				Text = self.props.patchInfo:map(function(info)
+				Text = self.changeInfoText,
-					local changes = PatchSet.countChanges(info.patch)
-					return string.format(
-						"<i>Synced %d change%s %s</i>",
-						changes,
-						changes == 1 and "" or "s",
-						timeSinceText(os.time() - info.timestamp)
-					)
-				end),
 				Font = Enum.Font.Gotham,
 				TextSize = 14,
 				TextWrapped = true,
@@ -228,9 +343,23 @@ function ConnectedPage:render()
 
 				Size = UDim2.new(1, 0, 0, 28),
 
-				LayoutOrder = 3,
+				LayoutOrder = 4,
 				BackgroundTransparency = 1,
 
+				[Roact.Event.MouseEnter] = function()
+					self:setState({
+						hoveringChangeInfo = true,
+					})
+					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, {
@@ -244,15 +373,27 @@ function ConnectedPage:render()
 						}))
 					end
 				end,
+			}, {
+				Tooltip = e(Tooltip.Trigger, {
+					text = if self.state.renderChanges then "Hide the changes" else "View the changes",
+				}),
 			}),
 
 			ChangesDrawer = e(ChangesDrawer, {
 				rendered = self.state.renderChanges,
 				transparency = self.props.transparency,
-				patchInfo = self.props.patchInfo,
+				patchTree = self.props.patchTree,
 				serveSession = self.props.serveSession,
 				height = self.changeDrawerHeight,
-				layoutOrder = 4,
+				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, {
@@ -261,6 +402,44 @@ function ConnectedPage:render()
 					}))
 				end,
 			}),
+
+			SourceDiff = e(StudioPluginGui, {
+				id = "Rojo_ConnectedSourceDiff",
+				title = "Source diff",
+				active = self.state.showingSourceDiff,
+				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({
+						showingSourceDiff = false,
+					})
+				end,
+			}, {
+				TooltipsProvider = e(Tooltip.Provider, nil, {
+					Tooltips = e(Tooltip.Container, nil),
+					Content = e("Frame", {
+						Size = UDim2.fromScale(1, 1),
+						BackgroundTransparency = 1,
+					}, {
+						e(StringDiffVisualizer, {
+							size = UDim2.new(1, -10, 1, -10),
+							position = UDim2.new(0, 5, 0, 5),
+							anchorPoint = Vector2.new(0, 0),
+							transparency = self.props.transparency,
+
+							oldText = self.state.oldSource,
+							newText = self.state.newSource,
+						}),
+					}),
+				}),
+			}),
 		})
 	end)
 end

plugin/src/App/StatusPages/Error.lua

@@ -50,7 +50,9 @@ function Error:render()
 				local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
 
 				local textBounds = TextService:GetTextSize(
-					self.props.errorMessage, 16, Enum.Font.Code,
+					self.props.errorMessage,
+					16,
+					Enum.Font.Code,
 					Vector2.new(containerSize.X, math.huge)
 				)
 
@@ -60,12 +62,13 @@ function Error:render()
 			ErrorMessage = Theme.with(function(theme)
 				return e("TextBox", {
 					[Roact.Event.InputBegan] = function(rbx, input)
-						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then return end
+						if input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+							return
+						end
 						rbx.SelectionStart = 0
-						rbx.CursorPosition = #rbx.Text+1
+						rbx.CursorPosition = #rbx.Text + 1
 					end,
 
-
 					Text = self.props.errorMessage,
 					TextEditable = false,
 					Font = Enum.Font.Code,
@@ -126,7 +129,7 @@ function ErrorPage:render()
 				onClick = self.props.onClose,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Dismiss message"
+					text = "Dismiss message",
 				}),
 			}),
 

plugin/src/App/StatusPages/NotConnected.lua

@@ -46,7 +46,7 @@ local function AddressEntry(props)
 					if props.onHostChange ~= nil then
 						props.onHostChange(object.Text)
 					end
-				end
+				end,
 			}),
 
 			Port = e("TextBox", {
@@ -120,7 +120,7 @@ function NotConnectedPage:render()
 				onClick = self.props.onNavigateSettings,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "View and modify plugin settings"
+					text = "View and modify plugin settings",
 				}),
 			}),
 
@@ -132,7 +132,7 @@ function NotConnectedPage:render()
 				onClick = self.props.onConnect,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Connect to a Rojo sync server"
+					text = "Connect to a Rojo sync server",
 				}),
 			}),
 

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

@@ -32,6 +32,7 @@ local Setting = Roact.Component:extend("Setting")
 function Setting:init()
 	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+	self.inputSize, self.setInputSize = Roact.createBinding(Vector2.new(0, 0))
 
 	self:setState({
 		setting = Settings:get(self.props.id),
@@ -59,58 +60,75 @@ function Setting:render()
 			LayoutOrder = self.props.layoutOrder,
 			ZIndex = -self.props.layoutOrder,
 			BackgroundTransparency = 1,
+			Visible = self.props.visible,
 
 			[Roact.Change.AbsoluteSize] = function(object)
 				self.setContainerSize(object.AbsoluteSize)
 			end,
 		}, {
-			Input = if self.props.options ~= nil then
+			RightAligned = Roact.createElement("Frame", {
-				e(Dropdown, {
+				BackgroundTransparency = 1,
-					options = self.props.options,
+				Size = UDim2.new(1, 0, 1, 0),
-					active = self.state.setting,
+			}, {
-					transparency = self.props.transparency,
+				Layout = e("UIListLayout", {
-					position = UDim2.new(1, 0, 0.5, 0),
+					VerticalAlignment = Enum.VerticalAlignment.Center,
-					anchorPoint = Vector2.new(1, 0.5),
+					HorizontalAlignment = Enum.HorizontalAlignment.Right,
-					onClick = function(option)
+					FillDirection = Enum.FillDirection.Horizontal,
-						Settings:set(self.props.id, option)
+					SortOrder = Enum.SortOrder.LayoutOrder,
-					end,
+					Padding = UDim.new(0, 2),
-				})
+					[Roact.Change.AbsoluteContentSize] = function(rbx)
-			else
+						self.setInputSize(rbx.AbsoluteContentSize)
-				e(Checkbox, {
-					active = self.state.setting,
-					transparency = self.props.transparency,
-					position = UDim2.new(1, 0, 0.5, 0),
-					anchorPoint = Vector2.new(1, 0.5),
-					onClick = function()
-						local currentValue = Settings:get(self.props.id)
-						Settings:set(self.props.id, not currentValue)
 					end,
 				}),
 
-			Reset = if self.props.onReset then e(IconButton, {
+				Input = if self.props.input ~= nil
-				icon = Assets.Images.Icons.Reset,
+					then self.props.input
-				iconSize = 24,
+					elseif self.props.options ~= nil then e(Dropdown, {
-				color = theme.BackButtonColor,
+						locked = self.props.locked,
-				transparency = self.props.transparency,
+						options = self.props.options,
-				visible = self.props.showReset,
+						active = self.state.setting,
+						transparency = self.props.transparency,
+						onClick = function(option)
+							Settings:set(self.props.id, option)
+						end,
+					})
+					else e(Checkbox, {
+						locked = self.props.locked,
+						active = self.state.setting,
+						transparency = self.props.transparency,
+						onClick = function()
+							local currentValue = Settings:get(self.props.id)
+							Settings:set(self.props.id, not currentValue)
+						end,
+					}),
 
-				position = UDim2.new(1, -32 - (self.props.options ~= nil and 120 or 40), 0.5, 0),
+				Reset = if self.props.onReset
-				anchorPoint = Vector2.new(0, 0.5),
+					then e(IconButton, {
+						icon = Assets.Images.Icons.Reset,
+						iconSize = 24,
+						color = theme.BackButtonColor,
+						transparency = self.props.transparency,
+						visible = self.props.showReset,
+						layoutOrder = -1,
 
-				onClick = self.props.onReset,
+						onClick = self.props.onReset,
-			}) else nil,
+					})
+					else nil,
+			}),
 
 			Text = e("Frame", {
 				Size = UDim2.new(1, 0, 1, 0),
 				BackgroundTransparency = 1,
 			}, {
 				Name = e("TextLabel", {
-					Text = self.props.name,
+					Text = (if self.props.experimental then '<font color="#FF8E3C">⚠ </font>' else "")
+						.. 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),
 
@@ -119,7 +137,8 @@ function Setting:render()
 				}),
 
 				Description = e("TextLabel", {
-					Text = self.props.description,
+					Text = (if self.props.experimental then '<font color="#FF8E3C">[Experimental] </font>' else "")
+						.. self.props.description,
 					Font = Enum.Font.Gotham,
 					LineHeight = 1.2,
 					TextSize = 14,
@@ -127,12 +146,21 @@ function Setting:render()
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 					TextWrapped = true,
+					RichText = true,
 
-					Size = self.containerSize:map(function(value)
+					Size = Roact.joinBindings({
-						local offset = (self.props.onReset and 34 or 0) + (self.props.options ~= nil and 120 or 40)
+						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(
-							self.props.description, 14, Enum.Font.Gotham, 1.2,
+							desc,
-							Vector2.new(value.X - offset, math.huge)
+							14,
+							Enum.Font.Gotham,
+							1.2,
+							Vector2.new(values.containerSize.X - offset, math.huge)
 						)
 						return UDim2.new(1, -offset, 0, textBounds.Y)
 					end),

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

@@ -12,6 +12,7 @@ local Theme = require(Plugin.App.Theme)
 local IconButton = require(Plugin.App.Components.IconButton)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
 local Tooltip = require(Plugin.App.Components.Tooltip)
+local TextInput = require(Plugin.App.Components.TextInput)
 local Setting = require(script.Setting)
 
 local e = Roact.createElement
@@ -25,6 +26,7 @@ local function invertTbl(tbl)
 end
 
 local invertedLevels = invertTbl(Log.Level)
+local confirmationBehaviors = { "Initial", "Always", "Large Changes", "Unlisted PlaceId", "Never" }
 
 local function Navbar(props)
 	return Theme.with(function(theme)
@@ -47,7 +49,7 @@ local function Navbar(props)
 				onClick = props.onBack,
 			}, {
 				Tip = e(Tooltip.Trigger, {
-					text = "Back"
+					text = "Back",
 				}),
 			}),
 
@@ -61,7 +63,7 @@ local function Navbar(props)
 				Size = UDim2.new(1, 0, 1, 0),
 
 				BackgroundTransparency = 1,
-			})
+			}),
 		})
 	end)
 end
@@ -87,36 +89,90 @@ function SettingsPage:render()
 				layoutOrder = 0,
 			}),
 
-			OpenScriptsExternally = e(Setting, {
-				id = "openScriptsExternally",
-				name = "Open Scripts Externally",
-				description = "Attempt to open scripts in an external editor",
-				transparency = self.props.transparency,
-				layoutOrder = 1,
-			}),
-
 			ShowNotifications = e(Setting, {
 				id = "showNotifications",
 				name = "Show Notifications",
 				description = "Popup notifications in viewport",
 				transparency = self.props.transparency,
+				layoutOrder = 1,
+			}),
+
+			SyncReminder = e(Setting, {
+				id = "syncReminder",
+				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,
+					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 = 3,
+				layoutOrder = 5,
+			}),
+
+			OpenScriptsExternally = e(Setting, {
+				id = "openScriptsExternally",
+				name = "Open Scripts Externally",
+				description = "Attempt to open scripts in an external editor",
+				locked = self.props.syncActive,
+				experimental = true,
+				transparency = self.props.transparency,
+				layoutOrder = 6,
 			}),
 
 			TwoWaySync = e(Setting, {
 				id = "twoWaySync",
 				name = "Two-Way Sync",
-				description = "EXPERIMENTAL! Editing files in Studio will sync them into the filesystem",
+				description = "Editing files in Studio will sync them into the filesystem",
+				locked = self.props.syncActive,
+				experimental = true,
 				transparency = self.props.transparency,
-				layoutOrder = 4,
+				layoutOrder = 7,
 			}),
 
 			LogLevel = e(Setting, {
@@ -124,7 +180,7 @@ function SettingsPage:render()
 				name = "Log Level",
 				description = "Plugin output verbosity level",
 				transparency = self.props.transparency,
-				layoutOrder = 5,
+				layoutOrder = 100,
 
 				options = invertedLevels,
 				showReset = Settings:getBinding("logLevel"):map(function(value)
@@ -140,7 +196,7 @@ function SettingsPage:render()
 				name = "Typechecking",
 				description = "Toggle typechecking on the API surface",
 				transparency = self.props.transparency,
-				layoutOrder = 6,
+				layoutOrder = 101,
 			}),
 
 			Layout = e("UIListLayout", {

plugin/src/App/Theme.lua

@@ -19,209 +19,229 @@ local Rojo = script:FindFirstAncestor("Rojo")
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
-local Log = require(Packages.Log)
 
 local strict = require(script.Parent.Parent.strict)
 
--- Copying hex colors back and forth from design programs is faster
+local BRAND_COLOR = Color3.fromHex("E13835")
-local function hexColor(decimal)
-	local red = bit32.band(bit32.rshift(decimal, 16), 2^8 - 1)
-	local green = bit32.band(bit32.rshift(decimal, 8), 2^8 - 1)
-	local blue = bit32.band(decimal, 2^8 - 1)
-
-	return Color3.fromRGB(red, green, blue)
-end
-
-local BRAND_COLOR = hexColor(0xE13835)
 
 local lightTheme = strict("LightTheme", {
-	BackgroundColor = hexColor(0xFFFFFF),
+	BackgroundColor = Color3.fromHex("FFFFFF"),
 	Button = {
 		Solid = {
-			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillColor = Color3.fromHex("FFFFFF"),
 			ActionFillTransparency = 0.8,
 			Enabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 			Disabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 		},
 		Bordered = {
-			ActionFillColor = hexColor(0x000000),
+			ActionFillColor = Color3.fromHex("000000"),
 			ActionFillTransparency = 0.9,
 			Enabled = {
-				TextColor = hexColor(0x393939),
+				TextColor = Color3.fromHex("393939"),
-				BorderColor = hexColor(0xACACAC),
+				BorderColor = Color3.fromHex("ACACAC"),
 			},
 			Disabled = {
-				TextColor = hexColor(0x393939),
+				TextColor = Color3.fromHex("393939"),
-				BorderColor = hexColor(0xACACAC),
+				BorderColor = Color3.fromHex("ACACAC"),
 			},
 		},
 	},
 	Checkbox = {
 		Active = {
-			IconColor = hexColor(0xFFFFFF),
+			IconColor = Color3.fromHex("FFFFFF"),
 			BackgroundColor = BRAND_COLOR,
 		},
 		Inactive = {
-			IconColor = hexColor(0xEEEEEE),
+			IconColor = Color3.fromHex("EEEEEE"),
-			BorderColor = hexColor(0xAFAFAF),
+			BorderColor = Color3.fromHex("AFAFAF"),
 		},
 	},
 	Dropdown = {
-		TextColor = hexColor(0x00000),
+		TextColor = Color3.fromHex("000000"),
-		BorderColor = hexColor(0xAFAFAF),
+		BorderColor = Color3.fromHex("AFAFAF"),
-		BackgroundColor = hexColor(0xEEEEEE),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
 		Open = {
 			IconColor = BRAND_COLOR,
 		},
 		Closed = {
-			IconColor = hexColor(0xEEEEEE),
+			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 = hexColor(0x000000),
+		TextColor = Color3.fromHex("000000"),
-		PlaceholderColor = hexColor(0x8C8C8C)
+		PlaceholderColor = Color3.fromHex("8C8C8C"),
 	},
 	BorderedContainer = {
-		BorderColor = hexColor(0xCBCBCB),
+		BorderColor = Color3.fromHex("CBCBCB"),
-		BackgroundColor = hexColor(0xEEEEEE),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
 	},
 	Spinner = {
 		ForegroundColor = BRAND_COLOR,
-		BackgroundColor = hexColor(0xEEEEEE),
+		BackgroundColor = Color3.fromHex("EEEEEE"),
 	},
 	Diff = {
-		Add = hexColor(0xbaffbd),
+		Add = Color3.fromHex("baffbd"),
-		Remove = hexColor(0xffbdba),
+		Remove = Color3.fromHex("ffbdba"),
-		Edit = hexColor(0xbacdff),
+		Edit = Color3.fromHex("bacdff"),
-		Row = hexColor(0x000000),
+		Row = Color3.fromHex("000000"),
+		Warning = Color3.fromHex("FF8E3C"),
 	},
 	ConnectionDetails = {
-		ProjectNameColor = hexColor(0x00000),
+		ProjectNameColor = Color3.fromHex("000000"),
-		AddressColor = hexColor(0x00000),
+		AddressColor = Color3.fromHex("000000"),
 		DisconnectColor = BRAND_COLOR,
 	},
 	Settings = {
-		DividerColor = hexColor(0xCBCBCB),
+		DividerColor = Color3.fromHex("CBCBCB"),
 		Navbar = {
-			BackButtonColor = hexColor(0x000000),
+			BackButtonColor = Color3.fromHex("000000"),
-			TextColor = hexColor(0x000000),
+			TextColor = Color3.fromHex("000000"),
 		},
 		Setting = {
-			NameColor = hexColor(0x000000),
+			NameColor = Color3.fromHex("000000"),
-			DescriptionColor = hexColor(0x5F5F5F),
+			DescriptionColor = Color3.fromHex("5F5F5F"),
 		},
 	},
 	Header = {
 		LogoColor = BRAND_COLOR,
-		VersionColor = hexColor(0x727272),
+		VersionColor = Color3.fromHex("727272"),
 	},
 	Notification = {
-		InfoColor = hexColor(0x00000),
+		InfoColor = Color3.fromHex("000000"),
 		CloseColor = BRAND_COLOR,
 	},
-	ErrorColor = hexColor(0x000000),
+	ErrorColor = Color3.fromHex("000000"),
-	ScrollBarColor = hexColor(0x000000),
+	ScrollBarColor = Color3.fromHex("000000"),
 })
 
 local darkTheme = strict("DarkTheme", {
-	BackgroundColor = hexColor(0x2E2E2E),
+	BackgroundColor = Color3.fromHex("2E2E2E"),
 	Button = {
 		Solid = {
-			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillColor = Color3.fromHex("FFFFFF"),
 			ActionFillTransparency = 0.8,
 			Enabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 			Disabled = {
-				TextColor = hexColor(0xFFFFFF),
+				TextColor = Color3.fromHex("FFFFFF"),
 				BackgroundColor = BRAND_COLOR,
 			},
 		},
 		Bordered = {
-			ActionFillColor = hexColor(0xFFFFFF),
+			ActionFillColor = Color3.fromHex("FFFFFF"),
 			ActionFillTransparency = 0.9,
 			Enabled = {
-				TextColor = hexColor(0xDBDBDB),
+				TextColor = Color3.fromHex("DBDBDB"),
-				BorderColor = hexColor(0x535353),
+				BorderColor = Color3.fromHex("535353"),
 			},
 			Disabled = {
-				TextColor = hexColor(0xDBDBDB),
+				TextColor = Color3.fromHex("DBDBDB"),
-				BorderColor = hexColor(0x535353),
+				BorderColor = Color3.fromHex("535353"),
 			},
 		},
 	},
 	Checkbox = {
 		Active = {
-			IconColor = hexColor(0xFFFFFF),
+			IconColor = Color3.fromHex("FFFFFF"),
 			BackgroundColor = BRAND_COLOR,
 		},
 		Inactive = {
-			IconColor = hexColor(0x484848),
+			IconColor = Color3.fromHex("484848"),
-			BorderColor = hexColor(0x5A5A5A),
+			BorderColor = Color3.fromHex("5A5A5A"),
 		},
 	},
 	Dropdown = {
-		TextColor = hexColor(0xFFFFFF),
+		TextColor = Color3.fromHex("FFFFFF"),
-		BorderColor = hexColor(0x5A5A5A),
+		BorderColor = Color3.fromHex("5A5A5A"),
-		BackgroundColor = hexColor(0x2B2B2B),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
 		Open = {
 			IconColor = BRAND_COLOR,
 		},
 		Closed = {
-			IconColor = hexColor(0x484848),
+			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 = hexColor(0xFFFFFF),
+		TextColor = Color3.fromHex("FFFFFF"),
-		PlaceholderColor = hexColor(0x8B8B8B)
+		PlaceholderColor = Color3.fromHex("8B8B8B"),
 	},
 	BorderedContainer = {
-		BorderColor = hexColor(0x535353),
+		BorderColor = Color3.fromHex("535353"),
-		BackgroundColor = hexColor(0x2B2B2B),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
 	},
 	Spinner = {
 		ForegroundColor = BRAND_COLOR,
-		BackgroundColor = hexColor(0x2B2B2B),
+		BackgroundColor = Color3.fromHex("2B2B2B"),
 	},
 	Diff = {
-		Add = hexColor(0x273732),
+		Add = Color3.fromHex("273732"),
-		Remove = hexColor(0x3F2D32),
+		Remove = Color3.fromHex("3F2D32"),
-		Edit = hexColor(0x193345),
+		Edit = Color3.fromHex("193345"),
-		Row = hexColor(0xFFFFFF),
+		Row = Color3.fromHex("FFFFFF"),
+		Warning = Color3.fromHex("FF8E3C"),
 	},
 	ConnectionDetails = {
-		ProjectNameColor = hexColor(0xFFFFFF),
+		ProjectNameColor = Color3.fromHex("FFFFFF"),
-		AddressColor = hexColor(0xFFFFFF),
+		AddressColor = Color3.fromHex("FFFFFF"),
-		DisconnectColor = hexColor(0xFFFFFF),
+		DisconnectColor = Color3.fromHex("FFFFFF"),
 	},
 	Settings = {
-		DividerColor = hexColor(0x535353),
+		DividerColor = Color3.fromHex("535353"),
 		Navbar = {
-			BackButtonColor = hexColor(0xFFFFFF),
+			BackButtonColor = Color3.fromHex("FFFFFF"),
-			TextColor = hexColor(0xFFFFFF),
+			TextColor = Color3.fromHex("FFFFFF"),
 		},
 		Setting = {
-			NameColor = hexColor(0xFFFFFF),
+			NameColor = Color3.fromHex("FFFFFF"),
-			DescriptionColor = hexColor(0xD3D3D3),
+			DescriptionColor = Color3.fromHex("D3D3D3"),
 		},
 	},
 	Header = {
 		LogoColor = BRAND_COLOR,
-		VersionColor = hexColor(0xD3D3D3)
+		VersionColor = Color3.fromHex("D3D3D3"),
 	},
 	Notification = {
-		InfoColor = hexColor(0xFFFFFF),
+		InfoColor = Color3.fromHex("FFFFFF"),
-		CloseColor = hexColor(0xFFFFFF),
+		CloseColor = Color3.fromHex("FFFFFF"),
 	},
-	ErrorColor = hexColor(0xFFFFFF),
+	ErrorColor = Color3.fromHex("FFFFFF"),
-	ScrollBarColor = hexColor(0xFFFFFF),
+	ScrollBarColor = Color3.fromHex("FFFFFF"),
 })
 
 local Context = Roact.createContext(lightTheme)

plugin/src/App/init.lua

@@ -1,5 +1,7 @@
+local ChangeHistoryService = game:GetService("ChangeHistoryService")
 local Players = game:GetService("Players")
 local ServerStorage = game:GetService("ServerStorage")
+local RunService = game:GetService("RunService")
 
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
@@ -17,8 +19,10 @@ local Dictionary = require(Plugin.Dictionary)
 local ServeSession = require(Plugin.ServeSession)
 local ApiContext = require(Plugin.ApiContext)
 local PatchSet = require(Plugin.PatchSet)
+local PatchTree = require(Plugin.PatchTree)
 local preloadAssets = require(Plugin.preloadAssets)
 local soundPlayer = require(Plugin.soundPlayer)
+local ignorePlaceIds = require(Plugin.ignorePlaceIds)
 local Theme = require(script.Theme)
 
 local Page = require(script.Page)
@@ -51,42 +55,152 @@ function App:init()
 	self.host, self.setHost = Roact.createBinding(priorHost or "")
 	self.port, self.setPort = Roact.createBinding(priorPort or "")
 
-	self.patchInfo, self.setPatchInfo = Roact.createBinding({
-		patch = PatchSet.newEmpty(),
-		timestamp = os.time(),
-	})
 	self.confirmationBindable = Instance.new("BindableEvent")
 	self.confirmationEvent = self.confirmationBindable.Event
+	self.knownProjects = {}
+	self.notifId = 0
+
+	self.waypointConnection = ChangeHistoryService.OnUndo:Connect(function(action: string)
+		if not string.find(action, "^Rojo: Patch") then
+			return
+		end
+
+		local undoConnection, redoConnection = nil, nil
+		local function cleanup()
+			undoConnection:Disconnect()
+			redoConnection:Disconnect()
+		end
+
+		Log.warn(
+			string.format(
+				"You've undone '%s'.\nIf this was not intended, please Redo in the topbar or with Ctrl/⌘+Y.",
+				action
+			)
+		)
+		local dismissNotif = self:addNotification(
+			string.format("You've undone '%s'.\nIf this was not intended, please restore.", action),
+			10,
+			{
+				Restore = {
+					text = "Restore",
+					style = "Solid",
+					layoutOrder = 1,
+					onClick = function(notification)
+						cleanup()
+						notification:dismiss()
+						ChangeHistoryService:Redo()
+					end,
+				},
+				Dismiss = {
+					text = "Dismiss",
+					style = "Bordered",
+					layoutOrder = 2,
+					onClick = function(notification)
+						cleanup()
+						notification:dismiss()
+					end,
+				},
+			}
+		)
+
+		undoConnection = ChangeHistoryService.OnUndo:Once(function()
+			-- Our notif is now out of date- redoing will not restore the patch
+			-- since we've undone even further. Dismiss the notif.
+			cleanup()
+			dismissNotif()
+		end)
+		redoConnection = ChangeHistoryService.OnRedo:Once(function(redoneAction: string)
+			if redoneAction == action then
+				-- The user has restored the patch, so we can dismiss the notif
+				cleanup()
+				dismissNotif()
+			end
+		end)
+	end)
 
 	self:setState({
 		appStatus = AppStatus.NotConnected,
 		guiEnabled = false,
 		confirmData = {},
+		patchData = {
+			patch = PatchSet.newEmpty(),
+			unapplied = PatchSet.newEmpty(),
+			timestamp = os.time(),
+		},
 		notifications = {},
 		toolbarIcon = Assets.Images.PluginButton,
 	})
+
+	if
+		RunService:IsEdit()
+		and self.serveSession == nil
+		and Settings:get("syncReminder")
+		and self:getLastSyncTimestamp()
+		and (self:isSyncLockAvailable())
+	then
+		self:addNotification("You've previously synced this place. Would you like to reconnect?", 300, {
+			Connect = {
+				text = "Connect",
+				style = "Solid",
+				layoutOrder = 1,
+				onClick = function(notification)
+					notification:dismiss()
+					self:startSession()
+				end,
+			},
+			Dismiss = {
+				text = "Dismiss",
+				style = "Bordered",
+				layoutOrder = 2,
+				onClick = function(notification)
+					notification:dismiss()
+				end,
+			},
+		})
+	end
 end
 
-function App:addNotification(text: string, timeout: number?)
+function App:willUnmount()
+	self.waypointConnection:Disconnect()
+	self.confirmationBindable:Destroy()
+end
+
+function App:addNotification(
+	text: string,
+	timeout: number?,
+	actions: { [string]: { text: string, style: string, layoutOrder: number, onClick: (any) -> () } }?
+)
 	if not Settings:get("showNotifications") then
 		return
 	end
 
+	self.notifId += 1
+	local id = self.notifId
+
 	local notifications = table.clone(self.state.notifications)
-	table.insert(notifications, {
+	notifications[id] = {
 		text = text,
 		timestamp = DateTime.now().UnixTimestampMillis,
 		timeout = timeout or 3,
-	})
+		actions = actions,
+	}
 
 	self:setState({
 		notifications = notifications,
 	})
+
+	return function()
+		self:closeNotification(id)
+	end
 end
 
-function App:closeNotification(index: number)
+function App:closeNotification(id: number)
+	if not self.state.notifications[id] then
+		return
+	end
+
 	local notifications = table.clone(self.state.notifications)
-	table.remove(notifications, index)
+	notifications[id] = nil
 
 	self:setState({
 		notifications = notifications,
@@ -95,14 +209,42 @@ end
 
 function App:getPriorEndpoint()
 	local priorEndpoints = Settings:get("priorEndpoints")
-	if not priorEndpoints then return end
+	if not priorEndpoints then
+		return
+	end
 
-	local place = priorEndpoints[tostring(game.PlaceId)]
+	local id = tostring(game.PlaceId)
-	if not place then return end
+	if ignorePlaceIds[id] then
+		return
+	end
+
+	local place = priorEndpoints[id]
+	if not place then
+		return
+	end
 
 	return place.host, place.port
 end
 
+function App:getLastSyncTimestamp()
+	local priorEndpoints = Settings:get("priorEndpoints")
+	if not priorEndpoints then
+		return
+	end
+
+	local id = tostring(game.PlaceId)
+	if ignorePlaceIds[id] then
+		return
+	end
+
+	local place = priorEndpoints[id]
+	if not place then
+		return
+	end
+
+	return place.timestamp
+end
+
 function App:setPriorEndpoint(host: string, port: string)
 	local priorEndpoints = Settings:get("priorEndpoints")
 	if not priorEndpoints then
@@ -117,18 +259,18 @@ function App:setPriorEndpoint(host: string, port: string)
 		end
 	end
 
-	if host == Config.defaultHost and port == Config.defaultPort then
+	local id = tostring(game.PlaceId)
-		-- Don't save default
+	if ignorePlaceIds[id] then
-		priorEndpoints[tostring(game.PlaceId)] = nil
+		return
-	else
-		priorEndpoints[tostring(game.PlaceId)] = {
-			host = host ~= Config.defaultHost and host or nil,
-			port = port ~= Config.defaultPort and port or nil,
-			timestamp = os.time(),
-		}
-		Log.trace("Saved last used endpoint for {}", game.PlaceId)
 	end
 
+	priorEndpoints[id] = {
+		host = if host ~= Config.defaultHost then host else nil,
+		port = if port ~= Config.defaultPort then port else nil,
+		timestamp = os.time(),
+	}
+	Log.trace("Saved last used endpoint for {}", game.PlaceId)
+
 	Settings:set("priorEndpoints", priorEndpoints)
 end
 
@@ -142,12 +284,39 @@ function App:getHostAndPort()
 	return host, port
 end
 
+function App:isSyncLockAvailable()
+	if #Players:GetPlayers() == 0 then
+		-- Team Create is not active, so no one can be holding the lock
+		return true
+	end
+
+	local lock = ServerStorage:FindFirstChild("__Rojo_SessionLock")
+	if not lock then
+		-- No lock is made yet, so it is available
+		return true
+	end
+
+	if lock.Value and lock.Value ~= Players.LocalPlayer and lock.Value.Parent then
+		-- Someone else is holding the lock
+		return false, lock.Value
+	end
+
+	-- The lock exists, but is not claimed
+	return true
+end
+
 function App:claimSyncLock()
 	if #Players:GetPlayers() == 0 then
 		Log.trace("Skipping sync lock because this isn't in Team Create")
 		return true
 	end
 
+	local isAvailable, priorOwner = self:isSyncLockAvailable()
+	if not isAvailable then
+		Log.trace("Skipping sync lock because it is already claimed")
+		return false, priorOwner
+	end
+
 	local lock = ServerStorage:FindFirstChild("__Rojo_SessionLock")
 	if not lock then
 		lock = Instance.new("ObjectValue")
@@ -159,11 +328,6 @@ function App:claimSyncLock()
 		return true
 	end
 
-	if lock.Value and lock.Value ~= Players.LocalPlayer and lock.Value.Parent then
-		Log.trace("Found existing sync lock owned by {}", lock.Value)
-		return false, lock.Value
-	end
-
 	lock.Value = Players.LocalPlayer
 	Log.trace("Claimed existing sync lock")
 	return true
@@ -219,31 +383,51 @@ function App:startSession()
 		twoWaySync = sessionOptions.twoWaySync,
 	})
 
-	serveSession:onPatchApplied(function(patch, _unapplied)
+	self.cleanupPrecommit = serveSession.__reconciler:hookPrecommit(function(patch, instanceMap)
+		-- Build new tree for patch
+		self:setState({
+			patchTree = PatchTree.build(patch, instanceMap, { "Property", "Old", "New" }),
+		})
+	end)
+	self.cleanupPostcommit = serveSession.__reconciler:hookPostcommit(function(patch, instanceMap, unappliedPatch)
+		-- Update tree with unapplied metadata
+		self:setState(function(prevState)
+			return {
+				patchTree = PatchTree.updateMetadata(prevState.patchTree, patch, instanceMap, unappliedPatch),
+			}
+		end)
+	end)
+
+	serveSession:hookPostcommit(function(patch, _instanceMap, unapplied)
+		local now = os.time()
+		local old = self.state.patchData
+
 		if PatchSet.isEmpty(patch) then
-			-- Ignore empty patches
+			-- Ignore empty patch, but update timestamp
+			self:setState({
+				patchData = {
+					patch = old.patch,
+					unapplied = old.unapplied,
+					timestamp = now,
+				},
+			})
 			return
 		end
 
-		local now = os.time()
-
-		local old = self.patchInfo:getValue()
 		if now - old.timestamp < 2 then
 			-- Patches that apply in the same second are
 			-- considered to be part of the same change for human clarity
-			local merged = PatchSet.newEmpty()
+			patch = PatchSet.assign(PatchSet.newEmpty(), old.patch, patch)
-			PatchSet.assign(merged, old.patch, patch)
+			unapplied = PatchSet.assign(PatchSet.newEmpty(), old.unapplied, unapplied)
-
-			self.setPatchInfo({
-				patch = merged,
-				timestamp = now,
-			})
-		else
-			self.setPatchInfo({
-				patch = patch,
-				timestamp = now,
-			})
 		end
+
+		self:setState({
+			patchData = {
+				patch = patch,
+				unapplied = unapplied,
+				timestamp = now,
+			},
+		})
 	end)
 
 	serveSession:onStatusChanged(function(status, details)
@@ -256,6 +440,8 @@ function App:startSession()
 			})
 			self:addNotification("Connecting to session...")
 		elseif status == ServeSession.Status.Connected then
+			self.knownProjects[details] = true
+
 			local address = ("%s:%s"):format(host, port)
 			self:setState({
 				appStatus = AppStatus.Connected,
@@ -267,6 +453,13 @@ function App:startSession()
 		elseif status == ServeSession.Status.Disconnected then
 			self.serveSession = nil
 			self:releaseSyncLock()
+			self:setState({
+				patchData = {
+					patch = PatchSet.newEmpty(),
+					unapplied = PatchSet.newEmpty(),
+					timestamp = os.time(),
+				},
+			})
 
 			-- Details being present indicates that this
 			-- disconnection was from an error.
@@ -291,9 +484,61 @@ function App:startSession()
 
 	serveSession:setConfirmCallback(function(instanceMap, patch, serverInfo)
 		if PatchSet.isEmpty(patch) then
+			Log.trace("Accepting patch without confirmation because it is empty")
 			return "Accept"
 		end
 
+		local confirmationBehavior = Settings:get("confirmationBehavior")
+		if confirmationBehavior == "Initial" then
+			-- Only confirm if we haven't synced this project yet this session
+			if self.knownProjects[serverInfo.projectName] then
+				Log.trace(
+					"Accepting patch without confirmation because project has already been connected and behavior is set to Initial"
+				)
+				return "Accept"
+			end
+		elseif confirmationBehavior == "Large Changes" then
+			-- Only confirm if the patch impacts many instances
+			if PatchSet.countInstances(patch) < Settings:get("largeChangesConfirmationThreshold") then
+				Log.trace(
+					"Accepting patch without confirmation because patch is small and behavior is set to Large Changes"
+				)
+				return "Accept"
+			end
+		elseif confirmationBehavior == "Unlisted PlaceId" then
+			-- Only confirm if the current placeId is not in the servePlaceIds allowlist
+			if serverInfo.expectedPlaceIds then
+				local isListed = table.find(serverInfo.expectedPlaceIds, game.PlaceId) ~= nil
+				if isListed then
+					Log.trace(
+						"Accepting patch without confirmation because placeId is listed and behavior is set to Unlisted PlaceId"
+					)
+					return "Accept"
+				end
+			end
+		elseif confirmationBehavior == "Never" then
+			Log.trace("Accepting patch without confirmation because behavior is set to Never")
+			return "Accept"
+		end
+
+		-- The datamodel name gets overwritten by Studio, making confirmation of it intrusive
+		-- and unnecessary. This special case allows it to be accepted without confirmation.
+		if
+			PatchSet.hasAdditions(patch) == false
+			and PatchSet.hasRemoves(patch) == false
+			and PatchSet.containsOnlyInstance(patch, instanceMap, game)
+		then
+			local datamodelUpdates = PatchSet.getUpdateForInstance(patch, instanceMap, game)
+			if
+				datamodelUpdates ~= nil
+				and next(datamodelUpdates.changedProperties) == nil
+				and datamodelUpdates.changedClassName == nil
+			then
+				Log.trace("Accepting patch without confirmation because it only contains a datamodel name change")
+				return "Accept"
+			end
+		end
+
 		self:setState({
 			appStatus = AppStatus.Confirming,
 			confirmData = {
@@ -318,16 +563,6 @@ function App:startSession()
 	serveSession:start()
 
 	self.serveSession = serveSession
-
-	task.defer(function()
-		while self.serveSession == serveSession do
-			-- Trigger rerender to update timestamp text
-			local patchInfo = table.clone(self.patchInfo:getValue())
-			self.setPatchInfo(patchInfo)
-			local elapsed = os.time() - patchInfo.timestamp
-			task.wait(elapsed < 60 and 1 or elapsed / 5)
-		end
-	end)
 end
 
 function App:endSession()
@@ -343,6 +578,13 @@ function App:endSession()
 		appStatus = AppStatus.NotConnected,
 	})
 
+	if self.cleanupPrecommit ~= nil then
+		self.cleanupPrecommit()
+	end
+	if self.cleanupPostcommit ~= nil then
+		self.cleanupPostcommit()
+	end
+
 	Log.trace("Session terminated by user")
 end
 
@@ -369,12 +611,12 @@ function App:render()
 					id = pluginName,
 					title = pluginName,
 					active = self.state.guiEnabled,
+					isEphemeral = false,
 
 					initDockState = Enum.InitialDockState.Right,
-					initEnabled = false,
 					overridePreviousState = false,
-					floatingSize = Vector2.new(300, 200),
+					floatingSize = Vector2.new(320, 210),
-					minimumSize = Vector2.new(300, 120),
+					minimumSize = Vector2.new(300, 210),
 
 					zIndexBehavior = Enum.ZIndexBehavior.Sibling,
 
@@ -403,6 +645,7 @@ function App:render()
 						end,
 
 						onNavigateSettings = function()
+							self.backPage = AppStatus.NotConnected
 							self:setState({
 								appStatus = AppStatus.Settings,
 							})
@@ -429,18 +672,29 @@ function App:render()
 					Connected = createPageElement(AppStatus.Connected, {
 						projectName = self.state.projectName,
 						address = self.state.address,
-						patchInfo = self.patchInfo,
+						patchTree = self.state.patchTree,
+						patchData = self.state.patchData,
 						serveSession = self.serveSession,
 
 						onDisconnect = function()
 							self:endSession()
 						end,
+
+						onNavigateSettings = function()
+							self.backPage = AppStatus.Connected
+							self:setState({
+								appStatus = AppStatus.Settings,
+							})
+						end,
 					}),
 
 					Settings = createPageElement(AppStatus.Settings, {
+						syncActive = self.serveSession ~= nil
+							and self.serveSession:getStatus() == ServeSession.Status.Connected,
+
 						onBack = function()
 							self:setState({
-								appStatus = AppStatus.NotConnected,
+								appStatus = self.backPage or AppStatus.NotConnected,
 							})
 						end,
 					}),
@@ -457,7 +711,11 @@ function App:render()
 					}),
 				}),
 
-				RojoNotifications = e("ScreenGui", {}, {
+				RojoNotifications = e("ScreenGui", {
+					ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
+					ResetOnSpawn = false,
+					DisplayOrder = 100,
+				}, {
 					layout = e("UIListLayout", {
 						SortOrder = Enum.SortOrder.LayoutOrder,
 						HorizontalAlignment = Enum.HorizontalAlignment.Right,
@@ -473,8 +731,8 @@ function App:render()
 					notifs = e(Notifications, {
 						soundPlayer = self.props.soundPlayer,
 						notifications = self.state.notifications,
-						onClose = function(index)
+						onClose = function(id)
-							self:closeNotification(index)
+							self:closeNotification(id)
 						end,
 					}),
 				}),

plugin/src/Assets.lua

@@ -24,6 +24,7 @@ local Assets = {
 			Close = "rbxassetid://6012985953",
 			Back = "rbxassetid://6017213752",
 			Reset = "rbxassetid://10142422327",
+			Expand = "rbxassetid://12045401097",
 		},
 		Diff = {
 			Add = "rbxassetid://10434145835",
@@ -33,9 +34,11 @@ local Assets = {
 		Checkbox = {
 			Active = "rbxassetid://6016251644",
 			Inactive = "rbxassetid://6016251963",
+			Locked = "rbxassetid://14011257320",
 		},
 		Dropdown = {
 			Arrow = "rbxassetid://10131770538",
+			Locked = "rbxassetid://14011257320",
 		},
 		Spinner = {
 			Foreground = "rbxassetid://3222731032",
@@ -51,7 +54,7 @@ local Assets = {
 			[32] = "rbxassetid://3088713341",
 			[64] = "rbxassetid://4918677124",
 			[128] = "rbxassetid://2600845734",
-			[500] = "rbxassetid://2609138523"
+			[500] = "rbxassetid://2609138523",
 		},
 	},
 	Sounds = {

plugin/src/Config.lua

@@ -2,11 +2,25 @@ local strict = require(script.Parent.strict)
 
 local isDevBuild = script.Parent.Parent:FindFirstChild("ROJO_DEV_BUILD") ~= nil
 
+local Version = script.Parent.Parent.Version
+local trimmedVersionValue = Version.Value:gsub("^%s+", ""):gsub("%s+$", "")
+local major, minor, patch, metadata = trimmedVersionValue:match("^(%d+)%.(%d+)%.(%d+)(.*)$")
+
+local realVersion = { major, minor, patch, metadata }
+for i = 1, 3 do
+	local num = tonumber(realVersion[i])
+	if num then
+		realVersion[i] = num
+	else
+		error(("invalid version `%s` (field %d)"):format(realVersion[i], i))
+	end
+end
+
 return strict("Config", {
 	isDevBuild = isDevBuild,
 	codename = "Epiphany",
-	version = {7, 2, 1},
+	version = realVersion,
-	expectedServerVersionString = "7.2 or newer",
+	expectedServerVersionString = ("%d.%d or newer"):format(realVersion[1], realVersion[2]),
 	protocolVersion = 4,
 	defaultHost = "localhost",
 	defaultPort = "34872",

plugin/src/Dictionary.lua

@@ -30,4 +30,4 @@ end
 return {
 	None = None,
 	merge = merge,
-}
+}

plugin/src/InstanceMap.lua

@@ -66,7 +66,7 @@ function InstanceMap:__fmtDebug(output)
 	for id, instance in pairs(self.fromIds) do
 		local label = string.format("%s (%s)", instance:GetFullName(), instance.ClassName)
 
-		table.insert(entries, {id, label})
+		table.insert(entries, { id, label })
 	end
 
 	table.sort(entries, function(a, b)
@@ -113,27 +113,29 @@ end
 function InstanceMap:destroyInstance(instance)
 	local id = self.fromInstances[instance]
 
+	local descendants = instance:GetDescendants()
+	instance:Destroy()
+
+	-- After the instance is successfully destroyed,
+	-- we can remove all the id mappings
+
 	if id ~= nil then
 		self:removeId(id)
 	end
 
-	for _, descendantInstance in ipairs(instance:GetDescendants()) do
+	for _, descendantInstance in descendants do
 		self:removeInstance(descendantInstance)
 	end
-
-	instance:Destroy()
 end
 
 function InstanceMap:destroyId(id)
 	local instance = self.fromIds[id]
-	self:removeId(id)
-
 	if instance ~= nil then
-		for _, descendantInstance in ipairs(instance:GetDescendants()) do
+		self:destroyInstance(instance)
-			self:removeInstance(descendantInstance)
+	else
-		end
+		-- There is no instance with this id, so we can just remove the id
-
+		-- without worrying about instance destruction
-		instance:Destroy()
+		self:removeId(id)
 	end
 end
 

plugin/src/PatchSet.lua

@@ -26,7 +26,9 @@ local function deepEqual(a: any, b: any): boolean
 		end
 
 		for key, value in b do
-			if checkedKeys[key] then continue end
+			if checkedKeys[key] then
+				continue
+			end
 			if deepEqual(value, a[key]) == false then
 				return false
 			end
@@ -65,9 +67,7 @@ end
 	Tells whether the given PatchSet is empty.
 ]]
 function PatchSet.isEmpty(patchSet)
-	return next(patchSet.removed) == nil and
+	return next(patchSet.removed) == nil and next(patchSet.added) == nil and next(patchSet.updated) == nil
-		next(patchSet.added) == nil and
-		next(patchSet.updated) == nil
 end
 
 --[[
@@ -91,6 +91,113 @@ function PatchSet.hasUpdates(patchSet)
 	return next(patchSet.updated) ~= nil
 end
 
+--[[
+	Tells whether the given PatchSet contains changes to the given instance id
+]]
+function PatchSet.containsId(patchSet, instanceMap, id)
+	if patchSet.added[id] ~= nil then
+		return true
+	end
+
+	for _, idOrInstance in patchSet.removed do
+		local removedId = if Types.RbxId(idOrInstance) then idOrInstance else instanceMap.fromInstances[idOrInstance]
+		if removedId == id then
+			return true
+		end
+	end
+
+	for _, update in patchSet.updated do
+		if update.id == id then
+			return true
+		end
+	end
+
+	return false
+end
+
+--[[
+	Tells whether the given PatchSet contains changes to the given instance.
+	If the given InstanceMap does not contain the instance, this function always returns false.
+]]
+function PatchSet.containsInstance(patchSet, instanceMap, instance)
+	local id = instanceMap.fromInstances[instance]
+	if id == nil then
+		return false
+	end
+
+	return PatchSet.containsId(patchSet, instanceMap, id)
+end
+
+--[[
+	Tells whether the given PatchSet contains changes to nothing but the given instance id
+]]
+function PatchSet.containsOnlyId(patchSet, instanceMap, id)
+	if not PatchSet.containsId(patchSet, instanceMap, id) then
+		-- Patch doesn't contain the id at all
+		return false
+	end
+
+	for addedId in patchSet.added do
+		if addedId ~= id then
+			return false
+		end
+	end
+
+	for _, idOrInstance in patchSet.removed do
+		local removedId = if Types.RbxId(idOrInstance) then idOrInstance else instanceMap.fromInstances[idOrInstance]
+		if removedId ~= id then
+			return false
+		end
+	end
+
+	for _, update in patchSet.updated do
+		if update.id ~= id then
+			return false
+		end
+	end
+
+	return true
+end
+
+--[[
+	Tells whether the given PatchSet contains changes to nothing but the given instance.
+	If the given InstanceMap does not contain the instance, this function always returns false.
+]]
+function PatchSet.containsOnlyInstance(patchSet, instanceMap, instance)
+	local id = instanceMap.fromInstances[instance]
+	if id == nil then
+		return false
+	end
+
+	return PatchSet.containsOnlyId(patchSet, instanceMap, id)
+end
+
+--[[
+	Returns the update to the given instance id, or nil if there aren't any
+]]
+function PatchSet.getUpdateForId(patchSet, id)
+	for _, update in patchSet.updated do
+		if update.id == id then
+			return update
+		end
+	end
+
+	return nil
+end
+
+--[[
+	Returns the update to the given instance, or nil if there aren't any.
+	If the given InstanceMap does not contain the instance, this function always returns nil.
+]]
+function PatchSet.getUpdateForInstance(patchSet, instanceMap, instance)
+	local id = instanceMap.fromInstances[instance]
+	if id == nil then
+		return nil
+	end
+
+	return PatchSet.getUpdateForId(patchSet, id)
+end
+
 --[[
 	Tells whether the given PatchSets are equal.
 ]]
@@ -105,11 +212,44 @@ function PatchSet.countChanges(patch)
 	local count = 0
 
 	for _ in patch.added do
+		-- Adding an instance is 1 change
 		count += 1
 	end
 	for _ in patch.removed do
+		-- Removing an instance is 1 change
 		count += 1
 	end
+	for _, update in patch.updated do
+		-- Updating an instance is 1 change per property updated
+		for _ in update.changedProperties do
+			count += 1
+		end
+		if update.changedName ~= nil then
+			count += 1
+		end
+		if update.changedClassName ~= nil then
+			count += 1
+		end
+	end
+
+	return count
+end
+
+--[[
+	Count the number of instances affected by the given PatchSet.
+]]
+function PatchSet.countInstances(patch)
+	local count = 0
+
+	-- Added instances
+	for _ in patch.added do
+		count += 1
+	end
+	-- Removed instances
+	for _ in patch.removed do
+		count += 1
+	end
+	-- Updated instances
 	for _ in patch.updated do
 		count += 1
 	end
@@ -150,7 +290,7 @@ function PatchSet.humanSummary(instanceMap, patchSet)
 	for _, idOrInstance in ipairs(patchSet.removed) do
 		local instance, id
 
-		if type(idOrInstance) == "string" then
+		if Types.RbxId(idOrInstance) then
 			id = idOrInstance
 			instance = instanceMap.fromIds[id]
 		else
@@ -202,9 +342,15 @@ function PatchSet.humanSummary(instanceMap, patchSet)
 			end
 		end
 
-		table.insert(statements, string.format(
+		table.insert(
-			"- Add instance %q (ClassName %q) to %s",
+			statements,
-			virtualInstance.Name, virtualInstance.ClassName, parentDisplayName))
+			string.format(
+				"- Add instance %q (ClassName %q) to %s",
+				virtualInstance.Name,
+				virtualInstance.ClassName,
+				parentDisplayName
+			)
+		)
 	end
 
 	for _, update in ipairs(patchSet.updated) do
@@ -234,9 +380,10 @@ function PatchSet.humanSummary(instanceMap, patchSet)
 			displayName = "[unknown instance]"
 		end
 
-		table.insert(statements, string.format(
+		table.insert(
-			"- Update properties on %s: %s",
+			statements,
-			displayName, table.concat(updatedProperties, ",")))
+			string.format("- Update properties on %s: %s", displayName, table.concat(updatedProperties, ","))
+		)
 	end
 
 	return table.concat(statements, "\n")

plugin/src/PatchTree.lua

@@ -0,0 +1,516 @@
+--[[
+	Methods to turn PatchSets into trees matching the DataModel containing
+	the changes and metadata for use in the PatchVisualizer component.
+]]
+
+local HttpService = game:GetService("HttpService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Log = require(Packages.Log)
+
+local Types = require(Plugin.Types)
+local decodeValue = require(Plugin.Reconciler.decodeValue)
+local getProperty = require(Plugin.Reconciler.getProperty)
+
+local function alphabeticalNext(t, state)
+	-- Equivalent of the next function, but returns the keys in the alphabetic
+	-- order of node names. We use a temporary ordered key table that is stored in the
+	-- table being iterated.
+
+	local key = nil
+	if state == nil then
+		-- First iteration, generate the index
+		local orderedIndex, i = table.create(5), 0
+		for k in t do
+			i += 1
+			orderedIndex[i] = k
+		end
+		table.sort(orderedIndex, function(a, b)
+			local nodeA, nodeB = t[a], t[b]
+			return (nodeA.name or "") < (nodeB.name or "")
+		end)
+
+		t.__orderedIndex = orderedIndex
+		key = orderedIndex[1]
+	else
+		-- Fetch the next value
+		for i, orderedState in t.__orderedIndex do
+			if orderedState == state then
+				key = t.__orderedIndex[i + 1]
+				break
+			end
+		end
+	end
+
+	if key then
+		return key, t[key]
+	end
+
+	-- No more value to return, cleanup
+	t.__orderedIndex = nil
+
+	return
+end
+
+local function alphabeticalPairs(t)
+	-- Equivalent of the pairs() iterator, but sorted
+	return alphabeticalNext, t, nil
+end
+
+local Tree = {}
+Tree.__index = Tree
+
+function Tree.new()
+	local tree = {
+		idToNode = {},
+		ROOT = {
+			className = "DataModel",
+			name = "ROOT",
+			children = {},
+		},
+	}
+	-- Add ROOT to idToNode or it won't be found by getNode since that searches *within* ROOT
+	tree.idToNode["ROOT"] = tree.ROOT
+
+	return setmetatable(tree, Tree)
+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
+function Tree:forEach(callback, node, depth)
+	depth = depth or 1
+	for _, child in alphabeticalPairs(if node then node.children else self.ROOT.children) do
+		callback(child, depth)
+		if type(child.children) == "table" then
+			self:forEach(callback, child, depth + 1)
+		end
+	end
+end
+
+-- Finds a node by id, depth first
+-- searchNode is the node to start the search within, defaults to root
+function Tree:getNode(id, searchNode)
+	if self.idToNode[id] then
+		return self.idToNode[id]
+	end
+
+	local searchChildren = (searchNode or self.ROOT).children
+	for nodeId, node in searchChildren do
+		if nodeId == id then
+			self.idToNode[id] = node
+			return node
+		end
+		local descendant = self:getNode(id, node)
+		if descendant then
+			return descendant
+		end
+	end
+
+	return nil
+end
+
+function Tree:doesNodeExist(id)
+	return self.idToNode[id] ~= nil
+end
+
+-- Adds a node to the tree as a child of the node with id == parent
+-- If parent is nil, it defaults to root
+-- props must contain id, and cannot contain children or parentId
+-- other than those three, it can hold anything
+function Tree:addNode(parent, props)
+	assert(props.id, "props must contain id")
+
+	parent = parent or "ROOT"
+
+	if self:doesNodeExist(props.id) then
+		-- Update existing node
+		local node = self:getNode(props.id)
+		for k, v in props do
+			node[k] = v
+		end
+		return node
+	end
+
+	local node = table.clone(props)
+	node.children = {}
+	node.parentId = parent
+
+	local parentNode = self:getNode(parent)
+	if not parentNode then
+		Log.warn("Failed to create node since parent doesnt exist: {}, {}", parent, props)
+		return
+	end
+
+	parentNode.children[node.id] = node
+	self.idToNode[node.id] = node
+
+	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)
+	-- Build nodes for ancestry by going up the tree
+	previousId = previousId or "ROOT"
+
+	for _, ancestorId in ancestryIds do
+		local value = instanceMap.fromIds[ancestorId] or patch.added[ancestorId]
+		if not value then
+			Log.warn("Failed to find ancestor object for " .. ancestorId)
+			continue
+		end
+		self:addNode(previousId, {
+			id = ancestorId,
+			className = value.ClassName,
+			name = value.Name,
+			instance = if typeof(value) == "Instance" then value else nil,
+		})
+		previousId = ancestorId
+	end
+end
+
+local PatchTree = {}
+
+-- Builds a new tree from a patch and instanceMap
+-- uses changeListHeaders in node.changeList
+function PatchTree.build(patch, instanceMap, changeListHeaders)
+	local tree = Tree.new()
+
+	local knownAncestors = {}
+
+	for _, change in patch.updated do
+		local instance = instanceMap.fromIds[change.id]
+		if not instance then
+			continue
+		end
+
+		-- Gather ancestors from existing DOM
+		local ancestryIds = {}
+		local parentObject = instance.Parent
+		local parentId = instanceMap.fromInstances[parentObject]
+		local previousId = nil
+		while parentObject do
+			if knownAncestors[parentId] then
+				-- We've already added this ancestor
+				previousId = parentId
+				break
+			end
+
+			table.insert(ancestryIds, 1, parentId)
+			knownAncestors[parentId] = true
+			parentObject = parentObject.Parent
+			parentId = instanceMap.fromInstances[parentObject]
+		end
+
+		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
+
+		-- Gather detail text
+		local changeList, hint = nil, nil
+		if next(change.changedProperties) or change.changedName then
+			changeList = {}
+
+			local hintBuffer, i = {}, 0
+			local function addProp(prop: string, current: any?, incoming: any?, metadata: any?)
+				i += 1
+				hintBuffer[i] = prop
+				changeList[i] = { prop, current, incoming, metadata }
+			end
+
+			-- Gather the changes
+
+			if change.changedName then
+				addProp("Name", instance.Name, change.changedName)
+			end
+
+			for prop, incoming in change.changedProperties do
+				local incomingSuccess, incomingValue = decodeValue(incoming, instanceMap)
+				local currentSuccess, currentValue = getProperty(instance, prop)
+
+				addProp(
+					prop,
+					if currentSuccess then currentValue else "[Error]",
+					if incomingSuccess then incomingValue else select(2, next(incoming))
+				)
+			end
+
+			-- Finalize detail values
+
+			-- 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)
+				return a[1] < b[1]
+			end)
+			table.insert(changeList, 1, changeListHeaders)
+		end
+
+		-- Add this node to tree
+		tree:addNode(instanceMap.fromInstances[instance.Parent], {
+			id = change.id,
+			patchType = "Edit",
+			className = instance.ClassName,
+			name = instance.Name,
+			instance = instance,
+			hint = hint,
+			changeList = changeList,
+		})
+	end
+
+	for _, idOrInstance in patch.removed do
+		local instance = if Types.RbxId(idOrInstance) then instanceMap.fromIds[idOrInstance] else idOrInstance
+		if not instance then
+			-- If we're viewing a past patch, the instance is already removed
+			-- and we therefore cannot get the tree for it anymore
+			continue
+		end
+
+		-- Gather ancestors from existing DOM
+		-- (note that they may have no ID if they're being removed as unknown)
+		local ancestryIds = {}
+		local parentObject = instance.Parent
+		local parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
+		local previousId = nil
+		while parentObject do
+			if knownAncestors[parentId] then
+				-- We've already added this ancestor
+				previousId = parentId
+				break
+			end
+
+			instanceMap:insert(parentId, parentObject) -- This ensures we can find the parent later
+			table.insert(ancestryIds, 1, parentId)
+			knownAncestors[parentId] = true
+			parentObject = parentObject.Parent
+			parentId = instanceMap.fromInstances[parentObject] or HttpService:GenerateGUID(false)
+		end
+
+		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
+
+		-- Add this node to tree
+		local nodeId = instanceMap.fromInstances[instance] or HttpService:GenerateGUID(false)
+		instanceMap:insert(nodeId, instance)
+		tree:addNode(instanceMap.fromInstances[instance.Parent], {
+			id = nodeId,
+			patchType = "Remove",
+			className = instance.ClassName,
+			name = instance.Name,
+			instance = instance,
+		})
+	end
+
+	for id, change in patch.added do
+		-- Gather ancestors from existing DOM or future additions
+		local ancestryIds = {}
+		local parentId = change.Parent
+		local parentData = patch.added[parentId]
+		local parentObject = instanceMap.fromIds[parentId]
+		local previousId = nil
+		while parentId do
+			if knownAncestors[parentId] then
+				-- We've already added this ancestor
+				previousId = parentId
+				break
+			end
+
+			table.insert(ancestryIds, 1, parentId)
+			knownAncestors[parentId] = true
+			parentId = nil
+
+			if parentData then
+				-- object is parented to an instance that does not exist yet
+				parentId = parentData.Parent
+				parentData = patch.added[parentId]
+				parentObject = instanceMap.fromIds[parentId]
+			elseif parentObject then
+				-- object is parented to an instance that exists
+				parentObject = parentObject.Parent
+				parentId = instanceMap.fromInstances[parentObject]
+				parentData = patch.added[parentId]
+			end
+		end
+
+		tree:buildAncestryNodes(previousId, ancestryIds, patch, instanceMap)
+
+		-- Gather detail text
+		local changeList, hint = nil, nil
+		if next(change.Properties) then
+			changeList = {}
+
+			local hintBuffer, i = {}, 0
+			for prop, incoming in change.Properties do
+				i += 1
+				hintBuffer[i] = prop
+
+				local success, incomingValue = decodeValue(incoming, instanceMap)
+				if success then
+					table.insert(changeList, { prop, "N/A", incomingValue })
+				else
+					table.insert(changeList, { prop, "N/A", select(2, next(incoming)) })
+				end
+			end
+
+			-- Finalize detail values
+
+			-- 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)
+				return a[1] < b[1]
+			end)
+			table.insert(changeList, 1, changeListHeaders)
+		end
+
+		-- Add this node to tree
+		tree:addNode(change.Parent, {
+			id = change.Id,
+			patchType = "Add",
+			className = change.ClassName,
+			name = change.Name,
+			hint = hint,
+			changeList = changeList,
+			instance = instanceMap.fromIds[id],
+		})
+	end
+
+	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)
+	if tree then
+		tree = PatchTree.clone(tree)
+	else
+		tree = PatchTree.build(patch, instanceMap)
+	end
+
+	-- Update isWarning metadata
+	for _, failedChange in unappliedPatch.updated do
+		local node = tree:getNode(failedChange.id)
+		if not node then
+			continue
+		end
+
+		node.isWarning = true
+		Log.trace("Marked node as warning: {} {}", node.id, node.name)
+
+		if not node.changeList then
+			continue
+		end
+		for _, change in node.changeList do
+			local property = change[1]
+			local propertyFailedToApply = if property == "Name"
+				then failedChange.changedName ~= nil -- Name is not in changedProperties, so it needs a special case
+				else failedChange.changedProperties[property] ~= nil
+
+			if not propertyFailedToApply then
+				-- This change didn't fail, no need to mark
+				continue
+			end
+			if change[4] == nil then
+				change[4] = { isWarning = true }
+			else
+				change[4].isWarning = true
+			end
+			Log.trace("  Marked property as warning: {}.{}", node.name, property)
+		end
+	end
+	for failedAdditionId in unappliedPatch.added do
+		local node = tree:getNode(failedAdditionId)
+		if not node then
+			continue
+		end
+
+		node.isWarning = true
+		Log.trace("Marked node as warning: {} {}", node.id, node.name)
+
+		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
+				change[4] = { isWarning = true }
+			else
+				change[4].isWarning = true
+			end
+			Log.trace("  Marked property as warning: {}.{}", node.name, change[1])
+		end
+	end
+	for _, failedRemovalIdOrInstance in unappliedPatch.removed do
+		local failedRemovalId = if Types.RbxId(failedRemovalIdOrInstance)
+			then failedRemovalIdOrInstance
+			else instanceMap.fromInstances[failedRemovalIdOrInstance]
+		if not failedRemovalId then
+			continue
+		end
+
+		local node = tree:getNode(failedRemovalId)
+		if not node then
+			continue
+		end
+
+		node.isWarning = true
+		Log.trace("Marked node as warning: {} {}", node.id, node.name)
+	end
+
+	-- Update if instances exist
+	tree:forEach(function(node)
+		if node.instance then
+			if node.instance.Parent == nil and node.instance ~= game then
+				-- This instance has been removed
+				Log.trace("Removed instance from node: {} {}", node.id, node.name)
+				node.instance = nil
+			end
+		else
+			-- This instance may have been added
+			node.instance = instanceMap.fromIds[node.id]
+			if node.instance then
+				Log.trace("Added instance to node: {} {}", node.id, node.name)
+			end
+		end
+	end)
+
+	return tree
+end
+
+return PatchTree

plugin/src/Reconciler/applyPatch.lua

@@ -5,6 +5,8 @@
 	Patches can come from the server or be generated by the client.
 ]]
 
+local ChangeHistoryService = game:GetService("ChangeHistoryService")
+
 local Packages = script.Parent.Parent.Parent.Packages
 local Log = require(Packages.Log)
 
@@ -17,14 +19,21 @@ local reify = require(script.Parent.reify)
 local setProperty = require(script.Parent.setProperty)
 
 local function applyPatch(instanceMap, patch)
+	local patchTimestamp = DateTime.now():FormatLocalTime("LTS", "en-us")
+
 	-- Tracks any portions of the patch that could not be applied to the DOM.
 	local unappliedPatch = PatchSet.newEmpty()
 
 	for _, removedIdOrInstance in ipairs(patch.removed) do
-		if Types.RbxId(removedIdOrInstance) then
+		local removeInstanceSuccess = pcall(function()
-			instanceMap:destroyId(removedIdOrInstance)
+			if Types.RbxId(removedIdOrInstance) then
-		else
+				instanceMap:destroyId(removedIdOrInstance)
-			instanceMap:destroyInstance(removedIdOrInstance)
+			else
+				instanceMap:destroyInstance(removedIdOrInstance)
+			end
+		end)
+		if not removeInstanceSuccess then
+			table.insert(unappliedPatch.removed, removedIdOrInstance)
 		end
 	end
 
@@ -166,7 +175,13 @@ local function applyPatch(instanceMap, patch)
 		end
 
 		if update.changedName ~= nil then
-			instance.Name = update.changedName
+			local setNameSuccess = pcall(function()
+				instance.Name = update.changedName
+			end)
+			if not setNameSuccess then
+				unappliedUpdate.changedName = update.changedName
+				partiallyApplied = true
+			end
 		end
 
 		if update.changedMetadata ~= nil then
@@ -179,15 +194,15 @@ local function applyPatch(instanceMap, patch)
 
 		if update.changedProperties ~= nil then
 			for propertyName, propertyValue in pairs(update.changedProperties) do
-				local ok, decodedValue = decodeValue(propertyValue, instanceMap)
+				local decodeSuccess, decodedValue = decodeValue(propertyValue, instanceMap)
-				if not ok then
+				if not decodeSuccess then
 					unappliedUpdate.changedProperties[propertyName] = propertyValue
 					partiallyApplied = true
 					continue
 				end
 
-				local ok = setProperty(instance, propertyName, decodedValue)
+				local setPropertySuccess = setProperty(instance, propertyName, decodedValue)
-				if not ok then
+				if not setPropertySuccess then
 					unappliedUpdate.changedProperties[propertyName] = propertyValue
 					partiallyApplied = true
 				end
@@ -199,6 +214,8 @@ local function applyPatch(instanceMap, patch)
 		end
 	end
 
+	ChangeHistoryService:SetWaypoint("Rojo: Patch " .. patchTimestamp)
+
 	return unappliedPatch
 end
 

plugin/src/Reconciler/applyPatch.spec.lua

@@ -83,11 +83,11 @@ return function()
 			ClassName = "Model",
 			Name = "Child",
 			Parent = "ROOT",
-			Children = {"GRANDCHILD"},
+			Children = { "GRANDCHILD" },
 			Properties = {},
 		}
 
-		patch.added["GRANDCHILD"]  = {
+		patch.added["GRANDCHILD"] = {
 			Id = "GRANDCHILD",
 			ClassName = "Part",
 			Name = "Grandchild",
@@ -193,4 +193,4 @@ return function()
 		assert(newChild ~= nil, "expected child to be present")
 		assert(newChild == child, "expected child to be preserved")
 	end)
-end
+end

plugin/src/Reconciler/decodeValue.lua

@@ -27,13 +27,14 @@ local function decodeValue(encodedValue, instanceMap)
 		end
 	end
 
-	local ok, decodedValue = RbxDom.EncodedValue.decode(encodedValue)
+	local decodeSuccess, decodedValue = RbxDom.EncodedValue.decode(encodedValue)
 
-	if not ok then
+	if not decodeSuccess then
-		return false, Error.new(Error.CannotDecodeValue, {
+		return false,
-			encodedValue = encodedValue,
+			Error.new(Error.CannotDecodeValue, {
-			innerError = decodedValue,
+				encodedValue = encodedValue,
-		})
+				innerError = decodedValue,
+			})
 	end
 
 	return true, decodedValue

plugin/src/Reconciler/diff.lua

@@ -37,7 +37,9 @@ local function trueEquals(a, b): boolean
 			end
 		end
 		for key, value in pairs(b) do
-			if checkedKeys[key] then continue end
+			if checkedKeys[key] then
+				continue
+			end
 			if not trueEquals(value, a[key]) then
 				return false
 			end
@@ -62,7 +64,7 @@ local function trueEquals(a, b): boolean
 
 	-- For CFrames, compare to components with epsilon of 0.0001 to avoid floating point inequality
 	elseif typeA == "CFrame" and typeB == "CFrame" then
-		local aComponents, bComponents = {a:GetComponents()}, {b:GetComponents()}
+		local aComponents, bComponents = { a:GetComponents() }, { b:GetComponents() }
 		for i, aComponent in aComponents do
 			if not fuzzyEq(aComponent, bComponents[i], 0.0001) then
 				return false
@@ -72,7 +74,7 @@ local function trueEquals(a, b): boolean
 
 	-- For Vector3s, compare to components with epsilon of 0.0001 to avoid floating point inequality
 	elseif typeA == "Vector3" and typeB == "Vector3" then
-		local aComponents, bComponents = {a.X, a.Y, a.Z}, {b.X, b.Y, b.Z}
+		local aComponents, bComponents = { a.X, a.Y, a.Z }, { b.X, b.Y, b.Z }
 		for i, aComponent in aComponents do
 			if not fuzzyEq(aComponent, bComponents[i], 0.0001) then
 				return false
@@ -82,14 +84,13 @@ local function trueEquals(a, b): boolean
 
 	-- For Vector2s, compare to components with epsilon of 0.0001 to avoid floating point inequality
 	elseif typeA == "Vector2" and typeB == "Vector2" then
-		local aComponents, bComponents = {a.X, a.Y}, {b.X, b.Y}
+		local aComponents, bComponents = { a.X, a.Y }, { b.X, b.Y }
 		for i, aComponent in aComponents do
 			if not fuzzyEq(aComponent, bComponents[i], 0.0001) then
 				return false
 			end
 		end
 		return true
-
 	end
 
 	return false
@@ -146,19 +147,24 @@ local function diff(instanceMap, virtualInstances, rootId)
 
 		local changedProperties = {}
 		for propertyName, virtualValue in pairs(virtualInstance.Properties) do
-			local ok, existingValueOrErr = getProperty(instance, propertyName)
+			local getProperySuccess, existingValueOrErr = getProperty(instance, propertyName)
 
-			if ok then
+			if getProperySuccess then
 				local existingValue = existingValueOrErr
-				local ok, decodedValue = decodeValue(virtualValue, instanceMap)
+				local decodeSuccess, decodedValue = decodeValue(virtualValue, instanceMap)
 
-				if ok then
+				if decodeSuccess then
 					if not trueEquals(existingValue, decodedValue) then
-						Log.debug("{}.{} changed from '{}' to '{}'", instance:GetFullName(), propertyName, existingValue, decodedValue)
+						Log.debug(
+							"{}.{} changed from '{}' to '{}'",
+							instance:GetFullName(),
+							propertyName,
+							existingValue,
+							decodedValue
+						)
 						changedProperties[propertyName] = virtualValue
 					end
 				else
-					local propertyType = next(virtualValue)
 					Log.warn(
 						"Failed to decode property {}.{}. Encoded property was: {:#?}",
 						virtualInstance.ClassName,
@@ -171,10 +177,8 @@ local function diff(instanceMap, virtualInstances, rootId)
 
 				if err.kind == Error.UnknownProperty then
 					Log.trace("Skipping unknown property {}.{}", err.details.className, err.details.propertyName)
-				elseif err.kind == Error.UnreadableProperty then
-					Log.trace("Skipping unreadable property {}.{}", err.details.className, err.details.propertyName)
 				else
-					return false, err
+					Log.trace("Skipping unreadable property {}.{}", err.details.className, err.details.propertyName)
 				end
 			end
 		end
@@ -213,9 +217,9 @@ local function diff(instanceMap, virtualInstances, rootId)
 					table.insert(patch.removed, childInstance)
 				end
 			else
-				local ok, err = diffInternal(childId)
+				local diffSuccess, err = diffInternal(childId)
 
-				if not ok then
+				if not diffSuccess then
 					return false, err
 				end
 			end
@@ -236,9 +240,9 @@ local function diff(instanceMap, virtualInstances, rootId)
 		return true
 	end
 
-	local ok, err = diffInternal(rootId)
+	local diffSuccess, err = diffInternal(rootId)
 
-	if not ok then
+	if not diffSuccess then
 		return false, err
 	end
 

plugin/src/Reconciler/diff.spec.lua

@@ -264,7 +264,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Folder",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {

plugin/src/Reconciler/getProperty.lua

@@ -14,17 +14,19 @@ local function getProperty(instance, propertyName)
 	-- A good example of a property like this is `Model.ModelInPrimary`, which
 	-- is serialized but not reflected to Lua.
 	if descriptor == nil then
-		return false, Error.new(Error.UnknownProperty, {
+		return false,
-			className = instance.ClassName,
+			Error.new(Error.UnknownProperty, {
-			propertyName = propertyName,
+				className = instance.ClassName,
-		})
+				propertyName = propertyName,
+			})
 	end
 
 	if descriptor.scriptability == "None" or descriptor.scriptability == "Write" then
-		return false, Error.new(Error.UnreadableProperty, {
+		return false,
-			className = instance.ClassName,
+			Error.new(Error.UnreadableProperty, {
-			propertyName = propertyName,
+				className = instance.ClassName,
-		})
+				propertyName = propertyName,
+			})
 	end
 
 	local success, valueOrErr = descriptor:read(instance)
@@ -35,23 +37,26 @@ local function getProperty(instance, propertyName)
 		-- If we don't have permission to read a property, we can chalk that up
 		-- to our database being out of date and the engine being right.
 		if err.kind == RbxDom.Error.Kind.Roblox and err.extra:find("lacking permission") then
-			return false, Error.new(Error.LackingPropertyPermissions, {
+			return false,
-				className = instance.ClassName,
+				Error.new(Error.LackingPropertyPermissions, {
-				propertyName = propertyName,
+					className = instance.ClassName,
-			})
+					propertyName = propertyName,
+				})
 		end
 
 		if err.kind == RbxDom.Error.Kind.Roblox and err.extra:find("is not a valid member of") then
-			return false, Error.new(Error.UnknownProperty, {
+			return false,
+				Error.new(Error.UnknownProperty, {
+					className = instance.ClassName,
+					propertyName = propertyName,
+				})
+		end
+
+		return false,
+			Error.new(Error.OtherPropertyError, {
 				className = instance.ClassName,
 				propertyName = propertyName,
 			})
-		end
-
-		return false, Error.new(Error.OtherPropertyError, {
-			className = instance.ClassName,
-			propertyName = propertyName,
-		})
 	end
 
 	return true, valueOrErr

plugin/src/Reconciler/hydrate.lua

@@ -31,13 +31,13 @@ local function hydrate(instanceMap, virtualInstances, rootId, rootInstance)
 				-- We guard accessing Name and ClassName in order to avoid
 				-- tripping over children of DataModel that Rojo won't have
 				-- permissions to access at all.
-				local ok, name, className = pcall(function()
+				local accessSuccess, name, className = pcall(function()
 					return childInstance.Name, childInstance.ClassName
 				end)
 
 				-- This rule is very conservative and could be loosened in the
 				-- future, or more heuristics could be introduced.
-				if ok and name == virtualChild.Name and className == virtualChild.ClassName then
+				if accessSuccess and name == virtualChild.Name and className == virtualChild.ClassName then
 					isExistingChildVisited[childIndex] = true
 					hydrate(instanceMap, virtualInstances, childId, childInstance)
 					break
@@ -47,4 +47,4 @@ local function hydrate(instanceMap, virtualInstances, rootId, rootInstance)
 	end
 end
 
-return hydrate
+return hydrate

plugin/src/Reconciler/hydrate.spec.lua

@@ -91,7 +91,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Root",
 				Properties = {},
-				Children = {"CHILD1", "CHILD2"},
+				Children = { "CHILD1", "CHILD2" },
 			},
 
 			CHILD1 = {
@@ -126,4 +126,4 @@ return function()
 		expect(knownInstances.fromIds["CHILD1"]).to.equal(child1)
 		expect(knownInstances.fromIds["CHILD2"]).to.equal(child2)
 	end)
-end
+end

plugin/src/Reconciler/init.lua

@@ -3,6 +3,9 @@
 	and mutating the Roblox DOM.
 ]]
 
+local Packages = script.Parent.Parent.Packages
+local Log = require(Packages.Log)
+
 local applyPatch = require(script.applyPatch)
 local hydrate = require(script.hydrate)
 local diff = require(script.diff)
@@ -14,13 +17,63 @@ function Reconciler.new(instanceMap)
 	local self = {
 		-- Tracks all of the instances known by the reconciler by ID.
 		__instanceMap = instanceMap,
+		__precommitCallbacks = {},
+		__postcommitCallbacks = {},
 	}
 
 	return setmetatable(self, Reconciler)
 end
 
+function Reconciler:hookPrecommit(callback: (patch: any, instanceMap: any) -> ()): () -> ()
+	table.insert(self.__precommitCallbacks, callback)
+	Log.trace("Added precommit callback: {}", callback)
+
+	return function()
+		-- Remove the callback from the list
+		for i, cb in self.__precommitCallbacks do
+			if cb == callback then
+				table.remove(self.__precommitCallbacks, i)
+				Log.trace("Removed precommit callback: {}", callback)
+				break
+			end
+		end
+	end
+end
+
+function Reconciler:hookPostcommit(callback: (patch: any, instanceMap: any, unappliedPatch: any) -> ()): () -> ()
+	table.insert(self.__postcommitCallbacks, callback)
+	Log.trace("Added postcommit callback: {}", callback)
+
+	return function()
+		-- Remove the callback from the list
+		for i, cb in self.__postcommitCallbacks do
+			if cb == callback then
+				table.remove(self.__postcommitCallbacks, i)
+				Log.trace("Removed postcommit callback: {}", callback)
+				break
+			end
+		end
+	end
+end
+
 function Reconciler:applyPatch(patch)
-	return applyPatch(self.__instanceMap, patch)
+	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
+
+	local unappliedPatch = applyPatch(self.__instanceMap, patch)
+
+	for _, callback in self.__postcommitCallbacks do
+		local success, err = pcall(callback, patch, self.__instanceMap, unappliedPatch)
+		if not success then
+			Log.warn("Postcommit hook errored: {}", err)
+		end
+	end
+
+	return unappliedPatch
 end
 
 function Reconciler:hydrate(virtualInstances, rootId, rootInstance)
@@ -31,4 +84,4 @@ function Reconciler:diff(virtualInstances, rootId)
 	return diff(self.__instanceMap, virtualInstances, rootId)
 end
 
-return Reconciler
+return Reconciler

plugin/src/Reconciler/reify.lua

@@ -53,9 +53,9 @@ function reifyInner(instanceMap, virtualInstances, id, parentInstance, unapplied
 	-- Instance.new can fail if we're passing in something that can't be
 	-- created, like a service, something enabled with a feature flag, or
 	-- something that requires higher security than we have.
-	local ok, instance = pcall(Instance.new, virtualInstance.ClassName)
+	local createSuccess, instance = pcall(Instance.new, virtualInstance.ClassName)
 
-	if not ok then
+	if not createSuccess then
 		addAllToPatch(unappliedPatch, virtualInstances, id)
 		return
 	end
@@ -80,14 +80,14 @@ function reifyInner(instanceMap, virtualInstances, id, parentInstance, unapplied
 			continue
 		end
 
-		local ok, value = decodeValue(virtualValue, instanceMap)
+		local decodeSuccess, value = decodeValue(virtualValue, instanceMap)
-		if not ok then
+		if not decodeSuccess then
 			unappliedProperties[propertyName] = virtualValue
 			continue
 		end
 
-		local ok = setProperty(instance, propertyName, value)
+		local setPropertySuccess = setProperty(instance, propertyName, value)
-		if not ok then
+		if not setPropertySuccess then
 			unappliedProperties[propertyName] = virtualValue
 		end
 	end
@@ -148,8 +148,8 @@ function applyDeferredRefs(instanceMap, deferredRefs, unappliedPatch)
 			continue
 		end
 
-		local ok = setProperty(entry.instance, entry.propertyName, targetInstance)
+		local setPropertySuccess = setProperty(entry.instance, entry.propertyName, targetInstance)
-		if not ok then
+		if not setPropertySuccess then
 			markFailed(entry.id, entry.propertyName, entry.virtualValue)
 		end
 	end

plugin/src/Reconciler/reify.spec.lua

@@ -3,7 +3,6 @@ return function()
 
 	local PatchSet = require(script.Parent.Parent.PatchSet)
 	local InstanceMap = require(script.Parent.Parent.InstanceMap)
-	local Error = require(script.Parent.Error)
 
 	local function isEmpty(table)
 		return next(table) == nil, "Table was not empty"
@@ -80,7 +79,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Parent",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {
@@ -112,7 +111,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Parent",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {
@@ -147,7 +146,7 @@ return function()
 				Properties = {
 					Value = {
 						Type = "Vector3",
-						Value = {1, 2, 3},
+						Value = { 1, 2, 3 },
 					},
 				},
 				Children = {},
@@ -182,7 +181,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Root",
 				Properties = {},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {
@@ -247,7 +246,7 @@ return function()
 				ClassName = "Folder",
 				Name = "Root",
 				Properties = {},
-				Children = {"CHILD_A", "CHILD_B"},
+				Children = { "CHILD_A", "CHILD_B" },
 			},
 
 			CHILD_A = {
@@ -297,7 +296,7 @@ return function()
 						Ref = "CHILD",
 					},
 				},
-				Children = {"CHILD"},
+				Children = { "CHILD" },
 			},
 
 			CHILD = {

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, propertyName, value)
+local function setProperty(instance: Instance, propertyName: string, value: unknown): boolean
 	local descriptor = RbxDom.findCanonicalPropertyDescriptor(instance.ClassName, propertyName)
 
 	-- We can skip unknown properties; they're not likely reflected to Lua.
@@ -21,26 +21,36 @@ local function setProperty(instance, propertyName, value)
 	end
 
 	if descriptor.scriptability == "None" or descriptor.scriptability == "Read" then
-		return false, Error.new(Error.UnwritableProperty, {
+		return false,
-			className = instance.ClassName,
+			Error.new(Error.UnwritableProperty, {
-			propertyName = propertyName,
-		})
-	end
-
-	local ok, err = descriptor:write(instance, value)
-
-	if not ok then
-		if err.kind == RbxDom.Error.Kind.Roblox and err.extra:find("lacking permission") then
-			return false, Error.new(Error.LackingPropertyPermissions, {
 				className = instance.ClassName,
 				propertyName = propertyName,
 			})
+	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
+		if err.kind == RbxDom.Error.Kind.Roblox and err.extra:find("lacking permission") then
+			return false,
+				Error.new(Error.LackingPropertyPermissions, {
+					className = instance.ClassName,
+					propertyName = propertyName,
+				})
 		end
 
-		return false, Error.new(Error.OtherPropertyError, {
+		return false,
-			className = instance.ClassName,
+			Error.new(Error.OtherPropertyError, {
-			propertyName = propertyName,
+				className = instance.ClassName,
-		})
+				propertyName = propertyName,
+			})
 	end
 
 	return true

plugin/src/ServeSession.lua

@@ -21,8 +21,8 @@ local Status = strict("Session.Status", {
 	Disconnected = "Disconnected",
 })
 
-local function debugPatch(patch)
+local function debugPatch(object)
-	return Fmt.debugify(patch, function(patch, output)
+	return Fmt.debugify(object, function(patch, output)
 		output:writeLine("Patch {{")
 		output:indent()
 
@@ -77,15 +77,13 @@ function ServeSession.new(options)
 
 	local connections = {}
 
-	local connection = StudioService
+	local connection = StudioService:GetPropertyChangedSignal("ActiveScript"):Connect(function()
-		:GetPropertyChangedSignal("ActiveScript")
+		local activeScript = StudioService.ActiveScript
-		:Connect(function()
-			local activeScript = StudioService.ActiveScript
 
-			if activeScript ~= nil then
+		if activeScript ~= nil then
-				self:__onActiveScriptChanged(activeScript)
+			self:__onActiveScriptChanged(activeScript)
-			end
+		end
-		end)
+	end)
 	table.insert(connections, connection)
 
 	self = {
@@ -97,7 +95,6 @@ function ServeSession.new(options)
 		__instanceMap = instanceMap,
 		__changeBatcher = changeBatcher,
 		__statusChangedCallback = nil,
-		__patchAppliedCallback = nil,
 		__connections = connections,
 	}
 
@@ -129,23 +126,27 @@ function ServeSession:setConfirmCallback(callback)
 	self.__userConfirmCallback = callback
 end
 
-function ServeSession:onPatchApplied(callback)
+function ServeSession:hookPrecommit(callback)
-	self.__patchAppliedCallback = callback
+	return self.__reconciler:hookPrecommit(callback)
+end
+
+function ServeSession:hookPostcommit(callback)
+	return self.__reconciler:hookPostcommit(callback)
 end
 
 function ServeSession:start()
 	self:__setStatus(Status.Connecting)
 
-	self.__apiContext:connect()
+	self.__apiContext
+		:connect()
 		:andThen(function(serverInfo)
 			self:__applyGameAndPlaceId(serverInfo)
 
-			return self:__initialSync(serverInfo)
+			return self:__initialSync(serverInfo):andThen(function()
-				:andThen(function()
+				self:__setStatus(Status.Connected, serverInfo.projectName)
-					self:__setStatus(Status.Connected, serverInfo.projectName)
 
-					return self:__mainSyncLoop()
+				return self:__mainSyncLoop()
-				end)
+			end)
 		end)
 		:catch(function(err)
 			if self.__status ~= Status.Disconnected then
@@ -196,7 +197,7 @@ function ServeSession:__onActiveScriptChanged(activeScript)
 		local existingParent = activeScript.Parent
 		activeScript.Parent = nil
 
-		for i = 1, 3 do
+		for _ = 1, 3 do
 			RunService.Heartbeat:Wait()
 		end
 
@@ -208,100 +209,134 @@ function ServeSession:__onActiveScriptChanged(activeScript)
 end
 
 function ServeSession:__initialSync(serverInfo)
-	return self.__apiContext:read({ serverInfo.rootInstanceId })
+	return self.__apiContext:read({ serverInfo.rootInstanceId }):andThen(function(readResponseBody)
-		:andThen(function(readResponseBody)
+		-- Tell the API Context that we're up-to-date with the version of
-			-- Tell the API Context that we're up-to-date with the version of
+		-- the tree defined in this response.
-			-- the tree defined in this response.
+		self.__apiContext:setMessageCursor(readResponseBody.messageCursor)
-			self.__apiContext:setMessageCursor(readResponseBody.messageCursor)
 
-			-- For any instances that line up with the Rojo server's view, start
+		-- For any instances that line up with the Rojo server's view, start
-			-- tracking them in the reconciler.
+		-- tracking them in the reconciler.
-			Log.trace("Matching existing Roblox instances to Rojo IDs")
+		Log.trace("Matching existing Roblox instances to Rojo IDs")
-			self.__reconciler:hydrate(readResponseBody.instances, serverInfo.rootInstanceId, game)
+		self.__reconciler:hydrate(readResponseBody.instances, serverInfo.rootInstanceId, game)
 
-			-- Calculate the initial patch to apply to the DataModel to catch us
+		-- Calculate the initial patch to apply to the DataModel to catch us
-			-- up to what Rojo thinks the place should look like.
+		-- up to what Rojo thinks the place should look like.
-			Log.trace("Computing changes that plugin needs to make to catch up to server...")
+		Log.trace("Computing changes that plugin needs to make to catch up to server...")
-			local success, catchUpPatch = self.__reconciler:diff(
+		local success, catchUpPatch =
-				readResponseBody.instances,
+			self.__reconciler:diff(readResponseBody.instances, serverInfo.rootInstanceId, game)
-				serverInfo.rootInstanceId,
-				game
-			)
 
-			if not success then
+		if not success then
-				Log.error("Could not compute a diff to catch up to the Rojo server: {:#?}", catchUpPatch)
+			Log.error("Could not compute a diff to catch up to the Rojo server: {:#?}", catchUpPatch)
+		end
+
+		for _, update in catchUpPatch.updated do
+			if update.id == self.__instanceMap.fromInstances[game] and update.changedClassName ~= nil then
+				-- Non-place projects will try to update the classname of game from DataModel to
+				-- something like Folder, ModuleScript, etc. This would fail, so we exit with a clear
+				-- message instead of crashing.
+				return Promise.reject(
+					"Cannot sync a model as a place."
+						.. "\nEnsure Rojo is serving a project file that has a DataModel at the root of its tree and try again."
+						.. "\nSee project file docs: https://rojo.space/docs/v7/project-format/"
+				)
+			end
+		end
+
+		Log.trace("Computed hydration patch: {:#?}", debugPatch(catchUpPatch))
+
+		local userDecision = "Accept"
+		if self.__userConfirmCallback ~= nil then
+			userDecision = self.__userConfirmCallback(self.__instanceMap, catchUpPatch, serverInfo)
+		end
+
+		if userDecision == "Abort" then
+			return Promise.reject("Aborted Rojo sync operation")
+		elseif userDecision == "Reject" then
+			if not self.__twoWaySync then
+				return Promise.reject("Cannot reject sync operation without two-way sync enabled")
+			end
+			-- The user wants their studio DOM to write back to their Rojo DOM
+			-- so we will reverse the patch and send it back
+
+			local inversePatch = PatchSet.newEmpty()
+
+			-- Send back the current properties
+			for _, change in catchUpPatch.updated do
+				local instance = self.__instanceMap.fromIds[change.id]
+				if not instance then
+					continue
+				end
+
+				local update = encodePatchUpdate(instance, change.id, change.changedProperties)
+				table.insert(inversePatch.updated, update)
+			end
+			-- Add the removed instances back to Rojo
+			-- selene:allow(empty_if, unused_variable, empty_loop)
+			for _, instance in catchUpPatch.removed do
+				-- TODO: Generate ID for our instance and add it to inversePatch.added
+			end
+			-- Remove the additions we've rejected
+			for id, _change in catchUpPatch.added do
+				table.insert(inversePatch.removed, id)
 			end
 
-			Log.trace("Computed hydration patch: {:#?}", debugPatch(catchUpPatch))
+			return self.__apiContext:write(inversePatch)
+		elseif userDecision == "Accept" then
+			local unappliedPatch = self.__reconciler:applyPatch(catchUpPatch)
 
-			local userDecision = "Accept"
+			if not PatchSet.isEmpty(unappliedPatch) then
-			if self.__userConfirmCallback ~= nil then
+				Log.debug(
-				userDecision = self.__userConfirmCallback(self.__instanceMap, catchUpPatch, serverInfo)
+					"Could not apply all changes requested by the Rojo server:\n{}",
+					PatchSet.humanSummary(self.__instanceMap, unappliedPatch)
+				)
 			end
 
-			if userDecision == "Abort" then
+			return Promise.resolve()
-				return Promise.reject("Aborted Rojo sync operation")
+		else
-
+			return Promise.reject("Invalid user decision: " .. userDecision)
-			elseif userDecision == "Reject" and self.__twoWaySync then
+		end
-				-- The user wants their studio DOM to write back to their Rojo DOM
+	end)
-				-- so we will reverse the patch and send it back
-
-				local inversePatch = PatchSet.newEmpty()
-
-				-- Send back the current properties
-				for _, change in catchUpPatch.updated do
-					local instance = self.__instanceMap.fromIds[change.id]
-					if not instance then continue end
-
-					local update = encodePatchUpdate(instance, change.id, change.changedProperties)
-					table.insert(inversePatch.updated, update)
-				end
-				-- Add the removed instances back to Rojo
-				-- selene:allow(empty_if, unused_variable)
-				for _, instance in catchUpPatch.removed do
-					-- TODO: Generate ID for our instance and add it to inversePatch.added
-				end
-				-- Remove the additions we've rejected
-				for id, _change in catchUpPatch.added do
-					table.insert(inversePatch.removed, id)
-				end
-
-				self.__apiContext:write(inversePatch)
-
-			elseif userDecision == "Accept" then
-				local unappliedPatch = self.__reconciler:applyPatch(catchUpPatch)
-
-				if not PatchSet.isEmpty(unappliedPatch) then
-					Log.warn("Could not apply all changes requested by the Rojo server:\n{}",
-						PatchSet.humanSummary(self.__instanceMap, unappliedPatch))
-				end
-				if self.__patchAppliedCallback then
-					pcall(self.__patchAppliedCallback, catchUpPatch, unappliedPatch)
-				end
-			end
-		end)
 end
 
 function ServeSession:__mainSyncLoop()
-	return self.__apiContext:retrieveMessages()
+	return Promise.new(function(resolve, reject)
-		:andThen(function(messages)
+		while self.__status == Status.Connected do
-			for _, message in ipairs(messages) do
+			local success, result = self.__apiContext
-				local unappliedPatch = self.__reconciler:applyPatch(message)
+				:retrieveMessages()
+				:andThen(function(messages)
+					if self.__status == Status.Disconnected then
+						-- In the time it took to retrieve messages, we disconnected
+						-- so we just resolve immediately without patching anything
+						return
+					end
 
-				if not PatchSet.isEmpty(unappliedPatch) then
+					Log.trace("Serve session {} retrieved {} messages", tostring(self), #messages)
-					Log.warn("Could not apply all changes requested by the Rojo server:\n{}",
-						PatchSet.humanSummary(self.__instanceMap, unappliedPatch))
-				end
 
-				if self.__patchAppliedCallback then
+					for _, message in messages do
-					pcall(self.__patchAppliedCallback, message, unappliedPatch)
+						local unappliedPatch = self.__reconciler:applyPatch(message)
-				end
+
+						if not PatchSet.isEmpty(unappliedPatch) then
+							Log.debug(
+								"Could not apply all changes requested by the Rojo server:\n{}",
+								PatchSet.humanSummary(self.__instanceMap, unappliedPatch)
+							)
+						end
+					end
+				end)
+				:await()
+
+			if self.__status == Status.Disconnected then
+				-- If we are no longer connected after applying, we stop silently
+				-- without checking for errors as they are no longer relevant
+				break
+			elseif success == false then
+				reject(result)
 			end
+		end
 
-			if self.__status ~= Status.Disconnected then
+		-- We are no longer connected, so we resolve the promise
-				return self:__mainSyncLoop()
+		resolve()
-			end
+	end)
-		end)
 end
 
 function ServeSession:__stopInternal(err)

plugin/src/Settings.lua

@@ -13,6 +13,9 @@ local defaultSettings = {
 	openScriptsExternally = false,
 	twoWaySync = false,
 	showNotifications = true,
+	syncReminder = true,
+	confirmationBehavior = "Initial",
+	largeChangesConfirmationThreshold = 5,
 	playSounds = true,
 	typecheckingEnabled = false,
 	logLevel = "Info",

plugin/src/Types.lua

@@ -56,11 +56,7 @@ local ApiSubscribeResponse = t.interface({
 })
 
 local ApiError = t.interface({
-	kind = t.union(
+	kind = t.union(t.literal("NotFound"), t.literal("BadRequest"), t.literal("InternalError")),
-		t.literal("NotFound"),
-		t.literal("BadRequest"),
-		t.literal("InternalError")
-	),
 	details = t.string,
 })
 

plugin/src/Version.lua

@@ -43,4 +43,4 @@ function Version.display(version)
 	return output
 end
 
-return Version
+return Version

plugin/src/Version.spec.lua

@@ -2,27 +2,27 @@ return function()
 	local Version = require(script.Parent.Version)
 
 	it("should compare equal versions", function()
-		expect(Version.compare({1, 2, 3}, {1, 2, 3})).to.equal(0)
+		expect(Version.compare({ 1, 2, 3 }, { 1, 2, 3 })).to.equal(0)
-		expect(Version.compare({0, 4, 0}, {0, 4})).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({ 0, 0, 123 }, { 0, 0, 123 })).to.equal(0)
-		expect(Version.compare({26}, {26})).to.equal(0)
+		expect(Version.compare({ 26 }, { 26 })).to.equal(0)
-		expect(Version.compare({26, 42}, {26, 42})).to.equal(0)
+		expect(Version.compare({ 26, 42 }, { 26, 42 })).to.equal(0)
-		expect(Version.compare({1, 0, 0}, {1})).to.equal(0)
+		expect(Version.compare({ 1, 0, 0 }, { 1 })).to.equal(0)
 	end)
 
 	it("should compare newer, older versions", function()
-		expect(Version.compare({1}, {0})).to.equal(1)
+		expect(Version.compare({ 1 }, { 0 })).to.equal(1)
-		expect(Version.compare({1, 1}, {1, 0})).to.equal(1)
+		expect(Version.compare({ 1, 1 }, { 1, 0 })).to.equal(1)
 	end)
 
 	it("should compare different major versions", function()
-		expect(Version.compare({1, 3, 2}, {2, 2, 1})).to.equal(-1)
+		expect(Version.compare({ 1, 3, 2 }, { 2, 2, 1 })).to.equal(-1)
-		expect(Version.compare({1, 2}, {2, 1})).to.equal(-1)
+		expect(Version.compare({ 1, 2 }, { 2, 1 })).to.equal(-1)
-		expect(Version.compare({1}, {2})).to.equal(-1)
+		expect(Version.compare({ 1 }, { 2 })).to.equal(-1)
 	end)
 
 	it("should compare different minor versions", function()
-		expect(Version.compare({1, 2, 3}, {1, 3, 2})).to.equal(-1)
+		expect(Version.compare({ 1, 2, 3 }, { 1, 3, 2 })).to.equal(-1)
-		expect(Version.compare({50, 1}, {50, 2})).to.equal(-1)
+		expect(Version.compare({ 50, 1 }, { 50, 2 })).to.equal(-1)
 	end)
 end