From e1e8304fdcb8b696e60575ac0ae8d1b5dd2feb1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Tue, 15 Oct 2024 18:01:09 +0200 Subject: [PATCH] feat: make module native ESM --- .eslintrc.yml | 1 - .gitignore | 2 +- eslint.config.mjs | 4 +++ package.json | 41 ++++++++++++++++++------------- postcss.config.js | 4 +-- src/OCLnmr.tsx | 25 ++++++++++--------- tailwind.config.js | 2 +- tsconfig.cjs.json | 15 ++++++----- tsconfig.esm.json | 8 ++---- tsconfig.json | 25 +++++++++++++------ vite.config.mts => vite.config.ts | 0 11 files changed, 74 insertions(+), 53 deletions(-) delete mode 100644 .eslintrc.yml create mode 100644 eslint.config.mjs rename vite.config.mts => vite.config.ts (100%) diff --git a/.eslintrc.yml b/.eslintrc.yml deleted file mode 100644 index 7ccd66c..0000000 --- a/.eslintrc.yml +++ /dev/null @@ -1 +0,0 @@ -extends: '@zakodium/eslint-config/typescript-react' diff --git a/.gitignore b/.gitignore index 6b22c50..50fe083 100644 --- a/.gitignore +++ b/.gitignore @@ -118,4 +118,4 @@ dist .DS_Store lib -lib-esm +lib-cjs diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..3f5cbe2 --- /dev/null +++ b/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]; diff --git a/package.json b/package.json index ab4c5ce..8a06974 100644 --- a/package.json +++ b/package.json @@ -2,22 +2,28 @@ "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" @@ -25,11 +31,11 @@ "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" } } diff --git a/postcss.config.js b/postcss.config.js index fd3fc47..01bf743 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,4 @@ -'use strict'; - -module.exports = { +export default { plugins: { tailwindcss: {}, }, diff --git a/src/OCLnmr.tsx b/src/OCLnmr.tsx index 87434d4..cef76df 100644 --- a/src/OCLnmr.tsx +++ b/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 ; + return ; } function getAtomIDsFromDiaID(topicMolecule: TopicMolecule, diaID: string) { diff --git a/tailwind.config.js b/tailwind.config.js index 475b372..fbb429f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,4 @@ -module.exports = { +export default { content: [ './src/**/*.{js,jsx,ts,tsx}', './test-app/**/*.{js,jsx,ts,tsx}', diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json index 637fbe5..2ceb092 100644 --- a/tsconfig.cjs.json +++ b/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 + } } diff --git a/tsconfig.esm.json b/tsconfig.esm.json index 87342f9..d1a1750 100644 --- a/tsconfig.esm.json +++ b/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"] } diff --git a/tsconfig.json b/tsconfig.json index 8db8e09..e18f6cb 100644 --- a/tsconfig.json +++ b/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" + ] } diff --git a/vite.config.mts b/vite.config.ts similarity index 100% rename from vite.config.mts rename to vite.config.ts