@hyperframes/parsers 0.7.24 → 0.7.26

package/dist/gsapWriterAcorn.js

@@ -169,6 +169,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")
@@ -205,6 +248,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) {
@@ -262,14 +314,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;
@@ -311,6 +368,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) {
@@ -333,6 +409,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";
 }
@@ -798,8 +900,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,
@@ -822,7 +929,7 @@ 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;
@@ -864,31 +971,61 @@ 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 compareByLoc(a, b) {
   const aLoc = a.node.callee?.property?.loc?.start;
@@ -1651,12 +1788,12 @@ function removeKeyframeFromScript(script, animationId, percentage) {
   return ms.toString();
 }
 function moveKeyframeInScript(script, animationId, fromPercentage, toPercentage) {
-  const located = locateWithKeyframes(script, animationId);
+  const located = ensureKeyframesNode(script, animationId);
   if (!located) return script;
-  const { kfNode } = located;
+  const { script: src, kfNode } = located;
   const match = findKfPropByPct(kfNode, fromPercentage);
-  if (!match) return script;
-  if (Math.abs(fromPercentage - toPercentage) < MOVE_NOOP_EPSILON_PCT) return script;
+  if (!match) return src;
+  if (Math.abs(fromPercentage - toPercentage) < MOVE_NOOP_EPSILON_PCT) return src;
   const dest = findKfPropByPct(kfNode, toPercentage);
   const collision = dest && dest.prop !== match.prop ? dest : null;
   const entries = [];
@@ -1665,19 +1802,19 @@ function moveKeyframeInScript(script, animationId, fromPercentage, toPercentage)
     if (collision && prop === collision.prop) continue;
     const pct = percentageFromKey(propKeyName2(prop) ?? "");
     if (Number.isNaN(pct)) continue;
-    entries.push({ pct, record: valueNodeToRecord(prop.value, script) });
+    entries.push({ pct, record: valueNodeToRecord(prop.value, src) });
   }
-  entries.push({ pct: toPercentage, record: valueNodeToRecord(match.prop.value, script) });
+  entries.push({ pct: toPercentage, record: valueNodeToRecord(match.prop.value, src) });
   entries.sort((a, b) => a.pct - b.pct);
   const body = entries.map((e) => `${JSON.stringify(`${e.pct}%`)}: ${recordToCode(e.record)}`).join(", ");
-  const ms = new MagicString(script);
+  const ms = new MagicString(src);
   ms.overwrite(kfNode.start, kfNode.end, `{ ${body} }`);
   return ms.toString();
 }
 function resizeKeyframedTweenInScript(script, animationId, newPosition, newDuration, pctRemap) {
-  const located = locateWithKeyframes(script, animationId);
+  const located = ensureKeyframesNode(script, animationId);
   if (!located) return script;
-  const { target, kfNode } = located;
+  const { script: src, target, kfNode } = located;
   const edits = [];
   const seen = /* @__PURE__ */ new Set();
   for (const { from, to } of pctRemap) {
@@ -1686,7 +1823,7 @@ function resizeKeyframedTweenInScript(script, animationId, newPosition, newDurat
     seen.add(match.prop.key);
     edits.push({ keyNode: match.prop.key, to });
   }
-  const ms = new MagicString(script);
+  const ms = new MagicString(src);
   for (const { keyNode, to } of edits) {
     ms.overwrite(keyNode.start, keyNode.end, JSON.stringify(`${to}%`));
   }