Refactor researcher app to use ECMAScript modules (ESM)

.eslintrc.js

@@ -1,7 +1,6 @@
 module.exports = {
   root: true,
-  // This tells ESLint to load the config from the package `eslint-config-custom`
-  extends: ['custom'],
+  extends: ['@colonial-collections/eslint-config'],
   settings: {
     next: {
       rootDir: ['apps/*/'],

README.md

@@ -11,11 +11,11 @@ This repo uses [Turborepo](https://turbo.build/) as build system and [npm](https
 
 ### Packages
 
-- `eslint-config-custom`: `eslint` configurations
+- `@colonial-collections/eslint-config`: `eslint` configurations
 - `iris`: helper functions for working with IRIs
-- `tailwind-config`: Tailwind config used by both the apps and the `ui` package
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
-- `ui`: a React component library shared by the apps
+- `@colonial-collections/tailwind-config`: Tailwind config used by both the apps and the `ui` package
+- `@colonial-collections/ts-config`: `tsconfig.json`s used throughout the monorepo
+- `@colonial-collections/ui`: a React component library shared by the apps
 
 ## Prerequisites
 

apps/dataset-browser/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@colonial-collections/eslint-config"]
+}

apps/dataset-browser/cypress/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "tsconfig/cypress.json",
+  "extends": "@colonial-collections/ts-config/cypress.json",
   "include": ["**/*.ts", "**/*.tsx", "../src/**/*.cy.tsx"],
   "exclude": []
 }

apps/dataset-browser/jest.config.cjs

@@ -0,0 +1,27 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest();
+
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  testTimeout: 60000,
+  testMatch: ['**/*.test.ts(x)?'],
+  collectCoverage: true,
+  setupFiles: ['<rootDir>/jest.setup.cjs'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  /**
+   * Don't try to transform the package `next-intl`, or else you will get the error:
+   * "SyntaxError: Cannot use import statement outside a module"
+   *
+   * `next-intl` uses ECMAScript Modules (ESM) and Jest provides some experimental support for it
+   * but "node_modules" are not transpiled by next/jest yet.
+   *
+   * @link https://github.com/vercel/next.js/issues/36077#issuecomment-1096698456
+   * @link https://jestjs.io/docs/ecmascript-modules
+   */
+  transformIgnorePatterns: ['node_modules/(?!(next-intl)/)'],
+};
+
+module.exports = createJestConfig(customJestConfig);

apps/dataset-browser/package.json

@@ -2,6 +2,7 @@
   "name": "dataset-browser",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "files": [],
   "engines": {
     "node": "18.x"
@@ -45,15 +46,15 @@
     "@types/react": "18.2.56",
     "@types/react-dom": "18.2.19",
     "autoprefixer": "10.4.18",
-    "cypress": "13.6.2",
+    "cypress": "13.7.0",
     "encoding": "0.1.13",
-    "eslint-config-custom": "*",
+    "@colonial-collections/eslint-config": "*",
     "gts": "5.2.0",
     "jest": "29.7.0",
     "postcss": "8.4.33",
-    "tailwind-config": "*",
+    "@colonial-collections/tailwind-config": "*",
     "tailwindcss": "3.4.1",
-    "tsconfig": "*",
+    "@colonial-collections/ts-config": "*",
     "typescript": "5.3.3"
   }
 }

apps/dataset-browser/postcss.config.json

@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}

apps/dataset-browser/src/definitions.ts

@@ -0,0 +1,4 @@
+export enum LocaleEnum {
+  En = 'en',
+  Nl = 'nl',
+}

apps/dataset-browser/src/i18n.ts

@@ -1,5 +1,19 @@
+import {notFound} from 'next/navigation';
 import {getRequestConfig} from 'next-intl/server';
+import {locales} from './navigation';
+import {LocaleEnum} from '@/definitions';
 
-export default getRequestConfig(async ({locale}) => ({
-  messages: (await import(`./messages/${locale}/messages.json`)).default,
-}));
+export default getRequestConfig(async ({locale}) => {
+  if (!locales.includes(locale as LocaleEnum)) {
+    notFound();
+  }
+
+  return {
+    messages: (
+      await (locale === 'en'
+        ? // This will enable HMR for `en`
+          import('./messages/en/messages.json')
+        : import(`./messages/${locale}/messages.json`))
+    ).default,
+  };
+});

apps/dataset-browser/tailwind.config.ts

@@ -0,0 +1,5 @@
+import config from '@colonial-collections/tailwind-config';
+
+export default {
+  presets: [config],
+};

apps/dataset-browser/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "tsconfig/nextjs.json",
+  "extends": "../../packages/ts-config/nextjs.json",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {

apps/researcher/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@colonial-collections/eslint-config"]
+}

apps/researcher/cypress/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "tsconfig/cypress.json",
+  "extends": "@colonial-collections/ts-config/cypress.json",
   "include": ["**/*.ts", "**/*.tsx", "../src/**/*.cy.tsx"],
   "exclude": []
 }

apps/researcher/jest.config.cjs

