rune-scroller 1.0.0 → 2.1.0

package/dist/useIntersection.svelte.js

@@ -1,75 +1,90 @@
-import { onMount } from 'svelte';
 /**
  * Composable for handling IntersectionObserver logic
  * Reduces duplication between animation components
  */
+
 /**
- * Factory function to create intersection observer composables
- * Eliminates duplication between useIntersection and useIntersectionOnce
- * @param options - IntersectionObserver configuration
- * @param onIntersect - Callback handler for intersection changes
- * @param once - Whether to trigger only once (default: false)
+ * @param {import('./types.js').IntersectionOptions} [options={}]
+ * @param {((entry: IntersectionObserverEntry, isVisible: boolean) => void) | undefined} onIntersect
+ * @param {boolean} [once=false]
+ * @returns {import('./types.js').UseIntersectionReturn}
  */
-function createIntersectionObserver(options = {}, onIntersect, once = false) {
-    const { threshold = 0.5, rootMargin = '-10% 0px -10% 0px', root = null } = options;
-    let element = $state(null);
-    let isVisible = $state(false);
-    let hasTriggeredOnce = false;
-    let observer = null;
-    onMount(() => {
-        if (!element)
-            return;
-        observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                // For once-only behavior, check if already triggered
-                if (once && hasTriggeredOnce)
-                    return;
-                isVisible = entry.isIntersecting;
-                onIntersect(entry, entry.isIntersecting);
-                // Unobserve after first trigger if once=true
-                if (once && entry.isIntersecting) {
-                    hasTriggeredOnce = true;
-                    observer?.unobserve(entry.target);
-                }
-            });
-        }, {
-            threshold,
-            rootMargin,
-            root
-        });
-        observer.observe(element);
-        return () => {
-            observer?.disconnect();
-        };
-    });
-    return {
-        get element() {
-            return element;
-        },
-        set element(value) {
-            element = value;
-        },
-        get isVisible() {
-            return isVisible;
-        }
-    };
+function createIntersectionObserver(options = {}, onIntersect = undefined, once = false) {
+	const { threshold = 0.5, rootMargin = '-10% 0px -10% 0px', root = null } = options;
+
+	let element = $state(null);
+	let isVisible = $state(false);
+	let hasTriggeredOnce = false;
+	/** @type {IntersectionObserver | null} */
+	let observer = null;
+
+	$effect(() => {
+		if (!element) return;
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					// For once-only behavior, check if already triggered
+					if (once && hasTriggeredOnce) return;
+
+					isVisible = entry.isIntersecting;
+					if (onIntersect) {
+						onIntersect(entry, entry.isIntersecting);
+					}
+
+					// Unobserve after first trigger if once=true
+					if (once && entry.isIntersecting) {
+						hasTriggeredOnce = true;
+						observer?.unobserve(entry.target);
+					}
+				});
+			},
+			{
+				threshold,
+				rootMargin,
+				root
+			}
+		);
+
+		observer.observe(element);
+
+		return () => {
+			observer?.disconnect();
+		};
+	});
+
+	return {
+		get element() {
+			return element;
+		},
+		set element(value) {
+			element = value;
+		},
+		get isVisible() {
+			return isVisible;
+		}
+	};
 }
+
 /**
- * Track element visibility with IntersectionObserver
- * Updates isVisible whenever visibility changes
- * @param options - IntersectionObserver configuration
- * @param onVisible - Optional callback when visibility changes
+ * @param {import('./types.js').IntersectionOptions} [options={}]
+ * @param {(isVisible: boolean) => void} [onVisible]
+ * @returns {import('./types.js').UseIntersectionReturn}
  */
 export function useIntersection(options = {}, onVisible) {
-    return createIntersectionObserver(options, (_entry, isVisible) => {
-        onVisible?.(isVisible);
-    }, false);
+	return createIntersectionObserver(
+		options,
+		(_entry, isVisible) => {
+			onVisible?.(isVisible);
+		},
+		false
+	);
 }
