Add native ESM support (#210)

Author: wojtekmaj

package.json

@@ -2,18 +2,27 @@
   "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"
+    },
+    "./dist/Clock.css": "./dist/Clock.css"
+  },
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
-    "build-js": "yarn build-js-esm && yarn build-js-cjs",
+    "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
     "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-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -23,7 +32,7 @@
     "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
     "tsc": "tsc --noEmit",
     "unit": "vitest",
-    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""
+    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\""
   },
   "keywords": [
     "clock",

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;