@octanejs/spring 0.0.1

package/src/parallax.tsrx

@@ -0,0 +1,321 @@
+// Behavioral Octane port of @react-spring/parallax v10.1.2.
+import { raf } from '@react-spring/rafz';
+import { createContext, useContext, useImperativeHandle, useLayoutEffect, useState } from 'octane';
+import { config as configs, Controller, type SpringConfig } from './engine';
+
+type ConfigProp = SpringConfig | ((key: string) => SpringConfig);
+type RefObject<T> = { current: T | null };
+
+export interface StickyConfig {
+	start?: number;
+	end?: number;
+}
+
+export interface IParallaxLayer {
+	horizontal: boolean;
+	sticky?: StickyConfig;
+	isSticky: boolean;
+	setHeight(height: number, immediate?: boolean): void;
+	setPosition(height: number, scroll: number, immediate?: boolean): void;
+	stop(): void;
+}
+
+export interface IParallax {
+	config: ConfigProp;
+	horizontal: boolean;
+	busy: boolean;
+	space: number;
+	offset: number;
+	current: number;
+	controller: Controller<{ scroll: number }>;
+	layers: Set<IParallaxLayer>;
+	container: RefObject<HTMLDivElement>;
+	content: RefObject<HTMLDivElement>;
+	scrollTo(offset: number): void;
+	update(): void;
+	stop(): void;
+}
+
+export interface ParallaxProps {
+	pages: number;
+	config?: ConfigProp;
+	horizontal?: boolean;
+	enabled?: boolean;
+	innerStyle?: Record<string, unknown>;
+	ref?: RefObject<IParallax> | ((value: IParallax | null) => void);
+	style?: Record<string, unknown>;
+	children?: unknown;
+	[key: string]: unknown;
+}
+
+export interface ParallaxLayerProps {
+	horizontal?: boolean;
+	offset?: number;
+	speed?: number;
+	factor?: number;
+	sticky?: StickyConfig;
+	ref?: RefObject<IParallaxLayer> | ((value: IParallaxLayer | null) => void);
+	style?: Record<string, unknown>;
+	children?: unknown;
+	[key: string]: unknown;
+}
+
+interface ParallaxState extends IParallax {
+	enabled: boolean;
+	pages: number;
+}
+
+interface ParallaxLayerState extends IParallaxLayer {
+	factor: number;
+	offset: number;
+	speed: number;
+}
+
+const ParallaxContext = createContext<IParallax | null>(null);
+const START_TRANSLATE_3D = 'translate3d(0px,0px,0px)';
+
+function scrollProperty(horizontal: boolean): 'scrollLeft' | 'scrollTop' {
+	return horizontal ? 'scrollLeft' : 'scrollTop';
+}
+
+function updateLayerNode(
+	node: HTMLElement,
+	horizontal: boolean,
+	space: number,
+	translate: number,
+): void {
+	node.style[horizontal ? 'width' : 'height'] = `${space}px`;
+	node.style[horizontal ? 'height' : 'width'] = '100%';
+	node.style.transform = horizontal
+		? `translate3d(${translate}px,0,0)`
+		: `translate3d(0,${translate}px,0)`;
+}
+
+export function Parallax(props: any) @{
+	const {
+		pages,
+		config = configs.slow,
+		enabled = true,
+		horizontal = false,
+		innerStyle,
+		children,
+		ref: givenRef,
+		style,
+		...rest
+	} = props;
+	const [container] = useState<RefObject<HTMLDivElement>>(() => ({ current: null }));
+	const [content] = useState<RefObject<HTMLDivElement>>(() => ({ current: null }));
+	const [state] = useState<ParallaxState>(() => {
+		const controller = new Controller<{ scroll: number }>({ from: { scroll: 0 } });
+		const parallax: ParallaxState = {
+			config,
+			horizontal,
+			enabled,
+			pages,
+			busy: false,
+			space: 0,
+			offset: 0,
+			current: 0,
+			controller,
+			layers: new Set(),
+			container,
+			content,
+			update() {
+				const node = container.current;
+				if (node === null) return;
+				parallax.space = parallax.horizontal ? node.clientWidth : node.clientHeight;
+				const scroll = scrollProperty(parallax.horizontal);
+				if (parallax.enabled) parallax.current = node[scroll];
+				else node[scroll] = parallax.current = parallax.offset * parallax.space;
+				if (content.current !== null) {
+					content.current.style[parallax.horizontal ? 'width' : 'height'] = `${
+						parallax.space * parallax.pages
+					}px`;
+				}
+				for (const layer of parallax.layers) {
+					layer.setHeight(parallax.space, true);
+					layer.setPosition(parallax.space, parallax.current, true);
+				}
+			},
+			scrollTo(offset: number) {
+				const node = container.current;
+				if (node === null || !parallax.enabled) return;
+				parallax.offset = offset;
+				const scroll = scrollProperty(parallax.horizontal);
+				controller.set({ scroll: parallax.current });
+				controller.stop().start({
+					to: { scroll: offset * parallax.space },
+					config: parallax.config,
+					onChange(result) {
+						const value = result.value.scroll;
+						node[scroll] = value;
+						parallax.current = value;
+						for (const layer of parallax.layers) layer.setPosition(parallax.space, value, true);
+					},
+				});
+			},
+			stop() {
+				controller.stop();
+				parallax.busy = false;
+			},
+		};
+		return parallax;
+	});
+	state.config = config;
+	state.horizontal = horizontal;
+	state.enabled = enabled;
+	state.pages = pages;
+	useImperativeHandle(givenRef, () => state, []);
+
+	useLayoutEffect(() => {
+		const node = container.current;
+		if (node === null) return;
+		let live = true;
+		const onScroll = () => {
+			if (!enabled || state.busy) return;
+			state.busy = true;
+			state.current = node[scrollProperty(state.horizontal)];
+			raf.onStart(() => {
+				if (!live) return;
+				for (const layer of state.layers) layer.setPosition(state.space, state.current);
+				state.busy = false;
+			});
+		};
+		const onResize = () => state.update();
+		state.update();
+		node.addEventListener('scroll', onScroll, { passive: true });
+		const observer =
+			typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(onResize);
+		observer?.observe(node);
+		return () => {
+			live = false;
+			node.removeEventListener('scroll', onScroll);
+			observer?.disconnect();
+			state.stop();
+			for (const layer of state.layers) layer.stop();
+		};
+	}, [horizontal, enabled, pages]);
+
+	<div
+		{...rest}
+		ref={container}
+		onWheel={enabled ? state.stop : undefined}
+		onTouchStart={enabled ? state.stop : undefined}
+		style={{
+			position: 'absolute',
+			top: 0,
+			left: 0,
+			width: '100%',
+			height: '100%',
+			overflowY: enabled && !horizontal ? 'scroll' : 'hidden',
+			overflowX: enabled && horizontal ? 'scroll' : 'hidden',
+			WebkitOverflowScrolling: 'touch',
+			transform: START_TRANSLATE_3D,
+			...style,
+		}}
+	>
+		<div
+			ref={content}
+			style={{
+				overflow: 'hidden',
+				position: 'absolute',
+				width: horizontal ? `${state.space * pages}px` : '100%',
+				height: horizontal ? '100%' : `${state.space * pages}px`,
+				transform: START_TRANSLATE_3D,
+				...innerStyle,
+			}}
+		>
+			<ParallaxContext value={state}>{children}</ParallaxContext>
+		</div>
+	</div>
+}
+
+export function ParallaxLayer(props: any) @{
+	const {
+		horizontal: layerHorizontal,
+		factor = 1,
+		offset = 0,
+		speed = 0,
+		sticky,
+		ref: givenRef,
+		style,
+		children,
+		...rest
+	} = props;
+	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
+				? 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() {},
+		}),
+	);
+	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 };
+	useImperativeHandle(givenRef, () => layer, []);
+	useLayoutEffect(() => {
+		parent.layers.add(layer);
+		parent.update();
+		return () => {
+			parent.layers.delete(layer);
+			layer.stop();
+			parent.update();
+		};
+	}, [parent, offset, speed, factor, sticky?.start, sticky?.end, layerHorizontal]);
+
+	<div
+		{...rest}
+		ref={node}
+		style={{
+			position: 'absolute',
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0,
+			backgroundSize: 'auto',
+			backgroundRepeat: 'no-repeat',
+			willChange: 'transform',
+			transform: START_TRANSLATE_3D,
+			...style,
+		}}
+	>{children}</div>
+}

