Node.js 16

.eslintrc

@@ -1,19 +1,29 @@
 {
  "env": {
+ "browser": true,
+ "es2021": true,
  "jest/globals": true
  },
- "extends": ["airbnb","react-app","prettier"],
+ "extends": [
+ "plugin:react/recommended",
+ "airbnb",
+ "plugin:prettier/recommended"
+ ],
  "globals": {
  "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,
@@ -25,6 +35,6 @@
  }],
  "react/prefer-stateless-function": "off",
  "sort-keys": "off",
- "no-continue": "off",
+ "no-continue": "off"
  }
 }

.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}}

.prettierrc

@@ -2,5 +2,5 @@
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
- "singleQuote": true,
+ "singleQuote": true
 }

__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

@@ -67,7 +67,7 @@ function renderSettings(props = {}, renderFn = render) {
  {...props}
  windowTextOverlayOptions={options}
  />
- </ThemeProvider>
+ </ThemeProvider>,
  );
  return { rerender, options, updateOptionsMock };
 }
@@ -209,7 +209,7 @@ describe('TextOverlaySettingsBubble', () => {
  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"