refactor(types): rewrite component TypeScript definitions

package.json

@@ -9,6 +9,7 @@
   "types": "./types/index.d.ts",
   "sideEffects": false,
   "scripts": {
+    "check-types": "svelte-check --workspace tests",
     "prettier": "prettier --write './**/*.{svelte,js,md}'",
     "publish-examples": "node scripts/publish-examples",
     "build:css": "node scripts/build-css",
@@ -39,6 +40,7 @@
     "rollup-plugin-svelte": "^6.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "svelte": "^3.29.4",
+    "svelte-check": "^1.1.6",
     "svelte-loader": "^2.13.6",
     "typescript": "^4.0.5"
   },

rollup.config.js

@@ -22,7 +22,9 @@ export default ["es", "umd"].map((format) => {
       resolve(),
       commonjs(),
       UMD && terser(),
-      !UMD && generateDocs(),
+
+      // TODO: replace
+      // !UMD && generateDocs(),
     ],
   };
 });

src/Accordion/Accordion.svelte

@@ -1,31 +1,25 @@
 <script>
   /**
    * Specify alignment of accordion item chevron icon
-   * @type {"start" | "end"} [align="end"]
+   * @type {"start" | "end"}
    */
   export let align = "end";
 
   /**
    * Specify the size of the accordion
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
-  /**
-   * Set to `true` to disable the accordion
-   * @type {boolean} [disabled=false]
-   */
+  /** Set to `true` to disable the accordion */
   export let disabled = false;
 
-  /**
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
+  /** Set to `true` to display the skeleton state */
   export let skeleton = false;
 
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
-  import AccordionSkeleton from "./Accordion.Skeleton.svelte";
+  import AccordionSkeleton from "./AccordionSkeleton.svelte";
 
   const disableItems = writable(disabled);
 

src/Accordion/AccordionItem.svelte

@@ -2,26 +2,16 @@
   /**
    * Specify the title of the accordion item heading
    * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
-   * @type {string} [title="title"]
    */
   export let title = "title";
 
-  /**
-   * Set to `true` to open the first accordion item
-   * @type {boolean} [open=false]
-   */
+  /** Set to `true` to open the first accordion item */
   export let open = false;
 
-  /**
-   * Set to `true` to disable the accordion item
-   * @type {boolean} [disabled=false]
-   */
+  /** Set to `true` to disable the accordion item */
   export let disabled = false;
 
-  /**
-   * Specify the ARIA label for the accordion item chevron icon
-   * @type {string} [iconDescription="Expand/Collapse"]
-   */
+  /** Specify the ARIA label for the accordion item chevron icon */
   export let iconDescription = "Expand/Collapse";
 
   import { onMount, getContext } from "svelte";

src/Accordion/Accordion.Skeleton.svelte → src/Accordion/AccordionSkeleton.svelte

@@ -1,26 +1,20 @@
 <script>
-  /**
-   * Specify the number of accordion items to render
-   * @type {number} [count=4]
-   */
+  /** Specify the number of accordion items to render */
   export let count = 4;
 
   /**
    * Specify alignment of accordion item chevron icon
-   * @type {"start" | "end"} [align="end"]
+   * @type {"start" | "end"}
    */
   export let align = "end";
 
   /**
    * Specify the size of the accordion
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
-  /**
-   * Set to `false` to close the first accordion item
-   * @type {boolean} [open=true]
-   */
+  /** Set to `false` to close the first accordion item */
   export let open = true;
 
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";

src/Accordion/index.js

@@ -1,3 +1,3 @@
 export { default as Accordion } from "./Accordion.svelte";
 export { default as AccordionItem } from "./AccordionItem.svelte";
-export { default as AccordionSkeleton } from "./Accordion.Skeleton.svelte";
+export { default as AccordionSkeleton } from "./AccordionSkeleton.svelte";

src/AspectRatio/AspectRatio.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the aspect ratio
-   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"} [ratio="2x1"]
+   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
    */
   export let ratio = "2x1";
 </script>

src/Breadcrumb/Breadcrumb.svelte

@@ -1,17 +1,11 @@
 <script>
-  /**
-   * Set to `true` to hide the breadcrumb trailing slash
-   * @type {boolean} [noTrailingSlash=false]
-   */
+  /** Set to `true` to hide the breadcrumb trailing slash */
   export let noTrailingSlash = false;
 
-  /**
-   * Set to `true` to display skeleton state
-   * @type {boolean} [skeleton=false]
-   */
+  /** Set to `true` to display skeleton state */
   export let skeleton = false;
 
