fix: use separate svg component and fix all type errors

Author: hperrin

packages/button/src/Button.svelte

@@ -62,7 +62,7 @@
     dispatch,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
-  import type { SmuiElementMap, SmuiAttrs } from '@smui/common';
+  import type { SmuiElementMap, SmuiAttrs, SmuiSvgAttrs } from '@smui/common';
   import { SmuiElement } from '@smui/common';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
@@ -82,7 +82,8 @@
     component?: Component;
     tag?: TagName;
   };
-  type $$Props = OwnProps & SmuiAttrs<keyof SmuiElementMap, OwnProps>;
+  type $$Props = OwnProps &
+    (SmuiAttrs<keyof SmuiElementMap, OwnProps> | SmuiSvgAttrs<OwnProps>);
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 

packages/chips/src/Chip.svelte

@@ -69,7 +69,7 @@
     dispatch,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
-  import type { SmuiElementMap, SmuiAttrs } from '@smui/common';
+  import type { SmuiElementMap, SmuiAttrs, SmuiSvgAttrs } from '@smui/common';
   import { SmuiElement } from '@smui/common';
 
   import type { SMUIChipsPrimaryActionAccessor } from './Text.types.js';
@@ -92,7 +92,8 @@
     component?: Component;
     tag?: TagName;
   };
-  type $$Props = OwnProps & SmuiAttrs<keyof SmuiElementMap, OwnProps>;
+  type $$Props = OwnProps &
+    (SmuiAttrs<keyof SmuiElementMap, OwnProps> | SmuiSvgAttrs<OwnProps>);
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 

packages/common/README.md

