feat: #228 popover attribute typings

docs/pages/docs.md

@@ -385,7 +385,7 @@ There are of couple things you will need to do to use WCC with JSX:
 
 ### TSX
 
-TSX (.tsx) file are also supported and your HTML will also be **type-safe**. You'll need to configure JSX in your _tsconfig.json_ by adding these two lines to your `compilerOptions` settings:
+TSX (.tsx) file are also supported and your HTML will also be **type-safe**. You'll need to configure JSX in your _tsconfig.json_ by adding these required (and recommend) entries into to your `compilerOptions` settings:
 
 <!-- prettier-ignore-start -->
 
@@ -395,6 +395,7 @@ TSX (.tsx) file are also supported and your HTML will also be **type-safe**. You
     // required options
     "jsx": "preserve",
     "jsxImportSource": "wc-compiler",
+    "lib": ["DOM"],
 
     // additional recommended options
     "allowImportingTsExtensions": true,

package.json

@@ -94,7 +94,7 @@
     "remark-toc": "^8.0.1",
     "rimraf": "^3.0.2",
     "simple.css": "^0.1.3",
-    "typescript": "^5.8.2",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
     "unified": "^10.1.2"
   }

src/jsx.d.ts

@@ -1,20 +1,24 @@
 // to support `style` attributes, we override `CSSStyleDeclaration` with `string`
 type IsCSSStyleDeclaration<T> = T extends CSSStyleDeclaration ? string : T;
 
-// create a utility type to extract the attributes from any given element's DOM interface.
+// creates a utility type to extract the attributes from any given element's DOM interface from `HTMLElementTagNameMap`
 type ElementAttributes<E extends HTMLElement> = {
-  // Extract all properties from the element, including inherited ones.
+  // Extract all properties from the element, including inherited ones
   [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration<E[A]>;
 } & {
   class?: string;
+  // have to manage this manually, can't seem to get this from TypeScript itself (not sure if just skill issue? :D)
+  // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1790
+  // it should be there per https://github.com/mdn/browser-compat-data/pull/21875
+  popovertarget?: string;
+  popovertargetaction?: 'show' | 'hide' | 'toggle';
 };
 
-// map each HTML tag to a union of its attributes and the global attributes.
+// map each HTML tag to its attributes
 type IntrinsicElementsFromDom = {
   [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]>;
 };
 
-// declare the global JSX namespace with your generated intrinsic elements.
 declare namespace JSX {
   interface IntrinsicElements extends IntrinsicElementsFromDom {}
 }

test/cases/tsx/src/header.tsx

@@ -0,0 +1,10 @@
+// testing for https://github.com/ProjectEvergreen/wcc/issues/228
+export default class Header extends HTMLElement {
+  render() {
+    return (
+      <button popovertarget="mobile-menu" popovertargetaction="hide">
+        Close
+      </button>
+    );
+  }
+}

tsconfig.json

@@ -13,7 +13,8 @@
     "noImplicitAny": true,
     "types": ["mocha", "node"],
     "jsx": "preserve",
-    "jsxImportSource": "wc-compiler"
+    "jsxImportSource": "wc-compiler",
+    "lib": ["DOM"]
   },
   "exclude": ["node_modules"]
 }