refactor: 💡 finish removal of React

React removal and update types

BREAKING CHANGE: 🧨 none

✅ Closes: none

src/lib/motion-start/gestures/drag/use-drag-controls.ts

@@ -48,7 +48,7 @@ export class DragControls {
 	 *
 	 * @public
 	 */
-	start = (event: React.PointerEvent | PointerEvent, options?: DragControlOptions): void => {
+	start = (event: PointerEvent | { nativeEvent: PointerEvent }, options?: DragControlOptions): void => {
 		this.componentControls.forEach((controls) => {
 			controls.start('nativeEvent' in event ? event.nativeEvent : event, options);
 		});

src/lib/motion-start/motion/features/types.ts

@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 import type { Component } from 'svelte';
 import type { CreateVisualElement, VisualElement } from '../../render/types';
-import type { MotionProps } from '../types';
+import type { MotionProps, Ref } from '../types';
 import type { VisualState } from '../utils/use-visual-state';
 /**
  * @public
@@ -50,10 +50,11 @@ export type LazyFeatureBundle = () => Promise<FeatureBundle>;
 export type FeatureDefinitions = {
 	[K in keyof FeatureNames]: FeatureDefinition;
 };
+
 export type RenderComponent<Instance, RenderState> = (
-	Component: string | React.ComponentType,
+	Component: string | Component,
 	props: MotionProps,
-	ref: React.Ref<Instance>,
+	ref: Ref<Instance>,
 	visualState: VisualState<Instance, RenderState>,
 	isStatic: boolean
 ) => any;

src/lib/motion-start/motion/types.ts

@@ -11,6 +11,10 @@ import type { MakeCustomValueType, Omit, Target, TargetAndTransition, Transition
 import type { MotionValue } from '../value';
 import type { LayoutProps } from './features/layout/types';
 
+export type Ref<T> = (instance: T | null) => void | {
+	current: T | null;
+} | null;
+
 export type MotionStyleProp = string | number | MotionValue;
 /**
  * Either a string, or array of strings, that reference variants defined via the `variants` prop.

src/lib/motion-start/motion/utils/use-motion-ref.ts

@@ -2,9 +2,9 @@
 based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
-import type { VisualElement } from "../../render/types";
-import type { VisualState } from "./use-visual-state";
-
+import type { VisualElement } from '../../render/types';
+import type { VisualState } from './use-visual-state';
+import type { Ref } from '../types';
 
 /** 
 based on [email protected],
@@ -17,25 +17,25 @@ import { isRefObject } from '../../utils/is-ref-object.js';
  * Creates a ref function that, when called, hydrates the provided
  * external ref and VisualElement.
  */
-function useMotionRef<Instance, RenderState>(visualState: VisualState<Instance, RenderState>, visualElement?: VisualElement<Instance> | null, externalRef?: React.Ref<Instance>): React.Ref<Instance> {
-    return function (instance) {
-        var _a;
-        instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));
-        if (visualElement) {
-            instance
-                ? visualElement.mount(instance)
-                : visualElement.unmount();
-        }
-        if (externalRef) {
-            if (typeof externalRef === "function") {
-                externalRef(instance);
-            }
-            else if (isRefObject(externalRef)) {
-                externalRef.current = instance;
-            }
-        }
-    }
+function useMotionRef<Instance, RenderState>(
+	visualState: VisualState<Instance, RenderState>,
+	visualElement?: VisualElement<Instance> | null,
+	externalRef?: Ref<Instance>
+): Ref<Instance> {
+	return (instance) => {
+		var _a;
+		instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));
+		if (visualElement) {
+			instance ? visualElement.mount(instance) : visualElement.unmount();
+		}
+		if (externalRef) {
+			if (typeof externalRef === 'function') {
+				externalRef(instance);
+			} else if (isRefObject(externalRef)) {
+				externalRef.current = instance;
+			}
+		}
+	};
 }
 
 export { useMotionRef };
-

src/lib/motion-start/motion/utils/use-visual-element.ts

@@ -2,12 +2,16 @@
 based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
-import type { MotionProps } from "../types";
-import type { CreateVisualElement, VisualElement } from "../../render/types";
-import type { VisualState } from "./use-visual-state";
+import type { MotionProps } from '../types';
+import type { CreateVisualElement, VisualElement } from '../../render/types';
+import type { VisualState } from './use-visual-state';
+import type { Component } from 'svelte';
 
-
-export type useVisualElement = <Instance, RenderState>(Component: string | React.ComponentType, visualState: VisualState<Instance, RenderState>, props: MotionProps, createVisualElement?: CreateVisualElement<Instance>) => VisualElement<Instance> | undefined;
+export type useVisualElement = <Instance, RenderState>(
+	Component: string | Component,
+	visualState: VisualState<Instance, RenderState>,
+	props: MotionProps,
+	createVisualElement?: CreateVisualElement<Instance>
+) => VisualElement<Instance> | undefined;
 
 export { default as UseVisualElement } from './UseVisualElement.svelte';
-

src/lib/motion-start/render/dom/motion-proxy.ts

@@ -2,20 +2,25 @@
 based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
