fix(all): add extensions to component imports

jbpratt · jbpratt · commit 9fe6fbbff3f3 · 2025-08-09T13:26:09.000-05:00
eslint is complaining due to no extension: ``` 2:8 error Missing file extension for "../src/testgrid-grid-row-name" import/extensions ``` in the Lit docs, components are imported with the js extension https://lit.dev/docs/components/rendering/
diff --git a/web/src/tab-summary.ts b/web/src/tab-summary.ts
@@ -2,9 +2,9 @@ import { LitElement, html, css } from 'lit';
 import { map } from 'lit/directives/map.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { customElement, property } from 'lit/decorators.js';
-import { TabSummaryInfo } from './testgrid-dashboard-summary';
-import './testgrid-failures-summary';
-import './testgrid-healthiness-summary';
+import { TabSummaryInfo } from './testgrid-dashboard-summary.js';
+import './testgrid-failures-summary.js';
+import './testgrid-healthiness-summary.js';
 
 @customElement('tab-summary')
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/src/testgrid-app.ts b/web/src/testgrid-app.ts
@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import './testgrid-router';
+import './testgrid-router.js';
 
 /**
  * Class definition for the `testgrid-app` element.
diff --git a/web/src/testgrid-context.ts b/web/src/testgrid-context.ts
@@ -1,5 +1,5 @@
 import {createContext} from '@lit/context';
-import { TestGridLinkTemplate } from './utils/link-template';
+import { TestGridLinkTemplate } from './utils/link-template.js';
 
-export { TestGridLinkTemplate } from './utils/link-template';
+export { TestGridLinkTemplate } from './utils/link-template.js';
 export const linkContext = createContext<TestGridLinkTemplate>('testgrid-link-context');
diff --git a/web/src/testgrid-data-content.ts b/web/src/testgrid-data-content.ts
@@ -9,8 +9,8 @@ import { ListDashboardTabsResponse } from './gen/pb/api/v1/data.js';
 import { type TestGridLinkTemplate, linkContext } from './testgrid-context.js';
 import '@material/mwc-tab';
 import '@material/mwc-tab-bar';
-import './testgrid-dashboard-summary';
-import './testgrid-grid';
+import './testgrid-dashboard-summary.js';
+import './testgrid-grid.js';
 
 /**
  * Class definition for the `testgrid-data-content` element.
diff --git a/web/src/testgrid-failures-summary.ts b/web/src/testgrid-failures-summary.ts
@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
-import { TabSummaryInfo } from './testgrid-dashboard-summary';
+import { TabSummaryInfo } from './testgrid-dashboard-summary.js';
 
 @customElement('testgrid-failures-summary')
 export class TestgridFailuresSummary extends LitElement {
diff --git a/web/src/testgrid-grid-cell.ts b/web/src/testgrid-grid-cell.ts
@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import {consume} from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import { linkContext, TestGridLinkTemplate } from './testgrid-context';
+import { linkContext, TestGridLinkTemplate } from './testgrid-context.js';
 
 @customElement('testgrid-grid-cell')
 export class TestgridGridCell extends LitElement {
diff --git a/web/src/testgrid-grid-header-row.ts b/web/src/testgrid-grid-header-row.ts
@@ -2,8 +2,8 @@ import { LitElement, html, css } from 'lit';
 import { map } from 'lit/directives/map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { customElement, property } from 'lit/decorators.js';
-import './testgrid-grid-row-name';
-import './testgrid-grid-column-header';
+import './testgrid-grid-row-name.js';
+import './testgrid-grid-column-header.js';
 
 // CombinedHeader represents a header element that spans multiple columns
 // (when a header value is repeated multiple times in a row).
diff --git a/web/src/testgrid-grid-headers-block.ts b/web/src/testgrid-grid-headers-block.ts
@@ -2,8 +2,8 @@ import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { ListHeadersResponse } from './gen/pb/api/v1/data.js';
-import { CombinedHeader } from './testgrid-grid-header-row';
-import './testgrid-grid-header-row';
+import { CombinedHeader } from './testgrid-grid-header-row.js';
+import './testgrid-grid-header-row.js';
 
 function runLengthEncode(values: string[]): CombinedHeader[] {
   if (values.length == 0) {
diff --git a/web/src/testgrid-grid-row.ts b/web/src/testgrid-grid-row.ts
@@ -2,9 +2,9 @@ import { LitElement, html, css } from 'lit';
 import { map } from 'lit/directives/map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { ListRowsResponse_Row } from './gen/pb/api/v1/data.js';
-import { TestStatus } from './gen/pb/test_status/test_status';
-import './testgrid-grid-row-name';
-import './testgrid-grid-cell';
+import { TestStatus } from './gen/pb/test_status/test_status.js';
+import './testgrid-grid-row-name.js';
+import './testgrid-grid-cell.js';
 
 @customElement('testgrid-grid-row')
 export class TestgridGridRow extends LitElement {
diff --git a/web/src/testgrid-grid.ts b/web/src/testgrid-grid.ts
@@ -6,8 +6,8 @@ import {
   ListRowsResponse,
   ListRowsResponse_Row,
 } from './gen/pb/api/v1/data.js';
-import './testgrid-grid-headers-block';
-import './testgrid-grid-row';
+import './testgrid-grid-headers-block.js';
+import './testgrid-grid-row.js';
 
 /**
  * Class definition for `testgrid-grid` component.
diff --git a/web/src/testgrid-group-summary.ts b/web/src/testgrid-group-summary.ts
@@ -4,8 +4,8 @@ import { map } from 'lit/directives/map.js';
 import {
   ListDashboardSummariesResponse,
   DashboardSummary,
-} from './gen/pb/api/v1/data';
-import { TabStatusIcon } from './testgrid-dashboard-summary';
+} from './gen/pb/api/v1/data.js';
+import { TabStatusIcon } from './testgrid-dashboard-summary.js';
 
 /**
  * RenderedDashboardSummary defines the dashboard summary representation required for rendering
diff --git a/web/src/testgrid-healthiness-summary.ts b/web/src/testgrid-healthiness-summary.ts
@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
-import { TabSummaryInfo } from './testgrid-dashboard-summary';
+import { TabSummaryInfo } from './testgrid-dashboard-summary.js';
 
 @customElement('testgrid-healthiness-summary')
 export class TestgridHealthinessSummary extends LitElement {
diff --git a/web/src/testgrid-router.ts b/web/src/testgrid-router.ts
@@ -1,8 +1,8 @@
 import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Router } from '@lit-labs/router';
-import './testgrid-data-content';
-import './testgrid-index';
+import './testgrid-data-content.js';
+import './testgrid-index.js';
 
 // Defines the type of params used for rendering components under different paths
 interface RouteParameter {
diff --git a/web/stories/tab-summary.stories.ts b/web/stories/tab-summary.stories.ts
@@ -8,7 +8,7 @@ import {
   HealthinessStats,
   HealthinessSummaryInfo,
   TabSummaryInfo,
-} from '../src/testgrid-dashboard-summary';
+} from '../src/testgrid-dashboard-summary.js';
 
 export default {
   title: 'Tab summary',
diff --git a/web/stories/testgrid-grid-cell.stories.ts b/web/stories/testgrid-grid-cell.stories.ts
@@ -1,6 +1,6 @@
 import { html, TemplateResult } from 'lit';
-import { TestStatus } from '../src/gen/pb/test_status/test_status';
-import '../src/testgrid-grid-cell';
+import { TestStatus } from '../src/gen/pb/test_status/test_status.js';
+import '../src/testgrid-grid-cell.js';
 
 export default {
   title: 'Grid Cell',
diff --git a/web/stories/testgrid-grid-column-header.stories.ts b/web/stories/testgrid-grid-column-header.stories.ts
@@ -1,5 +1,5 @@
 import { html, TemplateResult } from 'lit';
-import '../src/testgrid-grid-column-header';
+import '../src/testgrid-grid-column-header.js';
 
 export default {
   title: 'Grid Column Header',
diff --git a/web/stories/testgrid-grid-row-name.stories.ts b/web/stories/testgrid-grid-row-name.stories.ts
@@ -1,5 +1,5 @@
 import { html, TemplateResult } from 'lit';
-import '../src/testgrid-grid-row-name';
+import '../src/testgrid-grid-row-name.js';
 
 export default {
   title: 'Grid Row Name',
diff --git a/web/stories/testgrid-grid.stories.ts b/web/stories/testgrid-grid.stories.ts
@@ -1,5 +1,5 @@
 import { html, TemplateResult } from 'lit';
-import '../src/testgrid-grid';
+import '../src/testgrid-grid.js';
 
 export default {
   title: 'Grid',
diff --git a/web/stories/testgrid-group-summary.stories.ts b/web/stories/testgrid-group-summary.stories.ts
@@ -1,5 +1,5 @@
 import { html, TemplateResult } from 'lit';
-import '../src/testgrid-group-summary';
+import '../src/testgrid-group-summary.js';
 
 export default {
   title: 'Dashboard Group View',
diff --git a/web/test/testgrid-data-content.test.ts b/web/test/testgrid-data-content.test.ts
@@ -8,7 +8,7 @@ import {
 } from '@open-wc/testing';
 
 import { Tab } from '@material/mwc-tab';
-import { TestgridDataContent } from '../src/testgrid-data-content';
+import { TestgridDataContent } from '../src/testgrid-data-content.js';
 
 describe('Testgrid Data Content page', () => {
   let element: TestgridDataContent;
diff --git a/web/test/testgrid-grid-cell.test.ts b/web/test/testgrid-grid-cell.test.ts
@@ -5,8 +5,8 @@ import {
   unsafeStatic,
   expect,
 } from '@open-wc/testing';
-import { TestgridGridCell } from '../src/testgrid-grid-cell';
-import { TestStatus } from '../src/gen/pb/test_status/test_status';
+import { TestgridGridCell } from '../src/testgrid-grid-cell.js';
+import { TestStatus } from '../src/gen/pb/test_status/test_status.js';
 
 describe('TestGrid grid cell', () => {
   let element: TestgridGridCell;
diff --git a/web/test/testgrid-grid-column-header.test.ts b/web/test/testgrid-grid-column-header.test.ts
@@ -5,7 +5,7 @@ import {
     unsafeStatic,
     expect,
 } from '@open-wc/testing';
-import { TestgridGridColumnHeader } from '../src/testgrid-grid-column-header';
+import { TestgridGridColumnHeader } from '../src/testgrid-grid-column-header.js';
 
 describe('TestGrid grid column header', () => {
     let element: TestgridGridColumnHeader;
diff --git a/web/test/testgrid-grid-header-row.test.ts b/web/test/testgrid-grid-header-row.test.ts
@@ -5,7 +5,7 @@ import {
     unsafeStatic,
     expect,
 } from '@open-wc/testing';
-import { TestgridGridHeaderRow } from '../src/testgrid-grid-header-row';
+import { TestgridGridHeaderRow } from '../src/testgrid-grid-header-row.js';
 
 describe('TestGrid grid header row', () => {
     let element: TestgridGridHeaderRow;
diff --git a/web/test/testgrid-grid-headers-block.test.ts b/web/test/testgrid-grid-headers-block.test.ts
@@ -5,7 +5,7 @@ import {
   unsafeStatic,
   expect,
 } from '@open-wc/testing';
-import { TestgridGridHeadersBlock } from '../src/testgrid-grid-headers-block';
+import { TestgridGridHeadersBlock } from '../src/testgrid-grid-headers-block.js';
 
 describe('TestGrid grid headers block', () => {
   let element: TestgridGridHeadersBlock;
diff --git a/web/test/testgrid-grid-row-name.test.ts b/web/test/testgrid-grid-row-name.test.ts
@@ -5,7 +5,7 @@ import {
   unsafeStatic,
   expect,
 } from '@open-wc/testing';
-import { TestgridGridRowName } from '../src/testgrid-grid-row-name';
+import { TestgridGridRowName } from '../src/testgrid-grid-row-name.js';
 
 describe('TestGrid grid row name', () => {
   let element: TestgridGridRowName;
diff --git a/web/test/testgrid-grid-row.test.ts b/web/test/testgrid-grid-row.test.ts
@@ -5,7 +5,7 @@ import {
     unsafeStatic,
     expect,
 } from '@open-wc/testing';
-import { TestgridGridRow } from '../src/testgrid-grid-row';
+import { TestgridGridRow } from '../src/testgrid-grid-row.js';
 
 describe('TestGrid grid row', () => {
     let element: TestgridGridRow;
diff --git a/web/test/testgrid-grid.test.ts b/web/test/testgrid-grid.test.ts
@@ -7,7 +7,7 @@ import {
   waitUntil,
 } from '@open-wc/testing';
 
-import { TestgridGrid } from '../src/testgrid-grid';
+import { TestgridGrid } from '../src/testgrid-grid.js';
 
 describe('Testgrid Grid page', () => {
   let element: TestgridGrid;
diff --git a/web/test/utils/link-template.test.ts b/web/test/utils/link-template.test.ts
@@ -4,7 +4,7 @@ import {
 import {
   TestGridLinkTemplate,
   substitute,
-} from '../../src/utils/link-template';
+} from '../../src/utils/link-template.js';
 
 describe('Link template', () => {
   it('returns url', async () => {
