From f5c89e8e4a52e34acffc8a5696abb4305959e346 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Fri, 25 Oct 2024 12:43:56 +0200
Subject: [PATCH] Removing will-change

---
 .../src/motion/__tests__/ssr.test.tsx         |   4 +-
 .../src/motion/utils/use-visual-state.ts      |  33 +----
 .../framer-motion/src/render/VisualElement.ts |   6 -
 .../src/render/html/HTMLVisualElement.ts      |   2 -
 .../src/render/html/config-motion.ts          |   1 -
 .../render/html/utils/scrape-motion-values.ts |   8 --
 .../__tests__/will-change.ssr.test.tsx        | 116 ++++++++++++++++++
 .../value/use-will-change/add-will-change.ts  |   2 -
 8 files changed, 120 insertions(+), 52 deletions(-)
 create mode 100644 packages/framer-motion/src/value/use-will-change/__tests__/will-change.ssr.test.tsx

diff --git a/packages/framer-motion/src/motion/__tests__/ssr.test.tsx b/packages/framer-motion/src/motion/__tests__/ssr.test.tsx
index 7fdd2a239e..1fa5093df5 100644
--- a/packages/framer-motion/src/motion/__tests__/ssr.test.tsx
+++ b/packages/framer-motion/src/motion/__tests__/ssr.test.tsx
@@ -146,7 +146,7 @@ function runTests(render: (components: any) => string) {
         )
 
         expect(div).toBe(
-            '<div style="will-change:transform;transform:translateX(100px) translateY(200px)"></div>'
+            '<div style="transform:translateX(100px) translateY(200px)"></div>'
         )
     })
 
@@ -165,7 +165,7 @@ function runTests(render: (components: any) => string) {
         )
 
         expect(customElement).toBe(
-            '<element-test style="will-change:transform;transform:translateX(100px) translateY(200px)"></element-test>'
+            '<element-test style="transform:translateX(100px) translateY(200px)"></element-test>'
         )
     })
 
diff --git a/packages/framer-motion/src/motion/utils/use-visual-state.ts b/packages/framer-motion/src/motion/utils/use-visual-state.ts
index 13d8086615..92f39667ef 100644
--- a/packages/framer-motion/src/motion/utils/use-visual-state.ts
+++ b/packages/framer-motion/src/motion/utils/use-visual-state.ts
@@ -15,7 +15,6 @@ import {
     isVariantNode as checkIsVariantNode,
 } from "../../render/utils/is-controlling-variants"
 import { TargetAndTransition } from "../../types"
