rune-scroller 0.1.11 → 2.0.0

package/dist/useIntersection.svelte.js

@@ -1,75 +1,96 @@
-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={}] - IntersectionObserver configuration
+ * @param {((entry: IntersectionObserverEntry, isVisible: boolean) => void) | undefined} onIntersect - Callback handler for intersection changes
+ * @param {boolean} [once=false] - Whether to trigger only once
+ * @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={}] - IntersectionObserver configuration
+ * @param {(isVisible: boolean) => void} [onVisible] - Optional callback when visibility changes
+ * @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={}] - IntersectionObserver configuration
+ * @returns {import('./types.js').UseIntersectionReturn}
  */
 export function useIntersectionOnce(options = {}) {
-    return createIntersectionObserver(options, () => { }, true);
+	return createIntersectionObserver(options, () => {}, true);
 }

package/dist/useIntersection.test.d.ts

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

package/dist/useIntersection.test.js

@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach, afterEach } from 'bun:test';
+
+/**
+ * Structural tests for useIntersection and useIntersectionOnce composables
+ *
+ * Note: Full functional testing requires Svelte 5 runtime environment.
+ * These composables use Svelte runes ($state) and onMount hook which cannot
+ * be tested outside of a Svelte component context.
+ *
+ * These tests verify:
+ * - Module exports exist
+ * - File structure is valid
+ * - No syntax errors when imported
+ */
+describe('useIntersection Composable', () => {
+	let useIntersection;
+	let useIntersectionOnce;
+
+	beforeEach(() => {
+		// Import composables
+		const module = require('./useIntersection.svelte.js');
+		useIntersection = module.useIntersection;
+		useIntersectionOnce = module.useIntersectionOnce;
+	});
+
+	describe('Module Exports', () => {
+		it('exports useIntersection function', () => {
+			expect(useIntersection).toBeDefined();
+			expect(typeof useIntersection).toBe('function');
+		});
+
+		it('exports useIntersectionOnce function', () => {
+			expect(useIntersectionOnce).toBeDefined();
+			expect(typeof useIntersectionOnce).toBe('function');
+		});
+
+		it('both exports are functions', () => {
+			expect(typeof useIntersection).toBe('function');
+			expect(typeof useIntersectionOnce).toBe('function');
+		});
+	});
+
+	describe('File Structure and Syntax', () => {
+		it('module is importable without errors', () => {
+			expect(() => {
+				require('./useIntersection.svelte.js');
+			}).not.toThrow();
+		});
+
+		it('has proper JSDoc comments', () => {
+			// This verifies the file has documentation
+			const fs = require('fs');
+			const { fileURLToPath } = require('url');
+			const { dirname } = require('path');
+			const __filename = fileURLToPath(import.meta.url);
+			const __dirname = dirname(__filename);
+			const filePath = `${__dirname}/useIntersection.svelte.js`;
+			const content = fs.readFileSync(filePath, 'utf8');
+			expect(content).toContain('@param');
+			expect(content).toContain('Composable');
+		});
+
+		it('uses Svelte 5 runes correctly', () => {
+			const fs = require('fs');
+			const { fileURLToPath } = require('url');
+			const { dirname } = require('path');
+			const __filename = fileURLToPath(import.meta.url);
+			const __dirname = dirname(__filename);
+			const filePath = `${__dirname}/useIntersection.svelte.js`;
+			const content = fs.readFileSync(filePath, 'utf8');
+			expect(content).toContain('$state');
+			expect(content).toContain('$effect');
+		});
+	});
+
+	describe('Integration Notes', () => {
+		it('documentation indicates Svelte environment requirement', () => {
+			const fs = require('fs');
+			const { fileURLToPath } = require('url');
+			const { dirname } = require('path');
+			const __filename = fileURLToPath(import.meta.url);
+			const __dirname = dirname(__filename);
+			const filePath = `${__dirname}/useIntersection.svelte.js`;
+			const content = fs.readFileSync(filePath, 'utf8');
+			// Should mention IntersectionObserver usage
+			expect(content).toContain('IntersectionObserver');
+			// Should mention $effect lifecycle (Svelte 5 best practice)
+			expect(content).toContain('$effect');
+		});
+
+		it('exports are accessible for import', () => {
+			// Verify we can destructure the exports
+			const { useIntersection, useIntersectionOnce } = require('./useIntersection.svelte.js');
+			expect(useIntersection).toBeDefined();
+			expect(useIntersectionOnce).toBeDefined();
+		});
+	});
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rune-scroller",
-  "version": "0.1.11",
-  "description": "Lightweight, high-performance scroll animations for Svelte 5. ~2KB bundle, zero dependencies.",
+  "version": "2.0.0",
+  "description": "Lightweight, high-performance scroll animations for Svelte 5. ~3.4KB 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",
@@ -40,6 +40,19 @@
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "bunx svelte-package",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "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": "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",
@@ -51,25 +64,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"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "svelte-package && node scripts/fix-dist.js",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.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"
+    "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/dom-utils.svelte.d.ts

@@ -1,22 +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 after element, stays fixed while element animates
- * @param element - Reference element (used to position sentinel at its bottom)
- * @param debug - If true, shows the sentinel as a visible line for debugging
- * @returns The created sentinel element
- */
-export declare function createSentinel(element: HTMLElement, debug?: boolean): HTMLElement;

package/dist/dom-utils.svelte.js

@@ -1,46 +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 after element, stays fixed while element animates
- * @param element - Reference element (used to position sentinel at its bottom)
- * @param debug - If true, shows the sentinel as a visible line for debugging
- * @returns The created sentinel element
- */
-export function createSentinel(element, debug = false) {
-    const sentinel = document.createElement('div');
-    // Get element dimensions to position sentinel at its bottom
-    const rect = element.getBoundingClientRect();
-    const elementHeight = rect.height;
-    if (debug) {
-        // Debug mode: visible primary color line (cyan #00e0ff)
-        sentinel.style.cssText =
-            `position:absolute;top:${elementHeight}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:${elementHeight}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;
-};