svelte-intersection-observer 0.9.1 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +51 -20
  3. package/lib/index.js +1 -1
  4. package/lib/index.mjs +1 -1
  5. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.9.2](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.2) - 2021-11-26
9
+
10
+ **Documentation**
11
+
12
+ - add `let:` directive example
13
+ - update component prop descriptions
14
+ - use Svelte syntax highlighting for `on:observe`, `on:intersect` examples
15
+
8
16
  ## [0.9.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.1) - 2021-10-25
9
17
 
10
18
  **Documentation**
package/README.md CHANGED
@@ -24,6 +24,12 @@ yarn add -D svelte-intersection-observer
24
24
  npm i -D svelte-intersection-observer
25
25
  ```
26
26
 
27
+ **pnpm**
28
+
29
+ ```bash
30
+ pnpm i -D svelte-intersection-observer
31
+ ```
32
+
27
33
  ## Usage
28
34
 
29
35
  ### Basic
@@ -74,37 +80,62 @@ Set `once` to `true` for the intersection event to occur only once. The `element
74
80
  </IntersectionObserver>
75
81
  ```
76
82
 
77
- ### on:observe event
83
+ ### `let:intersecting`
84
+
85
+ An alternative to binding to the `intersecting` prop is to use the `let:` directive.
86
+
87
+ In the following example, the "Hello world" element will fade in when its containing element intersects the viewport.
88
+
89
+ ```svelte
90
+ <script>
91
+ import IntersectionObserver from "svelte-intersection-observer";
92
+ import { fade } from "svelte/transition";
93
+
94
+ let node;
95
+ </script>
96
+
97
+ <header />
98
+
99
+ <IntersectionObserver element={node} let:intersecting>
100
+ <div bind:this={node}>
101
+ {#if intersecting}
102
+ <div transition:fade={{ delay: 200 }}>Hello world</div>
103
+ {/if}
104
+ </div>
105
+ </IntersectionObserver>
106
+ ```
107
+
108
+ ### `on:observe` event
78
109
 
79
110
  The `observe` event is dispatched when the element is first observed and also whenever an intersection event occurs.
80
111
 
81
- ```html
112
+ ```svelte no-eval
82
113
  <IntersectionObserver
83
114
  {element}
84
- on:observe="{(e) => {
115
+ on:observe={(e) => {
85
116
  console.log(e.detail); // IntersectionObserverEntry
86
117
  console.log(e.detail.isIntersecting); // true | false
87
- }}"
118
+ }}
88
119
  >
89
- <div bind:this="{element}">Hello world</div>
120
+ <div bind:this={element}>Hello world</div>
90
121
  </IntersectionObserver>
91
122
  ```
92
123
 
93
- ### on:intersect event
124
+ ### `on:intersect` event
94
125
 
95
126
  As an alternative to binding the `intersecting` prop, you can listen to the `intersect` event that is dispatched if the observed element is intersecting the viewport.
96
127
 
97
128
  **Note**: Compared to `on:observe`, `on:intersect` is dispatched only when the element is _intersecting the viewport_. In other words, `e.detail.isIntersecting` will only be `true`.
98
129
 
99
- ```html
130
+ ```svelte no-eval
100
131
  <IntersectionObserver
101
132
  {element}
102
- on:intersect="{(e) => {
133
+ on:intersect={(e) => {
103
134
  console.log(e.detail); // IntersectionObserverEntry
104
135
  console.log(e.detail.isIntersecting); // true
105
- }}"
136
+ }}
106
137
  >
107
- <div bind:this="{element}">Hello world</div>
138
+ <div bind:this={element}>Hello world</div>
108
139
  </IntersectionObserver>
109
140
  ```
110
141
 
@@ -112,16 +143,16 @@ As an alternative to binding the `intersecting` prop, you can listen to the `int
112
143
 
113
144
  ### Props
114
145
 
115
- | Name | Description | Type | Default value |
116
- | :----------- | :------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :------------ |
117
- | element | Element observed for intersection | `HTMLElement` | `null` |
118
- | once | If `true`, the observed element will be unobserved upon intersection | `boolean` | `false` |
119
- | intersecting | `true` if the observed element is intersecting the viewport | `boolean` | `false` |
120
- | root | Containing element | `null` or `HTMLElement` | `null` |
121
- | rootMargin | Margin offset of the containing element | `string` | `"0px"` |
122
- | threshold | Percentage of element visibility to trigger an event | `number` between 0 and 1 | `0` |
123
- | entry | Observed element metadata | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | `null` |
124
- | observer | IntersectionObserver instance | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) | `null` |
146
+ | Name | Description | Type | Default value |
147
+ | :----------- | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :------------ |
148
+ | element | Observed element | `HTMLElement` | `null` |
149
+ | once | Unobserve the element after the first intersection event | `boolean` | `false` |
150
+ | intersecting | `true` if the observed element is intersecting the viewport | `boolean` | `false` |
151
+ | root | Containing element | `null` or `HTMLElement` | `null` |
152
+ | rootMargin | Margin offset of the containing element | `string` | `"0px"` |
153
+ | threshold | Percentage of element visibile to trigger an event | `number` between 0 and 1 | `0` |
154
+ | entry | Observed element metadata | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | `null` |
155
+ | observer | `IntersectionObserver` instance | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) | `null` |
125
156
 
126
157
  ### Dispatched events
127
158
 
package/lib/index.js CHANGED
@@ -334,7 +334,7 @@
334
334
  }
335
335
  }
336
336
 
337
- /* src/IntersectionObserver.svelte generated by Svelte v3.44.0 */
337
+ /* src/IntersectionObserver.svelte generated by Svelte v3.44.2 */
338
338
 
339
339
  const get_default_slot_changes = dirty => ({
340
340
  intersecting: dirty & /*intersecting*/ 2,
package/lib/index.mjs CHANGED
@@ -328,7 +328,7 @@ class SvelteComponent {
328
328
  }
329
329
  }
330
330
 
331
- /* src/IntersectionObserver.svelte generated by Svelte v3.44.0 */
331
+ /* src/IntersectionObserver.svelte generated by Svelte v3.44.2 */
332
332
 
333
333
  const get_default_slot_changes = dirty => ({
334
334
  intersecting: dirty & /*intersecting*/ 2,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-intersection-observer",
3
- "version": "0.9.1",
3
+ "version": "0.9.2",
4
4
  "license": "MIT",
5
5
  "description": "Detect if an element is in the viewport using the Intersection Observer API",
6
6
  "author": "Eric Liu (https://github.com/metonym)",
@@ -17,11 +17,11 @@
17
17
  "format": "prettier --write '.'"
18
18
  },
19
19
  "devDependencies": {
20
- "prettier": "^2.4.1",
21
- "prettier-plugin-svelte": "^2.4.0",
22
- "svelte": "^3.44.0",
23
- "svelte-check": "^2.2.7",
24
- "svelte-readme": "^3.4.1"
20
+ "prettier": "^2.5.0",
21
+ "prettier-plugin-svelte": "^2.5.0",
22
+ "svelte": "^3.44.2",
23
+ "svelte-check": "^2.2.10",
24
+ "svelte-readme": "^3.6.1"
25
25
  },
26
26
  "repository": {
27
27
  "type": "git",