-import { getWillChangeName } from "../../value/use-will-change/get-will-change-name"
 
 export interface VisualState<Instance, RenderState> {
     renderState: RenderState
@@ -29,7 +28,6 @@ export type UseVisualState<Instance, RenderState> = (
 ) => VisualState<Instance, RenderState>
 
 export interface UseVisualStateConfig<Instance, RenderState> {
-    applyWillChange?: boolean
     scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps
     createRenderState: () => RenderState
     onMount?: (
@@ -41,22 +39,19 @@ export interface UseVisualStateConfig<Instance, RenderState> {
 
 function makeState<I, RS>(
     {
-        applyWillChange = false,
         scrapeMotionValuesFromProps,
         createRenderState,
         onMount,
     }: UseVisualStateConfig<I, RS>,
     props: MotionProps,
     context: MotionContextProps,
-    presenceContext: PresenceContextProps | null,
-    isStatic: boolean
+    presenceContext: PresenceContextProps | null
 ) {
     const state: VisualState<I, RS> = {
         latestValues: makeLatestValues(
             props,
             context,
             presenceContext,
-            isStatic ? false : applyWillChange,
             scrapeMotionValuesFromProps
         ),
         renderState: createRenderState(),
@@ -74,8 +69,7 @@ export const makeUseVisualState =
     (props: MotionProps, isStatic: boolean): VisualState<I, RS> => {
         const context = useContext(MotionContext)
         const presenceContext = useContext(PresenceContext)
-        const make = () =>
-            makeState(config, props, context, presenceContext, isStatic)
+        const make = () => makeState(config, props, context, presenceContext)
 
         return isStatic ? make() : useConstant(make)
     }
@@ -102,13 +96,9 @@ function makeLatestValues(
     props: MotionProps,
     context: MotionContextProps,
     presenceContext: PresenceContextProps | null,
-    shouldApplyWillChange: boolean,
     scrapeMotionValues: ScrapeMotionValuesFromProps
 ) {
     const values: ResolvedValues = {}
-    const willChange = new Set()
-    const applyWillChange =
-        shouldApplyWillChange && props.style?.willChange === undefined
 
     const motionValues = scrapeMotionValues(props, {})
     for (const key in motionValues) {
@@ -168,24 +158,5 @@ function makeLatestValues(
         })
     }
 
-    // Add animating values to will-change
-    if (applyWillChange) {
-        if (animate && initial !== false && !isAnimationControls(animate)) {
-            forEachDefinition(props, animate, (target) => {
-                for (const name in target) {
-                    const memberName = getWillChangeName(name)
-
-                    if (memberName) {
-                        willChange.add(memberName)
-                    }
-                }
-            })
-        }
-
-        if (willChange.size) {
-            values.willChange = Array.from(willChange).join(",")
-        }
-    }
-
     return values
 }
diff --git a/packages/framer-motion/src/render/VisualElement.ts b/packages/framer-motion/src/render/VisualElement.ts
index d05c8cfabd..da30839aa0 100644
--- a/packages/framer-motion/src/render/VisualElement.ts
+++ b/packages/framer-motion/src/render/VisualElement.ts
@@ -135,12 +135,6 @@ export abstract class VisualElement<
         projection?: IProjectionNode
     ): void
 
-    /**
-     * If true, will-change will be applied to the element. Only HTMLVisualElements
-     * currently support this.
-     */
-    applyWillChange = false
-
     /**
      * If the component child is provided as a motion value, handle subscriptions
      * with the renderer-specific VisualElement.
diff --git a/packages/framer-motion/src/render/html/HTMLVisualElement.ts b/packages/framer-motion/src/render/html/HTMLVisualElement.ts
index c538de2787..0de27f45e7 100644
--- a/packages/framer-motion/src/render/html/HTMLVisualElement.ts
+++ b/packages/framer-motion/src/render/html/HTMLVisualElement.ts
@@ -26,8 +26,6 @@ export class HTMLVisualElement extends DOMVisualElement<
 > {
     type = "html"
 
-    applyWillChange = true
-
     readValueFromInstance(
         instance: HTMLElement,
         key: string
diff --git a/packages/framer-motion/src/render/html/config-motion.ts b/packages/framer-motion/src/render/html/config-motion.ts
index 06c3ec2794..d13545c637 100644
--- a/packages/framer-motion/src/render/html/config-motion.ts
+++ b/packages/framer-motion/src/render/html/config-motion.ts
@@ -8,7 +8,6 @@ export const htmlMotionConfig: Partial<
     MotionComponentConfig<HTMLElement, HTMLRenderState>
 > = {
     useVisualState: makeUseVisualState({
-        applyWillChange: true,
         scrapeMotionValuesFromProps,
         createRenderState: createHtmlRenderState,
     }),
diff --git a/packages/framer-motion/src/render/html/utils/scrape-motion-values.ts b/packages/framer-motion/src/render/html/utils/scrape-motion-values.ts
index a39d58a157..d971f5886e 100644
--- a/packages/framer-motion/src/render/html/utils/scrape-motion-values.ts
+++ b/packages/framer-motion/src/render/html/utils/scrape-motion-values.ts
@@ -23,13 +23,5 @@ export function scrapeMotionValuesFromProps(
         }
     }
 
-    /**
-     * If the willChange style has been manually set as a string, set
-     * applyWillChange to false to prevent it from automatically being applied.
-     */
-    if (visualElement && style && typeof style.willChange === "string") {
-        visualElement.applyWillChange = false
-    }
-
     return newValues
 }
diff --git a/packages/framer-motion/src/value/use-will-change/__tests__/will-change.ssr.test.tsx b/packages/framer-motion/src/value/use-will-change/__tests__/will-change.ssr.test.tsx
new file mode 100644
index 0000000000..ad352aa0d6
--- /dev/null
+++ b/packages/framer-motion/src/value/use-will-change/__tests__/will-change.ssr.test.tsx
@@ -0,0 +1,116 @@
+import { renderToString, renderToStaticMarkup } from "react-dom/server"
+import { MotionConfig, motion } from "../../../"
+import { motionValue } from "../../../value"
+
+function runTests(render: (components: any) => string) {
+    test("will-change not applied", () => {
+        const div = render(
+            <motion.div
+                initial={
+                    {
+                        x: 100,
+                        clipPath: "inset(10px)",
+                        "--color": "#000",
+                    } as any
+                }
+                animate={
+                    {
+                        x: 200,
+                        clipPath: "inset(20px)",
+                        "--color": "#fff",
+                    } as any
+                }
+            />
+        )
+
+        expect(div).toBe(
+            `<div style="--color:#000;clip-path:inset(10px);transform:translateX(100px)"></div>`
+        )
+    })
+
+    test("will-change not set in static mode", () => {
+        const div = render(
+            <MotionConfig isStatic>
+                <motion.div
+                    initial={{ x: 100, clipPath: "inset(10px)" } as any}
+                    animate={{ x: 200, clipPath: "inset(20px)" } as any}
+                />
+            </MotionConfig>
+        )
+
+        expect(div).toBe(
+            `<div style="clip-path:inset(10px);transform:translateX(100px)"></div>`
+        )
+    })
+
+    test("will-change manually set", () => {
+        const div = render(
+            <motion.div
+                initial={{ x: 100, "--color": "#000" } as any}
+                animate={{ x: 200 }}
+                style={{ willChange: "opacity" }}
+            />
+        )
+
+        expect(div).toBe(
+            `<div style="will-change:opacity;--color:#000;transform:translateX(100px)"></div>`
+        )
+    })
+
+    test("will-change manually set without animated values", () => {
+        const div = render(<motion.div style={{ willChange: "opacity" }} />)
+
+        expect(div).toBe(`<div style="will-change:opacity"></div>`)
+    })
+
+    test("will-change not set without animated values", () => {
+        const div = render(<motion.div style={{}} />)
+
+        expect(div).toBe(`<div></div>`)
+    })
+
+    test("Externally defined MotionValues not automatically added to will-change", () => {
+        const opacity = motionValue(0.5)
+        const div = render(<motion.div style={{ opacity }} />)
+
+        expect(div).toBe(`<div style="opacity:0.5"></div>`)
+    })
+
+    test("will-change manually set by MotionValue", () => {
+        const willChange = motionValue("opacity")
+        const div = render(
+            <motion.div
+                initial={{ x: 100, "--color": "#000" } as any}
+                animate={{ x: 200 }}
+                style={{ willChange }}
+            />
+        )
+
+        expect(div).toBe(
+            `<div style="--color:#000;will-change:opacity;transform:translateX(100px)"></div>`
+        )
+    })
+
+    test("will-change correctly not applied when isStatic", () => {
+        const div = render(
+            <MotionConfig isStatic>
+                <motion.div
+                    initial={{ x: 100, "--color": "#000" } as any}
+                    animate={{ x: 200 }}
+                />
+            </MotionConfig>
+        )
+
+        expect(div).toBe(
+            `<div style="--color:#000;transform:translateX(100px)"></div>`
+        )
+    })
+}
+
+describe("render", () => {
+    runTests(renderToString)
+})
+
+describe("renderToStaticMarkup", () => {
+    runTests(renderToStaticMarkup)
+})
diff --git a/packages/framer-motion/src/value/use-will-change/add-will-change.ts b/packages/framer-motion/src/value/use-will-change/add-will-change.ts
index 85a75e1de7..6edae115ed 100644
--- a/packages/framer-motion/src/value/use-will-change/add-will-change.ts
+++ b/packages/framer-motion/src/value/use-will-change/add-will-change.ts
@@ -5,8 +5,6 @@ export function addValueToWillChange(
     visualElement: VisualElement,
     key: string
 ) {
-    if (!visualElement.applyWillChange) return
-
     const willChange = visualElement.getValue("willChange")
 
     /**