Add native ESM support (#391)

wojtekmaj · wojtekmaj · commit 82474e3d572d · 2023-07-28T08:53:33.000+02:00
diff --git a/package.json b/package.json
@@ -2,18 +2,31 @@
   "name": "react-datetime-picker",
   "version": "5.3.0",
   "description": "A date range picker 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/cjs/DateTimeInput": "./dist/cjs/DateTimeInput.js",
+    "./dist/cjs/DateTimeInput.js": "./dist/cjs/DateTimeInput.js",
+    "./dist/esm/DateTimeInput": "./dist/esm/DateTimeInput.js",
+    "./dist/esm/DateTimeInput.js": "./dist/esm/DateTimeInput.js",
+    "./dist/DateTimePicker.css": "./dist/DateTimePicker.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 +36,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": [
     "calendar",
diff --git a/sample/index.tsx b/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 />);
diff --git a/src/DateTimeInput.spec.tsx b/src/DateTimeInput.spec.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import DateTimeInput from './DateTimeInput';
+import DateTimeInput from './DateTimeInput.js';
 
-import { muteConsole, restoreConsole } from '../test-utils';
+import { muteConsole, restoreConsole } from '../test-utils.js';
 
 vi.useFakeTimers();
 
diff --git a/src/DateTimeInput.tsx b/src/DateTimeInput.tsx
@@ -11,7 +11,7 @@ import {
   getHoursMinutesSeconds,
 } from '@wojtekmaj/date-utils';
 
-import Divider from './Divider';
+import Divider from './Divider.js';
 import DayInput from 'react-date-picker/dist/cjs/DateInput/DayInput';
 import MonthInput from 'react-date-picker/dist/cjs/DateInput/MonthInput';
 import MonthSelect from 'react-date-picker/dist/cjs/DateInput/MonthSelect';
@@ -21,13 +21,13 @@ import Hour24Input from 'react-time-picker/dist/cjs/TimeInput/Hour24Input';
 import MinuteInput from 'react-time-picker/dist/cjs/TimeInput/MinuteInput';
 import SecondInput from 'react-time-picker/dist/cjs/TimeInput/SecondInput';
 import AmPm from 'react-time-picker/dist/cjs/TimeInput/AmPm';
-import NativeInput from './DateTimeInput/NativeInput';
+import NativeInput from './DateTimeInput/NativeInput.js';
 
-import { getFormatter, getNumberFormatter, formatDate } from './shared/dateFormatter';
-import { convert12to24, convert24to12 } from './shared/dates';
-import { between, getAmPmLabels } from './shared/utils';
+import { getFormatter, getNumberFormatter, formatDate } from './shared/dateFormatter.js';
+import { convert12to24, convert24to12 } from './shared/dates.js';
+import { between, getAmPmLabels } from './shared/utils.js';
 
-import type { AmPmType, Detail, LooseValuePiece } from './shared/types';
+import type { AmPmType, Detail, LooseValuePiece } from './shared/types.js';
 
 const getFormatterOptionsCache: Record<string, Intl.DateTimeFormatOptions> = {};
 
diff --git a/src/DateTimeInput/NativeInput.spec.tsx b/src/DateTimeInput/NativeInput.spec.tsx
@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import NativeInput from './NativeInput';
+import NativeInput from './NativeInput.js';
 
 describe('NativeInput', () => {
   const defaultProps = {
diff --git a/src/DateTimePicker.spec.tsx b/src/DateTimePicker.spec.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { act, fireEvent, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import DateTimePicker from './DateTimePicker';
+import DateTimePicker from './DateTimePicker.js';
 
 async function waitForElementToBeRemovedOrHidden(callback: () => HTMLElement | null) {
   const element = callback();
diff --git a/src/DateTimePicker.tsx b/src/DateTimePicker.tsx
@@ -9,12 +9,19 @@ import Calendar from 'react-calendar';
 import Clock from 'react-clock';
 import Fit from 'react-fit';
 
-import DateTimeInput from './DateTimeInput';
+import DateTimeInput from './DateTimeInput.js';
 
-import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes';
+import { isMaxDate, isMinDate, rangeOf } from './shared/propTypes.js';
 
 import type { ReactNodeArray } from 'prop-types';
-import type { ClassName, CloseReason, Detail, LooseValue, OpenReason, Value } from './shared/types';
+import type {
+  ClassName,
+  CloseReason,
+  Detail,
+  LooseValue,
+  OpenReason,
+  Value,
+} from './shared/types.js';
 
 const baseClassName = 'react-datetime-picker';
 const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'] as const;
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
-import DateTimePicker from './DateTimePicker';
+import DateTimePicker from './DateTimePicker.js';
 
-export type { DateTimePickerProps } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker.js';
 
 export { DateTimePicker };
 
diff --git a/src/shared/dateFormatter.spec.ts b/src/shared/dateFormatter.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { formatDate } from './dateFormatter';
+import { formatDate } from './dateFormatter.js';
 
 describe('formatDate', () => {
   it('returns proper full numeric date', () => {
diff --git a/src/shared/dates.spec.ts b/src/shared/dates.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { convert12to24, convert24to12 } from './dates';
+import { convert12to24, convert24to12 } from './dates.js';
 
 describe('convert12to24', () => {
   it.each`
diff --git a/src/shared/dates.ts b/src/shared/dates.ts
@@ -1,4 +1,4 @@
-import type { AmPmType } from './types';
+import type { AmPmType } from './types.js';
 
 export function convert12to24(hour12: string | number, amPm: AmPmType): number {
   let hour24 = Number(hour12);
diff --git a/src/shared/propTypes.ts b/src/shared/propTypes.ts
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 import type { Requireable, Validator } from 'prop-types';
-import type { Range } from './types';
+import type { Range } from './types.js';
 
 const allViews = ['hour', 'minute', 'second'];
 const allValueTypes = [...allViews];
diff --git a/src/shared/utils.spec.ts b/src/shared/utils.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { between } from './utils';
+import { between } from './utils.js';
 
 describe('between', () => {
   it('returns value when value is within set boundaries', () => {
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
@@ -1,4 +1,4 @@
-import { getFormatter } from './dateFormatter';
+import { getFormatter } from './dateFormatter.js';
 
 /**
  * Returns a value no smaller than min and no larger than max.
diff --git a/test/MaxDetailOptions.tsx b/test/MaxDetailOptions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Detail } from './shared/types';
+import type { Detail } from './shared/types.js';
 
 const allViews = ['hour', 'minute', 'second'] as const;
 
diff --git a/test/Test.tsx b/test/Test.tsx
@@ -1,18 +1,18 @@
 import React, { useRef, useState } from 'react';
-import DateTimePicker from 'react-datetime-picker/src';
-import 'react-datetime-picker/src/DateTimePicker.css';
+import DateTimePicker from 'react-datetime-picker';
+import 'react-datetime-picker/dist/DateTimePicker.css';
 import 'react-calendar/dist/Calendar.css';
 import 'react-clock/dist/Clock.css';
 
-import ValidityOptions from './ValidityOptions';
-import MaxDetailOptions from './MaxDetailOptions';
-import LocaleOptions from './LocaleOptions';
-import ValueOptions from './ValueOptions';
-import ViewOptions from './ViewOptions';
+import ValidityOptions from './ValidityOptions.js';
+import MaxDetailOptions from './MaxDetailOptions.js';
+import LocaleOptions from './LocaleOptions.js';
+import ValueOptions from './ValueOptions.js';
+import ViewOptions from './ViewOptions.js';
 
 import './Test.css';
 
-import { Detail, LooseValue } from './shared/types';
+import { Detail, LooseValue } from './shared/types.js';
 
 const now = new Date();
 
diff --git a/test/ValueOptions.tsx b/test/ValueOptions.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { getISOLocalDateTime } from '@wojtekmaj/date-utils';
 
-import type { LooseValue } from './shared/types';
+import type { LooseValue } from './shared/types.js';
 
 type ValueOptionsProps = {
   setValue: (value: LooseValue) => void;
diff --git a/test/index.tsx b/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>
