svelte-intersection-observer 0.10.1 → 1.0.0

package/{src/IntersectionObserver.svelte → IntersectionObserver.svelte}

@@ -1,7 +1,9 @@
 <script>
+  // @ts-check
+
   /**
    * The HTML Element to observe.
-   * @type {HTMLElement}
+   * @type {null | HTMLElement}
    */
   export let element = null;
 
@@ -21,7 +23,7 @@
   /**
    * Specify the containing element.
    * Defaults to the browser viewport.
-   * @type {HTMLElement}
+   * @type {null | HTMLElement}
    */
   export let root = null;
 
@@ -50,7 +52,10 @@
 
   const dispatch = createEventDispatcher();
 
+  /** @type {null | string} */
   let prevRootMargin = null;
+
+  /** @type {null | HTMLElement} */
   let prevElement = null;
 
   const initialize = () => {
@@ -61,7 +66,7 @@
           intersecting = _entry.isIntersecting;
         });
       },
-      { root, rootMargin, threshold }
+      { root, rootMargin, threshold },
     );
   };
 
@@ -83,21 +88,21 @@
       if (entry.isIntersecting) {
         dispatch("intersect", entry);
 
-        if (once) observer.unobserve(element);
+        if (element && once) observer?.unobserve(element);
       }
     }
 
     await tick();
 
     if (element !== null && element !== prevElement) {
-      observer.observe(element);
+      observer?.observe(element);
 
-      if (prevElement !== null) observer.unobserve(prevElement);
+      if (prevElement !== null) observer?.unobserve(prevElement);
       prevElement = element;
     }
 
     if (prevRootMargin && rootMargin !== prevRootMargin) {
-      observer.disconnect();
+      observer?.disconnect();
       prevElement = null;
       initialize();
     }

package/IntersectionObserver.svelte.d.ts

@@ -0,0 +1,79 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export default class extends SvelteComponentTyped<
+  {
+    /**
+     * The HTML Element to observe.
+     * @default null
+     */
+    element?: null | HTMLElement;
+
+    /**
+     * Set to `true` to unobserve the element
+     * after it intersects the viewport.
+     * @default false
+     */
+    once?: boolean;
+
+    /**
+     * `true` if the observed element
+     * is intersecting the viewport.
+     * @default false
+     */
+    intersecting?: boolean;
+
+    /**
+     * Specify the containing element.
+     * Defaults to the browser viewport.
+     * @default null
+     */
+    root?: null | HTMLElement;
+
+    /**
+     * Margin offset of the containing element.
+     * @default "0px"
+     */
+    rootMargin?: string;
+
+    /**
+     * Percentage of element visibility to trigger an event.
+     * Value must be a number between 0 and 1, or an array of numbers between 0 and 1.
+     * @default 0
+     */
+    threshold?: number | number[];
+
+    /**
+     * Observed element metadata.
+     * @default null
+     */
+    entry?: null | IntersectionObserverEntry;
+
+    /**
+     * `IntersectionObserver` instance.
+     * @default null
+     */
+    observer?: null | IntersectionObserver;
+  },
+  {
+    /**
+     * Dispatched when the element is first observed
+     * and also whenever an intersection event occurs.
+     */
+    observe: CustomEvent<IntersectionObserverEntry>;
+
+    /**
+     * Dispatched only when the element is intersecting the viewport.
+     * `event.detail.isIntersecting` will only be `true`
+     */
+    intersect: CustomEvent<
+      IntersectionObserverEntry & { isIntersecting: true }
+    >;
+  },
+  {
+    default: {
+      intersecting: boolean;
+      entry: null | IntersectionObserverEntry;
+      observer: IntersectionObserver;
+    };
+  }
+> {}

package/README.md

