fix(svelte): Svelte Button and Link types (#220)

scripts/build-svelte-types.js

@@ -3,6 +3,11 @@
 const fs = require('fs-extra');
 const path = require('path');
 
+const componentSvelteElementInheritance = {
+  Button: 'HTMLButtonAttributes',
+  Link: 'HTMLAnchorAttributes',
+};
+
 const componentNativeElementInheritance = {
   Actions: 'HTMLDivElement',
   ActionsButton: 'HTMLButtonElement',
@@ -18,13 +23,11 @@ const componentNativeElementInheritance = {
   BreadcrumbsCollapsed: 'HTMLDivElement',
   BreadcrumbsItem: 'HTMLDivElement',
   BreadcrumbsSeparator: 'HTMLDivElement',
-  Button: 'HTMLButtonElement',
   Card: 'HTMLDivElement',
   Checkbox: 'HTMLLabelElement',
   Chip: 'HTMLDivElement',
   Fab: 'HTMLAnchorElement',
   Icon: 'HTMLElement',
-  Link: 'HTMLAnchorElement',
   List: 'HTMLDivElement',
   ListButton: 'HTMLLIElement',
   ListGroup: 'HTMLLIElement',
@@ -125,9 +128,15 @@ const createComponentTypes = (componentName, propsContent) => {
     })
     .join('\n');
   const slotsContent = slots.map((slot) => `'${slot}': {};`).join('\n    ');
+  const svelteElementType = componentSvelteElementInheritance[componentName];
+  const nativeElementType = componentNativeElementInheritance[componentName];
   return `
 import { SvelteComponent } from 'svelte';
-import { HTMLAttributes } from 'svelte/elements';
+${
+  svelteElementType
+    ? `import type { ${svelteElementType} } from 'svelte/elements';`
+    : `import { HTMLAttributes } from 'svelte/elements';`
+}
 
 ${propsContent}
 
@@ -137,9 +146,11 @@ interface ${componentName}Events extends Record<'',{}>{}
 
 declare class ${componentName} extends SvelteComponent<
   ${componentName}Props${
-    componentNativeElementInheritance[componentName]
-      ? ` & HTMLAttributes<${componentNativeElementInheritance[componentName]}>`
-      : ''
+    svelteElementType
+      ? ` & ${svelteElementType}`
+      : nativeElementType
+        ? ` & HTMLAttributes<${nativeElementType}>`
+        : ''
   },
   ${componentName}Events,
   {