nandorojo/moti

Typescript support motifySvg

XantreDev opened this issue · 10 comments

Is there an existing issue for this?

  • I have searched the existing issues

Current Behavior

Wrong typings. You can pass functions and other props to animate prop. And cannot pass regular svg props

Expected Behavior

You can pass regular svg element props. In animate prop there are no functions

Steps To Reproduce

Just use motifySvg for any of components

Versions

- Moti: 0.23.3

Screenshots

image

![image](https://user-images.githubusercontent.com/57757211/218756870-6a09b8c9-df58-4dda-a28d-ec7b1fa3bf0f.png)

image

Reproduction

I can try to fix it by myself

patch that fixes it

diff --git a/node_modules/moti/build/svg/motify-svg.d.ts b/node_modules/moti/build/svg/motify-svg.d.ts
index e079a49..1b8c36e 100644
--- a/node_modules/moti/build/svg/motify-svg.d.ts
+++ b/node_modules/moti/build/svg/motify-svg.d.ts
@@ -1,7 +1,6 @@
 import React from 'react';
 import { ExcludeFunctionKeys, MotiProps } from '../core/types';
 declare type AdditionalProps = {
-    children?: React.ReactNode;
     /**
      * Animated props are not allowed with a Moti SVG component, since they will be overridden.
      *
@@ -23,5 +22,5 @@ declare type AdditionalProps = {
      */
     animatedProps?: never;
 };
-export declare function motifySvg<Props, C extends React.ComponentClass<any> = React.ComponentClass<Props>, Animate = ExcludeFunctionKeys<Omit<React.ComponentPropsWithoutRef<C>, 'children'>>>(ComponentWithoutAnimation: C): () => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotiProps<Animate, import("../core/types").StyleValueWithReplacedTransforms<Animate>, Partial<import("../core/types").StyleValueWithSequenceArraysWithoutTransform<import("../core/types").StyleValueWithReplacedTransforms<Animate>, "transform" | "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "transform">> & import("../core/types").StyleValueWithSequenceArraysWithTransform>> & AdditionalProps> & React.RefAttributes<React.RefAttributes<React.ElementRef<C>>>>;
+export declare function motifySvg<C extends React.ComponentClass<any>,Props = React.ComponentPropsWithoutRef<C>,Animate = ExcludeFunctionKeys<Omit<Props, 'children'>>>(ComponentWithoutAnimation: C): () => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotiProps<Animate, import("../core/types").StyleValueWithReplacedTransforms<Animate>, Partial<import("../core/types").StyleValueWithSequenceArraysWithoutTransform<import("../core/types").StyleValueWithReplacedTransforms<Animate>, "transform" | "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY" | Exclude<Exclude<keyof Animate, "scaleX" | "scaleY" | "translateX" | "translateY" | "perspective" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "scale" | "skewX" | "skewY">, "transform">> & import("../core/types").StyleValueWithSequenceArraysWithTransform>> & AdditionalProps> & React.RefAttributes<React.RefAttributes<React.ElementRef<C>>>>;
 export {};

can you try upgrading moti?

I think yes. Project is not working on windows, btw

You checked PR? #265

can you try upgrading moti?

yarn add moti

Your function is shitty typed, still. Why are you ignoring me?

I'm responding within minutes, telling you to upgrade to the latest version (0.23.4) where this issue should be resolved. That's hardly ignoring you.

Screenshot 2023-02-14 at 12 28 45 PM

It's possible this works in the example app but not when exported.

Try 0.23.5

I just created a fresh project with 0.23.4, and it worked fine. Rather than assuming I was ignoring you, it would have been best to just try the upgrade. Locking this.

I was looking for changes in the moti master branch. I've seen wrong typings before you hadn't merge my PR))