compose playground settings into a single workspace

cometkim · cometkim · commit b0a22bb3734b · 2025-04-15T06:41:35.000+09:00
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -405,21 +405,18 @@ jobs:
 
       - name: Build playground compiler
         if: matrix.build_playground
-        run: |
-          opam exec -- node packages/playground-bundling/scripts/generate_cmijs.js
-          opam exec -- dune build --profile browser
-          cp ./_build/default/compiler/jsoo/jsoo_playground_main.bc.js playground/compiler.cjs
+        run: make playground playground-cmijs
 
       - name: Test playground compiler
         if: matrix.build_playground
-        run: node playground/playground_test.cjs
+        run: yarn workspace playground test
 
       - name: Upload playground compiler to CDN
         if: ${{ matrix.build_playground && startsWith(github.ref, 'refs/tags/v') }}
         env:
           KEYCDN_USER: ${{ secrets.KEYCDN_USER }}
           KEYCDN_PASSWORD: ${{ secrets.KEYCDN_PASSWORD }}
-        run: bash playground/upload_bundle.sh
+        run: yarn workspace playground upload-bundle
 
       - name: "Upload artifacts: binaries"
         if: matrix.upload_binaries
@@ -576,5 +573,5 @@ jobs:
       - name: Update Website Playground
         env:
           NEXT_REVALIDATE_SECRET_TOKEN: ${{ secrets.NEXT_REVALIDATE_SECRET_TOKEN }}
