Massive change to get functions to run ESM so we can use unified ther…

…e (eyeroll). Involves upgrading runtime to node 20, using js extension for all ts relative imports (eyeroll), and a host of other smaller config changes

.prettierrc

@@ -17,4 +17,12 @@
   "trailingComma": "es5",
   "useTabs": false,
   "vueIndentScriptAndStyle": false,
+  "overrides": [
+    {
+      "files": "*.ts",
+      "options": {
+        "parser": "typescript"
+      }
+    }
+  ]
 }

Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.39.0-jammy as dev
+FROM mcr.microsoft.com/playwright:v1.44.1-jammy as dev
 RUN mkdir /src
 WORKDIR /src
 COPY app/package.json app/yarn.lock app/lingui.config.ts ./
@@ -15,7 +15,7 @@ RUN firebase setup:emulators:pubsub
 ARG COMMIT=dev
 ENV NEXT_PUBLIC_COMMIT_HASH $COMMIT
 
-FROM node:18-slim as builder
+FROM node:20-slim as builder
 RUN mkdir /src
 WORKDIR /src
 COPY app/package.json app/yarn.lock ./
@@ -32,7 +32,7 @@ RUN yarn install --production --ignore-scripts --prefer-offline
 ARG COMMIT
 RUN test -n "$COMMIT"
 
-FROM gcr.io/distroless/nodejs18-debian11 as prod
+FROM gcr.io/distroless/nodejs20-debian12 as prod
 ARG COMMIT
 ENV NEXT_PUBLIC_COMMIT_HASH=$COMMIT NODE_ENV=production NEXT_TELEMETRY_DISABLED=1
 WORKDIR /app

RUNNING_CONTAINERLESS.md

@@ -26,10 +26,10 @@ Now click "Continue to console" and click "Service accounts" at the top of the P
 
 ### Install dependencies
 
-Crosshare is currently deployed on node 18 - on Fedora it's:
+Crosshare is currently deployed on node 20 - on Fedora it's:
 
 ```shell
-$ sudo dnf module install nodejs:18
+$ sudo dnf install nodejs20
 ```
 
 We use `yarn` for package management:

app/.prettierignore

