@internetarchive/ia-topnav 1.4.1 → 2.0.1-alpha-webdev8396.0

package/src/primary-nav.ts

@@ -3,13 +3,12 @@ import TrackedElement from './tracked-element';
 import icons from './assets/img/icons';
 import './assets/img/hamburger';
 import './login-button';
-import './nav-search';
+import type { LoginButton } from './login-button';
 import './media-menu';
 import logoWordmarkStacked from './assets/img/wordmark-stacked';
 import primaryNavCSS from './styles/primary-nav';
-import locationHandler from './lib/location-handler';
 import formatUrl from './lib/format-url';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';
 import { defaultTopNavConfig } from './data/menus';
 
@@ -21,8 +20,6 @@ export class PrimaryNav extends TrackedElement {
   @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
   @property({ type: String }) openMenu = '';
   @property({ type: String }) screenName = '';
-  @property({ type: String }) searchIn = '';
-  @property({ type: String }) searchQuery = '';
   @property({ type: String })
   secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';
   @property({ type: String }) selectedMenuOption = '';
@@ -36,10 +33,32 @@ export class PrimaryNav extends TrackedElement {
     | undefined;
   signedOutMenuToggled: unknown;
 
+  @query('button.user-menu') private userMenuButton?: HTMLButtonElement;
+  @query('login-button') private loginButton?: HTMLElement;
+
   static get styles() {
     return primaryNavCSS;
   }
 
+  /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */
+  getAccountDropdownOffset(): number {
+    const hostRect = this.getBoundingClientRect();
+
+    if (this.userMenuButton) {
+      return hostRect.right - this.userMenuButton.getBoundingClientRect().right;
+    }
+
+    if (this.loginButton) {
+      const loginRect = this.loginButton.getBoundingClientRect();
+      const innerOffset = (
+        this.loginButton as LoginButton
+      ).getDropdownToggleOffset();
+      return hostRect.right - loginRect.right + innerOffset;
+    }
+
+    return 0;
+  }
+
   toggleMediaMenu(e: Event) {
     this.trackClick(e);
     this.dispatchEvent(
@@ -166,6 +185,19 @@ export class PrimaryNav extends TrackedElement {
     return this.secondIdentitySlotMode === 'allow';
   }
 
+  /**
+   * The search slot container, rendered between media-menu and
+   * right-side-section so it sits left of the Upload button on desktop.
+   */
+  get searchSlotContainer() {
+    if (this.hideSearch) return nothing;
+    return html`
+      <div class="search-container ${this.searchMenuOpen ? 'open' : ''}">
+        <slot name="search"></slot>
+      </div>
+    `;
+  }
+
   get searchMenu() {
     if (this.hideSearch) return nothing;
 
@@ -177,38 +209,9 @@ export class PrimaryNav extends TrackedElement {
       >
         ${icons.search}
       </button>
-      <nav-search
-        .baseHost=${this.baseHost}
-        .config=${this.config}
-        .locationHandler=${locationHandler}
-        .open=${this.searchMenuOpen}
-        .openMenu=${this.openMenu}
-        .searchIn=${this.searchIn}
-        .searchQuery=${this.searchQuery}
-        @blur=${this.emitNavSearchBlurEvent}
-      ></nav-search>
     `;
   }
 
-  private emitNavSearchBlurEvent(e: FocusEvent) {
-    const relatedTarget = e.relatedTarget as HTMLElement;
-    const isUploadButton = relatedTarget?.classList.contains('upload');
-
-    if (isUploadButton) {
-      (this.shadowRoot?.querySelector('a.upload') as HTMLElement).focus();
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('navSearchBlur', {
-        detail: {
-          isUploadButton: !!isUploadButton,
-        },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
   get mobileDonateHeart() {
     return html`
       <a
@@ -286,6 +289,7 @@ export class PrimaryNav extends TrackedElement {
           .openMenu=${this.openMenu}
           .currentTab=${this.currentTab}
         ></media-menu>
+        ${this.searchSlotContainer}
         <div class="right-side-section">
           ${this.mobileDonateHeart} ${this.userStateTemplate}
           ${this.uploadButtonTemplate} ${this.searchMenu}

package/src/signed-out-dropdown.ts

@@ -1,11 +1,10 @@
 import { customElement } from 'lit/decorators.js';
 import DropdownMenu from './dropdown-menu';
 import dropdownMenuCSS from './styles/dropdown-menu';
-import signedOutDropdownStyles from './styles/signed-out-dropdown';
 
 @customElement('signed-out-dropdown')
 export class SignedOutDropdown extends DropdownMenu {
   static get styles() {
-    return [dropdownMenuCSS, signedOutDropdownStyles];
+    return dropdownMenuCSS;
   }
 }

package/src/styles/dropdown-menu.ts

@@ -96,6 +96,7 @@ export default css`
       overflow: visible;
       top: 0;
       left: auto;
+      right: var(--dropdownMenuRight, 0);
       z-index: 5;
       transition: opacity 0.2s ease-in-out;
       font-size: 1.4rem;

package/src/styles/ia-topnav.ts

@@ -24,11 +24,6 @@ export default css`
     --activeButtonBg: var(--grey20);
     --iconFill: var(--grey60);
 
-    --searchActiveBg: var(--grey20);
-    --searchActiveInputBg: var(--white);
-    --searchMenuBg: var(--grey20);
-    --desktopSearchIconFill: var(--grey20);
-
     --mediaMenuBg: var(--grey13);
     --mediaLabelDesktopColor: var(--grey60);
     --activeDesktopMenuIcon: var(--grey28);

package/src/styles/primary-nav.ts

@@ -123,9 +123,40 @@ export default css`
     fill: var(--iconFill);
   }
 
-  .search-activated {
-    position: relative;
+  .search-container {
+    display: none;
+  }
+
+  .search-container.open {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 4rem;
+    bottom: 0;
+    left: 4rem;
     z-index: 3;
+    padding: 0.5rem;
+    border-radius: 1rem 1rem 0 0;
+    background: var(--primaryNavBg);
+    align-items: center;
+    animation: fade-in 0.2s forwards;
+  }
+
+  .search-container ::slotted(*) {
+    display: block;
+  }
+
+  .search-container slot {
+    width: 100%;
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   .upload {
@@ -288,9 +319,23 @@ export default css`
       fill: var(--linkHoverColor);
     }
 
-    nav-search {
-      float: right;
-      margin-left: 1rem;
+    .search-container,
+    .search-container.open {
+      display: flex;
+      position: static;
+      top: auto;
+      right: auto;
+      bottom: auto;
+      left: auto;
+      align-items: center;
+      padding: 0 0 0 1rem;
+      background: transparent;
+      border-radius: 0;
+      z-index: auto;
+    }
+
+    .search-container slot {
+      width: auto;
     }
   }
 

package/src/user-menu.ts

@@ -1,6 +1,5 @@
-import { CSSResult, html } from 'lit';
+import { html } from 'lit';
 import DropdownMenu from './dropdown-menu';
-import userMenuCSS from './styles/user-menu';
 import dropdownStyles from './styles/dropdown-menu';
 import { customElement, property } from 'lit/decorators.js';
 
@@ -9,8 +8,8 @@ export default class UserMenu extends DropdownMenu {
   @property({ type: String }) username = '';
   @property({ type: String }) screenName = '';
 
-  static get styles(): CSSResult[] {
-    return [dropdownStyles, userMenuCSS];
+  static get styles() {
+    return dropdownStyles;
   }
 
   render() {

package/ssl/server.key

@@ -1,28 +1,28 @@
------BEGIN PRIVATE KEY-----
-MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDZqbS9hNS38Atc
-A7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3UXRCU
-DAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5DSF1
-CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Ycj1W
-lOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpdJxBU
-xYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbMQkUJ
-c8dow3sVAgMBAAECggEANgLpITAhcuVDhFk9L3m4H1bF/dCpDmCXfl2pXR/guicm
-C4M9HUeheaOzvVWbXThiOe/HyfylpmFTmFEmCPNlPrDAyYzQXE/MNmYO/TQ3Eihk
-iSG68I764XKHbsG+Byoa2rW8NSaqEjniZ/7Rtkt4qasXMmdxlGgUP9bq6O45g8HV
-kHxneFlA2KbrvmWnBi7NTea9+tp61NWiq5n97UgHacQR6KkYIpbxd7uNSnCSdmXt
-pcwzO4ZPabJ2/DKRjePhU5OggPh+9AhJ3jsBo99GwYPgSZDh8E3vh2OWOtLBMUH3
-rmAYwlRT2aZ5hy5yi+4QD98WoUQtsr+9n757F8V6MQKBgQDzZycdgaKwWd5d34NN
-0TkFtPQPwxxJTCCs3I3q02uWcS3svQzBK0cWb4nISO04TnJ3MnXo83dgGhCMF+uZ
-FCXxAA53z8F92iZo+ELlXFDFwNeNYih/afDA42tWZ6TlVsDnZ4zQgRjHS7jEF/JV
-0ZgwGpw5725JQt64dic8wTOcDQKBgQDk7YYACQcWTnmjDhZQ3PZSX4fcTtzPZKZj
-fa1GrXEaUH1hSyc9VmY6qJpUmXexpvtr194nXE+O5wbThOHcBjVlo2Qv+vswmUX3
-WEcVzTVN4/fODCLCqFcMNIr+BzwZfwpT+p0u8g9FxDy1gGmvkxwIu8DCpnUT12Xj
-hm2wO+UxKQKBgFxCSDBF9+2SUtgQJYv0dwGzwiLLWMhro6MCAoT02D3w7nBihBgg
-GFTnuDkDc285ROfrZ4gB6MizeHwxgOrIGU2NMO62/+d9LbvyBiE76Z3bZ5i+kQ0i
-kc/7I69fn8ASLxJHTLenh0XbbNBfJ0riJCZvn7HSEGKShysyFdNQhAhtAoGAFYVi
-0IQIv4cXFkYPwQBUw7+pVQOw7GpI3heFf5x0goXIk6nuAW0q5R7Oi192CiRphGTh
-xI+ABy4ezSmz1exbfreShpQwowv1sOACpsEI3s6skBlB90y+Ci6yVlk1xCvWO7jW
-qAAngWaGUoXE6bWJsCR+ZY4ieYAJWw9bJnMrA6kCgYAzV4Xeoh5ofENZM21wKW3W
-iCzRibPObv6Vb/j9A9yT57yzI3BdfvsX5zmuSvOJm1DimgGY9nCJUzUEYG0a1Dhh
-/rqObPoVIFGesmvwflVYFktmVHk7ycEDVreSTz23cvmraPz1fnpdKeuEs4sRQJV7
-iJhLoxX5SJlJc0RXMhgHGQ==
------END PRIVATE KEY-----
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDZqbS9hNS38Atc
+A7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3UXRCU
+DAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5DSF1
+CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Ycj1W
+lOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpdJxBU
+xYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbMQkUJ
+c8dow3sVAgMBAAECggEANgLpITAhcuVDhFk9L3m4H1bF/dCpDmCXfl2pXR/guicm
+C4M9HUeheaOzvVWbXThiOe/HyfylpmFTmFEmCPNlPrDAyYzQXE/MNmYO/TQ3Eihk
+iSG68I764XKHbsG+Byoa2rW8NSaqEjniZ/7Rtkt4qasXMmdxlGgUP9bq6O45g8HV
+kHxneFlA2KbrvmWnBi7NTea9+tp61NWiq5n97UgHacQR6KkYIpbxd7uNSnCSdmXt
+pcwzO4ZPabJ2/DKRjePhU5OggPh+9AhJ3jsBo99GwYPgSZDh8E3vh2OWOtLBMUH3
+rmAYwlRT2aZ5hy5yi+4QD98WoUQtsr+9n757F8V6MQKBgQDzZycdgaKwWd5d34NN
+0TkFtPQPwxxJTCCs3I3q02uWcS3svQzBK0cWb4nISO04TnJ3MnXo83dgGhCMF+uZ
+FCXxAA53z8F92iZo+ELlXFDFwNeNYih/afDA42tWZ6TlVsDnZ4zQgRjHS7jEF/JV
+0ZgwGpw5725JQt64dic8wTOcDQKBgQDk7YYACQcWTnmjDhZQ3PZSX4fcTtzPZKZj
+fa1GrXEaUH1hSyc9VmY6qJpUmXexpvtr194nXE+O5wbThOHcBjVlo2Qv+vswmUX3
+WEcVzTVN4/fODCLCqFcMNIr+BzwZfwpT+p0u8g9FxDy1gGmvkxwIu8DCpnUT12Xj
+hm2wO+UxKQKBgFxCSDBF9+2SUtgQJYv0dwGzwiLLWMhro6MCAoT02D3w7nBihBgg
+GFTnuDkDc285ROfrZ4gB6MizeHwxgOrIGU2NMO62/+d9LbvyBiE76Z3bZ5i+kQ0i
+kc/7I69fn8ASLxJHTLenh0XbbNBfJ0riJCZvn7HSEGKShysyFdNQhAhtAoGAFYVi
+0IQIv4cXFkYPwQBUw7+pVQOw7GpI3heFf5x0goXIk6nuAW0q5R7Oi192CiRphGTh
+xI+ABy4ezSmz1exbfreShpQwowv1sOACpsEI3s6skBlB90y+Ci6yVlk1xCvWO7jW
+qAAngWaGUoXE6bWJsCR+ZY4ieYAJWw9bJnMrA6kCgYAzV4Xeoh5ofENZM21wKW3W
+iCzRibPObv6Vb/j9A9yT57yzI3BdfvsX5zmuSvOJm1DimgGY9nCJUzUEYG0a1Dhh
+/rqObPoVIFGesmvwflVYFktmVHk7ycEDVreSTz23cvmraPz1fnpdKeuEs4sRQJV7
+iJhLoxX5SJlJc0RXMhgHGQ==
+-----END PRIVATE KEY-----

package/test/ia-topnav.test.ts

@@ -9,35 +9,9 @@ import {
 
 import '../src/ia-topnav';
 import { IATopNav } from '../src/ia-topnav';
-import { SearchMenu } from '../src/search-menu';
 import { SignedOutDropdown } from '../src/signed-out-dropdown';
 import UserMenu from '../src/user-menu';
 
-// const container = (
-//   {
-//     username = '',
-//     screenName = '',
-//     config = {},
-//     localLinks = true,
-//     secondIdentitySlotMode = '',
-//   }: {
-//     username?: string;
-//     screenName?: string;
-//     config?: IATopNavConfig;
-//     localLinks: boolean;
-//     secondIdentitySlotMode?: IATopNavSecondIdentitySlotMode;
-//   } = {
-//     localLinks: true,
-//   },
-// ) =>
-//   html`<ia-topnav
-//     .screenName=${screenName}
-//     username=${username}
-//     ?localLinks=${localLinks}
-//     .config=${config}
-//     .secondIdentitySlotMode=${secondIdentitySlotMode}
-//   ></ia-topnav>`;
-
 const verifyClosed = (instance: IATopNav) => {
   expect(instance.mediaSliderOpen).to.be.false;
   expect(instance.selectedMenuOption).to.equal('');
@@ -53,25 +27,6 @@ afterEach(() => {
 });
 
 describe('<ia-topnav>', () => {
-  it('assigns a value to "search in" from outside event', async () => {
-    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
-    const query = 'atari';
-    const searchMenu = el.shadowRoot?.querySelector(
-      'search-menu',
-    ) as SearchMenu;
-
-    const inputEvent = new InputEvent('input');
-    Object.defineProperty(inputEvent, 'target', {
-      value: { value: query },
-      writable: false,
-    });
-
-    searchMenu?.searchInChanged(inputEvent);
-    await el.updateComplete;
-
-    expect(el.searchIn).to.equal(query);
-  });
-
   it('dispatches an analyticsClick event when trackClick event fired', async () => {
     const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
     const clickEvent = new MouseEvent('click');
@@ -87,22 +42,6 @@ describe('<ia-topnav>', () => {
     expect(response).to.exist;
   });
 
-  it('dispatches an analyticsSubmit event when trackSubmit event fired', async () => {
-    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
-    const submitEvent = new Event('submit');
-    const form = el.shadowRoot
-      ?.querySelector('primary-nav')
-      ?.shadowRoot?.querySelector('nav-search')
-      ?.shadowRoot?.querySelector('form');
-
-    form?.addEventListener('submit', (e) => e.preventDefault());
-    (form?.querySelector('[name=query]') as HTMLInputElement).value = 'atari';
-    setTimeout(() => form?.dispatchEvent(submitEvent));
-    const response = await oneEvent(el, 'trackSubmit');
-
-    expect(response).to.exist;
-  });
-
   it('closes all menus when close-layer clicked', async () => {
     const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
 
@@ -190,17 +129,6 @@ describe('<ia-topnav>', () => {
     expect(el.selectedMenuOption).to.equal('');
   });
 
-  it('toggles search menu tabindex when dropdown open', async () => {
-    const el = await fixture<IATopNav>(html` <ia-topnav></ia-topnav>`);
-
-    el.openMenu = 'search';
-    await el.updateComplete;
-
-    expect(
-      el.shadowRoot?.querySelector('search-menu')?.getAttribute('tabindex'),
-    ).to.equal('');
-  });
-
   it('toggles user menu tabindex when dropdown open', async () => {
     const el = await fixture<IATopNav>(
       html` <ia-topnav username="shaneriley" ?localLinks=${false}></ia-topnav>`,
@@ -246,11 +174,6 @@ describe('<ia-topnav>', () => {
         screenName="shaneriley"
         ?localLinks=${false}
       ></ia-topnav>`,
-      // container({
-      //   username: 'shaneriley',
-      //   screenName: 'shaneriley',
-      //   localLinks: false,
-      // }),
     );
 
     (
@@ -282,7 +205,6 @@ describe('<ia-topnav>', () => {
         'primary-nav',
         'media-slider',
         'desktop-subnav',
-        'search-menu',
       ];
       componentSelectors.forEach((selector) => {
         const component = el.shadowRoot?.querySelector(selector) as unknown as {
@@ -313,6 +235,24 @@ describe('<ia-topnav>', () => {
     });
   });
 
+  describe('search slot', () => {
+    it('forwards search slot to primary-nav', async () => {
+      const el = await fixture<IATopNav>(html`<ia-topnav></ia-topnav>`);
+      await el.updateComplete;
+
+      const primaryNav = el.shadowRoot?.querySelector('primary-nav');
+      const slot = primaryNav?.querySelector('slot[name="search"]');
+      expect(slot).to.exist;
+    });
+
+    it('does not render search-menu', async () => {
+      const el = await fixture<IATopNav>(html`<ia-topnav></ia-topnav>`);
+      await el.updateComplete;
+
+      expect(el.shadowRoot?.querySelector('search-menu')).to.not.exist;
+    });
+  });
+
   describe('slot pass throughs', () => {
     describe('slot for <primary-nav>', () => {
       it('opens a slot with `secondIdentitySlotMode`', async () => {
@@ -327,15 +267,14 @@ describe('<ia-topnav>', () => {
 
         const slot = el.shadowRoot
           ?.querySelector('primary-nav')
-          ?.querySelector('slot');
+          ?.querySelector('slot[name="opt-sec-logo"]');
         expect(slot).to.exist;
-        expect(slot?.getAttribute('name')).to.equal('opt-sec-logo');
 
         el.secondIdentitySlotMode = '';
         await elementUpdated(el);
         const noSlot = el.shadowRoot
           ?.querySelector('primary-nav')
-          ?.querySelector('slot');
+          ?.querySelector('slot[name="opt-sec-logo"]');
         expect(noSlot).to.not.exist;
       });
     });

package/test/primary-nav.test.ts

@@ -50,7 +50,7 @@ describe('<primary-nav>', () => {
     expect(el.shadowRoot?.querySelector('login-button')).to.not.be.undefined;
   });
 
-  it('does not render search menu toggle and search form if hideSearch true', async () => {
+  it('does not render search trigger or search slot if hideSearch true', async () => {
     const el = await fixture<PrimaryNav>(
       component({
         baseHost: 'archive.org',
@@ -61,7 +61,48 @@ describe('<primary-nav>', () => {
     );
 
     expect(el.shadowRoot?.querySelector('.search-trigger')).to.equal(null);
-    expect(el.shadowRoot?.querySelector('nav-search')).to.equal(null);
+    expect(el.shadowRoot?.querySelector('.search-container')).to.not.exist;
+  });
+
+  it('renders search slot container', async () => {
+    const el = await fixture<PrimaryNav>(
+      component({
+        baseHost: 'archive.org',
+        username: 'testuser',
+        screenName: 'testuser',
+      }),
+    );
+
+    expect(el.shadowRoot?.querySelector('.search-container')).to.exist;
+
+    const slot = el.shadowRoot?.querySelector<HTMLSlotElement>(
+      'slot[name="search"]',
+    );
+    expect(slot).to.exist;
+  });
+
+  it('renders search trigger button for mobile toggle', async () => {
+    const el = await fixture<PrimaryNav>(
+      component({
+        baseHost: 'archive.org',
+        username: 'testuser',
+        screenName: 'testuser',
+      }),
+    );
+
+    expect(el.shadowRoot?.querySelector('.search-trigger')).to.exist;
+  });
+
+  it('does not render nav-search', async () => {
+    const el = await fixture<PrimaryNav>(
+      component({
+        baseHost: 'archive.org',
+        username: 'testuser',
+        screenName: 'testuser',
+      }),
+    );
+
+    expect(el.shadowRoot?.querySelector('nav-search')).to.not.exist;
   });
 
   it('opens a slot with `secondIdentitySlotMode`', async () => {

package/tsconfig.json

@@ -1,31 +1,31 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "plugins": [
-      {
-        "name": "ts-lit-plugin"
-      }
-    ],
-    "paths": {
-      // workaround for: https://github.com/vitest-dev/vitest/issues/4567
-      "rollup/parseAst": [
-        "./node_modules/rollup/dist/parseAst"
-    ]
-}
-  },
-  "include": ["**/*.ts"]
-}
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin"
+      }
+    ],
+    "paths": {
+      // workaround for: https://github.com/vitest-dev/vitest/issues/4567
+      "rollup/parseAst": [
+        "./node_modules/rollup/dist/parseAst"
+    ]
+}
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -1,32 +1,32 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/demo',
-  watch: !hmr,
-  sslCert: './ssl/server.crt',
-  sslKey: './ssl/server.key',
-  hostname: 'local.archive.org',
-  http2: true,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Configure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/demo',
+  watch: !hmr,
+  sslCert: './ssl/server.crt',
+  sslKey: './ssl/server.key',
+  hostname: 'local.archive.org',
+  http2: true,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Configure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});