package/src/parallax.tsrx.d.ts

@@ -0,0 +1,60 @@
+import type { Controller, SpringConfig } from './engine';
+
+type ConfigProp = SpringConfig | ((key: string) => SpringConfig);
+type ElementRef<T> = { current: T | null };
+
+export interface StickyConfig {
+	start?: number;
+	end?: number;
+}
+
+export interface IParallaxLayer {
+	horizontal: boolean;
+	sticky?: StickyConfig;
+	isSticky: boolean;
+	setHeight(height: number, immediate?: boolean): void;
+	setPosition(height: number, scroll: number, immediate?: boolean): void;
+}
+
+export interface IParallax {
+	config: ConfigProp;
+	horizontal: boolean;
+	busy: boolean;
+	space: number;
+	offset: number;
+	current: number;
+	controller: Controller<{ scroll: number }>;
+	layers: Set<IParallaxLayer>;
+	container: ElementRef<HTMLDivElement>;
+	content: ElementRef<HTMLDivElement>;
+	scrollTo(offset: number): void;
+	update(): void;
+	stop(): void;
+}
+
+export interface ParallaxProps {
+	pages: number;
+	config?: ConfigProp;
+	horizontal?: boolean;
+	enabled?: boolean;
+	innerStyle?: Record<string, unknown>;
+	ref?: ElementRef<IParallax> | ((value: IParallax | null) => void);
+	style?: Record<string, unknown>;
+	children?: unknown;
+	[key: string]: unknown;
+}
+
+export interface ParallaxLayerProps {
+	horizontal?: boolean;
+	offset?: number;
+	speed?: number;
+	factor?: number;
+	sticky?: StickyConfig;
+	ref?: ElementRef<IParallaxLayer> | ((value: IParallaxLayer | null) => void);
+	style?: Record<string, unknown>;
+	children?: unknown;
+	[key: string]: unknown;
+}
+
+export declare function Parallax(props: ParallaxProps): unknown;
+export declare function ParallaxLayer(props: ParallaxLayerProps): unknown;

