refactor: move getElement out of component definition

Author: hperrin

packages/accordion/src/Accordion.types.ts

@@ -1,11 +1,7 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type Component from './Accordion.svelte';
 
-export declare class AccordionComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class AccordionComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -17,6 +13,4 @@ export declare class AccordionComponentDev
     'use' | 'class' | 'multiple'
   > &
     ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }

packages/accordion/src/Header.types.ts

@@ -1,11 +1,7 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type Component from './Header.svelte';
 
-export declare class HeaderComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class HeaderComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -17,6 +13,4 @@ export declare class HeaderComponentDev
     'use' | 'class' | 'style' | 'ripple'
   > &
     ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }

packages/accordion/src/Panel.types.ts

@@ -1,12 +1,8 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type { PaperComponentDev } from '@smui/paper';
 import type Component from './Panel.svelte';
 
-export declare class PanelComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class PanelComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -27,8 +23,6 @@ export declare class PanelComponentDev
     | 'extendedElevation'
   > &
     ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }
 
 export interface SMUIAccordionPanelAccessor {

packages/autocomplete/src/Autocomplete.types.ts

@@ -1,14 +1,10 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type { MenuComponentDev } from '@smui/menu';
 import type { TextfieldComponentDev } from '@smui/textfield';
 import type { ListComponentDev } from '@smui/list';
 import type Component from './Autocomplete.svelte';
 
-export declare class AutocompleteComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class AutocompleteComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -43,6 +39,4 @@ export declare class AutocompleteComponentDev
     textfield$label?: never;
     textfield$value?: never;
   } & ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }

packages/badge/src/Badge.types.ts

@@ -1,11 +1,7 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type Component from './Badge.svelte';
 
-export declare class BadgeComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class BadgeComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -17,6 +13,4 @@ export declare class BadgeComponentDev
     'use' | 'class' | 'square' | 'color' | 'position' | 'align'
   > &
     ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }

packages/banner/src/Banner.types.ts

@@ -1,11 +1,7 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type Component from './Banner.svelte';
 
-export declare class BannerComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class BannerComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -34,8 +30,6 @@ export declare class BannerComponentDev
       svelte.JSX.HTMLAttributes<HTMLDivElement>
     >[k];
   } & ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }
 
 export { CloseReason } from '@material/banner';

packages/button/src/Button.svelte

@@ -63,7 +63,7 @@
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
   import type { SmuiComponent } from '@smui/common';
-  import { Element } from '@smui/common';
+  import { SmuiElement } from '@smui/common';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
@@ -86,9 +86,9 @@
   let internalStyles: { [k: string]: string } = {};
   let context = getContext<string | undefined>('SMUI:button:context');
 
-  export let component: SmuiComponent = Element;
+  export let component: ComponentType<SmuiComponent> = SmuiElement;
   export let tag =
-    component === Element ? (href == null ? 'button' : 'a') : null;
+    component === SmuiElement ? (href == null ? 'button' : 'a') : null;
 
   $: actionProp =
     context === 'dialog:action' && action != null
@@ -103,7 +103,10 @@
 
   let previousDisabled = $$restProps.disabled;
   $: if (previousDisabled !== $$restProps.disabled) {
-    getElement().blur();
+    const el = getElement();
+    if ('blur' in el) {
+      (el as HTMLButtonElement).blur();
+    }
     previousDisabled = $$restProps.disabled;
   }
 
@@ -144,9 +147,7 @@
     }
   }
 
-  export function getElement(): ReturnType<
-    InstanceType<typeof component>['getElement']
-  > {
+  export function getElement(): HTMLElement {
     return element.getElement();
   }
 </script>

packages/button/src/Button.types.ts

@@ -1,16 +1,13 @@
 import type { ComponentProps, ComponentType } from 'svelte';
-import type { SmuiComponent, ElementComponentDev } from '@smui/common';
+import type { SmuiComponent, SmuiElementComponentDev } from '@smui/common';
 import type Component from './Button.svelte';
 
 export declare class ButtonComponentDev<
-    T extends string = 'button',
-    C extends ComponentType<SmuiComponent> = ComponentType<
-      ElementComponentDev<T>
-    >
+  T extends string = 'button',
+  C extends ComponentType<SmuiComponent> = ComponentType<
+    SmuiElementComponentDev<T>
   >
-  extends Component
-  implements SmuiComponent
-{
+> extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -36,6 +33,4 @@ export declare class ButtonComponentDev<
     | 'tag'
   > &
     ComponentProps<Component>;
-
-  getElement(): ReturnType<InstanceType<C>['getElement']>;
 }

packages/button/src/Group.types.ts

@@ -1,11 +1,7 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type Component from './Group.svelte';
 
-export declare class GroupComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class GroupComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -17,6 +13,4 @@ export declare class GroupComponentDev
     'use' | 'class' | 'variant'
   > &
     ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }

packages/card/src/Actions.types.ts

@@ -1,11 +1,7 @@
 import type { ComponentProps } from 'svelte';
-import type { SmuiComponent } from '@smui/common';
 import type Component from './Actions.svelte';
 
-export declare class ActionsComponentDev
-  extends Component
-  implements SmuiComponent
-{
+export declare class ActionsComponentDev extends Component {
   /**
    * @private
    * For type checking capabilities only.
@@ -17,6 +13,4 @@ export declare class ActionsComponentDev
     'use' | 'class' | 'fullBleed'
   > &
     ComponentProps<Component>;
-
-  getElement(): ReturnType<Component['getElement']>;
 }