feat: add TypeScript definitions

package.json

@@ -7,6 +7,7 @@
   "svelte": "./src/index.js",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
+  "types": "./types/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "prepack": "prettier --write '*/**/*.svelte' && rollup -c"
@@ -15,13 +16,15 @@
     "svelte-octicons": "^9.6.3"
   },
   "devDependencies": {
+    "@tsconfig/svelte": "^1.0.10",
     "prettier": "^2.1.2",
     "prettier-plugin-svelte": "^1.4.0",
     "rollup": "^2.28.2",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-svelte": "^6.0.1",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.28.0"
+    "svelte": "^3.28.0",
+    "typescript": "^4.1.2"
   },
   "repository": {
     "type": "git",
@@ -40,7 +43,8 @@
   ],
   "files": [
     "lib",
-    "src"
+    "src",
+    "types"
   ],
   "prettier": {
     "svelteStrictMode": true,

src/Alert.svelte

@@ -1,7 +1,9 @@
 <script>
   export let full = false;
   export let banner = false;
-  export let kind = undefined; // 'success' | 'warn' | 'error'
+
+  /** @type {"success" | "warn" | "error"} */
+  export let kind = undefined;
   export let dismissable = false;
 
   import X from "svelte-octicons/lib/X";

src/Avatar/Avatar.svelte

@@ -11,14 +11,10 @@
   const ctx = getContext("AvatarStack");
 
   onMount(() => {
-    if (ctx) {
-      ctx.add({ id });
-    }
+    if (ctx) ctx.add({ id });
 
     return () => {
-      if (ctx) {
-        ctx.remove({ id });
-      }
+      if (ctx) ctx.remove({ id });
     };
   });
 

src/Avatar/AvatarStack.svelte

@@ -1,6 +1,8 @@
 <script>
   export let title = "Avatar stack title";
-  export let align = "left"; // 'left' | 'right'
+
+  /** @type {"left" | "right"} */
+  export let align = "left";
 
   import { setContext } from "svelte";
   import { writable } from "svelte/store";

src/Avatar/CircleBadge.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let size = "small"; // 'small' | 'medium' | 'large'
+  /** @type {"small" | "medium" | "large"} */
+  export let size = "small";
   export let href = undefined;
 </script>
 

src/Blankslate.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let size = undefined; // 'narrow' | 'spacious'
+  /** @type {"narrow" | "spacious"} */
+  export let size = undefined;
   export let large = false;
   export let capped = false;
   export let bordered = false;

src/Box/Box.svelte

@@ -1,8 +1,11 @@
 <script>
-  export let border = undefined; // 'dashed'
+  /** @type {undefined | "dashed"} */
+  export let border = undefined;
   export let condensed = false;
   export let spacious = false;
-  export let theme = undefined; // 'blue' | 'danger'
+
+  /** @type {"blue" | "danger"} */
+  export let theme = undefined;
 </script>
 
 <div

src/Box/BoxHeader.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let theme = undefined; // 'blue'
+  /** @type {undefined | "blue"} */
+  export let theme = undefined;
 </script>
 
 <div

src/Box/BoxRow.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let theme = undefined; // 'gray' | 'yellow' | 'blue' string:{color}
+  /** @type {"gray" | "yellow" | "blue" | string} */
+  export let theme = undefined;
   export let unread = false;
 </script>
 

src/BoxOverlay.svelte

@@ -1,13 +1,15 @@
 <script>
   export let summary = "Open dialog";
-  export let size = undefined; // 'narrow' | 'wide'
+
+  /** @type {"narrow" | "wide"} */
+  export let size = undefined;
   export let open = false;
   export let transparentOverlay = false;
 
   import X from "svelte-octicons/lib/X";
   import Button from "./Button/Button.svelte";
 
-  let ref = undefined;
+  let ref = null;
 
   function close() {
     ref.removeAttribute("open");
@@ -38,9 +40,7 @@
 
 <svelte:body
   on:keydown="{({ key }) => {
-    if (ref.hasAttribute('open') && key === 'Escape') {
-      close();
-    }
+    if (ref.hasAttribute('open') && key === 'Escape') close();
   }}" />
 
 <details