package/src/shared/FrameLoop.ts

@@ -0,0 +1,75 @@
+// Ported from react-spring v10.1.2 packages/shared/src/FrameLoop.ts.
+import { raf } from '@react-spring/rafz';
+
+export interface OpaqueAnimation {
+	idle: boolean;
+	priority: number;
+	advance(dt: number): void;
+}
+
+const startQueue = new Set<OpaqueAnimation>();
+let currentFrame: OpaqueAnimation[] = [];
+let previousFrame: OpaqueAnimation[] = [];
+let priority = 0;
+
+export const frameLoop = {
+	get idle(): boolean {
+		return startQueue.size === 0 && currentFrame.length === 0;
+	},
+	start(animation: OpaqueAnimation): void {
+		if (priority > animation.priority) {
+			startQueue.add(animation);
+			raf.onStart(flushStartQueue);
+		} else {
+			startSafely(animation);
+			raf(advance);
+		}
+	},
+	advance,
+	sort(animation: OpaqueAnimation): void {
+		if (priority) raf.onFrame(() => frameLoop.sort(animation));
+		else {
+			const index = currentFrame.indexOf(animation);
+			if (index >= 0) {
+				currentFrame.splice(index, 1);
+				startUnsafely(animation);
+			}
+		}
+	},
+	clear(): void {
+		currentFrame = [];
+		previousFrame = [];
+		startQueue.clear();
+	},
+};
+
+function flushStartQueue(): void {
+	startQueue.forEach(startSafely);
+	startQueue.clear();
+	raf(advance);
+}
+
+function startSafely(animation: OpaqueAnimation): void {
+	if (!currentFrame.includes(animation)) startUnsafely(animation);
+}
+
+function startUnsafely(animation: OpaqueAnimation): void {
+	const index = currentFrame.findIndex((other) => other.priority > animation.priority);
+	currentFrame.splice(index < 0 ? currentFrame.length : index, 0, animation);
+}
+
+function advance(dt: number): boolean {
+	const nextFrame = previousFrame;
+	for (const animation of currentFrame) {
+		priority = animation.priority;
+		if (!animation.idle) {
+			animation.advance(dt);
+			if (!animation.idle) nextFrame.push(animation);
+		}
+	}
+	priority = 0;
+	previousFrame = currentFrame;
+	previousFrame.length = 0;
+	currentFrame = nextFrame;
+	return currentFrame.length > 0;
+}

package/src/shared/createInterpolator.ts

