Add missing extensions (#1770)

* fix(typescript): add missing extension to imports in typescript

This is required for the types to work with the new
`--module-resolution=node16`.

The list of places to fix was obtained by a crude script:

```sh
rg -g'**/*.ts' -g'!**/*.test.ts' ' from\s+.\.' | rg -v '\.js'
```

References #1765

* add missing extensions

* revert tsconfig

* prettier

* fix test files for NodeNext

* prettier

* changelog entry

* prettier

* prettier

* prettier

---------

Co-authored-by: Andrey Lushnikov <aslushnikov@gmail.com>

docs/pages/resources/changelog.md

@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Fixed files that did not have `.js` extensions. [#1770]
 - Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
 - Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
 - Fixed focus trapping not scrolling elements into view. [#1750]

scripts/make-react.js

@@ -25,10 +25,10 @@ for await (const component of components) {
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.path.replace(/\.js$/, '.component.js');
   const eventImports = (component.events || [])
-    .map(event => `import type { ${event.eventName} } from '../../events/events';`)
+    .map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventExports = (component.events || [])
-    .map(event => `export type { ${event.eventName} } from '../../events/events';`)
+    .map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
   const events = (component.events || [])

src/components/animation/animation.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/shoelace.js';
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
 import type SlAnimation from './animation.js';
 
 describe('<sl-animation>', () => {

src/components/details/details.test.ts

@@ -2,9 +2,9 @@ import '../../../dist/shoelace.js';
 // cspell:dictionaries lorem-ipsum
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type { SlHideEvent } from '../../events/sl-hide';
-import type { SlShowEvent } from '../../events/sl-show';
-import type SlDetails from './details';
+import type { SlHideEvent } from '../../events/sl-hide.js';
+import type { SlShowEvent } from '../../events/sl-show.js';
+import type SlDetails from './details.js';
 
 describe('<sl-details>', () => {
   describe('accessibility', () => {

src/components/dialog/dialog.test.ts

@@ -1,10 +1,10 @@
 import '../../../dist/shoelace.js';
 // cspell:dictionaries lorem-ipsum
-import { aTimeout, elementUpdated, expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { LitElement } from 'lit';
+import { aTimeout, elementUpdated, expect, fixture, waitUntil } from '@open-wc/testing';
+import { html, LitElement } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type SlDialog from './dialog';
+import type SlDialog from './dialog.js';
 
 describe('<sl-dialog>', () => {
   it('should be visible with the open attribute', async () => {

src/components/drawer/drawer.test.ts

@@ -3,7 +3,7 @@ import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type SlDrawer from './drawer';
+import type SlDrawer from './drawer.js';
 
 describe('<sl-drawer>', () => {
   it('should be visible with the open attribute', async () => {

src/components/format-bytes/format-bytes.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import type SlFormatBytes from './format-bytes';
+import type SlFormatBytes from './format-bytes.js';
 
 describe('<sl-format-bytes>', () => {
   describe('defaults ', () => {

src/components/format-date/format-date.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlFormatDate from './format-date';
+import type SlFormatDate from './format-date.js';
 
 describe('<sl-format-date>', () => {
   describe('defaults ', () => {

src/components/format-number/format-number.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlFormatNumber from './format-number';
+import type SlFormatNumber from './format-number.js';
 
 describe('<sl-format-number>', () => {
   describe('defaults ', () => {

src/components/icon-button/icon-button.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlIconButton from './icon-button';
+import type SlIconButton from './icon-button.js';
 
 type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
 

src/components/icon/icon.test.ts

@@ -1,8 +1,8 @@
 import { aTimeout, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { registerIconLibrary } from '../../../dist/shoelace.js';
-import type { SlErrorEvent } from '../../events/sl-error';
-import type { SlLoadEvent } from '../../events/sl-load';
-import type SlIcon from './icon';
+import type { SlErrorEvent } from '../../events/sl-error.js';
+import type { SlLoadEvent } from '../../events/sl-load.js';
+import type SlIcon from './icon.js';
 
 const testLibraryIcons = {
   'test-icon1': `

src/components/image-comparer/image-comparer.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlImageComparer from './image-comparer';
+import type SlImageComparer from './image-comparer.js';
 
 describe('<sl-image-comparer>', () => {
   it('should render a basic before/after', async () => {

src/components/include/include.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlInclude from './include';
+import type SlInclude from './include.js';
 
 const stubbedFetchResponse: Response = {
   headers: new Headers(),

src/components/input/input.test.ts

@@ -4,7 +4,7 @@ import { getFormControls, serialize } from '../../../dist/shoelace.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands'; // must come from the same module
 import sinon from 'sinon';
-import type SlInput from './input';
+import type SlInput from './input.js';
 
 describe('<sl-input>', () => {
   it('should pass accessibility tests', async () => {

src/components/menu-item/menu-item.test.ts

@@ -2,8 +2,8 @@ import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { SlSelectEvent } from '../../events/sl-select';
-import type SlMenuItem from './menu-item';
+import type { SlSelectEvent } from '../../events/sl-select.js';
+import type SlMenuItem from './menu-item.js';
 
 describe('<sl-menu-item>', () => {
   it('should pass accessibility tests', async () => {

src/components/menu-label/menu-label.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlMenuLabel from './menu-label';
+import type SlMenuLabel from './menu-label.js';
 
 describe('<sl-menu-label>', () => {
   it('passes accessibility test', async () => {

src/components/menu/menu.test.ts

@@ -4,8 +4,8 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { SlSelectEvent } from '../../events/sl-select';
-import type SlMenu from './menu';
+import type { SlSelectEvent } from '../../events/sl-select.js';
+import type SlMenu from './menu.js';
 
 describe('<sl-menu>', () => {
   it('emits sl-select with the correct event detail when clicking an item', async () => {

src/components/option/option.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlOption from './option';
+import type SlOption from './option.js';
 
 describe('<sl-option>', () => {
   it('passes accessibility test', async () => {

src/components/progress-bar/progress-bar.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlProgressBar from './progress-bar';
+import type SlProgressBar from './progress-bar.js';
 
 describe('<sl-progress-bar>', () => {
   let el: SlProgressBar;

src/components/progress-ring/progress-ring.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlProgressRing from './progress-ring';
+import type SlProgressRing from './progress-ring.js';
 
 describe('<sl-progress-ring>', () => {
   let el: SlProgressRing;

src/components/qr-code/qr-code.component.ts

@@ -51,7 +51,8 @@ export default class SlQrCode extends ShoelaceElement {
       return;
     }
 
-    QrCreator.render(
+    // For some reason, when changing to "NodeNext", it has the wrong type for QrCreator.
+    (QrCreator as unknown as typeof QrCreator.default).render(
       {
         text: this.value,
         radius: this.radius,

src/components/qr-code/qr-code.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlQrCode from './qr-code';
+import type SlQrCode from './qr-code.js';
 
 const getCanvas = (qrCode: SlQrCode): HTMLCanvasElement => {
   const possibleCanvas = qrCode.shadowRoot?.querySelector<HTMLCanvasElement>('.qr-code');

src/components/radio-button/radio-button.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlRadioButton from './radio-button';
-import type SlRadioGroup from '../radio-group/radio-group';
+import type SlRadioButton from './radio-button.js';
+import type SlRadioGroup from '../radio-group/radio-group.js';
 
 describe('<sl-radio-button>', () => {
   it('should not get checked when disabled', async () => {

src/components/radio/radio.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlRadio from './radio';
-import type SlRadioGroup from '../radio-group/radio-group';
+import type SlRadio from './radio.js';
+import type SlRadioGroup from '../radio-group/radio-group.js';
 
 describe('<sl-radio>', () => {
   it('should not get checked when disabled', async () => {

src/components/skeleton/skeleton.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlSkeleton from './skeleton';
+import type SlSkeleton from './skeleton.js';
 
 describe('<sl-skeleton>', () => {
   it('should render default skeleton', async () => {

src/components/spinner/spinner.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlSpinner from './spinner';
+import type SlSpinner from './spinner.js';
 
 describe('<sl-spinner>', () => {
   describe('when provided no parameters', () => {

src/components/tab-panel/tab-panel.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
-import type SlTabPanel from './tab-panel';
+import type SlTabPanel from './tab-panel.js';
 
 describe('<sl-tab-panel>', () => {
   it('passes accessibility test', async () => {

src/components/tab/tab.test.ts

@@ -1,9 +1,9 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlIconButton from '../icon-button/icon-button';
-import type SlTab from './tab';
-import type SlTabGroup from '../tab-group/tab-group';
+import type SlIconButton from '../icon-button/icon-button.js';
+import type SlTab from './tab.js';
+import type SlTabGroup from '../tab-group/tab-group.js';
 
 describe('<sl-tab>', () => {
   it('passes accessibility test', async () => {

src/components/tag/tag.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlTag from './tag';
+import type SlTag from './tag.js';
 
 describe('<sl-tag>', () => {
   it('should render default tag', async () => {

src/components/tooltip/tooltip.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlTooltip from './tooltip';
+import type SlTooltip from './tooltip.js';
 
 describe('<sl-tooltip>', () => {
   it('should be visible with the open attribute', async () => {

src/components/tree-item/tree-item.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlTreeItem from './tree-item';
+import type SlTreeItem from './tree-item.js';
 
 describe('<sl-tree-item>', () => {
   let leafItem: SlTreeItem;

src/events/events.ts

@@ -1,35 +1,35 @@
-export type { SlAfterCollapseEvent } from './sl-after-collapse';
-export type { SlAfterExpandEvent } from './sl-after-expand';
-export type { SlAfterHideEvent } from './sl-after-hide';
-export type { SlAfterShowEvent } from './sl-after-show';
-export type { SlBlurEvent } from './sl-blur';
-export type { SlCancelEvent } from './sl-cancel';
-export type { SlChangeEvent } from './sl-change';
-export type { SlClearEvent } from './sl-clear';
-export type { SlCloseEvent } from './sl-close';
-export type { SlCollapseEvent } from './sl-collapse';
-export type { SlCopyEvent } from './sl-copy';
-export type { SlErrorEvent } from './sl-error';
-export type { SlExpandEvent } from './sl-expand';
-export type { SlFinishEvent } from './sl-finish';
-export type { SlFocusEvent } from './sl-focus';
-export type { SlHideEvent } from './sl-hide';
-export type { SlHoverEvent } from './sl-hover';
-export type { SlInitialFocusEvent } from './sl-initial-focus';
-export type { SlInputEvent } from './sl-input';
-export type { SlInvalidEvent } from './sl-invalid';
-export type { SlLazyChangeEvent } from './sl-lazy-change';
-export type { SlLazyLoadEvent } from './sl-lazy-load';
-export type { SlLoadEvent } from './sl-load';
-export type { SlMutationEvent } from './sl-mutation';
-export type { SlRemoveEvent } from './sl-remove';
-export type { SlRepositionEvent } from './sl-reposition';
-export type { SlRequestCloseEvent } from './sl-request-close';
-export type { SlResizeEvent } from './sl-resize';
-export type { SlSelectEvent } from './sl-select';
-export type { SlSelectionChangeEvent } from './sl-selection-change';
-export type { SlShowEvent } from './sl-show';
-export type { SlSlideChangeEvent } from './sl-slide-change';
-export type { SlStartEvent } from './sl-start';
-export type { SlTabHideEvent } from './sl-tab-hide';
-export type { SlTabShowEvent } from './sl-tab-show';
+export type { SlAfterCollapseEvent } from './sl-after-collapse.js';
+export type { SlAfterExpandEvent } from './sl-after-expand.js';
+export type { SlAfterHideEvent } from './sl-after-hide.js';
+export type { SlAfterShowEvent } from './sl-after-show.js';
+export type { SlBlurEvent } from './sl-blur.js';
+export type { SlCancelEvent } from './sl-cancel.js';
+export type { SlChangeEvent } from './sl-change.js';
+export type { SlClearEvent } from './sl-clear.js';
+export type { SlCloseEvent } from './sl-close.js';
+export type { SlCollapseEvent } from './sl-collapse.js';
+export type { SlCopyEvent } from './sl-copy.js';
+export type { SlErrorEvent } from './sl-error.js';
+export type { SlExpandEvent } from './sl-expand.js';
+export type { SlFinishEvent } from './sl-finish.js';
+export type { SlFocusEvent } from './sl-focus.js';
+export type { SlHideEvent } from './sl-hide.js';
+export type { SlHoverEvent } from './sl-hover.js';
+export type { SlInitialFocusEvent } from './sl-initial-focus.js';
+export type { SlInputEvent } from './sl-input.js';
+export type { SlInvalidEvent } from './sl-invalid.js';
+export type { SlLazyChangeEvent } from './sl-lazy-change.js';
+export type { SlLazyLoadEvent } from './sl-lazy-load.js';
+export type { SlLoadEvent } from './sl-load.js';
+export type { SlMutationEvent } from './sl-mutation.js';
+export type { SlRemoveEvent } from './sl-remove.js';
+export type { SlRepositionEvent } from './sl-reposition.js';
+export type { SlRequestCloseEvent } from './sl-request-close.js';
+export type { SlResizeEvent } from './sl-resize.js';
+export type { SlSelectEvent } from './sl-select.js';
+export type { SlSelectionChangeEvent } from './sl-selection-change.js';
+export type { SlShowEvent } from './sl-show.js';
+export type { SlSlideChangeEvent } from './sl-slide-change.js';
+export type { SlStartEvent } from './sl-start.js';
+export type { SlTabHideEvent } from './sl-tab-hide.js';
+export type { SlTabShowEvent } from './sl-tab-show.js';

src/events/sl-select.ts

@@ -1,4 +1,4 @@
-import type SlMenuItem from '../components/menu-item/menu-item';
+import type SlMenuItem from '../components/menu-item/menu-item.js';
 
 export type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>;
 

src/events/sl-selection-change.ts

@@ -1,4 +1,4 @@
-import type SlTreeItem from '../components/tree-item/tree-item';
+import type SlTreeItem from '../components/tree-item/tree-item.js';
 
 export type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>;
 

src/events/sl-slide-change.ts

@@ -1,4 +1,4 @@
-import type SlCarouselItem from '../components/carousel-item/carousel-item';
+import type SlCarouselItem from '../components/carousel-item/carousel-item.js';
 
 export type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;
 

tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "es2017",
-    "module": "es2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "lib": [
       "dom",
       "dom.Iterable",
@@ -20,7 +21,6 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "useDefineForClassFields": false, /* See https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields */