@hyperframes/parsers 0.7.24 → 0.7.26

package/dist/gsapParserAcorn.js

@@ -462,6 +462,49 @@ var SCOPE_NODE_TYPES = /* @__PURE__ */ new Set([
   "FunctionExpression",
   "ArrowFunctionExpression"
 ]);
+var CONST_NODES = /* @__PURE__ */ Symbol("hf.constNodes");
+function constNodesOf(scope) {
+  return scope[CONST_NODES];
+}
+var MATH_FNS = /* @__PURE__ */ new Set(["min", "max", "round", "floor", "ceil", "abs", "sqrt", "sign", "trunc"]);
+var MATH_CONSTS = { PI: Math.PI, E: Math.E, SQRT2: Math.SQRT2 };
+function resolveMemberNode(node, scope) {
+  if (node.object?.type === "Identifier" && node.object.name === "Math") {
+    const key = node.property?.name;
+    return typeof key === "string" ? MATH_CONSTS[key] : void 0;
+  }
+  const objNode = resolveConstNode(node.object, scope);
+  if (!objNode) return void 0;
+  let valueNode;
+  if (node.computed) {
+    const idx = resolveNode(node.property, scope);
+    if (objNode.type === "ArrayExpression" && typeof idx === "number") {
+      valueNode = objNode.elements?.[idx];
+    } else if (objNode.type === "ObjectExpression" && (typeof idx === "string" || typeof idx === "number")) {
+      valueNode = findPropertyNode(objNode, String(idx));
+    }
+  } else if (objNode.type === "ObjectExpression") {
+    valueNode = findPropertyNode(objNode, node.property?.name ?? node.property?.value);
+  }
+  return valueNode ? resolveNode(valueNode, scope) : void 0;
+}
+function resolveConstMember(objNode, node, scope) {
+  if (!node.computed) {
+    return objNode.type === "ObjectExpression" ? findPropertyNode(objNode, node.property?.name ?? node.property?.value) : void 0;
+  }
+  const idx = resolveNode(node.property, scope);
+  if (objNode.type === "ArrayExpression" && typeof idx === "number") return objNode.elements?.[idx];
+  if (objNode.type === "ObjectExpression") return findPropertyNode(objNode, String(idx));
+  return void 0;
+}
+function resolveConstNode(node, scope) {
+  if (!node) return void 0;
+  if (node.type === "ArrayExpression" || node.type === "ObjectExpression") return node;
+  if (node.type === "Identifier") return constNodesOf(scope)?.get(node.name);
+  if (node.type !== "MemberExpression") return void 0;
+  const objNode = resolveConstNode(node.object, scope);
+  return objNode ? resolveConstMember(objNode, node, scope) : void 0;
+}
 function resolveNode(node, scope) {
   if (!node) return void 0;
   if (node.type === "NumericLiteral" || node.type === "Literal" && typeof node.value === "number")
@@ -498,6 +541,15 @@ function resolveNode(node, scope) {
   if (node.type === "TemplateLiteral" && node.expressions?.length === 0) {
     return node.quasis?.[0]?.value?.cooked ?? void 0;
   }
+  if (node.type === "MemberExpression") {
+    return resolveMemberNode(node, scope);
+  }
+  if (node.type === "CallExpression" && node.callee?.type === "MemberExpression" && node.callee.object?.type === "Identifier" && node.callee.object.name === "Math" && MATH_FNS.has(node.callee.property?.name)) {
+    const args = (node.arguments ?? []).map((a) => resolveNode(a, scope));
+    if (args.every((a) => typeof a === "number")) {
+      return Math[node.callee.property.name](...args);
+    }
+  }
   return void 0;
 }
 function extractLiteralValue(node, scope) {
@@ -555,14 +607,19 @@ function resolveCollectionSelector(node, ancestors, scope, bindings) {
 }
 function collectScopeBindings(ast) {
   const bindings = /* @__PURE__ */ new Map();
+  const constNodes = /* @__PURE__ */ new Map();
+  Object.defineProperty(bindings, CONST_NODES, { value: constNodes, enumerable: false });
   acornWalk.simple(ast, {
     VariableDeclarator(node) {
       const name = node.id?.name;
       const init = node.init;
-      if (name && init) {
-        const val = resolveNode(init, bindings);
-        if (val !== void 0) bindings.set(name, val);
+      if (!name || !init) return;
+      if (init.type === "ArrayExpression" || init.type === "ObjectExpression") {
+        constNodes.set(name, init);
+        return;
       }
+      const val = resolveNode(init, bindings);
+      if (val !== void 0) bindings.set(name, val);
     }
   });
   return bindings;
@@ -604,6 +661,25 @@ function collectTargetBindings(ast, scope) {
       }
     }
   });
+  const COLLECTION_ALIAS_METHODS = /* @__PURE__ */ new Set(["slice", "filter", "concat", "reverse"]);
+  acornWalk.ancestor(ast, {
+    // fallow-ignore-next-line complexity
+    VariableDeclarator(node, _, ancestors) {
+      const name = node.id?.name;
+      const init = node.init;
+      if (!name || !init) return;
+      let sourceVar;
+      if (init.type === "MemberExpression" && init.object?.type === "Identifier") {
+        sourceVar = init.object.name;
+      } else if (init.type === "CallExpression" && init.callee?.type === "MemberExpression" && init.callee.object?.type === "Identifier" && init.callee.property?.type === "Identifier" && COLLECTION_ALIAS_METHODS.has(init.callee.property.name)) {
+        sourceVar = init.callee.object.name;
+      }
+      if (!sourceVar) return;
+      const selector = lookupBindingFromAncestors(sourceVar, ancestors, bindings);
+      if (selector)
+        addBinding(bindings, enclosingScopeNodeFromAncestors(ancestors), name, selector);
+    }
+  });
   return bindings;
 }
 function resolveTargetSelector(node, ancestors, scope, bindings) {
@@ -626,6 +702,32 @@ function resolveTargetSelector(node, ancestors, scope, bindings) {
   }
   return null;
 }
