fix: fix build bug

Author: akitaSummer

packages/hedgehog-core/package.json

@@ -33,7 +33,7 @@
         "mathjs": "^7.1.0",
         "nerdamer": "^1.1.5",
         "webpack": "^5.21.2",
-        "webpack-cli": "^4.5.0"
+        "webpack-cli": "^4.5.0",
         "sync-fetch": "^0.3.0"
     },
     "devDependencies": {

packages/hedgehog-lab/.eslintrc

@@ -1,25 +1,13 @@
 {
-  "plugins": ["prettier", "@typescript-eslint"],
+  "plugins": ["@typescript-eslint"],
   "parser":  "@typescript-eslint/parser",
   "extends": [
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "printWidth": 100,
-        "tabWidth": 2,
-        "semi": true,
-        "trailingComma": "none",
-        "singleQuote": true,
-        "bracketSpacing": true,
-        "jsxBracketSameLine": true,
-        "alwaysParens": "avoid",
-        "@typescript-eslint/ban-ts-ignore": "off"
-      }
-    ]
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["off"]
   },
   "settings": {
     "react": {

packages/hedgehog-lab/config-overrides.js

@@ -4,36 +4,46 @@ const {
   getBabelLoader,
   addWebpackPlugin,
   addWebpackModuleRule,
+  useEslintRc,
 } = require("customize-cra");
 const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 const { ESBuildPlugin } = require("esbuild-loader");
+const path = require("path");
 
 module.exports = (config, env) => {
   const prod = config.mode === "production";
   const babelLoader = getBabelLoader(config);
-  console.log(prod, config.mode);
+
   return override(
-    !prod &&
-      addWebpackModuleRule({
-        test: /.tsx?$/,
-        use: [
-          {
-            loader: "esbuild-loader",
-            options: { loader: "tsx", target: "es2015" },
+    addWebpackModuleRule({
+      test: /.tsx?$/,
+      use: [
+        {
+          loader: "esbuild-loader",
+          options: {
+            loader: "tsx",
+            target: "es2015",
+            jsxFactory: "React.createElement",
+            jsxFragment: "React.Fragment",
           },
-        ],
-      }),
-
-    !prod &&
-      addWebpackModuleRule({
-        test: /.jsx?$/,
-        use: [
-          {
-            loader: "esbuild-loader",
-            options: { loader: "jsx", target: "es2015" },
+        },
+      ],
+    }),
+    useEslintRc(path.resolve(__dirname, "./.eslintrc")),
+    addWebpackModuleRule({
+      test: /.jsx?$/,
+      use: [
+        {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            target: "es2015",
+            jsxFactory: "React.createElement",
+            jsxFragment: "React.Fragment",
           },
-        ],
-      }),
+        },
+      ],
+    }),
     // You can choose to just use worker-loader! instead if you want
     addWebpackModuleRule({
       test: /\.worker\.[jt]sx?$/,
@@ -42,7 +52,7 @@ module.exports = (config, env) => {
         { loader: babelLoader.loader, options: babelLoader.options },
       ],
     }),
-    !prod && addWebpackPlugin(new ESBuildPlugin()),
+    addWebpackPlugin(new ESBuildPlugin()),
     !prod && addBabelPlugin("react-refresh/babel"),
     !prod && addWebpackPlugin(new ReactRefreshPlugin())
   )(config, env);

packages/hedgehog-lab/src/HedgehogLab.tsx

@@ -73,7 +73,7 @@ const HedgehogLab: React.FC = () => {
     const obj = Qs.parse(params, { ignoreQueryPrefix: true });
     yourUrl = obj.your_url ? (obj.your_url as string) : null;
     autoRun = obj.auto_run === 'true';
-    code = obj.code? (obj.code as string): null;
+    code = obj.code ? (obj.code as string) : null;
     showCode = obj.show_code === 'true';
   }
 
@@ -89,7 +89,7 @@ const HedgehogLab: React.FC = () => {
     onSuccess: (result: OutputResult) => {
       setResult(result);
     },
-    onError: (lastError:any) => {
+    onError: (lastError: any) => {
       // It's necessary to output all exception messages to user at output textbox,
       // including execution runtime exception and compiling exception -Lidang
       console.log('Hedgehog Lab error: \n' + lastError.toString());
@@ -164,8 +164,8 @@ const HedgehogLab: React.FC = () => {
           siderBarOpen={siderBarOpen}
           setOpen={setOpen}
           lgBreakpointMatches={lgBreakpointMatches}
-          switchShowCodes = {codeEditorOpen}
-          setShowCode = {setCodeEditorOpen}
+          switchShowCodes={codeEditorOpen}
+          setShowCode={setCodeEditorOpen}
         />
 
         <SideBar

packages/hedgehog-lab/src/components/Header/Header.tsx

@@ -12,7 +12,7 @@ interface HeaderProps {
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   lgBreakpointMatches: boolean;
   switchShowCodes: boolean;
-  setShowCode:   React.Dispatch<React.SetStateAction<boolean>>;
+  setShowCode: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -33,9 +33,9 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
     setOpen(!siderBarOpen);
   };
 
-  const handleShowOrHideCodes = () =>{
+  const handleShowOrHideCodes = () => {
     setShowCode(!switchShowCodes);
-  }
+  };
 
   /*todo: add show code
   
@@ -48,7 +48,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
             />
           </FormGroup>
 
-  */         
+  */
 
   return (
     <div>
@@ -63,13 +63,13 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
             {siderBarOpen ? (
               <ArrowBackOutlinedIcon style={{ fontSize: '1.25rem' }} />
             ) : (
-                // <img
-                //   src={process.env.PUBLIC_URL + '/cat.png'}
-                //   style={{ height: '1.25rem' }}
-                //   alt="Hedgehog Lab Logo"
-                // />
-                <MenuIcon style={{ fontSize: '1.25rem' }} />
-              )}
+              // <img
+              //   src={process.env.PUBLIC_URL + '/cat.png'}
+              //   style={{ height: '1.25rem' }}
+              //   alt="Hedgehog Lab Logo"
+              // />
+              <MenuIcon style={{ fontSize: '1.25rem' }} />
+            )}
           </IconButton>
 
           <Typography
@@ -82,7 +82,6 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
             Hedgehog Lab
           </Typography>
 
-
           <Button
             color="inherit"
             style={{ textTransform: 'none', height: 36 }}

packages/hedgehog-lab/src/components/Results/Results.tsx

@@ -51,7 +51,7 @@ const Results: React.FC<ResultsProps> = (props: ResultsProps) => {
           </div>
         ) : (
           <React.Fragment>
-            <CardHeader/>
+            <CardHeader />
 
             <Divider />
 

packages/hedgehog-lab/src/components/YourCode/YourCode.tsx

@@ -1,11 +1,11 @@
-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";
+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;
@@ -16,19 +16,16 @@ 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 [editor, setEditor] = useState<monacoEditor.editor.IStandaloneCodeEditor | null>(null);
   const [monaco, setMonaco] = useState<typeof monacoEditor | null>(null);
 
   const handleUploadSource = (v: string) => {
     setSource(v as string);
   };
 
   const options = {
-    wordWrap: "on" as const,
-    scrollBeyondLastLine: false,
+    wordWrap: 'on' as const,
+    scrollBeyondLastLine: false
   };
 
   const EditorDidMountHandle = (
@@ -37,20 +34,20 @@ const YourCode: React.FC<YourCodeProps> = (props: YourCodeProps) => {
   ) => {
     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">
@@ -59,19 +56,18 @@ const YourCode: React.FC<YourCodeProps> = (props: YourCodeProps) => {
                   variant="contained"
                   color="secondary"
                   style={{
-                    textTransform: "none",
-                    width: 140,
+                    textTransform: 'none',
+                    width: 140
                   }}
                   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>
               ) : (
@@ -81,9 +77,8 @@ const YourCode: React.FC<YourCodeProps> = (props: YourCodeProps) => {
                   color="primary"
                   onClick={(e) => handleCompileAndRun(e)}
                   style={{
-                    textTransform: "none",
-                  }}
-                >
+                    textTransform: 'none'
+                  }}>
                   Compile and run
                 </Button>
               )}
@@ -98,13 +93,11 @@ const YourCode: React.FC<YourCodeProps> = (props: YourCodeProps) => {
               if (editor) {
                 editor.layout();
               }
-            }}
-          >
+            }}>
             <div
               style={{
-                height: "calc(100vh - 174px)",
-              }}
-            >
+                height: 'calc(100vh - 174px)'
+              }}>
               <MonacoEditor
                 language="javascript"
                 value={source}

packages/hedgehog-lab/src/tutorials.ts

@@ -242,7 +242,6 @@ This document is created and maintained by Hedgehog Lab Community. The markdown
 
 `;
 
-
 const moduleSource = `
 // import any HHS file on the web from URL
 *import https://gist.githubusercontent.com/lidangzzz/86c78163bf7838220224530d6e36aec9/raw/da89c75d4b6671dc0936240a62d483bf67e2b9ef/fibonacci.hs
@@ -291,6 +290,6 @@ export const tutorials = [
   },
   {
     description: 'Module',
-    source: moduleSource,
+    source: moduleSource
   }
 ];