refactor: improve component type definitions

Author: hperrin

packages/accordion/src/Accordion.types.ts

@@ -1,9 +1,10 @@
-import type { SmuiComponentDev } from '@smui/common';
+import type { ComponentProps } from 'svelte';
+import type { SmuiComponent } from '@smui/common';
 import type Component from './Accordion.svelte';
 
 export declare class AccordionComponentDev
   extends Component
-  implements SmuiComponentDev
+  implements SmuiComponent
 {
   /**
    * @private
@@ -15,7 +16,7 @@ export declare class AccordionComponentDev
     Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
     'use' | 'class' | 'multiple'
   > &
-    Component['$$prop_def'];
+    ComponentProps<Component>;
 
   getElement(): ReturnType<Component['getElement']>;
 }

packages/accordion/src/Header.types.ts

@@ -1,9 +1,10 @@
-import type { SmuiComponentDev } from '@smui/common';
+import type { ComponentProps } from 'svelte';
+import type { SmuiComponent } from '@smui/common';
 import type Component from './Header.svelte';
 
 export declare class HeaderComponentDev
   extends Component
-  implements SmuiComponentDev
+  implements SmuiComponent
 {
   /**
    * @private
@@ -15,7 +16,7 @@ export declare class HeaderComponentDev
     Partial<svelte.JSX.HTMLAttributes<HTMLDivElement>>,
     'use' | 'class' | 'style' | 'ripple'
   > &
-    Component['$$prop_def'];
+    ComponentProps<Component>;
 
   getElement(): ReturnType<Component['getElement']>;
 }

packages/accordion/src/Panel.types.ts

@@ -1,10 +1,11 @@
-import type { SmuiComponentDev } from '@smui/common';
+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 SmuiComponentDev
+  implements SmuiComponent
 {
   /**
    * @private
@@ -25,7 +26,7 @@ export declare class PanelComponentDev
     | 'extend'
     | 'extendedElevation'
   > &
-    Component['$$prop_def'];
+    ComponentProps<Component>;
 
   getElement(): ReturnType<Component['getElement']>;
 }

packages/accordion/src/index.ts

@@ -1,19 +1,21 @@
+import type { ComponentType } from 'svelte';
+
 import Accordion from './Accordion.svelte';
 import type { AccordionComponentDev } from './Accordion.types.js';
 export * from './Accordion.types.js';
 
 import PanelComponent from './Panel.svelte';
 import type { PanelComponentDev } from './Panel.types.js';
 export * from './Panel.types.js';
-const Panel = PanelComponent as typeof PanelComponentDev;
+const Panel = PanelComponent as ComponentType<PanelComponentDev>;
 
 import HeaderComponent from './Header.svelte';
 import type { HeaderComponentDev } from './Header.types.js';
 export * from './Header.types.js';
-const Header = HeaderComponent as typeof HeaderComponentDev;
+const Header = HeaderComponent as ComponentType<HeaderComponentDev>;
 
 import { Content } from '@smui/paper';
 
-export default Accordion as typeof AccordionComponentDev;
+export default Accordion as ComponentType<AccordionComponentDev>;
 
 export { Panel, Header, Content };

packages/autocomplete/src/Autocomplete.types.ts

@@ -1,12 +1,13 @@
-import type { SmuiComponentDev } from '@smui/common';
+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 SmuiComponentDev
+  implements SmuiComponent
 {
   /**
    * @private
@@ -41,7 +42,7 @@ export declare class AutocompleteComponentDev
   } & {
     textfield$label?: never;
     textfield$value?: never;
-  } & Component['$$prop_def'];
+  } & ComponentProps<Component>;
 
   getElement(): ReturnType<Component['getElement']>;
 }

packages/autocomplete/src/index.ts

@@ -1,5 +1,7 @@
+import type { ComponentType } from 'svelte';
+
 import Autocomplete from './Autocomplete.svelte';
 import type { AutocompleteComponentDev } from './Autocomplete.types.js';
 export * from './Autocomplete.types.js';
 
-export default Autocomplete as typeof AutocompleteComponentDev;
+export default Autocomplete as ComponentType<AutocompleteComponentDev>;

packages/badge/src/Badge.types.ts

@@ -1,9 +1,10 @@
-import type { SmuiComponentDev } from '@smui/common';
+import type { ComponentProps } from 'svelte';
+import type { SmuiComponent } from '@smui/common';
 import type Component from './Badge.svelte';
 
 export declare class BadgeComponentDev
   extends Component
-  implements SmuiComponentDev
+  implements SmuiComponent
 {
   /**
    * @private
@@ -15,7 +16,7 @@ export declare class BadgeComponentDev
     Partial<svelte.JSX.HTMLAttributes<HTMLSpanElement>>,
     'use' | 'class' | 'square' | 'color' | 'position' | 'align'
   > &
-    Component['$$prop_def'];
+    ComponentProps<Component>;
 
   getElement(): ReturnType<Component['getElement']>;
 }

packages/badge/src/index.ts

@@ -1,5 +1,7 @@
+import type { ComponentType } from 'svelte';
+
 import Badge from './Badge.svelte';
 import type { BadgeComponentDev } from './Badge.types.js';
 export * from './Badge.types.js';
 
-export default Badge as typeof BadgeComponentDev;
+export default Badge as ComponentType<BadgeComponentDev>;

packages/banner/src/Banner.types.ts

@@ -1,9 +1,10 @@
-import type { SmuiComponentDev } from '@smui/common';
+import type { ComponentProps } from 'svelte';
+import type { SmuiComponent } from '@smui/common';
 import type Component from './Banner.svelte';
 
 export declare class BannerComponentDev
   extends Component
-  implements SmuiComponentDev
+  implements SmuiComponent
 {
   /**
    * @private
@@ -32,7 +33,7 @@ export declare class BannerComponentDev
     > as `graphic\$${k}`]?: Partial<
       svelte.JSX.HTMLAttributes<HTMLDivElement>
     >[k];
-  } & Component['$$prop_def'];
+  } & ComponentProps<Component>;
 
   getElement(): ReturnType<Component['getElement']>;
 }

packages/banner/src/index.ts

@@ -1,9 +1,11 @@
+import type { ComponentType } from 'svelte';
+
 import Banner from './Banner.svelte';
 import type { BannerComponentDev } from './Banner.types.js';
 export * from './Banner.types.js';
 
 import { Label, Icon } from '@smui/common';
 
-export default Banner as typeof BannerComponentDev;
+export default Banner as ComponentType<BannerComponentDev>;
 
 export { Label, Icon };