fix: fix esbulid-loader bug and monaco resize bug

akitaSummer · akitaSummer · commit 7cde6dd31aab · 2021-03-28T19:49:56.000+08:00
diff --git a/packages/hedgehog-core/package.json b/packages/hedgehog-core/package.json
@@ -9,6 +9,7 @@
     ],
     "scripts": {
         "build": "tsc -p tsconfig.json",
+        "esbuild": "webpack ./webpack.config.js",
         "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput",
         "prettier": "prettier --single-quote --write '**/*.{js,json,md}'",
         "lint": "eslint src --fix --ext .ts,.tsx,.js,.jsx"
@@ -21,15 +22,16 @@
     "dependencies": {
         "@babel/core": "^7.10.5",
         "@babel/preset-env": "^7.10.4",
-        "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.10.4",
         "@babel/standalone": "^7.10.5",
-        "@tensorflow/tfjs": "^2.7.0",
         "babel-template": "^6.26.0",
+        "clean-webpack-plugin": "^3.0.0",
+        "esbuild-loader": "^2.9.1",
         "gpu.js": "^2.9.5",
         "mathjs": "^7.1.0",
         "nerdamer": "^1.1.5",
-        "sync-fetch": "^0.3.0"
+        "webpack": "^5.21.2",
+        "webpack-cli": "^4.5.0"
     },
     "devDependencies": {
         "@babel/types": "^7.10.5",
diff --git a/packages/hedgehog-core/webpack.config.js b/packages/hedgehog-core/webpack.config.js
@@ -0,0 +1,50 @@
+const path = require("path");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const { ESBuildPlugin } = require("esbuild-loader");
+
+module.exports = {
+  resolve: {
+    extensions: [".js", ".ts", ".json"],
+  },
+  devtool: "source-map",
+  mode: "production",
+  entry: "./src/index.ts",
+  output: {
+    filename: "[name].js",
+    path: path.resolve(__dirname, "dist"),
+    libraryTarget: "commonjs",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "tslint-loader",
+            options: {
+              configFile: path.resolve(__dirname, "./tslint.json"),
+            },
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        loader: "esbuild-loader",
+        options: {
+          target: "es2015",
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.ts$/,
+        loader: "esbuild-loader",
+        options: {
+          target: "es2015",
+          tsconfigRaw: path.resolve(__dirname, "./tsconfig.json"),
+        },
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [new CleanWebpackPlugin(), new ESBuildPlugin()],
+};
diff --git a/packages/hedgehog-lab/config-overrides.js b/packages/hedgehog-lab/config-overrides.js
@@ -11,27 +11,29 @@ const { ESBuildPlugin } = require("esbuild-loader");
 module.exports = (config, env) => {
   const prod = config.mode === "production";
   const babelLoader = getBabelLoader(config);
-
+  console.log(prod, config.mode);
   return override(
-    addWebpackModuleRule({
-      test: /.tsx?$/,
-      use: [
-        {
-          loader: "esbuild-loader",
-          options: { loader: "tsx", target: "es2015" },
-        },
-      ],
-    }),
+    !prod &&
+      addWebpackModuleRule({
+        test: /.tsx?$/,
+        use: [
+          {
+            loader: "esbuild-loader",
+            options: { loader: "tsx", target: "es2015" },
+          },
+        ],
+      }),
 
-    addWebpackModuleRule({
-      test: /.jsx?$/,
-      use: [
-        {
-          loader: "esbuild-loader",
-          options: { loader: "jsx", target: "es2015" },
-        },
-      ],
-    }),
+    !prod &&
+      addWebpackModuleRule({
+        test: /.jsx?$/,
+        use: [
+          {
+            loader: "esbuild-loader",
+            options: { loader: "jsx", target: "es2015" },
+          },
+        ],
+      }),
     // You can choose to just use worker-loader! instead if you want
     addWebpackModuleRule({
       test: /\.worker\.[jt]sx?$/,
@@ -40,7 +42,7 @@ module.exports = (config, env) => {
         { loader: babelLoader.loader, options: babelLoader.options },
       ],
     }),
-    addWebpackPlugin(new ESBuildPlugin()),
+    !prod && addWebpackPlugin(new ESBuildPlugin()),
     !prod && addBabelPlugin("react-refresh/babel"),
     !prod && addWebpackPlugin(new ReactRefreshPlugin())
   )(config, env);
diff --git a/packages/hedgehog-lab/package.json b/packages/hedgehog-lab/package.json
@@ -14,16 +14,18 @@
     "comlink": "^4.3.0",
     "esbuild-loader": "^2.9.1",
     "ky": "^0.23.0",
-    "monaco-editor": "^0.20.0",
+    "monaco-editor": "^0.23.0",
     "plotly.js": "^1.54.6",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
     "react-markdown": "^4.3.1",
     "react-mathjax": "^1.0.1",
+    "react-monaco-editor": "^0.43.0",
     "react-plotly.js": "^2.4.0",
     "react-query": "^2.5.6",
+    "react-resize-detector": "^6.6.4",
     "worker-loader": "^2.0.0"
   },
   "devDependencies": {
diff --git a/packages/hedgehog-lab/src/components/SideBar/SaveButton.tsx b/packages/hedgehog-lab/src/components/SideBar/SaveButton.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) =>
       width: '50%',
       fontSize: '0.875rem',
       fontWeight: 500,
-      color: 'white',
+      color: 'white'
     }
   })
 );