+
 /**
- * Track element visibility once (until first trigger)
- * Unobserves after first visibility
- * @param options - IntersectionObserver configuration
+ * @param {import('./types.js').IntersectionOptions} [options={}]
+ * @returns {import('./types.js').UseIntersectionReturn}
  */
 export function useIntersectionOnce(options = {}) {
-    return createIntersectionObserver(options, () => { }, true);
+	return createIntersectionObserver(options, () => {}, true);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rune-scroller",
-  "version": "1.0.0",
-  "description": "Lightweight, high-performance scroll animations for Svelte 5. ~2KB bundle, zero dependencies.",
+  "version": "2.1.0",
+  "description": "Lightweight, high-performance scroll animations for Svelte 5. 12.7KB gzipped, zero dependencies.",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/lelabdev/rune-scroller"
+    "url": "git+https://github.com/lelabdev/rune-scroller.git"
   },
   "keywords": [
     "svelte",
@@ -32,7 +32,9 @@
     "./animations.css": "./dist/animations.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "main": "./dist/index.js",
   "svelte": "./dist/index.js",
@@ -42,17 +44,17 @@
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "svelte-package && node scripts/fix-dist.js",
+    "build": "bunx svelte-package",
     "preview": "vite preview",
     "prepare": "svelte-kit sync || echo ''",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
-    "prepublishonly": "pnpm run check && pnpm run build",
-    "test:unit": "vitest",
-    "test": "npm run test:unit -- --run"
+    "prepublishonly": "bun run check && bun run build && bun test",
+    "test": "bun test"
   },
+  "packageManager": "bun@1.3.4",
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.36.0",
@@ -64,13 +66,13 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "globals": "^16.4.0",
+    "happy-dom": "^20.0.11",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "svelte": "^5.39.5",
     "svelte-check": "^4.3.2",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.1",
-    "vite": "^7.1.7",
-    "vitest": "^3.2.4"
+    "vite": "^7.1.7"
   }
 }

package/dist/BaseAnimated.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { useIntersection, useIntersectionOnce } from './useIntersection.svelte';
-	import { calculateRootMargin, type AnimationType } from './animations';
-	import './animations.css';
-
-	interface Props {
-		animation?: AnimationType;
-		threshold?: number;
-		rootMargin?: string;
-		offset?: number;
-		duration?: number;
-		delay?: number;
-		once?: boolean;
-		children: Snippet;
-	}
-
-	const {
-		animation = 'fade-in',
-		threshold = 0.5,
-		rootMargin,
-		offset,
-		duration = 800,
-		delay = 0,
-		once = false,
-		children
-	}: Props = $props();
-
-	// Calculate rootMargin from offset if provided
-	const finalRootMargin = calculateRootMargin(offset, rootMargin);
-
-	// Use appropriate composable based on once prop
-	const intersection = once
-		? useIntersectionOnce({ threshold, rootMargin: finalRootMargin })
-		: useIntersection({ threshold, rootMargin: finalRootMargin });
-</script>
-
-<div
-	bind:this={intersection.element}
-	class="scroll-animate"
-	class:is-visible={intersection.isVisible}
-	data-animation={animation}
-	style="--duration: {duration}ms; --delay: {delay}ms;"
->
-	{@render children()}
-</div>
-
-<!-- Styles are imported from animations.css -->

package/dist/BaseAnimated.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type AnimationType } from './animations';
-import './animations.css';
-interface Props {
-    animation?: AnimationType;
-    threshold?: number;
-    rootMargin?: string;
-    offset?: number;
-    duration?: number;
-    delay?: number;
-    once?: boolean;
-    children: Snippet;
-}
-declare const BaseAnimated: import("svelte").Component<Props, {}, "">;
-type BaseAnimated = ReturnType<typeof BaseAnimated>;
-export default BaseAnimated;

package/dist/RuneScroller.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { AnimationType } from './animations';
-	import BaseAnimated from './BaseAnimated.svelte';
-
-	interface Props {
-		animation?: AnimationType;
-		threshold?: number;
-		rootMargin?: string;
-		offset?: number;
-		duration?: number;
-		delay?: number;
-		repeat?: boolean;
-		children: Snippet;
-		[key: string]: any;
-	}
-
-	const {
-		animation = 'fade-in',
-		threshold = 0.5,
-		rootMargin,
-		offset,
-		duration = 800,
-		delay = 0,
-		repeat = false,
-		children,
-		...rest
-	}: Props = $props();
-</script>
-
-<!--
- * Wrapper component for scroll animations
- * Triggers animation based on repeat setting:
- * - repeat={false} (default): triggers once when element enters viewport
- * - repeat={true}: triggers each time element enters viewport
- -->
-<BaseAnimated {animation} {threshold} {rootMargin} {offset} {duration} {delay} once={!repeat} {children} {...rest} />