@@ -39,15 +39,23 @@ The common icon is used everywhere that exports an `Icon` component except for `
 - `class`: `''` - A CSS class string.
 - `on`: `false` - Used in the context of an icon button toggle to denote the icon for when the button is on.
 
-## Element
+## SmuiElement
 
-A dynamic element component.
+A dynamic HTML element component.
 
 ### Props / Defaults
 
 - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
 - `tag`: `'div'` - An HTML tag name to use as the element.
 
+## Svg
+
+An SVG tag component. This is separated from the `SmuiElement` component, because it returns a `SVGSVGElement` object, which does not implement the `HTMLElement` interface.
+
+### Props / Defaults
+
+- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
+
 # Helper Utilities
 
 Helper utilities are exported from the `@smui/common/internal` endpoint. They are used within SMUI to provide additional functionality outside of the features the Svelte API is natively capable of. You can use them in your own components to provide the same additional functionality.

packages/common/src/CommonIcon.svelte

@@ -14,7 +14,7 @@
     'mdc-segmented-button__icon': context === 'segmented-button',
   })}
   aria-hidden="true"
-  {...tag === 'svg' ? { focusable: 'false', tabindex: '-1' } : {}}
+  {...svg ? { focusable: 'false', tabindex: '-1' } : {}}
   {...$$restProps}><slot /></svelte:component
 >
 
@@ -25,8 +25,12 @@
 
   import type { ActionArray } from './internal/useActions.js';
   import { forwardEventsBuilder, classMap } from './internal/index.js';
-  import type { SmuiElementMap, SmuiAttrs } from './smui.types.js';
-  import { SmuiElement } from './index.js';
+  import type {
+    SmuiElementMap,
+    SmuiAttrs,
+    SmuiSvgAttrs,
+  } from './smui.types.js';
+  import { SmuiElement, Svg } from './index.js';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
   type Component = $$Generic<ComponentType<SvelteComponent>>;
@@ -37,7 +41,8 @@
     component?: Component;
     tag?: TagName;
   };
-  type $$Props = OwnProps & SmuiAttrs<keyof SmuiElementMap, OwnProps>;
+  type $$Props = OwnProps &
+    (SmuiAttrs<keyof SmuiElementMap, OwnProps> | SmuiSvgAttrs<OwnProps>);
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
@@ -54,6 +59,7 @@
     component === (SmuiElement as unknown as Component) ? 'svg' : undefined
   ) as TagName | undefined;
 
+  const svg = component === (Svg as unknown as Component);
   const context = getContext<string | undefined>('SMUI:icon:context');
 
   export function getElement(): HTMLElement {

packages/common/src/CommonLabel.svelte

@@ -29,7 +29,11 @@
 
   import type { ActionArray } from './internal/useActions.js';
   import { forwardEventsBuilder, classMap } from './internal/index.js';
-  import type { SmuiElementMap, SmuiAttrs } from './smui.types.js';
+  import type {
+    SmuiElementMap,
+    SmuiAttrs,
+    SmuiSvgAttrs,
+  } from './smui.types.js';
   import { SmuiElement } from './index.js';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
@@ -40,7 +44,8 @@
     component?: Component;
     tag?: TagName;
   };
-  type $$Props = OwnProps & SmuiAttrs<keyof SmuiElementMap, OwnProps>;
+  type $$Props = OwnProps &
+    (SmuiAttrs<keyof SmuiElementMap, OwnProps> | SmuiSvgAttrs<OwnProps>);
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 

packages/common/src/Svg.svelte

@@ -0,0 +1,27 @@
+<svg bind:this={element} use:useActions={use} use:forwardEvents {...$$restProps}
+  ><slot /></svg
+>
+
+<script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+
+  import type { ActionArray } from './internal/useActions.js';
+  import { forwardEventsBuilder, useActions } from './internal/index.js';
+  import type { SmuiSvgAttrs } from './smui.types.js';
+
+  type OwnProps = {
+    use?: ActionArray;
+  };
+  type $$Props = OwnProps & SmuiSvgAttrs<OwnProps>;
+
+  // Remember to update $$Props if you add/remove/rename props.
+  export let use: ActionArray = [];
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  let element: SVGSVGElement;
+
+  export function getElement() {
+    return element;
+  }
+</script>

packages/common/src/index.ts

@@ -3,8 +3,9 @@ import Label from './CommonLabel.svelte';
 import Icon from './CommonIcon.svelte';
 
 import SmuiElement from './SmuiElement.svelte';
+import Svg from './Svg.svelte';
 
 import ContextFragment from './ContextFragment.svelte';
 
-export { Label, Icon, SmuiElement, ContextFragment };
+export { Label, Icon, SmuiElement, Svg, ContextFragment };
 export * from './smui.types.js';

packages/common/src/smui.types.ts

@@ -9,6 +9,14 @@ export type SmuiAttrs<
 } & SvelteAttrs &
   DataAttrs;
 
+export type SmuiSvgAttrs<OwnProps extends Object> = {
+  [P in keyof Omit<
+    svelte.JSX.SVGProps<SVGSVGElement>,
+    keyof OwnProps
+  >]?: svelte.JSX.SVGProps<SVGSVGElement>[P];
+} & SvelteAttrs &
+  DataAttrs;
+
 export type SvelteAttrs = {
   'sveltekit:noscroll'?: true | undefined | null;
   'sveltekit:prefetch'?: true | undefined | null;
@@ -173,8 +181,6 @@ export interface SmuiElementMap {
   // frameset: HTMLElementTagNameMap['frameset'];
   // marquee: HTMLElementTagNameMap['marquee'];
   template: HTMLElementTagNameMap['template'];
-
-  svg: SVGSVGElement;
 }
 
 export interface SmuiElementPropMap {
@@ -295,6 +301,4 @@ export interface SmuiElementPropMap {
   // frameset: svelte.JSX.HTMLProps<HTMLElementTagNameMap['frameset']>;
   // marquee: svelte.JSX.HTMLProps<HTMLElementTagNameMap['marquee']>;
   template: svelte.JSX.HTMLProps<HTMLElementTagNameMap['template']>;
-
-  svg: svelte.JSX.SVGProps<SVGSVGElement>;
 }

packages/drawer/src/Scrim.svelte

@@ -23,7 +23,7 @@
     classMap,
     dispatch,
   } from '@smui/common/internal';
-  import type { SmuiElementMap, SmuiAttrs } from '@smui/common';
+  import type { SmuiElementMap, SmuiAttrs, SmuiSvgAttrs } from '@smui/common';
   import { SmuiElement } from '@smui/common';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
@@ -35,7 +35,8 @@
     component?: Component;
     tag?: TagName;
   };
-  type $$Props = OwnProps & SmuiAttrs<keyof SmuiElementMap, OwnProps>;
+  type $$Props = OwnProps &
+    (SmuiAttrs<keyof SmuiElementMap, OwnProps> | SmuiSvgAttrs<OwnProps>);
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 

packages/fab/src/Fab.svelte

@@ -45,7 +45,7 @@
   import type { ActionArray } from '@smui/common/internal';
   import { forwardEventsBuilder, classMap } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
-  import type { SmuiElementMap, SmuiAttrs } from '@smui/common';
+  import type { SmuiElementMap, SmuiAttrs, SmuiSvgAttrs } from '@smui/common';
   import { SmuiElement } from '@smui/common';
 
   type TagName = $$Generic<keyof SmuiElementMap>;
@@ -64,7 +64,8 @@
     component?: Component;
     tag?: TagName;
   };
-  type $$Props = OwnProps & SmuiAttrs<keyof SmuiElementMap, OwnProps>;
+  type $$Props = OwnProps &
+    (SmuiAttrs<keyof SmuiElementMap, OwnProps> | SmuiSvgAttrs<OwnProps>);
 
   const forwardEvents = forwardEventsBuilder(get_current_component());