Merge branch 'dev'

Author: rootEnginear

jsr.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rootenginear/svelte-action-motionone",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"exports": "./src/lib/index.ts",
 	"publish": {
 		"include": ["./src/lib/**/*", "./LICENSE", "./README.md", "./package.json", "./jsr.json"]

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rootenginear/svelte-action-motionone",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"description": "Unofficial Svelte Action for Motion One animation library",
 	"scripts": {
 		"dev": "vite dev",
@@ -25,7 +25,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^4 || ^5"
 	},
 	"devDependencies": {
 		"@shikijs/langs": "^3.2.2",

src/components/Sections/Intro.svelte

@@ -40,5 +40,5 @@ scroll(onScroll, options)`}
 <div use:scroll={(node) => [onScroll, options]} />`}
 	/>
 
-	<p class="mt-8"><strong>Compatibility:</strong> Svelte 4, Motion 12</p>
+	<p class="mt-8"><strong>Compatibility:</strong> Svelte 4/5, Motion 12</p>
 </section>

src/lib/actions/hover.ts

@@ -5,13 +5,30 @@ type HoverParams =
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	Parameters<typeof motionHover> extends [infer _, ...infer Params] ? Params : never;
 
+/**
+ * Type for typing the parameters of the `hover` action.
+ *
+ * [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * const hoverParams = [onHoverStart, options] satisfies HoverActionParams
+ * // <div use:hover={hoverParams} />
+ */
 export type HoverActionParams = HoverParams | ((node: HTMLElement) => HoverParams);
 
 const createHover = (node: HTMLElement) => (params: HoverActionParams) => {
 	const [onHoverStart, options] = typeof params === 'function' ? params(node) : params;
 	return motionHover(node, onHoverStart, options);
 };
 
+/**
+ * Motion's `hover(elementOrSelector, onHoverStart, options)` equivalent.
+ * - [📑 Read Documentation](https://rootenginear.github.io/svelte-action-motionone/#use-hover)
+ * - [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * <div use:hover={[onHoverStart, options]} />
+ * @example
+ * <div use:hover={(node) => [onHoverStart, options]} />
+ */
 export const hover: Action<HTMLElement, HoverActionParams> = (node, params) => {
 	const instanceHover = createHover(node);
 	let stop = instanceHover(params);

src/lib/actions/inView.ts

@@ -5,13 +5,30 @@ type InViewParams =
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	Parameters<typeof motionInView> extends [infer _, ...infer Params] ? Params : never;
 
+/**
+ * Type for typing the parameters of the `inView` action.
+ *
+ * [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * const inViewParams = [onStart, options] satisfies InViewActionParams
+ * // <div use:inView={inViewParams} />
+ */
 export type InViewActionParams = InViewParams | ((node: HTMLElement) => InViewParams);
 
 const createInView = (node: HTMLElement) => (params: InViewActionParams) => {
 	const [onStart, options] = typeof params === 'function' ? params(node) : params;
 	return motionInView(node, onStart, options);
 };
 
+/**
+ * Motion's `inView(elementOrSelector, onStart, options)` equivalent.
+ * - [📑 Read Documentation](https://rootenginear.github.io/svelte-action-motionone/#use-in-view)
+ * - [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * <div use:inView={[onStart, options]} />
+ * @example
+ * <div use:inView={(node) => [onStart, options]} />
+ */
 export const inView: Action<HTMLElement, InViewActionParams> = (node, params) => {
 	const instanceInView = createInView(node);
 	let stop = instanceInView(params);

src/lib/actions/press.ts

@@ -5,13 +5,30 @@ type PressParams =
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	Parameters<typeof motionPress> extends [infer _, ...infer Params] ? Params : never;
 
+/**
+ * Type for typing the parameters of the `press` action.
+ *
+ * [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * const pressParams = [onPressStart, options] satisfies PressActionParams
+ * // <div use:press={pressParams} />
+ */
 export type PressActionParams = PressParams | ((node: HTMLElement) => PressParams);
 
 const createPress = (node: HTMLElement) => (params: PressActionParams) => {
 	const [onPressStart, options] = typeof params === 'function' ? params(node) : params;
 	return motionPress(node, onPressStart, options);
 };
 
+/**
+ * Motion's `press(elementOrSelector, onPressStart, options)` equivalent.
+ * - [📑 Read Documentation](https://rootenginear.github.io/svelte-action-motionone/#use-press)
+ * - [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * <div use:press={[onPressStart, options]} />
+ * @example
+ * <div use:press={(node) => [onPressStart, options]} />
+ */
 export const press: Action<HTMLElement, PressActionParams> = (node, params) => {
 	const instancePress = createPress(node);
 	let stop = instancePress(params);

src/lib/actions/scroll.ts

@@ -1,15 +1,32 @@
 import { scroll as motionScroll } from 'motion';
 import type { Action } from 'svelte/action';
 
-export type ScrollParams = Parameters<typeof motionScroll>;
+type ScrollParams = Parameters<typeof motionScroll>;
 
+/**
+ * Type for typing the parameters of the `scroll` action.
+ *
+ * [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * const scrollParams = [onScroll, options] satisfies ScrollActionParams
+ * // <div use:scroll={scrollParams} />
+ */
 export type ScrollActionParams = ScrollParams | ((node: HTMLElement) => ScrollParams);
 
 const createScroll = (node: HTMLElement) => (params: ScrollActionParams) => {
 	const [onScroll, options] = typeof params === 'function' ? params(node) : params;
 	return motionScroll(onScroll, options);
 };
 
+/**
+ * Motion's `scroll(onScroll, options)` equivalent.
+ * - [📑 Read Documentation](https://rootenginear.github.io/svelte-action-motionone/#use-scroll)
+ * - [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * <div use:scroll={[onScroll, options]} />
+ * @example
+ * <div use:scroll={(node) => [onScroll, options]} />
+ */
 export const scroll: Action<HTMLElement, ScrollActionParams> = (node, params) => {
 	const instanceScroll = createScroll(node);
 	let stop = instanceScroll(params);
@@ -33,6 +50,18 @@ const createContainerScroll = (node: HTMLElement) => (params: ScrollActionParams
 	});
 };
 
+/**
+ * Watch the scroll of that element. It's a shortcut for:
+ * ```svelte
+ * <div use:scroll={(node) => [..., { container: node }]} />
+ * ```
+ * - [📑 Read Documentation](https://rootenginear.github.io/svelte-action-motionone/#use-container-scroll)
+ * - [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * <div use:containerScroll={[onScroll, options]} />
+ * @example
+ * <div use:containerScroll={(node) => [onScroll, options]} />
+ */
 export const containerScroll: Action<HTMLElement, ScrollActionParams> = (node, params) => {
 	const instanceScroll = createContainerScroll(node);
 	let stop = instanceScroll(params);
@@ -56,6 +85,18 @@ const createScrollInView = (node: HTMLElement) => (params: ScrollActionParams) =
 	});
 };
 
+/**
+ * Watch the progress of that element in viewport. It's a shortcut for:
+ * ```svelte
+ * <div use:scroll={(node) => [..., { target: node }]} />
+ * ```
+ * - [📑 Read Documentation](https://rootenginear.github.io/svelte-action-motionone/#use-scroll-in-view)
+ * - [👍 Read Best Practices](https://rootenginear.github.io/svelte-action-motionone/#best-practices)
+ * @example
+ * <div use:scrollInView={[onScroll, options]} />
+ * @example
+ * <div use:scrollInView={(node) => [onScroll, options]} />
+ */
 export const scrollInView: Action<HTMLElement, ScrollActionParams> = (node, params) => {
 	const instanceScroll = createScrollInView(node);
 	let stop = instanceScroll(params);