+function describeProxyTarget(targetNode, varsNode, scope) {
+  const objNode = targetNode?.type === "ObjectExpression" ? targetNode : targetNode?.type === "Identifier" ? resolveConstNode(targetNode, scope) : void 0;
+  if (objNode?.type !== "ObjectExpression") return null;
+  const onUpdate = findPropertyNode(varsNode, "onUpdate");
+  const driven = onUpdate ? drivenDomChannel(onUpdate) : void 0;
+  if (driven) return `proxy \u2192 ${driven}`;
+  return "dwell/hold";
+}
+function isStyleAssignmentTarget(left) {
+  return left?.type === "MemberExpression" && left.object?.type === "MemberExpression" && left.object.property?.name === "style" && !!left.property?.name;
+}
+function drivenDomChannel(fnNode) {
+  let found;
+  acornWalk.simple(fnNode, {
+    CallExpression(node) {
+      if (node.callee?.type === "MemberExpression" && node.callee.property?.name === "setAttribute" && typeof node.arguments?.[0]?.value === "string") {
+        found ??= node.arguments[0].value;
+      }
+    },
+    AssignmentExpression(node) {
+      const left = node.left;
+      if (isStyleAssignmentTarget(left)) found ??= `style.${left.property.name}`;
+    }
+  });
+  return found;
+}
 function isObjectProperty(prop) {
   return prop?.type === "ObjectProperty" || prop?.type === "Property";
 }
