framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.27k stars 733 forks source link

Add `$$typeof` brand back to ForwardRefComponent #2631

Closed jeremybanka closed 4 weeks ago

jeremybanka commented 4 weeks ago

The recent change to Framer's ForwardRefComponent type breaks compatibility with React.ForwardRefExoticComponent due to a missing property $$typeof, which lives on React.ExoticComponent.

This means that Framer's motion components won't be accepted in contexts calling for a standard ForwardRefExoticComponent. See below:

Working in framer-motion@11.1.3, but breaks in framer-motion@11.1.4

import * as React from "react"
import { motion } from "framer-motion"

function myComponentFactory<P>(component: React.ForwardRefExoticComponent<P>) {
  // implementation
}

myComponentFactory(motion.header) 
/*
❗ Property '$$typeof' is missing in type 'ForwardRefComponent<HTMLElement, HTMLMotionProps<"header">>'
*/

With this change, ForwardRefComponent's type behaves as normal, and can retain the JSX.Element return type while better supporting React's type implementation.

jeremybanka commented 4 weeks ago

For reference, here is the CI run where this cropped up for me. https://github.com/jeremybanka/wayforge/actions/runs/8739979388/job/23982565561