@@ -0,0 +1,27 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest();
+
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  testTimeout: 60000,
+  testMatch: ['**/*.test.ts(x)?'],
+  collectCoverage: true,
+  setupFiles: ['<rootDir>/jest.setup.cjs'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  /**
+   * Don't try to transform the package `next-intl`, or else you will get the error:
+   * "SyntaxError: Cannot use import statement outside a module"
+   *
+   * `next-intl` uses ECMAScript Modules (ESM) and Jest provides some experimental support for it
+   * but "node_modules" are not transpiled by next/jest yet.
+   *
+   * @link https://github.com/vercel/next.js/issues/36077#issuecomment-1096698456
+   * @link https://jestjs.io/docs/ecmascript-modules
+   */
+  transformIgnorePatterns: ['node_modules/(?!(next-intl)/)'],
+};
+
+module.exports = createJestConfig(customJestConfig);

apps/researcher/next.config.mjs

@@ -1,13 +1,12 @@
-/**
- * @type {import('next').NextConfig}
- */
+// @ts-check
 
-import NextIntlPlugin from 'next-intl/plugin';
+import createNextIntlPlugin from 'next-intl/plugin';
 import MDXPlugin from '@next/mdx';
 
-const withNextIntl = NextIntlPlugin('./src/i18n.ts');
+const withNextIntl = createNextIntlPlugin('./src/i18n.ts');
 const withMDX = MDXPlugin();
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ['@colonial-collections/ui'],
   experimental: {

apps/researcher/package.json

@@ -2,6 +2,7 @@
   "name": "researcher",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "files": [],
   "engines": {
     "node": "18.x"
@@ -35,7 +36,7 @@
     "@hookform/resolvers": "3.3.4",
     "@next/mdx": "14.1.0",
     "classnames": "2.3.2",
-    "iso-639-1-dir": "3.0.5",
+    "iso-639-1": "3.1.2",
     "jwt-decode": "4.0.0",
     "leaflet": "1.9.4",
     "leaflet-defaulticon-compatibility": "0.1.2",
@@ -62,14 +63,14 @@
     "@types/react": "18.2.56",
     "@types/react-dom": "18.2.19",
     "autoprefixer": "10.4.18",
-    "cypress": "13.6.2",
-    "eslint-config-custom": "*",
+    "cypress": "13.7.0",
+    "@colonial-collections/eslint-config": "*",
     "gts": "5.2.0",
     "jest": "29.7.0",
     "postcss": "8.4.33",
-    "tailwind-config": "*",
+    "@colonial-collections/tailwind-config": "*",
     "tailwindcss": "3.4.1",
-    "tsconfig": "*",
+    "@colonial-collections/ts-config": "*",
     "typescript": "5.3.3"
   }
 }

apps/researcher/postcss.config.json

@@ -0,0 +1,6 @@
+{
+  "plugins": {
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}

apps/researcher/src/app/[locale]/objects/[id]/metadata.tsx

@@ -9,8 +9,7 @@ import {getFormatter} from 'next-intl/server';
 import classNames from 'classnames';
 import {InformationCircleIcon} from '@heroicons/react/24/outline';
 import type {AdditionalType} from '@colonial-collections/enricher';
-import ISO6391 from 'iso-639-1-dir';
-import {LanguageCode} from 'iso-639-1-dir/dist/data';
+import ISO6391, {LanguageCode} from 'iso-639-1';
 
 interface Props {
   translationKey: string;

apps/researcher/src/app/[locale]/objects/[id]/page.tsx

@@ -14,8 +14,7 @@ import ObjectListsMenu from './object-lists-menu';
 import SignedIn from '@/lib/community/signed-in';
 import {fetcher} from '@/lib/enricher-instances';
 import {AdditionalType} from '@colonial-collections/enricher';
-import ISO6391 from 'iso-639-1-dir';
-import {LanguageCode} from 'iso-639-1-dir/dist/data';
+import ISO6391, {LanguageCode} from 'iso-639-1';
 import Provenance from './(provenance)/overview';
 import {getDateFormatter} from '@/lib/date-formatter/actions';
 import {LocaleEnum} from '@/definitions';

apps/researcher/src/components/language-selector.tsx

@@ -2,8 +2,7 @@ import {CheckIcon, ChevronUpDownIcon} from '@heroicons/react/20/solid';
 import {Combobox} from '@headlessui/react';
 import {useState} from 'react';
 import classNames from 'classnames';
-import ISO6391 from 'iso-639-1-dir';
-import {LanguageCode} from 'iso-639-1-dir/dist/data';
+import ISO6391 from 'iso-639-1';
 
 interface Props {
   value: string;
@@ -14,14 +13,14 @@ export default function LanguageSelector({value, setValue}: Props) {
   const [query, setQuery] = useState('');
 
   const filteredLanguageCodes = query
-    ? ISO6391.getLanguages()
-        .filter(languageCode => {
-          // Search in both the name and the native name
-          return `${languageCode.name.toLowerCase()} ${languageCode.nativeName.toLowerCase()}`.includes(
-            query.toLowerCase()
-          );
-        })
-        .map(languageCode => languageCode.code as LanguageCode)
+    ? ISO6391.getAllCodes().filter(code => {
+        const englishName = ISO6391.getName(code);
+        const localName = ISO6391.getNativeName(code);
+        // Search in both the name and the native name
+        return `${englishName.toLowerCase()} ${localName.toLowerCase()}`.includes(
+          query.toLowerCase()
+        );
+      })
     : ISO6391.getAllCodes();
 
   return (