main repo

This commit is contained in:
Basilosaurusrex
2025-11-24 18:09:40 +01:00
parent b636ee5e70
commit f027651f9b
34146 changed files with 4436636 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
import { warnOnce } from 'motion-utils';
import { useScroll } from '../use-scroll.mjs';
/**
* @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
*/
function useElementScroll(ref) {
if (process.env.NODE_ENV === "development") {
warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
}
return useScroll({ container: ref });
}
export { useElementScroll };

View File

@@ -0,0 +1,14 @@
import { warnOnce } from 'motion-utils';
import { useScroll } from '../use-scroll.mjs';
/**
* @deprecated useViewportScroll is deprecated. Convert to useScroll()
*/
function useViewportScroll() {
if (process.env.NODE_ENV !== "production") {
warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
}
return useScroll();
}
export { useViewportScroll };

View File

@@ -0,0 +1,38 @@
"use client";
import { cancelFrame, frame } from 'motion-dom';
import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
import { useMotionValue } from './use-motion-value.mjs';
function useCombineMotionValues(values, combineValues) {
/**
* Initialise the returned motion value. This remains the same between renders.
*/
const value = useMotionValue(combineValues());
/**
* Create a function that will update the template motion value with the latest values.
* This is pre-bound so whenever a motion value updates it can schedule its
* execution in Framesync. If it's already been scheduled it won't be fired twice
* in a single frame.
*/
const updateValue = () => value.set(combineValues());
/**
* Synchronously update the motion value with the latest values during the render.
* This ensures that within a React render, the styles applied to the DOM are up-to-date.
*/
updateValue();
/**
* Subscribe to all motion values found within the template. Whenever any of them change,
* schedule an update.
*/
useIsomorphicLayoutEffect(() => {
const scheduleUpdate = () => frame.preRender(updateValue, false, true);
const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
return () => {
subscriptions.forEach((unsubscribe) => unsubscribe());
cancelFrame(updateValue);
};
});
return value;
}
export { useCombineMotionValues };

View File

@@ -0,0 +1,20 @@
"use client";
import { collectMotionValues } from 'motion-dom';
import { useCombineMotionValues } from './use-combine-values.mjs';
function useComputed(compute) {
/**
* Open session of collectMotionValues. Any MotionValue that calls get()
* will be saved into this array.
*/
collectMotionValues.current = [];
compute();
const value = useCombineMotionValues(collectMotionValues.current, compute);
/**
* Synchronously close session of collectMotionValues.
*/
collectMotionValues.current = undefined;
return value;
}
export { useComputed };

View File

@@ -0,0 +1,53 @@
"use client";
import { invariant, warning } from 'motion-utils';
import { useContext } from 'react';
import { MotionContext } from '../context/MotionContext/index.mjs';
import { useMotionValue } from './use-motion-value.mjs';
import { useTransform } from './use-transform.mjs';
// Keep things reasonable and avoid scale: Infinity. In practise we might need
// to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
// to simply hide content at unreasonable scales.
const maxScale = 100000;
const invertScale = (scale) => scale > 0.001 ? 1 / scale : maxScale;
let hasWarned = false;
/**
* Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
* of their respective parent scales.
*
* This is useful for undoing the distortion of content when scaling a parent component.
*
* By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
* By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
* of those instead.
*
* ```jsx
* const MyComponent = () => {
* const { scaleX, scaleY } = useInvertedScale()
* return <motion.div style={{ scaleX, scaleY }} />
* }
* ```
*
* @deprecated
*/
function useInvertedScale(scale) {
let parentScaleX = useMotionValue(1);
let parentScaleY = useMotionValue(1);
const { visualElement } = useContext(MotionContext);
invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
hasWarned = true;
if (scale) {
parentScaleX = scale.scaleX || parentScaleX;
parentScaleY = scale.scaleY || parentScaleY;
}
else if (visualElement) {
parentScaleX = visualElement.getValue("scaleX", 1);
parentScaleY = visualElement.getValue("scaleY", 1);
}
const scaleX = useTransform(parentScaleX, invertScale);
const scaleY = useTransform(parentScaleY, invertScale);
return { scaleX, scaleY };
}
export { invertScale, useInvertedScale };

View File

