feat: redo type system to bring types into their svelte files

Author: hperrin

package-lock.json

@@ -21,18 +21,26 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
+  import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import {
     forwardEventsBuilder,
     classMap,
     useActions,
   } from '@smui/common/internal';
 
+  type OwnProps = {
+    use?: ActionArray;
+    class?: string;
+    multiple?: boolean;
+  };
+  type $$Props = OwnProps & SmuiAttrs<'div', OwnProps>;
+
   import type { SMUIAccordionPanelAccessor } from './Panel.types.js';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  // Remember to update types file if you add/remove/rename props.
+  // Remember to update $$Props if you add/remove/rename props.
   export let use: ActionArray = [];
   let className = '';
   export { className as class };

packages/accordion/src/Accordion.svelte

@@ -53,6 +53,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
+  import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import {
     forwardEventsBuilder,
@@ -62,9 +63,17 @@
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
 
+  type OwnProps = {
+    use?: ActionArray;
+    class?: string;
+    style?: string;
+    ripple?: boolean;
+  };
+  type $$Props = OwnProps & SmuiAttrs<'div', OwnProps>;
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  // Remember to update types file if you add/remove/rename props.
+  // Remember to update $$Props if you add/remove/rename props.
   export let use: ActionArray = [];
   let className = '';
   export { className as class };

packages/accordion/src/Accordion.types.ts

@@ -31,14 +31,32 @@
     classMap,
     dispatch,
   } from '@smui/common/internal';
-  import type { PaperComponentDev } from '@smui/paper';
   import Paper from '@smui/paper';
 
   import type { SMUIAccordionPanelAccessor } from './Panel.types.js';
 
+  type OwnProps = {
+    use?: ActionArray;
+    class?: string;
+    variant?: 'raised' | 'unelevated' | 'outlined';
+    color?: 'default' | 'primary' | 'secondary' | string;
+    elevation?: number;
+    open?: boolean;
+    disabled?: boolean;
+    nonInteractive?: boolean;
+    extend?: boolean;
+    extendedElevation?: number;
+  };
+  type $$Props = {
+    [P in Exclude<
+      keyof Paper['$$prop_def'],
+      keyof OwnProps
+    >]?: Paper['$$prop_def'][P];
+  } & OwnProps;
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  // Remember to update types file if you add/remove/rename props.
+  // Remember to update $$Props if you add/remove/rename props.
   export let use: ActionArray = [];
   $: usePass = [forwardEvents, ...use] as ActionArray;
   let className = '';
@@ -52,7 +70,7 @@
   export let extend = false;
   export let extendedElevation = 3;
 
-  let element: PaperComponentDev;
+  let element: Paper;
   let accessor: SMUIAccordionPanelAccessor;
   let opened = open;
 
@@ -171,7 +189,7 @@
     open = value;
   }
 
-  export function getElement(): ReturnType<PaperComponentDev['getElement']> {
+  export function getElement() {
     return element.getElement();
   }
 </script>

packages/accordion/src/Header.svelte

@@ -1,30 +1,3 @@
-import type { ComponentProps } from 'svelte';
-import type { PaperComponentDev } from '@smui/paper';
-import type Component from './Panel.svelte';
-
-export declare class PanelComponentDev extends Component {
-  /**
-   * @private
-   * For type checking capabilities only.
-   * Does not exist at runtime.
-   * ### DO NOT USE!
-   */
-  $$prop_def: Omit<
-    PaperComponentDev['$$prop_def'],
-    | 'use'
-    | 'class'
-    | 'variant'
-    | 'color'
-    | 'elevation'
-    | 'open'
-    | 'disabled'
-    | 'nonInteractive'
-    | 'extend'
-    | 'extendedElevation'
-  > &
-    ComponentProps<Component>;
-}
-
 export interface SMUIAccordionPanelAccessor {
   readonly open: boolean;
   setOpen(value: boolean): void;

packages/accordion/src/Header.types.ts

@@ -1,21 +1,10 @@
-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';
+import Panel from './Panel.svelte';
 export * from './Panel.types.js';
-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 ComponentType<HeaderComponentDev>;
-
+import Header from './Header.svelte';
 import { Content } from '@smui/paper';
 
-export default Accordion as ComponentType<AccordionComponentDev>;
+export default Accordion;
 
 export { Panel, Header, Content };

packages/accordion/src/Panel.svelte

@@ -88,6 +88,7 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
+  import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import {
     forwardEventsBuilder,
@@ -98,15 +99,52 @@
     dispatch,
   } from '@smui/common/internal';
   import Textfield from '@smui/textfield';
-  import type { MenuComponentDev } from '@smui/menu';
   import Menu from '@smui/menu';
   import type { SMUIListAccessor, SMUIListItemAccessor } from '@smui/list';
   import List, { Item, Text } from '@smui/list';
   import { Anchor } from '@smui/menu-surface';
 
+  type OwnProps = {
+    use?: ActionArray;
+    class?: string;
+    variant?: 'text' | 'raised' | 'unelevated' | 'outlined';
+    options?: (() => Promise<any[]>) | any[];
+    value?: any;
+    getOptionDisabled?: (option: any) => boolean;
+    getOptionLabel?: (option: any) => string;
+    text?: string;
+    label?: string | undefined;
+    disabled?: boolean;
+    toggle?: boolean;
+    combobox?: boolean;
+    clearOnBlur?: boolean;
+    selectOnExactMatch?: boolean;
+    showMenuWithNoInput?: boolean;
+    noMatchesActionDisabled?: boolean;
+    search?: (input: string) => Promise<any[] | false>;
+    menu$class?: string;
+    menu$anchor?: boolean;
+    menu$anchorCorner?: Menu['$$prop_def']['anchorCorner'];
+  };
+  type $$Props = OwnProps &
+    SmuiAttrs<'div', OwnProps> & {
+      [k in keyof Menu['$$prop_def'] as `menu\$${k}`]?: Menu['$$prop_def'][k];
+    } & {
+      [k in keyof Textfield['$$prop_def'] as `textfield\$${k}`]?: Textfield['$$prop_def'][k];
+    } & {
+      [k in keyof InstanceType<
+        typeof List
+      >['$$prop_def'] as `list\$${k}`]?: InstanceType<
+        typeof List
+      >['$$prop_def'][k];
+    } & {
+      textfield$label?: never;
+      textfield$value?: never;
+    };
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  // Remember to update types file if you add/remove/rename props.
+  // Remember to update $$Props if you add/remove/rename props.
   export let use: ActionArray = [];
   let className = '';
   export { className as class };
@@ -152,7 +190,7 @@
   };
   export let menu$class = '';
   export let menu$anchor = false;
-  export let menu$anchorCorner: MenuComponentDev['$$prop_def']['anchorCorner'] =
+  export let menu$anchorCorner: Menu['$$prop_def']['anchorCorner'] =
     'BOTTOM_START';
 
   let element: HTMLDivElement;