feat: add monaco + app layout + loader + tailwind

Author: palkan

.esbuild/copyPlugin.js

@@ -0,0 +1,28 @@
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import * as glob from "glob";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default function copyPlugin({ src, dest, patterns }) {
+  return {
+    name: "copy",
+    setup(build) {
+      build.onEnd(() => {
+        const sourceDir = path.resolve(__dirname, src);
+        const destDir = path.resolve(__dirname, dest);
+        patterns.forEach((pattern) => {
+          const srcFiles = glob.sync(path.resolve(sourceDir, pattern));
+          srcFiles.forEach((srcFile) => {
+            const relSrcFile = path.relative(sourceDir, srcFile);
+            const destFile = path.resolve(destDir, relSrcFile);
+            console.log(`Copying ${srcFile} to ${destFile}`);
+            fs.mkdirSync(path.dirname(destFile), { recursive: true });
+            fs.copyFileSync(srcFile, destFile);
+          });
+        });
+      });
+    },
+  };
+}

bin/wasmPlugin.js .esbuild/wasmPlugin.jsbin/wasmPlugin.js renamed to .esbuild/wasmPlugin.js

@@ -0,0 +1,34 @@
+import esbuild from "esbuild";
+import url from "url";
+import wasmPlugin from "./.esbuild/wasmPlugin.js";
+import copyPlugin from "./.esbuild/copyPlugin.js";
+
+const entryPoint = url.fileURLToPath(new URL("./src/index", import.meta.url));
+const outdir = url.fileURLToPath(new URL("./dist", import.meta.url));
+const srcDir = url.fileURLToPath(new URL("./src", import.meta.url));
+
+const { metafile } = await esbuild.build({
+  bundle: true,
+  entryPoints: [entryPoint],
+  format: "esm",
+  metafile: true,
+  minify: true,
+  outdir,
+  plugins: [
+    wasmPlugin,
+    copyPlugin({
+      src: srcDir,
+      dest: outdir,
+      patterns: ["*.html", "assets/**/*"],
+    }),
+  ],
+  sourcemap: true,
+  splitting: true,
+  target: "esnext",
+  loader: {
+    ".ttf": "file",
+  },
+});
+
+const analysis = await esbuild.analyzeMetafile(metafile);
+console.log(analysis);

bin/build.js

@@ -0,0 +1,32 @@
+import esbuild from "esbuild";
+import url from "url";
+import wasmPlugin from "./.esbuild/wasmPlugin.js";
+import copyPlugin from "./.esbuild/copyPlugin.js";
+
+const entryPoint = url.fileURLToPath(new URL("./src/index", import.meta.url));
+const outdir = url.fileURLToPath(new URL("./dist", import.meta.url));
+const srcDir = url.fileURLToPath(new URL("./src", import.meta.url));
+
+const ctx = await esbuild.context({
+  bundle: true,
+  entryPoints: [entryPoint],
+  format: "esm",
+  outdir,
+  plugins: [
+    wasmPlugin,
+    copyPlugin({
+      src: srcDir,
+      dest: outdir,
+      patterns: ["*.html", "assets/**/*"],
+    }),
+  ],
+  sourcemap: true,
+  splitting: true,
+  target: "esnext",
+  loader: {
+    ".ttf": "file",
+  },
+});
+
+const { host, port } = await ctx.serve({ servedir: outdir });
+console.log(`Listening at ${host}:${port}`);

bin/copyPlugin.js

@@ -2,14 +2,21 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build": "node bin/build.js",
-    "serve": "node bin/serve.js"
+    "build:js": "node ./esbuild.config.js",
+    "build:css": "npx tailwindcss -i ./src/app.css -o ./dist/app.css",
+    "build": "npm-run-all --parallel build:*",
+    "watch:js": "node ./esbuild.serve.js",
+    "watch:css": "yarn build:css --watch",
+    "serve": "npm-run-all --parallel watch:*"
   },
   "dependencies": {
     "@bjorn3/browser_wasi_shim": "^0.2.18",
-    "@ruby/wasm-wasi": "^2.4.1"
+    "@ruby/wasm-wasi": "^2.4.1",
+    "monaco-editor": "^0.45.0"
   },
   "devDependencies": {
-    "esbuild": "^0.17.10"
+    "esbuild": "^0.17.10",
+    "npm-run-all": "^4.1.5",
+    "tailwindcss": "^3.4.1"
   }
 }

bin/serve.js

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

esbuild.config.js

@@ -0,0 +1,64 @@
+const DEFAULT_SOURCE = `# Welcome to Ruby Next playground!
+# Here you can write Ruby code and see how it will be transformed by Ruby Next.
+# You can also execute it and see the result.
+
+greet = proc do
+case it
+  in hello: hello if hello =~ /human/i
+    '🙂'
+  in hello: 'martian'
+    '👽'
+  end
+end
+
+puts greet.call(hello: 'martian')
+`;
+
+const DEFAULT_PREVIEW = `# Here you will see the transpiled source code.`;
+
+export default class App {
+  constructor(el, vm, monaco) {
+    this.el = el;
+    this.vm = vm;
+    this.monaco = monaco;
+  }
+
+  bootstrap() {
+    this.currentEditor = this.initEditor(
+      this.el.querySelector('[target="editor"]'),
+      DEFAULT_SOURCE
+    );
+
+    this.previewEditor = this.initEditor(
+      this.el.querySelector('[target="preview"]'),
+      DEFAULT_PREVIEW,
+      {
+        readOnly: true,
+      }
+    );
+
+    this.el
+      .querySelector('[target="transpile-btn"]')
+      .addEventListener("click", () => {
+        const code = this.currentEditor.getValue();
+        const result = this.vm
+          .eval("RubyNext::Language.transform(%q(" + code + "), using: false)")
+          .toString();
+
+        this.previewEditor.setValue(result);
+      });
+  }
+
+  initEditor(target, value, opts = {}) {
+    return this.monaco.editor.create(target, {
+      value,
+      language: "ruby",
+      theme: "vs-dark",
+      automaticLayout: true,
+      minimap: {
+        enabled: false,
+      },
+      ...opts,
+    });
+  }
+}