svelte-intersection-observer 0.7.0 → 0.9.1

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 (8) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +117 -24
  3. package/lib/index.js +40 -19
  4. package/lib/index.mjs +40 -19
  5. package/package.json +9 -7
  6. package/src/IntersectionObserver.svelte +3 -11
  7. package/types/{IntersectionObserver.d.ts → IntersectionObserver.svelte.d.ts} +15 -1
  8. package/types/index.d.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,38 @@ 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.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.1) - 2021-10-25
9
+
10
+ **Documentation**
11
+
12
+ - update the "Once" example to include the `"svelte-intersection-observer"` import
13
+ - rename example `svite` to `vite`
14
+
15
+ **Refactoring**
16
+
17
+ - inline `entry` prop typedef
18
+ - remove `@event`, `@slot` artifacts used by sveld to generate initial TypeScript definitions
19
+
20
+ ## [0.9.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.9.0) - 2021-10-05
21
+
22
+ - improve TypeScript definitions for dispatched events
23
+ - `on:observe`: `event.detail.isIntersecting` is a `boolean`
24
+ - `on:intersect`: `event.detail.isIntersecting` can only be `true`
25
+
26
+ ## [0.8.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.8.0) - 2021-09-02
27
+
28
+ - use `.svelte.d.ts` extension for component TypeScript definition
29
+
30
+ ## [0.7.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.7.1) - 2021-07-05
31
+
32
+ **Documentation**
33
+
34
+ - add description for basic usage
35
+ - add `on:observe` example
36
+ - explain difference between `on:observe` and `on:intersect`
37
+ - document `IntersectionObserverEntry` interface
38
+ - re-order prop table so that `once` and `intersecting` are more prominent
39
+
8
40
  ## [0.7.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.7.0) - 2021-04-23
9
41
 
10
42
  **Features**
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [![NPM][npm]][npm-url]
4
4
 
5
- > Detect if an element is in the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).
5
+ > Detect if an element is in the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
6
6
 
7
7
  <!-- REPO_URL -->
8
8
 
@@ -10,11 +10,17 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/8cd2327a580c4f429c71f7df999b
10
10
 
11
11
  <!-- TOC -->
12
12
 
13
- ## Install
13
+ ## Installation
14
+
15
+ **Yarn**
14
16
 
15
17
  ```bash
16
18
  yarn add -D svelte-intersection-observer
17
- # OR
19
+ ```
20
+
21
+ **NPM**
22
+
23
+ ```bash
18
24
  npm i -D svelte-intersection-observer
19
25
  ```
20
26
 
@@ -22,6 +28,10 @@ npm i -D svelte-intersection-observer
22
28
 
23
29
  ### Basic
24
30
 
31
+ Use the [`bind:this`](https://svelte.dev/docs#bind_element) directive to pass an element reference to the `IntersectionObserver` component.
32
+
33
+ Then, simply bind to the reactive `intersecting` prop to determine if the element intersects the viewport.
34
+
25
35
  ```svelte
26
36
  <script>
27
37
  import IntersectionObserver from "svelte-intersection-observer";
@@ -37,18 +47,17 @@ npm i -D svelte-intersection-observer
37
47
  <IntersectionObserver {element} bind:intersecting>
38
48
  <div bind:this={element}>Hello world</div>
39
49
  </IntersectionObserver>
40
-
41
50
  ```
42
51
 
43
52
  ### Once
44
53
 
45
- Set `once` to `true` for the intersection event to occur only once.
46
-
47
- The `element` will be unobserved after the intersection occurs.
54
+ Set `once` to `true` for the intersection event to occur only once. The `element` will be unobserved after the first intersection event occurs.
48
55
 
49
56
  ```svelte
50
57
  <script>
51
- let element2;
58
+ import IntersectionObserver from "svelte-intersection-observer";
59
+
60
+ let elementOnce;
52
61
  let intersectOnce;
53
62
  </script>
54
63
 
@@ -56,21 +65,43 @@ The `element` will be unobserved after the intersection occurs.
56
65
  {intersectOnce ? "Element is in view" : "Element is not in view"}
57
66
  </header>
58
67
 
59
- <IntersectionObserver once element={element2} bind:intersecting={intersectOnce}>
60
- <div bind:this={element2}>Hello world</div>
68
+ <IntersectionObserver
69
+ once
70
+ element={elementOnce}
71
+ bind:intersecting={intersectOnce}
72
+ >
73
+ <div bind:this={elementOnce}>Hello world</div>
61
74
  </IntersectionObserver>
75
+ ```
76
+
77
+ ### on:observe event
78
+
79
+ The `observe` event is dispatched when the element is first observed and also whenever an intersection event occurs.
62
80
 
81
+ ```html
82
+ <IntersectionObserver
83
+ {element}
84
+ on:observe="{(e) => {
85
+ console.log(e.detail); // IntersectionObserverEntry
86
+ console.log(e.detail.isIntersecting); // true | false
87
+ }}"
88
+ >
89
+ <div bind:this="{element}">Hello world</div>
90
+ </IntersectionObserver>
63
91
  ```
64
92
 
65
93
  ### on:intersect event
66
94
 
67
- The "intersect" event is dispatched only if the observed element is intersecting the viewport.
95
+ 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
+
97
+ **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`.
68
98
 
69
99
  ```html
70
100
  <IntersectionObserver
71
101
  {element}
72
102
  on:intersect="{(e) => {
73
103
  console.log(e.detail); // IntersectionObserverEntry
104
+ console.log(e.detail.isIntersecting); // true
74
105
  }}"
