Bringing things more in line with Sentry

getsentry · Nov 12, 2019 · 32a25ac · 32a25ac
1 parent 6c991ed
commit 32a25ac
Show file tree

Hide file tree

Showing 14 changed files with 395 additions and 1,476 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -2,11 +2,48 @@ module.exports = function(api) {
   api.cache.using(() => process.env.NODE_ENV === 'development');
 
   return {
-    presets: ['@babel/preset-env', '@babel/react'],
+    presets: ['@babel/react', '@babel/env'],
     plugins: [
-      '@babel/plugin-proposal-class-properties',
+      'emotion',
+      'lodash',
+      'babel-plugin-idx',
+      '@babel/plugin-syntax-dynamic-import',
+      '@babel/plugin-proposal-object-rest-spread',
       '@babel/plugin-transform-runtime',
-      'babel-plugin-idx'
-    ]
+      // NOTE: The order of the decorator and class-property plugins is important
+      // here. Decorators must be processed first before class properties, see:
+      // https://babeljs.io/docs/en/plugins#plugin-ordering
+      ['@babel/plugin-proposal-decorators', {legacy: true}],
+      ['@babel/plugin-proposal-class-properties', {loose: true}]
+    ],
+    env: {
+      production: {
+        plugins: [
+          [
+            'transform-react-remove-prop-types',
+            {
+              mode: 'remove', // remove from bundle
+              removeImport: true, // removes `prop-types` import statements
+              classNameMatchers: [
+                'SelectField',
+                'FormField',
+                'AsyncComponent',
+                'AsyncView'
+              ],
+              additionalLibraries: [/app\/sentryTypes$/]
+            }
+          ]
+        ]
+      },
+      development: {
+        plugins: [
+          ['emotion', {sourceMap: true, autoLabel: true}],
+          '@babel/plugin-transform-react-jsx-source'
+        ]
+      },
+      test: {
+        plugins: [['emotion', {autoLabel: true}], 'dynamic-import-node']
+      }
+    }
   };
 };
diff --git a/package.json b/package.json
@@ -3,10 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.7.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "browserslist": "^4.7.2",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
@@ -16,12 +14,10 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.16.0",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "jest-junit": "^9.0.0",
     "mockdate": "^2.0.5",
     "prettier": "^1.19.1",
-    "react-dev-utils": "^9.1.0",
     "react-test-renderer": "^16.11.0",
     "redux-mock-store": "^1.5.3",
     "sinon": "^7.5.0",
@@ -30,6 +26,8 @@
   "dependencies": {
     "@babel/core": "^7.7.2",
     "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-decorators": "^7.7.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.7.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
@@ -40,11 +38,16 @@
     "@sentry/browser": "^5.8.0",
     "@sentry/integrations": "^5.8.0",
     "babel-loader": "^8.0.6",
+    "babel-plugin-emotion": "^10.0.23",
     "babel-plugin-idx": "^2.4.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "browserslist": "^4.7.2",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "chalk": "1.1.3",
     "chart.js": "^2.9.2",
     "classnames": "^2.2.6",
+    "core-js": "^3.4.1",
     "dompurify": "^2.0.7",
     "dotenv": "8.2.0",
     "emotion-theming": "^10.0.19",
@@ -74,6 +77,7 @@
     "react-transition-group": "^4.3.0",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
+    "regenerator-runtime": "^0.13.3",
     "sw-precache-webpack-plugin": "^0.11.5",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
@@ -118,11 +122,11 @@
     "testEnvironment": "node",
     "testURL": "http://localhost",
     "transform": {
-      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
-      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+      "^.+\\.[jt]sx?$": "<rootDir>/node_modules/babel-jest",
+      "^(?!.*\\.([jt]sx?|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
-      "<rootDir>/(node_modules)/?!(react-syntax-highlighter)"
+      "<rootDir>/(node_modules)/"
     ]
   },
   "jest-junit": {

diff --git a/webapp/components/SyntaxHighlight.jsx b/webapp/components/SyntaxHighlight.jsx
@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
-import {LightAsync as SyntaxHighlighter} from 'react-syntax-highlighter';
-import {atomOneLight as highlightStyle} from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import {LightAsync as SyntaxHighlighter} from 'react-syntax-highlighter/dist/cjs';
+import {atomOneLight as highlightStyle} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 
 const mapping = {
   py: 'python',