@@ -0,0 +1,46 @@
"use client";
import { isMotionValue } from 'motion-dom';
import { useCombineMotionValues } from './use-combine-values.mjs';
/**
* Combine multiple motion values into a new one using a string template literal.
*
* ```jsx
* import {
* motion,
* useSpring,
* useMotionValue,
* useMotionTemplate
* } from "framer-motion"
*
* function Component() {
* const shadowX = useSpring(0)
* const shadowY = useMotionValue(0)
* const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
*
* return <motion.div style={{ filter: shadow }} />
* }
* ```
*
* @public
*/
function useMotionTemplate(fragments, ...values) {
/**
* Create a function that will build a string from the latest motion values.
*/
const numFragments = fragments.length;
function buildValue() {
let output = ``;
for (let i = 0; i < numFragments; i++) {
output += fragments[i];
const value = values[i];
if (value) {
output += isMotionValue(value) ? value.get() : value;
}
}
return output;
}
return useCombineMotionValues(values.filter(isMotionValue), buildValue);
}
export { useMotionTemplate };

View File

@@ -0,0 +1,39 @@
"use client";
import { motionValue } from 'motion-dom';
import { useContext, useState, useEffect } from 'react';
import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
import { useConstant } from '../utils/use-constant.mjs';
/**
* Creates a `MotionValue` to track the state and velocity of a value.
*
* Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
*
* ```jsx
* export const MyComponent = () => {
* const scale = useMotionValue(1)
*
* return <motion.div style={{ scale }} />
* }
* ```
*
* @param initial - The initial state.
*
* @public
*/
function useMotionValue(initial) {
const value = useConstant(() => motionValue(initial));
/**
* If this motion value is being used in static mode, like on
* the Framer canvas, force components to rerender when the motion
* value is updated.
*/
const { isStatic } = useContext(MotionConfigContext);
if (isStatic) {
const [, setLatest] = useState(initial);
useEffect(() => value.on("change", setLatest), []);
}
return value;
}
export { useMotionValue };

View File

@@ -0,0 +1,62 @@
"use client";
import { motionValue } from 'motion-dom';
import { invariant } from 'motion-utils';
import { useRef, useCallback, useEffect } from 'react';
import { scroll } from '../render/dom/scroll/index.mjs';
import { useConstant } from '../utils/use-constant.mjs';
import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
const createScrollMotionValues = () => ({
scrollX: motionValue(0),
scrollY: motionValue(0),
scrollXProgress: motionValue(0),
scrollYProgress: motionValue(0),
});
const isRefPending = (ref) => {
if (!ref)
return false;
return !ref.current;
};
function useScroll({ container, target, ...options } = {}) {
const values = useConstant(createScrollMotionValues);
const scrollAnimation = useRef(null);
const needsStart = useRef(false);
const start = useCallback(() => {
scrollAnimation.current = scroll((_progress, { x, y, }) => {
values.scrollX.set(x.current);
values.scrollXProgress.set(x.progress);
values.scrollY.set(y.current);
values.scrollYProgress.set(y.progress);
}, {
...options,
container: container?.current || undefined,
target: target?.current || undefined,
});
return () => {
scrollAnimation.current?.();
};
}, [container, target, JSON.stringify(options.offset)]);
useIsomorphicLayoutEffect(() => {
needsStart.current = false;
if (isRefPending(container) || isRefPending(target)) {
needsStart.current = true;
return;
}
else {
return start();
}
}, [start]);
useEffect(() => {
if (needsStart.current) {
invariant(!isRefPending(container), "Container ref is defined but not hydrated", "use-scroll-ref");
invariant(!isRefPending(target), "Target ref is defined but not hydrated", "use-scroll-ref");
return start();
}
else {
return;
}
}, [start]);
return values;
}
export { useScroll };

View File

@@ -0,0 +1,22 @@
"use client";
import { attachSpring, isMotionValue } from 'motion-dom';
import { useContext, useInsertionEffect } from 'react';
import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
import { useMotionValue } from './use-motion-value.mjs';
import { useTransform } from './use-transform.mjs';
function useSpring(source, options = {}) {
const { isStatic } = useContext(MotionConfigContext);
const getFromSource = () => (isMotionValue(source) ? source.get() : source);
// isStatic will never change, allowing early hooks return
if (isStatic) {
return useTransform(getFromSource);
}
const value = useMotionValue(getFromSource());
useInsertionEffect(() => {
return attachSpring(value, source, options);
}, [value, JSON.stringify(options)]);
return value;
}
export { useSpring };