75
106
  >
76
107
  <div bind:this="{element}">Hello world</div>
@@ -81,25 +112,87 @@ The "intersect" event is dispatched only if the observed element is intersecting
81
112
 
82
113
  ### Props
83
114
 
84
- | Prop name | Description | Value |
85
- | :----------- | :---------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- |
86
- | element | Element observed for intersection | `HTMLElement` |
87
- | root | Containing element | `null` or `HTMLElement` (default: `null`) |
88
- | rootMargin | Margin offset of the containing element | `string` (default: `"0px"`) |
89
- | threshold | Percentage of element visibility to trigger an event | `number` between 0 and 1 (default: `0`) |
90
- | entry | Observed element metadata | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
91
- | once | If `true`, the observed element will be unobserved upon intersect | `boolean` (default: `false`) |
92
- | intersecting | `true` if the observed element is intersecting the viewport | `boolean` (default: `false`) |
93
- | observer | IntersectionObserver instance | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) |
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` |
94
125
 
95
126
  ### Dispatched events
96
127
 
97
- - **on:observe**: fired when an intersection change occurs (type `IntersectionObserverEntry`)
98
- - **on:intersect**: fired when an intersection change occurs and the element is intersecting (type `IntersectionObserverEntry`)
128
+ - **on:observe**: fired when the element is first observed or whenever an intersection change occurs
129
+ - **on:intersect**: fired when the element is intersecting the viewport
130
+
131
+ The `e.detail` dispatched by the `observe` and `intersect` events is an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) interface.
132
+
133
+ Note that all properties in `IntersectionObserverEntry` are read only.
134
+
135
+ <details>
136
+ <summary><code>IntersectionObserverEntry</code></summary>
137
+
138
+ ```ts
139
+ interface IntersectionObserverEntry {
140
+ target: HTMLElement;
141
+ time: number;
142
+ isIntersecting: boolean;
143
+ isVisible: boolean;
144
+ intersectionRatio: number;
145
+ intersectionRect: {
146
+ bottom: number;
147
+ height: number;
148
+ left: number;
149
+ right: number;
150
+ top: number;
151
+ width: number;
152
+ x: number;
153
+ y: number;
154
+ };
155
+ rootBounds: {
156
+ bottom: number;
157
+ height: number;
158
+ left: number;
159
+ right: number;
160
+ top: number;
161
+ width: number;
162
+ x: number;
163
+ y: number;
164
+ };
165
+ boundingClientRect: {
166
+ bottom: number;
167
+ height: number;
168
+ left: number;
169
+ right: number;
170
+ top: number;
171
+ width: number;
172
+ x: number;
173
+ y: number;
174
+ };
175
+ }
176
+ ```
177
+
178
+ </details>
179
+
180
+ ## Examples
181
+
182
+ The [examples folder](examples/) contains sample set-ups.
183
+
184
+ - [examples/sveltekit](examples/sveltekit)
185
+ - [examples/vite](examples/vite)
186
+ - [examples/sapper](examples/sapper)
187
+ - [examples/snowpack](examples/snowpack)
188
+ - [examples/rollup](examples/rollup)
189
+ - [examples/webpack](examples/webpack)
99
190
 
100
191
  ## TypeScript support
101
192
 
102
- Svelte version 3.31.0 or greater is required to use this module with TypeScript.
193
+ Svelte version 3.31 or greater is required to use this module with TypeScript.
194
+
195
+ TypeScript definitions for this component are located in the [types folder](types/).
103
196
 
104
197
  ## Changelog
105
198
 
package/lib/index.js CHANGED
@@ -58,22 +58,32 @@
58
58
  }
59
59
  return $$scope.dirty;
60
60
  }
61
- function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {
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, false, false, detail);
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 : options.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.37.0 */
337
+ /* src/IntersectionObserver.svelte generated by Svelte v3.44.0 */
326
338
 
327
339
  const get_default_slot_changes = dirty => ({
328
340
  intersecting: dirty & /*intersecting*/ 2,
@@ -354,8 +366,17 @@
354
366
  },
355
367
  p(ctx, [dirty]) {
356
368
  if (default_slot) {
357
- if (default_slot.p && dirty & /*$$scope, intersecting, entry, observer*/ 263) {
358
- update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[8], dirty, get_default_slot_changes, get_default_slot_context);
369
+ if (default_slot.p && (!current || dirty & /*$$scope, intersecting, entry, observer*/ 263)) {
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 ("element" in $$props) $$invalidate(3, element = $$props.element);
438
- if ("once" in $$props) $$invalidate(4, once = $$props.once);
439
- if ("root" in $$props) $$invalidate(5, root = $$props.root);
440
- if ("rootMargin" in $$props) $$invalidate(6, rootMargin = $$props.rootMargin);
441
- if ("threshold" in $$props) $$invalidate(7, threshold = $$props.threshold);
442
- if ("entry" in $$props) $$invalidate(0, entry = $$props.entry);
443
- if ("intersecting" in $$props) $$invalidate(1, intersecting = $$props.intersecting);
444
- if ("observer" in $$props) $$invalidate(2, observer = $$props.observer);
445
- if ("$$scope" in $$props) $$invalidate(8, $$scope = $$props.$$scope);
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 update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {
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, false, false, detail);
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 : options.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.37.0 */
331
+ /* src/IntersectionObserver.svelte generated by Svelte v3.44.0 */
320
332
 
321
333
  const get_default_slot_changes = dirty => ({
322
334
  intersecting: dirty & /*intersecting*/ 2,
@@ -348,8 +360,17 @@ function create_fragment(ctx) {
348
360
  },
349
361
  p(ctx, [dirty]) {
350
362
  if (default_slot) {
351
- if (default_slot.p && dirty & /*$$scope, intersecting, entry, observer*/ 263) {
352
- update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[8], dirty, get_default_slot_changes, get_default_slot_context);
363
+ if (default_slot.p && (!current || dirty & /*$$scope, intersecting, entry, observer*/ 263)) {
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 ("element" in $$props) $$invalidate(3, element = $$props.element);
432
- if ("once" in $$props) $$invalidate(4, once = $$props.once);
433
- if ("root" in $$props) $$invalidate(5, root = $$props.root);
434
- if ("rootMargin" in $$props) $$invalidate(6, rootMargin = $$props.rootMargin);
435
- if ("threshold" in $$props) $$invalidate(7, threshold = $$props.threshold);
436
- if ("entry" in $$props) $$invalidate(0, entry = $$props.entry);
437
- if ("intersecting" in $$props) $$invalidate(1, intersecting = $$props.intersecting);
438
- if ("observer" in $$props) $$invalidate(2, observer = $$props.observer);
439
- if ("$$scope" in $$props) $$invalidate(8, $$scope = $$props.$$scope);
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.7.0",
3
+ "version": "0.9.1",
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,15 +11,17 @@
11
11
  "sideEffects": false,
12
12
  "scripts": {
13
13
  "dev": "rollup -cw",
14
- "predeploy": "rollup -c",
15
- "deploy": "npx gh-pages -d dist",
14
+ "build": "rollup -c",
16
15
  "prepack": "BUNDLE=true rollup -c",
17
- "test": "svelte-check"
16
+ "test": "svelte-check --workspace test",
17
+ "format": "prettier --write '.'"
18
18
  },
19
19
  "devDependencies": {
20
- "svelte": "^3.37.0",
21
- "svelte-check": "^1.3.0",
22
- "svelte-readme": "^3.1.0"
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"
23
25
  },
24
26
  "repository": {
25
27
  "type": "git",
package/src/IntersectionObserver.svelte CHANGED
@@ -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 | Entry} */
30
+ /** @type {null | IntersectionObserverEntry} */
38
31
  export let entry = null;
39
32
 
40
33
  /**
@@ -52,7 +45,6 @@
52
45
  let prevRootMargin = null;
53
46
  let prevElement = null;
54
47
 
55
-
56
48
  const initialize = () => {
57
49
  observer = new IntersectionObserver(
58
50
  (entries) => {
@@ -63,8 +55,8 @@
63
55
  },
64
56
  { root, rootMargin, threshold }
65
57
  );
66
- }
67
-
58
+ };
59
+
68
60
  onMount(() => {
69
61
  initialize();
70
62
 
package/types/{IntersectionObserver.d.ts → IntersectionObserver.svelte.d.ts} RENAMED
@@ -47,7 +47,21 @@ export interface IntersectionObserverProps {
47
47
 
48
48
  export default class SvelteIntersectionObserver extends SvelteComponentTyped<
49
49
  IntersectionObserverProps,
50
- { observe: CustomEvent<Entry>; intersect: CustomEvent<Entry> },
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";