package/dist/RuneScroller.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { AnimationType } from './animations';
-interface Props {
-    animation?: AnimationType;
-    threshold?: number;
-    rootMargin?: string;
-    offset?: number;
-    duration?: number;
-    delay?: number;
-    repeat?: boolean;
-    children: Snippet;
-    [key: string]: any;
-}
-declare const RuneScroller: import("svelte").Component<Props, {}, "">;
-type RuneScroller = ReturnType<typeof RuneScroller>;
-export default RuneScroller;

package/dist/animate.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { Action } from 'svelte/action';
-import type { AnimateOptions } from './types';
-/**
- * Svelte action for scroll animations
- * Triggers animation once when element enters viewport
- *
- * @example
- * ```svelte
- * <div use:animate={{ animation: 'fade-up', duration: 1000 }}>
- *   Content
- * </div>
- * ```
- */
-export declare const animate: Action<HTMLElement, AnimateOptions>;

package/dist/animate.svelte.js

@@ -1,79 +0,0 @@
-import { calculateRootMargin } from './animations';
-import { setCSSVariables, setupAnimationElement } from './dom-utils.svelte';
-/**
- * Svelte action for scroll animations
- * Triggers animation once when element enters viewport
- *
- * @example
- * ```svelte
- * <div use:animate={{ animation: 'fade-up', duration: 1000 }}>
- *   Content
- * </div>
- * ```
- */
-export const animate = (node, options = {}) => {
-    let { animation = 'fade-in', duration = 800, delay = 0, offset, threshold = 0, rootMargin } = options;
-    // Calculate rootMargin from offset (0-100%)
-    let finalRootMargin = calculateRootMargin(offset, rootMargin);
-    // Setup animation with utilities
-    setupAnimationElement(node, animation);
-    setCSSVariables(node, duration, delay);
-    // Track if animation has been triggered
-    let animated = false;
-    let observerConnected = true;
-    // Create IntersectionObserver for one-time animation
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-            // Trigger animation once when element enters viewport
-            if (entry.isIntersecting && !animated) {
-                node.classList.add('is-visible');
-                animated = true;
-                // Stop observing after animation triggers
-                observer.unobserve(node);
-                observerConnected = false;
-            }
-        });
-    }, {
-        threshold,
-        rootMargin: finalRootMargin
-    });
-    observer.observe(node);
-    return {
-        update(newOptions) {
-            const { duration: newDuration, delay: newDelay, animation: newAnimation, offset: newOffset, threshold: newThreshold, rootMargin: newRootMargin } = newOptions;
-            // Update CSS properties
-            if (newDuration !== undefined) {
-                duration = newDuration;
-                setCSSVariables(node, duration, newDelay ?? delay);
-            }
-            if (newDelay !== undefined && newDelay !== delay) {
-                delay = newDelay;
-                setCSSVariables(node, duration, delay);
-            }
-            if (newAnimation && newAnimation !== animation) {
-                animation = newAnimation;
-                node.setAttribute('data-animation', newAnimation);
-            }
-            // Recreate observer if threshold or rootMargin changed
-            if (newThreshold !== undefined || newOffset !== undefined || newRootMargin !== undefined) {
-                if (observerConnected) {
-                    observer.disconnect();
-                    observerConnected = false;
-                }
-                threshold = newThreshold ?? threshold;
-                offset = newOffset ?? offset;
-                rootMargin = newRootMargin ?? rootMargin;
-                finalRootMargin = calculateRootMargin(offset, rootMargin);
-                if (!animated) {
-                    observer.observe(node);
-                    observerConnected = true;
-                }
-            }
-        },
-        destroy() {
-            if (observerConnected) {
-                observer.disconnect();
-            }
-        }
-    };
-};

package/dist/animations.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/animations.test.js

