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

README.md

@@ -100,6 +100,27 @@ You can use `fill` to customize the color or pass any other valid `svg` attribut
 <Airplane tabindex={0} />
 ```
 
+## TypeScript
+
+This library offers TypeScript support for Svelte 4 and Svelte 5.
+
+For Svelte 3 compatibility, use [`carbon-pictograms-svelte@12.12.0`](https://github.com/carbon-design-system/carbon-pictograms-svelte/tree/v12.12.0).
+
+For convenience, a `CarbonPictogramProps` type is exported from the library.
+
+```svelte
+<script lang="ts">
+  import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
+  import type { CarbonPictogramProps } from "carbon-pictograms-svelte";
+
+  const props: CarbonPictogramProps = {
+    title: "Airplane",
+  };
+</script>
+
+<Airplane {...props} />
+```
+
 ## [Changelog](CHANGELOG.md)
 
 ## [Contributing](CONTRIBUTING.md)

src/index.ts

@@ -8,7 +8,7 @@ export const buildPictograms = async () => {
   await $`rm -rf lib`;
   await $`mkdir lib`;
 
-  let definitions = `import type { SvelteComponentTyped } from "svelte";
+  let definitions = `import type { Component } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
 export type CarbonPictogramProps = SvelteHTMLElements["svg"] & {
@@ -17,13 +17,7 @@ export type CarbonPictogramProps = SvelteHTMLElements["svg"] & {
    * @default undefined
    */
   title?: string;
-}
-
-export declare class CarbonPictogram extends SvelteComponentTyped<
-  CarbonPictogramProps,
-  Record<string, any>,
-  {}
-> {}\n\n`;
+}\n\n`;
 
   let libExport = "";
 
@@ -34,7 +28,7 @@ export declare class CarbonPictogram extends SvelteComponentTyped<
 
     pictograms.push(moduleName);
 
-    definitions += `export declare class ${moduleName} extends CarbonPictogram {}\n`;
+    definitions += `export declare const ${moduleName}: Component<CarbonPictogramProps>;\n`;
     libExport += `export { default as ${moduleName} } from "./${moduleName}.svelte";\n`;
 
     const fileName = `lib/${moduleName}.svelte`;

tests/svelte@4/Pictograms.svelte

@@ -10,13 +10,26 @@
   import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
   import BerlinTower from "carbon-pictograms-svelte/lib/BerlinTower.svelte";
   import type { CarbonPictogramProps } from "carbon-pictograms-svelte";
+  import { mount } from "svelte";
 
-  const props: CarbonPictogramProps = {
+   // Use the exported `CarbonPictogramProps` type for typing objects since the 
+  // idiomatic `ComponentProps` utility is not compatible with `Component` in Svelte 4.
+  const props= {
     fill: "red",
-  };
-  const pictogram = new Airplane({ target: document.body, props });
-  $: console.log(pictogram.$$prop_def);
-  $: console.log(typeof Airplane);
+  } satisfies CarbonPictogramProps;
+
+  // Instead, you can use a const assertion for type safety.
+  const component_props = {
+    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 Airplane({ target: document.body, props });
+  
+  // Instead, use the `mount` function to manually instantiate the component.
+  mount(Airplane, { target: document.body, props: component_props });
 
   const component = AssetManagement;
 </script>
@@ -25,13 +38,11 @@
 <ActiveServer class="class" style="fill: red" title="" tabindex={0} />
 <BerlinTower fill="#000" />
 
-<!-- svelte-ignore reactive-component -->
 <Airplane aria-label="Airplane" />
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label id="transportation">Transportation</label>
 
-<!-- svelte-ignore reactive-component -->
 <Airplane aria-labelledby="transportation" />
 
 <AiEthics />

tests/svelte@5/Pictograms.svelte

@@ -11,13 +11,26 @@
   import BerlinTower from "carbon-pictograms-svelte/lib/BerlinTower.svelte";
   import type { CarbonPictogramProps } from "carbon-pictograms-svelte";
   import { mount } from "svelte";
+  import type { ComponentProps } from "svelte";
 
-  const props: CarbonPictogramProps = {
+   // Use the exported `CarbonPictogramProps` type for typing objects since the 
+  // idiomatic `ComponentProps` utility is not compatible with `Component` in Svelte 4.
+  const props= {
     fill: "red",
-  };
-  const pictogram = mount(Airplane, { target: document.body, props });
-  $: console.log(pictogram.$$prop_def);
-  $: console.log(typeof Airplane);
+  } satisfies CarbonPictogramProps;
+
+  // Or, you can use the idiomatic `ComponentProps` utility.
+  const component_props = {
+    fill: "red",
+    "data-test": "id",
+  } satisfies ComponentProps<typeof Airplane>;
+
+  // @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 Airplane({ target: document.body, props });
+  
+  // Instead, use the `mount` function to manually instantiate the component.
+  mount(Airplane, { target: document.body, props: component_props });
 
   const component = AssetManagement;
 </script>