x1unix · x1unix · Feb 7, 2022 · Feb 7, 2022 · Feb 7, 2022 · Feb 7, 2022
diff --git a/.editorconfig b/.editorconfig
@@ -1,7 +1,7 @@
 # https://editorconfig.org
 root = true
 
-[*.{js,ts,css,less,scss}]
+[*.{js,ts,tsx,css,less,scss}]
 charset = utf-8
 end_of_line = lf
 indent_size = 2

diff --git a/Makefile b/Makefile
@@ -1,3 +1,7 @@
+GO ?= go
+GOROOT ?= $(shell go env GOROOT)
+GOPATH ?= $(shell go env GOPATH)
+
 PKG := ./cmd/playground
 UI := ./web
 TARGET := ./target
@@ -13,7 +17,7 @@ include docker.mk
 
 .PHONY:run
 run:
-	@go run $(PKG) -f ./data/packages.json -debug=$(DEBUG) -addr $(LISTEN_ADDR)
+	@GOROOT=$(GOROOT) $(GO) run $(PKG) -f ./data/packages.json -debug=$(DEBUG) -addr $(LISTEN_ADDR)
 
 .PHONY:ui
 ui:

diff --git a/web/craco.config.js b/web/craco.config.js
@@ -1,5 +1,6 @@
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const CracoAlias = require("craco-alias");
 
 module.exports = {
   webpack: {
@@ -18,8 +19,22 @@ module.exports = {
           allowAsyncCycles: false,
           // set the current working directory for displaying module paths
           cwd: process.cwd(),
-        })
+        }),
       ]
     }
-  }
+  },
+  plugins: [
+    {
+       plugin: CracoAlias,
+       options: {
+          source: "tsconfig",
+          // baseUrl SHOULD be specified
+          // plugin does not take it from tsconfig
+          baseUrl: "./src",
+          /* tsConfigPath should point to the file where "baseUrl" and "paths"
+          are specified*/
+          tsConfigPath: "./tsconfig.paths.json"
+       }
+    }
+ ]
 };
diff --git a/web/package.json b/web/package.json
@@ -13,10 +13,12 @@
     "axios": "^0.21.1",
     "circular-dependency-plugin": "^5.2.2",
     "connected-react-router": "^6.9.2",
+    "craco-alias": "^3.0.1",
     "file-saver": "^2.0.5",
     "monaco-editor": "^0.32.1",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "office-ui-fabric-react": "^7.82.1",
+    "re-resizable": "^6.9.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-monaco-editor": "^0.47.0",
@@ -26,6 +28,7 @@
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
     "typescript": "^4.5.5",
+    "util": "^0.12.4",
     "uuid": "^3.4.0",
     "web-vitals": "^2.1.4"
   },

diff --git a/web/public/index.html b/web/public/index.html
@@ -1,51 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="x-gtag" content="%REACT_APP_GTAG%" />
-    <meta
-      name="description"
-      content="Better Go Playground with syntax highlight support"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Better Go Playground</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script>
-      (function(d){
-        var e = d.querySelector('meta[name=x-gtag]');
-        if (!e || !e.content) return;
-        var s = d.createElement('script');
-        s.async = true; s.src = "https://www.googletagmanager.com/gtag/js?id=" + e.content;
-        s.onload = function() {
-          console.log('GA load done');
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="x-gtag" content="%REACT_APP_GTAG%" />
+  <meta name="description" content="Better Go Playground with syntax highlight support" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <title>Better Go Playground</title>
+</head>
 
-          gtag('config', e.content);
-        };
-        d.body.appendChild(s);
-      })(document)
-    </script>
-  </body>
-</html>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script>
+    (function (d) {
+      var e = d.querySelector('meta[name=x-gtag]');
+      if (!e || !e.content) return;
+      var s = d.createElement('script');
+      s.async = true; s.src = "https://www.googletagmanager.com/gtag/js?id=" + e.content;
+      s.onload = function () {
+        console.log('GA load done');
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', e.content);
+      };
+      d.body.appendChild(s);
+    })(document)
+  </script>
+</body>
+
+</html>
diff --git a/web/src/App.css b/web/src/App.css
@@ -1,10 +1,4 @@
 .App {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
     display: flex;
     flex-direction: column;
-    /*background: #ccc;*/
-}
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import {Fabric} from 'office-ui-fabric-react/lib/Fabric';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { ConnectedRouter } from 'connected-react-router';
-import {Switch, Route} from "react-router-dom";
+import { Switch, Route } from "react-router-dom";
 
 import { configureStore, createGoConsoleAdapter } from './store';
 import { history } from './store/configure';
 import { bootstrapGo } from './services/go';
-import Playground from './Playground';
+import Playground from '~/components/pages/Playground';
+import config from './services/config';
 import './App.css';
-import config from './services/config'
 
 // Configure store and import config from localStorage
 const store = configureStore();
@@ -21,16 +21,16 @@ bootstrapGo(createGoConsoleAdapter(a => store.dispatch(a)));
 function App() {
   return (
     <Provider store={store}>
-        <ConnectedRouter history={history}>
-            <Fabric className="App">
-                <Switch>
-                    <Route
-                        path="/(snippet)?/:snippetID?"
-                        component={Playground}
-                    />
-                </Switch>
-            </Fabric>
-        </ConnectedRouter>
+      <ConnectedRouter history={history}>
+        <Fabric className="App">
+          <Switch>
+            <Route
+              path="/(snippet)?/:snippetID?"
+              component={Playground}
+            />
+          </Switch>
+        </Fabric>
+      </ConnectedRouter>
     </Provider>
   );
 }