fix: landing page link to playground didn't have any code in it (#1270)

Author: jderochervlk

__tests__/LandingPage_.test.res

@@ -0,0 +1,55 @@
+open ReactRouter
+open Vitest
+
+let expectedExample = `module Button = {
+  @react.component
+  let make = (~count) => {
+    let times = switch count {
+    | 1 => "once"
+    | 2 => "twice"
+    | n => n->Int.toString ++ " times"
+    }
+    let text = \`Click me $\{times\}\`
+
+    <button> {text->React.string} </button>
+  }
+}`
+
+test(
+  "landing page playground link uses compressed code that the playground can decode",
+  async () => {
+    let screen = await render(
+      <MemoryRouter initialEntries=["/"]>
+        <LandingPage />
+      </MemoryRouter>,
+    )
+
+    let _ = await screen->getByText("Edit this example in Playground")
+
+    let href = switch document->WebAPI.Document.querySelector("a[href*='/try?code=']") {
+    | Value(link) =>
+      switch link->WebAPI.Element.getAttribute("href") {
+      | Value(href) => href
+      | Null => failwith("expected landing page playground link to have an href")
+      }
+    | Null => failwith("expected to find the landing page playground link")
+    }
+
+    let {pathname, searchParams} = WebAPI.URL.make(~url=href, ~base="https://rescript-lang.org")
+
+    expect(pathname)->toBe("/try")
+
+    let compressedCode =
+      searchParams->WebAPI.URLSearchParams.get("code")->Nullable.make->Nullable.toOption
+
+    let decodedCode =
+      compressedCode
+      ->Option.getOrThrow
+      ->LzString.lzString.decompressFromEncodedURIComponent
+      ->Nullable.make
+      ->Nullable.toOption
+
+    expect(decodedCode->Option.isSome)->toBe(true)
+    expect(decodedCode->Option.getOrThrow)->toBe(expectedExample)
+  },
+)

app/routes/LandingPage.res

@@ -57,17 +57,17 @@ module PlaygroundHero = {
       js: `import * as JsxRuntime from "react/jsx-runtime";
 
 function Playground$Button(props) {
-  var count = props.count;
-  var times = count !== 1 ? (
+  let count = props.count;
+  let times = count !== 1 ? (
     count !== 2 ? count.toString() + " times" : "twice"
   ) : "once";
-  var text = "Click me " + times;
+  let text = "Click me " + times;
   return JsxRuntime.jsx("button", {
     children: text
   });
 }
 
-var Button = {
+let Button = {
   make: Playground$Button
 };
 
@@ -118,7 +118,7 @@ export {
           /* ---Link to Playground--- */
           <div>
             <ReactRouter.Link.String
-              to={`/try?code=${encodeURIComponent(example.res)}`}
+              to={`/try?code=${LzString.lzString.compressToEncodedURIComponent(example.res)}`}
               className="captions md:px-0 border-b border-gray-40 hover:border-gray-60 text-gray-60"
             >
               {React.string("Edit this example in Playground")}

e2e/Playground.cy.res

@@ -65,6 +65,28 @@ describe("Playground", () => {
     ->ignore
   })
 
+  it("should open the landing page example in the playground with code and compiled output", () => {
+    containsSelector("a", "Edit this example in Playground")
+    ->scrollIntoView
+    ->should("be.visible")
+    ->click
+    ->ignore
+
+    url()->shouldInclude("/try?code=")->ignore
+    waitForPlayground()
+
+    get(".cm-content")
+    ->shouldContainText("module Button = {")
+    ->shouldContainText("Click me")
+    ->ignore
+
+    get("pre.whitespace-pre-wrap")
+    ->should("be.visible")
+    ->shouldContainText("react/jsx-runtime")
+    ->shouldContainText("Click me")
+    ->ignore
+  })
+
   it("should switch to light mode from toast and back to dark mode in settings", () => {
     // Navigate to playground and wait for initial render
     clickNavLink(~testId="navbar-primary-left-content", ~text="Playground")