make solid-spring reactive

Author: Aslemammad

demo/src/App.tsx

@@ -1,25 +1,31 @@
 import {
   Component,
+  createSignal,
 } from "solid-js";
-import { createSpring, animated } from "solid-spring";
+import { createSpring, animated, config } from "solid-spring";
 
 function ChainExample() {
-  const styles = createSpring({
-    loop: true,
-    to: [
-      { opacity: 1, color: '#ffaaee' },
-      { opacity: 0, color: 'rgb(14,26,19)' },
-    ],
-    from: { opacity: 0, color: 'red' },
-  })
+  const [flip, set] = createSignal(false);
 
-  return <animated.div style={styles()}>I will fade in and out</animated.div>
+  const styles = createSpring(() => {
+    return {
+      to: { opacity: 1 },
+      from: { opacity: 0 },
+      reset: true,
+      reverse: flip(),
+      delay: 200,
+      config: config.molasses,
+      onRest: () => {
+        set(!flip());
+      },
+    };
+  });
+
+  return <animated.h1 style={styles()}>hello</animated.h1>;
 }
 
 const App: Component = () => {
-  return (
-    <ChainExample />
-  );
+  return <ChainExample />;
 };
 
 export default App;

spring/package.json

@@ -34,5 +34,8 @@
   "devDependencies": {
     "rollup-plugin-dts": "^4.2.0",
     "solid-js": "^1.3.13"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.3.13"
   }
 }

spring/rollup.config.js

@@ -13,6 +13,8 @@ const external = [
   ...Object.keys(pkg.peerDependencies || []),
   "worker_threads",
   "esbuild",
+  "solid-js",
+  "solid-js/web",
   "fs/promises",
 ];
 

spring/src/solid/createSpring.ts

@@ -1,4 +1,4 @@
-import { Accessor, createMemo } from "solid-js";
+import { Accessor, createEffect, createMemo } from "solid-js";
 import { SpringRef } from "../SpringRef";
 import type { SpringRef as SpringRefType } from "../SpringRef";
 import {
@@ -43,7 +43,7 @@ export function createSpring<Props extends object>(
 };
 
 export function createSpring(props: any): any {
-  const fn = is.fun(props) ? props : () => props;
+  const fn: Accessor<any> = createMemo(is.fun(props) ? props : () => props);
 
   const springsFn = createSprings(1, fn);
   const springMemo = createMemo(() => {

spring/src/solid/createSprings.ts

@@ -22,6 +22,7 @@ import {
   createEffect,
   createMemo,
   createRenderEffect,
+  createSignal,
   onCleanup,
 } from "solid-js";
 import { declareUpdate } from "../SpringValue";
@@ -110,13 +111,15 @@ export function createSprings<Props extends CreateSpringsProps>(
 
   // Cache old controllers to dispose in the commit phase.
   const prevLength = lengthFn() || 0;
+  const [update, setUpdate] = createSignal(Symbol())
 
   // Update existing controllers when "deps" are changed.
   createRenderEffect(() => {
     const length = lengthFn();
     declareUpdates(0, Math.min(prevLength, length));
   });
 
+
   /** Fill the `updates` array with declarative updates for the given index range. */
   function declareUpdates(startIndex: number, endIndex: number) {
     for (let i = startIndex; i < endIndex; i++) {
@@ -130,6 +133,7 @@ export function createSprings<Props extends CreateSpringsProps>(
         updates[i] = declareUpdate(update);
       }
     }
+    setUpdate(Symbol())
   }
 
   // New springs are created during render so users can pass them to
@@ -138,6 +142,8 @@ export function createSprings<Props extends CreateSpringsProps>(
   const springs = ctrls.map((ctrl, i) => getSprings(ctrl, updates[i]));
 
   createRenderEffect(() => {
+    update()
+
     layoutId++;
 
     // Replace the cached controllers.

spring/src/utils.ts

@@ -8,7 +8,6 @@ import { AnimatedArray } from "./AnimatedArray";
 import { AnimatedString } from "./AnimatedString";
 import { AnimatedValue, getAnimated } from "./animated";
 import { InferState } from "./runAsync";
-import { Component } from "solid-js";
 
 // types
 export class Any {