Add createSpring primitive.

[Blankeos]

Summary

• This PR adds the createSpring primitive. Inspired and Forked from https://svelte.dev/docs/svelte-motion#spring
• The API works exactly like createSignal, just that the setter will actually interpolate the value.
• It also has familiar opts as the one with svelte-motion/spring.
• I come from using Svelte and it's one of the most essential primitives I use for animation. I've been using Solid more and more and have come to love it. I think this primitive is one of the few missing for me here. I think Solid would greatly benefit from a primitive like this since we already have a tween primitive.

Example Usage:

export default function SpringyPage() {
  const [progress, setProgress] = createSpring(0);

  const [radialProgress, setRadialProgress] = createSpring(0, {
    stiffness: 0.05,
  });

  const [xy, setXY] = createSpring(
    { x: 50, y: 50 },
    { stiffness: 0.08, damping: 0.2, precision: 0.01 }
  );

  function toggleProgress() {
    if (progress() === 0) setProgress(1);
    else setProgress(0);
  }
  // ...

Witness, the springiness:

solidjs.spring.primitive.-.demo.mp4

Solid.CreateSpring.Demo.mp4

Todos:

• Tests
• README.md
• package.json

[changeset-bot]

⚠️ No Changeset found

Latest commit: 45d16ec

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[rcoopr]

Currently it allows you to pass a string as an input (or an array of strings, object with string values etc), but you could use a type like this to provide some validation

type SpringTargetPrimitive = number | Date;
type SpringTarget =
  | SpringTargetPrimitive
  | { [key: string]: SpringTargetPrimitive | SpringTarget }
  | SpringTargetPrimitive[]
  | SpringTarget[];

[Blankeos]

That's a good suggestion. Was also considering this. I just made it close to Svelte's implementation which was more loose with types.

But under the hood it does actually only implement those specific primitives: Date, Number, Array<Date | number>, and { [key: any]: Date | number> }.

Will definitely add it here. Thanks!

[Blankeos]

While implementing this, I ran into a bit of a hiccup. Didn't know generics behaved this way lol. They seem to convert the data primitives into constants. (e.g. passing 0 will make the type 0, 1 will be 1, etc.)

Luckily the fix was easy:

[Blankeos]

Update: I also figure of adding createDerivedSpring by the way, so that there's a similar API that works like the current createTween's API which doesn't return a setter, but takes in an Signal accessor.

const springValue = createDerivedSpring(signal, opts)

Will add this tonight.