Upgrade to react-scripts 3 and craco (#23)

* Upgrade to react-scripts 3 and craco

* Update readme

* readme

* readme

* Clean up stuff

* You dont need to install your own sasser anymore

* Fix craco url

* Clean up more stuff

* Remove old hls library, not using specific version with webpack support

.babelrc

@@ -1,29 +1,10 @@
 {
   "presets": [
-    "react-app",
+    "@babel/preset-env",
-    [
+    "@babel/preset-react",
-      "env",
-      {
-        "targets": {
-          "browsers": ["last 2 versions", "safari >= 7"]
-        },
-        "useBuiltIns": "usage"
-      }
-    ],
-    "stage-0"
   ],
-  "plugins": ["emotion"],
+  "plugins": [
-  "env": {
+    "@babel/plugin-proposal-class-properties",
-    "test": {
+    "emotion"
-      "presets": [
+  ]
-        [
-          "env",
-          {
-            "modules": false
-          }
-        ],
-        "stage-0"
-      ]
-    }
-  }
 }

config-overrides.js

@@ -1,45 +0,0 @@
-const path = require("path");
-const fs = require("fs");
-var SentryPlugin = require("webpack-sentry-plugin");
-
-module.exports = function override(config, env) {
-  config.module.rules.push({
-    test: /worker\.js$/,
-    include: path.resolve("./src"),
-    use: [{ loader: "worker-loader" }, { loader: "babel-loader" }]
-  });
-
-  config.module.rules.push({
-    test: /\.(js|jsx)$/,
-    include: [
-      path.resolve("node_modules/streamsaver"),
-      path.resolve("node_modules/vega-lite"),
-      path.resolve("node_modules/vega"),
-      path.resolve("node_modules/d3-scale"),
-      path.resolve("node_modules/d3-delaunay"),
-      path.resolve("node_modules/d3-force"),
-      path.resolve("node_modules/delaunator")
-    ],
-    use: { loader: "babel-loader" }
-  });
-
-  if (env === "production") {
-    const COMMIT = process.env.TRAVIS_COMMIT || process.env.COMMIT_REF;
-    const tagName = process.env.TRAVIS_TAG;
-    // only use sentry on production builds
-    if (tagName && tagName.length) {
-      config.plugins.push(
-        new SentryPlugin({
-          organisation: "commaai",
-          project: "cabana",
-          apiKey: process.env.SENTRY_API_KEY,
-          release: function(hash) {
-            return COMMIT + ";" + hash; // webpack build hash
-          }
-        })
-      );
-    }
-  }
-
-  return config;
-};

craco.config.js

@@ -0,0 +1,23 @@
+const BabelRcPlugin = require("@jackwilsdon/craco-use-babelrc");
+const BabelLoader = require("craco-babel-loader");
+const WorkerLoaderPlugin = require("./craco/worker-loader");
+
+module.exports = function({ env }) {
+  return {
+    plugins: [
+      {
+        plugin: BabelRcPlugin
+      },
+      {
+        plugin: WorkerLoaderPlugin
+      }
+    ],
+    webpack: {
+      configure: {
+        output: {
+          globalObject: "this"
+        }
+      }
+    }
+  };
+};

craco/worker-loader.js

@@ -0,0 +1,20 @@
+const { loaderByName, addBeforeLoader } = require("@craco/craco");
+
+module.exports = {
+  overrideWebpackConfig: ({ webpackConfig, context: { env } }) => {
+    const workerLoader = {
+      test: /\.worker\.js/,
+      use: [
+        {
+          loader: "worker-loader",
+          options: {
+            inline: true,
+            fallback: false
+          }
+        }
+      ]
+    };
+    addBeforeLoader(webpackConfig, loaderByName("babel-loader"), workerLoader);
+    return webpackConfig;
+  }
+};

package.json

@@ -5,19 +5,19 @@
   "homepage": "https://community.comma.ai/cabana",
   "dependencies": {
     "@commaai/comma-api": "1.1.6",
-    "@commaai/hls.js": "^0.12.2",
     "@commaai/log_reader": "^0.3.1",
     "@commaai/my-comma-auth": "^1.1.0",
     "@commaai/pandajs": "^0.3.4",
+    "@craco/craco": "^5.5.0",
+    "@jackwilsdon/craco-use-babelrc": "^1.0.0",
     "ap": "^0.2.0",
     "aphrodite": "^1.2.1",
-    "babel-loader": "^7.1.4",
-    "babel-preset-stage-0": "^6.24.1",
     "base64-inline-loader": "^1.1.0",
     "classnames": "^2.2.5",
     "clipboard": "^1.7.1",
     "config-request": "^0.5.1",
     "core-js": "^2.4.1",
+    "craco-babel-loader": "^0.1.4",
     "create-react-class": "^15.5.3",
     "cuint": "^0.2.2",
     "element-closest": "^2.0.2",
@@ -29,10 +29,11 @@
     "github-api": "^3.0.0",
     "global": "^4.3.2",
     "hls": "0.0.1",
+    "hls.js": "0.12.3-canary.4258",
     "husky": "^0.14.3",
     "int64-buffer": "^0.1.9",
     "js-cookie": "^2.1.4",
-    "lint-staged": "^6.0.0",
+    "lint-staged": "^9.4.0",
     "localforage": "^1.7.1",
     "moment": "^2.18.1",
     "node-sass": "^4.12.0",
@@ -40,13 +41,12 @@
     "prop-types": "^15.5.10",
     "raven-js": "^3.16.0",
     "react": "^16.2.0",
-    "react-app-rewired": "^1.3.8",
     "react-dom": "^16.2.0",
     "react-emotion": "^8.0.12",
     "react-infinite": "^0.11.0",
     "react-list": "^0.8.6",
     "react-measure": "^2.0.2",
-    "react-scripts": "^1.1.2",
+    "react-scripts": "^3.1.2",
     "react-test-renderer": "^16.2.0",
     "react-vega": "^7.0.0",
     "react-visibility-sensor": "^3.10.1",
@@ -60,7 +60,11 @@
     "vega-tooltip": "^0.4.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-regenerator": "^7.4.5",
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.0.0",
+    "babel-jest": "^24.9.0",
     "connect-history-api-fallback": "1.3.0",
     "cross-spawn": "4.0.2",
     "detect-port": "1.1.0",
@@ -71,19 +75,17 @@
     "json-loader": "0.5.4",
     "url-toolkit": "^2.1.1",
     "webpack-sentry-plugin": "^1.14.0",
-    "webworkify": "^1.4.0",
+    "worker-loader": "^2.0.0",
-    "worker-loader": "^0.8.0",
     "xtend": "^4.0.1"
   },
   "scripts": {
-    "start": "PORT=3001 env-cmd .env.development react-app-rewired start",
+    "start": "PORT=3001 env-cmd .env.development craco start",
-    "build": "react-app-rewired build",
+    "build": "craco build",
-    "build:staging": "env-cmd .env.staging react-app-rewired build",
+    "build:staging": "env-cmd .env.staging craco build",
-    "test": "react-app-rewired test --env=jsdom",
+    "test": "craco test --env=jsdom",
-    "test-ci": "CI=true react-app-rewired test --env=jsdom",
+    "test-ci": "CI=true craco test --env=jsdom",
     "netlify-sass": "node-sass src/index.scss > src/index.css",
-    "sass":
+    "sass": "node-sass src/index.scss -o src && node-sass -w src/index.scss -o src",
-      "node-sass src/index.scss -o src && node-sass -w src/index.scss -o src",
     "precommit": "lint-staged",
     "deploy": "npm run build && gh-pages -d build"
   },
@@ -96,7 +98,18 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "^@commaai/(.*)$": "<rootDir>/node_modules/@commaai/$1/dist/index.js"
+      "^@commaai/pandajs$": "<rootDir>/node_modules/@commaai/pandajs/lib/index.js",
+      "^@commaai/hls.js$": "<rootDir>/node_modules/@commaai/hls.js/dist/hls.js",
+      "^@commaai/(.*comma.*)$": "<rootDir>/node_modules/@commaai/$1/dist/index.js",
+      "^capnp-split$": "<rootDir>/node_modules/capnp-split/dist/index.js"
     }
+  },
+  "browserslist": {
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/components/HLS.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import Hls from "@commaai/hls.js";
+import Hls from "hls.js";
 
 export default class HLS extends Component {
   static propTypes = {