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
2019-09-26 15:22:56 -07:00 · 2019-09-26 15:22:56 -07:00 · 52af2c994c
parent 1704f9ab55
commit 52af2c994c
9 changed files with 7803 additions and 22044 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,29 +1,10 @@
 {
  "presets": [
-    "react-app",
-    [
-      "env",
-      {
-        "targets": {
-          "browsers": ["last 2 versions", "safari >= 7"]
-        },
-        "useBuiltIns": "usage"
-      }
-    ],
-    "stage-0"
+    "@babel/preset-env",
+    "@babel/preset-react",
  ],
-  "plugins": ["emotion"],
-  "env": {
-    "test": {
-      "presets": [
-        [
-          "env",
-          {
-            "modules": false
-          }
-        ],
-        "stage-0"
-      ]
-    }
-  }
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "emotion"
+  ]
 }
--- a/README.md
+++ b/README.md
--- a/config-overrides.js
+++ b/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;
-};
--- a/craco.config.js
+++ b/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"
+        }
+      }
+    }
+  };
+};
--- a/craco/worker-loader.js
+++ b/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;
+  }
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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": "^0.8.0",
+    "worker-loader": "^2.0.0",
    "xtend": "^4.0.1"
  },
  "scripts": {
-    "start": "PORT=3001 env-cmd .env.development react-app-rewired start",
-    "build": "react-app-rewired build",
-    "build:staging": "env-cmd .env.staging react-app-rewired build",
-    "test": "react-app-rewired test --env=jsdom",
-    "test-ci": "CI=true react-app-rewired test --env=jsdom",
+    "start": "PORT=3001 env-cmd .env.development craco start",
+    "build": "craco build",
+    "build:staging": "env-cmd .env.staging craco build",
+    "test": "craco test --env=jsdom",
+    "test-ci": "CI=true craco test --env=jsdom",
    "netlify-sass": "node-sass src/index.scss > src/index.css",
-    "sass":
-      "node-sass src/index.scss -o src && node-sass -w src/index.scss -o src",
+    "sass": "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"
+    ]
  }
 }
--- a/src/components/HLS.js
+++ b/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 = {
--- a/yarn.lock
+++ b/yarn.lock