Slightly improve types perf

.eslintrc

@@ -19,6 +19,9 @@
     "rules": {
         "@typescript-eslint/no-unused-vars": "warn",
         "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
+        "@typescript-eslint/explicit-module-boundary-types": "warn",
+
         "react/jsx-pascal-case": "error",
         "react-compiler/react-compiler": "warn",
 

packages/framer-motion/src/motion/types.ts

@@ -26,29 +26,31 @@ import { ViewportProps } from "./features/viewport/types"
  */
 export type VariantLabels = string | string[]
 
+type stringOrNumber = string | number
+
 export interface TransformProperties {
-    x?: string | number
-    y?: string | number
-    z?: string | number
-    translateX?: string | number
-    translateY?: string | number
-    translateZ?: string | number
-    rotate?: string | number
-    rotateX?: string | number
-    rotateY?: string | number
-    rotateZ?: string | number
-    scale?: string | number
-    scaleX?: string | number
-    scaleY?: string | number
-    scaleZ?: string | number
-    skew?: string | number
-    skewX?: string | number
-    skewY?: string | number
-    originX?: string | number
-    originY?: string | number
-    originZ?: string | number
-    perspective?: string | number
-    transformPerspective?: string | number
+    x?: stringOrNumber
+    y?: stringOrNumber
+    z?: stringOrNumber
+    translateX?: stringOrNumber
+    translateY?: stringOrNumber
+    translateZ?: stringOrNumber
+    rotate?: stringOrNumber
+    rotateX?: stringOrNumber
+    rotateY?: stringOrNumber
+    rotateZ?: stringOrNumber
+    scale?: stringOrNumber
+    scaleX?: stringOrNumber
+    scaleY?: stringOrNumber
+    scaleZ?: stringOrNumber
+    skew?: stringOrNumber
+    skewX?: stringOrNumber
+    skewY?: stringOrNumber
+    originX?: stringOrNumber
+    originY?: stringOrNumber
+    originZ?: stringOrNumber
+    perspective?: stringOrNumber
+    transformPerspective?: stringOrNumber
 }
 
 /**
@@ -65,19 +67,24 @@ export interface CustomStyles {
      * Framer Library custom prop types. These are not actually supported in Motion - preferably
      * we'd have a way of external consumers injecting supported styles into this library.
      */
-    size?: string | number
-    radius?: string | number
+    size?: stringOrNumber
+    radius?: stringOrNumber
     shadow?: string
     image?: string
 }
 
-export type MakeMotion<T> = MakeCustomValueType<{
-    [K in keyof T]:
-        | T[K]
-        | MotionValue<number>
-        | MotionValue<string>
-        | MotionValue<any> // A permissive type for Custom value types
-}>
+type MotionValueString = MotionValue<string>
+type MotionValueNumber = MotionValue<number>
+type MotionValueAny = MotionValue<any>
+type AMotionValue = MotionValueNumber | MotionValueString | MotionValueAny // any creates a permissive type for Custom value types
+
+type MotionValueHelper<T> = T | AMotionValue
+type MakeMotionHelper<T> = {
+    [K in keyof T]: MotionValueHelper<T[K]>
+}
+
+type MakeCustomValueTypeHelper<T> = MakeMotionHelper<T>
+export type MakeMotion<T> = MakeCustomValueTypeHelper<T>
 
 export type MotionCSS = MakeMotion<
     Omit<CSSProperties, "rotate" | "scale" | "perspective">
@@ -88,25 +95,27 @@ export type MotionCSS = MakeMotion<
  */
 export type MotionTransform = MakeMotion<TransformProperties>
 
+type MotionCSSVariablesHelper = MotionValueNumber | MotionValueString | stringOrNumber
+
 /**
  * TODO: Currently unused, would like to reimplement with the ability
  * to still accept React.CSSProperties.
  */
-export type MotionCSSVariables = {
-    [key: `--${string}`]:
-        | MotionValue<number>
-        | MotionValue<string>
-        | string
-        | number
+export interface MotionCSSVariables {
+    [key: `--${string}`]: MotionCSSVariablesHelper
 }
 
+type CustomStylesValueType = MakeCustomValueType<CustomStyles>
+type MotionSVGProps = MakeMotion<SVGPathProperties>
+
 /**
  * @public
  */
-export type MotionStyle = MotionCSS &
-    MotionTransform &
-    MakeMotion<SVGPathProperties> &
-    MakeCustomValueType<CustomStyles>
+export interface MotionStyle
+    extends MotionCSS,
+        MotionTransform,
+        MotionSVGProps,
+        CustomStylesValueType {}
 
 export type OnUpdate = (v: Target) => void
 
@@ -261,8 +270,10 @@ export interface MotionAdvancedProps {
     ignoreStrict?: boolean
 }
 
-type ExternalMotionValues = {
-    [key: string]: MotionValue<number> | MotionValue<string>
+type MotionStringOrNumber = MotionValueNumber | MotionValueString
+
+interface ExternalMotionValues {
+    [key: string]: MotionStringOrNumber
 }
 
 /**
@@ -325,7 +336,7 @@ export interface MotionProps
         generatedTransform: string
     ): string
 
-    children?: React.ReactNode | MotionValue<number> | MotionValue<string>
+    children?: React.ReactNode | MotionStringOrNumber
 
     "data-framer-appear-id"?: string
 }

packages/framer-motion/src/render/html/types.ts

@@ -35,12 +35,16 @@ export interface HTMLRenderState {
     vars: ResolvedValues
 }
 
+type PropsWithRefAttributes<T, P> = PropsWithoutRef<P> & RefAttributes<T>
+interface ReactTypeofSymbol {
+    readonly $$typeof: symbol
+}
+type ForwardRefFn<T, P> = (props: PropsWithRefAttributes<T, P>) => JSX.Element
+
 /**
  * @public
  */
-export type ForwardRefComponent<T, P> = { readonly $$typeof: symbol } & ((
-    props: PropsWithoutRef<P> & RefAttributes<T>
-) => JSX.Element)
+export type ForwardRefComponent<T, P> = ForwardRefFn<T, P> & ReactTypeofSymbol
 
 type AttributesWithoutMotionProps<Attributes> = {
     [K in Exclude<keyof Attributes, keyof MotionProps>]?: Attributes[K]

packages/framer-motion/src/render/types.ts

@@ -7,7 +7,7 @@ import { PresenceContextProps } from "../context/PresenceContext"
 import { MotionProps } from "../motion/types"
 import { AnimationDefinition } from "../animation/types"
 
-export type GenericValues = {
+export interface GenericValues {
     [key: string]: string | number
 }
 
@@ -26,7 +26,7 @@ export type ScrapeMotionValuesFromProps = (
 
 export type UseRenderState<RenderState = any> = () => RenderState
 
-export type VisualElementOptions<Instance, RenderState = any> = {
+export interface VisualElementOptions<Instance, RenderState = any> {
     visualState: VisualState<Instance, RenderState>
     parent?: VisualElement<unknown>
     variantParent?: VisualElement<unknown>