@@ -1,43 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { calculateRootMargin } from './animations';
-describe('calculateRootMargin', () => {
-    it('calculates rootMargin from offset (0-100%)', () => {
-        expect(calculateRootMargin(0)).toBe('-100% 0px -0% 0px');
-        expect(calculateRootMargin(50)).toBe('-50% 0px -50% 0px');
-        expect(calculateRootMargin(100)).toBe('-0% 0px -100% 0px');
-    });
-    it('uses custom rootMargin when provided', () => {
-        const custom = '-10% 0px -10% 0px';
-        expect(calculateRootMargin(50, custom)).toBe(custom);
-    });
-    it('uses default rootMargin when nothing provided', () => {
-        expect(calculateRootMargin()).toBe('-10% 0px -10% 0px');
-    });
-    it('prioritizes custom rootMargin over offset', () => {
-        const custom = '-20% 0px';
-        expect(calculateRootMargin(50, custom)).toBe(custom);
-        expect(calculateRootMargin(0, custom)).toBe(custom);
-    });
-});
-describe('AnimationType', () => {
-    it('includes all expected animation types', () => {
-        const validAnimations = [
-            'fade-in',
-            'fade-in-up',
-            'fade-in-down',
-            'fade-in-left',
-            'fade-in-right',
-            'zoom-in',
-            'zoom-out',
-            'zoom-in-up',
-            'zoom-in-left',
-            'zoom-in-right',
-            'flip',
-            'flip-x',
-            'slide-rotate',
-            'bounce-in'
-        ];
-        // If this compiles, all types are valid
-        expect(validAnimations.length).toBe(14);
-    });
-});

package/dist/dom-utils.svelte.d.ts

@@ -1,23 +0,0 @@
-import type { AnimationType } from './animations';
-/**
- * Set CSS custom properties on an element
- * @param element - Target DOM element
- * @param duration - Animation duration in milliseconds
- * @param delay - Animation delay in milliseconds
- */
-export declare function setCSSVariables(element: HTMLElement, duration?: number, delay?: number): void;
-/**
- * Setup animation element with required classes and attributes
- * @param element - Target DOM element
- * @param animation - Animation type to apply
- */
-export declare function setupAnimationElement(element: HTMLElement, animation: AnimationType): void;
-/**
- * Create sentinel element for observer-based triggering
- * Positioned absolutely relative to element (no layout impact)
- * @param element - Reference element (used to position sentinel)
- * @param debug - If true, shows the sentinel as a visible line for debugging
- * @param offset - Offset in pixels from element bottom (default: 0, negative = above element)
- * @returns The created sentinel element
- */
-export declare function createSentinel(element: HTMLElement, debug?: boolean, offset?: number): HTMLElement;

package/dist/dom-utils.svelte.js

@@ -1,48 +0,0 @@
-/**
- * Set CSS custom properties on an element
- * @param element - Target DOM element
- * @param duration - Animation duration in milliseconds
- * @param delay - Animation delay in milliseconds
- */
-export function setCSSVariables(element, duration, delay = 0) {
-    if (duration !== undefined) {
-        element.style.setProperty('--duration', `${duration}ms`);
-    }
-    element.style.setProperty('--delay', `${delay}ms`);
-}
-/**
- * Setup animation element with required classes and attributes
- * @param element - Target DOM element
- * @param animation - Animation type to apply
- */
-export function setupAnimationElement(element, animation) {
-    element.classList.add('scroll-animate');
-    element.setAttribute('data-animation', animation);
-}
-/**
- * Create sentinel element for observer-based triggering
- * Positioned absolutely relative to element (no layout impact)
- * @param element - Reference element (used to position sentinel)
- * @param debug - If true, shows the sentinel as a visible line for debugging
- * @param offset - Offset in pixels from element bottom (default: 0, negative = above element)
- * @returns The created sentinel element
- */
-export function createSentinel(element, debug = false, offset = 0) {
-    const sentinel = document.createElement('div');
-    // Get element dimensions to position sentinel at its bottom + offset
-    const rect = element.getBoundingClientRect();
-    const elementHeight = rect.height;
-    const sentinelTop = elementHeight + offset;
-    if (debug) {
-        // Debug mode: visible primary color line (cyan #00e0ff)
-        sentinel.style.cssText =
-            `position:absolute;top:${sentinelTop}px;left:0;right:0;height:3px;background:#00e0ff;margin:0;padding:0;box-sizing:border-box;z-index:999;pointer-events:none`;
-        sentinel.setAttribute('data-sentinel-debug', 'true');
-    }
-    else {
-        // Production: invisible positioned absolutely (no layout impact)
-        sentinel.style.cssText =
-            `position:absolute;top:${sentinelTop}px;left:0;right:0;height:1px;visibility:hidden;margin:0;padding:0;box-sizing:border-box;pointer-events:none`;
-    }
-    return sentinel;
-}