src/BranchName.svelte

@@ -1,4 +1,5 @@
 <script>
+  /** @type {string} */
   export let href = undefined;
 </script>
 

src/Button/Button.svelte

@@ -1,9 +1,15 @@
 <script>
   export let type = "button";
-  export let variant = "button"; // 'button' | 'link-button' | 'link' | 'octicon' | 'hidden-text'
+
+  /** @type {"button" | "link-button" | "link" | "octicon" | "hidden-text"} */
+  export let variant = "button";
   export let href = "#";
-  export let size = undefined; // 'small' | 'large'
-  export let kind = undefined; // 'primary' | 'danger' | 'outline'
+
+  /** @type {"small" | "large"} */
+  export let size = undefined;
+
+  /** @type {"primary" | "danger" | "outline"} */
+  export let kind = undefined;
   export let disabled = false;
   export let block = false;
   export let invisible = false;

src/Button/ButtonMarketing.svelte

@@ -1,6 +1,8 @@
 <script>
   export let type = "button";
-  export let kind = undefined; // 'primary' | 'outline'
+
+  /** @type {"primary" | "outline"} */
+  export let kind = undefined;
   export let transparent = false;
   export let large = false;
 </script>

src/Dropdown/Dropdown.svelte

@@ -1,6 +1,8 @@
 <script>
   export let title = "Dropdown";
-  export let direction = "se"; // 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
+
+  /** @type {"n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw"} */
+  export let direction = "se";
   export let dark = false;
 </script>
 

src/Form/FormCheckbox.svelte

@@ -1,6 +1,8 @@
 <script>
   export let id = "primer-" + Math.random().toString(36);
-  export let type = "checkbox"; // 'checkbox' | 'radio'
+
+  /** @type {"checkbox" | "radio"}*/
+  export let type = "checkbox";
   export let checked = false;
   export let label = "Label";
   export let emphasis = false;

src/Form/FormGroup.svelte

@@ -1,7 +1,9 @@
 <script>
   export let id = "primer-" + Math.random().toString(36);
   export let label = "Label";
-  export let validation = undefined; // 'success' | 'warning' | 'error'
+
+  /** @type {"success" | "warning" | "error"} */
+  export let validation = undefined;
   export let validationText = undefined;
 </script>
 

src/Form/FormInput.svelte

@@ -3,7 +3,9 @@
   export let type = "text";
 
   export let placeholder = "Placeholder text";
-  export let size = undefined; // 'small' | 'large'
+
+  /** @type {"small" | "large"} */
+  export let size = undefined;
   export let block = false;
   export let contrast = false;
   export let dark = false;

src/Form/FormRadioGroup.svelte

@@ -1,14 +1,16 @@
 <script>
   export let value = undefined;
-  export let options = []; // { id?:string; value: string; }[]
+
+  /** @type {{ id?:string; value: string; }[]} */
+  export let options = [];
 
   $: if (value === undefined && options.length > 0) {
     value = options[0].value;
   }
 </script>
 
 <div class="radio-group">
