From 06290b0d140ba1d8a2d35a41a081e430090f30f1 Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Thu, 27 Jul 2023 23:23:01 +0200 Subject: [PATCH] Add native ESM support (#317) --- package.json | 33 ++++++++++++++++++++++++------ sample/index.tsx | 3 ++- src/TimeInput.spec.tsx | 4 ++-- src/TimeInput.tsx | 26 +++++++++++------------ src/TimeInput/AmPm.spec.tsx | 2 +- src/TimeInput/AmPm.tsx | 4 ++-- src/TimeInput/Hour12Input.spec.tsx | 2 +- src/TimeInput/Hour12Input.tsx | 8 ++++---- src/TimeInput/Hour24Input.spec.tsx | 2 +- src/TimeInput/Hour24Input.tsx | 4 ++-- src/TimeInput/MinuteInput.spec.tsx | 2 +- src/TimeInput/MinuteInput.tsx | 4 ++-- src/TimeInput/NativeInput.spec.tsx | 2 +- src/TimeInput/SecondInput.spec.tsx | 2 +- src/TimeInput/SecondInput.tsx | 4 ++-- src/TimePicker.spec.tsx | 2 +- src/TimePicker.tsx | 13 +++++++++--- src/index.ts | 4 ++-- src/shared/dates.spec.ts | 2 +- src/shared/dates.ts | 2 +- src/shared/propTypes.ts | 2 +- src/shared/utils.spec.ts | 2 +- src/shared/utils.ts | 2 +- test/MaxDetailOptions.tsx | 2 +- test/Test.tsx | 16 +++++++-------- test/ValueOptions.tsx | 2 +- test/index.tsx | 2 +- 27 files changed, 91 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index fbc19cf5..0b326dc4 100644 --- a/package.json +++ b/package.json @@ -2,18 +2,39 @@ "name": "react-time-picker", "version": "6.3.0", "description": "A time 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/TimeInput.js": "./dist/cjs/TimeInput.js", + "./dist/cjs/TimeInput/Hour12Input.js": "./dist/cjs/TimeInput/Hour12Input.js", + "./dist/cjs/TimeInput/Hour24Input.js": "./dist/cjs/TimeInput/Hour24Input.js", + "./dist/cjs/TimeInput/MinuteInput.js": "./dist/cjs/TimeInput/MinuteInput.js", + "./dist/cjs/TimeInput/SecondInput.js": "./dist/cjs/TimeInput/SecondInput.js", + "./dist/cjs/TimeInput/AmPm.js": "./dist/cjs/TimeInput/AmPm.js", + "./dist/esm/TimeInput.js": "./dist/esm/TimeInput.js", + "./dist/esm/TimeInput/Hour12Input.js": "./dist/esm/TimeInput/Hour12Input.js", + "./dist/esm/TimeInput/Hour24Input.js": "./dist/esm/TimeInput/Hour24Input.js", + "./dist/esm/TimeInput/MinuteInput.js": "./dist/esm/TimeInput/MinuteInput.js", + "./dist/esm/TimeInput/SecondInput.js": "./dist/esm/TimeInput/SecondInput.js", + "./dist/esm/TimeInput/AmPm.js": "./dist/esm/TimeInput/AmPm.js", + "./dist/TimePicker.css": "./dist/TimePicker.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 +44,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": [ "react", diff --git a/sample/index.tsx b/sample/index.tsx index 79a5a7ce..5a6a8183 100644 --- 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(); diff --git a/src/TimeInput.spec.tsx b/src/TimeInput.spec.tsx index d0437e7a..a5f66309 100644 --- a/src/TimeInput.spec.tsx +++ b/src/TimeInput.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 TimeInput from './TimeInput'; +import TimeInput from './TimeInput.js'; -import { muteConsole, restoreConsole } from '../test-utils'; +import { muteConsole, restoreConsole } from '../test-utils.js'; vi.useFakeTimers(); diff --git a/src/TimeInput.tsx b/src/TimeInput.tsx index 8c71ae86..9ec0ae73 100644 --- a/src/TimeInput.tsx +++ b/src/TimeInput.tsx @@ -9,19 +9,19 @@ import { getHoursMinutesSeconds, } from '@wojtekmaj/date-utils'; -import Divider from './Divider'; -import Hour12Input from './TimeInput/Hour12Input'; -import Hour24Input from './TimeInput/Hour24Input'; -import MinuteInput from './TimeInput/MinuteInput'; -import SecondInput from './TimeInput/SecondInput'; -import NativeInput from './TimeInput/NativeInput'; -import AmPm from './TimeInput/AmPm'; - -import { getFormatter, getNumberFormatter } from './shared/dateFormatter'; -import { convert12to24, convert24to12 } from './shared/dates'; -import { getAmPmLabels } from './shared/utils'; - -import type { AmPmType, Detail, LooseValuePiece, Value } from './shared/types'; +import Divider from './Divider.js'; +import Hour12Input from './TimeInput/Hour12Input.js'; +import Hour24Input from './TimeInput/Hour24Input.js'; +import MinuteInput from './TimeInput/MinuteInput.js'; +import SecondInput from './TimeInput/SecondInput.js'; +import NativeInput from './TimeInput/NativeInput.js'; +import AmPm from './TimeInput/AmPm.js'; + +import { getFormatter, getNumberFormatter } from './shared/dateFormatter.js'; +import { convert12to24, convert24to12 } from './shared/dates.js'; +import { getAmPmLabels } from './shared/utils.js'; + +import type { AmPmType, Detail, LooseValuePiece, Value } from './shared/types.js'; const getFormatterOptionsCache: Record = {}; diff --git a/src/TimeInput/AmPm.spec.tsx b/src/TimeInput/AmPm.spec.tsx index 408dd34a..d2a7a816 100644 --- a/src/TimeInput/AmPm.spec.tsx +++ b/src/TimeInput/AmPm.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React from 'react'; import { render } from '@testing-library/react'; -import AmPm from './AmPm'; +import AmPm from './AmPm.js'; describe('AmPm', () => { const defaultProps = { diff --git a/src/TimeInput/AmPm.tsx b/src/TimeInput/AmPm.tsx index ddb49d47..71c7cbc6 100644 --- a/src/TimeInput/AmPm.tsx +++ b/src/TimeInput/AmPm.tsx @@ -2,8 +2,8 @@ import React from 'react'; import clsx from 'clsx'; import { getHours } from '@wojtekmaj/date-utils'; -import { convert24to12 } from '../shared/dates'; -import { getAmPmLabels } from '../shared/utils'; +import { convert24to12 } from '../shared/dates.js'; +import { getAmPmLabels } from '../shared/utils.js'; /* eslint-disable jsx-a11y/no-autofocus */ diff --git a/src/TimeInput/Hour12Input.spec.tsx b/src/TimeInput/Hour12Input.spec.tsx index fb22a48c..e39e3132 100644 --- a/src/TimeInput/Hour12Input.spec.tsx +++ b/src/TimeInput/Hour12Input.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React, { createRef } from 'react'; import { render } from '@testing-library/react'; -import Hour12Input from './Hour12Input'; +import Hour12Input from './Hour12Input.js'; describe('Hour12Input', () => { const defaultProps = { diff --git a/src/TimeInput/Hour12Input.tsx b/src/TimeInput/Hour12Input.tsx index 18624db2..b90df542 100644 --- a/src/TimeInput/Hour12Input.tsx +++ b/src/TimeInput/Hour12Input.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { getHours } from '@wojtekmaj/date-utils'; -import Input from './Input'; +import Input from './Input.js'; -import { convert24to12 } from '../shared/dates'; -import { safeMin, safeMax } from '../shared/utils'; +import { convert24to12 } from '../shared/dates.js'; +import { safeMin, safeMax } from '../shared/utils.js'; -import type { AmPmType } from '../shared/types'; +import type { AmPmType } from '../shared/types.js'; type Hour12InputProps = { amPm: AmPmType | null; diff --git a/src/TimeInput/Hour24Input.spec.tsx b/src/TimeInput/Hour24Input.spec.tsx index 56a5dbdd..8e96dea8 100644 --- a/src/TimeInput/Hour24Input.spec.tsx +++ b/src/TimeInput/Hour24Input.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React, { createRef } from 'react'; import { render } from '@testing-library/react'; -import Hour24Input from './Hour24Input'; +import Hour24Input from './Hour24Input.js'; describe('Hour24Input', () => { const defaultProps = { diff --git a/src/TimeInput/Hour24Input.tsx b/src/TimeInput/Hour24Input.tsx index 427c290d..45914537 100644 --- a/src/TimeInput/Hour24Input.tsx +++ b/src/TimeInput/Hour24Input.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { getHours } from '@wojtekmaj/date-utils'; -import Input from './Input'; +import Input from './Input.js'; -import { safeMin, safeMax } from '../shared/utils'; +import { safeMin, safeMax } from '../shared/utils.js'; type Hour24InputProps = { maxTime?: string; diff --git a/src/TimeInput/MinuteInput.spec.tsx b/src/TimeInput/MinuteInput.spec.tsx index dcb0445e..58fc0d79 100644 --- a/src/TimeInput/MinuteInput.spec.tsx +++ b/src/TimeInput/MinuteInput.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React, { createRef } from 'react'; import { render } from '@testing-library/react'; -import MinuteInput from './MinuteInput'; +import MinuteInput from './MinuteInput.js'; describe('MinuteInput', () => { const defaultProps = { diff --git a/src/TimeInput/MinuteInput.tsx b/src/TimeInput/MinuteInput.tsx index 4a641e5f..a731879e 100644 --- a/src/TimeInput/MinuteInput.tsx +++ b/src/TimeInput/MinuteInput.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { getHours, getMinutes } from '@wojtekmaj/date-utils'; -import Input from './Input'; +import Input from './Input.js'; -import { safeMin, safeMax } from '../shared/utils'; +import { safeMin, safeMax } from '../shared/utils.js'; type MinuteInputProps = { hour?: string | null; diff --git a/src/TimeInput/NativeInput.spec.tsx b/src/TimeInput/NativeInput.spec.tsx index 492b30eb..a10de8aa 100644 --- a/src/TimeInput/NativeInput.spec.tsx +++ b/src/TimeInput/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/TimeInput/SecondInput.spec.tsx b/src/TimeInput/SecondInput.spec.tsx index 1520bc79..edc7f5c3 100644 --- a/src/TimeInput/SecondInput.spec.tsx +++ b/src/TimeInput/SecondInput.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React, { createRef } from 'react'; import { render } from '@testing-library/react'; -import SecondInput from './SecondInput'; +import SecondInput from './SecondInput.js'; describe('SecondInput', () => { const defaultProps = { diff --git a/src/TimeInput/SecondInput.tsx b/src/TimeInput/SecondInput.tsx index 5ff8fc52..c1dec7b4 100644 --- a/src/TimeInput/SecondInput.tsx +++ b/src/TimeInput/SecondInput.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { getHours, getMinutes, getSeconds } from '@wojtekmaj/date-utils'; -import Input from './Input'; +import Input from './Input.js'; -import { safeMin, safeMax } from '../shared/utils'; +import { safeMin, safeMax } from '../shared/utils.js'; type SecondInputProps = { hour?: string | null; diff --git a/src/TimePicker.spec.tsx b/src/TimePicker.spec.tsx index f59a7ff8..262d7668 100644 --- a/src/TimePicker.spec.tsx +++ b/src/TimePicker.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 TimePicker from './TimePicker'; +import TimePicker from './TimePicker.js'; async function waitForElementToBeRemovedOrHidden(callback: () => HTMLElement | null) { const element = callback(); diff --git a/src/TimePicker.tsx b/src/TimePicker.tsx index 57d168ac..0409aeba 100644 --- a/src/TimePicker.tsx +++ b/src/TimePicker.tsx @@ -8,12 +8,19 @@ import clsx from 'clsx'; import Clock from 'react-clock'; import Fit from 'react-fit'; -import TimeInput from './TimeInput'; +import TimeInput from './TimeInput.js'; -import { isTime, rangeOf } from './shared/propTypes'; +import { isTime, 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-time-picker'; const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'] as const; diff --git a/src/index.ts b/src/index.ts index 41551176..96d74e4c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,6 @@ -import TimePicker from './TimePicker'; +import TimePicker from './TimePicker.js'; -export type { TimePickerProps } from './TimePicker'; +export type { TimePickerProps } from './TimePicker.js'; export { TimePicker }; diff --git a/src/shared/dates.spec.ts b/src/shared/dates.spec.ts index d22c31e6..33b5895b 100644 --- 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 index c8738740..fce5cbef 100644 --- 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 index 9a4d621a..e9777d84 100644 --- 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 index 3ddbc8ed..67c6574b 100644 --- a/src/shared/utils.spec.ts +++ b/src/shared/utils.spec.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { safeMin, safeMax } from './utils'; +import { safeMin, safeMax } from './utils.js'; describe('safeMin', () => { it('returns Infinity given no values', () => { diff --git a/src/shared/utils.ts b/src/shared/utils.ts index b98b38bc..b6df4b3b 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -1,4 +1,4 @@ -import { getFormatter } from './dateFormatter'; +import { getFormatter } from './dateFormatter.js'; const nines = ['9', '٩']; const ninesRegExp = new RegExp(`[${nines.join('')}]`); diff --git a/test/MaxDetailOptions.tsx b/test/MaxDetailOptions.tsx index c4dbdca0..152180a4 100644 --- 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 index a6c7f76b..520d0e04 100644 --- a/test/Test.tsx +++ b/test/Test.tsx @@ -1,18 +1,18 @@ import React, { useRef, useState } from 'react'; -import TimePicker from 'react-time-picker/src'; -import 'react-time-picker/src/TimePicker.css'; +import TimePicker from 'react-time-picker'; +import 'react-time-picker/dist/TimePicker.css'; import 'react-clock/dist/Clock.css'; import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils'; -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 type { Detail, LooseValue } from './shared/types'; +import type { Detail, LooseValue } from './shared/types.js'; const now = new Date(); diff --git a/test/ValueOptions.tsx b/test/ValueOptions.tsx index 24975329..b838813f 100644 --- a/test/ValueOptions.tsx +++ b/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; diff --git a/test/index.tsx b/test/index.tsx index 4a67864f..c355c527 100644 --- 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(