feat: add TypeScript definitions

.travis.yml

@@ -1,5 +1,4 @@
 language: node_js
-node_js: 10
+node_js: 12
 cache: yarn
-scripts:
-  - yarn build
+script: yarn prepack

README.md

@@ -7,13 +7,13 @@
 
 ## Install
 
-```bash
+```sh
 yarn add -D svelte-intersection-observer
 ```
 
 ## Usage
 
-```html
+```svelte
 <script>
   import IntersectionObserver from "svelte-intersection-observer";
 

package.json

@@ -4,25 +4,21 @@
   "license": "MIT",
   "description": "Detect if an element is in the viewport using the Intersection Observer API",
   "author": "Eric Liu (https://github.com/metonym)",
-  "svelte": "src/index.js",
-  "main": "lib/index.js",
-  "module": "lib/index.mjs",
+  "svelte": "./src/index.js",
+  "main": "./lib/index.js",
+  "module": "./lib/index.mjs",
+  "types": "./types/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prepublishOnly": "rollup -c",
-    "build": "rollup -c",
-    "postbuild": "prettier --write '**/*.{js,svelte}'"
+    "prepack": "rollup -c"
   },
   "devDependencies": {
-    "prettier": "1.19.1",
-    "prettier-plugin-svelte": "0.7.0",
-    "rollup": "^2.3.3",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-svelte": "^5.2.1",
-    "svelte": "^3.20.1"
-  },
-  "prettier": {
-    "printWidth": 100
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@tsconfig/svelte": "^1.0.10",
+    "rollup": "^2.33.3",
+    "rollup-plugin-svelte": "^6.1.1",
+    "svelte": "^3.29.7",
+    "typescript": "^4.0.5"
   },
   "repository": {
     "type": "git",
@@ -40,6 +36,7 @@
   ],
   "files": [
     "lib",
-    "src"
+    "src",
+    "types"
   ]
 }

rollup.config.js

@@ -1,17 +1,17 @@
-import resolve from "rollup-plugin-node-resolve";
+import resolve from "@rollup/plugin-node-resolve";
 import svelte from "rollup-plugin-svelte";
 import pkg from "./package.json";
 
-export default ["es", "umd"].map(format => {
+export default ["es", "umd"].map((format) => {
   const UMD = format === "umd";
 
   return {
-    input: "src",
+    input: pkg.svelte,
     output: {
       format,
       file: UMD ? pkg.main : pkg.module,
-      name: UMD ? "svelte-intersection-observer" : undefined
+      name: UMD ? pkg.name : undefined,
     },
-    plugins: [svelte(), resolve()]
+    plugins: [svelte(), resolve()],
   };
 });

src/IntersectionObserver.svelte

@@ -3,8 +3,17 @@
 </script>
 
 <script>
-  export let element = null; // HTMLElement
-  export let root = null; // HTMLElement
+  /**
+   * @typedef {null | IntersectionObserverEntry} Entry
+   * @event {Entry} observe
+   * @slot {{intersecting: boolean; entry: Entry }}
+   */
+
+  /** @type {null | HTMLElement} */
+  export let element = null;
+
+  /** @type {null | HTMLElement} */
+  export let root = null;
   export let rootMargin = "0px";
   export let threshold = 0;
 
@@ -17,30 +26,24 @@
   let prevElement = null;
 
   afterUpdate(async () => {
-    if (entry != null) {
-      dispatch("observe", entry);
-    }
+    if (entry != null) dispatch("observe", entry);
 
     await tick();
 
     if (element != null && element != prevElement) {
       observer.observe(element);
 
-      if (prevElement != null) {
-        observer.unobserve(prevElement);
-      }
+      if (prevElement != null) observer.unobserve(prevElement);
 
       prevElement = element;
     }
   });
 
-  onDestroy(() => {
-    observer.disconnect();
-  });
+  onDestroy(observer.disconnect);
 
   $: observer = new IntersectionObserver(
-    entries => {
-      entries.forEach(_entry => {
+    (entries) => {
+      entries.forEach((_entry) => {
         entry = _entry;
         intersecting = _entry.isIntersecting;
       });

test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import IntersectionObserver from "./types";
+
+  let element = null;
+</script>
+
+<IntersectionObserver
+  {element}
+  rootMargin="50px"
+  on:observe={({ detail }) => {
+    console.log(detail);
+  }} />

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@tsconfig/svelte"
+}

types/IntersectionObserver.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="svelte" />
+
+type Entry = null | IntersectionObserverEntry;
+
+export interface IntersectionObserverProps {
+  /**
+   * @default null
+   */
+  element?: null | HTMLElement;
+
+  /**
+   * @default null
+   */
+  root?: null | HTMLElement;
+
+  /**
+   * @default "0px"
+   */
+  rootMargin?: string;
+
+  /**
+   * @default 0
+   */
+  threshold?: number;
+}
+
+export default class IntersectionObserver {
+  $$prop_def: IntersectionObserverProps;
+  $$slot_def: {
+    default: { intersecting: boolean; entry: Entry };
+  };
+
+  $on(eventname: "observe", cb: (event: CustomEvent<Entry>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./IntersectionObserver";