add a script to serve playground bundle locally (#7834)

* add a script to serve playground bundle locally

* fix routing

* fix, tested

* add a manual

Author: cometkim

CONTRIBUTING.md

@@ -286,6 +286,17 @@ $ node
 
 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.
 
+You can test the bundle within the playground by running a web server and playground locally.
+
+```sh
+# Serve playground bundles locally
+yarn workspace playground serve-bundle
+
+# And run the website with "PLAYGROUND_BUNDLE_ENDPOINT"
+cd path/to/rescript-lang.org
+PLAYGROUND_BUNDLE_ENDPOINT=http://localhost:8888 npm run dev
+```
+
 ### Working on the Playground JS API
 
 Whenever you are modifying any files in the ReScript compiler, or in the `jsoo_playground_main.ml` file, you'll need to rebuild the source and recreate the JS bundle.

packages/playground/package.json

@@ -6,7 +6,8 @@
     "clean": "rescript clean",
     "test": "node ./playground_test.cjs",
     "build": "rescript clean && rescript legacy build && node scripts/generate_cmijs.mjs && rollup -c",
-    "upload-bundle": "node scripts/upload_bundle.mjs"
+    "upload-bundle": "node scripts/upload_bundle.mjs",
+    "serve-bundle": "node serve-bundle.mjs"
   },
   "dependencies": {
     "@rescript/react": "^0.13.1",
@@ -15,6 +16,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^16.0.0",
     "glob": "^11.0.1",
+    "h3": "2.0.0-beta.4",
     "rollup": "^4.32.0"
   }
 }

packages/playground/serve-bundle.mjs

@@ -0,0 +1,48 @@
+import { stat, readFile } from "node:fs/promises";
+import * as path from "node:path";
+import { H3, serve, serveStatic } from "h3";
+
+import compilerBundle from "./compiler.js";
+
+const compilerVersion = compilerBundle.rescript_compiler.version;
+const localVersion = "v" + compilerVersion.toString();
+/**
+ * @param {string} id
+ */
+function toLocalPath(id) {
+  const originalId = id.slice(localVersion.length + 1);
+  if (originalId === "/compiler.js") {
+    return path.join(import.meta.dirname, originalId);
+  }
+  return path.join(
+    import.meta.dirname,
+    "packages",
+    originalId,
+  );
+}
+
+const versionContent = new H3()
+  .get("/**", event => {
+    return serveStatic(event, {
+      getContents: id => {
+        const localPath = toLocalPath(id);
+        return localPath && readFile(localPath);
+      },
+      getMeta: async id => {
+        const localPath = toLocalPath(id);
+        const stats = await stat(localPath).catch(() => {});
+        if (stats?.isFile()) {
+          return {
+            size: stats.size,
+            mtime: stats.mtimeMs,
+          };
+        }
+      },
+    });
+  });
+
+const app = new H3()
+  .get("/playground-bundles/versions.json", () => [localVersion])
+  .mount(`/${localVersion}`, versionContent);
+
+serve(app, { port: 8888 });

yarn.lock

@@ -1117,6 +1117,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie-es@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "cookie-es@npm:2.0.0"
+  checksum: 10c0/3b2459030a5ad2bc715aeb27a32f274340670bfc5031ac29e1fba804212517411bb617880d3fe66ace2b64dfb28f3049e2d1ff40d4bec342154ccdd124deaeaa
+  languageName: node
+  linkType: hard
+
 "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
@@ -1280,6 +1287,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fetchdts@npm:^0.1.6":
+  version: 0.1.7
+  resolution: "fetchdts@npm:0.1.7"
+  checksum: 10c0/7497671ee28b3e7cc49d037a7c11e6f98e53e6e2abd85f26e8fac3fae4142c3c0d91352dc46198530f73b16480585605c63e3d112c34210ff2c75be1199668a0
+  languageName: node
+  linkType: hard
+
 "fill-range@npm:^7.1.1":
   version: 7.1.1
   resolution: "fill-range@npm:7.1.1"
@@ -1501,6 +1515,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"h3@npm:2.0.0-beta.4":
+  version: 2.0.0-beta.4
+  resolution: "h3@npm:2.0.0-beta.4"
+  dependencies:
+    cookie-es: "npm:^2.0.0"
+    fetchdts: "npm:^0.1.6"
+    rou3: "npm:^0.7.3"
+    srvx: "npm:^0.8.7"
+  peerDependencies:
+    crossws: ^0.4.1
+  peerDependenciesMeta:
+    crossws:
+      optional: true
+  checksum: 10c0/ac40213784bab18a96509048d82338763484dddab303763ab549c1fc2e41c8c83a00013154fd9861042b9016f91dc0be3e6c12e553e7450910dc692c17e59403
+  languageName: node
+  linkType: hard
+
 "has-flag@npm:^4.0.0":
   version: 4.0.0
   resolution: "has-flag@npm:4.0.0"
@@ -2412,6 +2443,7 @@ __metadata:
     "@rescript/react": "npm:^0.13.1"
     "@rollup/plugin-node-resolve": "npm:^16.0.0"
     glob: "npm:^11.0.1"
+    h3: "npm:2.0.0-beta.4"
     rescript: "workspace:^"
     rollup: "npm:^4.32.0"
   languageName: unknown
@@ -2680,6 +2712,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rou3@npm:^0.7.3":
+  version: 0.7.3
+  resolution: "rou3@npm:0.7.3"
+  checksum: 10c0/f20224a724838c8a0cbdd8b37462ad684b59f87a8314aa7e6a1a892f96d806bcf504bcb9108f9d812cdb6194e1a347adc15f2c379238bfbc3b723e33dc71ca46
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:^5.1.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
@@ -2839,6 +2878,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"srvx@npm:^0.8.7":
+  version: 0.8.7
+  resolution: "srvx@npm:0.8.7"
+  dependencies:
+    cookie-es: "npm:^2.0.0"
+  bin:
+    srvx: bin/srvx.mjs
+  checksum: 10c0/67b0b0acbb660df966dd0486e93eba456535190b38a8817f45afbfc4a8892146d69bf8183cdc270bfbbc360169df26f4b636d29ca6b28a4c5eec20d3432ab317
+  languageName: node
+  linkType: hard
+
 "ssri@npm:^12.0.0":
   version: 12.0.0
   resolution: "ssri@npm:12.0.0"