bug: #277 support types for <svg> elements in JSX

src/jsx.d.ts

@@ -7,6 +7,21 @@ type ElementAttributes<E extends HTMLElement> = {
   [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration<E[A]>;
 } & {
   class?: string;
+  children?: any;
+};
+
+// creates a utility type for SVG attributes, allowing string values for SVG-specific attributes
+type SVGElementAttributes<E extends SVGElement> = {
+  [A in keyof E]?: string | undefined;
+} & {
+  class?: string;
+  fill?: string;
+  stroke?: string;
+  d?: string;
+  viewBox?: string;
+  xmlns?: string;
+  preserveAspectRatio?: string;
+  [key: string]: any;
 };
 
 type PopoverState = 'auto' | 'manual' | 'hint';
@@ -25,9 +40,15 @@ type PopoverAttributes = {
 // map each HTML tag to its attributes
 type IntrinsicElementsFromDom = {
   [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]> &
-    (E extends 'button' | 'input' ? PopoverAttributes : {});
+    (E extends 'button' | 'input' ? PopoverAttributes : {}) &
+    (E extends 'button' ? { tabindex?: number | string } : {});
+};
+
+// map each SVG tag to its attributes
+type IntrinsicElementsFromSVG = {
+  [E in keyof SVGElementTagNameMap]: SVGElementAttributes<SVGElementTagNameMap[E]>;
 };
 
 declare namespace JSX {
-  interface IntrinsicElements extends IntrinsicElementsFromDom {}
+  interface IntrinsicElements extends IntrinsicElementsFromDom, IntrinsicElementsFromSVG {}
 }

test/cases/tsx/src/counter.tsx

@@ -55,7 +55,24 @@ export default class Counter extends HTMLElement {
         </span>
         {/* @ts-expect-error - onclick should be a function, but we coerce to an assignment */}
         <button onclick={(this.count += 1)}> + (inline state update)</button>
-        <button onclick={this.increment}> + (function reference)</button>
+        {/* test for https://github.com/ProjectEvergreen/wcc/issues/277 */}
+        <button onclick={this.increment} tabindex={-1}> + (function reference)</button>
+        {/* test for https://github.com/ProjectEvergreen/wcc/issues/277 */}
+        <svg
+          class="svg-inline--fa fa-share-alt fa-w-14"
+          aria-hidden="true"
+          data-prefix="fas"
+          data-icon="share-alt"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+          data-fa-i2svg=""
+        >
+          <path
+            fill="currentColor"
+            d="M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z"
+          ></path>
+        </svg>
       </div>
     );
   }