refactor: make module compatible with the native ESM

Dockerfile

@@ -5,8 +5,7 @@ WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 
 COPY package.json ./
-COPY package-lock.json ./
-RUN npm install --silent
-RUN npm install react-scripts@latest -g --silent
+RUN npm i --silent
+RUN npm i react-scripts@latest -g --silent
 
 COPY . ./

Dockerfile.dev

@@ -1,12 +1,12 @@
 # build environment
-FROM node:22-alpine3.18 as build
+FROM node:22-alpine as build
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 COPY package.json ./
-COPY package-lock.json ./
 RUN export NODE_OPTIONS=--max-old-space-size=8192
-RUN npm ci --silent
-RUN npm install react-scripts@latest -g --silent
+RUN npm i --silent 
+
+RUN npm i react-scripts@latest -g --silent
 COPY . ./
 RUN npm run build
 

Dockerfile.prod

@@ -7,10 +7,9 @@ FROM node:22-alpine3.18 as build
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 COPY package.json ./
-COPY package-lock.json ./
 RUN export NODE_OPTIONS=--max-old-space-size=8192
-RUN npm ci --silent
-RUN npm install react-scripts@latest -g --silent
+RUN npm i --silent
+RUN npm i react-scripts@latest -g --silent
 COPY . ./
 RUN echo "export default { version: '$RELEASE_VERSION' };" > src/versionInfo.ts
 RUN npm run build -- --outDir=build

eslint.config.mjs

