reanimated-pause-state 0.1.0

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "reanimated-pause-state",
+  "version": "0.1.0",
+  "description": "Pause Reanimated animations and inspect their state at any frame",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./babel": {
+      "types": "./dist/babel.d.ts",
+      "default": "./dist/babel.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "reanimated",
+    "animation",
+    "debug",
+    "pause",
+    "state",
+    "snapshot",
+    "babel-plugin"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/skylarbarrera/reanimated-pause-state.git"
+  },
+  "bugs": {
+    "url": "https://github.com/skylarbarrera/reanimated-pause-state/issues"
+  },
+  "homepage": "https://github.com/skylarbarrera/reanimated-pause-state#readme",
+  "peerDependencies": {
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@types/babel__core": "^7.20.5",
+    "typescript": "^5.4.0"
+  }
+}

package/src/babel.ts

@@ -0,0 +1,486 @@
+/**
+ * reanimated-pause-plugin/babel
+ *
+ * Babel plugin that instruments Reanimated animation factories
+ * to track callsite information and animation metadata for snapshots.
+ *
+ * IMPORTANT: This plugin must run BEFORE react-native-reanimated/plugin
+ * or react-native-worklets/plugin in your babel config.
+ */
+
+import type { PluginObj, NodePath, types as t } from '@babel/core';
+
+const PLUGIN_VERSION = '0.1.0';
+
+// Animation factories to instrument
+const INSTRUMENTED_FACTORIES = new Map([
+  ['withTiming', 'timing'],
+  ['withSpring', 'spring'],
+  ['withDecay', 'decay'],
+  ['withRepeat', 'repeat'],
+  ['withSequence', 'sequence'],
+  ['withDelay', 'delay'],
+]);
+
+/**
+ * Extract a literal value from an AST node (numbers, strings, booleans)
+ * Returns undefined for non-literal/dynamic values
+ */
+function extractLiteralValue(
+  node: t.Node | undefined,
+  t: typeof import('@babel/core').types
+): number | string | boolean | undefined {
+  if (!node) return undefined;
+  if (t.isNumericLiteral(node)) return node.value;
+  if (t.isStringLiteral(node)) return node.value;
+  if (t.isBooleanLiteral(node)) return node.value;
+  if (t.isUnaryExpression(node) && node.operator === '-' && t.isNumericLiteral(node.argument)) {
+    return -node.argument.value;
+  }
+  return undefined;
+}
+
+/**
+ * Extract config properties from an ObjectExpression
+ */
+function extractObjectConfig(
+  node: t.Node | undefined,
+  t: typeof import('@babel/core').types
+): Array<t.ObjectProperty> {
+  const properties: Array<t.ObjectProperty> = [];
+
+  if (!node || !t.isObjectExpression(node)) {
+    return properties;
+  }
+
+  for (const prop of node.properties) {
+    if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+      const value = extractLiteralValue(prop.value, t);
+      if (value !== undefined) {
+        if (typeof value === 'number') {
+          properties.push(t.objectProperty(prop.key, t.numericLiteral(value)));
+        } else if (typeof value === 'string') {
+          properties.push(t.objectProperty(prop.key, t.stringLiteral(value)));
+        } else if (typeof value === 'boolean') {
+          properties.push(t.objectProperty(prop.key, t.booleanLiteral(value)));
+        }
+      }
+    }
+  }
+
+  return properties;
+}
+
+/**
+ * Build config metadata based on animation type and arguments
+ */
+function buildConfigMetadata(
+  animationType: string,
+  args: Array<t.Node>,
+  t: typeof import('@babel/core').types
+): t.ObjectExpression {
+  const configProps: Array<t.ObjectProperty> = [];
+
+  switch (animationType) {
+    case 'timing': {
+      // withTiming(toValue, config?)
+      const toValue = extractLiteralValue(args[0], t);
+      if (toValue !== undefined) {
+        configProps.push(t.objectProperty(t.identifier('toValue'), t.numericLiteral(toValue as number)));
+      }
+      // Extract duration, easing from config object
+      const configObjProps = extractObjectConfig(args[1], t);
+      configProps.push(...configObjProps);
+      break;
+    }
+
+    case 'spring': {
+      // withSpring(toValue, config?)
+      const toValue = extractLiteralValue(args[0], t);
+      if (toValue !== undefined) {
+        configProps.push(t.objectProperty(t.identifier('toValue'), t.numericLiteral(toValue as number)));
+      }
+      // Extract spring config (damping, mass, stiffness, etc.)
+      const configObjProps = extractObjectConfig(args[1], t);
+      configProps.push(...configObjProps);
+      break;
+    }
+
+    case 'decay': {
+      // withDecay(config)
+      const configObjProps = extractObjectConfig(args[0], t);
+      configProps.push(...configObjProps);
+      break;
+    }
+
+    case 'repeat': {
+      // withRepeat(animation, numberOfReps?, reverse?)
+      const numberOfReps = extractLiteralValue(args[1], t);
+      if (numberOfReps !== undefined) {
+        configProps.push(t.objectProperty(t.identifier('numberOfReps'), t.numericLiteral(numberOfReps as number)));
+      }
+      const reverse = extractLiteralValue(args[2], t);
+      if (reverse !== undefined) {
+        configProps.push(t.objectProperty(t.identifier('reverse'), t.booleanLiteral(reverse as boolean)));
+      }
+      break;
+    }
+
+    case 'delay': {
+      // withDelay(delayMs, animation)
+      const delayMs = extractLiteralValue(args[0], t);
+      if (delayMs !== undefined) {
+        configProps.push(t.objectProperty(t.identifier('delayMs'), t.numericLiteral(delayMs as number)));
+      }
+      break;
+    }
+
+    case 'sequence': {
+      // withSequence(...animations)
+      configProps.push(t.objectProperty(t.identifier('count'), t.numericLiteral(args.length)));
+      break;
+    }
+  }
+
+  return t.objectExpression(configProps);
+}
+
+interface PluginState {
+  filename: string;
+  markerInjected: boolean;
+  registryInjected: boolean;
+  factoryBindings: Map<string, string>; // local name -> original name
+}
+
+export default function reanimatedPausePlugin({
+  types: t,
+}: {
+  types: typeof import('@babel/core').types;
+}): PluginObj<PluginState> {
+  return {
+    name: 'reanimated-pause-plugin',
+
+    pre(file) {
+      this.filename = file.opts.filename || 'unknown';
+      this.markerInjected = false;
+      this.registryInjected = false;
+      this.factoryBindings = new Map();
+    },
+
+    visitor: {
+      Program: {
+        enter(path, state) {
+          // Inject marker at the top of the program
+          if (!state.markerInjected) {
+            const marker = t.expressionStatement(
+              t.assignmentExpression(
+                '=',
+                t.memberExpression(
+                  t.identifier('globalThis'),
+                  t.identifier('__RPP_INSTALLED__')
+                ),
+                t.objectExpression([
+                  t.objectProperty(
+                    t.identifier('installed'),
+                    t.booleanLiteral(true)
+                  ),
+                  t.objectProperty(
+                    t.identifier('version'),
+                    t.stringLiteral(PLUGIN_VERSION)
+                  ),
+                ])
+              )
+            );
+
+            // Check if marker already exists
+            const hasMarker = path.node.body.some(
+              (node) =>
+                t.isExpressionStatement(node) &&
+                t.isAssignmentExpression(node.expression) &&
+                t.isMemberExpression(node.expression.left) &&
+                t.isIdentifier(node.expression.left.property, {
+                  name: '__RPP_INSTALLED__',
+                })
+            );
+
+            if (!hasMarker) {
+              path.unshiftContainer('body', marker);
+            }
+            state.markerInjected = true;
+          }
+        },
+      },
+
+      // Track imports from react-native-reanimated
+      ImportDeclaration(path, state) {
+        const source = path.node.source.value;
+        if (source !== 'react-native-reanimated') {
+          return;
+        }
+
+        for (const specifier of path.node.specifiers) {
+          if (t.isImportSpecifier(specifier)) {
+            const imported = t.isIdentifier(specifier.imported)
+              ? specifier.imported.name
+              : specifier.imported.value;
+            const local = specifier.local.name;
+
+            if (INSTRUMENTED_FACTORIES.has(imported)) {
+              state.factoryBindings.set(local, imported);
+            }
+          }
+        }
+      },
+
+      // Transform animation factory calls to track them
+      // Only track TOP-LEVEL animations (assigned to .value) to avoid noise
+      // Nested animations (withRepeat(withTiming(...))) share the same SharedValue
+      CallExpression: {
+        exit(path, state) {
+          const callee = path.node.callee;
+
+          if (!t.isIdentifier(callee)) {
+            return;
+          }
+
+          const localName = callee.name;
+          const originalName = state.factoryBindings.get(localName);
+
+          if (!originalName || !INSTRUMENTED_FACTORIES.has(originalName)) {
+            return;
+          }
+
+          // Check if this is a top-level animation being assigned to a SharedValue
+          // Pattern: sharedValue.value = withAnimation(...)
+          // Only track these - nested animations are just configuration
+          let sharedValueRef: t.Expression | null = null;
+          let sharedValueName: string | null = null;
+          const parentAssignment = path.findParent((p) => p.isAssignmentExpression());
+
+          if (parentAssignment && t.isAssignmentExpression(parentAssignment.node)) {
+            const left = parentAssignment.node.left;
+            // Check if left side is X.value (MemberExpression with property 'value')
+            if (
+              t.isMemberExpression(left) &&
+              t.isIdentifier(left.property, { name: 'value' })
+            ) {
+              // Check if this call is the direct right-hand side of the assignment
+              // (not a nested animation inside another)
+              if (parentAssignment.node.right === path.node) {
+                sharedValueRef = left.object as t.Expression;
+                // Try to get the variable name for better descriptions
+                if (t.isIdentifier(left.object)) {
+                  sharedValueName = left.object.name;
+                }
+              }
+            }
+          }
+
+          // Only track if this is assigned to a SharedValue (top-level)
+          if (!sharedValueRef) {
+            return; // Skip nested animations - they don't need separate tracking
+          }
+
+          const animationType = INSTRUMENTED_FACTORIES.get(originalName)!;
+          const loc = path.node.loc;
+
+          // Get relative filename
+          const filename = state.filename
+            .replace(/^.*\/node_modules\//, 'node_modules/')
+            .replace(/^.*\/packages\//, 'packages/');
+
+          // Extract animation config from arguments (recursively for nested animations)
+          const configMeta = buildConfigMetadata(
+            animationType,
+            path.node.arguments as t.Node[],
+            t
+          );
+
+          // Create metadata object
+          const metadataProperties: t.ObjectProperty[] = [
+            t.objectProperty(
+              t.identifier('__rpp_type'),
+              t.stringLiteral(animationType)
+            ),
+            t.objectProperty(
+              t.identifier('__rpp_file'),
+              t.stringLiteral(filename)
+            ),
+            t.objectProperty(
+              t.identifier('__rpp_line'),
+              t.numericLiteral(loc?.start.line || 0)
+            ),
+            t.objectProperty(
+              t.identifier('__rpp_column'),
+              t.numericLiteral(loc?.start.column || 0)
+            ),
+            t.objectProperty(
+              t.identifier('__rpp_id'),
+              t.callExpression(
+                t.memberExpression(t.identifier('Math'), t.identifier('random')),
+                []
+              )
+            ),
+            t.objectProperty(
+              t.identifier('__rpp_config'),
+              configMeta
+            ),
+            t.objectProperty(
+              t.identifier('__rpp_sharedValue'),
+              sharedValueRef
+            ),
+          ];
+
+          // Add SharedValue variable name if we captured it
+          if (sharedValueName) {
+            metadataProperties.push(
+              t.objectProperty(
+                t.identifier('__rpp_sharedValueName'),
+                t.stringLiteral(sharedValueName)
+              )
+            );
+          }
+
+          const metadata = t.objectExpression(metadataProperties);
+
+          // Wrap the call: __rppTrack(withTiming(...), metadata)
+          const wrappedCall = t.callExpression(
+            t.identifier('__rppTrack'),
+            [
+              t.callExpression(callee, path.node.arguments as t.Expression[]),
+              metadata,
+            ]
+          );
+
+          // Inject the tracker function if not already done
+          if (!state.registryInjected) {
+            injectTrackerFunction(path, t);
+            state.registryInjected = true;
+          }
+
+          path.replaceWith(wrappedCall);
+          path.skip(); // Don't revisit this node
+        },
+      },
+    },
+  };
+}
+
+/**
+ * Inject the __rppTrack function that registers animations
+ */
+function injectTrackerFunction(
+  path: NodePath<t.CallExpression>,
+  t: typeof import('@babel/core').types
+): void {
+  const program = path.findParent((p) => p.isProgram()) as NodePath<t.Program>;
+  if (!program) return;
+
+  // Check if already injected
+  const hasTracker = program.node.body.some(
+    (node) =>
+      t.isVariableDeclaration(node) &&
+      node.declarations.some(
+        (d) => t.isIdentifier(d.id) && d.id.name === '__rppTrack'
+      )
+  );
+
+  if (hasTracker) return;
+
+  // Create the tracker function
+  // const __rppTrack = (animation, meta) => {
+  //   if (animation && typeof animation === 'object') {
+  //     animation.__rpp_meta = meta;
+  //   }
+  //   if (globalThis.__RPP_REGISTRY__?.register) {
+  //     globalThis.__RPP_REGISTRY__.register(meta);
+  //   }
+  //   return animation;
+  // };
+  const tracker = t.variableDeclaration('const', [
+    t.variableDeclarator(
+      t.identifier('__rppTrack'),
+      t.arrowFunctionExpression(
+        [t.identifier('animation'), t.identifier('meta')],
+        t.blockStatement([
+          // if (animation && typeof animation === 'object') { animation.__rpp_meta = meta; }
+          t.ifStatement(
+            t.logicalExpression(
+              '&&',
+              t.identifier('animation'),
+              t.binaryExpression(
+                '===',
+                t.unaryExpression('typeof', t.identifier('animation')),
+                t.stringLiteral('object')
+              )
+            ),
+            t.expressionStatement(
+              t.assignmentExpression(
+                '=',
+                t.memberExpression(
+                  t.identifier('animation'),
+                  t.identifier('__rpp_meta')
+                ),
+                t.identifier('meta')
+              )
+            )
+          ),
+          // if (globalThis.__RPP_REGISTRY__?.register) { ... }
+          t.ifStatement(
+            t.optionalMemberExpression(
+              t.memberExpression(
+                t.identifier('globalThis'),
+                t.identifier('__RPP_REGISTRY__')
+              ),
+              t.identifier('register'),
+              false,
+              true
+            ),
+            t.expressionStatement(
+              t.callExpression(
+                t.memberExpression(
+                  t.memberExpression(
+                    t.identifier('globalThis'),
+                    t.identifier('__RPP_REGISTRY__')
+                  ),
+                  t.identifier('register')
+                ),
+                [t.identifier('meta')]
+              )
+            )
+          ),
+          // return animation;
+          t.returnStatement(t.identifier('animation')),
+        ])
+      )
+    ),
+  ]);
+
+  // Find insertion point (after imports)
+  let insertIndex = 0;
+  for (let i = 0; i < program.node.body.length; i++) {
+    const node = program.node.body[i];
+    if (!t.isImportDeclaration(node)) {
+      // Skip the marker if present
+      if (
+        t.isExpressionStatement(node) &&
+        t.isAssignmentExpression(node.expression) &&
+        t.isMemberExpression(node.expression.left) &&
+        t.isIdentifier(node.expression.left.property, {
+          name: '__RPP_INSTALLED__',
+        })
+      ) {
+        insertIndex = i + 1;
+        continue;
+      }
+      insertIndex = i;
+      break;
+    }
+    insertIndex = i + 1;
+  }
+
+  program.node.body.splice(insertIndex, 0, tracker);
+}
+
+module.exports = reanimatedPausePlugin;
+module.exports.default = reanimatedPausePlugin;

package/src/global.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React Native global development flag
+ */
+declare const __DEV__: boolean;
+
+/**
+ * Extend globalThis for worklet context (UI thread has requestAnimationFrame)
+ */
+declare namespace globalThis {
+  var requestAnimationFrame: ((callback: (timestamp: number) => void) => number) | undefined;
+}