diff --git a/packages/hedgehog-lab/src/components/YourCode/YourCode.tsx b/packages/hedgehog-lab/src/components/YourCode/YourCode.tsx
@@ -1,10 +1,11 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import { Button, Card, CardContent, CardHeader } from '@material-ui/core';
-import { ControlledEditor, ControlledEditorOnChange } from '@monaco-editor/react';
-import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
-import { queryCache } from 'react-query';
+import React, { useState, Dispatch, SetStateAction } from "react";
+import { Button, Card, CardContent, CardHeader } from "@material-ui/core";
+import MonacoEditor, { EditorDidMount } from "react-monaco-editor";
+import * as monacoEditor from "monaco-editor/esm/vs/editor/editor.api";
+import ResizeObserver from "react-resize-detector";
+import { queryCache } from "react-query";
 
-const COMPILE_AND_RUN_BUTTON_ID = 'compile-and-run-button-id';
+const COMPILE_AND_RUN_BUTTON_ID = "compile-and-run-button-id";
 
 interface YourCodeProps {
   handleCompileAndRun: (event: React.MouseEvent) => void;
@@ -15,33 +16,41 @@ interface YourCodeProps {
 
 const YourCode: React.FC<YourCodeProps> = (props: YourCodeProps) => {
   const { handleCompileAndRun, loading, setSource, source } = props;
+  const [
+    editor,
+    setEditor,
+  ] = useState<monacoEditor.editor.IStandaloneCodeEditor | null>(null);
+  const [monaco, setMonaco] = useState<typeof monacoEditor | null>(null);
 
-  const handleUploadSource: ControlledEditorOnChange = (e, v) => {
+  const handleUploadSource = (v: string) => {
     setSource(v as string);
   };
 
   const options = {
-    wordWrap: 'on' as const,
-    scrollBeyondLastLine: false
+    wordWrap: "on" as const,
+    scrollBeyondLastLine: false,
   };
 
-  const handleEditorDidMount = (
-    _: () => string,
-    editor: monacoEditor.editor.IStandaloneCodeEditor
+  const EditorDidMountHandle = (
+    editor: monacoEditor.editor.IStandaloneCodeEditor,
+    monaco: typeof monacoEditor
   ) => {
     editor.addAction({
       id: COMPILE_AND_RUN_BUTTON_ID,
-      label: 'compile-and-run-butt-label',
+      label: "compile-and-run-butt-label",
       keybindings: [2051], // Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter == 2051
       run: () => {
         document.getElementById(COMPILE_AND_RUN_BUTTON_ID)?.click();
-      }
+      },
     });
+
+    setEditor(editor);
+    setMonaco(monaco);
   };
 
   return (
-    <div style={{ height: '100%' }}>
-      <Card className={'your-code-card'} style={{ height: '100%' }}>
+    <div style={{ height: "100%" }}>
+      <Card className={"your-code-card"} style={{ height: "100%" }}>
         <CardHeader
           action={
             <div className="run-button">
@@ -50,51 +59,61 @@ const YourCode: React.FC<YourCodeProps> = (props: YourCodeProps) => {
                   variant="contained"
                   color="secondary"
                   style={{
-                    textTransform: 'none',
+                    textTransform: "none",
+                    width: 140,
                   }}
-                  size = "small"
                   onClick={() => {
                     // stop the web-worker
-                    queryCache.cancelQueries(['compiler']);
+                    queryCache.cancelQueries(["compiler"]);
                     // set result to initial state
-                    queryCache.setQueryData(['compiler', source], (data) => ({
+                    queryCache.setQueryData(["compiler", source], (data) => ({
                       outputItem: [],
-                      outputString: ''
+                      outputString: "",
                     }));
-                  }}>
+                  }}
+                >
                   Stop
                 </Button>
               ) : (
                 <Button
                   id={COMPILE_AND_RUN_BUTTON_ID}
                   variant="contained"
                   color="primary"
-                  size = "small"
                   onClick={(e) => handleCompileAndRun(e)}
                   style={{
-                    textTransform: 'none'
-                  }}>
-                  Run
+                    textTransform: "none",
+                  }}
+                >
+                  Compile and run
                 </Button>
               )}
             </div>
           }
+          title="Your code:"
         />
 
         <CardContent>
-          <div
-            style={{
-              height: 'calc(100vh - 174px)'
-            }}>
-            <ControlledEditor
-              language="javascript"
-              value={source}
-              onChange={handleUploadSource}
-              options={options}
-              editorDidMount={handleEditorDidMount}
-              
-            />
-          </div>
+          <ResizeObserver
+            onResize={(width, height) => {
+              if (editor) {
+                editor.layout();
+              }
+            }}
+          >
+            <div
+              style={{
+                height: "calc(100vh - 174px)",
+              }}
+            >
+              <MonacoEditor
+                language="javascript"
+                value={source}
+                onChange={handleUploadSource}
+                options={options}
+                editorDidMount={EditorDidMountHandle}
+              />
+            </div>
+          </ResizeObserver>
         </CardContent>
       </Card>
     </div>
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) =>`
`14`	`14`	`width: '50%',`
`15`	`15`	`fontSize: '0.875rem',`
`16`	`16`	`fontWeight: 500,`
`17`		`- color: 'white',`
	`17`	`+ color: 'white'`
`18`	`18`	`}`
`19`	`19`	`})`
`20`	`20`	`);`