refactor: make module compatible with the native ESM

Author: hamed-musallam

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-lock.json

@@ -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/NMRiumWrapper.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/demo/NMRiumWrapperDemo.tsx

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

src/events/event.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/events/index.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/hooks/useLoadSpectra.ts

@@ -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/hooks/usePreferences.ts

@@ -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;