From c7c57ec5315b26751a2353316f8d7c0d76058eda Mon Sep 17 00:00:00 2001 From: Mofei Zhang Date: Mon, 30 Oct 2023 14:53:00 -0400 Subject: [PATCH] [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 image Now: No external script image --- .../playground/components/Editor/Input.tsx | 5 +++- .../playground/components/Editor/index.tsx | 9 ++++++ compiler/apps/playground/components/index.ts | 2 +- compiler/apps/playground/next.config.js | 17 ++++++++++- compiler/apps/playground/package.json | 1 + compiler/yarn.lock | 28 ++++++++++++++++++- 6 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 compiler/apps/playground/components/Editor/index.tsx diff --git a/compiler/apps/playground/components/Editor/Input.tsx b/compiler/apps/playground/components/Editor/Input.tsx index fb488f5b13..cc2a03f33a 100644 --- a/compiler/apps/playground/components/Editor/Input.tsx +++ b/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[]; }; diff --git a/compiler/apps/playground/components/Editor/index.tsx b/compiler/apps/playground/components/Editor/index.tsx new file mode 100644 index 0000000000..f0614bd50c --- /dev/null +++ b/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; \ No newline at end of file diff --git a/compiler/apps/playground/components/index.ts b/compiler/apps/playground/components/index.ts index b25887deba..66734653d9 100644 --- a/compiler/apps/playground/components/index.ts +++ b/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"; diff --git a/compiler/apps/playground/next.config.js b/compiler/apps/playground/next.config.js index 7e3592b730..8288d13aea 100644 --- a/compiler/apps/playground/next.config.js +++ b/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; diff --git a/compiler/apps/playground/package.json b/compiler/apps/playground/package.json index 8ba01f3614..659b6a117a 100644 --- a/compiler/apps/playground/package.json +++ b/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" diff --git a/compiler/yarn.lock b/compiler/yarn.lock index 33150dfc5e..22ac6e120f 100644 --- a/compiler/yarn.lock +++ b/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"