chore: Change core to ESM

Author: michaeldowseza

.eslintrc

@@ -5,7 +5,8 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
-    "plugin:no-unsanitized/DOM"
+    "plugin:no-unsanitized/DOM",
+    "plugin:require-extensions/recommended",
   ],
   "parserOptions": {
     "ecmaVersion": 2018,
@@ -14,7 +15,7 @@
       "jsx": true
     }
   },
-  "plugins": ["unicorn", "react-hooks", "no-unsanitized", "header"],
+  "plugins": ["unicorn", "react-hooks", "no-unsanitized", "header", "require-extensions"],
   "rules": {
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-namespace": "off",

package-lock.json

@@ -9,6 +9,7 @@
     "*.js",
     "*.d.ts"
   ],
+  "type": "module",
   "main": "./index.js",
   "exports": {
     ".": "./index.js",
@@ -61,6 +62,7 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-unicorn": "^45.0.2",
     "husky": "^9.0.0",
     "jest": "^29.7.0",

package.json

@@ -2,8 +2,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
+
+const __dirname = path.resolve(import.meta.dirname);
 
 /**
  * Remove specific @cloudscape-design/* packages where we should always use the latest minor release.

scripts/prepare-package-lock.js

@@ -3,9 +3,9 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import useContainerQuery from '../use-container-query';
+import useContainerQuery from '../use-container-query.js';
 import { ResizeObserver } from '@juggle/resize-observer';
-import { ContainerQueryEntry } from '../interfaces';
+import { ContainerQueryEntry } from '../interfaces.js';
 
 function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEntry) => string }) {
   const [value, ref] = useContainerQuery(mapFn);

src/container-queries/__tests__/use-container-query.test.tsx

@@ -1,4 +1,4 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-export { ContainerQueryEntry, ElementReference } from '../internal/container-queries/interfaces';
+export { ContainerQueryEntry, ElementReference } from '../internal/container-queries/interfaces.js';

src/container-queries/interfaces.ts

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useRef, useState, useCallback } from 'react';
-import { ContainerQueryEntry } from './interfaces';
-import { useResizeObserver } from '../internal/container-queries/use-resize-observer';
+import { ContainerQueryEntry } from './interfaces.js';
+import { useResizeObserver } from '../internal/container-queries/use-resize-observer.js';
 
 /**
  * Attaches resize-observer to the referenced element and keeps last observation in state.

src/container-queries/use-container-query.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { isNode, isHTMLElement, isSVGElement } from '../element-types';
+import { isNode, isHTMLElement, isSVGElement } from '../element-types.js';
 
 test('an HTMLElement is recognized as a Node and HTMLElement', () => {
   const div = document.createElement('div');

src/dom/__tests__/element-types.test.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import findUpUntil from '../find-up-until';
+import findUpUntil from '../find-up-until.js';
 
 test('returns null if there is no match', () => {
   const div = document.createElement('div');

src/dom/__tests__/find-up-until.test.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import nodeBelongs from '../node-belongs';
+import nodeBelongs from '../node-belongs.js';
 
 describe('nodeBelongs', () => {
   let div: HTMLDivElement;