This commit is contained in:
morgan
2026-03-13 19:23:37 +03:00
parent 8917f1631f
commit cc7403191a
5113 changed files with 168404 additions and 0 deletions

View File

@@ -0,0 +1,57 @@
import { GroupAnimationWithThen } from 'motion-dom';
import { removeItem } from 'motion-utils';
import { animateSequence } from './sequence.mjs';
import { animateSubject } from './subject.mjs';
function isSequence(value) {
return Array.isArray(value) && value.some(Array.isArray);
}
/**
* Creates an animation function that is optionally scoped
* to a specific element.
*/
function createScopedAnimate(options = {}) {
const { scope, reduceMotion } = options;
/**
* Implementation
*/
function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
let animations = [];
let animationOnComplete;
if (isSequence(subjectOrSequence)) {
const { onComplete, ...sequenceOptions } = optionsOrKeyframes || {};
if (typeof onComplete === "function") {
animationOnComplete = onComplete;
}
animations = animateSequence(subjectOrSequence, reduceMotion !== undefined
? { reduceMotion, ...sequenceOptions }
: sequenceOptions, scope);
}
else {
// Extract top-level onComplete so it doesn't get applied per-value
const { onComplete, ...rest } = options || {};
if (typeof onComplete === "function") {
animationOnComplete = onComplete;
}
animations = animateSubject(subjectOrSequence, optionsOrKeyframes, (reduceMotion !== undefined
? { reduceMotion, ...rest }
: rest), scope);
}
const animation = new GroupAnimationWithThen(animations);
if (animationOnComplete) {
animation.finished.then(animationOnComplete);
}
if (scope) {
scope.animations.push(animation);
animation.finished.then(() => {
removeItem(scope.animations, animation);
});
}
return animation;
}
return scopedAnimate;
}
const animate = createScopedAnimate();
export { animate, createScopedAnimate };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1,54 @@
import { animateSingleValue, visualElementStore, animateTarget, isMotionValue } from 'motion-dom';
import { invariant } from 'motion-utils';
import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element.mjs';
import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
import { resolveSubjects } from './resolve-subjects.mjs';
function isSingleValue(subject, keyframes) {
return (isMotionValue(subject) ||
typeof subject === "number" ||
(typeof subject === "string" && !isDOMKeyframes(keyframes)));
}
/**
* Implementation
*/
function animateSubject(subject, keyframes, options, scope) {
const animations = [];
if (isSingleValue(subject, keyframes)) {
animations.push(animateSingleValue(subject, isDOMKeyframes(keyframes)
? keyframes.default || keyframes
: keyframes, options ? options.default || options : options));
}
else {
// Gracefully handle null/undefined subjects (e.g., from querySelector returning null)
if (subject == null) {
return animations;
}
const subjects = resolveSubjects(subject, keyframes, scope);
const numSubjects = subjects.length;
invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
for (let i = 0; i < numSubjects; i++) {
const thisSubject = subjects[i];
const createVisualElement = thisSubject instanceof Element
? createDOMVisualElement
: createObjectVisualElement;
if (!visualElementStore.has(thisSubject)) {
createVisualElement(thisSubject);
}
const visualElement = visualElementStore.get(thisSubject);
const transition = { ...options };
/**
* Resolve stagger function if provided.
*/
if ("delay" in transition &&
typeof transition.delay === "function") {
transition.delay = transition.delay(i, numSubjects);
}
animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
}
}
return animations;
}
export { animateSubject };
//# sourceMappingURL=subject.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-animate.mjs","sources":["../../../../src/animation/hooks/use-animate.ts"],"sourcesContent":["\"use client\"\n\nimport { useMemo } from \"react\"\nimport { AnimationScope } from \"motion-dom\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { useUnmountEffect } from \"../../utils/use-unmount-effect\"\nimport { useReducedMotionConfig } from \"../../utils/reduced-motion/use-reduced-motion-config\"\nimport { createScopedAnimate } from \"../animate\"\n\nexport function useAnimate<T extends Element = any>() {\n const scope: AnimationScope<T> = useConstant(() => ({\n current: null!, // Will be hydrated by React\n animations: [],\n }))\n\n const reduceMotion = useReducedMotionConfig() ?? undefined\n\n const animate = useMemo(\n () => createScopedAnimate({ scope, reduceMotion }),\n [scope, reduceMotion]\n )\n\n useUnmountEffect(() => {\n scope.animations.forEach((animation) => animation.stop())\n scope.animations.length = 0\n })\n\n return [scope, animate] as [AnimationScope<T>, typeof animate]\n}\n"],"names":[],"mappings":";;;;;;;;AAUI;;AAEI;AACH;AAED;;;AAQI;AACA;AACJ;AAEA;AACJ;;"}

View File

