[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">
Mofei Zhang committed
Oct 30, 2023 at 14:53 UTC
c7c57ec5315b26751a2353316f8d7c0d76058eda
6 files changed
+58
-4
compiler/apps/playground/components/Editor/Input.tsx
+4
-1
@@ -9,10 +9,11 @@
9
* Copyright (c) Facebook, Inc. and its affiliates.
10
*/
11
12
-import MonacoEditor, { type Monaco } from "@monaco-editor/react";
12
+import MonacoEditor, { type Monaco, loader } from "@monaco-editor/react";
13
import { CompilerErrorDetail } from "babel-plugin-react-forget";
14
import invariant from "invariant";
15
import type { editor } from "monaco-editor";
16
+import * as monaco from "monaco-editor";
17
import { useEffect, useState } from "react";
18
import { renderForgetMarkers } from "../../lib/forgetMonacoDiagnostics";
19
import { useStore, useStoreDispatch } from "../StoreContext";
@@ -21,6 +22,8 @@ import { monacoOptions } from "./monacoOptions";
22
// @ts-ignore
23
import React$Types from "../../node_modules/@types/react/index.d.ts";
24
25
+loader.config({ monaco});
26
+
27
type Props = {
28
errors: CompilerErrorDetail[];
29
};
compiler/apps/playground/components/Editor/index.tsx
new
+9
@@ -0,0 +1,9 @@
1
+import dynamic from "next/dynamic";
2
+
3
+// monaco-editor is currently not compatible with ssr
4
+// https://github.com/vercel/next.js/issues/31692
5
+const Editor = dynamic(() => import("./EditorImpl"), {
6
+ ssr: false,
7
+});
8
+
9
+export default Editor;
\ No newline at end of file
compiler/apps/playground/components/index.ts
+1
-1
@@ -9,6 +9,6 @@
9
* Copyright (c) Facebook, Inc. and its affiliates.
10
*/
11
12
-export { default as Editor } from "./Editor/EditorImpl";
12
+export { default as Editor } from "./Editor";
13
export { default as Header } from "./Header";
14
export { StoreProvider } from "./StoreContext";
compiler/apps/playground/next.config.js
+16
-1
@@ -5,15 +5,29 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
9
+
10
const nextConfig = {
11
reactStrictMode: true,
10
- webpack: (config) => {
12
+ webpack: (config, options) => {
13
// Load *.d.ts files as strings using https://webpack.js.org/guides/asset-modules/#source-assets.
14
config.module.rules.push({
15
test: /\.d\.ts/,
16
type: "asset/source",
17
});
18
19
+ // Monaco Editor
20
+ if (!options.isServer) {
21
+ config.plugins.push(
22
+ new MonacoWebpackPlugin({
23
+ languages: [
24
+ "typescript",
25
+ "javascript",
26
+ ],
27
+ filename: "static/[name].worker.js"
28
+ })
29
+ );
30
+ }
31
return config;
32
},
33
// These aren't used by the playground, but turning it on forces nextjs to use
@@ -22,6 +36,7 @@ const nextConfig = {
36
serverActions: true,
37
ppr: true,
38
},
39
+ transpilePackages: ["monaco-editor"],
40
};
41
42
module.exports = nextConfig;
compiler/apps/playground/package.json
+1
@@ -43,6 +43,7 @@
43
"clsx": "^1.2.1",
44
"eslint": "^8.28.0",
45
"eslint-config-next": "^13.5.6",
46
+ "monaco-editor-webpack-plugin": "^7.1.0",
47
"postcss": "^8.4.19",
48
"tailwindcss": "^3.2.4",
49
"typescript": "^5.1.0"
compiler/yarn.lock
+27
-1
@@ -4037,6 +4037,11 @@ big-integer@^1.6.44:
4037
resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
4038
integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
4039
4040
+big.js@^5.2.2:
4041
+ version "5.2.2"
4042
+ resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
4043
+ integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
4044
+
4045
binary-extensions@^2.0.0:
4046
version "2.2.0"
4047
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -5155,6 +5160,11 @@ emoji-regex@^9.2.2:
5160
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
5161
integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
5162
5163
+emojis-list@^3.0.0:
5164
+ version "3.0.0"
5165
+ resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
5166
+ integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
5167
+
5168
end-of-stream@^1.1.0, end-of-stream@^1.4.1:
5169
version "1.4.4"
5170
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:
8671
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
8672
integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
8673
8664
-json5@^2.2.2, json5@^2.2.3:
8674
+json5@^2.1.2, json5@^2.2.2, json5@^2.2.3:
8675
version "2.2.3"
8676
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
8677
integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -8788,6 +8798,15 @@ loader-runner@^4.2.0:
8798
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
8799
integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
8800
8801
+loader-utils@^2.0.2:
8802
+ version "2.0.4"
8803
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
8804
+ integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
8805
+ dependencies:
8806
+ big.js "^5.2.2"
8807
+ emojis-list "^3.0.0"
8808
+ json5 "^2.1.2"
8809
+
8810
locate-path@^3.0.0:
8811
version "3.0.0"
8812
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -9118,6 +9137,13 @@ mocha@^3.5.3:
9137
mkdirp "0.5.1"
9138
supports-color "3.1.2"
9139
9140
+monaco-editor-webpack-plugin@^7.1.0:
9141
+ version "7.1.0"
9142
+ resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz#16f265c2b5dbb5fe08681b6b3b7d00d3c5b2ee97"
9143
+ integrity sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==
9144
+ dependencies:
9145
+ loader-utils "^2.0.2"
9146
+
9147
monaco-editor@^0.34.1:
9148
version "0.34.1"
9149
resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87"