feat: polyfill support (#173)

* feat: polyfill support

* chore: comment test for redirect_uri

* chore: remove @babel/plugin-transform-runtime

* fix: breaking tests

* chore: exclude transforms that make code slower

* chore: update browser list for prod

* chore: remove core-js and polyfill support

Co-authored-by: Praveen Kumar <praveenkumar@Praveens-MacBook-Pro.local>

Author: praveenkumar1798

app/app.js

@@ -5,7 +5,6 @@
  * code.
  */
 
-// Needed for redux-saga es6 generator support
 // Import all the third party stuff
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -22,7 +21,7 @@ import 'file-loader?name=.htaccess!./.htaccess';
 
 const container = document.getElementById('app');
 const root = createRoot(container);
-const render = (messages) => {
+const render = () => {
   root.render(
     <StrictMode>
       <App />

app/containers/App/index.js

@@ -25,7 +25,7 @@ import LanguageProvider from 'containers/LanguageProvider';
 import ErrorBoundary from '@app/components/ErrorBoundary/index';
 import { translationMessages } from '@app/i18n';
 import { Provider } from 'react-redux';
-import history from '@utils/history'
+import history from '@utils/history';
 import configureStore from '@app/configureStore';
 import If from '@app/components/If/index';
 
@@ -34,14 +34,16 @@ const theme = {
   bg: colors.secondary
 };
 
-export function App({ location }) {
+export function App() {
   const [store, setStore] = useState(null);
   const [persistor, setPersistor] = useState(null);
+
+  const { location } = history;
   useEffect(() => {
-    // if (location.search.includes('?redirect_uri=')) {
-    //   const routeToReplace = new URLSearchParams(location.search).get('redirect_uri');
-    //   history.replace(routeToReplace);
-    // }
+    if (location.search.includes('?redirect_uri=')) {
+      const routeToReplace = new URLSearchParams(location.search).get('redirect_uri');
+      history.replace(routeToReplace);
+    }
     const { store: s, persistor } = configureStore({}, history);
     setStore(s);
     setPersistor(persistor);

app/containers/App/tests/index.test.js

@@ -1,23 +1,17 @@
 import React from 'react';
-import { renderProvider } from '@utils/testUtils';
 import App from '../index';
-import { BrowserRouter } from 'react-router-dom';
 import history from '@app/utils/history';
-import { waitFor } from '@testing-library/react';
+import { waitFor, render } from '@testing-library/react';
 
 describe('<App /> container tests', () => {
   it('should render and match the snapshot', () => {
-    const { container } = renderProvider(
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    );
+    const { container } = render(<App />);
     expect(container).toMatchSnapshot();
   });
 
   it('should redirect to redirect_uri query params if given in url', async () => {
     history.location.search = '?redirect_uri=/repos';
-    renderProvider(<App />, history);
+    render(<App />);
     await waitFor(() => expect(history.location.pathname).toBe('/repos'));
   });
 });

babel.config.js

@@ -3,12 +3,7 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        targets: {
-          browsers: ['> 0.25%, not dead']
-        },
-        modules: false,
-        corejs: '3.6.5',
-        useBuiltIns: 'entry'
+        modules: false
       }
     ],
     '@babel/preset-react'
@@ -19,8 +14,7 @@ module.exports = {
     '@babel/plugin-syntax-optional-chaining',
     'styled-components',
     '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-transform-runtime' // Reduces code duplication
+    '@babel/plugin-syntax-dynamic-import'
   ],
   env: {
     production: {

jest.setup.js

@@ -33,3 +33,12 @@ Object.defineProperty(window, 'matchMedia', {
     };
   })
 });
+
+jest.mock('redux-persist/integration/react', () => ({
+  PersistGate: (props) => props.children
+}));
+
+jest.mock('redux-persist', () => ({
+  ...jest.requireActual('redux-persist'),
+  persistReducer: jest.fn().mockImplementation((config, reducer) => reducer)
+}));

package.json

@@ -66,11 +66,13 @@
     "generate": "react-generate",
     "ls-uat-branches": "node ./internals/scripts/ls-branches.js"
   },
-  "browserslist": [
-    "last 2 versions",
-    "> 1%",
-    "IE 10"
-  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ]
+  },
   "lint-staged": {
     "*.js": [
       "npm run lint:eslint:fix",
@@ -88,7 +90,6 @@
     "apisauce": "2.1.1",
     "chalk": "4.1.1",
     "compression": "1.7.4",
-    "core-js": "3.6.5",
     "cross-env": "7.0.3",
     "dotenv": "10.0.0",
     "express": "4.16.4",
@@ -129,7 +130,6 @@
     "@babel/plugin-transform-modules-commonjs": "7.14.5",
     "@babel/plugin-transform-react-constant-elements": "7.14.5",
     "@babel/plugin-transform-react-inline-elements": "7.14.5",
-    "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/register": "7.14.5",

yarn.lock

@@ -2414,18 +2414,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-runtime@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz#9d2a9dbf4e12644d6f46e5e75bfbf02b5d6e9194"
-  integrity sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    semver "^6.3.0"
-
 "@babel/plugin-transform-shorthand-properties@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz#97f13855f1409338d8cadcbaca670ad79e091a58"
@@ -7929,11 +7917,6 @@ core-js-pure@^3.15.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.15.1.tgz#8356f6576fa2aa8e54ca6fe02620968ff010eed7"
   integrity sha512-OZuWHDlYcIda8sJLY4Ec6nWq2hRjlyCqCZ+jCflyleMkVt3tPedDVErvHslyS2nbO+SlBFMSBJYvtLMwxnrzjA==
 
-core-js@3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
-  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
-
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"