-import type { MotionComponentConfig } from "../../motion/index.js";
-import type { MotionProps } from "../../motion/types.js";
+import type { MotionComponentConfig } from '../../motion/index.js';
+import type { MotionProps } from '../../motion/types.js';
 /**
  * I'd rather the return type of `custom` to be implicit but this throws
  * incorrect relative paths in the exported types and API Extractor throws
  * a wobbly.
  *
  * @internal
  */
-export type CustomDomComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<SVGElement | HTMLElement>>;
+export type CustomDomComponent<Props extends Record<string, any>> = Component<
+	(Props & MotionProps) | (SVGElement | HTMLElement)
+>;
 export interface CustomMotionComponentConfig {
-    forwardMotionProps?: boolean;
+	forwardMotionProps?: boolean;
 }
-export type CreateConfig = <Instance, RenderState, Props>(Component: string | React.ComponentType<Props>, config: CustomMotionComponentConfig) => MotionComponentConfig<Instance, RenderState>;
+export type CreateConfig = <Instance, RenderState, Props extends Record<string, any>>(
+	Component: string | Component<Props>,
+	config: CustomMotionComponentConfig
+) => MotionComponentConfig<Instance, RenderState>;
 /**
  * Convert any React component into a `motion` component. The provided component
  * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
@@ -32,7 +37,6 @@ export type CreateConfig = <Instance, RenderState, Props>(Component: string | Re
  */
 // export declare function createMotionProxy(createConfig: CreateConfig): (<Props>(Component: string | React.ComponentType<Props>, customMotionComponentConfig?: CustomMotionComponentConfig) => CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents;
 
-
 /** 
 based on [email protected],
 Copyright (c) 2018 Framer B.V.
@@ -42,7 +46,10 @@ import type { SvelteHTMLElements } from 'svelte/elements';
 import Mo from './M.svelte';
 import { isSVGComponent } from './utils/is-svg-component.js';
 
-type M<Element extends keyof SvelteHTMLElements> = MotionProps & {children: Snippet, class: string} & Omit<SvelteHTMLElements[Element], 'style'>;
+type M<Element extends keyof SvelteHTMLElements> = MotionProps & { children: Snippet; class: string } & Omit<
+		SvelteHTMLElements[Element],
+		'style'
+	>;
 type motion<Element extends keyof SvelteHTMLElements> = Component<M<Element>>;
 /**
  * Convert any React component into a `motion` component. The provided component
@@ -85,15 +92,15 @@ function createMotionProxy(): { [P in keyof SvelteHTMLElements]: motion<P> } {
 						//@ts-ignore
 						return new target(...args);
 					},
-                    // support svelte 5
+					// support svelte 5
 					apply(target, thisArg, args) {
 						if (!args[1]) {
 							args[1] = { ___tag: key, isSVG: type };
 						} else {
 							args[1].___tag = key;
 							args[1].isSVG = type;
 						}
-						//@ts-ignore
+						// @ts-expect-error
 						return target(...args);
 					},
 				});
@@ -104,5 +111,4 @@ function createMotionProxy(): { [P in keyof SvelteHTMLElements]: motion<P> } {
 
 const M = createMotionProxy();
 
-export { M, createMotionProxy };
-
+export { type M, createMotionProxy };

src/lib/motion-start/render/html/types.ts

@@ -2,7 +2,7 @@
 based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 import type { MotionProps } from '../../motion/types';
 import type { ResolvedValues } from '../types';
 import type { HTMLElements } from './supported-elements';
@@ -42,13 +42,13 @@ export interface HTMLRenderState {
 /**
  * @public
  */
-export type ForwardRefComponent<T, P> = Snippet<[T & P]>;
+export type ForwardRefComponent<T extends Record<string, any>, P extends Record<string, any>> = Component<T & P>;
 
 /**
  * Motion-optimised versions of React's HTML components.
  *
  * @public
  */
 export type HTMLMotionComponents = {
-	[K in HTMLElements]: Component<MotionProps>;
+	[K in HTMLElements]: ForwardRefComponent<MotionProps, SvelteHTMLElements[K]>;
 };

src/lib/motion-start/render/svg/types.ts

@@ -2,7 +2,7 @@
 based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
-import type { SVGAttributes } from 'svelte/elements';
+import type { SVGAttributes, SvelteHTMLElements } from 'svelte/elements';
 import type { MakeMotion, MotionProps } from '../../motion/types';
 import type { ForwardRefComponent, HTMLRenderState } from '../html/types';
 import type { ResolvedValues } from '../types';
@@ -35,7 +35,6 @@ interface SVGAttributesWithoutMotionProps<T extends EventTarget>
  * @public
  */
 export type SVGAttributesAsMotionValues<T extends EventTarget> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
-type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
 /**
  * @public
  */
@@ -46,8 +45,5 @@ export interface SVGMotionProps<T extends EventTarget> extends SVGAttributesAsMo
  * @public
  */
 export type SVGMotionComponents = {
-	[K in SVGElements]: ForwardRefComponent<
-		UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>,
-		SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>
-	>;
+	[K in SVGElements]: ForwardRefComponent<MotionProps, SvelteHTMLElements[K]>;
 };