facebook · vincentriemer · Jan 20, 2026
@@ -15,6 +15,7 @@
     "@rollup/plugin-replace": "^5.0.7",
     "benchmark": "^2.1.4",
     "brotli-size": "^4.0.0",
+    "jsdom": "^24.0.0",
     "rollup": "^4.22.4",
     "terser": "^5.3.0",
     "yargs": "17.7.2"

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { JSDOM } = require('jsdom');
+
+let dom = null;
+let previousGlobals = null;
+
+function setupDomGlobals() {
+  if (dom != null) {
+    return dom;
+  }
+
+  dom = new JSDOM('<!doctype html><html><body></body></html>');
+  const { window } = dom;
+
+  previousGlobals = {
+    window: global.window,
+    document: global.document,
+    HTMLElement: global.HTMLElement,
+    Node: global.Node,
+    navigator: Object.getOwnPropertyDescriptor(global, 'navigator')
+  };
+
+  global.window = window;
+  global.document = window.document;
+  global.HTMLElement = window.HTMLElement;
+  global.Node = window.Node;
+  Object.defineProperty(global, 'navigator', {
+    value: window.navigator,
+    configurable: true,
+    writable: true
+  });
+
+  return dom;
+}
+
+function teardownDomGlobals() {
+  if (previousGlobals == null) {
+    return;
+  }
+
+  global.window = previousGlobals.window;
+  global.document = previousGlobals.document;
+  global.HTMLElement = previousGlobals.HTMLElement;
+  global.Node = previousGlobals.Node;
+  if (previousGlobals.navigator != null) {
+    Object.defineProperty(global, 'navigator', previousGlobals.navigator);
+  } else {
+    delete global.navigator;
+  }
+  previousGlobals = null;
+
+  if (dom != null) {
+    dom.window.close();
+    dom = null;
+  }
+}
+
+function installAnimateMock() {
+  if (global.HTMLElement == null) {
+    throw new Error('Expected DOM globals to be installed before mocking.');
+  }
+
+  if (global.HTMLElement.prototype.animate == null) {
+    global.HTMLElement.prototype.animate = () => ({
+      finished: Promise.resolve(),
+      cancel() {},
+      currentTime: 0
+    });
+  }
+}
+
+module.exports = {
+  installAnimateMock,
+  setupDomGlobals,
+  teardownDomGlobals
+};
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export function create(styles) {
+  const compiled = {};
+  if (styles == null) {
+    return compiled;
+  }
+  for (const key of Object.keys(styles)) {
+    const value = styles[key];
+    if (typeof value === 'function') {
+      compiled[key] = () => ({ $$css: true, [key]: key });
+    } else {
+      compiled[key] = { $$css: true, [key]: key };
+    }
+  }
+  return compiled;
+}
+
+export function props() {
+  return {};
+}
+
+export default { create, props };
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = require('./build/react-strict-animated');
@@ -55,6 +55,34 @@ const config = [
       }),
       resolve()
     ]
+  },
+  {
+    external: ['react', 'react/jsx-runtime'],
+    input: path.join(
+      __dirname,
+      '../../react-strict-animated/dist/web/index.js'
+    ),
+    output: {
+      file: path.join(__dirname, './build/react-strict-animated.js'),
+      format: 'commonjs'
+    },
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          __DEV__: 'false'
+        }
+      }),
+      alias({
+        entries: [
+          {
+            find: '@stylexjs/stylex',
+            replacement: path.resolve(__dirname, './mocks/stylex.js')
+          }
+        ]
+      }),
+      resolve()
+    ]
   }
 ];
 

@@ -13,6 +13,8 @@ const { hideBin } = require('yargs/helpers');
 
 const createTests = require('./tests/css-create-tests');
 const createThemeTests = require('./tests/css-createTheme-tests');
