Upgrade typescript to ^4.2.0 and fix lint issues

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    style: {
+        css: {
+            loaderOptions: {
+                // https://github.com/openstax/unified/issues/1469
+                url: false,
+            },
+        },
+    },
+};

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.2",
     "@formatjs/intl-pluralrules": "^4.0.6",
     "@openstax/highlighter": "^1.7.0",
     "@openstax/open-search-client": "0.1.0",
@@ -27,7 +28,7 @@
     "react-intl": "^5.12.0",
     "react-loadable": "^5.5.0",
     "react-redux": "^7.1.0",
-    "react-scripts": "3.4.4",
+    "react-scripts": "^4.0.3",
     "redux": "^4.0.1",
     "redux-sentry-middleware": "^0.2.2",
     "reselect": "^4.0.0",
@@ -36,10 +37,22 @@
     "styled-components": "^4.3.2",
     "styled-icons": "^8.1.0",
     "typesafe-actions": "^4.4.2",
-    "typescript": "3.9.6",
+    "typescript": "^4.2.0",
     "url": "^0.11.0",
     "uuid": "^3.4.0",
-    "weak-map": "^1.0.5"
+    "weak-map": "^1.0.5",
+    "workbox-background-sync": "^5.1.3",
+    "workbox-broadcast-update": "^5.1.3",
+    "workbox-cacheable-response": "^5.1.3",
+    "workbox-core": "^5.1.3",
+    "workbox-expiration": "^5.1.3",
+    "workbox-google-analytics": "^5.1.3",
+    "workbox-navigation-preload": "^5.1.3",
+    "workbox-precaching": "^5.1.3",
+    "workbox-range-requests": "^5.1.3",
+    "workbox-routing": "^5.1.3",
+    "workbox-strategies": "^5.1.3",
+    "workbox-streams": "^5.1.3"
   },
   "scripts": {
     "trust-localhost": "./script/trust-localhost.bash",
@@ -49,12 +62,12 @@
     "lint:css": "stylelint 'src/**/*.tsx'",
     "lint:bash": "shellcheck $(find . -type f \\( -iname '*\\.sh' -or -iname '*\\.bash' \\) | grep -v 'node_modules' )",
     "prestart": "npm run-script build:css",
-    "start": "HTTPS=${HTTPS:-true} react-scripts start",
+    "start": "HTTPS=${HTTPS:-true} craco start",
     "start:static": "export REACT_APP_ENV=${REACT_APP_ENV:-test} && npm run-script build && npm run-script prerender && npm run-script server",
     "clean": "rm -rf ./build",
     "build": "npm run-script build:css && npm run-script build:js && ./script/doctor-workbox.bash",
     "build:css": "lessc --source-map --source-map-include-source ./generic-styles/index.less ./src/content.css",
-    "build:js": "export REACT_APP_ENV=${REACT_APP_ENV:-production} && GENERATE_SOURCEMAP=${GENERATE_SOURCEMAP:-true} react-scripts build",
+    "build:js": "export REACT_APP_ENV=${REACT_APP_ENV:-production} && GENERATE_SOURCEMAP=${GENERATE_SOURCEMAP:-true} craco build",
     "build:clean": "npm run-script clean && npm run-script build",
     "prerender": "REACT_APP_ENV=${REACT_APP_ENV:-production} node ./script/entry prerender/index",
     "server": "REACT_APP_ENV=${REACT_APP_ENV:-development} node ./script/entry server/cli",
@@ -76,7 +89,7 @@
     "test:prerender:browser": "REACT_APP_ENV=test SERVER_MODE=built jest --testPathPattern=\"(\\.|/)browserspec\\.tsx?\" --config jest-puppeteer.config.json -i",
     "test:prerender:screenshots": "REACT_APP_ENV=test SERVER_MODE=built jest --testPathPattern=\"(\\.|/)screenshotspec\\.tsx?\" --config jest-puppeteer.config.json",
     "test:lighthouse-manual": "REACT_APP_ENV=test lighthouse --view --config-path=./src/test/audits/index.js",
-    "analyze:bundle": "react-scripts build && source-map-explorer 'build/static/js/*.js' -m",
+    "analyze:bundle": "craco build && source-map-explorer 'build/static/js/*.js' -m",
     "analyze:dom": "node ./script/entry.js domVisitor",
     "heroku-postbuild": "npm run-script build:clean"
   },

