configure monaco to fetch files from lightning instead of cdn (#2801)

* WIP

* copy monaco cs files to assets

* update changelog

* upgrade monaco-editor to 0.43.0

* specify platform=node when minifying

* Revert "specify platform=node when minifying"

This reverts commit 421b578.

* expand monaco vs glob path

* formatting on RUNNINGLOCAL.md

* typos in RUNNINGLOCAL

* oops! forgot to cd into assets

* fix .ttf file getting overitten to .js

---------

Co-authored-by: Stuart Corbishley <[email protected]>
Co-authored-by: Taylor Downs <[email protected]>

CHANGELOG.md

@@ -22,6 +22,9 @@ and this project adheres to
 
 ### Changed
 
+- Configure Monaco to load files from lightning instead of cdn
+  [#2786](https://github.com/OpenFn/lightning/issues/2786)
+
 ### Fixed
 
 - `z-index` broken on unsaved dot on workflow edit page

RUNNINGLOCAL.md

@@ -8,17 +8,20 @@ installing dependencies on your machine or using Docker.
 ### Setup
 
 #### Postgres
-Requires `postgres 15`.
-When running in `dev` mode, the app will use the following credentials to authenticate:
+
+Requires `postgres 15`. When running in `dev` mode, the app will use the
+following credentials to authenticate:
+
 - `PORT`: `5432`
 - `USER`: `postgres`
 - `PASSWORD`: `postgres`
 - `DATABASE`: `lightning_dev`
 
-This can however be overriden by specifying a `DATABASE_URL` env var.
-e.g. `DATABASE_URL=postgresql://postgres:postgres@localhost:5432/lightning_dev`
+This can however be overridden by specifying a `DATABASE_URL` env var. e.g.
+`DATABASE_URL=postgresql://postgres:postgres@localhost:5432/lightning_dev`
 
-We recommend that you use docker for running postgres as you'll get an exact version that we use:
+We recommend that you use docker for running postgres as you'll get an exact
+version that we use:
 
 ```sh
 docker volume create lightning-postgres-data
@@ -34,16 +37,18 @@ docker start lightning-postgres
 ```
 
 #### Elixir, NodeJS
+
 We use [asdf](https://github.com/asdf-vm/asdf) to configure our local
 environments. Included in the repo is a `.tool-versions` file that is read by
-asdf in order to dynamically make the specified versions of Elixir, Erlang and NodeJs
-available. You'll need asdf plugins for
+asdf in order to dynamically make the specified versions of Elixir, Erlang and
+NodeJs available. You'll need asdf plugins for
 [Erlang](https://github.com/asdf-vm/asdf-erlang),
 [NodeJs](https://github.com/asdf-vm/asdf-nodejs)
 [Elixir](https://github.com/asdf-vm/asdf-elixir) and
 [k6](https://github.com/grimoh/asdf-k6).
 
 #### Libsodium
+
 We use [libsodium](https://doc.libsodium.org/) for encoding values as required
 by the
 [Github API](https://docs.github.com/en/rest/guides/encrypting-secrets-for-the-rest-api).
@@ -81,10 +86,11 @@ mix ecto.migrate
 npm install --prefix assets
 ```
 
-In case you encounter errors running any of these commands, see the [troubleshooting guide](README.md#troubleshooting) for
-known errors.
+In case you encounter errors running any of these commands, see the
+[troubleshooting guide](README.md#troubleshooting) for known errors.
 
 ### Running the App
+
 To start the lightning server:
 
 ```sh
@@ -94,26 +100,27 @@ mix phx.server
 Once the server has started, head to [`localhost:4000`](http://localhost:4000)
 in your browser.
 
-By default, the `worker` is started when run `mix phx.server` in `dev` mode. In case you
-don't want to have your worker started in `dev`, set `RTM=false`:
+By default, the `worker` is started when run `mix phx.server` in `dev` mode. In
+case you don't want to have your worker started in `dev`, set `RTM=false`:
 
 ```sh
 RTM=false mix phx.server
 ```
 
 ## Using Docker
 
-There is an existing `docker-compose.yaml` file in the project's root which has all the
-services required. To start your services:
+There is an existing `docker-compose.yaml` file in the project's root which has
+all the services required. To start your services:
 
 ```sh
 docker compose up
 ```
 
-There 2 docker files in the root, `Dockerfile` builds the app in `prod` mode while `Dockerfile-dev`
-runs it in `dev` mode. It is important to note that `mix commands` do not work in the `prod` images.
+There 2 docker files in the root, `Dockerfile` builds the app in `prod` mode
+while `Dockerfile-dev` runs it in `dev` mode. It is important to note that
+`mix commands` do not work in the `prod` images.
 
-For exmaple, to run migrations in `dev` mode you run:
+For example, to run migrations in `dev` mode you run:
 
 ```sh
 docker compose run --rm web mix ecto.migrate
@@ -127,14 +134,16 @@ docker compose run --rm web /app/bin/lightning eval "Lightning.Release.migrate()
 
 ### Configuring the Worker
 
-By default, lightning starts the `worker` when running in `dev`. This can also be configured using
-`RTM` env var. In case you don't want the hassle of configuring the worker in `dev`, you can just
-remove/comment out the `worker` service from the `docker-compose.yaml` file because lightning will
-start it for you.
+By default, lightning starts the `worker` when running in `dev`. This can also
+be configured using `RTM` env var. In case you don't want the hassle of
+configuring the worker in `dev`, you can just remove/comment out the `worker`
+service from the `docker-compose.yaml` file because lightning will start it for
+you.
 
 [Learn more about configuring workers](WORKERS.md)
 
 ### Problems with Apple Silicon
 
-You might run into some errors when running the docker containers on Apple Silicon.
+You might run into some errors when running the docker containers on Apple
+Silicon.
 [We have documented the known ones here](README.md#problems-with-docker)

assets/js/monaco/index.tsx

@@ -1,8 +1,10 @@
 import React, { useRef, useCallback } from 'react';
 import ResizeObserver from 'rc-resize-observer';
-import Editor, { Monaco } from '@monaco-editor/react';
+import Editor, { Monaco, loader } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
 
+loader.config({ paths: { vs: '/assets/monaco-editor/vs' } });
+
 export function setTheme(monaco: Monaco) {
   monaco.editor.defineTheme('default', {
     base: 'vs-dark',

assets/package.json

@@ -22,7 +22,7 @@
     "immer": "^10.0.1",
     "jsonpath": "^1.1.1",
     "marked": "^4.2.4",
-    "monaco-editor": "^0.34.0",
+    "monaco-editor": "^0.43.0",
     "p-debounce": "^4.0.0",
     "p-retry": "^6.2.0",
     "postcss": "^8.4.23",

config/config.exs

@@ -101,6 +101,14 @@ config :esbuild,
          --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ],
+  monaco: [
+    args: ~w(
+         #{Path.expand("../assets/node_modules/monaco-editor/min/vs/**/*.*", __DIR__) |> Path.wildcard() |> Enum.join(" ")}
+         --loader:.ttf=copy
+         --outdir=../priv/static/assets/monaco-editor/vs ),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
 # https://fly.io/phoenix-files/tailwind-standalone/

config/dev.exs

@@ -33,6 +33,7 @@ config :lightning, LightningWeb.Endpoint,
     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
     esbuild:
       {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+    esbuild_monaco: {Esbuild, :install_and_run, [:monaco, ~w(--watch)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
     storybook_tailwind: {Tailwind, :install_and_run, [:storybook, ~w(--watch)]}
   ]

mix.exs

@@ -181,6 +181,7 @@ defmodule Lightning.MixProject do
       "assets.deploy": [
         "tailwind default --minify",
         "esbuild default --minify",
+        "esbuild monaco --minify",
         "phx.digest"
       ],
       verify: [