fix: bug fix for cellCount !== 1 in InfiniteGrid + additional exports

Author: 6eDesign

src/lib/components/generic/InfiniteGrid.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { tick } from 'svelte';
+
 	import { spring } from 'svelte/motion';
 	import { derived, writable } from 'svelte/store';
 
@@ -9,23 +11,33 @@
 	export let get;
 	export let stiffness = 0.065;
 	export let damping = 0.9;
+	export let useCache = true;
+	export let idKey = undefined;
 
 	export const move = (amount) => {
 		index = Math.max(0, Math.min(itemCount - 1, index + amount));
 	};
 
+	const forceUpdate = writable(false);
+	export const triggerUpdate = async () => {
+		await tick();
+		forceUpdate.set(true);
+		await tick();
+		forceUpdate.set(false);
+	};
+
 	const getCached = (index) => $visibleData.find(({ index: i }) => i === index)?.data || get(index);
 
 	let inRange = [-Infinity, Infinity];
 	const initialized = writable(false);
 	const dim = writable({ w: 0, h: 0 });
 	const offset = spring(0, { stiffness, damping });
-
 	export const visibleData = derived(
-		[dim, offset, initialized],
-		([{ w, h }, $o, $initialized]) => {
+		[dim, offset, initialized, forceUpdate],
+		([{ w, h }, $o, $initialized, $force]) => {
 			if (!w || !h || !$initialized) return [];
 			if ($o < inRange[0] || $o > inRange[1]) return $visibleData;
+			const divisibleHeight = cellCount > 1 ? h + (cellCount - (h % cellCount)) : h;
 			const cellHeight = h / cellCount;
 			const start = Math.max(-1, Math.floor((-1 * $o) / cellHeight) - 1);
 			const baseOffset = $o % cellHeight;
@@ -35,7 +47,8 @@
 					const index = i + start;
 					const pos = baseOffset + (i - 1) * cellHeight;
 					if (index < 0 || index >= itemCount) return undefined;
-					return { data: getCached(index), pos, index };
+					const data = $force || !useCache ? get(index) : getCached(index);
+					return { data, pos, index };
 				})
 				.filter(Boolean);
 		},
@@ -51,15 +64,14 @@
 	$: gridStyle = `grid-template-${type}: repeat(${cellCount}, 1fr);`;
 	$: {
 		if ($dim.w && $dim.h) {
-			const newOffset = ($dim.h / cellCount) * index * -1;
-			updateOffset(+newOffset.toFixed(3));
+			updateOffset(($dim.h / cellCount) * index * -1);
 			if (!$initialized) initialized.set(true);
 		}
 	}
 </script>
 
 <div class="grid" style={gridStyle} bind:clientHeight={$dim.h} bind:clientWidth={$dim.w}>
-	{#each $visibleData as obj (obj.index)}
+	{#each $visibleData as obj (obj.data?.[idKey] || obj.index)}
 		<div style="transform: translateY({obj.pos}px)">
 			<slot {...obj.data} index={obj.index} />
 		</div>

src/lib/directives/scrollable.js

@@ -1,10 +1,12 @@
-import { scrollStep } from '$lib/config/scroll';
+import { scrollStep } from '../config/scroll';
 
-export default (node, { y: yi = 0, step = scrollStep, maxSteps = Infinity }) => {
+export default (node, opts) => {
+	let { y: yi = 0, step = scrollStep } = opts;
 	let lastTouch = 0;
 	let y = yi;
 
 	const updateY = (val) => {
+		const { maxSteps = Infinity } = opts;
 		y = Math.max(0, Math.min(maxSteps * step, val));
 	};
 

src/lib/index.js

@@ -8,6 +8,8 @@ import Swappable from './components/generic/Swappable.svelte';
 import Scrollable from './components/generic/Scrollable.svelte';
 import InfiniteGrid from './components/generic/InfiniteGrid.svelte';
 import FiniteGrid from './components/generic/FiniteGrid.svelte';
+import scrollable from './directives/scrollable';
+import Theme from './components/generic/Theme.svelte';
 import * as themes from './config/theme';
 
 export {
@@ -21,5 +23,7 @@ export {
 	CrossfadeProvider,
 	Scrollable,
 	Swappable,
-	themes
+	Theme,
+	themes,
+	scrollable
 };