feat(types)!: use Component type for type definitions (#203)

Closes #201

README.md

@@ -116,6 +116,29 @@ You can use `fill` to customize the color or pass any other valid `svg` attribut
 <Add aria-label="Add" tabindex={0} />
 ```
 
+## TypeScript
+
+This library offers TypeScript support for Svelte 4 and Svelte 5.
+
+For Svelte 3 compatibility, use [`carbon-icons-svelte@12.13.0`](https://github.com/carbon-design-system/carbon-icons-svelte/tree/v12.13.0).
+
+For convenience, a `CarbonIconProps` type is exported from the library.
+
+```svelte
+<script lang="ts">
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
+  import type { CarbonIconProps } from "carbon-icons-svelte";
+
+  const props: CarbonIconProps = {
+    size: 16,
+    fill: "red",
+    "data-test": "id",
+  };
+</script>
+
+<Add {...props} />
+```
+
 ## [Changelog](CHANGELOG.md)
 
 ## [Contributing](CONTRIBUTING.md)

src/index.ts

@@ -59,32 +59,22 @@ export const buildIcons = async () => {
   await $`mkdir lib`;
 
   let libExport = "";
-  let definitions = `import type { SvelteComponentTyped } from "svelte";
+  let definitions = `import type { Component } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["svg"];
-
-export interface CarbonIconProps extends RestProps {
-  /**
-   * Specify the icon size.
-   * @default 16
-   */
-  size?: 16 | 20 | 24 | 32;
-
+export type CarbonIconProps = SvelteHTMLElements["svg"] & {
   /**
    * Specify the icon title.
    * @default undefined
    */
   title?: string;
 
-  [key: \`data-\${string}\`]: any;
-}
-
-export declare class CarbonIcon extends SvelteComponentTyped<
-  CarbonIconProps,
-  Record<string, any>,
-  {}
-> {}\n\n`;
+  /**
+   * Specify the icon size.
+   * @default 16
+   */
+  size?: 16 | 20 | 24 | 32;
+}\n\n`;
 
   type Size = "glyph" | "icon";
 
@@ -122,7 +112,7 @@ export declare class CarbonIcon extends SvelteComponentTyped<
 
     byModuleName[name] = templateSvg(icon);
     libExport += `export { default as ${name} } from "./${name}.svelte";\n`;
-    definitions += `export declare class ${name} extends CarbonIcon {}\n`;
+    definitions += `export declare const ${name}: Component<CarbonIconProps>;\n`;
 
     const fileName = `lib/${name}.svelte`;
 
@@ -149,8 +139,8 @@ ${definitions}`
     `# Icon Index\n
 > ${total} icons from ${version}\n
 ${iconModuleNames
-  .map((moduleName) => `- ${moduleName.replace(/^\_/, "\\_")}`)
-  .join("\n")}\n`
+      .map((moduleName) => `- ${moduleName.replace(/^\_/, "\\_")}`)
+      .join("\n")}\n`
   );
 
   await Bun.write(

tests/svelte@4/Icons.svelte

@@ -12,15 +12,30 @@
   } from "carbon-icons-svelte";
   import type { CarbonIconProps } from "carbon-icons-svelte";
   import Icon from "carbon-icons-svelte/lib/Accessibility.svelte";
+  import { mount } from "svelte";
 
-  const props: CarbonIconProps = {
+  // Use the exported `CarbonIconProps` type for typing objects since the 
+  // idiomatic `ComponentProps` utility is not compatible with `Component` in Svelte 4.
+  const props = {
     size: 32,
     fill: "red",
-  };
+    "data-test": "id",
+  } satisfies CarbonIconProps;
 
-  const icon = new Icon({ target: document.body, props });
+  // Instead, you can use a const assertion for type safety.
+  const component_props = {
+    size: 16,
+    fill: "red",
+    "data-test": "id",
+  } as const;
+
+  // @ts-expect-error (Svelte components are no longer classes)
+  // See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+  const icon_class = new Icon({ target: document.body, props });
+
+  // Instead, use the `mount` function to manually instantiate the component.
+  mount(Icon, { target: document.body, props: component_props });
 
-  $: console.log(icon.$$prop_def);
   $: console.log(typeof Assembly);
 </script>
 

tests/svelte@5/Icons.svelte

@@ -13,15 +13,29 @@
   import type { CarbonIconProps } from "carbon-icons-svelte";
   import Icon from "carbon-icons-svelte/lib/Accessibility.svelte";
   import { mount } from "svelte";
+  import type { ComponentProps } from "svelte";
 
-  const props: CarbonIconProps = {
+  // You can use the exported `CarbonIconProps` type.
+  const props = {
     size: 32,
     fill: "red",
-  };
+    "data-test": "id",
+  } satisfies CarbonIconProps;
 
-  const icon = mount(Icon, { target: document.body, props });
+  // Or, you can use the idiomatic `ComponentProps` utility.
+  const component_props = {
+    size: 16,
+    fill: "red",
+    "data-test": "id",
+  } satisfies ComponentProps<typeof Icon>;
+
+  // @ts-expect-error (Svelte components are no longer classes)
+  // See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
+  const icon_class = new Icon(props);
+
+  // Instead, use the `mount` function to manually instantiate the component.
+  mount(Icon, { target: document.body, props: component_props });
 
-  $: console.log(icon.$$prop_def);
   $: console.log(typeof Assembly);
 </script>
 
@@ -33,4 +47,9 @@
 <Plan />
 <ZSystems />
 <BatchJob />
+
+<!--
+Note that `svelte:component` is no longer needed in Svelte 5.
+https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-svelte:component-is-no-longer-necessary 
+-->
 <svelte:component this={Beta} />