[playground] QoL use webpack to bundle monaco-editor's loader

--- 

This lets us load playground locally, entirely offline (e.g. on an airplane, 
when a cdn is down, at ReactAdvanced, etc) 

Before: 

See external script link 

<img width="691" alt="image" 
src="https://github.com/facebook/react-forget/assets/34200447/85500e86-c1a5-4dff-bdcd-58db0d6fd453"> 

Now: 

No external script 

<img width="476" alt="image" 
src="https://github.com/facebook/react-forget/assets/34200447/fdcbea09-0b5f-42e3-9310-35d8d1d726b7">

compiler/apps/playground/components/Editor/Input.tsx

@@ -9,10 +9,11 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import MonacoEditor, { type Monaco } from "@monaco-editor/react";
+import MonacoEditor, { type Monaco, loader } from "@monaco-editor/react";
 import { CompilerErrorDetail } from "babel-plugin-react-forget";
 import invariant from "invariant";
 import type { editor } from "monaco-editor";
+import * as monaco from "monaco-editor";
 import { useEffect, useState } from "react";
 import { renderForgetMarkers } from "../../lib/forgetMonacoDiagnostics";
 import { useStore, useStoreDispatch } from "../StoreContext";
@@ -21,6 +22,8 @@ import { monacoOptions } from "./monacoOptions";
 // @ts-ignore
 import React$Types from "../../node_modules/@types/react/index.d.ts";
 
+loader.config({ monaco});
+
 type Props = {
   errors: CompilerErrorDetail[];
 };

compiler/apps/playground/components/Editor/index.tsx

@@ -0,0 +1,9 @@
+import dynamic from "next/dynamic";
+
+// monaco-editor is currently not compatible with ssr
+// https://github.com/vercel/next.js/issues/31692
+const Editor = dynamic(() => import("./EditorImpl"), {
+  ssr: false,
+});
+
+export default Editor;

compiler/apps/playground/components/index.ts

@@ -9,6 +9,6 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-export { default as Editor } from "./Editor/EditorImpl";
+export { default as Editor } from "./Editor";
 export { default as Header } from "./Header";
 export { StoreProvider } from "./StoreContext";

compiler/apps/playground/next.config.js

@@ -5,15 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+
 const nextConfig = {
   reactStrictMode: true,
-  webpack: (config) => {
+  webpack: (config, options) => {
     // Load *.d.ts files as strings using https://webpack.js.org/guides/asset-modules/#source-assets.
     config.module.rules.push({
       test: /\.d\.ts/,
       type: "asset/source",
     });
 
+    // Monaco Editor
+    if (!options.isServer) {
+      config.plugins.push(
+        new MonacoWebpackPlugin({
+          languages: [
+            "typescript",
+            "javascript",
+          ],
+          filename: "static/[name].worker.js"
+        })
+      );
+    }
     return config;
   },
   // These aren't used by the playground, but turning it on forces nextjs to use
@@ -22,6 +36,7 @@ const nextConfig = {
     serverActions: true,
     ppr: true,
   },
+  transpilePackages: ["monaco-editor"],
 };
 
 module.exports = nextConfig;

compiler/apps/playground/package.json

@@ -43,6 +43,7 @@
     "clsx": "^1.2.1",
     "eslint": "^8.28.0",
     "eslint-config-next": "^13.5.6",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "postcss": "^8.4.19",
     "tailwindcss": "^3.2.4",
     "typescript": "^5.1.0"

compiler/yarn.lock

@@ -4037,6 +4037,11 @@ big-integer@^1.6.44:
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
   integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -5155,6 +5160,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -8661,7 +8671,7 @@ json5@^2.1.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
-json5@^2.2.2, json5@^2.2.3:
+json5@^2.1.2, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -8788,6 +8798,15 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
+loader-utils@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -9118,6 +9137,13 @@ mocha@^3.5.3:
     mkdirp "0.5.1"
     supports-color "3.1.2"
 
+monaco-editor-webpack-plugin@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz#16f265c2b5dbb5fe08681b6b3b7d00d3c5b2ee97"
+  integrity sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==
+  dependencies:
+    loader-utils "^2.0.2"
+
 monaco-editor@^0.34.1:
   version "0.34.1"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87"