custom Popover types are breaking with TypeScript 6.x

[thescientist13]

What happened?

Tried upgrading a few WCC based projects to TypeScript 6.x and now getting errors on <button> tags

popovertarget

thescientist13/greenwood-counter-jsx#7

➜  greenwood-counter-jsx git:(signals) ✗ npm run check                                                               

> greenwood-counter-jsx@1.0.0 check
> tsc

src/components/counter/counter.tsx:50:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

50         <button onclick={this.increment}>Increment (+)</button>
            ~~~~~~

src/components/counter/counter.tsx:51:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

51         <button onclick={this.decrement}>Decrement (-)</button>
            ~~~~~~

src/components/counter/counter.tsx:52:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

52         <button onclick={this.double}>Double (++)</button>
            ~~~~~~


Found 3 errors in the same file, starting at: src/components/counter/counter.tsx:50

mise WARN  missing: node@22.18.0  

onclick

ProjectEvergreen/playground.wcc.dev#18

➜  playground.wcc.dev git:(feat/issue-9-initial-editor-experience) ✗ npm run check

> playground.wcc.dev@1.0.0 check
> tsgo

src/components/header/header.tsx:93:11 - error TS2322: Type '{ class: string; popovertarget: string; "aria-label": string; }' is not assignable to type '{ ariaActiveDescendantElement?: Element | null | undefined; ariaAtomic?: string | null | undefined; ariaAutoComplete?: string | null | undefined; ariaBrailleLabel?: string | null | undefined; ... 340 more ...; readonly assignedSlot?: HTMLSlotElement | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Property 'popovertarget' does not exist on type '{ ariaActiveDescendantElement?: Element | null | undefined; ariaAtomic?: string | null | undefined; ariaAutoComplete?: string | null | undefined; ariaBrailleLabel?: string | null | undefined; ... 340 more ...; readonly assignedSlot?: HTMLSlotElement | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.

93           popovertarget="mobile-menu"
             ~~~~~~~~~~~~~

src/components/header/header.tsx:103:15 - error TS2322: Type '{ class: string; popovertarget: string; popovertargetaction: string; "aria-label": string; }' is not assignable to type '{ ariaActiveDescendantElement?: Element | null | undefined; ariaAtomic?: string | null | undefined; ariaAutoComplete?: string | null | undefined; ariaBrailleLabel?: string | null | undefined; ... 340 more ...; readonly assignedSlot?: HTMLSlotElement | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Property 'popovertarget' does not exist on type '{ ariaActiveDescendantElement?: Element | null | undefined; ariaAtomic?: string | null | undefined; ariaAutoComplete?: string | null | undefined; ariaBrailleLabel?: string | null | undefined; ... 340 more ...; readonly assignedSlot?: HTMLSlotElement | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.

103               popovertarget="mobile-menu"
                  ~~~~~~~~~~~~~


Found 2 errors in the same file, starting at: src/components/header/header.tsx:93

Steps to reproduce

1. Be using TypeScript >= 6.x
2. Have a <button> tags with a popover or onclick attribute

Environment

• WCC 0.21.1
• TypeScript >= 6.x

Additional Context

Do we need to document / assert TypeScript compat? Might need to document / clarify minimum TS version support

[thescientist13]

For reference, upgrading the WCC repo, there are a bunch of breaking changes, including the ones cited above

➜  wcc git:(master) ✗ npm run check:types

> wc-compiler@0.21.1 check:types
> tsc

docs/components/banner-cta/banner-cta.test.ts:46:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

46     bannerCta = undefined;
       ~~~~~~~~~

docs/components/banner-splash/banner-splash.test.ts:28:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

28     bannerSplash = undefined;
       ~~~~~~~~~~~~

docs/components/capability-box/capability-box.test.ts:59:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

59     capabilityBox = undefined;
       ~~~~~~~~~~~~~

docs/components/ctc-block/ctc-block.ts:52:7 - error TS2531: Object is possibly 'null'.

52       this.shadowRoot.appendChild(template.content.cloneNode(true));
         ~~~~~~~~~~~~~~~

docs/components/ctc-block/ctc-block.ts:56:11 - error TS2531: Object is possibly 'null'.

56           this.shadowRoot
             ~~~~~~~~~~~~~~~

docs/components/ctc-block/ctc-block.ts:61:11 - error TS2531: Object is possibly 'null'.

61           this.shadowRoot
             ~~~~~~~~~~~~~~~

docs/components/ctc-block/ctc-block.ts:67:7 - error TS2531: Object is possibly 'null'.

67       this.shadowRoot.adoptedStyleSheets = [theme, sheet];
         ~~~~~~~~~~~~~~~

docs/components/ctc-block/ctc-block.ts:79:22 - error TS2531: Object is possibly 'null'.

79     const contents = this.getAttribute('paste-contents').trim();
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/ctc-button/ctc-button.test.ts:21:20 - error TS18047: 'ctc.shadowRoot' is possibly 'null'.

21       const icon = ctc.shadowRoot.querySelectorAll("[title='Copy to clipboard']");
                      ~~~~~~~~~~~~~~

docs/components/ctc-button/ctc-button.test.ts:29:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

29     ctc = undefined;
       ~~~

docs/components/ctc-button/ctc-button.tsx:15:7 - error TS2531: Object is possibly 'null'.

15       this.shadowRoot.appendChild(template.content.cloneNode(true));
         ~~~~~~~~~~~~~~~

docs/components/ctc-button/ctc-button.tsx:17:7 - error TS2531: Object is possibly 'null'.

17       this.shadowRoot.adoptedStyleSheets = [sheet];
         ~~~~~~~~~~~~~~~

docs/components/ctc-button/ctc-button.tsx:19:7 - error TS2531: Object is possibly 'null'.

19       this.shadowRoot.getElementById('icon')?.addEventListener('click', () => {
         ~~~~~~~~~~~~~~~

docs/components/ctc-button/ctc-button.tsx:22:39 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

22         navigator.clipboard.writeText(contents);
                                         ~~~~~~~~

docs/components/feature-box/feature-box.test.ts:71:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

71     featureBox = undefined;
       ~~~~~~~~~~

docs/components/footer/footer.test.ts:41:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

41     footer = undefined;
       ~~~~~~

docs/components/header/header.test.ts:41:14 - error TS18047: 'anchor' is possibly 'null'.

41       expect(anchor.getAttribute('href')).to.equal('/');
                ~~~~~~

docs/components/header/header.test.ts:59:16 - error TS18048: 'navItem' is possibly 'undefined'.

59         expect(navItem.data.order).to.equal((idx += 1));
                  ~~~~~~~

docs/components/header/header.test.ts:60:43 - error TS18048: 'navItem' is possibly 'undefined'.

60         expect(link.textContent).to.equal(navItem.label);
                                             ~~~~~~~

docs/components/header/header.test.ts:64:13 - error TS18048: 'navItem' is possibly 'undefined'.

64         if (navItem.title) {
               ~~~~~~~

docs/components/header/header.test.ts:65:55 - error TS18048: 'navItem' is possibly 'undefined'.

65           expect(link.getAttribute('title')).to.equal(navItem.title);
                                                         ~~~~~~~

docs/components/header/header.test.ts:69:13 - error TS18048: 'navItem' is possibly 'undefined'.

69         if (navItem.route === CURRENT_ROUTE && link.getAttribute('class').includes('active')) {
               ~~~~~~~

docs/components/header/header.test.ts:69:48 - error TS2531: Object is possibly 'null'.

69         if (navItem.route === CURRENT_ROUTE && link.getAttribute('class').includes('active')) {
                                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/header/header.test.ts:70:11 - error TS2322: Type '{ id: string; label: string; title: null; route: string; layout: string; data: { collection: string; order: number; tocHeading: number; imports?: undefined; }; imports: never[]; resources: never[]; pageHref: string; ... 6 more ...; segment: null; } | { ...; } | { ...; } | undefined' is not assignable to type 'Page'.
  Type 'undefined' is not assignable to type 'Page'.

70           activeRoute = navItem;
             ~~~~~~~~~~~

docs/components/header/header.test.ts:74:14 - error TS2454: Variable 'activeRoute' is used before being assigned.

74       expect(activeRoute.route).to.equal(CURRENT_ROUTE);
                ~~~~~~~~~~~

docs/components/header/header.test.ts:109:11 - error TS2322: Type 'undefined' is not assignable to type 'Page'.

109       let activeRoute: Page = undefined;
              ~~~~~~~~~~~

docs/components/header/header.test.ts:115:16 - error TS18048: 'navItem' is possibly 'undefined'.

115         expect(navItem.data.order).to.equal((idx += 1));
                   ~~~~~~~

docs/components/header/header.test.ts:116:43 - error TS18048: 'navItem' is possibly 'undefined'.

116         expect(link.textContent).to.equal(navItem.label);
                                              ~~~~~~~

docs/components/header/header.test.ts:120:13 - error TS18048: 'navItem' is possibly 'undefined'.

120         if (navItem.title) {
                ~~~~~~~

docs/components/header/header.test.ts:121:55 - error TS18048: 'navItem' is possibly 'undefined'.

121           expect(link.getAttribute('title')).to.equal(navItem.title);
                                                          ~~~~~~~

docs/components/header/header.test.ts:125:13 - error TS18048: 'navItem' is possibly 'undefined'.

125         if (navItem.route === CURRENT_ROUTE && link.getAttribute('class').includes('active')) {
                ~~~~~~~

docs/components/header/header.test.ts:125:48 - error TS2531: Object is possibly 'null'.

125         if (navItem.route === CURRENT_ROUTE && link.getAttribute('class').includes('active')) {
                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/header/header.test.ts:126:11 - error TS2322: Type '{ id: string; label: string; title: null; route: string; layout: string; data: { collection: string; order: number; tocHeading: number; imports?: undefined; }; imports: never[]; resources: never[]; pageHref: string; ... 6 more ...; segment: null; } | { ...; } | { ...; } | undefined' is not assignable to type 'Page'.
  Type 'undefined' is not assignable to type 'Page'.

126           activeRoute = navItem;
              ~~~~~~~~~~~

docs/components/header/header.test.ts:136:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

136     header = undefined;
        ~~~~~~

docs/components/header/header.tsx:77:11 - error TS2322: Type '{ class: string; popovertarget: string; "aria-label": string; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Property 'popovertarget' does not exist on type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.

77           popovertarget="mobile-menu"
             ~~~~~~~~~~~~~

docs/components/header/header.tsx:87:15 - error TS2322: Type '{ class: string; popovertarget: string; popovertargetaction: string; "aria-label": string; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Property 'popovertarget' does not exist on type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.

87               popovertarget="mobile-menu"
                 ~~~~~~~~~~~~~

docs/components/sandbox/signal-counter.tsx:28:5 - error TS2531: Object is possibly 'null'.

28     this.shadowRoot.adoptedStyleSheets = [sheet];
       ~~~~~~~~~~~~~~~

docs/components/sandbox/signal-counter.tsx:53:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

53         <button onclick={this.increment}>Increment (+)</button>
            ~~~~~~

docs/components/sandbox/signal-counter.tsx:54:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

54         <button onclick={this.decrement}>Decrement (-)</button>
            ~~~~~~

docs/components/sandbox/signal-counter.tsx:58:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

58         <button onclick={this.double}>Double (++)</button>
            ~~~~~~

docs/components/side-nav/side-nav.test.ts:92:5 - error TS2322: Type '{ id: string; label: string; title: string; route: string; layout: string; data: { collection: string; order: number; tocHeading: number; tableOfContents: { content: string; slug: string; lvl: number; i: number; seen: number; }[]; }; } | undefined' is not assignable to type 'DocsPage'.
  Type 'undefined' is not assignable to type 'DocsPage'.
    Type 'undefined' is not assignable to type 'Page'.

92     expectedDocsContent = GRAPH.find((page) => page.route === ROUTE);
       ~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:104:7 - error TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
  Type 'null' is not assignable to type 'HTMLElement'.

104       fullMenu = nav.querySelector('#main-menu');
          ~~~~~~~~

docs/components/side-nav/side-nav.test.ts:121:37 - error TS18048: 'expectedDocsContent.data' is possibly 'undefined'.

121       expect(links.length).to.equal(expectedDocsContent.data.tableOfContents.length);
                                        ~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:121:37 - error TS18048: 'expectedDocsContent.data.tableOfContents' is possibly 'undefined'.

121       expect(links.length).to.equal(expectedDocsContent.data.tableOfContents.length);
                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:128:43 - error TS18048: 'expectedDocsContent.data' is possibly 'undefined'.

128         expect(link.textContent).to.equal(expectedDocsContent.data.tableOfContents[index].content);
                                              ~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:128:43 - error TS18048: 'expectedDocsContent.data.tableOfContents' is possibly 'undefined'.

128         expect(link.textContent).to.equal(expectedDocsContent.data.tableOfContents[index].content);
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:133:7 - error TS2322: Type 'null' is not assignable to type 'HTMLElement'.

133       fullMenu = null;
          ~~~~~~~~

docs/components/side-nav/side-nav.test.ts:142:7 - error TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
  Type 'null' is not assignable to type 'HTMLElement'.

142       compactMenu = nav.querySelector(`#mobile-menu`);
          ~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:182:37 - error TS18048: 'expectedDocsContent.data' is possibly 'undefined'.

182       expect(links.length).to.equal(expectedDocsContent.data.tableOfContents.length);
                                        ~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:182:37 - error TS18048: 'expectedDocsContent.data.tableOfContents' is possibly 'undefined'.

182       expect(links.length).to.equal(expectedDocsContent.data.tableOfContents.length);
                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:189:43 - error TS18048: 'expectedDocsContent.data' is possibly 'undefined'.

189         expect(link.textContent).to.equal(expectedDocsContent.data.tableOfContents[index].content);
                                              ~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:189:43 - error TS18048: 'expectedDocsContent.data.tableOfContents' is possibly 'undefined'.

189         expect(link.textContent).to.equal(expectedDocsContent.data.tableOfContents[index].content);
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:194:7 - error TS2322: Type 'null' is not assignable to type 'HTMLElement'.

194       compactMenu = null;
          ~~~~~~~~~~~

docs/components/side-nav/side-nav.test.ts:200:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

200     nav = undefined;
        ~~~

docs/components/side-nav/side-nav.tsx:17:3 - error TS2564: Property 'route' has no initializer and is not definitely assigned in the constructor.

17   route: string;
     ~~~~~

docs/components/side-nav/side-nav.tsx:18:3 - error TS2564: Property 'toc' has no initializer and is not definitely assigned in the constructor.

18   toc: TableOfContents;
     ~~~

docs/components/side-nav/side-nav.tsx:19:3 - error TS2564: Property 'heading' has no initializer and is not definitely assigned in the constructor.

19   heading: string;
     ~~~~~~~

docs/components/side-nav/side-nav.tsx:24:11 - error TS2322: Type 'Page | undefined' is not assignable to type 'DocsPage'.
  Type 'undefined' is not assignable to type 'DocsPage'.
    Type 'undefined' is not assignable to type 'Page'.

24     const page: DocsPage = (await getContent()).find((page) => page.route === route);
             ~~~~

docs/components/side-nav/side-nav.tsx:53:13 - error TS2322: Type 'string' is not assignable to type 'Element'.

53             {heading}
               ~~~~~~~~~

docs/components/side-nav/side-nav.tsx:59:15 - error TS2322: Type '{ class: string; popovertarget: string; popovertargetaction: string; "aria-label": string; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Property 'popovertarget' does not exist on type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.

59               popovertarget="compact-menu"
                 ~~~~~~~~~~~~~

docs/components/social-tray/social-tray.test.ts:51:52 - error TS18048: 'iconItem' is possibly 'undefined'.

51         expect(link.getAttribute('href')).to.equal(iconItem.link);
                                                      ~~~~~~~~

docs/components/social-tray/social-tray.test.ts:59:5 - error TS2322: Type 'undefined' is not assignable to type 'HTMLElement'.

59     tray = undefined;
       ~~~~

test/cases/tsx-inferred-observability/src/counter.tsx:32:11 - error TS2322: Type 'string' is not assignable to type 'Element'.

32           {' '}
             ~~~~~

test/cases/tsx-inferred-observability/src/counter.tsx:32:16 - error TS2747: 'button' components don't accept text as child elements. Text in JSX has the type 'string', but the expected type of 'children' is 'HTMLCollection | undefined'.

32           {' '}
                  
33           - (function reference)
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
34         </button>
   ~~~~~~~~

test/cases/tsx-inferred-observability/src/counter.tsx:36:11 - error TS2322: Type 'string' is not assignable to type 'Element'.

36           {' '}
             ~~~~~

test/cases/tsx-inferred-observability/src/counter.tsx:36:16 - error TS2747: 'button' components don't accept text as child elements. Text in JSX has the type 'string', but the expected type of 'children' is 'HTMLCollection | undefined'.

36           {' '}
                  
37           - (inline state update)
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
38         </button>
   ~~~~~~~~

test/cases/tsx-inferred-observability/src/counter.tsx:52:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

52         <button onclick={() => count.set(count.get() + 1)}> + (inline state update)</button>
            ~~~~~~

test/cases/tsx-inferred-observability/src/counter.tsx:53:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

53         <button onclick={this.increment}> + (function reference)</button>
            ~~~~~~

test/cases/tsx-shadow-dom/src/heading.tsx:2:3 - error TS2564: Property 'greeting' has no initializer and is not definitely assigned in the constructor.

2   greeting: string;
    ~~~~~~~~

test/cases/tsx-shadow-dom/src/heading.tsx:23:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

23         <button onclick={this.sayHello}>Get a greeting!</button>
            ~~~~~~

test/cases/tsx/src/counter.tsx:33:11 - error TS2322: Type 'string' is not assignable to type 'Element'.

33           {' '}
             ~~~~~

test/cases/tsx/src/counter.tsx:33:16 - error TS2747: 'button' components don't accept text as child elements. Text in JSX has the type 'string', but the expected type of 'children' is 'HTMLCollection | undefined'.

33           {' '}
                  
34           - (function reference)
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
35         </button>
   ~~~~~~~~

test/cases/tsx/src/counter.tsx:36:37 - error TS2322: Type 'number' is not assignable to type '(this: GlobalEventHandlers, ev: PointerEvent) => any'.

36         <button id="evt-assignment" onclick={(this.count -= 1)}>
                                       ~~~~~~~

test/cases/tsx/src/counter.tsx:37:11 - error TS2322: Type 'string' is not assignable to type 'Element'.

37           {' '}
             ~~~~~

test/cases/tsx/src/counter.tsx:37:16 - error TS2747: 'button' components don't accept text as child elements. Text in JSX has the type 'string', but the expected type of 'children' is 'HTMLCollection | undefined'.

37           {' '}
                  
38           - (inline state update)
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
39         </button>
   ~~~~~~~~

test/cases/tsx/src/counter.tsx:47:17 - error TS2322: Type 'number' is not assignable to type '(this: GlobalEventHandlers, ev: PointerEvent) => any'.

47         <button onclick={(this.count += 1)}> + (inline state update)</button>
                   ~~~~~~~

test/cases/tsx/src/counter.tsx:48:10 - error TS2322: Type '{ onclick: () => void; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Type '{ onclick: () => void; }' is missing the following properties from type 'PopoverTargetAttributes': popoverTargetAction, popoverTargetElement

48         <button onclick={this.increment}> + (function reference)</button>
            ~~~~~~

test/cases/tsx/src/header.tsx:6:17 - error TS2322: Type '{ popovertarget: string; popovertargetaction: string; }' is not assignable to type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.
  Property 'popovertarget' does not exist on type '{ command?: string | undefined; commandForElement?: Element | null | undefined; disabled?: boolean | undefined; readonly form?: HTMLFormElement | null | undefined; ... 342 more ...; popoverTargetElement?: Element | ... 1 more ... | undefined; } & { ...; } & PopoverTargetAttributes'.

6         <button popovertarget="mobile-menu" popovertargetaction="hide">
                  ~~~~~~~~~~~~~

vitest.config.ts:49:9 - error TS2532: Object is possibly 'undefined'.

49         importer?.indexOf('/docs/components/') >= 0 &&
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

vitest.config.ts:54:39 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

54         return path.join(path.dirname(importer), `${id}.type`);
                                         ~~~~~~~~

vitest.config.ts:85:32 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

85         const response = await rawResource.intercept(url, null, new Response(contents));
                                  ~~~~~~~~~~~~~~~~~~~~~

vitest.config.ts:85:32 - error TS18048: 'rawResource.intercept' is possibly 'undefined'.

85         const response = await rawResource.intercept(url, null, new Response(contents));
                                  ~~~~~~~~~~~~~~~~~~~~~

vitest.config.ts:85:59 - error TS2345: Argument of type 'null' is not assignable to parameter of type 'Request'.

85         const response = await rawResource.intercept(url, null, new Response(contents));
                                                             ~~~~