feat: #9 initial editor experience (#18)

Author: thescientist13

.gitignore

@@ -1,5 +1,6 @@
 *DS_Store
 *.log
+.vscode/
 node_modules/
 public/
 .greenwood/

greenwood-plugins/monaco-editor-esm-shim-plugin.ts

@@ -0,0 +1,37 @@
+import type { ResourcePlugin } from "@greenwood/cli";
+
+// https://github.com/microsoft/monaco-editor/issues/886
+// have to strip out CSS `import` statements from the ESM build of Monaco Editor,
+// otherwise the browser will attempt to load them as ESM and fail
+class StripCssImportsResource {
+  extensions: string[];
+  contentType: string;
+
+  constructor() {
+    this.extensions = ["js"];
+    this.contentType = "application/javascript";
+  }
+
+  async shouldIntercept(url: URL) {
+    return url.pathname.includes("node_modules/monaco-editor") && url.pathname.endsWith(".js");
+  }
+
+  async intercept(url: URL, request: Request, response: Response) {
+    const contents = await response.text();
+    const stripped = contents.replace(/^\s*import\s+[^;]*['"]([^'"]+\.css)['"]\s*;?\s*$/gm, "");
+
+    return new Response(stripped, {
+      headers: {
+        "Content-Type": this.contentType,
+      },
+    });
+  }
+}
+
+export function monacoEditorEsmShimPlugin(): ResourcePlugin {
+  return {
+    type: "resource",
+    name: "monaco-editor-strip-css-imports-plugin",
+    provider: () => new StripCssImportsResource(),
+  };
+}

repl-bundler-plugin.ts greenwood-plugins/repl-bundler-plugin.tsrepl-bundler-plugin.ts renamed to greenwood-plugins/repl-bundler-plugin.ts

@@ -1,5 +1,5 @@
 import * as rollup from "rollup";
-// TODO: depend on these modules first party
+// TODO: depend on these modules first party?
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import type { ResourcePlugin } from "@greenwood/cli";
@@ -52,11 +52,23 @@ class ReplBundlerResource {
         nodeResolve(),
         commonjs(),
       ],
+      onLog(level, log) {
+        // silence circular dependency warnings from sucrase
+        if (
+          log.pluginCode === "CIRCULAR_DEPENDENCY" &&
+          log.message.includes("node_modules/sucrase")
+        ) {
+          return;
+        }
+      },
     });
     const { output } = await bundle.generate({
       format: "esm",
     });
 
+    // Create a buffer from the code string to avoid body consumption issues
+    // const codeBuffer = Buffer.from(output[0].code, 'utf-8');
+
     return new Response(output[0].code, {
       headers: {
         "Content-Type": "text/javascript",

greenwood.config.ts

@@ -1,7 +1,8 @@
 import { greenwoodPluginImportRaw } from "@greenwood/plugin-import-raw";
 import { greenwoodPluginCssModules } from "@greenwood/plugin-css-modules";
 import { greenwoodPluginImportJsx } from "@greenwood/plugin-import-jsx";
-import { replBundlerResourcePlugin } from "./repl-bundler-plugin.ts";
+import { replBundlerResourcePlugin } from "./greenwood-plugins/repl-bundler-plugin.ts";
+import { monacoEditorEsmShimPlugin } from "./greenwood-plugins/monaco-editor-esm-shim-plugin.ts";
 import type { Config } from "@greenwood/cli";
 
 const config: Config = {
@@ -11,6 +12,7 @@ const config: Config = {
     greenwoodPluginImportRaw(),
     greenwoodPluginImportJsx(),
     replBundlerResourcePlugin(),
+    monacoEditorEsmShimPlugin(),
   ],
 };