Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
svelte-intersection-observer
Advanced tools
svelte-intersection-observer - npm Package Compare versions
Comparing version 0.3.0 to 0.4.0
@@ -8,2 +8,13 @@ # Changelog | ||
| ## [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 | ||
@@ -10,0 +21,0 @@ |
@@ -297,2 +297,5 @@ (function (global, factory) { | ||
| } | ||
| /** | ||
| * Base class for Svelte components. Used when dev=false. | ||
| */ | ||
| class SvelteComponent { | ||
@@ -321,3 +324,3 @@ $destroy() { | ||
| /* src/IntersectionObserver.svelte generated by Svelte v3.29.7 */ | ||
| /* src/IntersectionObserver.svelte generated by Svelte v3.31.0 */ | ||
@@ -372,4 +375,2 @@ const get_default_slot_changes = dirty => ({ | ||
| let observer = undefined; | ||
| function instance($$self, $$props, $$invalidate) { | ||
@@ -382,5 +383,6 @@ let { $$slots: slots = {}, $$scope } = $$props; | ||
| let { entry = null } = $$props; | ||
| let { intersecting = false } = $$props; | ||
| const dispatch = createEventDispatcher(); | ||
| let intersecting = false; | ||
| let prevElement = null; | ||
| let observer = undefined; | ||
@@ -408,2 +410,3 @@ afterUpdate(async () => { | ||
| if ("entry" in $$props) $$invalidate(0, entry = $$props.entry); | ||
| if ("intersecting" in $$props) $$invalidate(1, intersecting = $$props.intersecting); | ||
| if ("$$scope" in $$props) $$invalidate(6, $$scope = $$props.$$scope); | ||
@@ -436,3 +439,4 @@ }; | ||
| threshold: 5, | ||
| entry: 0 | ||
| entry: 0, | ||
| intersecting: 1 | ||
| }); | ||
@@ -439,0 +443,0 @@ } |
| { | ||
| "name": "svelte-intersection-observer", | ||
| "version": "0.3.0", | ||
| "version": "0.4.0", | ||
| "license": "MIT", | ||
@@ -14,14 +14,16 @@ "description": "Detect if an element is in the viewport using the Intersection Observer API", | ||
| "dev": "rollup -cw", | ||
| "build": "rollup -c", | ||
| "deploy": "npx gh-pages -d public", | ||
| "prepack": "BUNDLE=true rollup -c" | ||
| "predeploy": "rollup -c", | ||
| "deploy": "npx gh-pages -d dist", | ||
| "prepack": "BUNDLE=true rollup -c", | ||
| "svelte-check": "svelte-check" | ||
| }, | ||
| "devDependencies": { | ||
| "@rollup/plugin-node-resolve": "^10.0.0", | ||
| "@rollup/plugin-node-resolve": "^11.0.1", | ||
| "@tsconfig/svelte": "^1.0.10", | ||
| "rollup": "^2.33.3", | ||
| "rollup-plugin-svelte": "^6.1.1", | ||
| "svelte": "^3.29.7", | ||
| "svelte-readme": "^0.3.1", | ||
| "typescript": "^4.0.5" | ||
| "rollup": "^2.35.1", | ||
| "rollup-plugin-svelte": "^7.0.0", | ||
| "svelte": "^3.31.0", | ||
| "svelte-check": "^1.1.23", | ||
| "svelte-readme": "^1.1.0", | ||
| "typescript": "^4.1.3" | ||
| }, | ||
@@ -28,0 +30,0 @@ "repository": { |
@@ -8,8 +8,4 @@ # svelte-intersection-observer | ||
| This module ships with [TypeScript definitions](./types). | ||
| Try it in the [Svelte REPL](https://svelte.dev/repl/8cd2327a580c4f429c71f7df999bd51d?version=3.29.7). | ||
| ## [Demo](https://metonym.github.io/svelte-intersection-observer/) | ||
| ## Install | ||
@@ -29,6 +25,4 @@ | ||
| let entry = {}; | ||
| let element; | ||
| $: inView = entry.isIntersecting; | ||
| let intersecting; | ||
| </script> | ||
@@ -40,11 +34,9 @@ | ||
| Element in view? | ||
| <strong class="answer" class:inView>{inView ? 'Yes' : 'No'}</strong> | ||
| <strong class:intersecting>{intersecting ? 'Yes' : 'No'}</strong> | ||
| </div> | ||
| </header> | ||
| <IntersectionObserver {element} bind:entry> | ||
| <div class="element" bind:this="{element}"> | ||
| {#if inView} | ||
| Element is in view | ||
| {/if} | ||
| <IntersectionObserver {element} bind:intersecting> | ||
| <div bind:this={element}> | ||
| {#if intersecting}Element is in view{/if} | ||
| </div> | ||
@@ -58,15 +50,20 @@ </IntersectionObserver> | ||
| | Property name | Description | Value | | ||
| | :------------ | :---------------------------------------- | :-------------------------------------------------------------------------------------------------------- | | ||
| | element | Element observed for intersection | `HTMLElement` | | ||
| | root | Containing element | `null` or `HTMLElement` (default: `null`) | | ||
| | rootMargin | Offset of the containing element | `string` (default: `"0px"`) | | ||
| | threshold | Percentage of element to trigger an event | `number` between 0 and 1 (default: `0`) | | ||
| | intersecting | If the element is intersecting | `boolean` | | ||
| | entry | Observed element metadata | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | | ||
| | Prop name | Description | Value | | ||
| | :----------- | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | | ||
| | element | Element observed for intersection | `HTMLElement` | | ||
| | root | Containing element | `null` or `HTMLElement` (default: `null`) | | ||
| | rootMargin | Offset of the containing element | `string` (default: `"0px"`) | | ||
| | threshold | Percentage of element to trigger an event | `number` between 0 and 1 (default: `0`) | | ||
| | intersecting | If the element is intersecting | `boolean` | | ||
| | entry | Observed element metadata | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | | ||
| | intersecting | `true` if the observed element is intersecting the viewport | `boolean` | | ||
| ### Dispatched Events | ||
| ### Dispatched events | ||
| - **on:observe**: fired when an intersection change occurs (type `IntersectionObserverEntry`) | ||
| ## TypeScript support | ||
| Svelte version 3.31.0 or greater is required to use this module with TypeScript. | ||
| ## [Changelog](CHANGELOG.md) | ||
@@ -73,0 +70,0 @@ |
| /// <reference types="svelte" /> | ||
| import { SvelteComponentTyped } from "svelte"; | ||
| type Entry = null | IntersectionObserverEntry; | ||
| export type Entry = null | IntersectionObserverEntry; | ||
@@ -29,13 +30,14 @@ export interface IntersectionObserverProps { | ||
| */ | ||
| entry?: {} | Entry; | ||
| entry?: null | Entry; | ||
| /** | ||
| * @default false | ||
| */ | ||
| intersecting?: boolean; | ||
| } | ||
| 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; | ||
| } | ||
| export default class IntersectionObserver extends SvelteComponentTyped< | ||
| IntersectionObserverProps, | ||
| { observe: CustomEvent<Entry> }, | ||
| { default: { intersecting: boolean; entry: Entry } } | ||
| > {} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.64%
36737
- Lines of code
- increased by1.39%
875
Worsened metrics
- Dev dependency count
- increased by14.29%
8
- Number of lines in readme file
- decreased by-3.85%
75
No dependency changes