Refactor researcher app to use ECMAScript modules (ESM)

apps/dataset-browser/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["custom"]
+}

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"

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 'tailwind-config';
+
+export default {
+  presets: [config],
+};

apps/researcher/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["custom"]
+}

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",

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 (

apps/researcher/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/researcher/tailwind.config.ts

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

apps/researcher/tsconfig.json

@@ -6,6 +6,11 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/lib", "src/types"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["cypress", "**/*.cy.tsx"]
 }

packages/eslint-config-custom/index.js

@@ -8,5 +8,6 @@ module.exports = {
         ignoreConsecutiveComments: true,
       },
     ],
+    'import/no-anonymous-default-export': [2, {allowObject: true}],
   },
 };