@@ -208,21 +208,6 @@ interface IntersectionObserverEntry {
 
 </details>
 
-## Examples
-
-The [examples folder](examples/) contains sample set-ups.
-
-- [examples/sveltekit](examples/sveltekit)
-- [examples/vite](examples/vite)
-- [examples/rollup](examples/rollup)
-- [examples/webpack](examples/webpack)
-
-## TypeScript support
-
-Svelte version 3.31 or greater is required to use this module with TypeScript.
-
-TypeScript definitions for this component are located in the [types folder](types/).
-
 ## Changelog
 
 [Changelog](CHANGELOG.md)

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "svelte-intersection-observer",
-  "version": "0.10.1",
+  "version": "1.0.0",
   "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",
-  "types": "./types/index.d.ts",
-  "scripts": {
-    "dev": "rollup -cw",
-    "build": "rollup -c",
-    "prepack": "BUNDLE=true rollup -c",
-    "test:types": "svelte-check --workspace test",
-    "test:examples": "node test/examples",
-    "format": "prettier --ignore-path .gitignore --write '.'"
-  },
-  "devDependencies": {
-    "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^3.0.0",
-    "svelte": "^4.1.0",
-    "svelte-check": "^3.4.6",
-    "svelte-readme": "^3.6.3"
+  "type": "module",
+  "svelte": "./index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    },
+    "./*.svelte": {
+      "types": "./*.svelte.d.ts",
+      "import": "./*.svelte"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js"
+    }
   },
   "repository": {
     "type": "git",
@@ -30,16 +29,11 @@
   "homepage": "https://github.com/metonym/svelte-intersection-observer",
   "bugs": "https://github.com/metonym/svelte-intersection-observer/issues",
   "keywords": [
+    "svelte",
+    "svelte component",
     "intersection observer",
     "viewport",
     "lazy-loading",
-    "conditional",
-    "svelte",
-    "svelte component"
-  ],
-  "files": [
-    "lib",
-    "src",
-    "types"
+    "conditional"
   ]
-}
+}

package/CHANGELOG.md

@@ -1,118 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [0.10.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.10.1) - 2023-07-20
-
-**Fixes**
-
-- fix `threshold` prop type to be `number | number[]`
-
-## [0.10.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.10.0) - 2021-12-29
-
-**Features**
-
-- mark `observer` for garbage collection after disconnecting
-
-**Documentation**
-
-- make prop descriptions consistent with docs
-
-**Refactoring**
-
-- omit redundant `null` from `element` and `root` types as `HTMLElement` is already nullable
-
-## [0.9.2](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.2) - 2021-11-26
-
-**Documentation**
-
-- add `let:` directive example
-- update component prop descriptions
-- use Svelte syntax highlighting for `on:observe`, `on:intersect` examples
-
-## [0.9.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.1) - 2021-10-25
-
-**Documentation**
-
-- update the "Once" example to include the `"svelte-intersection-observer"` import
-- rename example `svite` to `vite`
-
-**Refactoring**
-
-- inline `entry` prop typedef
-- remove `@event`, `@slot` artifacts used by sveld to generate initial TypeScript definitions
-
-## [0.9.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.0) - 2021-10-05
-
-- improve TypeScript definitions for dispatched events
-  - `on:observe`: `event.detail.isIntersecting` is a `boolean`
-  - `on:intersect`: `event.detail.isIntersecting` can only be `true`
-
-## [0.8.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.8.0) - 2021-09-02
-
-- use `.svelte.d.ts` extension for component TypeScript definition
-
-## [0.7.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.7.1) - 2021-07-05
-
-**Documentation**
-
-- add description for basic usage
-- add `on:observe` example
-- explain difference between `on:observe` and `on:intersect`
-- document `IntersectionObserverEntry` interface
-- re-order prop table so that `once` and `intersecting` are more prominent
-
-## [0.7.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.7.0) - 2021-04-23
-
-**Features**
-
-- re-initialize observer if `rootMargin` changes
-
-## [0.6.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.6.1) - 2021-04-03
-
-**Fixes**
-
-- move intersection observer instantiation to `onMount` to work in hydration use cases
-
-## [0.6.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.6.0) - 2021-02-24
-
-**Features**
-
-- export `observer` prop (type `IntersectionObserver`)
-- dispatch "intersect" event if the observed element `isIntersecting` the viewport
-
-## [0.5.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.5.0) - 2021-01-20
-
-**Features**
-
-- Add support for Server-Side Rendering (SSR)
-
-## [0.4.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.4.0) - 2020-12-20
-
-**Features**
-
-- Export `intersecting` prop
-
-**Fixes**
-
-- Remove observer from module context to allow multiple component instantiations
-- Fix prop type for `entry`
-
-## [0.3.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.3.0) - 2020-11-23
-
-- Export `entry` as a reactive prop
-
-## [0.2.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.2.0) - 2020-11-18
-
-- Add TypeScript definitions
-
-## [0.1.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.1.1) - 2020-04-05
-
-- Only `disconnect` observer in `onDestroy` lifecycle method
-
-## [0.1.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.1.0) - 2020-04-05
-
-- Initial release