package/dist/runeScroller.svelte.d.ts

@@ -1,24 +0,0 @@
-import type { RuneScrollerOptions } from './types';
-/**
- * Action pour animer un élément au scroll avec un sentinel invisible juste en dessous
- * @param element - L'élément à animer
- * @param options - Options d'animation (animation type, duration, et repeat)
- * @returns Objet action Svelte
- *
- * @example
- * ```svelte
- * <!-- Animation une seule fois -->
- * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000 }}>
- *   Content
- * </div>
- *
- * <!-- Animation répétée à chaque scroll -->
- * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000, repeat: true }}>
- *   Content
- * </div>
- * ```
- */
-export declare function runeScroller(element: HTMLElement, options?: RuneScrollerOptions): {
-    update(newOptions?: RuneScrollerOptions): void;
-    destroy(): void;
-};

package/dist/runeScroller.svelte.js

@@ -1,83 +0,0 @@
-import { setCSSVariables, setupAnimationElement, createSentinel } from './dom-utils.svelte';
-/**
- * Action pour animer un élément au scroll avec un sentinel invisible juste en dessous
- * @param element - L'élément à animer
- * @param options - Options d'animation (animation type, duration, et repeat)
- * @returns Objet action Svelte
- *
- * @example
- * ```svelte
- * <!-- Animation une seule fois -->
- * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000 }}>
- *   Content
- * </div>
- *
- * <!-- Animation répétée à chaque scroll -->
- * <div use:runeScroller={{ animation: 'fade-in-up', duration: 1000, repeat: true }}>
- *   Content
- * </div>
- * ```
- */
-export function runeScroller(element, options) {
-    // Setup animation classes et variables CSS
-    if (options?.animation || options?.duration) {
-        setupAnimationElement(element, options.animation);
-        setCSSVariables(element, options.duration);
-    }
-    // Créer un wrapper div autour de l'élément pour le sentinel en position absolute
-    // Ceci évite de casser le flex/grid flow du parent
-    const wrapper = document.createElement('div');
-    wrapper.style.cssText = 'position:relative;display:contents';
-    // Insérer le wrapper avant l'élément
-    element.insertAdjacentElement('beforebegin', wrapper);
-    wrapper.appendChild(element);
-    // Créer le sentinel invisible (ou visible si debug=true)
-    // Sentinel positioned absolutely relative to wrapper
-    const sentinel = createSentinel(element, options?.debug, options?.offset);
-    wrapper.appendChild(sentinel);
-    // Observer le sentinel avec cleanup tracking
-    let observerConnected = true;
-    const observer = new IntersectionObserver((entries) => {
-        const isIntersecting = entries[0].isIntersecting;
-        if (isIntersecting) {
-            // Ajouter la classe is-visible à l'élément
-            element.classList.add('is-visible');
-            // Déconnecter si pas en mode repeat
-            if (!options?.repeat) {
-                observer.disconnect();
-                observerConnected = false;
-            }
-        }
-        else if (options?.repeat) {
-            // En mode repeat, retirer la classe quand le sentinel sort
-            element.classList.remove('is-visible');
-        }
-    }, { threshold: 0 });
-    observer.observe(sentinel);
-    return {
-        update(newOptions) {
-            if (newOptions?.animation) {
-                element.setAttribute('data-animation', newOptions.animation);
-            }
-            if (newOptions?.duration) {
-                setCSSVariables(element, newOptions.duration);
-            }
-            // Update repeat option
-            if (newOptions?.repeat !== undefined && newOptions.repeat !== options?.repeat) {
-                options = { ...options, repeat: newOptions.repeat };
-            }
-        },
-        destroy() {
-            if (observerConnected) {
-                observer.disconnect();
-            }
-            sentinel.remove();
-            // Unwrap element (move it out of wrapper)
-            const parent = wrapper.parentElement;
-            if (parent) {
-                wrapper.insertAdjacentElement('beforebegin', element);
-            }
-            wrapper.remove();
-        }
-    };
-}

package/dist/scroll-animate.test.d.ts

@@ -1 +0,0 @@
-export {};