Add native ESM support (#210)

package.json

@@ -2,18 +2,26 @@
   "name": "react-clock",
   "version": "4.4.0",
   "description": "An analog clock for your React app.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "source": "src/index.ts",
-  "types": "dist/cjs/index.d.ts",
+  "type": "module",
   "sideEffects": [
     "*.css"
   ],
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "source": "./src/index.ts",
+  "types": "./dist/cjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./src": "./src/index.ts"
+  },
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
     "build-js": "yarn build-js-esm && yarn build-js-cjs",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
-    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
+    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs && echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "node --loader ts-node/esm ./copy-styles.ts",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

sample/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Sample from './Sample';
+
+import Sample from './Sample.js';
 
 createRoot(document.getElementById('react-root') as HTMLDivElement).render(<Sample />);

src/Clock.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Clock from './Clock';
+import Clock from './Clock.js';
 
 describe('Clock', () => {
   describe('<time> element', () => {

src/Clock.tsx

@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { getHours, getMilliseconds, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
 
-import Hand from './Hand';
-import MinuteMark from './MinuteMark';
-import HourMark from './HourMark';
+import Hand from './Hand.js';
+import MinuteMark from './MinuteMark.js';
+import HourMark from './HourMark.js';
 
-import type { formatHour as defaultFormatHour } from './shared/hourFormatter';
+import type { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
 
 import {
   isHandLength,
   isOppositeHandLength,
   isHandWidth,
   isMarkLength,
   isMarkWidth,
-} from './shared/propTypes';
+} from './shared/propTypes.js';
 
 import type {
   ClassName,
@@ -24,7 +24,7 @@ import type {
   MarkLength,
   MarkWidth,
   OppositeHandLength,
-} from './shared/types';
+} from './shared/types.js';
 
 export type ClockProps = {
   className?: ClassName;

src/Hand.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Hand from './Hand';
+import Hand from './Hand.js';
 
 describe('Hand', () => {
   it('renders a hand with given name', () => {

src/Hand.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { HandLength, HandWidth, OppositeHandLength } from './shared/types';
+import type { HandLength, HandWidth, OppositeHandLength } from './shared/types.js';
 
 type HandProps = {
   angle?: number;

src/HourMark.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import HourMark from './HourMark';
+import HourMark from './HourMark.js';
 
 describe('HourMark', () => {
   it('renders Mark', () => {

src/HourMark.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
 
-import Mark from './Mark';
+import Mark from './Mark.js';
 
-import { formatHour as defaultFormatHour } from './shared/hourFormatter';
+import { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
 
 type HourMarkProps = React.ComponentProps<typeof Mark> & {
   formatHour?: typeof defaultFormatHour;

src/Mark.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import Mark from './Mark';
+import Mark from './Mark.js';
 
 describe('Mark', () => {
   it('renders a hand with given name', () => {

src/Mark.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { MarkLength, MarkWidth } from './shared/types';
+import type { MarkLength, MarkWidth } from './shared/types.js';
 
 type MarkProps = {
   angle?: number;

src/MinuteMark.spec.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import MinuteMark from './MinuteMark';
+import MinuteMark from './MinuteMark.js';
 
 describe('MinuteMark', () => {
   it('renders Mark', () => {

src/MinuteMark.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import Mark from './Mark';
+import Mark from './Mark.js';
 
 type MinuteMarkProps = React.ComponentProps<typeof Mark>;
 

src/index.ts

@@ -1,6 +1,6 @@
-import Clock from './Clock';
+import Clock from './Clock.js';
 
-export type { ClockProps } from './Clock';
+export type { ClockProps } from './Clock.js';
 
 export { Clock };
 

test/Test.tsx

@@ -4,13 +4,13 @@ import 'react-clock/src/Clock.css';
 import { useSetInterval } from '@wojtekmaj/react-hooks';
 import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';
 
-import LocaleOptions from './LocaleOptions';
-import ValueOptions from './ValueOptions';
-import ViewOptions from './ViewOptions';
+import LocaleOptions from './LocaleOptions.js';
+import ValueOptions from './ValueOptions.js';
+import ViewOptions from './ViewOptions.js';
 
 import './Test.css';
 
-import type { LooseValue } from './shared/types';
+import type { LooseValue } from './shared/types.js';
 
 /* eslint-disable no-console */
 

test/ValueOptions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';
 
-import type { LooseValue } from './shared/types';
+import type { LooseValue } from './shared/types.js';
 
 type ValueOptionsProps = {
   setValue: (value: LooseValue) => void;

test/index.tsx

@@ -1,7 +1,7 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Test from './Test';
+import Test from './Test.js';
 
 createRoot(document.getElementById('react-root') as HTMLDivElement).render(
   <StrictMode>