Update control panel to create-react-app

src/Tgstation.Server.Host/ClientApp/package.json

@@ -1,11 +1,12 @@
 {
   "private": true,
   "dependencies": {
-    "react-dom": "^16.5.2",
-    "tgstation-server-control-panel": "^0.1.5"
+    "react-dom": "^16.7.0",
+    "tgstation-server-control-panel": "0.1.6"
   },
   "scripts": {
-    "build": "rimraf build && react-scripts-ts build && cp-cli node_modules/tgstation-server-control-panel/build/public/ build/ && cp-cli ../../../build/tgs.ico build/favicon.ico && minify-json build && rimraf ../wwwroot && move-cli build ../wwwroot"
+    "build": "npm run clean && tslint -p tsconfig.json && react-scripts build && cp-cli node_modules/tgstation-server-control-panel/build/public/ build/ && cp-cli ../../../build/tgs.ico build/favicon.ico && minify-json build && rimraf ../wwwroot && move-cli build ../wwwroot",
+    "clean": "rimraf build"
   },
   "devDependencies": {
     "@types/node": "^10.12.0",
@@ -13,8 +14,16 @@
     "cp-cli": "^1.1.2",
     "minify-json": "^1.0.0",
     "move-cli": "^1.2.0",
-    "react-scripts-ts": "^3.1.0",
+    "react-scripts": "^2.1.3",
     "rimraf": "^2.6.2",
+    "tslint": "^5.12.0",
+    "tslint-react": "^3.6.0",
     "typescript": "^3.1.3"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/Tgstation.Server.Host/ClientApp/src/index.tsx

@@ -1,17 +1,22 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 
-import ControlPanel from 'tgstation-server-control-panel';
+import ControlPanel from "tgstation-server-control-panel";
 
-import registerServiceWorker from './registerServiceWorker';
+import registerServiceWorker from "./registerServiceWorker";
 
-import './index.css';
+import "./index.css";
 
-const contentElement = document.getElementById('root') as HTMLElement;
-const legacyUserLanguageKey = 'userLanguage';
+const contentElement = document.getElementById("root");
+
+if (!contentElement)
+    throw new Error("Missing root div, cannot render app!");
+
+const legacyUserLanguageKey = "userLanguage";
 const userLang = navigator.language || navigator[legacyUserLanguageKey];
 const serverAddress = window.location.href;
 const controlPanel = <ControlPanel serverAddress={serverAddress} locale={userLang} />;
 
 registerServiceWorker();
+
 ReactDOM.render(controlPanel, contentElement);

src/Tgstation.Server.Host/ClientApp/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/Tgstation.Server.Host/ClientApp/src/registerServiceWorker.ts

@@ -11,9 +11,9 @@
 // This link also includes instructions on opting out of this behavior.
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    window.location.hostname === "[::1]" ||
     // 127.0.0.1/8 is considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@@ -21,7 +21,7 @@ const isLocalhost = Boolean(
 );
 
 export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(
       process.env.PUBLIC_URL!,
@@ -34,7 +34,7 @@ export default function register() {
       return;
     }
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
@@ -45,8 +45,7 @@ export default function register() {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+            "This web app is being served cache-first by a service worker. To learn more, visit https://goo.gl/SC7cgQ"
           );
         });
       } else {
@@ -65,18 +64,18 @@ function registerValidSW(swUrl: string) {
         const installingWorker = registration.installing;
         if (installingWorker) {
           installingWorker.onstatechange = () => {
-            if (installingWorker.state === 'installed') {
+            if (installingWorker.state === "installed") {
               if (navigator.serviceWorker.controller) {
                 // At this point, the old content will have been purged and
                 // the fresh content will have been added to the cache.
                 // It's the perfect time to display a 'New content is
                 // available; please refresh.' message in your web app.
-                console.log('New content is available; please refresh.');
+                console.log("New content is available; please refresh.");
               } else {
                 // At this point, everything has been precached.
                 // It's the perfect time to display a
                 // 'Content is cached for offline use.' message.
-                console.log('Content is cached for offline use.');
+                console.log("Content is cached for offline use.");
               }
             }
           };
@@ -84,7 +83,7 @@ function registerValidSW(swUrl: string) {
       };
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
+      console.error("Error during service worker registration:", error);
     });
 }
 
@@ -95,7 +94,7 @@ function checkValidServiceWorker(swUrl: string) {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
         response.status === 404 ||
-        response.headers.get('content-type')!.indexOf('javascript') === -1
+        response.headers.get("content-type")!.indexOf("javascript") === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
@@ -110,13 +109,13 @@ function checkValidServiceWorker(swUrl: string) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        "No internet connection found. App is running in offline mode."
       );
     });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
+  if ("serviceWorker" in navigator) {
     navigator.serviceWorker.ready.then(registration => {
       registration.unregister();
     });

src/Tgstation.Server.Host/ClientApp/tsconfig.json

@@ -1,15 +1,16 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "outDir": "build/dist",
     "module": "esnext",
     "target": "es5",
-    "lib": ["es6", "dom"],
+    "lib": [
+      "es6",
+      "dom"
+    ],
     "sourceMap": true,
     "allowJs": true,
-    "jsx": "react",
+    "jsx": "preserve",
     "moduleResolution": "node",
-    "rootDir": "src",
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
@@ -17,15 +18,20 @@
     "importHelpers": true,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
   },
   "exclude": [
     "node_modules",
-    "build",
-    "scripts",
-    "acceptance-tests",
-    "webpack",
-    "jest",
-    "src/setupTests.ts"
+    "build"
+  ],
+  "include": [
+    "src"
   ]
 }

src/Tgstation.Server.Host/ClientApp/tsconfig.prod.json

@@ -1,3 +0,0 @@
-{
-  "extends": "./tsconfig.json"
-}

src/Tgstation.Server.Host/ClientApp/tslint.json

@@ -1,5 +1,8 @@
 {
-  "extends": [ "tslint:recommended", "tslint-react", "tslint-config-prettier" ],
+  "extends": [
+    "tslint:recommended",
+    "tslint-react"
+  ],
   "linterOptions": {
     "exclude": [
       "config/**/*.js",
@@ -8,7 +11,41 @@
     ]
   },
   "rules": {
-    "curly": [ true, "as-needed" ],
-    "semicolon": [ true, "always" ]
+    "curly": [
+      true,
+      "as-needed"
+    ],
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "one-line": [
+      true,
+      "check-catch",
+      "check-finally",
+      "check-else",
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "double",
+      "jsx-double"
+    ],
+    "trailing-comma": [
+      true,
+      {
+        "multiline": "never",
+        "singleline": "never"
+      }
+    ],
+    "arrow-parens": [
+      true,
+      "ban-single-arg-parens"
+    ],
+    "max-line-length": [
+      true,
+      150
+    ]
   }
 }