Updating approach

src/index.ts

@@ -1,7 +1,7 @@
 /**
  * Components
  */
-export { motion } from "./render/dom"
+export { motion, createDomMotionComponent } from "./render/dom"
 export { m } from "./render/dom/minimal-component"
 export { AnimatePresence } from "./components/AnimatePresence"
 export { AnimateSharedLayout } from "./components/AnimateSharedLayout"

src/motion/__tests__/create-component.test.tsx

@@ -0,0 +1,25 @@
+import { render } from "../../../jest.setup"
+import { createDomMotionComponent } from "../../render/dom"
+import * as React from "react"
+import { motionValue } from "../../value"
+
+const motion = { div: createDomMotionComponent("div") }
+describe("Legacy component", () => {
+    test("Animates", async () => {
+        const promise = new Promise((resolve) => {
+            const x = motionValue(0)
+            const onComplete = () => resolve(x.get())
+            const Component = () => (
+                <motion.div
+                    animate={{ x: 20 }}
+                    style={{ x }}
+                    onAnimationComplete={onComplete}
+                />
+            )
+            const { rerender } = render(<Component />)
+            rerender(<Component />)
+        })
+
+        return expect(promise).resolves.toBe(20)
+    })
+})

src/render/dom/index.ts

@@ -23,6 +23,23 @@ export type CustomDomComponent<Props> = React.ForwardRefExoticComponent<
         React.RefAttributes<SVGElement | HTMLElement>
 >
 
+const allMotionFeatures = [
+    MeasureLayout,
+    Animation,
+    Drag,
+    Gestures,
+    Exit,
+    AnimateLayout,
+]
+
+const domBaseConfig = {
+    useVisualElement: useDomVisualElement as any,
+    render: render as any,
+    animationControlsConfig: {
+        makeTargetAnimatable: parseDomVariant,
+    },
+}
+
 /**
  * Convert any React component into a `motion` component. The provided component
  * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
@@ -37,20 +54,15 @@ export type CustomDomComponent<Props> = React.ForwardRefExoticComponent<
  *
  * @public
  */
-
 export function createMotionProxy(defaultFeatures: MotionFeature[]) {
     type CustomMotionComponent = { custom: typeof custom }
     type Motion = HTMLMotionComponents &
         SVGMotionComponents &
         CustomMotionComponent
 
     const config: MotionComponentConfig<HTMLElement | SVGElement> = {
+        ...domBaseConfig,
         defaultFeatures,
-        useVisualElement: useDomVisualElement as any,
-        render: render as any,
-        animationControlsConfig: {
-            makeTargetAnimatable: parseDomVariant,
-        },
     }
 
     function custom<Props>(
@@ -73,19 +85,32 @@ export function createMotionProxy(defaultFeatures: MotionFeature[]) {
     return new Proxy({ custom }, { get }) as Motion
 }
 
-export const allMotionFeatures = [
-    MeasureLayout,
-    Animation,
-    Drag,
-    Gestures,
-    Exit,
-    AnimateLayout,
-]
-
 /**
  * HTML & SVG components, optimised for use with gestures and animation. These can be used as
  * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
  *
  * @public
  */
 export const motion = /*@__PURE__*/ createMotionProxy(allMotionFeatures)
+
+/**
+ * Create a DOM `motion` component with the provided string. This is primarily intended
+ * as a full alternative to `motion` for consumers who have to support environments that don't
+ * support `Proxy`.
+ *
+ * ```javascript
+ * import { createDomMotionComponent } from "framer-motion"
+ *
+ * const motion = {
+ *   div: createDomMotionComponent('div')
+ * }
+ * ```
+ *
+ * @public
+ */
+export function createDomMotionComponent(key: string) {
+    return createMotionComponent(key, {
+        ...domBaseConfig,
+        defaultFeatures: allMotionFeatures,
+    })
+}