@@ -0,0 +1,64 @@
"use client";
import { animateVisualElement, VisualElement, createBox } from 'motion-dom';
import { useState, useLayoutEffect } from 'react';
import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
import { useConstant } from '../../utils/use-constant.mjs';
const createObject = () => ({});
class StateVisualElement extends VisualElement {
constructor() {
super(...arguments);
this.measureInstanceViewportBox = createBox;
}
build() { }
resetTransform() { }
restoreTransform() { }
removeValueFromRenderState() { }
renderInstance() { }
scrapeMotionValuesFromProps() {
return createObject();
}
getBaseTargetFromProps() {
return undefined;
}
readValueFromInstance(_state, key, options) {
return options.initialState[key] || 0;
}
sortInstanceNodePosition() {
return 0;
}
}
const useVisualState = makeUseVisualState({
scrapeMotionValuesFromProps: createObject,
createRenderState: createObject,
});
/**
* This is not an officially supported API and may be removed
* on any version.
*/
function useAnimatedState(initialState) {
const [animationState, setAnimationState] = useState(initialState);
const visualState = useVisualState({}, false);
const element = useConstant(() => {
return new StateVisualElement({
props: {
onUpdate: (v) => {
setAnimationState({ ...v });
},
},
visualState,
presenceContext: null,
}, { initialState });
});
useLayoutEffect(() => {
element.mount({});
return () => element.unmount();
}, [element]);
const startAnimation = useConstant(() => (animationDefinition) => {
return animateVisualElement(element, animationDefinition);
});
return [animationState, startAnimation];
}
export { useAnimatedState };
//# sourceMappingURL=use-animated-state.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"handoff.mjs","sources":["../../../../src/animation/optimized-appear/handoff.ts"],"sourcesContent":["import type { Batcher } from \"motion-dom\"\nimport { appearAnimationStore } from \"./store\"\nimport { appearStoreId } from \"./store-id\"\n\nexport function handoffOptimizedAppearAnimation(\n elementId: string,\n valueName: string,\n frame: Batcher\n): number | null {\n const storeId = appearStoreId(elementId, valueName)\n const optimisedAnimation = appearAnimationStore.get(storeId)\n\n if (!optimisedAnimation) {\n return null\n }\n\n const { animation, startTime } = optimisedAnimation\n\n function cancelAnimation() {\n window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame)\n }\n\n /**\n * We can cancel the animation once it's finished now that we've synced\n * with Motion.\n *\n * Prefer onfinish over finished as onfinish is backwards compatible with\n * older browsers.\n */\n animation.onfinish = cancelAnimation\n\n if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {\n /**\n * If the startTime is null, this animation is the Paint Ready detection animation\n * and we can cancel it immediately without handoff.\n *\n * Or if we've already handed off the animation then we're now interrupting it.\n * In which case we need to cancel it.\n */\n cancelAnimation()\n return null\n } else {\n return startTime\n }\n}\n"],"names":[],"mappings":";;;SAIgB,+BAA+B,CAC3C,SAAiB,EACjB,SAAiB,EACjB,KAAc,EAAA;IAEd,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;IACnD,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC;IAE5D,IAAI,CAAC,kBAAkB,EAAE;AACrB,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,kBAAkB;AAEnD,IAAA,SAAS,eAAe,GAAA;QACpB,MAAM,CAAC,8BAA8B,GAAG,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;IACxE;AAEA;;;;;;AAMG;AACH,IAAA,SAAS,CAAC,QAAQ,GAAG,eAAe;AAEpC,IAAA,IAAI,SAAS,KAAK,IAAI,IAAI,MAAM,CAAC,uBAAuB,GAAG,SAAS,CAAC,EAAE;AACnE;;;;;;AAMG;AACH,QAAA,eAAe,EAAE;AACjB,QAAA,OAAO,IAAI;IACf;SAAO;AACH,QAAA,OAAO,SAAS;IACpB;AACJ;;;;"}

View File

@@ -0,0 +1 @@
{"version":3,"file":"normalize-times.mjs","sources":["../../../../../src/animation/sequence/utils/normalize-times.ts"],"sourcesContent":["/**\n * Take an array of times that represent repeated keyframes. For instance\n * if we have original times of [0, 0.5, 1] then our repeated times will\n * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back\n * down to a 0-1 scale.\n */\nexport function normalizeTimes(times: number[], repeat: number): void {\n for (let i = 0; i < times.length; i++) {\n times[i] = times[i] / (repeat + 1)\n }\n}\n"],"names":[],"mappings":"AAAA;;;;;AAKG;AACG,SAAU,cAAc,CAAC,KAAe,EAAE,MAAc,EAAA;AAC1D,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACnC,QAAA,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC;IACtC;AACJ;;;;"}

View File

@@ -0,0 +1,6 @@
function isDOMKeyframes(keyframes) {
return typeof keyframes === "object" && !Array.isArray(keyframes);
}
export { isDOMKeyframes };
//# sourceMappingURL=is-dom-keyframes.mjs.map