feat: make module native ESM

.gitignore

@@ -118,4 +118,4 @@ dist
 .DS_Store
 
 lib
-lib-esm
+lib-cjs

eslint.config.mjs

@@ -0,0 +1,4 @@
+import react from 'eslint-config-zakodium/react';
+import ts from 'eslint-config-zakodium/ts';
+
+export default [...ts, ...react];

package.json

@@ -2,34 +2,40 @@
   "name": "react-ocl-nmr",
   "version": "3.0.3",
   "description": "A component to display chemical structure for NMR spectra assignments",
-  "main": "./lib/OCLnmr.js",
-  "module": "./lib-esm/OCLnmr.js",
+  "type": "module",
   "files": [
-    "src",
     "lib",
-    "lib-esm"
+    "lib-cjs",
+    "src"
   ],
+  "exports": {
+    ".": {
+      "types": "./lib/OCLnmr.d.ts",
+      "require": "./lib-cjs/OCLnmr.js",
+      "default": "./lib/OCLnmr.js"
+    }
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zakodium/react-ocl-nmr.git"
+    "url": "git+https://github.com/zakodium-oss/react-ocl-nmr.git"
   },
   "keywords": [],
   "author": "Luc Patiny",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/zakodium/react-ocl-nmr/issues"
+    "url": "https://github.com/zakodium-oss/react-ocl-nmr/issues"
   },
   "peerDependencies": {
     "openchemlib": ">=8"
   },
   "dependencies": {
     "openchemlib": "^8.15.0",
     "openchemlib-utils": "^6.4.1",
-    "react-ocl": "^6.1.0"
+    "react-ocl": "^7.0.2"
   },
   "scripts": {
     "check-types": "tsc --noEmit",
-    "clean": "rimraf lib lib-esm",
+    "clean": "rimraf lib lib-cjs",
     "dev": "vite",
     "eslint": "eslint src --cache",
     "eslint-fix": "npm run eslint -- --fix",
@@ -41,21 +47,22 @@
     "test-only": "jest",
     "tsc": "npm run clean && npm run tsc-cjs && npm run tsc-esm",
     "tsc-cjs": "tsc --project tsconfig.cjs.json",
+    "posttsc-cjs": "echo '{\"type\":\"commonjs\"}' > lib-cjs/package.json",
     "tsc-esm": "tsc --project tsconfig.esm.json"
   },
   "devDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@zakodium/eslint-config": "^6.0.0",
-    "eslint": "^8.47.0",
-    "postcss": "^8.4.45",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^9.12.0",
+    "eslint-config-zakodium": "^13.0.0",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.11",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.5"
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9"
   }
 }

postcss.config.js

@@ -1,6 +1,4 @@
-'use strict';
-
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
   },

src/OCLnmr.tsx

@@ -1,12 +1,15 @@
 import type { Molecule } from 'openchemlib';
-import { TopicMolecule, toggleHydrogens } from 'openchemlib-utils';
 import type { DiaIDAndInfo } from 'openchemlib-utils';
-import { useState, useMemo, MouseEvent, useRef } from 'react';
-import { MolfileSvgRenderer, IMolfileSvgRendererProps } from 'react-ocl/base';
+import { toggleHydrogens, TopicMolecule } from 'openchemlib-utils';
+import { type MouseEvent, useMemo, useRef, useState } from 'react';
+import {
+  BaseMolfileSvgRenderer,
+  type BaseMolfileSvgRendererProps,
+} from 'react-ocl/base';
 
 export interface OCLnmrProps
   extends Omit<
-    IMolfileSvgRendererProps,
+    BaseMolfileSvgRendererProps,
     'atomHighlight' | 'onAtomEnter' | 'onAtomLeave' | 'onAtomClick'
   > {
   setMolfile: (molfile: string) => void;
@@ -58,15 +61,15 @@ export default function OCLnmr(props: OCLnmrProps) {
 
   const externalHighlights = useMemo(() => {
     // if the highlight is a proton and there is no proton we will highlight the carbon
-    let allAtoms = [];
-    let currentHighlights = [...highlights];
+    const allAtoms = [];
+    const currentHighlights = [...highlights];
     // we receive an array of diaIDs to highlight
-    for (let highlight of currentHighlights) {
-      let atomIDs = getAtomIDsFromDiaID(topicMolecule, highlight);
+    for (const highlight of currentHighlights) {
+      const atomIDs = getAtomIDsFromDiaID(topicMolecule, highlight);
       if (!atomIDs) continue;
       allAtoms.push(...atomIDs);
 
-      for (let atomID of atomIDs) {
+      for (const atomID of atomIDs) {
         if (
           atomID >= topicMolecule.molecule.getAllAtoms() &&
           topicMolecule.diaIDsAndInfo[atomID].heavyAtom
@@ -79,7 +82,7 @@ export default function OCLnmr(props: OCLnmrProps) {
     return [...allAtoms];
   }, [highlights, topicMolecule]);
 
-  const options: IMolfileSvgRendererProps = {
+  const options: BaseMolfileSvgRendererProps = {
     OCL,
     molfile: normalizedMolfile,
     atomHighlight:
@@ -115,7 +118,7 @@ export default function OCLnmr(props: OCLnmrProps) {
       }
     },
   };
-  return <MolfileSvgRenderer {...otherProps} {...options} />;
+  return <BaseMolfileSvgRenderer {...otherProps} {...options} />;
 }
 
 function getAtomIDsFromDiaID(topicMolecule: TopicMolecule, diaID: string) {

tailwind.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
     './test-app/**/*.{js,jsx,ts,tsx}',

tsconfig.cjs.json

@@ -1,9 +1,12 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.esm.json",
   "compilerOptions": {
-    "module": "commonjs",
-    "outDir": "lib",
-    "declaration": true
-  },
-  "exclude": ["./src/**/__tests__"]
+    "outDir": "lib-cjs",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "verbatimModuleSyntax": false,
+    "esModuleInterop": true,
+    "declaration": false,
+    "declarationMap": false
+  }
 }

tsconfig.esm.json

@@ -1,8 +1,4 @@
 {
-  "extends": "./tsconfig.cjs.json",
-  "compilerOptions": {
-    "module": "es2020",
-    "outDir": "lib-esm",
-    "declaration": false
-  }
+  "extends": "./tsconfig.json",
+  "exclude": ["vite.config.ts"]
 }

tsconfig.json

@@ -1,12 +1,23 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "strict": true,
-    "target": "es2020",
+    "lib": ["DOM", "ES2022"],
+    "types": [],
+    "target": "ES2022",
+    "outDir": "lib",
     "jsx": "react-jsx",
-    "skipLibCheck": true
+    "module": "NodeNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": false,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": false,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true
   },
-  "include": ["./src/**/*"]
+  "include": ["src",
+    "vite.config.ts"
+  ]
 }