@@ -0,0 +1,85 @@
+// Behavioral port of react-spring v10.1.2 packages/shared/src/createInterpolator.ts.
+import type {
+	EasingFunction,
+	ExtrapolateType,
+	InterpolatorConfig,
+	InterpolatorFn,
+} from '../types/index';
+import { createStringInterpolator } from './stringInterpolation';
+
+export function createInterpolator<Output>(
+	config: InterpolatorConfig<Output>,
+): InterpolatorFn<Output>;
+export function createInterpolator(
+	range: readonly number[],
+	output: readonly number[],
+	extrapolate?: ExtrapolateType,
+): InterpolatorFn<number>;
+export function createInterpolator<Output>(
+	range: InterpolatorConfig<Output> | readonly number[] | InterpolatorFn<Output>,
+	output?: readonly number[],
+	extrapolate?: ExtrapolateType,
+): InterpolatorFn<Output> {
+	if (typeof range === 'function') return range;
+	if (Array.isArray(range)) {
+		return createInterpolator({ range, output: output!, extrapolate }) as InterpolatorFn<Output>;
+	}
+	const config = range as InterpolatorConfig<Output>;
+	if (typeof config.output[0] === 'string') {
+		return createStringInterpolator(config as InterpolatorConfig<string>) as InterpolatorFn<Output>;
+	}
+	const outputRange = config.output as readonly number[];
+	const inputRange = config.range ?? [0, 1];
+	const easing = config.easing ?? ((value) => value);
+	return ((input: number) => {
+		const index = findRange(input, inputRange);
+		return interpolate(
+			input,
+			inputRange[index]!,
+			inputRange[index + 1]!,
+			outputRange[index]!,
+			outputRange[index + 1]!,
+			easing,
+			config.extrapolateLeft ?? config.extrapolate ?? 'extend',
+			config.extrapolateRight ?? config.extrapolate ?? 'extend',
+			config.map,
+		);
+	}) as unknown as InterpolatorFn<Output>;
+}
+
+function interpolate(
+	input: number,
+	inputMin: number,
+	inputMax: number,
+	outputMin: number,
+	outputMax: number,
+	easing: EasingFunction,
+	extrapolateLeft: ExtrapolateType,
+	extrapolateRight: ExtrapolateType,
+	map?: (value: number) => number,
+): number {
+	let result = map ? map(input) : input;
+	if (result < inputMin) {
+		if (extrapolateLeft === 'identity') return result;
+		if (extrapolateLeft === 'clamp') result = inputMin;
+	}
+	if (result > inputMax) {
+		if (extrapolateRight === 'identity') return result;
+		if (extrapolateRight === 'clamp') result = inputMax;
+	}
+	if (outputMin === outputMax) return outputMin;
+	if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax;
+	if (inputMin === -Infinity) result = -result;
+	else if (inputMax === Infinity) result -= inputMin;
+	else result = (result - inputMin) / (inputMax - inputMin);
+	result = easing(result);
+	if (outputMin === -Infinity) return -result;
+	if (outputMax === Infinity) return result + outputMin;
+	return result * (outputMax - outputMin) + outputMin;
+}
+
+function findRange(input: number, inputRange: readonly number[]): number {
+	let index = 1;
+	for (; index < inputRange.length - 1; index++) if (inputRange[index]! >= input) break;
+	return index - 1;
+}

package/src/shared/globals.ts

@@ -0,0 +1,7 @@
+// Mutable target globals adapted from react-spring v10.1.2 packages/shared/src/globals.ts.
+export const Globals = {
+	skipAnimation: false,
+	assign(values: { skipAnimation?: boolean }) {
+		if (values.skipAnimation !== undefined) this.skipAnimation = values.skipAnimation;
+	},
+};

package/src/shared/index.ts

@@ -0,0 +1,4 @@
+// React-free exports ported from @react-spring/shared v10.1.2.
+export * from './createInterpolator';
+export * from './FrameLoop';
+export * from './stringInterpolation';

package/src/shared/stringInterpolation.ts

@@ -0,0 +1,56 @@
+// Behavioral port of react-spring v10.1.2 packages/shared/src/stringInterpolation.ts.
+import type { InterpolatorConfig, InterpolatorFn } from '../types/index';
+import { createInterpolator } from './createInterpolator';
+
+const numberRegex = /[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g;
+const unitRegex = /[a-z%]+/i;
+const rgbaRegex = /rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)/g;
+
+export function createStringInterpolator(
+	config: InterpolatorConfig<string>,
+): InterpolatorFn<number, string> {
+	const output = config.output.slice();
+	// Number-less outputs (e.g. `none`) yield `[]` rather than throwing on a
+	// null match — see https://github.com/pmndrs/react-spring/issues/2327.
+	const tokens = output.map(function extractNumbers(value) {
+		return value.match(numberRegex) ?? [];
+	});
+	const outputRanges = tokens[0]!.map(function buildRange(_, index) {
+		return tokens.map(function valueAt(values) {
+			if (!(index in values)) throw new Error('The arity of each "output" value must be equal');
+			return Number(values[index]);
+		});
+	});
+	const interpolators = outputRanges.map((range) =>
+		createInterpolator({ ...config, output: range }),
+	);
+	const inputRange = config.range ?? [0, 1];
+	const decimalCounts = tokens[0]!.map((_, position) => {
+		const counts = tokens.map((values) => {
+			const token = values[position]!;
+			const dot = token.indexOf('.');
+			return dot < 0 ? 0 : token.length - dot - 1;
+		});
+		return counts.every((count) => count === counts[0]) && counts[0]! > 0 ? counts[0]! : null;
+	});
+	return ((input: number) => {
+		const keyframe = inputRange.indexOf(input);
+		if (keyframe >= 0) return output[keyframe]!;
+		const missingUnit = !unitRegex.test(output[0]!)
+			? output.find((value) => unitRegex.test(value))?.replace(numberRegex, '')
+			: undefined;
+		let position = 0;
+		return output[0]!
+			.replace(numberRegex, () => {
+				const index = position++;
+				const value = interpolators[index]!(input);
+				const decimals = decimalCounts[index];
+				return `${decimals == null ? value : value.toFixed(decimals)}${missingUnit ?? ''}`;
+			})
+			.replace(
+				rgbaRegex,
+				(_, r, g, b, alpha) =>
+					`rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`,
+			);
+	}) as unknown as InterpolatorFn<number, string>;
+}

