@onsvisual/svelte-components 1.0.53 → 1.0.54

package/dist/wrappers/LazyLoad/LazyLoad.svelte

@@ -1,6 +1,4 @@
 <script>
-	import { onMount, onDestroy } from "svelte";
-
 	/**
 	 * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
 	 * @type {boolean}
@@ -17,34 +15,31 @@
 	 */
 	export let rootMargin = 200;
 
-	let el, observer;
-
 	const callback = (entries, observer) => {
 		entries.forEach((entry) => {
+			console.log(entry);
 			let intersecting = entry.isIntersecting;
 			if (!entered && intersecting) {
-				observer.unobserve(el);
+				observer.unobserve(entry.target);
 				entered = true;
 			}
 		});
 	};
 
-	onMount(() => {
+	function initObserver(el) {
 		let options = { root: document, rootMargin: `${rootMargin}px` };
 
-		observer = new IntersectionObserver(callback, options);
+		const observer = new IntersectionObserver(callback, options);
 		observer.observe(el);
-	});
 
-	onDestroy(() => {
-		if (el && observer) {
-			observer.unobserve(el);
-		}
-	});
+		return {
+			destroy: () => observer?.unobserve?.(el)
+		};
+	}
 </script>
 
 {#if entered}
 	<slot />
 {:else}
-	<div bind:this={el} style:height="{+initialHeight || 100}px"></div>
+	<div use:initObserver style:height="{+initialHeight || 100}px"></div>
 {/if}

package/dist/wrappers/LazyLoad/docs/component.md

@@ -1,6 +1,6 @@
-A wrapper component that uses IntersectionObserver to allow the elements it contains to be lazy loaded, ie. to be initialised/mounted only when they enter the viewport (or come close to it).
+A wrapper component that uses IntersectionObserver to allow the Svelte components or HTML elements it contains to be lazy loaded, ie. to be added to the page (or DOM) only when they enter the viewport.
 
-Optionally, you can use the **initialHeight** to set a placeholder height in pixels (default 400), and you can use **rootMargin** to set how many pixels from the viewport you want lazy loading to kick in (default 200).
+Optionally, you can use the **initialHeight** to set a placeholder height in pixels (default 400), and you can use **rootMargin** to set how many pixels before the viewport you want lazy loading to kick in (default 200).
 
 <!-- prettier-ignore -->
 ```html

package/dist/wrappers/Observe/Observe.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { createEventDispatcher } from "svelte";
 
 	const dispatch = createEventDispatcher();
 
@@ -14,8 +14,6 @@
 	 */
 	export let rootMargin = 0;
 
-	let el, observer;
-
 	const callback = (entries) => {
 		entries.forEach((entry) => {
 			let intersecting = entry.isIntersecting;
@@ -30,16 +28,18 @@
 		});
 	};
 
-	onMount(() => {
+	function initObserver(el) {
 		let options = { root: document, rootMargin: `${rootMargin}px` };
 
-		observer = new IntersectionObserver(callback, options);
+		const observer = new IntersectionObserver(callback, options);
 		observer.observe(el);
-	});
 
-	onDestroy(() => observer?.unobserve?.(el));
+		return {
+			destroy: () => observer?.unobserve?.(el)
+		};
+	}
 </script>
 
-<div bind:this={el}>
+<div use:initObserver>
 	<slot />
 </div>

package/dist/wrappers/Observe/docs/component.md

@@ -4,16 +4,21 @@ This component can be useful for triggering actions such as lazy loading of data
 
 This component has **enter** and **exit** events, triggered when it enters or leaves the viewport. It also has a **visible** binding which has a value of **true** when it is within the viewport.
 
+In this demo, you can open your browser's developer console (**F12**) to see the logs for elements entering and existing the viewport.
+
 <!-- prettier-ignore -->
 ```html
 <script>
   import { Observe } from "@onsvisual/svelte-components";
 
+  let visible;
+
   const colors = ["yellow", "green", "blue", "purple", "red", "orange"];
 </script>
 
 {#each colors as color}
 <Observe
+  bind:visible
   on:enter={() => console.log(`${color} entered`)}
   on:exit={() => console.log(`${color} exited`)}>
   <div class="section" style:background={color} style:height="400px"/>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.53",
+	"version": "1.0.54",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",