-  {#each options as option, i (option.value)}
+  {#each options as option (option.value)}
     <input
       {...$$restProps}
       type="radio"

src/Form/FormSelect.svelte

@@ -1,6 +1,9 @@
 <script>
+  /** @type {any} */
   export let value = undefined;
-  export let options = []; // { id?:string; value: string; }[]
+
+  /** @type {{ id?:string; value: string; }[]} */
+  export let options = [];
   export let small = false;
 </script>
 

src/Label/Label.svelte

@@ -1,6 +1,9 @@
 <script>
+  /** @type {string} */
   export let title = undefined;
-  export let color = "blue"; // 'blue' | 'green' | 'gray' | 'gray-darker' | 'orange'
+
+  /** @type {"blue" | "green" | "gray" | "gray-darker" | "orange"} */
+  export let color = "blue";
   export let outline = false;
 </script>
 

src/Label/LabelCounter.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let color = undefined; // 'gray' | 'gray-light'
+  /** @type {"gray" | "gray-light"} */
+  export let color = undefined;
 </script>
 
 <span

src/Label/LabelIssue.svelte

@@ -1,6 +1,8 @@
 <script>
   export let title = "Label: title";
-  export let color = "blue"; // 'blue' | 'green' | 'red' | string:{color}
+
+  /** @type {"blue" | "green" | "red" | string} */
+  export let color = "blue";
 </script>
 
 <span

src/Label/LabelState.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let status = undefined; // 'open' | 'closed' | 'merged'
+  /** @type {"open" | "closed" | "merged"} */
+  export let status = undefined;
 
   import GitPullRequest from "svelte-octicons/lib/GitPullRequest";
   import GitMerge from "svelte-octicons/lib/GitMerge";

src/Navigation/FilterListItem.svelte

@@ -1,13 +1,11 @@
 <script>
   export let href = "#";
   export let current = false;
-
-  $: props = { "aria-current": current ? "page" : undefined };
 </script>
 
 <a
   {...$$restProps}
-  {...props}
+  aria-current="{current ? 'page' : undefined}"
   class:filter-item="{true}"
   href="{href}"
   on:click

src/Navigation/MenuItem.svelte

@@ -1,10 +1,14 @@
 <script>
   export let href = "#";
   export let current = false;
-
-  $: props = { "aria-current": current ? "page" : undefined };
 </script>
 
-<a {...$$restProps} {...props} class:menu-item="{true}" href="{href}" on:click>
+<a
+  {...$$restProps}
+  aria-current="{current ? 'page' : undefined}"
+  class:menu-item="{true}"
+  href="{href}"
+  on:click
+>
   <slot />
 </a>

src/Navigation/SideNavItem.svelte

@@ -1,13 +1,11 @@
 <script>
   export let href = "#";
   export let current = false;
-
-  $: props = { "aria-current": current ? "page" : undefined };
 </script>
 
 <a
   {...$$restProps}
-  {...props}
+  aria-current="{current ? 'page' : undefined}"
   class:SideNav-item="{true}"
   href="{href}"
   on:click

src/Navigation/SideNavSubItem.svelte

@@ -1,13 +1,11 @@
 <script>
   export let href = "#";
   export let current = false;
-
-  $: props = { "aria-current": current ? "page" : undefined };
 </script>
 
 <a
   {...$$restProps}
-  {...props}
+  aria-current="{current ? 'page' : undefined}"
   class:SideNav-subItem="{true}"
   href="{href}"
   on:click

src/Navigation/SubNavItem.svelte

@@ -1,13 +1,11 @@
 <script>
   export let href = "#";
   export let current = false;
-
-  $: props = { "aria-current": current ? "page" : undefined };
 </script>
 
 <a
   {...$$restProps}
-  {...props}
+  aria-current="{current ? 'page' : undefined}"
   class:subnav-item="{true}"
   href="{href}"
   on:click

src/Navigation/TabNavItem.svelte

@@ -1,10 +1,14 @@
 <script>
   export let href = "#";
   export let current = false;
-
-  $: props = { "aria-current": current ? "page" : undefined };
 </script>
 
-<a {...$$restProps} {...props} class:tabnav-tab="{true}" href="{href}" on:click>
+<a
+  {...$$restProps}
+  aria-current="{current ? 'page' : undefined}"
+  class:tabnav-tab="{true}"
+  href="{href}"
+  on:click
+>
   <slot />
 </a>

src/Navigation/Underline.svelte

@@ -1,5 +1,6 @@
 <script>
-  export let align = "left"; // 'left' | 'right'
+  /** @type {"left" | "right"} */
+  export let align = "left";
 
   import { setContext } from "svelte";