WIP: Update to work with solidjs v1.7 and typescript v5

[garth]

I couldn't get this lib to work with the lest solid js version, so had a go at fixing the issues.

I added prettier and eslint, fixed a bunch of minor issues and updated typescript, rollup, vite, etc... There are still a lot of eslint issues, but the remaining ones are mostly not important.

The demo app now works with the latest solidjs version and the jsx errors are gone, but not tested with anything bigger yet.

Only issue that I dind't find a fix for and I'm not happy with my workaround was this:

export type CreateSpringProps<Props extends object = any> = unknown &
  PickAnimated<Props> extends infer State
  ? Remap<
      ControllerUpdate<State> & {
        /**
         * Used to access the imperative API.
         *
         * When defined, the render animation won't auto-start.
         */
        ref?: SpringRef<State>
      }
    >
  : never

This gives a type error Type 'State' does not satisfy the constraint 'Lookup<any>' so I changed to the following just to get it to compiles, but I'm sure it's not correct:

export type CreateSpringProps<Props extends object = any> = unknown &
  PickAnimated<Props> extends infer State
  ? Remap<
      ControllerUpdate & { // previously: ControllerUpdate<State> & {
        /**
         * Used to access the imperative API.
         *
         * When defined, the render animation won't auto-start.
         */
        ref?: SpringRef // previously: ref?: SpringRef<State>
      }
    >
  : never

[garth]

Trying to integrate this into an app and I'm finding that the types for <animiated.xxx> children are not correct. This was also the case before this PR, but should also be fixed.

<animated.div>
  <Element />
</animated.div>

This gives the following type error: Type 'Element' is not assignable to type 'number | boolean | Node | (string & {}) | FluidValue<NonObject<Element>, any> | AnimatedStyles<ArrayElement> | null | undefined'

I figure the error could be in this code:

export type WithAnimated = ((Component: any) => any) & {
  // (Component: AnimatableComponent): any;
  [K in keyof JSX.IntrinsicElements]: (
    props: AnimatedProps<
      Merge<JSX.IntrinsicElements[K], { style?: StyleProps }>
    > &
      FluidProps<{
        scrollTop?: number
        scrollLeft?: number
      }>,
  ) => JSX.Element

I tried changing Merge<JSX.IntrinsicElements[K], { style?: StyleProps }>to Merge<JSX.IntrinsicElements[K], { style?: StyleProps; children: JSX.Element }>` But that didn't help.

[Aslemammad]

Thank you so much @garth I forgot I had such a project, do you want to be a maintainer? I can take this project into a new org (for solid-related libraries, like pmndrs)

Let me know your opinnion.

[garth]

Thanks for the offer, I don't think I understand enough to be a maintainer yet.... you, or someone more experienced with this kind of tech would still need to verify these changes.

I'm in the process of moving some performance critical stuff from react to solid (since react 18 it became much harder to manage render lifecycles). Other than this lib, I didn't find any other suitable animation libs for solid. So it would be really great to resurrect it if possible.

This PR is still a WIP, probably shouldn't be merged at least until the typing issues are resolved. I'm using the updated version internally via pnpm link.

[Aslemammad]

There's no issuess with verifying, I think you're able to handle that anyways.

Sure, let me know when it's ready.

[Aslemammad]

Why didn't I see this!