svelte-intersection-observer 0.7.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.
- package/CHANGELOG.md +30 -0
- package/README.md +64 -28
- package/lib/index.js +39 -18
- package/lib/index.mjs +39 -18
- package/package.json +8 -9
- package/src/IntersectionObserver.svelte +1 -8
- package/types/{IntersectionObserver.d.ts → IntersectionObserver.svelte.d.ts} +15 -1
- package/types/index.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,36 @@ 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
|
+
|
|
16
|
+
## [0.9.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.1) - 2021-10-25
|
|
17
|
+
|
|
18
|
+
**Documentation**
|
|
19
|
+
|
|
20
|
+
- update the "Once" example to include the `"svelte-intersection-observer"` import
|
|
21
|
+
- rename example `svite` to `vite`
|
|
22
|
+
|
|
23
|
+
**Refactoring**
|
|
24
|
+
|
|
25
|
+
- inline `entry` prop typedef
|
|
26
|
+
- remove `@event`, `@slot` artifacts used by sveld to generate initial TypeScript definitions
|
|
27
|
+
|
|
28
|
+
## [0.9.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.0) - 2021-10-05
|
|
29
|
+
|
|
30
|
+
- improve TypeScript definitions for dispatched events
|
|
31
|
+
- `on:observe`: `event.detail.isIntersecting` is a `boolean`
|
|
32
|
+
- `on:intersect`: `event.detail.isIntersecting` can only be `true`
|
|
33
|
+
|
|
34
|
+
## [0.8.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.8.0) - 2021-09-02
|
|
35
|
+
|
|
36
|
+
- use `.svelte.d.ts` extension for component TypeScript definition
|
|
37
|
+
|
|
8
38
|
## [0.7.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.7.1) - 2021-07-05
|
|
9
39
|
|
|
10
40
|
**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
|
|
@@ -55,7 +61,9 @@ Set `once` to `true` for the intersection event to occur only once. The `element
|
|
|
55
61
|
|
|
56
62
|
```svelte
|
|
57
63
|
<script>
|
|
58
|
-
|
|
64
|
+
import IntersectionObserver from "svelte-intersection-observer";
|
|
65
|
+
|
|
66
|
+
let elementOnce;
|
|
59
67
|
let intersectOnce;
|
|
60
68
|
</script>
|
|
61
69
|
|
|
@@ -63,41 +71,71 @@ Set `once` to `true` for the intersection event to occur only once. The `element
|
|
|
63
71
|
{intersectOnce ? "Element is in view" : "Element is not in view"}
|
|
64
72
|
</header>
|
|
65
73
|
|
|
66
|
-
<IntersectionObserver
|
|
67
|
-
|
|
74
|
+
<IntersectionObserver
|
|
75
|
+
once
|
|
76
|
+
element={elementOnce}
|
|
77
|
+
bind:intersecting={intersectOnce}
|
|
78
|
+
>
|
|
79
|
+
<div bind:this={elementOnce}>Hello world</div>
|
|
68
80
|
</IntersectionObserver>
|
|
69
81
|
```
|
|
70
82
|
|
|
71
|
-
###
|
|
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
|
|
72
109
|
|
|
73
110
|
The `observe` event is dispatched when the element is first observed and also whenever an intersection event occurs.
|
|
74
111
|
|
|
75
|
-
```
|
|
112
|
+
```svelte no-eval
|
|
76
113
|
<IntersectionObserver
|
|
77
114
|
{element}
|
|
78
|
-
on:observe=
|
|
115
|
+
on:observe={(e) => {
|
|
79
116
|
console.log(e.detail); // IntersectionObserverEntry
|
|
80
117
|
console.log(e.detail.isIntersecting); // true | false
|
|
81
|
-
}}
|
|
118
|
+
}}
|
|
82
119
|
>
|
|
83
|
-
<div bind:this=
|
|
120
|
+
<div bind:this={element}>Hello world</div>
|
|
84
121
|
</IntersectionObserver>
|
|
85
122
|
```
|
|
86
123
|
|
|
87
|
-
### on:intersect event
|
|
124
|
+
### `on:intersect` event
|
|
88
125
|
|
|
89
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.
|
|
90
127
|
|
|
91
|
-
**Compared to `on:observe`,
|
|
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`.
|
|
92
129
|
|
|
93
|
-
```
|
|
130
|
+
```svelte no-eval
|
|
94
131
|
<IntersectionObserver
|
|
95
132
|
{element}
|
|
96
|
-
on:intersect=
|
|
133
|
+
on:intersect={(e) => {
|
|
97
134
|
console.log(e.detail); // IntersectionObserverEntry
|
|
98
|
-
|
|
135
|
+
console.log(e.detail.isIntersecting); // true
|
|
136
|
+
}}
|
|
99
137
|
>
|
|
100
|
-
<div bind:this=
|
|
138
|
+
<div bind:this={element}>Hello world</div>
|
|
101
139
|
</IntersectionObserver>
|
|
102
140
|
```
|
|
103
141
|
|
|
@@ -105,16 +143,16 @@ As an alternative to binding the `intersecting` prop, you can listen to the `int
|
|
|
105
143
|
|
|
106
144
|
### Props
|
|
107
145
|
|
|
108
|
-
| Name | Description
|
|
109
|
-
| :----------- |
|
|
110
|
-
| element |
|
|
111
|
-
| once |
|
|
112
|
-
| intersecting | `true` if the observed element is intersecting the viewport
|
|
113
|
-
| root | Containing element
|
|
114
|
-
| rootMargin | Margin offset of the containing element
|
|
115
|
-
| threshold | Percentage of element
|
|
116
|
-
| entry | Observed element metadata
|
|
117
|
-
| observer | IntersectionObserver instance
|
|
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` |
|
|
118
156
|
|
|
119
157
|
### Dispatched events
|
|
120
158
|
|
|
@@ -128,8 +166,7 @@ Note that all properties in `IntersectionObserverEntry` are read only.
|
|
|
128
166
|
<details>
|
|
129
167
|
<summary><code>IntersectionObserverEntry</code></summary>
|
|
130
168
|
|
|
131
|
-
|
|
132
|
-
```js
|
|
169
|
+
```ts
|
|
133
170
|
interface IntersectionObserverEntry {
|
|
134
171
|
target: HTMLElement;
|
|
135
172
|
time: number;
|
|
@@ -168,7 +205,6 @@ interface IntersectionObserverEntry {
|
|
|
168
205
|
};
|
|
169
206
|
}
|
|
170
207
|
```
|
|
171
|
-
<!-- prettier-ignore-end -->
|
|
172
208
|
|
|
173
209
|
</details>
|
|
174
210
|
|
|
@@ -177,7 +213,7 @@ interface IntersectionObserverEntry {
|
|
|
177
213
|
The [examples folder](examples/) contains sample set-ups.
|
|
178
214
|
|
|
179
215
|
- [examples/sveltekit](examples/sveltekit)
|
|
180
|
-
- [examples/
|
|
216
|
+
- [examples/vite](examples/vite)
|
|
181
217
|
- [examples/sapper](examples/sapper)
|
|
182
218
|
- [examples/snowpack](examples/snowpack)
|
|
183
219
|
- [examples/rollup](examples/rollup)
|
package/lib/index.js
CHANGED
|
@@ -58,22 +58,32 @@
|
|
|
58
58
|
}
|
|
59
59
|
return $$scope.dirty;
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);
|
|
61
|
+
function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
|
|
63
62
|
if (slot_changes) {
|
|
64
63
|
const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
|
|
65
64
|
slot.p(slot_context, slot_changes);
|
|
66
65
|
}
|
|
67
66
|
}
|
|
67
|
+
function get_all_dirty_from_scope($$scope) {
|
|
68
|
+
if ($$scope.ctx.length > 32) {
|
|
69
|
+
const dirty = [];
|
|
70
|
+
const length = $$scope.ctx.length / 32;
|
|
71
|
+
for (let i = 0; i < length; i++) {
|
|
72
|
+
dirty[i] = -1;
|
|
73
|
+
}
|
|
74
|
+
return dirty;
|
|
75
|
+
}
|
|
76
|
+
return -1;
|
|
77
|
+
}
|
|
68
78
|
function detach(node) {
|
|
69
79
|
node.parentNode.removeChild(node);
|
|
70
80
|
}
|
|
71
81
|
function children(element) {
|
|
72
82
|
return Array.from(element.childNodes);
|
|
73
83
|
}
|
|
74
|
-
function custom_event(type, detail) {
|
|
84
|
+
function custom_event(type, detail, bubbles = false) {
|
|
75
85
|
const e = document.createEvent('CustomEvent');
|
|
76
|
-
e.initCustomEvent(type,
|
|
86
|
+
e.initCustomEvent(type, bubbles, false, detail);
|
|
77
87
|
return e;
|
|
78
88
|
}
|
|
79
89
|
|
|
@@ -237,7 +247,7 @@
|
|
|
237
247
|
}
|
|
238
248
|
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
|
|
239
249
|
}
|
|
240
|
-
function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
|
|
250
|
+
function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
|
|
241
251
|
const parent_component = current_component;
|
|
242
252
|
set_current_component(component);
|
|
243
253
|
const $$ = component.$$ = {
|
|
@@ -254,12 +264,14 @@
|
|
|
254
264
|
on_disconnect: [],
|
|
255
265
|
before_update: [],
|
|
256
266
|
after_update: [],
|
|
257
|
-
context: new Map(parent_component ? parent_component.$$.context :
|
|
267
|
+
context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
|
|
258
268
|
// everything else
|
|
259
269
|
callbacks: blank_object(),
|
|
260
270
|
dirty,
|
|
261
|
-
skip_bound: false
|
|
271
|
+
skip_bound: false,
|
|
272
|
+
root: options.target || parent_component.$$.root
|
|
262
273
|
};
|
|
274
|
+
append_styles && append_styles($$.root);
|
|
263
275
|
let ready = false;
|
|
264
276
|
$$.ctx = instance
|
|
265
277
|
? instance(component, options.props || {}, (i, ret, ...rest) => {
|
|
@@ -322,7 +334,7 @@
|
|
|
322
334
|
}
|
|
323
335
|
}
|
|
324
336
|
|
|
325
|
-
/* src/IntersectionObserver.svelte generated by Svelte v3.
|
|
337
|
+
/* src/IntersectionObserver.svelte generated by Svelte v3.44.2 */
|
|
326
338
|
|
|
327
339
|
const get_default_slot_changes = dirty => ({
|
|
328
340
|
intersecting: dirty & /*intersecting*/ 2,
|
|
@@ -355,7 +367,16 @@
|
|
|
355
367
|
p(ctx, [dirty]) {
|
|
356
368
|
if (default_slot) {
|
|
357
369
|
if (default_slot.p && (!current || dirty & /*$$scope, intersecting, entry, observer*/ 263)) {
|
|
358
|
-
|
|
370
|
+
update_slot_base(
|
|
371
|
+
default_slot,
|
|
372
|
+
default_slot_template,
|
|
373
|
+
ctx,
|
|
374
|
+
/*$$scope*/ ctx[8],
|
|
375
|
+
!current
|
|
376
|
+
? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
|
|
377
|
+
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, get_default_slot_changes),
|
|
378
|
+
get_default_slot_context
|
|
379
|
+
);
|
|
359
380
|
}
|
|
360
381
|
}
|
|
361
382
|
},
|
|
@@ -434,15 +455,15 @@
|
|
|
434
455
|
});
|
|
435
456
|
|
|
436
457
|
$$self.$$set = $$props => {
|
|
437
|
-
if (
|
|
438
|
-
if (
|
|
439
|
-
if (
|
|
440
|
-
if (
|
|
441
|
-
if (
|
|
442
|
-
if (
|
|
443
|
-
if (
|
|
444
|
-
if (
|
|
445
|
-
if (
|
|
458
|
+
if ('element' in $$props) $$invalidate(3, element = $$props.element);
|
|
459
|
+
if ('once' in $$props) $$invalidate(4, once = $$props.once);
|
|
460
|
+
if ('root' in $$props) $$invalidate(5, root = $$props.root);
|
|
461
|
+
if ('rootMargin' in $$props) $$invalidate(6, rootMargin = $$props.rootMargin);
|
|
462
|
+
if ('threshold' in $$props) $$invalidate(7, threshold = $$props.threshold);
|
|
463
|
+
if ('entry' in $$props) $$invalidate(0, entry = $$props.entry);
|
|
464
|
+
if ('intersecting' in $$props) $$invalidate(1, intersecting = $$props.intersecting);
|
|
465
|
+
if ('observer' in $$props) $$invalidate(2, observer = $$props.observer);
|
|
466
|
+
if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
|
|
446
467
|
};
|
|
447
468
|
|
|
448
469
|
return [
|
package/lib/index.mjs
CHANGED
|
@@ -52,22 +52,32 @@ function get_slot_changes(definition, $$scope, dirty, fn) {
|
|
|
52
52
|
}
|
|
53
53
|
return $$scope.dirty;
|
|
54
54
|
}
|
|
55
|
-
function
|
|
56
|
-
const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);
|
|
55
|
+
function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
|
|
57
56
|
if (slot_changes) {
|
|
58
57
|
const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
|
|
59
58
|
slot.p(slot_context, slot_changes);
|
|
60
59
|
}
|
|
61
60
|
}
|
|
61
|
+
function get_all_dirty_from_scope($$scope) {
|
|
62
|
+
if ($$scope.ctx.length > 32) {
|
|
63
|
+
const dirty = [];
|
|
64
|
+
const length = $$scope.ctx.length / 32;
|
|
65
|
+
for (let i = 0; i < length; i++) {
|
|
66
|
+
dirty[i] = -1;
|
|
67
|
+
}
|
|
68
|
+
return dirty;
|
|
69
|
+
}
|
|
70
|
+
return -1;
|
|
71
|
+
}
|
|
62
72
|
function detach(node) {
|
|
63
73
|
node.parentNode.removeChild(node);
|
|
64
74
|
}
|
|
65
75
|
function children(element) {
|
|
66
76
|
return Array.from(element.childNodes);
|
|
67
77
|
}
|
|
68
|
-
function custom_event(type, detail) {
|
|
78
|
+
function custom_event(type, detail, bubbles = false) {
|
|
69
79
|
const e = document.createEvent('CustomEvent');
|
|
70
|
-
e.initCustomEvent(type,
|
|
80
|
+
e.initCustomEvent(type, bubbles, false, detail);
|
|
71
81
|
return e;
|
|
72
82
|
}
|
|
73
83
|
|
|
@@ -231,7 +241,7 @@ function make_dirty(component, i) {
|
|
|
231
241
|
}
|
|
232
242
|
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
|
|
233
243
|
}
|
|
234
|
-
function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
|
|
244
|
+
function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
|
|
235
245
|
const parent_component = current_component;
|
|
236
246
|
set_current_component(component);
|
|
237
247
|
const $$ = component.$$ = {
|
|
@@ -248,12 +258,14 @@ function init(component, options, instance, create_fragment, not_equal, props, d
|
|
|
248
258
|
on_disconnect: [],
|
|
249
259
|
before_update: [],
|
|
250
260
|
after_update: [],
|
|
251
|
-
context: new Map(parent_component ? parent_component.$$.context :
|
|
261
|
+
context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
|
|
252
262
|
// everything else
|
|
253
263
|
callbacks: blank_object(),
|
|
254
264
|
dirty,
|
|
255
|
-
skip_bound: false
|
|
265
|
+
skip_bound: false,
|
|
266
|
+
root: options.target || parent_component.$$.root
|
|
256
267
|
};
|
|
268
|
+
append_styles && append_styles($$.root);
|
|
257
269
|
let ready = false;
|
|
258
270
|
$$.ctx = instance
|
|
259
271
|
? instance(component, options.props || {}, (i, ret, ...rest) => {
|
|
@@ -316,7 +328,7 @@ class SvelteComponent {
|
|
|
316
328
|
}
|
|
317
329
|
}
|
|
318
330
|
|
|
319
|
-
/* src/IntersectionObserver.svelte generated by Svelte v3.
|
|
331
|
+
/* src/IntersectionObserver.svelte generated by Svelte v3.44.2 */
|
|
320
332
|
|
|
321
333
|
const get_default_slot_changes = dirty => ({
|
|
322
334
|
intersecting: dirty & /*intersecting*/ 2,
|
|
@@ -349,7 +361,16 @@ function create_fragment(ctx) {
|
|
|
349
361
|
p(ctx, [dirty]) {
|
|
350
362
|
if (default_slot) {
|
|
351
363
|
if (default_slot.p && (!current || dirty & /*$$scope, intersecting, entry, observer*/ 263)) {
|
|
352
|
-
|
|
364
|
+
update_slot_base(
|
|
365
|
+
default_slot,
|
|
366
|
+
default_slot_template,
|
|
367
|
+
ctx,
|
|
368
|
+
/*$$scope*/ ctx[8],
|
|
369
|
+
!current
|
|
370
|
+
? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
|
|
371
|
+
: get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, get_default_slot_changes),
|
|
372
|
+
get_default_slot_context
|
|
373
|
+
);
|
|
353
374
|
}
|
|
354
375
|
}
|
|
355
376
|
},
|
|
@@ -428,15 +449,15 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
428
449
|
});
|
|
429
450
|
|
|
430
451
|
$$self.$$set = $$props => {
|
|
431
|
-
if (
|
|
432
|
-
if (
|
|
433
|
-
if (
|
|
434
|
-
if (
|
|
435
|
-
if (
|
|
436
|
-
if (
|
|
437
|
-
if (
|
|
438
|
-
if (
|
|
439
|
-
if (
|
|
452
|
+
if ('element' in $$props) $$invalidate(3, element = $$props.element);
|
|
453
|
+
if ('once' in $$props) $$invalidate(4, once = $$props.once);
|
|
454
|
+
if ('root' in $$props) $$invalidate(5, root = $$props.root);
|
|
455
|
+
if ('rootMargin' in $$props) $$invalidate(6, rootMargin = $$props.rootMargin);
|
|
456
|
+
if ('threshold' in $$props) $$invalidate(7, threshold = $$props.threshold);
|
|
457
|
+
if ('entry' in $$props) $$invalidate(0, entry = $$props.entry);
|
|
458
|
+
if ('intersecting' in $$props) $$invalidate(1, intersecting = $$props.intersecting);
|
|
459
|
+
if ('observer' in $$props) $$invalidate(2, observer = $$props.observer);
|
|
460
|
+
if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
|
|
440
461
|
};
|
|
441
462
|
|
|
442
463
|
return [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-intersection-observer",
|
|
3
|
-
"version": "0.
|
|
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)",
|
|
@@ -11,18 +11,17 @@
|
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"scripts": {
|
|
13
13
|
"dev": "rollup -cw",
|
|
14
|
-
"
|
|
15
|
-
"deploy": "npx gh-pages -d dist",
|
|
14
|
+
"build": "rollup -c",
|
|
16
15
|
"prepack": "BUNDLE=true rollup -c",
|
|
17
|
-
"test": "svelte-check --workspace
|
|
16
|
+
"test": "svelte-check --workspace test",
|
|
18
17
|
"format": "prettier --write '.'"
|
|
19
18
|
},
|
|
20
19
|
"devDependencies": {
|
|
21
|
-
"prettier": "^2.
|
|
22
|
-
"prettier-plugin-svelte": "^2.
|
|
23
|
-
"svelte": "^3.
|
|
24
|
-
"svelte-check": "^2.2.
|
|
25
|
-
"svelte-readme": "^3.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"
|
|
26
25
|
},
|
|
27
26
|
"repository": {
|
|
28
27
|
"type": "git",
|
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
/**
|
|
3
|
-
* @typedef {null | IntersectionObserverEntry} Entry
|
|
4
|
-
* @event {Entry} observe
|
|
5
|
-
* @event {Entry} intersect
|
|
6
|
-
* @slot {{ intersecting: boolean; entry: Entry; observer: IntersectionObserver }}
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
2
|
/**
|
|
10
3
|
* The HTML Element to observe
|
|
11
4
|
* @type {null | HTMLElement}
|
|
@@ -34,7 +27,7 @@
|
|
|
34
27
|
*/
|
|
35
28
|
export let threshold = 0;
|
|
36
29
|
|
|
37
|
-
/** @type {null |
|
|
30
|
+
/** @type {null | IntersectionObserverEntry} */
|
|
38
31
|
export let entry = null;
|
|
39
32
|
|
|
40
33
|
/**
|
|
@@ -47,7 +47,21 @@ export interface IntersectionObserverProps {
|
|
|
47
47
|
|
|
48
48
|
export default class SvelteIntersectionObserver extends SvelteComponentTyped<
|
|
49
49
|
IntersectionObserverProps,
|
|
50
|
-
{
|
|
50
|
+
{
|
|
51
|
+
/**
|
|
52
|
+
* Dispatched when the element is first observed
|
|
53
|
+
* and also whenever an intersection event occurs.
|
|
54
|
+
*/
|
|
55
|
+
observe: CustomEvent<IntersectionObserverEntry>;
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Dispatched only when the element is intersecting the viewport.
|
|
59
|
+
* `event.detail.isIntersecting` will only be `true`
|
|
60
|
+
*/
|
|
61
|
+
intersect: CustomEvent<
|
|
62
|
+
IntersectionObserverEntry & { isIntersecting: true }
|
|
63
|
+
>;
|
|
64
|
+
},
|
|
51
65
|
{
|
|
52
66
|
default: {
|
|
53
67
|
intersecting: boolean;
|
package/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as default } from "./IntersectionObserver";
|
|
1
|
+
export { default as default } from "./IntersectionObserver.svelte";
|