Node.js 16

.eslintrc

@@ -7,13 +7,17 @@
     "page": true,
     "document": true
   },
-  "parser": "babel-eslint",
   "plugins": ["jest","prettier"],
   "rules": {
+    "class-methods-use-this": "warn",
+    "default-param-last": "warn",
     "import/prefer-default-export": "off",
     "no-console": "off",
     "prettier/prettier": ["error"],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/prop-types": "warn",
+    "react/no-unstable-nested-components": "warn",
+    "react/no-unused-class-component-methods": "warn",
     "require-jsdoc": ["error", {
       "require": {
         "FunctionDeclaration": true,

.github/workflows/ci.yml

@@ -15,11 +15,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
       with:
         node-version: 16
-    - run: npm ci --legacy-peer-deps
+    - run: npm ci
     - run: npm run build --if-present
     - run: npm run test:coverage
     - run: npm run lint

.github/workflows/npm-publish.yml

@@ -11,8 +11,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - run: npm ci
@@ -22,12 +22,12 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://registry.npmjs.org/
-      - run: npm ci --legacy-peer-deps
+      - run: npm ci
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

__tests__/components/MiradorTextOverlay.test.js

@@ -125,7 +125,7 @@ describe('MiradorTextOverlay', () => {
     } = renderOverlay({ pageTexts });
     viewer.handlers['update-viewport']();
     const overlays = Array.of(...viewer.canvas.querySelectorAll('div > svg:first-of-type')).map(
-      (e) => e.parentElement
+      (e) => e.parentElement,
     );
     expect(overlays[0]).toHaveStyle({
       transform: 'translate(52.95000000000001px, 72.9px) scale(1.33)',

__tests__/components/OverlaySettings.test.js

@@ -22,20 +22,24 @@
 
 // Mocked MUI slider for easier testing, taken from
 // https://stackoverflow.com/a/61628815 (CC BY-SA 4.0)
-jest.mock('@material-ui/core/Slider', () => (props) => {
-  const { id, name, min, max, onChange } = props;
-  return (
-    <input
-      data-testid="opacity-slider"
-      type="range"
-      id={id}
-      name={name}
-      min={min}
-      max={max}
-      onChange={(event) => onChange(event, event.target.value)}
-    />
-  );
-});
+jest.mock(
+  '@material-ui/core/Slider',
+  () =>
+    function (props) {
+      const { id, name, min, max, onChange } = props;
+      return (
+        <input
+          data-testid="opacity-slider"
+          type="range"
+          id={id}
+          name={name}
+          min={min}
+          max={max}
+          onChange={(event) => onChange(event, event.target.value)}
+        />
+      );
+    },
+);
 
 /** Render a bubble to the testing screen */
 function renderSettings(props = {}, renderFn = render) {
@@ -67,7 +71,7 @@
         {...props}
         windowTextOverlayOptions={options}
       />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
   return { rerender, options, updateOptionsMock };
 }
@@ -209,7 +213,7 @@
   it('should be positioned lower if mirador-image-tools is enabled', () => {
     renderSettings({ imageToolsEnabled: true });
     expect(
-      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement
+      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement,
     ).toHaveStyle('top: 66px');
   });
 

__tests__/components/PageTextDisplay.test.js

@@ -66,24 +66,24 @@ describe('PageTextDisplay', () => {
     renderPage({ visible: false });
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
     expect(screen.getByText(svgTextMatcher('another secondWord on another line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
   });
 
   it('should not re-render by itself when the opacity changes', () => {
     const { rerender } = renderPage();
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
     renderPage({ opacity: 0.25 }, rerender);
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
   });
 
@@ -92,11 +92,11 @@ describe('PageTextDisplay', () => {
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).not.toBeNull();
     renderPage(
       { source: 'http://example.com/pages/2', lines: lineFixtures.withoutSpans, opacity: 0.25 },
-      rerender
+      rerender,
     );
     expect(screen.getByText('a word on a line')).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.25);'
+      'fill: rgba(0, 0, 0, 0.25);',
     );
   });
 

__tests__/lib/ocrFormats.test.js

@@ -11,7 +11,7 @@ import contentAsTextAnnos from '../../__fixtures__/anno_iifv2.json';
  * https://stackoverflow.com/a/53464807 (CC-BY-SA)
  */
 const closeTo = (expected, precision = 1) => ({
-  asymmetricMatch: (actual) => Math.abs(expected - actual) < Math.pow(10, -precision) / 2,
+  asymmetricMatch: (actual) => Math.abs(expected - actual) < 10 ** -precision / 2,
 });
 
 describe('parsing ALTO', () => {
@@ -49,7 +49,7 @@ describe('parsing ALTO', () => {
 
   it('should convert style nodes to proper CSS', () => {
     expect(parsed.lines[96].spans[16].style).toBe(
-      'font-family: Times New Roman;font-style: italic'
+      'font-family: Times New Roman;font-style: italic',
     );
   });
 });

__tests__/state/sagas.test.js

@@ -222,7 +222,7 @@ describe('Fetching external annotation sources', () => {
       .put(
         receiveAnnotation(targetId, annotationId, {
           resources: [{ resource: simpleExternalContent }],
-        })
+        }),
       )
       .run());
 
@@ -245,7 +245,7 @@ describe('Fetching external annotation sources', () => {
               },
             },
           ],
-        })
+        }),
       )
       .run());
 

netlify.toml

@@ -1,4 +1,2 @@
 [build.environment]
   NODE_VERSION = "16"
-
-  NPM_FLAGS = "--legacy-peer-deps"