-        run: ./playground/website_update_playground.sh
+        run: yarn workspace playground revalidate
         shell: bash
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -241,13 +241,13 @@ make playground
 make playground-cmijs
 ```
 
-Note that building the cmijs is based on the dependencies defined in `packages/playground-bundling/package.json`. In case you want to build some different version of e.g. `@rescript/react` or just want to add a new package, change the definition within the `package.json` file and run `make playground-cmijs` again.
+Note that building the cmijs is based on the dependencies defined in `packages/playground/package.json`. In case you want to build some different version of e.g. `@rescript/react` or just want to add a new package, change the definition within the `package.json` file and run `make playground-cmijs` again.
 
 After a successful compilation, you will find following files in your project:
 
 - `playground/compiler.js` -> This is the ReScript compiler, which binds the ReScript API to the `window` object.
-- `playground/packages` -> Contains third party deps with cmij.js files (as defined in `packages/playground-bundling/bsconfig.json`)
-- `playground/compilerCmij.js` -> The compiler base cmij containing all the relevant core modules (`Js`, `Belt`, `Pervasives`, etc.)
+- `playground/packages/compiler-builtins` -> The compiler base cmij containing all the relevant core modules (`Js`, `Belt`, `Pervasives`, etc.)
+- `playground/packages/*` -> Contains third party deps with cmij.js files (as defined in `packages/playground/rescript.json`)
 
 You can now use the `compiler.js` file either directly by using a `<script src="/path/to/compiler.js"/>` and `<script src="/path/to/packages/compilerCmij.js"/>` inside a html file, use a browser bundler infrastructure to optimize it, or use `nodejs` to run it on a command line:
 
@@ -263,7 +263,7 @@ $ node
 
 ### Testing the Playground bundle
 
-Run `node playground/playground_test.cjs` for a quick sanity check to see if all the build artifacts are working together correctly. When releasing the playground bundle, the test will always be executed before publishing to catch regressions.
+Run `yarn workspace playground test` for a quick sanity check to see if all the build artifacts are working together correctly. When releasing the playground bundle, the test will always be executed before publishing to catch regressions.
 
 ### Working on the Playground JS API
 
@@ -273,7 +273,7 @@ Whenever you are modifying any files in the ReScript compiler, or in the `jsoo_p
 make playground
 
 # optionally run your test / arbitrary node script to verify your changes
-node playground/playground_test.cjs
+yarn workspace playground test
 ```
 
 ### Publishing the Playground Bundle on our KeyCDN
diff --git a/Makefile b/Makefile
@@ -61,17 +61,17 @@ artifacts: lib
 # Builds the core playground bundle (without the relevant cmijs files for the runtime)
 playground:
 	dune build --profile browser
-	cp ./_build/default/compiler/jsoo/jsoo_playground_main.bc.js playground/compiler.cjs
+	cp ./_build/default/compiler/jsoo/jsoo_playground_main.bc.js packages/playground/compiler.js
 
 # Creates all the relevant core and third party cmij files to side-load together with the playground bundle
 playground-cmijs: artifacts
-	node packages/playground-bundling/scripts/generate_cmijs.js
+	yarn workspace playground build:cmij
 
 # Builds the playground, runs some e2e tests and releases the playground to the
 # CDN (requires KEYCDN_USER and KEYCDN_PASSWORD set in the env variables)
 playground-release: playground playground-cmijs
-	node playground/playground_test.cjs
-	sh playground/upload_bundle.sh
+	yarn workspace playground test
+	yarn workspace playground upload-bundle
 
 format:
 	bash scripts/format.sh
diff --git a/packages/playground-bundling/package.json b/packages/playground-bundling/package.json
diff --git a/packages/playground/.gitignore b/packages/playground/.gitignore
@@ -25,8 +25,10 @@ lib/bs
 .merlin
 .bsb.lock
 /node_modules/
-lib/
-packages/
+/lib/
 .DS_Store
 package-lock.json
 yarn.lock
+
+/packages/
+/compiler.js
diff --git a/packages/playground/README.md b/packages/playground/README.md
@@ -1,31 +1,17 @@
-# rescript-compiler-js
+# ReScript Playground bundle
 
-This repo is useful to generate a bunch of cmij.js files for a list of dependencies ready to be used in the ReScript playground.
+This repo is useful to generate a bunch of `cmij.js` files for a list of dependencies ready to be used in the ReScript playground.
 
 ## Setup
 
-Check the `bsconfig.json` and `package.json` files for the respective versions used for the compiler & packages.
-
-It's useful to `npm link` the compiler locally to prevent mismatching compiler versions and therefore "stale artifact" warnings.
-
-```
-# Go to the root of the rescript-compiler project
-cd ../..
-
-npm link
-
-# Link the local build in this project as well
-cd packages/playground-bundling
-npm link rescript
-```
+Check the `rescript.json` and `package.json` files for the respective versions used for the compiler & packages.
 
 ## Building
 
-Run the following commands:
+Run the following command:
 
 ```
-npm run build
-node scripts/generate_cmijs.js
+yarn workspace playground build
 ```
 
 All the cmij files will now be available in the `packages/` directory with a structure like this:
@@ -55,12 +41,13 @@ packages
 Let's assume our `compiler.js` file represents our playground bundle, you'd first load the compiler, and then load any cmij file:
 
 ```
-require("playground/compiler.js")
-require("packages/@rescript/react/cmij.js")
+const { rescript_compiler } = require("./compiler.js");
 
-let comp = rescript_compiler.make()
-comp.rescript.compile("let a = <div/>")
+require("./packages/compiler-builtins/cmij.js");
+require("./packages/@rescript/react/cmij.js");
+
+let comp = rescript_compiler.make();
+comp.rescript.compile("let a = <div/>");
 ```
 
 The script above will be able to successfully compile this React code, since all the `React` module functionality required by JSX was injected in the compiler's state.
-
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "name": "playground",
+  "type": "commonjs",
+  "scripts": {
+    "clean": "rescript clean",
+    "test": "node ./playground_test.cjs",
+    "build:cmij": "rescript clean && rescript build && node ./scripts/generate_cmijs.mjs",
+    "bundle": "rollup -c",
+    "upload-bundle": "./scripts/upload_bundle.sh",
+    "revalidate": "./scripts/website_update_playground.sh"
+  },
+  "dependencies": {
+    "@rescript/react": "^0.13.1",
+    "rescript": "workspace:^"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "glob": "^11.0.1",
+    "rollup": "^4.32.0"
+  }
+}
diff --git a/packages/playground/playground_test.cjs b/packages/playground/playground_test.cjs
@@ -1,9 +1,9 @@
 // Playground bundle is UMD module
 // It uses `module.exports` in current context, or fallback to `globalThis`
-const { rescript_compiler } = require("./compiler.cjs");
+const { rescript_compiler } = require("./compiler.js");
 
-require("./packages/compiler-builtins/cmij.cjs");
-require("./packages/@rescript/react/cmij.cjs");
+require("./packages/compiler-builtins/cmij.js");
+require("./packages/@rescript/react/cmij.js");
 
 const compiler = rescript_compiler.make();
 
diff --git a/packages/playground/rescript.json b/packages/playground/rescript.json
@@ -1,14 +1,16 @@
 {
   "name": "playground",
   "version": "0.1.0",
-  "bs-dependencies": ["@rescript/react"],
-  "package-specs": {
-    "module": "esmodule",
-    "in-source": false
-  },
   "sources": {
     "dir": "src",
     "subdirs": true
   },
-  "uncurried": true
+  "package-specs": {
+    "module": "esmodule",
+    "in-source": false,
+    "suffix": ".res.js"
+  },
+  "bs-dependencies": [
+    "@rescript/react"
+  ]
 }
diff --git a/packages/playground/rollup.config.mjs b/packages/playground/rollup.config.mjs
@@ -4,9 +4,9 @@ import { glob } from "glob";
 
 const RESCRIPT_COMPILER_ROOT_DIR = path.join(import.meta.dirname, "..", "..");
 const LIB_DIR = path.join(RESCRIPT_COMPILER_ROOT_DIR, "lib");
-const PLAYGROUND_DIR = path.join(RESCRIPT_COMPILER_ROOT_DIR, "playground");
+
 // Final target output directory where all the cmijs will be stored
-const PACKAGES_DIR = path.join(PLAYGROUND_DIR, "packages");
+const PACKAGES_DIR = path.join(import.meta.dirname, "packages");
 const outputFolder = path.join(PACKAGES_DIR, "compiler-builtins", "stdlib");
 
 const entryPoint = await glob(`${LIB_DIR}/es6/*.js`);
diff --git a/packages/playground/scripts/generate_cmijs.mjs b/packages/playground/scripts/generate_cmijs.mjs
@@ -26,10 +26,8 @@ const RESCRIPT_COMPILER_ROOT_DIR = path.join(
   "..",
 );
 
-const PLAYGROUND_DIR = path.join(RESCRIPT_COMPILER_ROOT_DIR, "playground");
-
 // The playground-bundling root dir
-const PROJECT_ROOT_DIR = path.join(import.meta.dirname, "..");
+const PLAYGROUND_DIR = path.join(import.meta.dirname, "..");
 
 // Final target output directory where all the cmijs will be stored
 const PACKAGES_DIR = path.join(PLAYGROUND_DIR, "packages");
@@ -43,14 +41,13 @@ fs.mkdirSync(PACKAGES_DIR, { recursive: true });
 function e(cmd) {
   console.log(`>>>>>> running command: ${cmd}`);
   child_process.execSync(cmd, {
-    cwd: PROJECT_ROOT_DIR,
+    cwd: PLAYGROUND_DIR,
     encoding: "utf8",
     stdio: [0, 1, 2],
   });
   console.log("<<<<<<");
 }
 
-e("yarn install");
 e("yarn rescript clean");
 e("yarn rescript");
 
@@ -68,7 +65,7 @@ function buildCompilerCmij() {
   const outputFolder = path.join(PACKAGES_DIR, "compiler-builtins");
   fs.mkdirSync(outputFolder, { recursive: true });
 
-  const cmijFile = path.join(outputFolder, "cmij.cjs");
+  const cmijFile = path.join(outputFolder, "cmij.js");
 
   e(
     `find ${rescriptLibOcamlFolder} -name "*.cmi" -or -name "*.cmj" | xargs -n1 basename | xargs js_of_ocaml build-fs -o ${cmijFile} -I ${rescriptLibOcamlFolder}`,
@@ -94,7 +91,7 @@ function buildThirdPartyCmijs() {
     const outputFolder = path.join(PACKAGES_DIR, pkg);
     fs.mkdirSync(outputFolder, { recursive: true });
 
-    const cmijFile = path.join(outputFolder, "cmij.cjs");
+    const cmijFile = path.join(outputFolder, "cmij.js");
 
     e(`find ${libEs6Folder} -name '*.js' -exec cp {} ${outputFolder} \\;`);
     e(
diff --git a/packages/playground/scripts/upload_bundle.sh b/packages/playground/scripts/upload_bundle.sh
@@ -1,13 +1,14 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 # This script will publish the compiler.js bundle / packages cmij.js files to our KeyCDN server.
 # The target folder on KeyCDN will be the compiler.js' version number.
 # This script requires `curl` / `openssl` to be installed.
 
-SCRIPT_DIR=$(cd "$(dirname "$0")"; pwd -P)
+SCRIPT_PATH=${BASH_SOURCE[0]}
+SCRIPT_DIR=$(dirname "$(dirname "$current_script_path")")
 
 # Get the actual version from the compiled playground bundle
-VERSION=$(cd $SCRIPT_DIR; node -e 'require("./compiler.js"); console.log(rescript_compiler.make().rescript.version)')
+VERSION=$(cd $SCRIPT_DIR; node -e 'require("/compiler.js"); console.log(rescript_compiler.make().rescript.version)')
 
 if [ -z "${KEYCDN_USER}" ]; then
   echo "KEYCDN_USER environment variable not set. Make sure to set the environment accordingly."
diff --git a/packages/playground/scripts/website_update_playground.sh b/packages/playground/scripts/website_update_playground.sh
@@ -1,4 +1,4 @@
-#/usr/bin/sh
+#!/usr/bin/env bash
 
 if [ -z "${NEXT_REVALIDATE_SECRET_TOKEN}" ]; then
   echo "NEXT_REVALIDATE_SECRET_TOKEN environment variable not set."
diff --git a/packages/playground/src/App.res b/packages/playground/src/App.res
diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
diff --git a/yarn.lock b/yarn.lock
@@ -2340,9 +2340,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playground-bundling@workspace:packages/playground-bundling":
+"playground@workspace:packages/playground":
   version: 0.0.0-use.local
-  resolution: "playground-bundling@workspace:packages/playground-bundling"
+  resolution: "playground@workspace:packages/playground"
   dependencies:
     "@rescript/react": "npm:^0.13.1"
     "@rollup/plugin-node-resolve": "npm:^16.0.0"