-  import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
+  import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
 </script>
 
 {#if skeleton}

src/Breadcrumb/BreadcrumbItem.svelte

@@ -1,14 +1,11 @@
 <script>
   /**
    * Set the `href` to use an anchor link
-   * @type {string} [href]
+   * @type {string}
    */
   export let href = undefined;
 
-  /**
-   * Set to `true` if the breadcrumb item represents the current page
-   * @type {boolean} [isCurrentPage=false]
-   */
+  /** Set to `true` if the breadcrumb item represents the current page */
   export let isCurrentPage = false;
 
   import { Link } from "../Link";

src/Breadcrumb/Breadcrumb.Skeleton.svelte → src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
-   * Set to `true` to hide the breadcrumb trailing slash
-   * @type {boolean} [noTrailingSlash=false]
-   */
+  /** Set to `true` to hide the breadcrumb trailing slash */
   export let noTrailingSlash = false;
 
-  /**
-   * Specify the number of breadcrumb items to render
-   * @type {number} [count=3]
-   */
+  /** Specify the number of breadcrumb items to render */
   export let count = 3;
 </script>
 

src/Breadcrumb/index.js

@@ -1,3 +1,3 @@
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
 export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
-export { default as BreadcrumbSkeleton } from "./Breadcrumb.Skeleton.svelte";
+export { default as BreadcrumbSkeleton } from "./BreadcrumbSkeleton.svelte";

src/Button/Button.svelte

@@ -1,92 +1,76 @@
 <script>
   /**
    * Specify the kind of button
-   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"} [kind="primary"]
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"}
    */
   export let kind = "primary";
 
   /**
    * Specify the size of button
-   * @type {"default" | "field" | "small"} [size="default"]
+   * @type {"default" | "field" | "small"}
    */
   export let size = "default";
 
-  /**
-   * Set to `true` for the icon-only variant
-   * @type {boolean} [hasIconOnly=false]
-   */
+  /** Set to `true` for the icon-only variant */
   export let hasIconOnly = false;
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
+   * @type {typeof import("carbon-icons-svelte/lib/Add16").default}
    */
   export let icon = undefined;
 
   /**
    * Specify the ARIA label for the button icon
-   * @type {string} [iconDescription]
+   * @type {string}
    */
   export let iconDescription = undefined;
 
   /**
    * Set the alignment of the tooltip relative to the icon
    * `hasIconOnly` must be set to `true`
-   * @type {"start" | "center" | "end"} [tooltipAlignment]
+   * @type {"start" | "center" | "end"}
    */
   export let tooltipAlignment = undefined;
 
   /**
    * Set the position of the tooltip relative to the icon
-   * @type {"top" | "right" | "bottom" | "left"} [tooltipPosition]
+   * @type {"top" | "right" | "bottom" | "left"}
    */
   export let tooltipPosition = undefined;
 
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
-   * @type {boolean} [as=false]
    */
   export let as = false;
 
-  /**
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
+  /** Set to `true` to display the skeleton state */
   export let skeleton = false;
 
-  /**
-   * Set to `true` to disable the button
-   * @type {boolean} [disabled=false]
-   */
+  /** Set to `true` to disable the button */
   export let disabled = false;
 
   /**
    * Set the `href` to use an anchor link
-   * @type {string} [href]
+   * @type {string}
    */
   export let href = undefined;
 
-  /**
-   * Specify the tabindex
-   * @type {string} [tabindex="0"]
-   */
+  /** Specify the tabindex */
   export let tabindex = "0";
 
-  /**
-   * Specify the `type` attribute for the button element
-   * @type {string} [type="button"]
-   */
+  /** Specify the `type` attribute for the button element */
   export let type = "button";
 
   /**
    * Obtain a reference to the HTML element
-   * @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
+   * @type {null | HTMLAnchorElement | HTMLButtonElement}
    */
   export let ref = null;
 
   import { getContext } from "svelte";
-  import ButtonSkeleton from "./Button.Skeleton.svelte";
+  import ButtonSkeleton from "./ButtonSkeleton.svelte";
 
   const ctx = getContext("ComposedModal");
 

src/Button/ButtonSet.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
-   * Set to `true` to stack the buttons vertically
-   * @type {boolean} [stacked=false]
-   */
+  /** Set to `true` to stack the buttons vertically */
   export let stacked = false;
 </script>
 

src/Button/Button.Skeleton.svelte → src/Button/ButtonSkeleton.svelte

@@ -1,20 +1,17 @@
 <script>
   /**
    * Set the `href` to use an anchor link
-   * @type {string} [href]
+   * @type {string}
    */
   export let href = undefined;
 
   /**
    * Specify the size of button skeleton
-   * @type {"default" | "field" | "small"} [size="default"]
+   * @type {"default" | "field" | "small"}
    */
   export let size = "default";
 
-  /**
-   * Set to `true` to use the small variant
-   * @type {boolean} [small=false]
-   */
+  /** Set to `true` to use the small variant */
   export let small = false;
 </script>
 

src/Button/index.js

@@ -1,3 +1,3 @@
 export { default as Button } from "./Button.svelte";
-export { default as ButtonSkeleton } from "./Button.Skeleton.svelte";
+export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte";
 export { default as ButtonSet } from "./ButtonSet.svelte";