@@ -19,6 +19,13 @@ export default [
     ...ts,
     ...unicorn,
     ...react,
+    {
+        files: ['**/*.{ts,tsx,cts,mts}'],
+        rules: {
+            '@typescript-eslint/consistent-type-imports': 'error',
+            'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+        },
+    },
     {
         rules: {
             'import/default': 'off',

package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": false,
   "license": "MIT",
-  "main": "lib/NMRiumWrapper.js",
-  "module": "lib/NMRiumWrapper.js",
+  "type": "module",
+  "exports": "./lib/NMRiumWrapper.js",
   "files": [
     "lib"
   ],
@@ -20,8 +20,7 @@
     "nmr-load-save": "^3.1.2",
     "nmr-processing": "^16.0.1",
     "nmrium": "^0.60.1-pre.1741337420",
-    "react-science": "^14.0.0",
-    "vite-plugin-pwa": "^0.21.1"
+    "react-science": "^14.0.0"
   },
   "scripts": {
     "start": "vite --host localhost --port 3000  --open",
@@ -31,8 +30,8 @@
     "test": "jest --coverage",
     "eslint": "eslint . --cache",
     "eslint-fix": "npm run eslint -- --fix",
-    "compile": "tsc --project tsconfig.esm.json",
-    "check-types": "tsc --project tsconfig.esm.json",
+    "compile": "tsc --project tsconfig.build.json",
+    "check-types": "tsc --noEmit",
     "prettier": "prettier --check src",
     "prettier-write": "prettier --write src",
     "test-e2e": "playwright test --project chromium",
@@ -61,6 +60,7 @@
     "react-router-dom": "^7.3.0",
     "serve": "^14.2.4",
     "typescript": "^5.8.2",
-    "vite": "^6.2.1"
+    "vite": "^6.2.1",
+    "vite-plugin-pwa": "^0.21.1"
   }
-}
+}

src/NMRiumWrapper.tsx

@@ -4,11 +4,11 @@ import type { CSSProperties } from 'react';
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { RootLayout } from 'react-science/ui';
 
-import events from './events';
-import { useLoadSpectra } from './hooks/useLoadSpectra';
-import { usePreferences } from './hooks/usePreferences';
-import { useWhiteList } from './hooks/useWhiteList';
-import AboutUsModal from './modal/AboutUsModal';
+import events from './events/event.js';
+import { useLoadSpectra } from './hooks/useLoadSpectra.js';
+import { usePreferences } from './hooks/usePreferences.js';
+import { useWhiteList } from './hooks/useWhiteList.js';
+import AboutUsModal from './modal/AboutUsModal.js';
 
 const styles: Record<'container' | 'loadingContainer', CSSProperties> = {
   container: {

src/demo/NMRiumWrapperDemo.tsx

@@ -2,11 +2,11 @@ import styled from '@emotion/styled';
 import type { NMRiumData } from 'nmrium';
 import { Button } from 'react-science/ui';
 
-import NMRiumWrapper from '../NMRiumWrapper';
-import events from '../events';
-import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs';
+import NMRiumWrapper from '../NMRiumWrapper.js';
+import events from '../events/event.js';
+import { loadFilesFromURLs } from '../utilities/loadFilesFromURLs.js';
 
-import jsonData from './data/test.json';
+import jsonData from './data/test.json' with { type: 'json' };
 
 const Container = styled.div`
   display: flex;
@@ -29,7 +29,7 @@ export default function NMRiumWrapperDemo() {
           style={{ marginRight: '10px' }}
           onClick={() => {
             events.trigger('load', {
-              data: jsonData as NMRiumData,
+              data: jsonData as unknown as NMRiumData,
               type: 'nmrium',
             });
           }}

src/events/event.ts

@@ -1,4 +1,4 @@
-import type { EventType, EventData } from './types';
+import type { EventType, EventData } from './types.js';
 
 const namespace = 'nmr-wrapper';
 

src/hooks/useLoadSpectra.ts

@@ -4,9 +4,9 @@ import type { NmriumState, ParsingOptions, ViewState } from 'nmr-load-save';
 import { read, readFromWebSource, CURRENT_EXPORT_VERSION } from 'nmr-load-save';
 import { useCallback, useMemo, useState } from 'react';
 
-import events from '../events';
-import { getFileNameFromURL } from '../utilities/getFileNameFromURL';
-import { isArrayOfString } from '../utilities/isArrayOfString';
+import events from '../events/event.js';
+import { getFileNameFromURL } from '../utilities/getFileNameFromURL.js';
+import { isArrayOfString } from '../utilities/isArrayOfString.js';
 
 type DeepPartial<T> = {
   [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];

src/hooks/usePreferences.ts

@@ -2,7 +2,7 @@ import type { CustomWorkspaces, WorkspacePreferences } from 'nmr-load-save';
 import type { NMRiumWorkspace } from 'nmrium';
 import { useLayoutEffect, useState } from 'react';
 
-import { getNmrXivWorkspace } from '../workspaces/nmrxiv';
+import { getNmrXivWorkspace } from '../workspaces/nmrxiv.js';
 
 interface Preferences {
   preferences: WorkspacePreferences | undefined;

src/index.tsx

@@ -6,8 +6,8 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router, Route, Routes } from 'react-router-dom';
 import { registerSW } from 'virtual:pwa-register';
 
-import NMRiumWrapper from './NMRiumWrapper';
-import NMRiumWrapperDemo from './demo/NMRiumWrapperDemo';
+import NMRiumWrapper from './NMRiumWrapper.js';
+import NMRiumWrapperDemo from './demo/NMRiumWrapperDemo.js';
 
 const rootContainer = document.querySelector('#root');
 

src/modal/AboutUsModal.tsx

@@ -2,7 +2,7 @@ import { Dialog, DialogBody } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { useOnOff } from 'react-science/ui';
 
-import versionInfo from '../versionInfo';
+import versionInfo from '../versionInfo.js';
 
 const Title = styled.span`
   font-weight: bold;

src/utilities/loadFilesFromURLs.ts

@@ -1,4 +1,4 @@
-import { getFileNameFromURL } from './getFileNameFromURL';
+import { getFileNameFromURL } from './getFileNameFromURL.js';
 
 export function loadFilesFromURLs(urls: string[]): Promise<File[]> {
   const fetches = urls.map((url) =>

test-e2e/core.test.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-import NmriumWrapperPage from './NmriumWrapperPage';
+import NmriumWrapperPage from './NmriumWrapperPage.js';
 
 async function testLoadStructure(nmrium: NmriumWrapperPage) {
   // Open the "Chemical structures" panel.

tsconfig.json

@@ -2,35 +2,34 @@
   "compilerOptions": {
     "target": "ES2020",
     "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+      "DOM",
+      "ES2022"
     ],
     "types": [
-      "vite/client"
+      "vite/client",
+      "vite-plugin-pwa/client.d.ts"
     ],
+    "outDir": "lib",
     "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "strict": true,
     "noImplicitAny": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "Bundler",
-    "module": "ES2022",
+    "module": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "skipLibCheck": true,
   },
   "include": [
     "src",
     "test-e2e",
     "playwright.config.ts",
-    "vite.config.ts"
+    "vite.config.ts",
   ],
-  "exclude": [
-    "node_modules"
-  ]
 }

vite.config.ts

@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
-import { VitePWA, Options } from 'vite-plugin-pwa';
+import { VitePWA, type Options } from 'vite-plugin-pwa';
 
 const pwaSettings: Partial<Options> = {
   // cache all the imports