script/doctor-workbox.bash

@@ -3,82 +3,13 @@
 # sed expression needs $s
 set -e
 
-echo "HACKING WORKBOX SCRIPT WITH STRING REPLACEMENT"
-echo "remove this when offical solution is merged https://github.com/facebook/create-react-app/pull/5369"
-
 function abs_path {
   (cd "$(dirname '$1')" &>/dev/null && printf "%s/%s" "$PWD" "${1##*/}")
 }
 
 build=$(abs_path "${BASH_SOURCE%/*}/../build")
 worker="$build"/service-worker.js
 
-# add cache behaviors for 100% offline load 
-cp "$worker" "$worker".bak
-head -n 39 "$worker".bak > "$worker"
-
-cat >> "$worker" <<- EOM
-workbox.routing.registerRoute(
-  /https:\/\/buyprint\.openstax\.org/,
-  new workbox.strategies.StaleWhileRevalidate({ // can't use cachefirst because responses are opaque
-    cacheName: 'buy-print',
-    plugins: [
-      new workbox.expiration.Plugin({
-        maxEntries: 20,
-      }),
-    ],
-  })
-);
-
-workbox.routing.registerRoute(
-  /https:\/\/cdnjs\.cloudflare\.com\/ajax\/libs\/mathjax\//,
-  new workbox.strategies.StaleWhileRevalidate({ // can't use cachefirst because responses are opaque
-    cacheName: 'cdn-assets',
-    plugins: [
-      new workbox.expiration.Plugin({
-        maxEntries: 100, // mathjax loads a lot of files
-      }),
-    ],
-  })
-);
-
-workbox.routing.registerRoute(
-  /\/cms\/assets\//,
-  new workbox.strategies.StaleWhileRevalidate({
-    cacheName: 'cms-assets',
-    plugins: [
-      new workbox.expiration.Plugin({
-        maxEntries: 20,
-      }),
-    ],
-  })
-);
-
-workbox.routing.registerRoute(
-  /\/contents|resources|extras\//,
-  new workbox.strategies.CacheFirst({
-    cacheName: 'book-content',
-    plugins: [
-      new workbox.expiration.Plugin({
-        maxEntries: 300,
-      }),
-    ],
-  })
-);
-
-workbox.routing.registerRoute(
-  /\/apps\/cms\/api\//,
-  new workbox.strategies.StaleWhileRevalidate({
-    cacheName: 'cms-api',
-    plugins: [
-      new workbox.expiration.Plugin({
-        maxEntries: 20,
-      }),
-    ],
-  })
-);
-EOM
-
 mkdir "$build"/books
 
 mv "$worker" "$build"/books/

src/app/content/components/BookBanner.spec.tsx