+const animatedRenderTests = require('./tests/animated-render-tests');
+const animatedStartTests = require('./tests/animated-start-tests');
 
 // run.js --outfile filename.js
 const argv = yargs(hideBin(process.argv)).option('outfile', {
@@ -41,6 +43,8 @@ console.log('Running performance benchmark, please wait...');
 // Run tests
 createTests(options);
 createThemeTests(options);
+animatedRenderTests(options);
+animatedStartTests(options);
 
 const aggregatedResultsString = JSON.stringify(aggregatedResults, null, 2);
 

@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const React = require('react');
+const { createRoot } = require('react-dom/client');
+const { flushSync } = require('react-dom');
+
+const { createSuite } = require('../helpers');
+const { animated, Animation } = require('../react-strict-animated');
+const {
+  installAnimateMock,
+  setupDomGlobals,
+  teardownDomGlobals
+} = require('../animated-helpers');
+
+const GRAPH_CONFIGS = {
+  small: { depth: 2, transforms: 3 },
+  medium: { depth: 4, transforms: 6 },
+  large: { depth: 8, transforms: 12 }
+};
+
+function buildAnimatedStyle(baseValue, config) {
+  const { depth, transforms } = config;
+  const nodes = [];
+
+  for (let i = 0; i < transforms; i++) {
+    let node = baseValue;
+    for (let step = 0; step < depth; step++) {
+      node = Animation.interpolate(node, {
+        inputRange: [0, 1],
+        outputRange: [0, 1]
+      });
+    }
+    nodes.push(node);
+  }
+
+  const transformsArray = nodes.map((node, index) => {
+    if (index % 3 === 0) {
+      return { translateX: node };
+    }
+    if (index % 3 === 1) {
+      return { translateY: node };
+    }
+    return { scale: node };
+  });
+
+  return {
+    opacity: nodes[0] ?? baseValue,
+    transform: transformsArray
+  };
+}
+
+function AnimatedFixture({ configName, onValue }) {
+  const baseValue = Animation.useValue(0);
+
+  React.useLayoutEffect(() => {
+    onValue(baseValue);
+  }, [onValue, baseValue]);
+
+  const animatedStyle = React.useMemo(() => {
+    return buildAnimatedStyle(baseValue, GRAPH_CONFIGS[configName]);
+  }, [baseValue, configName]);
+
+  return React.createElement(animated.div, { animatedStyle });
+}
+
+function createUpdateHarness(configName) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  let value = null;
+
+  const onValue = (nextValue) => {
+    value = nextValue;
+  };
+
+  flushSync(() => {
+    root.render(React.createElement(AnimatedFixture, { configName, onValue }));
+  });
+
+  return {
+    cleanup() {
+      root.unmount();
+      container.remove();
+    },
+    getValue() {
+      if (value == null) {
+        throw new Error('Animated value was not captured for updates.');
+      }
+      return value;
+    }
+  };
+}
+
+function runSuite(options) {
+  const { suite, test } = createSuite('animated.render', options);
+
+  setupDomGlobals();
+  installAnimateMock();
+
+  test('mount small', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    flushSync(() => {
+      root.render(
+        React.createElement(AnimatedFixture, {
+          configName: 'small',
+          onValue: () => {}
+        })
+      );
+    });
+    root.unmount();
+    container.remove();
+  });
+
+  test('mount medium', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    flushSync(() => {
+      root.render(
+        React.createElement(AnimatedFixture, {
+          configName: 'medium',
+          onValue: () => {}
+        })
+      );
+    });
+    root.unmount();
+    container.remove();
+  });
+
+  test('mount large', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    flushSync(() => {
+      root.render(
+        React.createElement(AnimatedFixture, {
+          configName: 'large',
+          onValue: () => {}
+        })
+      );
+    });
+    root.unmount();
+    container.remove();
+  });
+
+  const smallUpdate = createUpdateHarness('small');
+  const mediumUpdate = createUpdateHarness('medium');
+  const largeUpdate = createUpdateHarness('large');
+  let updateToggle = 0;
+
+  test('update small', () => {
+    const value = smallUpdate.getValue();
+    updateToggle = updateToggle === 0 ? 1 : 0;
+    flushSync(() => {
+      value.setValue(updateToggle);
+    });
+  });
+
+  test('update medium', () => {
+    const value = mediumUpdate.getValue();
+    updateToggle = updateToggle === 0 ? 1 : 0;
+    flushSync(() => {
+      value.setValue(updateToggle);
+    });
+  });
+
+  test('update large', () => {
+    const value = largeUpdate.getValue();
+    updateToggle = updateToggle === 0 ? 1 : 0;
+    flushSync(() => {
+      value.setValue(updateToggle);
+    });
+  });
+
+  suite.on('complete', () => {
+    smallUpdate.cleanup();
+    mediumUpdate.cleanup();
+    largeUpdate.cleanup();
+    teardownDomGlobals();
+  });
+
+  suite.run();
+}
+
+module.exports = runSuite;