WEBDEV-8512: Enforce import type for type-only imports

demo/app-root.ts

@@ -6,11 +6,11 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const storyModules = import.meta.glob(
   ['../src/elements/**/*-story.ts', '../src/labs/**/*-story.ts'],
-  { eager: true }
+  { eager: true },
 );
 
 const storyEntries = Object.keys(storyModules)
-  .map(path => {
+  .map((path) => {
     const labs = path.includes('/src/labs/');
     const parts = path.split('/');
     const filename = parts[parts.length - 1]; // e.g. "ia-button-story.ts"
@@ -19,13 +19,15 @@ const storyEntries = Object.keys(storyModules)
   })
   .sort((a, b) => a.tag.localeCompare(b.tag));
 
-const productionEntries = storyEntries.filter(e => !e.labs);
-const labsEntries = storyEntries.filter(e => e.labs);
+const productionEntries = storyEntries.filter((e) => !e.labs);
+const labsEntries = storyEntries.filter((e) => e.labs);
 const ALL_ENTRIES = [...productionEntries, ...labsEntries];
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
-  createRenderRoot() { return this; }
+  createRenderRoot() {
+    return this;
+  }
 
   private _observer?: IntersectionObserver;
   private _abortController = new AbortController();
@@ -34,65 +36,80 @@ export class AppRoot extends LitElement {
     return html`
       <nav id="ia-sidebar">
         <h2>Production-Ready</h2>
-        ${productionEntries.map(e => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
+        ${productionEntries.map(
+          (e) => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`,
+        )}
         <h2>Labs 🧪</h2>
-        ${labsEntries.map(e => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
+        ${labsEntries.map((e) => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
       </nav>
       <div id="ia-content">
         <h1>Internet Archive Elements</h1>
         <h2>Production-Ready Elements</h2>
-        ${productionEntries.map(e => html`
-          <div id="${e.id}" class="ia-anchor">
-            ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
-          </div>
-        `)}
+        ${productionEntries.map(
+          (e) => html`
+            <div id="${e.id}" class="ia-anchor">
+              ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
+            </div>
+          `,
+        )}
         <h2>Labs Elements</h2>
-        ${labsEntries.map(e => html`
-          <div id="${e.id}" class="ia-anchor">
-            ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
-          </div>
-        `)}
+        ${labsEntries.map(
+          (e) => html`
+            <div id="${e.id}" class="ia-anchor">
+              ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
+            </div>
+          `,
+        )}
       </div>
     `;
   }
 
   firstUpdated() {
-    const allIds = ALL_ENTRIES.map(e => e.id);
+    const allIds = ALL_ENTRIES.map((e) => e.id);
 
     const links = Object.fromEntries(
-      allIds.map(id => [id, this.querySelector(`#ia-sidebar a[href="#${id}"]`)])
+      allIds.map((id) => [
+        id,
+        this.querySelector(`#ia-sidebar a[href="#${id}"]`),
+      ]),
     );
 
     const visible = new Set<string>();
 
     // Only anchors in the top 30% of the viewport count as "active".
     // The first (topmost) visible anchor wins.
     this._observer = new IntersectionObserver(
-      entries => {
+      (entries) => {
         for (const entry of entries) {
           if (entry.isIntersecting) visible.add(entry.target.id);
           else visible.delete(entry.target.id);
         }
-        const activeId = allIds.find(id => visible.has(id)) ?? allIds[0];
-        allIds.forEach(id => links[id]?.classList.toggle('active', id === activeId));
+        const activeId = allIds.find((id) => visible.has(id)) ?? allIds[0];
+        allIds.forEach((id) =>
+          links[id]?.classList.toggle('active', id === activeId),
+        );
       },
       { rootMargin: '0px 0px -70% 0px' },
     );
 
-    allIds.forEach(id => {
+    allIds.forEach((id) => {
       const el = document.getElementById(id);
       if (el) this._observer!.observe(el);
     });
 
-    allIds.forEach(id => {
-      links[id]?.addEventListener('click', (e: Event) => {
-        e.preventDefault();
-        const el = document.getElementById(id);
-        if (el) {
-          const top = el.getBoundingClientRect().top + window.scrollY;
-          window.scrollTo({ top: Math.max(0, top - 16), behavior: 'smooth' });
-        }
-      }, { signal: this._abortController.signal });
+    allIds.forEach((id) => {
+      links[id]?.addEventListener(
+        'click',
+        (e: Event) => {
+          e.preventDefault();
+          const el = document.getElementById(id);
+          if (el) {
+            const top = el.getBoundingClientRect().top + window.scrollY;
+            window.scrollTo({ top: Math.max(0, top - 16), behavior: 'smooth' });
+          }
+        },
+        { signal: this._abortController.signal },
+      );
     });
   }
 

demo/story-components/story-prop-settings.ts

@@ -1,11 +1,5 @@
-import {
-  css,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-  type CSSResultGroup,
-} from 'lit';
+import type { TemplateResult } from 'lit';
+import { css, html, LitElement, nothing, type CSSResultGroup } from 'lit';
 import { property, queryAll } from 'lit/decorators.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { choose } from 'lit/directives/choose.js';

demo/story-template.test.ts

@@ -68,7 +68,8 @@ describe('StoryTemplate', () => {
       `);
 
       // Only import + usage highlighters; styling section is absent when cssCode is empty
-      const highlighters = el.shadowRoot?.querySelectorAll('syntax-highlighter');
+      const highlighters =
+        el.shadowRoot?.querySelectorAll('syntax-highlighter');
       expect(highlighters?.length).to.equal(2);
     });
 
@@ -80,13 +81,12 @@ describe('StoryTemplate', () => {
       (el as any).stringifiedStyles = 'color: red;';
       await el.updateComplete;
 
-      const highlighters = el.shadowRoot?.querySelectorAll('syntax-highlighter');
+      const highlighters =
+        el.shadowRoot?.querySelectorAll('syntax-highlighter');
       expect(highlighters?.length).to.equal(3);
 
       const stylingHighlighter = highlighters?.[2] as any;
-      expect(stylingHighlighter.code).to.equal(
-        'ia-button {\n color: red;\n}',
-      );
+      expect(stylingHighlighter.code).to.equal('ia-button {\n color: red;\n}');
     });
 
     test('has no trailing whitespace on any line', async () => {
@@ -97,7 +97,8 @@ describe('StoryTemplate', () => {
       (el as any).stringifiedStyles = '--my-var: blue;';
       await el.updateComplete;
 
-      const highlighters = el.shadowRoot?.querySelectorAll('syntax-highlighter');
+      const highlighters =
+        el.shadowRoot?.querySelectorAll('syntax-highlighter');
       const code: string = (highlighters?.[2] as any).code;
       for (const line of code.split('\n')) {
         expect(line).to.equal(line.trimEnd());

eslint.config.mjs

@@ -39,6 +39,14 @@ export default [
       '@typescript-eslint/no-unsafe-function-type': 'warn',
       '@typescript-eslint/no-unused-vars': 'warn',
       '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports',
+          fixStyle: 'separate-type-imports',
+          disallowTypeAnnotations: true,
+        },
+      ],
     },
   },
   {

src/elements/ia-combo-box/ia-combo-box-story.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, type CSSResultGroup } from 'lit';
 import { customElement, state, query } from 'lit/decorators.js';
-import { StyleInputSettings } from '@demo/story-components/story-styles-settings';
-import {
+import type { StyleInputSettings } from '@demo/story-components/story-styles-settings';
+import type {
   IAComboBoxBehavior,
   IAComboBoxFilterOption,
   IAComboBoxFilterPreset,

src/elements/ia-combo-box/ia-combo-box.ts

@@ -1,12 +1,5 @@
-import {
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-  CSSResultGroup,
-  css,
-  PropertyValues,
-} from 'lit';
+import type { TemplateResult, CSSResultGroup, PropertyValues } from 'lit';
+import { html, LitElement, nothing, css } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

src/elements/ia-combo-box/models.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
 
 /**
  * Represents a single predefined option in a combo box.

src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar-story.ts

@@ -1,8 +1,8 @@
 import { css, html, LitElement, type CSSResultGroup } from 'lit';
 import { customElement, state, query } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
-import { StyleInputSettings } from '@demo/story-components/story-styles-settings';
-import { SearchRequestedDetail } from './models';
+import type { StyleInputSettings } from '@demo/story-components/story-styles-settings';
+import type { SearchRequestedDetail } from './models';
 
 import '@demo/story-template';
 import './ia-dropdown-search-bar';

src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest';
 import { fixture } from '@open-wc/testing-helpers';
 import { html } from 'lit';
 import type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';
-import { IADropdownSearchBar } from './ia-dropdown-search-bar';
+import type { IADropdownSearchBar } from './ia-dropdown-search-bar';
 import type { SearchRequestedDetail } from './models';
 
 import './ia-dropdown-search-bar';

src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts

@@ -1,12 +1,6 @@
 import { msg } from '@lit/localize';
-import {
-  css,
-  html,
-  LitElement,
-  nothing,
-  PropertyValues,
-  TemplateResult,
-} from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';
 import type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';
@@ -75,7 +69,7 @@ export class IADropdownSearchBar extends LitElement {
       </div>
     `;
   }
-  
+
   willUpdate(changed: PropertyValues) {
     // Push new categories down to the inner dropdown immediately, since ia-dropdown
     // mutates its own selected option on interaction which can cause Lit's

src/elements/ia-dropdown-search-bar/models.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
 
 /**
  * A category to include in the dropdown. Consists of an internal `id` string that is

src/elements/ia-otp-form/ia-otp-form.ts

@@ -1,12 +1,5 @@
-import {
-  html,
-  LitElement,
-  TemplateResult,
-  CSSResultGroup,
-  css,
-  nothing,
-  PropertyValues,
-} from 'lit';
+import type { TemplateResult, CSSResultGroup, PropertyValues } from 'lit';
+import { html, LitElement, css, nothing } from 'lit';
 import { msg } from '@lit/localize';
 import { property, customElement, query } from 'lit/decorators.js';
 

src/elements/ia-otp-input/ia-otp-input.test.ts

@@ -2,7 +2,7 @@ import { fixture, oneEvent } from '@open-wc/testing-helpers';
 import { afterEach, describe, expect, test, vi } from 'vitest';
 import { html } from 'lit';
 
-import { IAOTPInput } from './ia-otp-input';
+import type { IAOTPInput } from './ia-otp-input';
 import './ia-otp-input';
 
 describe('IA OTP Input', () => {

src/elements/ia-otp-input/ia-otp-input.ts

@@ -1,11 +1,5 @@
-import {
-  html,
-  LitElement,
-  TemplateResult,
-  CSSResultGroup,
-  css,
-  PropertyValues,
-} from 'lit';
+import type { TemplateResult, CSSResultGroup, PropertyValues } from 'lit';
+import { html, LitElement, css } from 'lit';
 import { property, customElement, queryAll } from 'lit/decorators.js';
 import themeStyles from '@src/themes/theme-styles';
 

src/elements/ia-status-indicator/ia-status-indicator.ts

@@ -1,4 +1,5 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import { choose } from 'lit/directives/choose.js';

src/util/lazy-load-template.ts

@@ -1,12 +1,11 @@
 import type { TemplateResult } from 'lit';
-import {
-  Directive,
-  directive,
+import type {
   DirectiveParameters,
   DirectiveResult,
   Part,
   PartInfo,
 } from 'lit/directive.js';
+import { Directive, directive } from 'lit/directive.js';
 
 const resolved = new WeakSet();