Migrate package to ESM (#268)

.changeset/gold-mails-double.md

@@ -0,0 +1,8 @@
+---
+'@sumup-oss/intl': major
+---
+
+**This package is now pure ESM**. Please [read this](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
+- If you use TypeScript, you need to use TypeScript 4.7 or later ([ref](https://github.com/microsoft/TypeScript/issues/46452)).
+- If you use a bundler, make sure it supports ESM and that you have correctly configured it for ESM. (Next.js supports ESM packages out of the box since [v12](https://nextjs.org/blog/next-12#es-modules-support-and-url-imports)).

.changeset/wicked-humans-deliver.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/intl': major
+---
+
+Raised the minimum Node.js version to 18+. This is the first maintained version with support for ES modules.

README.md

@@ -28,12 +28,10 @@ Creating instances of `Intl.*` formatters is an [expensive operation](https://bl
 
 ### Compatibility
 
-`@sumup-oss/intl` works in [modern browsers](https://caniuse.com/mdn-javascript_builtins_intl_numberformat_numberformat,mdn-javascript_builtins_intl_datetimeformat_datetimeformat) as well as server runtimes with support for the `Intl` APIs (such as Node 10+[^1]). When the `Intl` APIs aren't (fully) available, `@sumup-oss/intl` tries to gracefully degrade. Please refer to the [API reference](#api-reference) to learn how certain functions behave when the runtime doesn't support the necessary APIs. If you need to support legacy browsers, consider including [polyfills](https://formatjs.io/docs/polyfills/).
+`@sumup-oss/intl` works in [modern browsers](https://caniuse.com/mdn-javascript_builtins_intl_numberformat_numberformat,mdn-javascript_builtins_intl_datetimeformat_datetimeformat) as well as server runtimes with support for the `Intl` APIs (such as Node 13+). When the `Intl` APIs aren't (fully) available, `@sumup-oss/intl` tries to gracefully degrade. Please refer to the [API reference](#api-reference) to learn how certain functions behave when the runtime doesn't support the necessary APIs. If you need to support legacy browsers, consider including [polyfills](https://formatjs.io/docs/polyfills/).
 
 `@sumup-oss/intl` integrates [`temporal-polyfill`](https://www.npmjs.com/package/temporal-polyfill) to support formatting [`Temporal`](https://github.com/tc39/proposal-temporal) date-time objects.
 
-[^1]: [Node](https://nodejs.org/en/) supports the `Intl` APIs since v8, however, it includes only the English localizations up to v12. Node v13 and above support all locales. If you're unable to use Node v13+, you can either include [polyfills](https://formatjs.io/docs/polyfills/) or use a [custom Node build](https://nodejs.org/docs/latest-v8.x/api/intl.html#intl_options_for_building_node_js).
-
 ## Installation
 
 [`@sumup-oss/intl`](https://www.npmjs.com/package/@sumup-oss/intl) can be installed as a dependency via the [npm](https://www.npmjs.com) package manager. The [`temporal-polyfill`](https://www.npmjs.com/package/temporal-polyfill) package is a required peer dependency.
@@ -42,7 +40,7 @@ Creating instances of `Intl.*` formatters is an [expensive operation](https://bl
 npm install @sumup-oss/intl temporal-polyfill
 ```
 
-`@sumup-oss/intl` requires Node v10+.
+`@sumup-oss/intl` requires Node v18+.
 
 ## Usage
 

package.json

@@ -6,9 +6,12 @@
   "author": "Connor Bär <connor.baer@sumup.com>",
   "license": "Apache-2.0",
   "private": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/es/index.js",
-  "types": "dist/es/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
   "sideEffects": false,
   "files": [
     "dist",
@@ -23,9 +26,7 @@
   "scripts": {
     "start": "tsc --watch",
     "dev": "npm run start",
-    "build": "npm run build:es && npm run build:cjs",
-    "build:es": "tsc",
-    "build:cjs": "tsc --project tsconfig.cjs.json",
+    "build": "tsc",
     "docs": "typedoc",
     "lint": "foundry run eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "npm run lint -- --fix",
@@ -37,7 +38,7 @@
     "release": "changeset publish"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "dependencies": {
     "intl-format-cache": "^4.2.27"

src/data/currencies.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { Currency } from '../types';
+import { Currency } from '../types/index.js';
 
 /**
  * An object that maps a 2 char country code to its official 3 char currency code.

src/index.ts

@@ -22,7 +22,7 @@ export {
   resolveCurrencyFormat,
   isNumberFormatSupported,
   isNumberFormatToPartsSupported,
-} from './lib/number-format';
+} from './lib/number-format/index.js';
 export {
   formatDate,
   formatTime,
@@ -31,5 +31,5 @@ export {
   resolveDateTimeFormat,
   isDateTimeFormatSupported,
   isDateTimeFormatToPartsSupported,
-} from './lib/date-time-format';
-export { CURRENCIES } from './data/currencies';
+} from './lib/date-time-format/index.js';
+export { CURRENCIES } from './data/currencies.js';

src/lib/date-time-format/index.ts

@@ -18,15 +18,15 @@ import type {
   FormattableDateTime,
   FormattableTime,
   Locale,
-} from '../../types';
-import { DATE_STYLES, TIME_STYLES } from '../../data/date-time-styles';
+} from '../../types/index.js';
+import { DATE_STYLES, TIME_STYLES } from '../../data/date-time-styles.js';
 
 import {
   getDateTimeFormat,
   isDateTimeFormatSupported,
   isDateTimeFormatToPartsSupported,
   isDateTimeStyleSupported,
-} from './intl';
+} from './intl.js';
 
 export { isDateTimeFormatSupported, isDateTimeFormatToPartsSupported };
 

src/lib/date-time-format/intl.ts

@@ -16,7 +16,7 @@
 import { Intl as IntlWithTemporal } from 'temporal-polyfill';
 import memoizeFormatConstructor from 'intl-format-cache';
 
-import { Locale } from '../../types';
+import { Locale } from '../../types/index.js';
 
 /**
  * Whether the `Intl` and `Intl.DateTimeFormat` APIs
@@ -61,6 +61,7 @@ export const isDateTimeStyleSupported = (() => {
   }
 })();
 
+// @ts-expect-error intl-format-cache is bundled in a non-standard way.
 export const getDateTimeFormat = memoizeFormatConstructor(
   IntlWithTemporal.DateTimeFormat,
 ) as (

src/lib/date-time-format/tests/format-to-parts.spec.ts

@@ -16,9 +16,9 @@
 import { describe, it, expect } from 'vitest';
 import { Intl } from 'temporal-polyfill';
 
-import { formatDateTimeToParts } from '..';
+import { formatDateTimeToParts } from '../index.js';
 
-import { datetimes, locales } from './shared';
+import { datetimes, locales } from './shared.js';
 
 describe('Dates & times', () => {
   describe('formatDateTimeToParts', () => {

src/lib/date-time-format/tests/format.spec.ts

@@ -16,9 +16,9 @@
 import { describe, it, expect } from 'vitest';
 import { Intl } from 'temporal-polyfill';
 
-import { formatDateTime, formatDate, formatTime } from '..';
+import { formatDateTime, formatDate, formatTime } from '../index.js';
 
-import { locales, dates, times, datetimes } from './shared';
+import { locales, dates, times, datetimes } from './shared.js';
 
 describe('Dates & times', () => {
   describe('formatDateTime', () => {

src/lib/date-time-format/tests/resolve-format.spec.ts

@@ -16,9 +16,9 @@
 import { describe, it, expect } from 'vitest';
 import { Intl } from 'temporal-polyfill';
 
-import { resolveDateTimeFormat } from '..';
+import { resolveDateTimeFormat } from '../index.js';
 
-import { locales } from './shared';
+import { locales } from './shared.js';
 
 describe('Dates & times', () => {
   describe('resolveDateTimeFormat', () => {

src/lib/date-time-format/tests/unsupported-intl-api.spec.ts

@@ -19,9 +19,9 @@ import {
   formatDateTime,
   formatDateTimeToParts,
   resolveDateTimeFormat,
-} from '..';
+} from '../index.js';
 
-import { dates, datetimes, times } from './shared';
+import { dates, datetimes, times } from './shared.js';
 
 vi.mock('../intl', async () => {
   const intl = await vi.importActual('../intl');

src/lib/date-time-format/tests/unsupported-styles.spec.ts

@@ -16,9 +16,9 @@
 import { vi, describe, it, expect } from 'vitest';
 import { Intl } from 'temporal-polyfill';
 
-import { formatDateTime } from '..';
+import { formatDateTime } from '../index.js';
 
-import { dates, datetimes, times } from './shared';
+import { dates, datetimes, times } from './shared.js';
 
 vi.mock('../intl', async () => {
   const intl = await vi.importActual('../intl');

src/lib/number-format/currencies.ts

@@ -15,10 +15,13 @@
 
 /* eslint-disable no-continue */
 
-import type { Locale, Currency, NumericOptions } from '../../types';
-import { CURRENCIES, CURRENCIES_WITHOUT_DECIMALS } from '../../data/currencies';
+import type { Locale, Currency, NumericOptions } from '../../types/index.js';
+import {
+  CURRENCIES,
+  CURRENCIES_WITHOUT_DECIMALS,
+} from '../../data/currencies.js';
 
-import { resolveLocale } from './intl';
+import { resolveLocale } from './intl.js';
 
 export function extractCountry(locale: string): string {
   if (locale.length === 2) {

src/lib/number-format/index.ts

@@ -18,16 +18,16 @@ import type {
   Locale,
   NumberFormat,
   NumericOptions,
-} from '../../types';
-import { findIndex } from '../find-index';
+} from '../../types/index.js';
+import { findIndex } from '../find-index.js';
 
 import {
   isNumberFormatSupported,
   isNumberFormatToPartsSupported,
   getNumberFormat,
-} from './intl';
-import { getNumberOptions } from './numbers';
-import { getCurrencyOptions } from './currencies';
+} from './intl.js';
+import { getNumberOptions } from './numbers.js';
+import { getCurrencyOptions } from './currencies.js';
 
 export { isNumberFormatSupported, isNumberFormatToPartsSupported };
 

src/lib/number-format/intl.ts

@@ -15,7 +15,7 @@
 
 import memoizeFormatConstructor from 'intl-format-cache';
 
-import type { Locale } from '../../types';
+import type { Locale } from '../../types/index.js';
 
 /**
  * Whether the `Intl` and `Intl.NumberFormat` APIs
@@ -44,6 +44,7 @@ export const isNumberFormatToPartsSupported = (() => {
   }
 })();
 
+// @ts-expect-error intl-format-cache is bundled in a non-standard way.
 export const getNumberFormat = memoizeFormatConstructor(Intl.NumberFormat) as (
   locales?: Locale | Locale[],
   options?: Intl.NumberFormatOptions,

src/lib/number-format/numbers.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import type { Locale } from '../../types';
+import type { Locale } from '../../types/index.js';
 
 export function getNumberOptions(
   locales?: Locale | Locale[],

src/lib/number-format/tests/format-to-parts.spec.ts

@@ -15,10 +15,10 @@
 
 import { describe, it, expect } from 'vitest';
 
-import { formatNumberToParts, formatCurrencyToParts } from '..';
-import { CURRENCIES_WITHOUT_DECIMALS } from '../../../data/currencies';
+import { formatNumberToParts, formatCurrencyToParts } from '../index.js';
+import { CURRENCIES_WITHOUT_DECIMALS } from '../../../data/currencies.js';
 
-import { locales, number } from './shared';
+import { locales, number } from './shared.js';
 
 describe('Numbers', () => {
   describe('formatNumberToParts', () => {

src/lib/number-format/tests/format.spec.ts

@@ -15,10 +15,10 @@
 
 import { describe, it, expect } from 'vitest';
 
-import { formatNumber, formatCurrency } from '..';
-import { CURRENCIES_WITHOUT_DECIMALS } from '../../../data/currencies';
+import { formatNumber, formatCurrency } from '../index.js';
+import { CURRENCIES_WITHOUT_DECIMALS } from '../../../data/currencies.js';
 
-import { locales, number } from './shared';
+import { locales, number } from './shared.js';
 
 describe('Numbers', () => {
   describe('formatNumber', () => {

src/lib/number-format/tests/resolve-format.spec.ts

@@ -15,10 +15,10 @@
 
 import { describe, it, expect } from 'vitest';
 
-import { resolveNumberFormat, resolveCurrencyFormat } from '..';
-import { CURRENCIES_WITHOUT_DECIMALS } from '../../../data/currencies';
+import { resolveNumberFormat, resolveCurrencyFormat } from '../index.js';
+import { CURRENCIES_WITHOUT_DECIMALS } from '../../../data/currencies.js';
 
-import { locales } from './shared';
+import { locales } from './shared.js';
 
 describe('Numbers', () => {
   describe('resolveNumberFormat', () => {

src/lib/number-format/tests/shared.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CURRENCIES } from '../../..';
+import { CURRENCIES } from '../../../index.js';
 
 export const locales: (string | string[])[] = [
   ...Object.keys(CURRENCIES),

src/lib/number-format/tests/unsupported-intl-api.spec.ts

@@ -22,9 +22,9 @@ import {
   formatNumberToParts,
   resolveCurrencyFormat,
   resolveNumberFormat,
-} from '..';
+} from '../index.js';
 
-import { number } from './shared';
+import { number } from './shared.js';
 
 vi.mock('../intl', async () => {
   const intl = await vi.importActual('../intl');

tsconfig.json

@@ -1,17 +1,17 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "module": "ES2020",
+    "module": "NodeNext",
     "lib": ["es2020", "es2017", "es7", "es6", "dom"],
     "declaration": true,
     "strict": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "outDir": "./dist/es"
+    "outDir": "./dist"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "**.spec.*"],