@octanejs/spring 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/spring",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -43,7 +43,7 @@
     "@react-spring/rafz": "10.1.2"
   },
   "peerDependencies": {
-    "octane": "^0.10.0"
+    "octane": "^0.11.0"
   },
   "devDependencies": {
     "@react-spring/animated": "10.1.2",
@@ -57,7 +57,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitest/browser-playwright": "4.1.10",
     "flush-microtasks": "1.0.1",
-    "octane": "0.10.2",
+    "octane": "0.11.0",
     "playwright": "^1.61.1",
     "react": "19.2.7",
     "react-dom": "19.2.7",

package/src/components.tsrx

@@ -7,8 +7,9 @@ import {
 import { useSpring, useTrail, useTransition } from './hooks';
 
 function itemKey(item: any, index: number): string | number {
-	return item?.key ?? item?.id ??
-		(typeof item === 'string' || typeof item === 'number' ? item : index);
+	return (
+		item?.key ?? item?.id ?? (typeof item === 'string' || typeof item === 'number' ? item : index)
+	);
 }
 
 function keyed(value: unknown, key: string | number): unknown {
@@ -24,9 +25,7 @@ export function SpringContext(props: SpringContextValue & { children?: unknown }
 export function Spring(props: Record<string, unknown> & { children?: unknown }) @{
 	const { children, ...update } = props;
 	const styles = useSpring(update);
-	<>
-		{typeof children === 'function' && !isChildrenBlock(children) ? children(styles) : children}
-	</>
+	<>{typeof children === 'function' && !isChildrenBlock(children) ? children(styles) : children}</>
 }
 
 export function Trail(props: any) @{
@@ -34,11 +33,8 @@ export function Trail(props: any) @{
 	const styles = useTrail(items.length, update);
 	<>
 		{typeof children === 'function' && !isChildrenBlock(children)
-			? items.map(
-					(item: any, index: number) => keyed(
-						children(item, index)(styles[index]),
-						itemKey(item, index),
-					),
+			? items.map((item: any, index: number) =>
+					keyed(children(item, index)(styles[index]), itemKey(item, index)),
 				)
 			: children}
 	</>
@@ -49,11 +45,8 @@ export function Transition(props: any) @{
 	const transitions = useTransition(items, update);
 	<>
 		{typeof children === 'function' && !isChildrenBlock(children)
-			? transitions(
-					(styles: any, item: any, transition: any, index: number) => keyed(
-						children(item, index)(styles),
-						transition.key,
-					),
+			? transitions((styles: any, item: any, transition: any, index: number) =>
+					keyed(children(item, index)(styles), transition.key),
 				)
 			: children}
 	</>

package/src/parallax.tsrx

@@ -184,8 +184,7 @@ export function Parallax(props: any) @{
 		const onResize = () => state.update();
 		state.update();
 		node.addEventListener('scroll', onScroll, { passive: true });
-		const observer =
-			typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(onResize);
+		const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(onResize);
 		observer?.observe(node);
 		return () => {
 			live = false;
@@ -245,52 +244,52 @@ export function ParallaxLayer(props: any) @{
 	const parent = useContext(ParallaxContext);
 	if (parent === null) throw new Error('ParallaxLayer must be rendered inside Parallax');
 	const [node] = useState<RefObject<HTMLDivElement>>(() => ({ current: null }));
-	const [layer] = useState<ParallaxLayerState>(
-		() => ({
-			horizontal: layerHorizontal === undefined || sticky ? parent.horizontal : layerHorizontal,
-			factor,
-			offset,
-			speed,
-			sticky: sticky === undefined
+	const [layer] = useState<ParallaxLayerState>(() => ({
+		horizontal: layerHorizontal === undefined || sticky ? parent.horizontal : layerHorizontal,
+		factor,
+		offset,
+		speed,
+		sticky:
+			sticky === undefined
 				? undefined
 				: { start: sticky.start ?? 0, end: sticky.end ?? (sticky.start ?? 0) + 1 },
-			isSticky: false,
-			setHeight(height) {
-				if (node.current === null) return;
-				const size = layer.sticky ? height : height * layer.factor;
-				node.current.style[layer.horizontal ? 'width' : 'height'] = `${size}px`;
-			},
-			setPosition(height, scroll) {
-				const element = node.current;
-				if (element === null) return;
-				let translate: number;
-				if (layer.sticky) {
-					const start = (layer.sticky.start ?? 0) * height;
-					const end = (layer.sticky.end ?? layer.sticky.start ?? 0) * height;
-					layer.isSticky = scroll >= start && scroll <= end;
-					element.style.position = layer.isSticky ? 'sticky' : 'absolute';
-					translate = layer.isSticky ? 0 : scroll < start ? start : end;
-				} else {
-					const targetScroll = Math.floor(layer.offset) * height;
-					translate = -(scroll * layer.speed) + height * layer.offset + targetScroll * layer.speed;
-				}
-				updateLayerNode(
-					element,
-					layer.horizontal,
-					layer.sticky ? height : height * layer.factor,
-					translate,
-				);
-			},
-			stop() {},
-		}),
-	);
+		isSticky: false,
+		setHeight(height) {
+			if (node.current === null) return;
+			const size = layer.sticky ? height : height * layer.factor;
+			node.current.style[layer.horizontal ? 'width' : 'height'] = `${size}px`;
+		},
+		setPosition(height, scroll) {
+			const element = node.current;
+			if (element === null) return;
+			let translate: number;
+			if (layer.sticky) {
+				const start = (layer.sticky.start ?? 0) * height;
+				const end = (layer.sticky.end ?? layer.sticky.start ?? 0) * height;
+				layer.isSticky = scroll >= start && scroll <= end;
+				element.style.position = layer.isSticky ? 'sticky' : 'absolute';
+				translate = layer.isSticky ? 0 : scroll < start ? start : end;
+			} else {
+				const targetScroll = Math.floor(layer.offset) * height;
+				translate = -(scroll * layer.speed) + height * layer.offset + targetScroll * layer.speed;
+			}
+			updateLayerNode(
+				element,
+				layer.horizontal,
+				layer.sticky ? height : height * layer.factor,
+				translate,
+			);
+		},
+		stop() {},
+	}));
 	layer.horizontal = layerHorizontal === undefined || sticky ? parent.horizontal : layerHorizontal;
 	layer.factor = factor;
 	layer.offset = offset;
 	layer.speed = speed;
-	layer.sticky = sticky === undefined
-		? undefined
-		: { start: sticky.start ?? 0, end: sticky.end ?? (sticky.start ?? 0) + 1 };
+	layer.sticky =
+		sticky === undefined
+			? undefined
+			: { start: sticky.start ?? 0, end: sticky.end ?? (sticky.start ?? 0) + 1 };
 	useImperativeHandle(givenRef, () => layer, []);
 	useLayoutEffect(() => {
 		parent.layers.add(layer);
@@ -317,5 +316,7 @@ export function ParallaxLayer(props: any) @{
 			transform: START_TRANSLATE_3D,
 			...style,
 		}}
-	>{children}</div>
+	>
+		{children}
+	</div>
 }