@@ -1 +1,4 @@
-**/locales/**
+**/locales/**
+
+app/lib/spam.ts
+lib/spam.ts

app/__tests__/Builder.test.tsx

@@ -1,27 +1,27 @@
+import * as firebaseTesting from '@firebase/rules-unit-testing';
+import { jest } from '@jest/globals';
+import type firebase from 'firebase/compat/app';
+import type firebaseAdminType from 'firebase-admin';
+import NextJSRouter from 'next/router';
 import React from 'react';
+import waitForExpect from 'wait-for-expect';
+import { getDateString, prettifyDateString } from '../lib/dbtypes.js';
+import { setApp } from '../lib/firebaseWrapper.js';
+import { getPuzzlePageProps as getServerSideProps } from '../lib/serverOnly.js';
 import {
-  getByLabelText,
-  getUser,
+  RenderResult,
+  act,
   cleanup,
-  render,
   fireEvent,
-  RenderResult,
+  getByLabelText,
   getProps,
-  act,
+  getUser,
+  render,
   waitFor,
-} from '../lib/testingUtils';
-import BuilderPage from '../pages/construct';
-import { setApp } from '../lib/firebaseWrapper';
-import type firebaseAdminType from 'firebase-admin';
-import * as firebaseTesting from '@firebase/rules-unit-testing';
-import type firebase from 'firebase/compat/app';
-import NextJSRouter from 'next/router';
-import PuzzlePage from '../pages/crosswords/[[...puzzleId]]';
-import { getPuzzlePageProps as getServerSideProps } from '../lib/serverOnly';
-import { PuzzleLoader as StatsPuzzleLoader } from '../pages/stats/[puzzleId]';
-import waitForExpect from 'wait-for-expect';
-import { getDateString, prettifyDateString } from '../lib/dbtypes';
-import { jest } from '@jest/globals';
+} from '../lib/testingUtils.js';
+import BuilderPage from '../pages/construct.js';
+import PuzzlePage from '../pages/crosswords/[[...puzzleId]].js';
+import { PuzzleLoader as StatsPuzzleLoader } from '../pages/stats/[puzzleId].js';
 
 /*jest.mock(
   'next/link',
@@ -100,7 +100,7 @@ test('puzzle in progress should be cached in local storage', async () => {
   sessionStorage.clear();
   localStorage.clear();
 
-  setApp(app as firebase.app.App);
+  setApp(app);
 
   let r = render(<BuilderPage />, { user: mike, displayName: 'Mike' });
   let launchButton = (await r.findAllByText('Launch Constructor'))[0];
@@ -151,7 +151,7 @@ async function publishPuzzle(
     .doc('donations')
     .set({ d: [] });
 
-  setApp(app as firebase.app.App);
+  setApp(app);
 
   const r = render(<BuilderPage />, { user: mike, displayName: 'Mike' });
   const launchButton = (await r.findAllByText('Launch Constructor'))[0];
@@ -231,7 +231,7 @@ test('moderate as daily mini', async () => {
   }
 
   // The puzzle should be visible to an admin w/ moderation links
-  setApp(adminUserApp as firebase.app.App);
+  setApp(adminUserApp);
   const r4 = render(<PuzzlePage {...props1} />, {
     user: miked,
     isAdmin: true,
@@ -242,14 +242,18 @@ test('moderate as daily mini', async () => {
   fireEvent.click(r4.getByText(/Moderate/i));
   await r4.findByText(/Schedule as Daily Mini/i);
   await waitFor(
-    () => expect(r4.getByTestId('today-button')).not.toBeDisabled(),
+    () => {
+      expect(r4.getByTestId('today-button')).not.toBeDisabled();
+    },
     {
       timeout: 5000,
     }
   );
   fireEvent.click(r4.getByTestId('today-button'));
   await waitFor(
-    () => expect(r4.getByText(/Schedule as Daily Mini/i)).not.toBeDisabled(),
+    () => {
+      expect(r4.getByText(/Schedule as Daily Mini/i)).not.toBeDisabled();
+    },
     {
       timeout: 5000,
     }
@@ -268,12 +272,12 @@ test('moderate as daily mini', async () => {
   }
   const ds = getDateString(new Date());
   expect(res.docs[0]?.id).toEqual(puzzleId);
-  expect(updated['m']).toEqual(true);
-  expect(updated['f']).toEqual(undefined);
-  expect(updated['p']).not.toEqual(null);
-  expect(updated['c']).toEqual('dailymini');
-  expect(updated['dmd']).toEqual(prettifyDateString(ds));
-  expect(updated['t']).toEqual('Our Title');
+  expect(updated.m).toEqual(true);
+  expect(updated.f).toEqual(undefined);
+  expect(updated.p).not.toEqual(null);
+  expect(updated.c).toEqual('dailymini');
+  expect(updated.dmd).toEqual(prettifyDateString(ds));
+  expect(updated.t).toEqual('Our Title');
 });
 
 test('publish as default', async () => {
@@ -293,14 +297,14 @@ test('publish as default', async () => {
     throw new Error();
   }
   const puzzleId = puzzles.docs[0]?.id;
-  expect(puzzle['m']).toEqual(false);
-  expect(puzzle['p']).not.toEqual(null);
-  expect(puzzle['c']).toEqual(null);
-  expect(puzzle['t']).toEqual('Our Title');
-  expect(puzzle['pvu']).toBeTruthy();
-  await waitForExpect(async () =>
-    expect(NextJSRouter.push).toHaveBeenCalledTimes(1)
-  );
+  expect(puzzle.m).toEqual(false);
+  expect(puzzle.p).not.toEqual(null);
+  expect(puzzle.c).toEqual(null);
+  expect(puzzle.t).toEqual('Our Title');
+  expect(puzzle.pvu).toBeTruthy();
+  await waitForExpect(async () => {
+    expect(NextJSRouter.push).toHaveBeenCalledTimes(1);
+  });
   expect(NextJSRouter.push).toHaveBeenCalledWith(
     `/crosswords/${puzzles.docs[0]?.id}/our-title`
   );
@@ -322,7 +326,7 @@ test('publish as default', async () => {
   cleanup();
 
   // The puzzle should be visible on the puzzle page, even to a rando
-  setApp(serverApp as firebase.app.App);
+  setApp(serverApp);
   const props1 = await getProps(
     await getServerSideProps({
       params: { puzzleId: [puzzleId, 'our-title'] },
@@ -333,7 +337,7 @@ test('publish as default', async () => {
   if (!props1) {
     throw new Error('bad props');
   }
-  setApp(randoApp as firebase.app.App);
+  setApp(randoApp);
 
   const r5 = render(<PuzzlePage {...props1} />, {
     user: rando,
@@ -352,7 +356,7 @@ test('publish as default', async () => {
   cleanup();
 
   // The puzzle should be visible to an admin w/ moderation links
-  setApp(adminUserApp as firebase.app.App);
+  setApp(adminUserApp);
   const r4 = render(<PuzzlePage {...props1} />, {
     user: miked,
     isAdmin: true,
@@ -377,11 +381,11 @@ test('publish as default', async () => {
     throw new Error();
   }
   expect(res.docs[0]?.id).toEqual(puzzleId);
-  expect(updated['m']).toEqual(true);
-  expect(updated['f']).toEqual(true);
-  expect(updated['p']).not.toEqual(null);
-  expect(updated['c']).toEqual(null);
-  expect(updated['t']).toEqual('Our Title');
+  expect(updated.m).toEqual(true);
+  expect(updated.f).toEqual(true);
+  expect(updated.p).not.toEqual(null);
+  expect(updated.c).toEqual(null);
+  expect(updated.t).toEqual('Our Title');
 });
 
 test('publish custom / non-rectangular size', async () => {
@@ -395,7 +399,7 @@ test('publish custom / non-rectangular size', async () => {
     .doc('donations')
     .set({ d: [] });
 
-  setApp(app as firebase.app.App);
+  setApp(app);
 
   const r = render(<BuilderPage />, { user: mike, displayName: 'Mike' });
   const launchButton = (await r.findAllByText('Launch Constructor'))[0];
@@ -459,25 +463,25 @@ test('publish custom / non-rectangular size', async () => {
     throw new Error();
   }
   const puzzleId = puzzles.docs[0]?.id;
-  expect(puzzle['m']).toEqual(false);
-  expect(puzzle['p']).not.toEqual(null);
-  expect(puzzle['c']).toEqual(null);
-  expect(puzzle['t']).toEqual('Our Title');
-  expect(puzzle['bp']).toEqual('Here is our new blog post');
-  expect(puzzle['pv']).toBeUndefined();
-  expect(puzzle['pvu']).toBeTruthy();
-
-  await waitForExpect(async () =>
-    expect(NextJSRouter.push).toHaveBeenCalledTimes(1)
-  );
+  expect(puzzle.m).toEqual(false);
+  expect(puzzle.p).not.toEqual(null);
+  expect(puzzle.c).toEqual(null);
+  expect(puzzle.t).toEqual('Our Title');
+  expect(puzzle.bp).toEqual('Here is our new blog post');
+  expect(puzzle.pv).toBeUndefined();
+  expect(puzzle.pvu).toBeTruthy();
+
+  await waitForExpect(async () => {
+    expect(NextJSRouter.push).toHaveBeenCalledTimes(1);
+  });
   expect(NextJSRouter.push).toHaveBeenCalledWith(
     `/crosswords/${puzzles.docs[0]?.id}/our-title`
   );
 
   cleanup();
 
   // The puzzle should be visible on the puzzle page, even to a rando
-  setApp(serverApp as firebase.app.App);
+  setApp(serverApp);
   const props1 = await getProps(
     await getServerSideProps({
       params: { puzzleId: [puzzleId, 'our-title'] },
@@ -488,7 +492,7 @@ test('publish custom / non-rectangular size', async () => {
   if (!props1) {
     throw new Error('bad props');
   }
-  setApp(randoApp as firebase.app.App);
+  setApp(randoApp);
   const r5 = render(<PuzzlePage {...props1} />, {
     user: rando,
     displayName: 'Mike',

app/__tests__/ClueText.test.tsx

@@ -1,7 +1,7 @@
-import { ClueText } from '../components/ClueText';
-import { GridContext } from '../components/GridContext';
-import { act, render } from '../lib/testingUtils';
-import { CluedGrid, addClues, fromCells } from '../lib/viewableGrid';
+import { ClueText } from '../components/ClueText.js';
+import { GridContext } from '../components/GridContext.js';
+import { act, render } from '../lib/testingUtils.js';
+import { CluedGrid, addClues, fromCells } from '../lib/viewableGrid.js';
 
 /*
 "What's a Grecian ___?" "About $25 a week!"

app/__tests__/ConstructorPage.test.tsx

@@ -1,20 +1,19 @@
 import * as firebaseTesting from '@firebase/rules-unit-testing';
-
-import { setApp, setAdminApp } from '../lib/firebaseWrapper';
-import { getUser, render, cleanup, fireEvent } from '../lib/testingUtils';
-import { getMockedPuzzle } from '../lib/getMockedPuzzle';
-import { AccountPage } from '../pages/account';
 import waitForExpect from 'wait-for-expect';
+import { setAdminApp, setApp } from '../lib/firebaseWrapper.js';
+import { getMockedPuzzle } from '../lib/getMockedPuzzle.js';
+import { cleanup, fireEvent, getUser, render } from '../lib/testingUtils.js';
+import { AccountPage } from '../pages/account.js';
 jest.mock('../lib/firebaseWrapper');
 import type firebase from 'firebase/compat/app';
-import { userIdToPage } from '../lib/serverOnly';
+import { userIdToPage } from '../lib/serverOnly.js';
 import firebaseAdmin from 'firebase-admin';
 
 jest.mock(
   'next/link',
   () =>
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+    // @ts-expect-error
     ({ children }) =>
       children
 ); // https://github.com/vercel/next.js/issues/16864
@@ -85,13 +84,13 @@ test('create constructor page', async () => {
   fireEvent.click(r.getByText('Create', { exact: true }));
   await r.findByText('Created successfully!', undefined, { timeout: 3000 });
 
-  await waitForExpect(async () =>
+  await waitForExpect(async () => {
     expect(
       (
         await adminApp.firestore().collection('cp').doc('therealmiked').get()
       ).data()?.u
-    ).toEqual('mikeuserid')
-  );
+    ).toEqual('mikeuserid');
+  });
 
   cleanup();
 

app/__tests__/FollowButton.test.tsx

@@ -1,25 +1,23 @@
 import * as firebaseTesting from '@firebase/rules-unit-testing';
-
-import { setApp } from '../lib/firebaseWrapper';
+import { setApp } from '../lib/firebaseWrapper.js';
 import {
   fireEvent,
-  render,
   getUser,
+  render,
   renderWithSnackbar,
-} from '../lib/testingUtils';
-import { FollowButton } from '../components/FollowButton';
+} from '../lib/testingUtils.js';
+import { FollowButton } from '../components/FollowButton.js';
 jest.mock('../lib/firebaseWrapper');
 import type firebase from 'firebase/compat/app';
 import type firebaseAdminType from 'firebase-admin';
-
-import { ConstructorPageT } from '../lib/constructorPage';
+import { ConstructorPageT } from '../lib/constructorPage.js';
 
 const projectId = 'followtests';
 let adminApp: firebaseAdminType.app.App;
 
 beforeAll(() => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
+  // @ts-expect-error
   adminApp = firebaseTesting.initializeAdminApp({ projectId });
 });
 

app/__tests__/Markdown.test.tsx

@@ -1,9 +1,9 @@
-import { GridContext } from '../components/GridContext';
-import { Markdown } from '../components/Markdown';
-import { markdownToHast, removeSpoilers } from '../lib/markdown/markdown';
-import { render, waitFor } from '../lib/testingUtils';
-import { Direction } from '../lib/types';
-import { CluedGrid, addClues, fromCells } from '../lib/viewableGrid';
+import { GridContext } from '../components/GridContext.js';
+import { Markdown } from '../components/Markdown.js';
+import { markdownToHast, removeSpoilers } from '../lib/markdown/markdown.js';
+import { render, waitFor } from '../lib/testingUtils.js';
+import { Direction } from '../lib/types.js';
+import { CluedGrid, addClues, fromCells } from '../lib/viewableGrid.js';
 
 test('remove spoilers', () => {
   expect(removeSpoilers('Testing **something bold**')).toMatch(