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,15 @@
 # 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
+workerMap="$build"/service-worker.js.map
 
 mkdir "$build"/books
 
 mv "$worker" "$build"/books/
+mv "$workerMap" "$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/content.prerenderspec.ts

@@ -35,6 +35,8 @@ describe('content', () => {
         ['[data-testid="toc"]', 'style'],
         ['[data-testid="search-results-sidebar"]', 'style'],
         ['[data-testid="loader"] path', 'style'],
+        // img src is changed from data:image/svg+xml;base64... to static path
+        ['[data-testid="navbar"] img', 'src'],
       ].forEach(([selector, attribute]) => {
         root.querySelectorAll(selector).forEach((element) =>
           element.removeAttribute(attribute)

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/search/components/SearchResultsSidebar/index.spec.tsx

@@ -195,7 +195,7 @@ describe('SearchResultsSidebar', () => {
 
     jest.useFakeTimers();
     if (sidebar.searchSidebar.current) {
-      sidebar.searchSidebar.current.dispatchEvent(animationEvent());
+      sidebar.searchSidebar.current.dispatchEvent(animationEvent() as any);
     }
     jest.runAllTimers();
 

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/Home.spec.tsx

@@ -16,7 +16,7 @@ describe('Home', () => {
 
   it('matches snapshot', async() => {
     jest.spyOn(Date.prototype, 'getFullYear').mockReturnValue(2021);
-    const store = createTestStore({navigation: new URL('https://localhost')});
+    const store = createTestStore({navigation: new URL('https://localhost') as any});
     const component = renderer.create(<Provider store={store}>
       <Services.Provider value={services}>
         <MessageProvider>

src/app/developer/components/Routes.tsx

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

src/app/head/hooks/locationChange.spec.ts

@@ -6,7 +6,7 @@ import { assertNotNull } from '../../utils';
 describe('setHead hook', () => {
   let hookBody: ActionHookBody<typeof locationChange>;
   const helpers = {} as MiddlewareAPI & AppServices;
-  const action = locationChange({location: new URL('http://localhost/'), action: 'PUSH'});
+  const action = locationChange({location: new URL('http://localhost/') as any, action: 'PUSH'});
 
   beforeEach(() => {
     resetModules();

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/index.tsx

@@ -21,6 +21,7 @@ import { matchPathname } from './navigation/utils';
 import * as notifications from './notifications';
 import createReducer from './reducer';
 import { AppServices, AppState, Middleware } from './types';
+import { assertNonNullableArray } from './utils/assertions';
 
 export const actions = {
   app: appAactions,
@@ -32,15 +33,15 @@ export const actions = {
   notifications: notifications.actions,
 };
 
-export const routes = Object.values({
+export const routes = assertNonNullableArray(Object.values({
   ...(
     process.env.REACT_APP_ENV !== 'production'
       ? developer.routes
       : /* istanbul ignore next */ {}
   ),
   ...content.routes,
   ...errors.routes,
-});
+}), 'some of the required routes are not exported');
 
 const init = [
   ...Object.values(auth.init),

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/types.ts

@@ -59,7 +59,7 @@ export interface LocationChange<M = AnyMatch> {
   action: Action;
 }
 
-export type AnyRoute = typeof routes[number];
+export type AnyRoute = NonNullable<typeof routes[number]>;
 export type AnyMatch = UnionRouteMatches<AnyRoute>;
 
 export type RouteHookBody<R extends AnyRoute> = (helpers: MiddlewareAPI & AppServices) =>

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', () => {