[codex] Split playground into workspace packages

.github/workflows/deploy-fork-preview.yml

@@ -81,7 +81,7 @@ jobs:
           workingDirectory: apps/docs
           command: pages deploy out --project-name=rescript-lang-org
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          wranglerVersion: 4.61.1
+          wranglerVersion: 4.85.0
         continue-on-error: true
         env:
           FORCE_COLOR: 0

.github/workflows/deploy.yml

@@ -64,7 +64,7 @@ jobs:
           workingDirectory: apps/docs
           command: pages deploy out --project-name=rescript-lang-org --branch=${{ env.SAFE_BRANCH }}
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          wranglerVersion: 4.63.0
+          wranglerVersion: 4.85.0
         env:
           FORCE_COLOR: 0
       - name: Comment PR with deployment link

.gitignore

@@ -25,11 +25,14 @@ apps/docs/temp-jsx-preserve
 .merlin
 lib/
 apps/docs/lib/
+packages/*/lib/
 
 .vercel
 
 apps/docs/src/**/*.mjs
 apps/docs/src/**/*.jsx
+packages/*/src/**/*.mjs
+packages/*/src/**/*.jsx
 apps/docs/scripts/gendocs.mjs
 apps/docs/scripts/generate_*.mjs
 apps/docs/scripts/gendocs.jsx

apps/docs/__tests__/BlogArticle_.test.res

@@ -141,7 +141,7 @@ let mockFrontmatterWithArticleImg: BlogFrontmatter.t = {
   co_authors: [],
   date: DateStr.fromString("2025-06-01"),
   previewImg: Nullable.null,
-  articleImg: Nullable.Value("https://rescript-lang.org/brand/rescript-brandmark.svg"),
+  articleImg: Nullable.Value("/brand/rescript-brandmark.svg"),
   title: "Blog Post With Article Image",
   badge: Nullable.Value(Release),
   description: Nullable.Value("A post with an article image."),
@@ -166,6 +166,7 @@ test("desktop blog article with article image shows image", async () => {
   await element(title)->toBeVisible
 
   let wrapper = await screen->getByTestId("blog-article-wrapper")
+  await waitForImages("[data-testid='blog-article-wrapper']")
   await element(wrapper)->toMatchScreenshot("desktop-blog-article-with-image")
 })
 

apps/docs/__tests__/LandingPage_.test.res

@@ -48,6 +48,7 @@ let snapshotSection = async (~width, ~height, ~sectionTestId, ~screenshotName) =
 
   let snapshotTarget = await snapshotScreen->getByTestId(sandboxTestId)
   await element(snapshotTarget)->toBeVisible
+  await waitForImages(`[data-testid="${sandboxTestId}"]`)
   await element(snapshotTarget)->toMatchScreenshot(screenshotName)
   await snapshotScreen->unmount
 }

apps/docs/__tests__/MarkdownComponents_.test.res