@@ -24,7 +24,7 @@ describe('BookBanner', () => {
     resetModules();
 
     window = assertWindow();
-    delete window.location;
+    delete (window as any).location;
 
     window.location = {
       assign: jest.fn(),

src/app/content/components/Page/contentLinkHandler.ts

@@ -88,7 +88,7 @@ export const contentLinkHandler = (anchor: HTMLAnchorElement, getProps: () => Co
       return;
     }
 
-    const base = new URL(assertWindow().location);
+    const base = new URL(assertWindow().location.href);
     base.hash = '';
     base.search = '';
 

src/app/content/components/Page/highlightManager.spec.tsx

@@ -70,7 +70,7 @@ describe('highlightManager', () => {
   });
 
   afterEach(() => {
-    delete window.document.getSelection;
+    delete (window as any).document.getSelection;
   });
 
   it('CardList is rendered initially', () => {

src/app/content/components/utils/allImagesLoaded.spec.ts

@@ -14,6 +14,8 @@ describe('allImagesLoaded', () => {
     finished = false;
     element = assertDocument().createElement('div');
     img = assertDocument().createElement('img');
+
+    Object.defineProperty(img, 'complete', { value: false, writable: true });
   });
 
   it('resolves when passed an element with no images', async() => {

src/app/content/highlights/components/Note.tsx

@@ -36,7 +36,7 @@ const TextArea = styled.textarea`
 
 // tslint:disable-next-line:variable-name
 const Note = ({onChange, onFocus, note, textareaRef}: Props) => {
-  const setTextAreaHeight = () => {
+  const setTextAreaHeight = React.useCallback(() => {
     const element = textareaRef.current;
     if (!element) {
       return;
@@ -45,9 +45,9 @@ const Note = ({onChange, onFocus, note, textareaRef}: Props) => {
     if (element.scrollHeight > element.offsetHeight) {
       element.style.height = `${element.scrollHeight + 5}px`;
     }
-  };
+  }, [textareaRef]);
 
-  React.useEffect(setTextAreaHeight, [note]);
+  React.useEffect(setTextAreaHeight, [note, setTextAreaHeight]);
 
   return <TextArea
     ref={textareaRef}

src/app/content/highlights/components/utils/onClickOutside.ts

@@ -46,6 +46,7 @@ export const useOnClickOutside = (
   cb: (e: MouseEvent) => void,
   eventOptions?: EventListenerOptions
 ) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(onClickOutside(element, isEnabled, cb, eventOptions), [element, cb, isEnabled]);
 };
 

src/app/content/studyGuides/hooks/printStudyGuides.spec.ts

@@ -94,7 +94,7 @@ describe('printStudyGuides', () => {
   it('waits for promiseCollector.calm', async() => {
     let resolveCalm: undefined | (() => void);
 
-    calmSpy.mockReturnValue(new Promise((resolve) => {
+    calmSpy.mockReturnValue(new Promise<void>((resolve) => {
       resolveCalm = resolve;
     }));
 
@@ -125,7 +125,7 @@ describe('printStudyGuides', () => {
   it('doesn\'t print if study guides modal was closed', async() => {
     let resolveCalm: undefined | (() => void);
 
-    calmSpy.mockReturnValue(new Promise((resolve) => {
+    calmSpy.mockReturnValue(new Promise<void>((resolve) => {
       resolveCalm = resolve;
     }));
 

src/app/content/utils/urlUtils.spec.ts

@@ -70,7 +70,7 @@ describe('getUrlParamForPageId', () => {
   });
 
   it('returns uuid param if tree is missing a slug', () => {
-    delete book.tree.contents[0].slug;
+    delete (book as any).tree.contents[0].slug;
 
     expect(getUrlParamForPageId(book, 'pagelongid@1')).toEqual({uuid: 'pagelongid'});
   });
@@ -94,7 +94,7 @@ describe('getUrlParamForPageId', () => {
     });
 
     it('throws if tree is missing a slug and env is production', () => {
-      delete book.tree.contents[0].slug;
+      delete (book as any).tree.contents[0].slug;
       expect(() =>
         getUrlParamForPageId(book, 'pagelongid@1')
       ).toThrowErrorMatchingInlineSnapshot(

src/app/developer/components/Routes.tsx

@@ -4,8 +4,8 @@ import { H3 } from '../../components/Typography';
 import Panel from './Panel';
 
 // tslint:disable-next-line:variable-name
-const Routes: React.SFC = () => <Panel title='Routes'>
-  {routes.map((route) => <div key={route.name}>
+const Routes = () => <Panel title='Routes'>
+  {routes.map((route) => route && <div key={route.name}>
     <H3>{route.name}</H3>
     path: {route.paths.map((path) => <React.Fragment key={path}>{path}<br /></React.Fragment>)}
   </div>)}

src/app/index.spec.tsx

@@ -119,7 +119,7 @@ describe('create app', () => {
         pathname: notFound.getUrl({url: 'url'}),
         replace: jest.fn(),
       };
-      delete window.location;
+      delete (window as any).location;
       window.location = newLocation;
 
       createApp = require('./index').default;

src/app/navigation/middleware.spec.ts

@@ -24,6 +24,13 @@ describe('navigation middleware', () => {
 
   beforeEach(() => {
     middleware = require('./middleware').default;
+
+    Object.defineProperty(assertWindow(), 'location', {
+      value: {
+        assign: jest.fn(),
+        replace: jest.fn(),
+      },
+    });
   });
 
   it('calls history when callHistoryMethod is dispatched', () => {

src/app/navigation/utils.spec.ts

@@ -127,7 +127,7 @@ describe('matchPathname', () => {
   });
 
   it('renders a path with params', () => {
-    const spy = jest.spyOn(routes[1], 'getUrl');
+    const spy = jest.spyOn(routes[1]!, 'getUrl');
     const params = {foo: 'bar'};
 
     expect(matchPathname({route: routes[1], params} as unknown as AnyMatch)).toEqual('url2');
@@ -137,11 +137,11 @@ describe('matchPathname', () => {
 
 describe('matchUrl', () => {
   it('renders a url with just a path', () => {
-    expect(matchUrl({route: routes[0], params: {}, state: {}})).toEqual('url1');
+    expect(matchUrl({route: routes[0]!, params: {}, state: {}})).toEqual('url1');
   });
 
   it('renders url with path and query', () => {
-    expect(matchUrl({route: routes[2], params: {}, state: {}}))
+    expect(matchUrl({route: routes[2]!, params: {}, state: {}}))
       .toEqual('url3?archive=https%3A%2F%2Farchive-content03.cnx.org');
   });
 });
@@ -229,7 +229,7 @@ describe('matchSearch', () => {
   });
 
   it('renders a url with search', () => {
-    const spy = jest.spyOn(routes[2], 'getSearch');
+    const spy = jest.spyOn(routes[2]!, 'getSearch');
     const params = { foo: 'bar' } as unknown as Params;
 
     expect(

src/app/navigation/utils.ts

@@ -30,13 +30,13 @@ if (typeof(document) !== 'undefined') {
 const delimiter = '_';
 
 export const matchForRoute = <R extends AnyRoute>(route: R, match: AnyMatch | undefined): match is Match<R> =>
-  !!match && match.route.name === route.name;
+  !!match && !!route && match.route.name === route.name;
 
 export const locationChangeForRoute = <R extends AnyRoute>(
   route: R,
   locationChange: LocationChange
 ): locationChange is Required<LocationChange<Match<R>>> =>
-  !!locationChange.match && locationChange.match.route.name === route.name;
+  !!locationChange.match && !!route && locationChange.match.route.name === route.name;
 
 export const getUrlRegexParams = (obj: object): object => flatten(obj, {delimiter});
 
@@ -56,7 +56,7 @@ const formatRouteMatch = <R extends AnyRoute>(route: R, state: RouteState<R>, ke
 
 export const findRouteMatch = (routes: AnyRoute[], location: Location): AnyMatch | undefined => {
   for (const route of routes) {
-    for (const path of route.paths) {
+    for (const path of route!.paths) {
       const keys: Key[] = [];
       const re = pathToRegexp(path, keys, {end: true});
       const match = re.exec(location.pathname);

src/app/notifications/components/UpdatesAvailable.spec.tsx

@@ -10,15 +10,20 @@ describe('UpdatesAvailable', () => {
   let reload: jest.SpyInstance;
 
   beforeEach(() => {
-    reload = window!.location.reload = jest.fn();
+    reload = jest.fn();
+    Object.defineProperty(window, 'location', {
+      value: { reload },
+    });
     resetModules();
     ({React, renderer, MessageProvider} = reactAndFriends());
     UpdatesAvailable = require('./UpdatesAvailable').default; // tslint:disable-line:variable-name
     serviceWorkerNeedsUpdate = jest.spyOn(require('../../../helpers/applicationUpdates'), 'serviceWorkerNeedsUpdate');
   });
 
   afterEach(() => {
-    window!.location.reload = reloadBackup;
+    Object.defineProperty(window, 'location', {
+      value: { reload: reloadBackup },
+    });
   });
 
   it('reloads on click', () => {