Merge pull request #360 from EmmaRamirez/release/1.4.5

Release/1.4.5

.travis.yml

@@ -18,11 +18,11 @@ cache:
 
 script:
     #   ## print all Travis environment variables for debugging
-    - npm run start:ci &
-    - npm run cy:run
-    # after all tests finish running we need
-    # to kill all background jobs (like "npm start &")
-    - kill $(jobs -p) || true
+    # - npm run start:ci &
+    # - npm run cy:run
+    # # after all tests finish running we need
+    # # to kill all background jobs (like "npm start &")
+    # - kill $(jobs -p) || true
     - npm test
 
 after_success:

package.json

@@ -1,28 +1,28 @@
 {
   "name": "nuzlocke-generator",
-  "version": "1.4.2",
+  "version": "1.4.5",
   "description": "A tool for generating nuzlocke team pics from data",
   "main": "dist/bundle.js",
   "scripts": {
-    "test": "jest --coverage --config jest-config.json",
-    "prebuild": "rm -rf ./dist",
-    "build": "webpack --verbose",
-    "build:production": "webpack",
+    "build:production": "webpack --mode production",
     "build:watch": "webpack --watch --display-error-details",
+    "build": "webpack --mode production --progress --stats --performance-hints warning",
     "clean": "rimraf dist",
-    "pretest": "npm run lint",
-    "format": "npx prettier --config .prettierrc --write **/**/*.{ts,tsx} && npm run lint",
-    "lint": "eslint src/**/*.{ts,tsx} --fix",
-    "start": "npm run serve",
-    "serve": "webpack-serve",
-    "cy:run": "npx cypress run",
     "cy:open": "npx cypress open",
-    "serve:heroku": "npm run build:production && heroku local web",
+    "cy:run": "npx cypress run",
     "deploy": "npm run build && git push heroku master",
+    "format": "npx prettier --config .prettierrc --write **/**/*.{ts,tsx} && npm run lint",
+    "lint": "eslint src/**/*.{ts,tsx} --fix",
+    "prebuild": "rm -rf ./dist",
     "precommit": "npm run lint",
+    "prepush": "npm run build:production && git add . && git commit --no-verify -m 'chore: update build'",
+    "pretest": "npm run lint",
+    "serve:heroku": "npm run build:production && heroku local web",
     "serve:http": "npx http-server@0.12.0 --cors ./dist",
+    "serve": "webpack-serve --config webpack.config.ts",
     "start:ci": "npm start",
-    "prepush": "npm run build:production && git add . && git commit --no-verify -m 'chore: update build'"
+    "start": "npm run serve",
+    "test": "jest --coverage --config jest-config.json"
   },
   "engines": {
     "node": "13.11.0",
@@ -34,37 +34,33 @@
   "dependencies": {
     "@emmaramirez/dom-to-image": "^3.0.2",
     "@react-hook/debounce": "^3.0.0",
-    "@types/chalk": "^2.2.0",
-    "@types/color": "^3.0.0",
-    "@types/cypress": "^1.1.3",
-    "@types/deep-diff": "^1.0.0",
-    "@types/draft-js": "^0.10.40",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/mustache": "^4.0.1",
-    "@types/ramda": "^0.25.37",
-    "@types/redux": "^3.6.0",
-    "@types/uuid": "^3.4.4",
+    "@types/react-dnd-html5-backend": "^3.0.2",
+    "@types/webpack": "^4.41.24",
+    "autoprefixer": "^10.0.1",
     "babel-plugin-module-resolver": "^3.1.1",
     "color": "^3.0.0",
+    "create-react-context": "^0.3.0",
     "cypress": "^5.3.0",
     "deep-diff": "^1.0.2",
     "deep-equal": "^1.0.1",
-    "docz": "^0.8.0",
     "dotenv": "^8.2.0",
-    "draft-js": "^0.11.5",
-    "hex2dec": "^1.1.2",
-    "html-webpack-plugin": "^3.2.0",
+    "draft-js": "^0.11.7",
+    "html-webpack-plugin": "^4.5.0",
     "is-mobile": "^2.2.1",
     "jest-emotion": "^9.2.7",
+    "lodash.debounce": "^4.0.8",
+    "mini-css-extract-plugin": "^1.2.1",
     "mustache": "^4.0.1",
     "normalize.css": "^8.0.1",
+    "postcss-loader": "^4.0.4",
     "ramda": "^0.25.0",
     "react-color": "^2.17.3",
-    "react-dnd": "^5.0.0",
-    "react-dnd-html5-backend": "^5.0.1",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-infinite-scroller": "^1.2.4",
     "react-loadable-ts-transformer": "0.0.5",
     "redux-mock-store": "^1.5.3",
+    "stylis-rule-sheet": "0.0.10",
     "tailwindcss": "^1.9.1",
     "tslib": "^2.0.0",
     "tslint": "^6.1.2"
@@ -76,46 +72,57 @@
     "@blueprintjs/table": "^3.8.16",
     "@testing-library/react": "^10.4.9",
     "@types/chai": "^4.0.10",
+    "@types/chalk": "^2.2.0",
+    "@types/color": "^3.0.0",
+    "@types/cypress": "^1.1.3",
+    "@types/deep-diff": "^1.0.0",
+    "@types/draft-js": "^0.10.40",
     "@types/enzyme": "^2.8.12",
     "@types/express": "^4.11.0",
     "@types/jest": "^23.1.4",
     "@types/lodash": "^4.14.91",
+    "@types/lodash.debounce": "^4.0.6",
     "@types/mocha": "^2.2.45",
+    "@types/mustache": "^4.0.1",
     "@types/node": "^8.5.2",
     "@types/pure-render-decorator": "^0.2.28",
+    "@types/ramda": "^0.25.37",
     "@types/react": "^16.9.35",
     "@types/react-addons-css-transition-group": "^15.0.3",
     "@types/react-dom": "^16.0.7",
     "@types/react-redux": "^7.1.9",
     "@types/react-router": "^4.0.20",
     "@types/react-router-dom": "^4.2.3",
     "@types/react-router-redux": "^5.0.11",
+    "@types/redux": "^3.6.0",
     "@types/redux-logger": "^3.0.5",
+    "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^3.0.2",
     "@typescript-eslint/eslint-plugin-tslint": "^3.0.2",
     "@typescript-eslint/parser": "^3.0.2",
     "chai": "^4.1.2",
     "cheerio": "^1.0.0-rc.2",
-    "copy-webpack-plugin": "^4.5.2",
+    "copy-webpack-plugin": "^6.2.1",
     "coveralls": "^3.0.2",
-    "css-loader": "^0.28.7",
-    "dotenv-webpack": "^1.8.0",
+    "css-loader": "^5.0.0",
+    "css-minimizer-webpack-plugin": "^1.1.5",
+    "dotenv-webpack": "^5.0.0",
     "emotion": "^8.0.12",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.1.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
-    "file-loader": "^1.1.11",
+    "file-loader": "^6.2.0",
     "history": "^4.7.2",
     "husky": "^1.0.0-rc.12",
-    "imports-loader": "^0.7.1",
+    "imports-loader": "^1.2.0",
     "istanbul": "^0.4.5",
     "jest": "^26.4.2",
-    "jest-css-modules": "^1.1.0",
+    "jest-css-modules": "^2.1.0",
     "jest-enzyme": "^4.0.2",
     "localforage": "^1.5.5",
-    "mocha": "^5.2.0",
+    "mocha": "^8.2.0",
     "offline-plugin": "^5.0.5",
     "pokemon-savefile-parser": "^0.6.1",
     "prettier": "^2.0.5",
@@ -127,13 +134,13 @@
     "react-docgen-typescript": "^1.2.0",
     "react-dom": "^16.13.1",
     "react-emotion": "^9.2.6",
-    "react-hot-loader": "^3.1.3",
-    "react-loadable": "^5.4.0",
+    "react-hot-loader": "^4.13.0",
+    "react-loadable": "^5.5.0",
     "react-markdown": "^3.1.5",
     "react-polyfills": "0.0.1",
     "react-redux": "^7.2.1",
-    "react-styleguidist": "^6.1.0",
-    "react-test-renderer": "^15.6.2",
+    "react-styleguidist": "^11.1.1",
+    "react-test-renderer": "^17.0.1",
     "react-transition-group": "^2.2.1",
     "recompose": "^0.25.1",
     "redux": "^4.0.5",
@@ -143,24 +150,25 @@
     "redux-thunk": "^2.2.0",
     "reflect-metadata": "^0.1.10",
     "reselect": "^3.0.1",
-    "resolve-url-loader": "^2.3.0",
+    "resolve-url-loader": "^3.1.2",
     "rimraf": "^2.6.2",
     "rollbar": "^2.4.2",
     "rxjs": "^5.5.6",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^10.0.4",
     "serviceworker-webpack-plugin": "^0.2.3",
     "sinon": "^6.1.3",
-    "style-loader": "^0.18.2",
+    "style-loader": "^2.0.0",
     "stylus": "^0.54.5",
     "ts-jest": "^26.4.1",
-    "ts-loader": "^4.4.2",
+    "ts-loader": "^8.0.7",
     "typescript": "^3.9.2",
-    "url-loader": "^1.0.1",
+    "url-loader": "^4.1.1",
     "uuid": "^3.1.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.0.8",
-    "webpack-dashboard": "^2.0.0",
-    "webpack-serve": "^2.0.3",
-    "workbox-webpack-plugin": "^5.1.3"
+    "webpack": "^5.3.2",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^4.1.0",
+    "webpack-dashboard": "^3.2.1",
+    "webpack-serve": "^3.2.0",
+    "workbox-webpack-plugin": "^5.1.4"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

postcss.config.ts

@@ -1 +1,4 @@
-module.exports = { plugins: [require('autoprefixer')] };
+module.exports = { plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+] };

src/components/App/App.tsx

@@ -1,20 +1,17 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 
-import Loadable from 'react-loadable';
-
 import './app.css';
-import { Hotkeys } from 'components/Hotkeys';
 import { State } from 'state';
 import { updateEditorHistory } from 'actions';
 import { feature } from 'utils';
-import { isEqual } from 'lodash';
 import { omit } from 'ramda';
 import { History } from 'reducers/editorHistory';
-import { Drawer } from '@blueprintjs/core';
-import { ImagesDrawer } from 'components/Shared/ImagesDrawer';
 import { ErrorBoundary } from 'components';
-import { BugReporter } from 'components/BugReporter';
+import { Drawer } from '@blueprintjs/core';
+
+const isEqual = require('lodash/isEqual');
+
 
 export interface AppProps {
     style: State['style'];
@@ -25,13 +22,26 @@ function Loading() {
     return <div>Loading...</div>;
 }
 
-const Editor = Loadable({
-    loader: () => import('components/Editor'),
-    loading: Loading,
-    render(loaded) {
-        return <loaded.Editor />;
-    },
-});
+const Editor = React.lazy(() =>
+    import('components/Editor').then((res) => ({ default: res.Editor })),
+);
+
+const Result = React.lazy(() =>
+    import('components/Result/Result').then((res) => ({ default: res.Result })),
+);
+
+const ImagesDrawer = React.lazy(() =>
+    import('components/Shared/ImagesDrawer').then((res) => ({ default: res.ImagesDrawer })),
+);
+
+const BugReporter = React.lazy(() =>
+    import('components/BugReporter').then((res) => ({ default: res.BugReporter })),
+);
+
+const Hotkeys = React.lazy(() =>
+    import('components/Hotkeys').then((res) => ({ default: res.Hotkeys })),
+);
+
 
 export class UpdaterBase extends React.Component<{
     present: Omit<State, 'editorHistory'>;
@@ -95,23 +105,14 @@ export class AppBase extends React.PureComponent<AppProps, {result2?: boolean}>
         const {style, view} = this.props;
         console.log('features', feature);
 
-        const Result = Loadable({
-            loader: () =>
-                this.state.result2
-                    ? import('components/Result/Result2')
-                    : import('components/Result/Result'),
-            loading: Loading,
-            render(loaded) {
-                return <loaded.Result />;
-            },
-        });
-
         return (
             <ErrorBoundary errorMessage={<div className='p-6 center-text'>
                 <h2>There was a problem retrieving your nuzlocke data.</h2>
                 <p>Please consider submitting a bug report.</p>
 
-                <BugReporter defaultOpen />
+                <React.Suspense fallback={'Loading Bug Reporter...'}>
+                    <BugReporter defaultOpen />
+                </React.Suspense>
             </div>}>
                 <div
                     className="app"
@@ -120,14 +121,28 @@ export class AppBase extends React.PureComponent<AppProps, {result2?: boolean}>
                         background: this.props.style.editorDarkMode ? '#111' : '#fff',
                     }}>
                     <Updater />
-                    <Hotkeys />
-                    <Editor />
-                    <Result />
+                    <ErrorBoundary>
+                        <React.Suspense fallback={'Loading Hotkeys...'}>
+                            <Hotkeys />
+                        </React.Suspense>
+                    </ErrorBoundary>
+                    <ErrorBoundary>
+                        <React.Suspense fallback={'Loading Editor...'}>
+                            <Editor />
+                        </React.Suspense>
+                    </ErrorBoundary>
+                    <ErrorBoundary>
+                        <React.Suspense fallback={'Loading Result...'}>
+                            <Result />
+                        </React.Suspense>
+                    </ErrorBoundary>
                     <Drawer
                         isOpen={view?.dialogs?.imageUploader}
                         size={Drawer.SIZE_STANDARD}
                     >
-                        <ImagesDrawer />
+                        <React.Suspense fallback={'Loading Drawer...'}>\
+                            <ImagesDrawer />
+                        </React.Suspense>
                     </Drawer>
                 </div>
             </ErrorBoundary>

src/components/App/app.css

@@ -26,7 +26,7 @@
   text-align: center;
 }
 .release-notes-wrapper a {
-    color: #24acf0;
+    color: #187daf;
 }
 .release-notes-wrapper p {
   line-height: 1.4;

src/components/BoxedPokemon/__tests__/BoxedPokemon.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BoxedPokemonBase, BoxedPokemonProps } from '../BoxedPokemon';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from 'utils/testUtils';
 import { PokemonFixtures } from 'utils/fixtures';
 import { styleDefaults } from 'utils';
 describe(BoxedPokemonBase.name, () => {

src/components/BoxedPokemon/__tests__/BoxedPokemon2.test.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { BoxedPokemon } from '../BoxedPokemon2';
 import { generateEmptyPokemon } from 'utils';
-import { render, screen } from '@testing-library/react';
-import { TestProvider } from 'utils/TestProvider';
+import { render, screen } from 'utils/testUtils';
 
 const poke = {
     ...generateEmptyPokemon(),
@@ -16,9 +15,7 @@ const poke = {
 describe(`<${BoxedPokemon.name} />`, () => {
     it('renders its content', () => {
         render(
-            <TestProvider>
-                <BoxedPokemon pokemon={poke} />
-            </TestProvider>,
+            <BoxedPokemon pokemon={poke} />
         );
         expect(screen.getByTestId('boxed-pokemon')).toBeDefined();
     });