11
node_modules/framer-motion/dist/es/value/use-time.mjs generated vendored Normal file
View File

@@ -0,0 +1,11 @@
"use client";
import { useAnimationFrame } from '../utils/use-animation-frame.mjs';
import { useMotionValue } from './use-motion-value.mjs';
function useTime() {
const time = useMotionValue(0);
useAnimationFrame((t) => time.set(t));
return time;
}
export { useTime };

View File

@@ -0,0 +1,30 @@
"use client";
import { transform } from 'motion-dom';
import { useConstant } from '../utils/use-constant.mjs';
import { useCombineMotionValues } from './use-combine-values.mjs';
import { useComputed } from './use-computed.mjs';
function useTransform(input, inputRangeOrTransformer, outputRange, options) {
if (typeof input === "function") {
return useComputed(input);
}
const transformer = typeof inputRangeOrTransformer === "function"
? inputRangeOrTransformer
: transform(inputRangeOrTransformer, outputRange, options);
return Array.isArray(input)
? useListTransform(input, transformer)
: useListTransform([input], ([latest]) => transformer(latest));
}
function useListTransform(values, transformer) {
const latest = useConstant(() => []);
return useCombineMotionValues(values, () => {
latest.length = 0;
const numValues = values.length;
for (let i = 0; i < numValues; i++) {
latest[i] = values[i].get();
}
return transformer(latest);
});
}
export { useTransform };

View File

@@ -0,0 +1,36 @@
"use client";
import { frame } from 'motion-dom';
import { useMotionValueEvent } from '../utils/use-motion-value-event.mjs';
import { useMotionValue } from './use-motion-value.mjs';
/**
* Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
*
* ```javascript
* const x = useMotionValue(0)
* const xVelocity = useVelocity(x)
* const xAcceleration = useVelocity(xVelocity)
* ```
*
* @public
*/
function useVelocity(value) {
const velocity = useMotionValue(value.getVelocity());
const updateVelocity = () => {
const latest = value.getVelocity();
velocity.set(latest);
/**
* If we still have velocity, schedule an update for the next frame
* to keep checking until it is zero.
*/
if (latest)
frame.update(updateVelocity);
};
useMotionValueEvent(value, "change", () => {
// Schedule an update to this value at the end of the current frame.
frame.update(updateVelocity, false, true);
});
return velocity;
}
export { useVelocity };

View File

@@ -0,0 +1,19 @@
import { MotionValue, transformProps, acceleratedValues } from 'motion-dom';
class WillChangeMotionValue extends MotionValue {
constructor() {
super(...arguments);
this.isEnabled = false;
}
add(name) {
if (transformProps.has(name) || acceleratedValues.has(name)) {
this.isEnabled = true;
this.update();
}
}
update() {
this.set(this.isEnabled ? "transform" : "auto");
}
}
export { WillChangeMotionValue };

View File

@@ -0,0 +1,20 @@
import { MotionGlobalConfig } from 'motion-utils';
import { isWillChangeMotionValue } from './is.mjs';
function addValueToWillChange(visualElement, key) {
const willChange = visualElement.getValue("willChange");
/**
* It could be that a user has set willChange to a regular MotionValue,
* in which case we can't add the value to it.
*/
if (isWillChangeMotionValue(willChange)) {
return willChange.add(key);
}
else if (!willChange && MotionGlobalConfig.WillChange) {
const newWillChange = new MotionGlobalConfig.WillChange("auto");
visualElement.addValue("willChange", newWillChange);
newWillChange.add(key);
}
}
export { addValueToWillChange };

View File

@@ -0,0 +1,9 @@
"use client";
import { useConstant } from '../../utils/use-constant.mjs';
import { WillChangeMotionValue } from './WillChangeMotionValue.mjs';
function useWillChange() {
return useConstant(() => new WillChangeMotionValue("auto"));
}
export { useWillChange };

View File

@@ -0,0 +1,7 @@
import { isMotionValue } from 'motion-dom';
function isWillChangeMotionValue(value) {
return Boolean(isMotionValue(value) && value.add);
}
export { isWillChangeMotionValue };

View File

@@ -0,0 +1,12 @@
import { isMotionValue } from 'motion-dom';
/**
* If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
*
* TODO: Remove and move to library
*/
function resolveMotionValue(value) {
return isMotionValue(value) ? value.get() : value;
}
export { resolveMotionValue };