update

Author: Aslemammad

demo/src/App.tsx

@@ -1,12 +1,7 @@
 import {
   Component,
-  createEffect,
-  createMemo,
-  createSignal,
-  createComponent,
 } from "solid-js";
 import { createSpring, animated } from "solid-spring";
-// console.log(createSpring({to: {x: 'h'}}));
 
 function ChainExample() {
   const styles = createSpring({
@@ -17,18 +12,14 @@ function ChainExample() {
     ],
     from: { opacity: 0, color: 'red' },
   })
-  console.log(styles()[0])
 
-  return <animated.div style={styles()[0]}>I will fade in and out</animated.div>
+  return <animated.div style={styles()}>I will fade in and out</animated.div>
 }
 
 const App: Component = () => {
-
   return (
     <ChainExample />
   );
 };
 
-// console.log(createComponent(() => <h1>hello</h1>, {}));
-
 export default App;

spring/src/solid/createSpring.ts

@@ -1,4 +1,4 @@
-import { Accessor, createEffect, createMemo } from "solid-js";
+import { Accessor, createMemo } from "solid-js";
 import { SpringRef } from "../SpringRef";
 import type { SpringRef as SpringRefType } from "../SpringRef";
 import {
@@ -10,7 +10,6 @@ import {
   Valid,
 } from "../utils";
 import { createSprings } from "./createSprings";
-import { Controller } from "../Controller";
 
 /**
  * The props that `useSpring` recognizes.
@@ -28,42 +27,29 @@ export type CreateSpringProps<Props extends object = any> = unknown &
       }
     >
   : never;
-/* export function createSpring<Props extends object>(
-  props: (...arg: any) => ((Props & Valid<Props, CreateSpringProps<Props>>) | CreateSpringProps)
-): Accessor<
-  [SpringValues<PickAnimated<Props>>, SpringRefType<PickAnimated<Props>>]
->; */
+
 export function createSpring<Props extends object>(
   props: () =>
     | (Props & Valid<Props, CreateSpringProps<Props>>)
     | CreateSpringProps
-): Accessor<
-  [SpringValues<PickAnimated<Props>>, SpringRefType<PickAnimated<Props>>]
->;
+): Accessor<SpringValues<PickAnimated<Props>>[]> & {
+  ref: SpringRefType<PickAnimated<Props>>;
+};
 
 export function createSpring<Props extends object>(
   props: (Props & Valid<Props, CreateSpringProps<Props>>) | CreateSpringProps
-): Accessor<
-  [SpringValues<PickAnimated<Props>>, SpringRefType<PickAnimated<Props>>]
->;
+): Accessor<SpringValues<PickAnimated<Props>>[]> & {
+  ref: SpringRefType<PickAnimated<Props>>;
+};
 
-export function createSpring<Props extends object>(props: any): any {
+export function createSpring(props: any): any {
   const fn = is.fun(props) ? props : () => props;
 
-  const springsFn = createSprings(() => 1, fn);
+  const springsFn = createSprings(1, fn);
   const springMemo = createMemo(() => {
-    const [[value], ref] = springsFn();
-
-    return [value as SpringValues<PickAnimated<Props>>, ref];
+    const [value] = springsFn();
+    return value
   });
+
   return springMemo;
 }
-
-/*
-* const props = createSpring(() => ({
-    to: { opacity: 1 },
-    from: { opacity: 0 },
-    reset: true,
-    onRest: () => set(!flip())
-  }))
-*/

spring/src/solid/createSprings.ts

@@ -32,25 +32,27 @@ export type CreateSpringsProps<State extends Lookup = Lookup> = unknown &
   };
 
 export function createSprings<Props extends CreateSpringsProps>(
-  lengthFn: () => number,
+  lengthFn: number | (() => number),
   props: Props[] & CreateSpringsProps<PickAnimated<Props>>[]
-): Accessor<
-  [SpringValues<PickAnimated<Props>>[], SpringRefType<PickAnimated<Props>>]
->;
+): Accessor<SpringValues<PickAnimated<Props>>[]> & {
+  ref: SpringRefType<PickAnimated<Props>>;
+};
 
 export function createSprings<Props extends CreateSpringsProps>(
-  lengthFn: () => number,
+  lengthFn: number | (() => number),
   props: (i: number, ctrl: Controller) => Props
-): Accessor<
-  [SpringValues<PickAnimated<Props>>[], SpringRefType<PickAnimated<Props>>]
->;
+): Accessor<SpringValues<PickAnimated<Props>>[]> & {
+  ref: SpringRefType<PickAnimated<Props>>;
+};
 
 export function createSprings<Props extends CreateSpringsProps>(
-  lengthFn: () => number,
+  lengthFn: any,
   props: any[] | ((i: number, ctrl: Controller) => any)
-): Accessor<
-  [SpringValues<PickAnimated<Props>>[], SpringRefType<PickAnimated<Props>>]
-> {
+): Accessor<SpringValues<PickAnimated<Props>>[]> & {
+  ref: SpringRefType<PickAnimated<Props>>;
+} {
+  const _lengthFn = lengthFn
+  lengthFn = is.fun(lengthFn) ? lengthFn : () => _lengthFn as number;
   const propsFn = is.fun(props) ? props : undefined;
   const ref = SpringRef();
 
@@ -179,7 +181,11 @@ export function createSprings<Props extends CreateSpringsProps>(
     each(state.ctrls, (ctrl) => ctrl.stop(true));
   });
 
-  const value = createMemo(() => [springs.map((x) => ({ ...x })), ref]);
+  const value: Accessor<SpringValues<PickAnimated<Props>>[]> & {
+    ref: SpringRefType<PickAnimated<Props>>;
+  } = createMemo(() => springs.map((x) => ({ ...x }))) as any;
 
-  return value as any;
+  value.ref = ref as any;
+
+  return value;
 }

spring/src/withAnimated.tsx

@@ -3,9 +3,7 @@ import {
   children,
   createComponent,
   createRenderEffect,
-  JSX,
   onCleanup,
-  onMount,
 } from "solid-js";
 import { AnimatedObject } from "./AnimatedObject";
 import { TreeContext } from "./context";
@@ -28,9 +26,7 @@ export const withAnimated = (Component: string, host: HostConfig) => {
       createComponent(Dynamic, { component: Component, ...props })
     );
     const instanceRef: Element = c() as any;
-    onMount(() => console.log("here"));
     const [_props, deps] = getAnimatedState(props, host);
-    console.log(_props, deps);
 
     const callback = () => {
       const didUpdate = instanceRef
@@ -39,7 +35,6 @@ export const withAnimated = (Component: string, host: HostConfig) => {
 
       // Re-render the component when native updates fail.
       if (didUpdate === false) {
-        console.log(didUpdate);
         // forceUpdate()
       }
     };