Upgrade playground to OCaml 5 (#759)

- Separate the playground into its own opam package and move it under the `playground/` subdirectory
- Update the pin of `js_top_worker` and `merlin-js` to versions that are compatible with OCaml 5
- Promote the generated JavaScript files for the top-level in the source tree and commit them to the repo under `playground/asset`
- Add a router rule that serves (from the filesystem) the files in `playground/asset/` as `/play/**`
- Hardcode a suffix (`-v1`) in the name of the playground assets so we can easily invalidate the cache when we update them
- Update the welcome message and code examples of the playground (the example is a parallel version of the Fibonacci sequence)
- Add documentation `HACKING.md` on how to re-generate the playground assets
- Update the docker file to copy the files from `playground/asset`

.dockerignore

@@ -2,6 +2,7 @@
 !asset/
 !data/
 !src/
+!playground/asset/
 !tool/
 !dune
 !dune-project

Dockerfile

@@ -24,6 +24,8 @@ RUN chmod -R 755 /var
 
 COPY --from=build /home/opam/_build/default/src/ocamlorg_web/bin/main.exe /bin/server
 
+COPY playground/asset playground/asset
+
 RUN git clone https://github.com/ocaml/opam-repository /var/opam-repository
 
 ENV OCAMLORG_REPO_PATH /var/opam-repository/

HACKING.md

@@ -53,6 +53,29 @@ You can run the unit test suite with:
 make test
 ```
 
+### Building the Playground
+
+The OCaml playground is compiled separately from the rest of the server and the generated assets can be found in
+[`playground/asset/`](./playground/asset/).
+
+To regenerate the playground, you will need to set up an OCaml 5 switch:
+
+```
+opam switch create 5.0.0 5.0.0 --no-install
+```
+
+You can then go in the `playground/` directory and install the dependencies:
+
+```
+opam install . --deps-only
+```
+
+After the dependencies have been installed, simply build the project to re-generate the JavaScript assets:
+
+```
+dune build --root .
+```
+
 ### Deploying
 
 Commits added on `main` are automatically deployed on <https://ocaml.org/>.
@@ -82,6 +105,9 @@ The following snippet describes the repository structure.
 ├── data/
 |   Data used by ocaml.org in Yaml and Markdown format.
 │
+├── playground/
+|   The source and generated assets for the OCaml Playground
+|
 ├── src
 │   ├── dream_dashboard
 |   |   A monitoring and analytics dashboard for dream.
@@ -95,9 +121,6 @@ The following snippet describes the repository structure.
 │   ├── ocamlorg_package
 |   |   The library for constructing opam-repository statistics and information (e.g. rev deps).
 |   |
-│   ├── ocamlorg_playground
-|   |   All of the js_of_ocaml code for the OCaml playground.
-|   |
 │   └── ocamlorg_web
 |       The main entry-point of the server.
 │

dune

@@ -11,33 +11,4 @@
     %{workspace_root}
     (run tailwindcss -m -c %{config} -i %{input} -o %{target})))))
 
-(subdir
- asset/js/
- (rule
-  (targets playground.js)
-  (deps
-   (:js %{workspace_root}/src/ocamlorg_playground/main.bc.js))
-  (action
-   (run
-    esbuild
-    --platform=browser
-    --external:fs
-    --external:tty
-    --external:child_process
-    --external:constants
-    --minify
-    --bundle
-    --outfile=playground.js
-    %{js})))
- (rule
-  (targets worker.js)
-  (deps
-   (:js %{workspace_root}/src/ocamlorg_playground/worker.js))
-  (action
-   (run jsoo_minify %{js} -o %{targets})))
- (rule
-  (targets merlin.js)
-  (deps
-   (:js %{workspace_root}/src/ocamlorg_playground/merlin_worker.bc.js))
-  (action
-   (run jsoo_minify %{js} -o %{targets}))))
+(data_only_dirs playground data asset)

dune-project

@@ -54,17 +54,7 @@
    (>= 0.8.0))
   yojson
   lwt
-  brr
-  rpclib
-  rpclib-lwt
-  js_top_worker
-  js_top_worker-client
-  code-mirror
-  merlin-js
-  (js_of_ocaml
-   (>= 4.0))
   tailwindcss
-  esbuild
   hilite
   river
   syndic

ocamlorg.opam

@@ -37,16 +37,7 @@ depends: [
   "timedesc" {>= "0.8.0"}
   "yojson"
   "lwt"
-  "brr"
-  "rpclib"
-  "rpclib-lwt"
-  "js_top_worker"
-  "js_top_worker-client"
-  "code-mirror"
-  "merlin-js"
-  "js_of_ocaml" {>= "4.0"}
   "tailwindcss"
-  "esbuild"
   "hilite"
   "river"
   "syndic"
@@ -88,11 +79,5 @@ build: [
 ]
 dev-repo: "git+https://github.com/ocaml/ocaml.org.git"
 pin-depends: [
-  ["esbuild.dev" "git+https://github.com/tmattio/opam-esbuild#7738af5912cc9f554d31da81d2334e88052102fb"]
   ["tailwindcss.dev" "git+https://github.com/tmattio/opam-tailwindcss#7ef5bebbf48958370051b2368a4dd57b69627cf6"]
-  ["code-mirror.dev" "git+https://github.com/patricoferris/jsoo-code-mirror#8fe48910e265ff87f9fc94ceb7b3d19fac102a96"]
-  ["merlin-js.dev" "git+https://github.com/tmattio/merlin-js#916752d353dc98a079525494b7bf86c86095cbb1"]
-  ["js_top_worker-rpc.dev" "git+https://github.com/tmattio/js_top_worker#93822c2df1af9df36e6d02e2ce2dc81a810a1865"]
-  ["js_top_worker.dev" "git+https://github.com/tmattio/js_top_worker#93822c2df1af9df36e6d02e2ce2dc81a810a1865"]
-  ["js_top_worker-client.dev" "git+https://github.com/tmattio/js_top_worker#93822c2df1af9df36e6d02e2ce2dc81a810a1865"]
 ]

ocamlorg.opam.template

@@ -1,9 +1,3 @@
 pin-depends: [
-  ["esbuild.dev" "git+https://github.com/tmattio/opam-esbuild#7738af5912cc9f554d31da81d2334e88052102fb"]
   ["tailwindcss.dev" "git+https://github.com/tmattio/opam-tailwindcss#7ef5bebbf48958370051b2368a4dd57b69627cf6"]
-  ["code-mirror.dev" "git+https://github.com/patricoferris/jsoo-code-mirror#8fe48910e265ff87f9fc94ceb7b3d19fac102a96"]
-  ["merlin-js.dev" "git+https://github.com/tmattio/merlin-js#916752d353dc98a079525494b7bf86c86095cbb1"]
-  ["js_top_worker-rpc.dev" "git+https://github.com/tmattio/js_top_worker#93822c2df1af9df36e6d02e2ce2dc81a810a1865"]
-  ["js_top_worker.dev" "git+https://github.com/tmattio/js_top_worker#93822c2df1af9df36e6d02e2ce2dc81a810a1865"]
-  ["js_top_worker-client.dev" "git+https://github.com/tmattio/js_top_worker#93822c2df1af9df36e6d02e2ce2dc81a810a1865"]
 ]

playground/.gitattributes

@@ -0,0 +1 @@
+asset/*.js filter=lfs diff=lfs merge=lfs -text