package/src/spring-component.ts

@@ -0,0 +1,36 @@
+import { Spring as SpringImpl } from './components.tsrx';
+import type { Scope } from 'octane';
+import type { SpringValues } from './types/objects';
+import type {
+	ControllerUpdate,
+	NoInfer,
+	SpringChain,
+	SpringToFn,
+	UnknownProps,
+} from './types/index';
+
+type SpringComponentProps<State extends object = UnknownProps> = unknown &
+	ControllerUpdate<State> & {
+		children: (values: SpringValues<State>) => unknown;
+	};
+
+// Infer state from "from" object prop.
+export function Spring<State extends object>(
+	props: {
+		from: State;
+		to?: SpringChain<NoInfer<State>> | SpringToFn<NoInfer<State>>;
+	} & Omit<SpringComponentProps<NoInfer<State>>, 'from' | 'to'>,
+): unknown;
+
+// Infer state from "to" object prop.
+export function Spring<State extends object>(
+	props: { to: State } & Omit<SpringComponentProps<NoInfer<State>>, 'to'>,
+): unknown;
+
+export function Spring(props: any, scope?: Scope, extra?: unknown): unknown {
+	return (SpringImpl as (props: any, scope?: Scope, extra?: unknown) => unknown)(
+		props,
+		scope,
+		extra,
+	);
+}

package/src/types/animated.ts

@@ -0,0 +1,10 @@
+/** These types can be animated */
+export type Animatable<T = any> = T extends number
+	? number
+	: T extends string
+		? string
+		: T extends ReadonlyArray<number | string>
+			? Array<number | string> extends T
+				? ReadonlyArray<number | string>
+				: { [P in keyof T]: Animatable<T[P]> }
+			: never;

package/src/types/common.ts

@@ -0,0 +1,29 @@
+import type { Any, Remap } from './utils';
+import type { FluidValue } from './fluid';
+
+/** Replace the type of each `T` property with `never` (unless compatible with `U`) */
+export type Valid<T, U> = NeverProps<T, InvalidKeys<T, U>>;
+
+/** Replace the type of each `P` property with `never` */
+type NeverProps<T, P extends keyof T> = Remap<Pick<T, Exclude<keyof T, P>> & { [K in P]: never }>;
+
+/** Return a union type of every key whose `T` value is incompatible with its `U` value */
+type InvalidKeys<T, U> = {
+	[P in keyof T & keyof U]: T[P] extends U[P] ? never : P;
+}[keyof T & keyof U];
+
+/** Unwrap any `FluidValue` object types */
+export type RawValues<T extends object> = {
+	[P in keyof T]: T[P] extends FluidValue<infer U> ? U : T[P];
+};
+
+/**
+ * For testing whether a type is an object but not an array.
+ *
+ *     T extends IsPlainObject<T> ? true : false
+ *
+ * When `any` is passed, the resolved type is `true | false`.
+ */
+export type IsPlainObject<T> = T extends ReadonlyArray<any> ? Any : T extends object ? object : Any;
+
+export type StringKeys<T> = T extends IsPlainObject<T> ? string & keyof T : string;

package/src/types/fluid.ts

@@ -0,0 +1,9 @@
+// Minimal FluidValue typing surface for public prop inference (runtime uses FrameValue).
+
+export abstract class FluidValue<T = any> {
+	abstract get(): T;
+}
+
+export type FluidProps<T> = T extends object
+	? { [P in keyof T]: T[P] | FluidValue<Exclude<T[P], void>> }
+	: unknown;