framer-motion 10.12.8-alpha.2 → 10.12.8

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-bcb6edf0.js');
+var indexLegacy = require('./index-legacy-9f6d433e.js');
 
 
 

package/dist/cjs/{index-legacy-bcb6edf0.js → index-legacy-9f6d433e.js}

@@ -2645,7 +2645,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.12.8-alpha.2";
+        this.version = "10.12.8";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3817,7 +3817,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.12.8-alpha.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.8-alpha.2 may not work as expected.`);
+                warnOnce(nextValue.version === "10.12.8", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.8 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -3985,7 +3985,7 @@ class VisualElement {
     mount(instance) {
         this.current = instance;
         visualElementStore.set(instance, this);
-        if (this.projection) {
+        if (this.projection && !this.projection.instance) {
             this.projection.mount(instance);
         }
         if (this.parent && this.isVariantNode && !this.isControllingVariants) {
@@ -4051,7 +4051,7 @@ class VisualElement {
         }
         return this.sortInstanceNodePosition(this.current, other.current);
     }
-    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, projectionId, initialLayoutGroupConfig) {
+    loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {
         let ProjectionNodeConstructor;
         let MeasureLayout;
         /**
@@ -4081,7 +4081,7 @@ class VisualElement {
             }
         }
         if (!this.projection && ProjectionNodeConstructor) {
-            this.projection = new ProjectionNodeConstructor(projectionId, this.latestValues, this.parent && this.parent.projection);
+            this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection);
             const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
             this.projection.setOptions({
                 layoutId,

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-bcb6edf0.js');
+var indexLegacy = require('./index-legacy-9f6d433e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -160,48 +160,6 @@ function loadFeatures(features) {
     }
 }
 
-/**
- * Creates a constant value over the lifecycle of a component.
- *
- * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
- * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
- * you can ensure that initialisers don't execute twice or more.
- */
-function useConstant(init) {
-    const ref = React.useRef(null);
-    if (ref.current === null) {
-        ref.current = init();
-    }
-    return ref.current;
-}
-
-/**
- * This should only ever be modified on the client otherwise it'll
- * persist through server requests. If we need instanced states we
- * could lazy-init via root.
- */
-const globalProjectionState = {
-    /**
-     * Global flag as to whether the tree has animated since the last time
-     * we resized the window
-     */
-    hasAnimatedSinceResize: true,
-    /**
-     * We set this to true once, on the first update. Any nodes added to the tree beyond that
-     * update will be given a `data-projection-id` attribute.
-     */
-    hasEverUpdated: false,
-};
-
-let id$3 = 1;
-function useProjectionId() {
-    return useConstant(() => {
-        if (globalProjectionState.hasEverUpdated) {
-            return id$3++;
-        }
-    });
-}
-
 const LayoutGroupContext = React.createContext({});
 
 /**
@@ -235,18 +193,6 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
         };
         const { isStatic } = configAndProps;
         const context = useCreateMotionContext(props);
-        /**
-         * Create a unique projection ID for this component. If a new component is added
-         * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing
-         * us to measure it as soon as any layout effect flushes pending layout animations.
-         *
-         * Performance note: It'd be better not to have to search the DOM for these elements.
-         * For newly-entering components it could be enough to only correct treeScale, in which
-         * case we could mount in a scale-correction mode. This wouldn't be enough for
-         * shared element transitions however. Perhaps for those we could revert to a root node
-         * that gets forceRendered and layout animations are triggered on its layout effect.
-         */
-        const projectionId = isStatic ? undefined : useProjectionId();
         const visualState = useVisualState(props, isStatic);
         if (!isStatic && indexLegacy.isBrowser) {
             /**
@@ -265,7 +211,7 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
             if (context.visualElement) {
                 MeasureLayout = context.visualElement.loadFeatures(
                 // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                configAndProps, isStrict, preloadedFeatures, projectionId, initialLayoutGroupConfig);
+                configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);
             }
         }
         /**
@@ -274,7 +220,7 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
          */
         return (React__namespace.createElement(MotionContext.Provider, { value: context },
             MeasureLayout && context.visualElement ? (React__namespace.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null,
-            useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));
+            useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));
     }
     const ForwardRefComponent = React.forwardRef(MotionComponent);
     ForwardRefComponent[motionComponentSymbol] = Component;
@@ -582,7 +528,7 @@ function useSVGProps(props, visualState, _isStatic, Component) {
 }
 
 function createUseRender(forwardMotionProps = false) {
-    const useRender = (Component, props, projectionId, ref, { latestValues }, isStatic) => {
+    const useRender = (Component, props, ref, { latestValues }, isStatic) => {
         const useVisualProps = isSVGComponent(Component)
             ? useSVGProps
             : useHTMLProps;
@@ -600,9 +546,6 @@ function createUseRender(forwardMotionProps = false) {
          */
         const { children } = props;
         const renderedChildren = React.useMemo(() => (indexLegacy.isMotionValue(children) ? children.get() : children), [children]);
-        if (projectionId) {
-            elementProps["data-projection-id"] = projectionId;
-        }
         return React.createElement(Component, {
             ...elementProps,
             children: renderedChildren,
@@ -611,6 +554,21 @@ function createUseRender(forwardMotionProps = false) {
     return useRender;
 }
 
+/**
+ * Creates a constant value over the lifecycle of a component.
+ *
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+ * you can ensure that initialisers don't execute twice or more.
+ */
+function useConstant(init) {
+    const ref = React.useRef(null);
+    if (ref.current === null) {
+        ref.current = init();
+    }
+    return ref.current;
+}
+
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
@@ -2771,6 +2729,24 @@ class FlatTree {
     }
 }
 
+/**
+ * This should only ever be modified on the client otherwise it'll
+ * persist through server requests. If we need instanced states we
+ * could lazy-init via root.
+ */
+const globalProjectionState = {
+    /**
+     * Global flag as to whether the tree has animated since the last time
+     * we resized the window
+     */
+    hasAnimatedSinceResize: true,
+    /**
+     * We set this to true once, on the first update. Any nodes added to the tree beyond that
+     * update will be given a `data-projection-id` attribute.
+     */
+    hasEverUpdated: false,
+};
+
 function record(data) {
     if (window.MotionDebug) {
         window.MotionDebug.record(data);
@@ -2796,7 +2772,7 @@ const projectionFrameData = {
 };
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
-        constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+        constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
             /**
              * A unique ID generated for every projection node.
              */
@@ -2882,8 +2858,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              *
              */
             this.eventHandlers = new Map();
+            this.hasTreeAnimated = false;
             // Note: Currently only running on root node
-            this.potentialNodes = new Map();
+            this.updateScheduled = false;
             this.checkUpdateFailed = () => {
                 if (this.isUpdating) {
                     this.isUpdating = false;
@@ -2918,13 +2895,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             // TODO Only running on root node
             this.sharedNodes = new Map();
-            this.elementId = elementId;
             this.latestValues = latestValues;
             this.root = parent ? parent.root || parent : this;
             this.path = parent ? [...parent.path, parent] : [];
             this.parent = parent;
             this.depth = parent ? parent.depth + 1 : 0;
-            elementId && this.root.registerPotentialNode(elementId, this);
             for (let i = 0; i < this.path.length; i++) {
                 this.path[i].shouldResetTransform = true;
             }
@@ -2944,13 +2919,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         hasListeners(name) {
             return this.eventHandlers.has(name);
         }
-        registerPotentialNode(elementId, node) {
-            this.potentialNodes.set(elementId, node);
-        }
         /**
          * Lifecycles
          */
-        mount(instance, isLayoutDirty = false) {
+        mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {
             if (this.instance)
                 return;
             this.isSVG = indexLegacy.isSVGElement(instance);
@@ -2961,7 +2933,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.root.nodes.add(this);
             this.parent && this.parent.children.add(this);
-            this.elementId && this.root.potentialNodes.delete(this.elementId);
             if (isLayoutDirty && (layout || layoutId)) {
                 this.isLayoutDirty = true;
             }
@@ -3086,6 +3057,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return visualElement && visualElement.getProps().transformTemplate;
         }
         willUpdate(shouldNotifyListeners = true) {
+            this.root.hasTreeAnimated = true;
             if (this.root.isUpdateBlocked()) {
                 this.options.onExitComplete && this.options.onExitComplete();
                 return;
@@ -3112,8 +3084,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
         }
-        // Note: Currently only running on root node
-        didUpdate() {
+        update() {
+            this.updateScheduled = false;
             const updateWasBlocked = this.isUpdateBlocked();
             // When doing an instant transition, we skip the layout update,
             // but should still clean up the measurements so that the next
@@ -3127,16 +3099,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (!this.isUpdating)
                 return;
             this.isUpdating = false;
-            /**
-             * Search for and mount newly-added projection elements.
-             *
-             * TODO: Every time a new component is rendered we could search up the tree for
-             * the closest mounted node and query from there rather than document.
-             */
-            if (this.potentialNodes.size) {
-                this.potentialNodes.forEach(mountNodeEarly);
-                this.potentialNodes.clear();
-            }
             /**
              * Write
              */
@@ -3157,6 +3119,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             indexLegacy.steps.preRender.process(indexLegacy.frameData);
             indexLegacy.steps.render.process(indexLegacy.frameData);
         }
+        didUpdate() {
+            if (!this.updateScheduled) {
+                this.updateScheduled = true;
+                queueMicrotask(() => this.update());
+            }
+        }
         clearAllSnapshots() {
             this.nodes.forEach(clearSnapshot);
             this.sharedNodes.forEach(removeLeadSnapshots);
@@ -3183,16 +3151,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          * Update measurements
          */
         updateSnapshot() {
-            var _a, _b;
             if (this.snapshot || !this.instance)
                 return;
             this.snapshot = this.measure();
-            if (((_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.framerName) === "Top") {
-                console.log("Update snapshot", this.snapshot.measuredBox.y);
-            }
         }
         updateLayout() {
-            var _a, _b;
             if (!this.instance)
                 return;
             // TODO: Incorporate into a forwarded scroll offset
@@ -3216,9 +3179,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             const prevLayout = this.layout;
             this.layout = this.measure(false);
-            if (((_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.framerName) === "Top") {
-                console.log("Update layout", this.layout.measuredBox.y);
-            }
             this.layoutCorrected = indexLegacy.createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
@@ -3549,7 +3509,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.layout);
         }
         calcProjection() {
-            var _a, _b, _c, _d;
+            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
@@ -3575,9 +3535,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this.resolvedRelativeTargetAt === indexLegacy.frameData.timestamp) {
                 canSkip = false;
             }
-            if (((_c = (_b = this.instance) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.framerName) === "Top") {
-                console.log("Calc projection", canSkip, (_d = this.target) === null || _d === void 0 ? void 0 : _d.y);
-            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -4202,23 +4159,6 @@ const defaultLayoutTransition = {
     duration: 0.45,
     ease: [0.4, 0, 0.1, 1],
 };
-function mountNodeEarly(node, elementId) {
-    /**
-     * Rather than searching the DOM from document we can search the
-     * path for the deepest mounted ancestor and search from there
-     */
-    let searchNode = node.root;
-    for (let i = node.path.length - 1; i >= 0; i--) {
-        if (Boolean(node.path[i].instance)) {
-            searchNode = node.path[i];
-            break;
-        }
-    }
-    const searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    const element = searchElement.querySelector(`[data-projection-id="${elementId}"]`);
-    if (element)
-        node.mount(element, true);
-}
 function roundAxis(axis) {
     axis.min = Math.round(axis.min);
     axis.max = Math.round(axis.max);
@@ -4252,7 +4192,7 @@ const HTMLProjectionNode = createProjectionNode({
     }),
     defaultParent: () => {
         if (!rootProjectionNode.current) {
-            const documentNode = new DocumentProjectionNode(0, {});
+            const documentNode = new DocumentProjectionNode({});
             documentNode.mount(window);
             documentNode.setOptions({ layoutScroll: true });
             rootProjectionNode.current = documentNode;
@@ -4491,9 +4431,11 @@ class MeasureLayoutWithContext extends React__default["default"].Component {
         const { projection } = this.props.visualElement;
         if (projection) {
             projection.root.didUpdate();
-            if (!projection.currentAnimation && projection.isLead()) {
-                this.safeToRemove();
-            }
+            queueMicrotask(() => {
+                if (!projection.currentAnimation && projection.isLead()) {
+                    this.safeToRemove();
+                }
+            });
         }
     }
     componentWillUnmount() {

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -80,9 +80,11 @@ class MeasureLayoutWithContext extends React__default.Component {
         const { projection } = this.props.visualElement;
         if (projection) {
             projection.root.didUpdate();
-            if (!projection.currentAnimation && projection.isLead()) {
-                this.safeToRemove();
-            }
+            queueMicrotask(() => {
+                if (!projection.currentAnimation && projection.isLead()) {
+                    this.safeToRemove();
+                }
+            });
         }
     }
     componentWillUnmount() {

package/dist/es/motion/index.mjs

@@ -7,7 +7,6 @@ import { useMotionRef } from './utils/use-motion-ref.mjs';
 import { useCreateMotionContext } from '../context/MotionContext/create.mjs';
 import { loadFeatures } from './features/load-features.mjs';
 import { isBrowser } from '../utils/is-browser.mjs';
-import { useProjectionId } from '../projection/node/id.mjs';
 import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
 import { LazyContext } from '../context/LazyContext.mjs';
 import { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';
@@ -37,18 +36,6 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
         };
         const { isStatic } = configAndProps;
         const context = useCreateMotionContext(props);
-        /**
-         * Create a unique projection ID for this component. If a new component is added
-         * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing
-         * us to measure it as soon as any layout effect flushes pending layout animations.
-         *
-         * Performance note: It'd be better not to have to search the DOM for these elements.
-         * For newly-entering components it could be enough to only correct treeScale, in which
-         * case we could mount in a scale-correction mode. This wouldn't be enough for
-         * shared element transitions however. Perhaps for those we could revert to a root node
-         * that gets forceRendered and layout animations are triggered on its layout effect.
-         */
-        const projectionId = isStatic ? undefined : useProjectionId();
         const visualState = useVisualState(props, isStatic);
         if (!isStatic && isBrowser) {
             /**
@@ -67,7 +54,7 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
             if (context.visualElement) {
                 MeasureLayout = context.visualElement.loadFeatures(
                 // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-                configAndProps, isStrict, preloadedFeatures, projectionId, initialLayoutGroupConfig);
+                configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);
             }
         }
         /**
@@ -76,7 +63,7 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, useRend
          */
         return (React.createElement(MotionContext.Provider, { value: context },
             MeasureLayout && context.visualElement ? (React.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null,
-            useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));
+            useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));
     }
     const ForwardRefComponent = forwardRef(MotionComponent);
     ForwardRefComponent[motionComponentSymbol] = Component;

package/dist/es/projection/node/HTMLProjectionNode.mjs

@@ -11,7 +11,7 @@ const HTMLProjectionNode = createProjectionNode({
     }),
     defaultParent: () => {
         if (!rootProjectionNode.current) {
-            const documentNode = new DocumentProjectionNode(0, {});
+            const documentNode = new DocumentProjectionNode({});
             documentNode.mount(window);
             documentNode.setOptions({ layoutScroll: true });
             rootProjectionNode.current = documentNode;

package/dist/es/projection/node/create-projection-node.mjs

@@ -42,7 +42,7 @@ const projectionFrameData = {
 };
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
     return class ProjectionNode {
-        constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+        constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
             /**
              * A unique ID generated for every projection node.
              */
@@ -128,8 +128,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              *
              */
             this.eventHandlers = new Map();
+            this.hasTreeAnimated = false;
             // Note: Currently only running on root node
-            this.potentialNodes = new Map();
+            this.updateScheduled = false;
             this.checkUpdateFailed = () => {
                 if (this.isUpdating) {
                     this.isUpdating = false;
@@ -164,13 +165,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             // TODO Only running on root node
             this.sharedNodes = new Map();
-            this.elementId = elementId;
             this.latestValues = latestValues;
             this.root = parent ? parent.root || parent : this;
             this.path = parent ? [...parent.path, parent] : [];
             this.parent = parent;
             this.depth = parent ? parent.depth + 1 : 0;
-            elementId && this.root.registerPotentialNode(elementId, this);
             for (let i = 0; i < this.path.length; i++) {
                 this.path[i].shouldResetTransform = true;
             }
@@ -190,13 +189,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         hasListeners(name) {
             return this.eventHandlers.has(name);
         }
-        registerPotentialNode(elementId, node) {
-            this.potentialNodes.set(elementId, node);
-        }
         /**
          * Lifecycles
          */
-        mount(instance, isLayoutDirty = false) {
+        mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {
             if (this.instance)
                 return;
             this.isSVG = isSVGElement(instance);
@@ -207,7 +203,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.root.nodes.add(this);
             this.parent && this.parent.children.add(this);
-            this.elementId && this.root.potentialNodes.delete(this.elementId);
             if (isLayoutDirty && (layout || layoutId)) {
                 this.isLayoutDirty = true;
             }
@@ -332,6 +327,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             return visualElement && visualElement.getProps().transformTemplate;
         }
         willUpdate(shouldNotifyListeners = true) {
+            this.root.hasTreeAnimated = true;
             if (this.root.isUpdateBlocked()) {
                 this.options.onExitComplete && this.options.onExitComplete();
                 return;
@@ -358,8 +354,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
         }
-        // Note: Currently only running on root node
-        didUpdate() {
+        update() {
+            this.updateScheduled = false;
             const updateWasBlocked = this.isUpdateBlocked();
             // When doing an instant transition, we skip the layout update,
             // but should still clean up the measurements so that the next
@@ -373,16 +369,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (!this.isUpdating)
                 return;
             this.isUpdating = false;
-            /**
-             * Search for and mount newly-added projection elements.
-             *
-             * TODO: Every time a new component is rendered we could search up the tree for
-             * the closest mounted node and query from there rather than document.
-             */
-            if (this.potentialNodes.size) {
-                this.potentialNodes.forEach(mountNodeEarly);
-                this.potentialNodes.clear();
-            }
             /**
              * Write
              */
@@ -403,6 +389,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             steps.preRender.process(frameData);
             steps.render.process(frameData);
         }
+        didUpdate() {
+            if (!this.updateScheduled) {
+                this.updateScheduled = true;
+                queueMicrotask(() => this.update());
+            }
+        }
         clearAllSnapshots() {
             this.nodes.forEach(clearSnapshot);
             this.sharedNodes.forEach(removeLeadSnapshots);
@@ -429,16 +421,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
          * Update measurements
          */
         updateSnapshot() {
-            var _a, _b;
             if (this.snapshot || !this.instance)
                 return;
             this.snapshot = this.measure();
-            if (((_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.framerName) === "Top") {
-                console.log("Update snapshot", this.snapshot.measuredBox.y);
-            }
         }
         updateLayout() {
-            var _a, _b;
             if (!this.instance)
                 return;
             // TODO: Incorporate into a forwarded scroll offset
@@ -462,9 +449,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             const prevLayout = this.layout;
             this.layout = this.measure(false);
-            if (((_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.framerName) === "Top") {
-                console.log("Update layout", this.layout.measuredBox.y);
-            }
             this.layoutCorrected = createBox();
             this.isLayoutDirty = false;
             this.projectionDelta = undefined;
@@ -795,7 +779,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.layout);
         }
         calcProjection() {
-            var _a, _b, _c, _d;
+            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
@@ -821,9 +805,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             if (this.resolvedRelativeTargetAt === frameData.timestamp) {
                 canSkip = false;
             }
-            if (((_c = (_b = this.instance) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.framerName) === "Top") {
-                console.log("Calc projection", canSkip, (_d = this.target) === null || _d === void 0 ? void 0 : _d.y);
-            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -1448,23 +1429,6 @@ const defaultLayoutTransition = {
     duration: 0.45,
     ease: [0.4, 0, 0.1, 1],
 };
-function mountNodeEarly(node, elementId) {
-    /**
-     * Rather than searching the DOM from document we can search the
-     * path for the deepest mounted ancestor and search from there
-     */
-    let searchNode = node.root;
-    for (let i = node.path.length - 1; i >= 0; i--) {
-        if (Boolean(node.path[i].instance)) {
-            searchNode = node.path[i];
-            break;
-        }
-    }
-    const searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    const element = searchElement.querySelector(`[data-projection-id="${elementId}"]`);
-    if (element)
-        node.mount(element, true);
-}
 function roundAxis(axis) {
     axis.min = Math.round(axis.min);
     axis.max = Math.round(axis.max);