@@ -204,7 +204,7 @@ test("renders Image with caption", async () => {
     <div dataTestId="image-wrapper">
       <Markdown.Image
         className="rounded-lg border border-gray-90/5 text-gray-60"
-        src="https://rescript-lang.org/lp/community-3.avif"
+        src="/lp/community-3.avif"
         caption="A sample image caption"
       />
     </div>,
@@ -214,6 +214,7 @@ test("renders Image with caption", async () => {
   await element(caption)->toBeVisible
 
   let wrapper = await screen->getByTestId("image-wrapper")
+  await waitForImages("[data-testid='image-wrapper']")
   await element(wrapper)->toMatchScreenshot("markdown-image")
 })
 

apps/docs/package.json

@@ -33,33 +33,21 @@
     "vitest:update": "vitest --run --browser.headless --update"
   },
   "dependencies": {
-    "@babel/generator": "^7.29.1",
-    "@babel/parser": "^7.29.2",
-    "@babel/traverse": "^7.29.0",
     "@cloudflare/pages-plugin-vercel-og": "^0.1.2",
-    "@codemirror/commands": "^6.10.3",
-    "@codemirror/lang-javascript": "^6.2.5",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/lint": "^6.9.5",
-    "@codemirror/search": "^6.6.0",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.41.0",
     "@docsearch/react": "^4.6.2",
     "@headlessui/react": "^2.2.9",
-    "@lezer/highlight": "^1.2.3",
     "@mdx-js/mdx": "^3.1.1",
     "@node-cli/static-server": "^3.1.10",
     "@react-router/node": "^7.14.0",
-    "@replit/codemirror-vim": "^6.3.0",
+    "@rescript-lang/playground": "workspace:*",
+    "@rescript-lang/shared": "workspace:*",
     "@rescript/react": "^0.14.2",
     "@rescript/webapi": "0.1.0-experimental-29db5f4",
-    "@tsnobip/rescript-lezer": "^0.8.0",
     "docson": "^2.1.0",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.11.1",
     "highlightjs-rescript": "^0.2.2",
     "isbot": "^5.1.37",
-    "lz-string": "^1.5.0",
     "mdast-util-from-markdown": "^2.0.3",
     "mdast-util-to-string": "^4.0.0",
     "mdast-util-toc": "^7.1.0",

apps/docs/rescript.json

@@ -1,7 +1,12 @@
 {
   "name": "@rescript-lang/docs",
   "namespace": false,
-  "dependencies": ["@rescript/react", "@rescript/webapi"],
+  "dependencies": [
+    "@rescript-lang/shared",
+    "@rescript-lang/playground",
+    "@rescript/react",
+    "@rescript/webapi"
+  ],
   "compiler-flags": ["-open WebAPI.Global"],
   "sources": [
     {

apps/docs/src/bindings/Vitest.res

@@ -56,6 +56,24 @@ external getAllByLabelText: (element, string) => promise<array<element>> = "getA
 @send
 external getByRole: (element, [#button]) => promise<element> = "getByRole"
 
+external imageFromNode: WebAPI.DOMAPI.node => WebAPI.DOMAPI.htmlImageElement = "%identity"
+
+let waitForImages = async (selector: string) => {
+  let root = switch document->WebAPI.Document.querySelector(selector) {
+  | Value(root) => root
+  | Null => failwith(`expected to find screenshot target ${selector}`)
+  }
+
+  let images = root->WebAPI.Element.querySelectorAll("img")
+
+  if images.length > 0 {
+    for i in 0 to images.length - 1 {
+      let image = images->WebAPI.NodeList.item(i)->imageFromNode
+      await image->WebAPI.HTMLImageElement.decode
+    }
+  }
+}
+
 /**
  * Actions
  */

apps/docs/vitest.config.mjs

@@ -3,9 +3,26 @@ import { playwright } from "@vitest/browser-playwright";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 
+const setupDeps = [
+  "highlight.js/lib/core",
+  "highlight.js/lib/languages/bash",
+  "highlight.js/lib/languages/css",
+  "highlight.js/lib/languages/diff",
+  "highlight.js/lib/languages/ini",
+  "highlight.js/lib/languages/javascript",
+  "highlight.js/lib/languages/json",
+  "highlight.js/lib/languages/plaintext",
+  "highlight.js/lib/languages/typescript",
+  "highlight.js/lib/languages/xml",
+  "highlightjs-rescript",
+];
+
 export default defineConfig({
   envDir: "../..",
   plugins: [react(), tailwindcss()],
+  optimizeDeps: {
+    include: setupDeps,
+  },
   test: {
     include: ["__tests__/*.jsx"],
     setupFiles: ["./vitest.setup.mjs"],

packages/playground/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@rescript-lang/playground",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@rescript-lang/shared": "workspace:*",
+    "@rescript/react": "^0.14.2",
+    "@rescript/webapi": "0.1.0-experimental-29db5f4",
+    "lz-string": "^1.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "^7.14.0"
+  }
+}

packages/playground/rescript.json

@@ -0,0 +1,19 @@
+{
+  "name": "@rescript-lang/playground",
+  "namespace": false,
+  "dependencies": [
+    "@rescript-lang/shared",
+    "@rescript/react",
+    "@rescript/webapi"
+  ],
+  "compiler-flags": ["-open WebAPI.Global"],
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    }
+  ],
+  "warnings": {
+    "error": "+8"
+  }
+}

apps/docs/src/playground/CompilerManagerHook.res → packages/playground/src/CompilerManagerHook.res

@@ -251,7 +251,7 @@ let useCompilerManager = (
   ~versions: array<Semver.t>,
 ) => {
   let (state, setState) = React.useState(_ => Init)
-  let {pathname} = ReactRouter.useLocation()
+  let {pathname} = PlaygroundReactRouter.useLocation()
 
   // Dispatch method for the public interface
   let dispatch = React.useCallback((action: action): unit => {