Merge pull request #2619 from framer/feature/react-jsx

feat: use modern jsx transform

dev/examples/AnimatePresence-image-gallery.tsx

@@ -1,5 +1,4 @@
 import { motion, AnimatePresence, wrap } from "framer-motion"
-import * as React from "react"
 import { useState } from "react"
 
 /**

dev/examples/AnimatePresence-layout-animations-siblings.tsx

@@ -1,6 +1,5 @@
 import { motion, AnimatePresence, LayoutGroup } from "framer-motion"
-import * as React from "react"
-import { useState } from "react"
+import { useEffect, useState } from "react";
 
 /**
  * An example of an AnimatePresence child animating in and out with shared layout
@@ -33,7 +32,7 @@ function ExitComponent() {
 export const App = () => {
     const [isVisible, setVisible] = useState(true)
 
-    React.useEffect(() => {
+    useEffect(() => {
         setTimeout(() => {
             setVisible(!isVisible)
         }, 3000)

dev/examples/AnimatePresence-notifications-list-pop.tsx

@@ -1,8 +1,7 @@
-import * as React from "react"
-import { useState } from "react"
+import { forwardRef, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion"
 
-const Notification = React.forwardRef(function (
+const Notification = forwardRef(function (
     { id, notifications, setNotifications, style },
     ref
 ) {

dev/examples/AnimatePresence-notifications-list.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 

dev/examples/AnimatePresence-parallel-children.tsx

@@ -1,6 +1,5 @@
 import { motion, AnimatePresence } from "framer-motion"
-import * as React from "react"
-import { useState } from "react"
+import { useEffect, useState } from "react";
 
 /**
  * An example of three top-level AnimatePresence children controlling the exit of a single
@@ -17,7 +16,7 @@ const style = {
 export const App = () => {
     const [isVisible, setVisible] = useState(true)
 
-    React.useEffect(() => {
+    useEffect(() => {
         setTimeout(() => {
             setVisible(!isVisible)
         }, 3000)

dev/examples/AnimatePresence-siblings.tsx

@@ -1,5 +1,4 @@
 import { motion, AnimatePresence, LayoutGroup } from "framer-motion"
-import * as React from "react"
 import { useState } from "react"
 
 /**

dev/examples/AnimatePresence-variants.tsx

@@ -1,6 +1,5 @@
 import { motion, AnimatePresence } from "framer-motion"
-import * as React from "react"
-import { useState } from "react"
+import { useEffect, useState } from "react";
 
 /**
  * An example of AnimatePresence with exit defined as a variant through a tree.
@@ -42,7 +41,7 @@ const listVariants = {
 export const App = () => {
     const [isVisible, setVisible] = useState(true)
 
-    React.useEffect(() => {
+    useEffect(() => {
         setTimeout(() => {
             setVisible(!isVisible)
         }, 3000)

dev/examples/AnimatePresence.tsx

@@ -1,6 +1,5 @@
 import { motion, AnimatePresence } from "framer-motion"
-import * as React from "react"
-import { useState } from "react"
+import { useEffect, useState } from "react";
 
 /**
  * An example of a single-child AnimatePresence animation
@@ -16,7 +15,7 @@ const style = {
 export const App = () => {
     const [isVisible, setVisible] = useState(true)
 
-    React.useEffect(() => {
+    useEffect(() => {
         setTimeout(() => {
             setVisible(!isVisible)
         }, 1500)

dev/examples/Animation-CSS-variables.tsx

@@ -1,5 +1,4 @@
-import * as React from "react"
-import { useEffect } from "react"
+import { useRef, useEffect } from "react";
 import { motion } from "framer-motion"
 
 /**
@@ -20,7 +19,7 @@ export const App = () => {
         duration: 1,
     }
 
-    const ref = React.useRef<HTMLDivElement>(null)
+    const ref = useRef<HTMLDivElement>(null)
     useEffect(() => {
         function changeToVar() {
             ref.current.style.setProperty("--to", "cyan")

dev/examples/Animation-animate.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useEffect, useState } from "react"
 import { motion, motionValue, useAnimate } from "framer-motion"
 import { frame } from "framer-motion"

dev/examples/Animation-batch-read-writes.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { MotionConfig, motion } from "framer-motion"
 
 const style = {

dev/examples/Animation-between-value-types-x.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 
 /**

dev/examples/Animation-boxShadow.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 
 /**

dev/examples/Animation-cleanup.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
+import { useState } from "react";
 import { motion } from "framer-motion"
 
 export const App = () => {
-    const [open, setOpen] = React.useState(true)
+    const [open, setOpen] = useState(true)
     return (
         <div>
             {open && (

dev/examples/Animation-filter.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 /**

dev/examples/Animation-height-auto-display-none.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { mix, motion } from "framer-motion"
 

dev/examples/Animation-height-auto-padding.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 

dev/examples/Animation-height-auto-rotate-scale.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { motion, mix } from "framer-motion"
 

dev/examples/Animation-keyframes.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 
 /**

dev/examples/Animation-layout-delay-children.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 
 export const App = () => {

dev/examples/Animation-layout-nested-position.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 
 /**

dev/examples/Animation-layout-scale-correction.tsx

@@ -1,5 +1,4 @@
-import * as React from "react"
-import { useState } from "react"
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion"
 import styled from "styled-components"
 
@@ -12,7 +11,7 @@ export const App = () => {
     const [isOn, setIsOn] = useState(false)
 
     // Double render to ensure it doesn't matter if we trigger a animate transition mid-animation
-    React.useEffect(() => {
+    useEffect(() => {
         isOn && setTimeout(() => setIsOn(isOn), 500)
     }, [isOn])
 

dev/examples/Animation-layout-seperate-children.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { motion } from "framer-motion"
 

dev/examples/Animation-layout-size.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 
 /**

dev/examples/Animation-layout-text-size.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 import styled from "styled-components"
 

dev/examples/Animation-layout-transform-template.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { motion } from "framer-motion"
 import styled from "styled-components"

dev/examples/Animation-layout-update-stress.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useCycle } from "framer-motion"
 import styled from "styled-components"
 

dev/examples/Animation-repeat-spring.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 /**

dev/examples/Animation-reverse.tsx

@@ -1,5 +1,4 @@
 import { useAnimate } from "framer-motion"
-import * as React from "react"
 
 export const App = () => {
     const [scope, animate] = useAnimate()

dev/examples/Animation-stagger-custom.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import { useState, useEffect } from "react";
 import { useAnimation, distance2D, wrap } from "framer-motion"
 import { motion } from "framer-motion"
 
@@ -12,7 +12,7 @@ const stagger = 0.1
 let interval
 
 export const App = () => {
-    const [center, setCenter] = React.useState({ x: len / 2, y: len / 2 })
+    const [center, setCenter] = useState({ x: len / 2, y: len / 2 })
 
     const cells = Array.from(Array(count).keys()).map((i) => {
         return (
@@ -74,7 +74,7 @@ const Cell = ({ center, i, onClick }) => {
         })
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         animate()
     })
 

dev/examples/Animation-stress-mount.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 /**

dev/examples/Animation-transition-tween.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { motion } from "framer-motion"
 

dev/examples/Animation-variants.tsx

@@ -1,11 +1,11 @@
-import React from "react"
+import { Fragment, useState } from "react";
 import { motion, useMotionValue } from "framer-motion"
 
-const MotionFragment = motion(React.Fragment)
+const MotionFragment = motion(Fragment)
 
 export function App() {
     const backgroundColor = useMotionValue("#f00")
-    const [isActive, setIsActive] = React.useState(true)
+    const [isActive, setIsActive] = useState(true)
     return (
         <MotionFragment initial="initial" animate={isActive ? "to" : "initial"}>
             <motion.div>

dev/examples/Benchmark-cold-start-gsap.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import { useRef } from "react";
 import gsap from "gsap"
 import { useGSAP } from "@gsap/react"
 
@@ -26,7 +26,7 @@ const boxContainer = {
 const num = 100
 
 function Box() {
-    const ref = React.useRef(null)
+    const ref = useRef(null)
 
     useGSAP(
         () => {

dev/examples/Benchmark-cold-start-motion.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 /**

dev/examples/Drag-SharedLayout.tsx

@@ -1,5 +1,4 @@
-import * as React from "react"
-import { useState, useRef } from "react"
+import { useEffect, useState, useRef } from "react";
 import { motion } from "framer-motion"
 import styled from "styled-components"
 
@@ -68,7 +67,7 @@ function DragDrop() {
     const viewportWidth = useRef(0)
     const [is, setIs] = useState(true)
 
-    React.useEffect(() => {
+    useEffect(() => {
         viewportWidth.current = window.innerWidth
     }, [])
 

dev/examples/Drag-block-viewport-conditionally.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 const styleA = {

dev/examples/Drag-constraints-ref-small-container-layout.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useRef } from "react"
 import { motion } from "framer-motion"
 

dev/examples/Drag-constraints-ref-small-container.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useRef } from "react"
 import { motion } from "framer-motion"
 

dev/examples/Drag-constraints-ref.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useRef, useState } from "react"
 import { motion } from "framer-motion"
 

dev/examples/Drag-constraints-relative.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 const styleA = {

dev/examples/Drag-constraints-resize.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import { useState, useEffect } from "react";
 import { motion } from "framer-motion"
 
 const styleA = {
@@ -8,8 +8,8 @@ const styleA = {
 }
 
 export function App() {
-    const [backgroundColor, setBackgroundColor] = React.useState("darkgray")
-    React.useEffect(() => {
+    const [backgroundColor, setBackgroundColor] = useState("darkgray")
+    useEffect(() => {
         const listener = () => {
             // The re-render will have updateBlockedByResize as true and cause clearMeasurements() to be called.
             setBackgroundColor("pink")

dev/examples/Drag-draggable.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState, useRef, useEffect } from "react"
 import { motion } from "framer-motion"
 

dev/examples/Drag-nested.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 const scroll = {

dev/examples/Drag-svg.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 export const App = () => {

dev/examples/Drag-to-reorder.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useEffect, useState } from "react"
 import { Reorder, useMotionValue, animate } from "framer-motion"
 

dev/examples/Drag-useDragControls-snapToCursor.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useDragControls } from "framer-motion"
 
 /**

dev/examples/Drag-useDragControls.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion, useDragControls } from "framer-motion"
 
 /**

dev/examples/Events-onTap.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 /**

dev/examples/Events-pan.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { motion } from "framer-motion"
 
 const styleA = {