@hyperframes/parsers 0.8.126 → 0.8.128

package/dist/gsapParser.js

@@ -3,6 +3,7 @@ import * as recast from "recast";
 import { parse as babelParse } from "@babel/parser";
 
 // src/gsapConstants.ts
+var GSAP_DEFAULT_DURATION = 0.5;
 var SUPPORTED_PROPS = [
   // 2D Transforms
   "x",
@@ -43,6 +44,25 @@ var SUPPORTED_PROPS = [
   // DOM content (number counters, text roll-ups)
   "innerText"
 ];
+var BUILTIN_VAR_KEYS = /* @__PURE__ */ new Set(["duration", "ease", "delay"]);
+var DROPPED_VAR_KEYS = /* @__PURE__ */ new Set([
+  "onComplete",
+  "onStart",
+  "onUpdate",
+  "onRepeat"
+]);
+var EXTRAS_KEYS = /* @__PURE__ */ new Set([
+  "stagger",
+  "yoyo",
+  "repeat",
+  "repeatDelay",
+  "snap",
+  "overwrite",
+  "immediateRender"
+]);
+function isTweenConfigKey(key) {
+  return BUILTIN_VAR_KEYS.has(key) || DROPPED_VAR_KEYS.has(key) || EXTRAS_KEYS.has(key);
+}
 var PROPERTY_GROUPS = {
   position: /* @__PURE__ */ new Set(["x", "y", "xPercent", "yPercent"]),
   scale: /* @__PURE__ */ new Set(["scale", "scaleX", "scaleY"]),
@@ -82,16 +102,14 @@ function positionHoldForAnimation(animation, animations) {
   if (!animation.keyframes) return null;
   const start = knownStart(animation) ?? 0;
   if (!(start > 1e-3)) return null;
-  const first = [...animation.keyframes.keyframes].sort(
-    (left, right) => left.percentage - right.percentage
-  )[0];
-  if (!first) return null;
+  const atStart = animation.keyframes.keyframes.find((keyframe) => keyframe.percentage === 0);
+  if (!atStart) return null;
   const earlier = animations.filter((other) => {
     const otherStart = knownStart(other);
     return other !== animation && !other.global && other.targetSelector === animation.targetSelector && otherStart !== void 0 && otherStart < start - 1e-3;
   });
   const position = {};
-  for (const [property, value] of Object.entries(first.properties)) {
+  for (const [property, value] of Object.entries(atStart.properties)) {
     if (classifyPropertyGroup(property) !== "position" || typeof value !== "number") continue;
     if (earlier.some((other) => writesProperty(other, property))) continue;
     position[property] = value;
@@ -137,6 +155,9 @@ var SUPPORTED_EASES = [
 ];
 
 // src/gsapSerialize.ts
+function authorsKeyframes(anim) {
+  return anim.keyframes !== void 0 || anim.hasUnresolvedKeyframes === true;
+}
 function mergePercentageKeyframes(keyframes) {
   const byPercentage = /* @__PURE__ */ new Map();
   for (const keyframe of keyframes) {
@@ -382,14 +403,25 @@ function resolveConversionProps(anim, resolvedFromValues) {
 }
 
 // src/clipTweens.ts
-function clipTweenMatcher(clipSelectors, root) {
+function clipTweenMatcher(clipSelectors, root, queries = /* @__PURE__ */ new Map()) {
   const own = typeof clipSelectors === "string" ? [clipSelectors] : clipSelectors;
-  const clips = root ? own.flatMap((selector) => queryAll(root, selector)) : [];
+  if (!root)
+    return ({ targetSelector, hasPartialSelector }) => !hasPartialSelector && own.includes(targetSelector);
+  const queryAll = (selector) => {
+    if (ID_SELECTOR.test(selector)) {
+      if (!queries.has(ALL_IDS)) indexIds(root, queries);
+      return queries.get(selector) ?? [];
+    }
+    let found = queries.get(selector);
+    if (!found) queries.set(selector, found = queryRoot(root, selector));
+    return found;
+  };
+  const clips = own.flatMap((selector) => queryAll(selector));
   return ({ targetSelector, hasPartialSelector }) => {
     if (hasPartialSelector) return false;
     if (own.includes(targetSelector)) return true;
-    if (!root || clips.length === 0) return false;
-    const targets = queryAll(root, targetSelector);
+    if (clips.length === 0) return false;
+    const targets = queryAll(targetSelector);
     return targets.length > 0 && targets.every((target) => {
       const owner = target.closest("[data-start]");
       return clips.includes(target) || owner !== null && clips.includes(owner);
@@ -399,7 +431,20 @@ function clipTweenMatcher(clipSelectors, root) {
 function hasExplicitTime(animation) {
   return typeof animation.position === "number" && !animation.implicitPosition;
 }
-function queryAll(root, selector) {
+var ID_SELECTOR = /^#-?[A-Za-z_][\w-]*$/;
+var ALL_IDS = "[id]";
+function indexIds(root, queries) {
+  const all = queryRoot(root, ALL_IDS);
+  queries.set(ALL_IDS, all);
+  for (const el of all) {
+    const key = `#${el.id}`;
+    if (!ID_SELECTOR.test(key)) continue;
+    const list = queries.get(key);
+    if (list) list.push(el);
+    else queries.set(key, [el]);
+  }
+}
+function queryRoot(root, selector) {
   try {
     return Array.from(root.querySelectorAll(selector));
   } catch {
@@ -411,34 +456,27 @@ function queryAll(root, selector) {
 var roundPercentage = (percentage) => Math.round(percentage * 10) / 10;
 var OBJECT_ARRAY_PERCENTAGE_TOLERANCE = 2;
 function getObjectArrayKeyframeTiming(durations) {
-  const hasAuthoredDuration = durations.some((duration) => duration !== void 0);
-  if (hasAuthoredDuration) {
-    if (!durations.every(
-      (duration) => typeof duration === "number" && Number.isFinite(duration) && duration > 0
-    )) {
-      return null;
-    }
-    const totalDuration = durations.reduce((sum, duration) => sum + duration, 0);
-    let cumulative = 0;
-    return {
-      percentages: durations.map((duration) => {
-        cumulative += duration;
-        return roundPercentage(cumulative / totalDuration * 100);
-      }),
-      totalDuration
-    };
+  const steps = durations.map((duration) => duration ?? GSAP_DEFAULT_DURATION);
+  if (!steps.every(
+    (duration) => typeof duration === "number" && Number.isFinite(duration) && duration > 0
+  )) {
+    return null;
   }
-  const lastIndex = durations.length - 1;
+  const totalDuration = steps.reduce((sum, duration) => sum + duration, 0);
+  let cumulative = 0;
   return {
-    percentages: durations.map(
-      (_, index) => lastIndex > 0 ? roundPercentage(index / lastIndex * 100) : 0
-    )
+    percentages: steps.map((duration) => {
+      cumulative += duration;
+      return roundPercentage(cumulative / totalDuration * 100);
+    }),
+    totalDuration
   };
 }
 function getCompatibleObjectArrayKeyframeTiming(durations, outerDuration) {
   const timing = getObjectArrayKeyframeTiming(durations);
   if (!timing) return null;
-  if (timing.totalDuration === void 0 || outerDuration === void 0) return timing;
+  const stepsAuthorDuration = durations.some((duration) => duration !== void 0);
+  if (!stepsAuthorDuration || outerDuration === void 0) return timing;
   if (typeof outerDuration === "number" && Math.abs(outerDuration - timing.totalDuration) <= Number.EPSILON) {
     return timing;
   }
@@ -910,17 +948,6 @@ function findAllTweenCalls(ast, ref, scope, targetBindings, targetHelpers) {
   });
   return results;
 }
-var BUILTIN_VAR_KEYS = /* @__PURE__ */ new Set(["duration", "ease", "delay"]);
-var DROPPED_VAR_KEYS = /* @__PURE__ */ new Set(["onComplete", "onStart", "onUpdate", "onRepeat"]);
-var EXTRAS_KEYS = /* @__PURE__ */ new Set([
-  "stagger",
-  "yoyo",
-  "repeat",
-  "repeatDelay",
-  "snap",
-  "overwrite",
-  "immediateRender"
-]);
 function extractRawPropertySource(varsArgNode, key) {
   const node = findPropertyNode(varsArgNode, key);
   return node ? recast.print(node).code : void 0;
@@ -1193,7 +1220,7 @@ function tweenCallToAnimation(call, scope) {
         percentage: waypoints.length > 1 ? Math.round(i / (waypoints.length - 1) * 100) : 0,
         properties: { x: wp.x, y: wp.y }
       }));
-      keyframesData = { format: "percentage", keyframes: kf };
+      keyframesData = { format: "percentage", keyframes: kf, fromMotionPath: true };
     } else {
       const kfs = keyframesData.keyframes;
       if (kfs.length === waypoints.length) {
@@ -1250,7 +1277,6 @@ function tweenCallToAnimation(call, scope) {
   if (call.selectorPartial) anim.hasPartialSelector = true;
   return anim;
 }
-var GSAP_DEFAULT_DURATION = 0.5;
 function resolvePositionString(pos, cursor, prevStart) {
   const trimmed = pos.trim();
   if (trimmed === "") return cursor;
@@ -1282,7 +1308,7 @@ function applyTimelineDefaults(anims, defaults) {
     if (anim.duration === void 0 && defaults.duration !== void 0) {
       anim.duration = defaults.duration;
     }
-    if (anim.ease === void 0 && defaults.ease !== void 0) {
+    if (anim.ease === void 0 && defaults.ease !== void 0 && (!anim.keyframes || anim.keyframes.fromMotionPath)) {
       anim.ease = defaults.ease;
     }
   }
@@ -1391,7 +1417,7 @@ function isObjectProperty(prop) {
   return prop?.type === "ObjectProperty" || prop?.type === "Property";
 }
 function isEditablePropertyKey(key) {
-  return !BUILTIN_VAR_KEYS.has(key) && !DROPPED_VAR_KEYS.has(key) && !EXTRAS_KEYS.has(key);
+  return !isTweenConfigKey(key);
 }
 function makeObjectProperty(key, value) {
   const obj = parseExpr(`{ ${safeJsKey(key)}: ${serializeValue(value)} }`);
@@ -1518,7 +1544,7 @@ function updateAnimationInScript(script, animationId, updates) {
     return script;
   }
   const target = parsed.located.find((l) => l.id === animationId);
-  if (!target) return script;
+  if (!target || updates.properties && target.animation.hasUnresolvedKeyframes) return script;
   applyUpdatesToCall(target.call, updates);
   return recast.print(parsed.ast).code;
 }
@@ -1788,12 +1814,12 @@ function splitAnimationsInScript(script, opts) {
     const pos = typeof anim.position === "number" ? anim.position : 0;
     const dur = anim.duration ?? 0;
     const animEnd = pos + dur;
-    if (anim.keyframes) {
+    if (authorsKeyframes(anim)) {
       if (pos >= opts.splitTime) {
         result = updateAnimationSelector(result, anim.id, newSelector);
       } else if (animEnd > opts.splitTime) {
         skippedSelectors.push(`${originalSelector} (keyframes spanning split)`);
-        const kfs = anim.keyframes.keyframes;
+        const kfs = anim.keyframes?.keyframes ?? [];
         for (const kf of kfs) {
           const kfTime = pos + kf.percentage / 100 * dur;
           if (kfTime <= opts.splitTime) {
@@ -1803,7 +1829,10 @@ function splitAnimationsInScript(script, opts) {
           }
         }
       } else {
-        const kfs = anim.keyframes.keyframes;
+        if (anim.hasUnresolvedKeyframes) {
+          skippedSelectors.push(`${originalSelector} (unreadable keyframes before split)`);
+        }
+        const kfs = anim.keyframes?.keyframes ?? [];
         if (kfs.length > 0) {
           for (const [k, v] of Object.entries(kfs[kfs.length - 1].properties)) {
             inheritedProps[k] = v;
@@ -1983,7 +2012,7 @@ function convertArrayKeyframesToObjectNode(varsArg, scope) {
     outerDuration
   );
   if (!timing) return null;
-  if (timing.totalDuration !== void 0 && findPropertyNode(varsArg, "duration") === void 0) {
+  if (findPropertyNode(varsArg, "duration") === void 0) {
     setVarsKey(varsArg, "duration", timing.totalDuration);
   }
   const entries = els.map((el, i) => {
@@ -1992,7 +2021,7 @@ function convertArrayKeyframesToObjectNode(varsArg, scope) {
     );
     return `${JSON.stringify(`${timing.percentages[i]}%`)}: ${recast.print(el).code}`;
   });
-  prop.value = parseExpr(`{ ${entries.join(", ")} }`);
+  prop.value = parseExpr(`{ ${entries.join(", ")}, easeEach: "none" }`);
   return prop.value;
 }
 function filterPercentageProps(kfNode) {
@@ -2292,7 +2321,7 @@ function convertToKeyframesInScript(script, animationId, resolvedFromValues, set
   let loc = locateAnimationWithFallback(script, animationId);
   if (!loc) return script;
   const anim = loc.target.animation;
-  if (anim.keyframes) return script;
+  if (authorsKeyframes(anim)) return script;
   const { fromProps, toProps } = resolveConversionProps(anim, resolvedFromValues);
   const varsArg = loc.target.call.varsArg;
   const originalEase = anim.ease;
@@ -2627,6 +2656,7 @@ function splitIntoPropertyGroups(script, animationId) {
   let loc = locateAnimationWithFallback(script, animationId);
   if (!loc) return { script, ids: [animationId] };
   const anim = loc.target.animation;
+  if (anim.hasUnresolvedKeyframes) return { script, ids: [animationId] };
   const allPropKeys = /* @__PURE__ */ new Set();
   if (anim.keyframes) {
     for (const kf of anim.keyframes.keyframes) {