From 9799febfd263f96f2073bac77e845686ad15dada Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Fri, 10 Apr 2026 12:29:33 -0400
Subject: [PATCH 1/2] fix(playground): Update Vite config to handle Babel's CJS
 default export

---
 vite.config.mjs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vite.config.mjs b/vite.config.mjs
index 012852eb0..47cb9e623 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -40,4 +40,7 @@ export default defineConfig({
     exclude: ["node_modules/.vite/deps/*.js"],
   },
   assetsInclude: ["**/resources.json"],
+  legacy: {
+    inconsistentCjsInterop: true,
+  },
 });

From 395eba5be178b35a823697eebaa8b410b8cb8fc2 Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Fri, 10 Apr 2026 12:45:03 -0400
Subject: [PATCH 2/2] Add Playground E2E test and typeWithOptions binding

- Add e2e/Playground.cy.res with a test for compiling and running code
- Add typeWithOptions binding to Cy.res for typing with options
- Rename Navigation_.cy.res to Navigation.cy.res for consistency
---
 e2e/{Navigation_.cy.res => Navigation.cy.res} |  0
 e2e/Playground.cy.res                         | 67 +++++++++++++++++++
 e2e/bindings/Cy.res                           |  1 +
 3 files changed, 68 insertions(+)
 rename e2e/{Navigation_.cy.res => Navigation.cy.res} (100%)
 create mode 100644 e2e/Playground.cy.res

diff --git a/e2e/Navigation_.cy.res b/e2e/Navigation.cy.res
similarity index 100%
rename from e2e/Navigation_.cy.res
rename to e2e/Navigation.cy.res
diff --git a/e2e/Playground.cy.res b/e2e/Playground.cy.res
new file mode 100644
index 000000000..1c81f4e76
--- /dev/null
+++ b/e2e/Playground.cy.res
@@ -0,0 +1,67 @@
+open Cy
+
+let waitForHydration = () => {
+  getByTestId("navbar-primary")->shouldBeVisible->ignore
+  cyWindow()->its("document.readyState")->shouldWithValue("eq", "complete")->ignore
+  wait(2000)
+}
+
+let waitForPlayground = () => {
+  get(".cm-editor")->should("be.visible")->ignore
+  getByTestId("control-panel")->should("be.visible")->ignore
+  wait(2000)
+}
+
+let clickNavLink = (~testId, ~text) => {
+  get(`[data-testid="${testId}"] a:visible`)
+  ->containsChainable(text)
+  ->click
+  ->ignore
+}
+
+describe("Playground", () => {
+  beforeEach(() => {
+    viewport(1280, 720)
+    visit("/")
+    waitForHydration()
+  })
+
+  it("should compile and run Console.log in the playground", () => {
+    // Navigate to the playground from the homepage
+    clickNavLink(~testId="navbar-primary-left-content", ~text="Playground")
+    url()->shouldInclude("/try")->ignore
+
+    // Wait for the playground editor and compiler to fully load
+    waitForPlayground()
+
+    // Clear all existing code and type new ReScript source
+    get(".cm-content")
+    ->typeWithOptions(
+      "{selectall}{backspace}Console.log(\"Hello ReScript!\")",
+      {"force": true, "delay": 20},
+    )
+    ->ignore
+
+    // Allow time for the compiler to process
+    wait(3000)
+
+    // Switch to the JavaScript tab and verify compiled output
+    contains("JavaScript")->click->ignore
+    get("pre.whitespace-pre-wrap")
+    ->shouldContainText("console.log")
+    ->ignore
+
+    // Click the Run button in the control panel
+    getByTestId("control-panel")
+    ->find("button")
+    ->containsChainable("Run")
+    ->click
+    ->ignore
+
+    // The Run button auto-switches to the Output tab.
+    // Verify the console output panel contains the logged text.
+    get("div.whitespace-pre-wrap pre")
+    ->shouldContainText("Hello ReScript!")
+    ->ignore
+  })
+})
diff --git a/e2e/bindings/Cy.res b/e2e/bindings/Cy.res
index f8a1ce5f2..d34ef610d 100644
--- a/e2e/bindings/Cy.res
+++ b/e2e/bindings/Cy.res
@@ -72,6 +72,7 @@ external log: string => unit = "log"
 @send external clickWithOptions: (t, {..}) => t = "click"
 @send external dblclick: t => t = "dblclick"
 @send external type_: (t, string) => t = "type"
+@send external typeWithOptions: (t, string, {..}) => t = "type"
 @send external clear: t => t = "clear"
 @send external check: t => t = "check"
 @send external uncheck: t => t = "uncheck"