@@ -1094,8 +1196,13 @@ function tweenCallToAnimation(call, scope, source) {
   if (duration === void 0 && keyframesData) {
     duration = computeKeyframesTotalDuration(call.varsArg, scope, source);
   }
+  let selector = call.selector;
+  if (selector === "__unresolved__") {
+    const proxyLabel = describeProxyTarget(call.node.arguments?.[0], call.varsArg, scope);
+    if (proxyLabel) selector = proxyLabel;
+  }
   const anim = {
-    targetSelector: call.selector,
+    targetSelector: selector,
     method: call.method,
     position,
     properties,
@@ -1118,11 +1225,52 @@ function tweenCallToAnimation(call, scope, source) {
   if (keyframesData) anim.keyframes = keyframesData;
   if (motionPathResult) anim.arcPath = motionPathResult.arcPath;
   if (hasUnresolvedKeyframes) anim.hasUnresolvedKeyframes = true;
-  if (call.selector === "__unresolved__") anim.hasUnresolvedSelector = true;
+  if (selector === "__unresolved__") anim.hasUnresolvedSelector = true;
   const provenance = readProvenance(call.node);
   if (provenance) anim.provenance = provenance;
   return anim;
 }
+function staggerAmount(raw) {
+  if (typeof raw === "number") return raw;
+  if (typeof raw !== "string") return void 0;
+  const src = raw.startsWith("__raw:") ? raw.slice(6) : raw;
+  const m = /(?:each\s*:\s*)?(-?\d+(?:\.\d+)?)/.exec(src);
+  if (!m) return void 0;
+  const n = Number.parseFloat(m[1]);
+  return Number.isFinite(n) ? n : void 0;
+}
+function restValue(prop) {
+  return prop === "opacity" || prop.startsWith("scale") ? 1 : 0;
+}
+function staggeredKeyframes(anim, each) {
+  const vars = { ...anim.properties };
+  let from;
+  let to;
+  if (anim.method === "fromTo") {
+    from = { ...anim.fromProperties ?? {} };
+    to = vars;
+  } else if (anim.method === "from") {
+    from = vars;
+    to = {};
+    for (const k of Object.keys(vars)) to[k] = restValue(k);
+  } else {
+    from = { ...anim.fromProperties ?? {} };
+    for (const k of Object.keys(vars)) if (from[k] === void 0) from[k] = restValue(k);
+    to = vars;
+  }
+  return [
+    { percentage: 0, properties: { ...from, stagger: each } },
+    { percentage: 100, properties: { ...to, stagger: each } }
+  ];
+}
+function annotateStaggeredCollections(anims) {
+  for (const anim of anims) {
+    if (anim.keyframes || anim.arcPath) continue;
+    const each = staggerAmount(anim.extras?.stagger);
+    if (each === void 0) continue;
+    anim.keyframes = { format: "percentage", keyframes: staggeredKeyframes(anim, each) };
+  }
+}
 var GSAP_DEFAULT_DURATION = 0.5;
 function resolvePositionString(pos, cursor, prevStart) {
   const trimmed = pos.trim();
@@ -1148,6 +1296,55 @@ function resolvePositionString(pos, cursor, prevStart) {
   const n = Number.parseFloat(trimmed);
   return Number.isFinite(n) ? n : null;
 }
+function collectGsapSetStates(ast, scope, bindings, source) {
+  const states = /* @__PURE__ */ new Map();
+  acornWalk.ancestor(ast, {
+    // fallow-ignore-next-line complexity
+    CallExpression(node, _, ancestors) {
+      const callee = node.callee;
+      if (callee?.type !== "MemberExpression" || callee.object?.name !== "gsap" || callee.property?.name !== "set")
+        return;
+      const selector = resolveTargetSelector(node.arguments?.[0], ancestors, scope, bindings);
+      if (!selector) return;
+      const rec = objectExpressionToRecord(node.arguments?.[1], scope, source);
+      const props = states.get(selector) ?? {};
+      for (const [k, v] of Object.entries(rec)) {
+        if (typeof v === "number" || typeof v === "string") props[k] = v;
+      }
+      states.set(selector, props);
+    }
+  });
+  return states;
+}
+function mergeProps(target, props) {
+  for (const [k, v] of Object.entries(props)) target[k] = v;
+  return target;
+}
+function seedFromPreState(anim, cur) {
+  const from = { ...anim.fromProperties ?? {} };
+  let seeded = false;
+  for (const prop of Object.keys(anim.properties)) {
+    if (from[prop] === void 0 && cur[prop] !== void 0) {
+      from[prop] = cur[prop];
+      seeded = true;
+    }
+  }
+  if (seeded) anim.fromProperties = from;
+}
+function seedSetStates(anims, initial) {
+  const state = /* @__PURE__ */ new Map();
+  for (const [sel, props] of initial) state.set(sel, { ...props });
+  for (const anim of anims) {
+    const sel = anim.targetSelector;
+    if (anim.method === "set") {
+      state.set(sel, mergeProps(state.get(sel) ?? {}, anim.properties));
+      continue;
+    }
+    const cur = state.get(sel);
+    if (anim.method === "to" && cur) seedFromPreState(anim, cur);
+    state.set(sel, mergeProps(state.get(sel) ?? {}, anim.properties));
+  }
+}
 function applyTimelineDefaults(anims, defaults) {
   if (!defaults) return;
   for (const anim of anims) {
@@ -1160,31 +1357,89 @@ function applyTimelineDefaults(anims, defaults) {
     }
   }
 }
-function resolveTimelinePositions(anims) {
+function resolveLabelPosition(pos, labels, cursor) {
+  const m = /^([A-Za-z_$][\w$]*)\s*(?:([+-])=\s*([\d.]+))?$/.exec(pos.trim());
+  if (!m) return null;
+  const name = m[1];
+  let base = labels.get(name);
+  if (base === void 0) {
+    base = cursor;
+    labels.set(name, base);
+  }
+  if (m[2] && m[3]) {
+    const n = Number.parseFloat(m[3]);
+    if (Number.isFinite(n)) return m[2] === "+" ? base + n : base - n;
+  }
+  return base;
+}
+function resolveAnimStart(anim, cursor, prevStart, labels) {
+  if (anim.implicitPosition) return cursor;
+  if (typeof anim.position === "number") return anim.position;
+  if (typeof anim.position === "string") {
+    return resolveLabelPosition(anim.position, labels, cursor) ?? resolvePositionString(anim.position, cursor, prevStart);
+  }
+  return cursor;
+}
+function resolveTimelinePositions(anims, labelDefs = []) {
   let cursor = 0;
   let prevStart = 0;
-  for (const anim of anims) {
+  const labels = /* @__PURE__ */ new Map();
+  let labelIdx = 0;
+  const sortedLabels = [...labelDefs].sort((a, b) => a.order - b.order);
+  const defineLabel = (def) => {
+    let value;
+    if (typeof def.position === "number") value = def.position;
+    else if (typeof def.position === "string") {
+      value = resolveLabelPosition(def.position, labels, cursor) ?? cursor;
+    } else value = cursor;
+    labels.set(def.name, Math.max(0, value));
+  };
+  anims.forEach((anim, i) => {
+    while (labelIdx < sortedLabels.length && sortedLabels[labelIdx].order <= i) {
+      defineLabel(sortedLabels[labelIdx]);
+      labelIdx++;
+    }
     if (anim.method === "set" && anim.global) {
       anim.resolvedStart = 0;
-      continue;
+      return;
     }
     const duration = anim.method === "set" ? 0 : anim.duration ?? GSAP_DEFAULT_DURATION;
-    let start;
-    if (anim.implicitPosition) {
-      start = cursor;
-    } else if (typeof anim.position === "number") {
-      start = anim.position;
-    } else if (typeof anim.position === "string") {
-      start = resolvePositionString(anim.position, cursor, prevStart);
-    } else {
-      start = cursor;
-    }
+    const start = resolveAnimStart(anim, cursor, prevStart, labels);
     if (start != null) {
       anim.resolvedStart = Math.max(0, start);
       prevStart = anim.resolvedStart;
       cursor = Math.max(cursor, anim.resolvedStart + duration);
     }
-  }
+  });
+  while (labelIdx < sortedLabels.length) defineLabel(sortedLabels[labelIdx++]);
+}
+function collectAddLabelDefs(ast, ref, scope, sortedCalls) {
+  const callLocs = sortedCalls.map((c) => c.node.callee?.property?.loc?.start);
+  const defs = [];
+  acornWalk.simple(ast, {
+    // fallow-ignore-next-line complexity
+    CallExpression(node) {
+      const callee = node.callee;
+      const objMatches = ref.kind === "identifier" ? callee.object?.type === "Identifier" && callee.object.name === ref.name : sameMemberAccess(callee.object, ref.node);
+      if (callee?.type !== "MemberExpression" || !objMatches || callee.property?.name !== "addLabel")
+        return;
+      const nameNode = node.arguments?.[0];
+      const name = typeof nameNode?.value === "string" ? nameNode.value : void 0;
+      if (!name) return;
+      const posVal = resolveNode(node.arguments?.[1], scope);
+      const position = typeof posVal === "number" || typeof posVal === "string" ? posVal : void 0;
+      const labelLoc = callee.property?.loc?.start;
+      let order = sortedCalls.length;
+      if (labelLoc) {
+        order = callLocs.findIndex(
+          (l) => l && (l.line > labelLoc.line || l.line === labelLoc.line && l.column > labelLoc.column)
+        );
+        if (order === -1) order = sortedCalls.length;
+      }
+      defs.push({ name, position, order });
+    }
+  });
+  return defs;
 }
 function compareByLoc(a, b) {
   const aLoc = a.node.callee?.property?.loc?.start;
@@ -1265,7 +1520,10 @@ function parseGsapScriptAcorn(script) {
     sortBySourcePosition(calls);
     const rawAnims = calls.map((call) => tweenCallToAnimation(call, scope, script));
     applyTimelineDefaults(rawAnims, detection.defaults);
-    resolveTimelinePositions(rawAnims);
+    seedSetStates(rawAnims, collectGsapSetStates(ast, scope, targetBindings, script));
+    const labelDefs = collectAddLabelDefs(ast, ref, scope, calls);
+    resolveTimelinePositions(rawAnims, labelDefs);
+    annotateStaggeredCollections(rawAnims);
     const animations = assignStableIds(rawAnims);
     const declPattern = ref.kind === "identifier" ? `(?:const|let|var)\\s+${timelineVar}\\s*=\\s*gsap\\.timeline\\s*\\([^)]*\\)\\s*;?` : `${escapeRegExp(timelineVar)}\\s*=\\s*gsap\\.timeline\\s*\\([^)]*\\)\\s*;?`;
     const timelineMatch = script.match(new RegExp(`^[\\s\\S]*?${declPattern}`));