feat: new typing method gets rid of separate type files, keeps html prop autocomplete

Author: hperrin

packages/button/package.json

@@ -45,8 +45,7 @@
     "@material/ripple": "^13.0.0",
     "@material/theme": "^13.0.0",
     "@smui/common": "^6.1.0",
-    "@smui/ripple": "^6.1.0",
-    "svelte2tsx": "^0.5.12"
+    "@smui/ripple": "^6.1.0"
   },
   "devDependencies": {
     "@tsconfig/svelte": "^3.0.0",

packages/button/src/Button.svelte

@@ -52,7 +52,7 @@
 >
 
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
+  import type { ComponentType, SvelteComponent } from 'svelte';
   import { setContext, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import type { ActionArray } from '@smui/common/internal';
@@ -62,14 +62,12 @@
     dispatch,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
-  import type { SmuiComponent } from '@smui/common';
+  import type { SmuiElementTagNameMap } from '@smui/common';
   import { SmuiElement } from '@smui/common';
 
-  type TagName = $$Generic<
-    keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap
-  >;
-  type Component = $$Generic<SmuiComponent<TagName>>;
-  type $$Props = svelteHTML.IntrinsicElements[TagName] & {
+  type TagName = $$Generic<keyof SmuiElementTagNameMap>;
+  type Component = $$Generic<ComponentType<SvelteComponent>>;
+  type OwnProps = {
     use?: ActionArray;
     class?: string;
     style?: string;
@@ -81,9 +79,15 @@
     action?: string;
     defaultAction?: boolean;
     secondary?: boolean;
-    component?: ComponentType<Component>;
+    component?: Component;
     tag?: TagName;
   };
+  type $$Props = {
+    [P in Exclude<
+      keyof svelteHTML.IntrinsicElements[TagName],
+      keyof OwnProps
+    >]?: svelteHTML.IntrinsicElements[TagName][P];
+  } & OwnProps;
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
@@ -101,15 +105,18 @@
   export let defaultAction = false;
   export let secondary = false;
 
-  let element: Component;
+  let element: SvelteComponent;
   let internalClasses: { [k: string]: boolean } = {};
   let internalStyles: { [k: string]: string } = {};
   let context = getContext<string | undefined>('SMUI:button:context');
 
-  export let component: ComponentType<Component> =
-    SmuiElement as ComponentType<Component>;
+  export let component: Component = SmuiElement as unknown as Component;
   export let tag: TagName | undefined = (
-    component === SmuiElement ? (href == null ? 'button' : 'a') : undefined
+    component === (SmuiElement as unknown as Component)
+      ? href == null
+        ? 'button'
+        : 'a'
+      : undefined
   ) as TagName | undefined;
 
   $: actionProp =
@@ -169,11 +176,7 @@
     }
   }
 
-<<<<<<< HEAD
   export function getElement() {
-=======
-  export function getElement(): HTMLElement {
->>>>>>> v7
     return element.getElement();
   }
 </script>

packages/button/src/Button.types.ts

@@ -21,6 +21,18 @@
     useActions,
   } from '@smui/common/internal';
 
+  type OwnProps = {
+    use?: ActionArray;
+    class?: string;
+    variant?: 'text' | 'raised' | 'unelevated' | 'outlined';
+  };
+  type $$Props = {
+    [P in Exclude<
+      keyof svelteHTML.IntrinsicElements['div'],
+      keyof OwnProps
+    >]?: svelteHTML.IntrinsicElements['div'][P];
+  } & OwnProps;
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   // Remember to update types file if you add/remove/rename props.

packages/button/src/Group.svelte

@@ -1,2 +1 @@
 /// <reference types="svelte" />
-/// <reference types="svelte2tsx/svelte-jsx" />

packages/button/src/Group.types.ts

@@ -1,12 +1,6 @@
-import type { ComponentType } from 'svelte';
-
 import Button from './Button.svelte';
-export * from './Button.types.js';
 
-import GroupComponent from './Group.svelte';
-import type { GroupComponentDev } from './Group.types.js';
-export * from './Group.types.js';
-const Group = GroupComponent as ComponentType<GroupComponentDev>;
+import Group from './Group.svelte';
 import GroupItem from './GroupItem.js';
 import { Label, Icon } from '@smui/common';
 

packages/button/src/ambient.d.ts

@@ -62,7 +62,6 @@
   },
   "dependencies": {
     "@material/dom": "^13.0.0",
-    "@tsconfig/svelte": "^3.0.0",
-    "svelte2tsx": "^0.5.12"
+    "@tsconfig/svelte": "^3.0.0"
   }
 }

packages/button/src/index.ts

@@ -19,22 +19,22 @@
 >
 
 <script lang="ts">
-  import type { ComponentType } from 'svelte';
+  import type { ComponentType, SvelteComponent } from 'svelte';
   import { getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
 
   import type { ActionArray } from './internal/useActions.js';
   import { forwardEventsBuilder, classMap } from './internal/index.js';
-  import type { SmuiComponent, SmuiElementTagNameMap } from './smui.types.js';
+  import type { SmuiElementTagNameMap } from './smui.types.js';
   import { SmuiElement } from './index.js';
 
   type TagName = $$Generic<keyof SmuiElementTagNameMap>;
-  type Component = $$Generic<SmuiComponent<TagName>>;
+  type Component = $$Generic<ComponentType<SvelteComponent>>;
   type OwnProps = {
     use?: ActionArray;
     class?: string;
     on?: boolean;
-    component?: ComponentType<Component>;
+    component?: Component;
     tag?: TagName;
   };
   type $$Props = {
@@ -52,12 +52,11 @@
   export { className as class };
   export let on = false;
 
-  let element: Component;
+  let element: SvelteComponent;
 
-  export let component: ComponentType<Component> =
-    SmuiElement as ComponentType<Component>;
+  export let component: Component = SmuiElement as unknown as Component;
   export let tag: TagName | undefined = (
-    component === SmuiElement ? 'svg' : undefined
+    component === (SmuiElement as unknown as Component) ? 'svg' : undefined
   ) as TagName | undefined;
 
   const context = getContext<string | undefined>('SMUI:icon:context');