solid api

Author: Aslemammad

spring/src/solid/createSpring.ts

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

spring/src/solid/createSprings.ts

@@ -0,0 +1,185 @@
+import {
+  ControllerFlushFn,
+  ControllerUpdate,
+  detachRefs,
+  is,
+  Lookup,
+  PickAnimated,
+  replaceRef,
+  SpringValues,
+} from "../utils";
+import { SpringRef } from "../SpringRef";
+import type { SpringRef as SpringRefType } from "../SpringRef";
+import { each } from "../utils";
+import {
+  Controller,
+  flushUpdateQueue,
+  getSprings,
+  setSprings,
+} from "../Controller";
+import {
+  Accessor,
+  createEffect,
+  createMemo,
+  createRenderEffect,
+  onCleanup,
+} from "solid-js";
+import { declareUpdate } from "../SpringValue";
+
+export type CreateSpringsProps<State extends Lookup = Lookup> = unknown &
+  ControllerUpdate<State> & {
+    ref?: SpringRefType<State>;
+  };
+
+export function createSprings<Props extends CreateSpringsProps>(
+  lengthFn: () => number,
+  props: Props[] & CreateSpringsProps<PickAnimated<Props>>[]
+): Accessor<
+  [SpringValues<PickAnimated<Props>>[], SpringRefType<PickAnimated<Props>>]
+>;
+
+export function createSprings<Props extends CreateSpringsProps>(
+  lengthFn: () => number,
+  props: (i: number, ctrl: Controller) => Props
+): Accessor<
+  [SpringValues<PickAnimated<Props>>[], SpringRefType<PickAnimated<Props>>]
+>;
+
+export function createSprings<Props extends CreateSpringsProps>(
+  lengthFn: () => number,
+  props: any[] | ((i: number, ctrl: Controller) => any)
+): Accessor<
+  [SpringValues<PickAnimated<Props>>[], SpringRefType<PickAnimated<Props>>]
+> {
+  const propsFn = is.fun(props) ? props : undefined;
+  const ref = SpringRef();
+
+  interface State {
+    // The controllers used for applying updates.
+    ctrls: Controller[];
+    // The queue of changes to make on commit.
+    queue: Array<() => void>;
+    // The flush function used by controllers.
+    flush: ControllerFlushFn;
+  }
+  let layoutId = 0;
+
+  const state: State = {
+    ctrls: [],
+    queue: [],
+    flush(ctrl, updates) {
+      const springs = getSprings(ctrl, updates);
+
+      // Flushing is postponed until the component's commit phase
+      // if a spring was created since the last commit.
+      const canFlushSync =
+        layoutId > 0 &&
+        !state.queue.length &&
+        !Object.keys(springs).some((key) => !ctrl.springs[key]);
+
+      return canFlushSync
+        ? flushUpdateQueue(ctrl, updates)
+        : new Promise<any>((resolve) => {
+            setSprings(ctrl, springs);
+            state.queue.push(() => {
+              resolve(flushUpdateQueue(ctrl, updates));
+            });
+            // forceUpdate()
+          });
+    },
+  };
+
+  const ctrls = [...state.ctrls];
+
+  const updates: any[] = [];
+  // Create new controllers when "length" increases, and destroy
+  // the affected controllers when "length" decreases.
+  createEffect(() => {
+    const length = lengthFn();
+    // Clean up any unused controllers
+    each(ctrls.slice(length, prevLength), (ctrl) => {
+      detachRefs(ctrl, ref);
+      ctrl.stop(true);
+    });
+    ctrls.length = length;
+
+    declareUpdates(prevLength, length);
+  });
+
+  // Cache old controllers to dispose in the commit phase.
+  const prevLength = lengthFn() || 0;
+
+  // 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++) {
+      const ctrl = ctrls[i] || (ctrls[i] = new Controller(null, state.flush));
+
+      const update: CreateSpringsProps<any> = propsFn
+        ? propsFn(i, ctrl)
+        : (props as any)[i];
+
+      if (update) {
+        updates[i] = declareUpdate(update);
+      }
+    }
+  }
+
+  // New springs are created during render so users can pass them to
+  // their animated components, but new springs aren't cached until the
+  // commit phase (see the `useLayoutEffect` callback below).
+  const springs = ctrls.map((ctrl, i) => getSprings(ctrl, updates[i]));
+
+  createRenderEffect(() => {
+    layoutId++;
+
+    // Replace the cached controllers.
+    state.ctrls = ctrls;
+
+    // Flush the commit queue.
+    const { queue } = state;
+    if (queue.length) {
+      state.queue = [];
+      each(queue, (cb) => cb());
+    }
+
+    // Update existing controllers.
+    each(ctrls, (ctrl, i) => {
+      // Attach the controller to the local ref.
+      ref.add(ctrl);
+
+      // Update the default props.
+      /* if (hasContext) {
+        ctrl.start({ default: context })
+      } */
+
+      // Apply updates created during render.
+      const update = updates[i];
+      if (update) {
+        // Update the injected ref if needed.
+        replaceRef(ctrl, update.ref);
+
+        // When an injected ref exists, the update is postponed
+        // until the ref has its `start` method called.
+        if (ctrl.ref) {
+          ctrl.queue.push(update);
+        } else {
+          ctrl.start(update);
+        }
+      }
+    });
+  });
+
+  onCleanup(() => {
+    each(state.ctrls, (ctrl) => ctrl.stop(true));
+  });
+
+  const value = createMemo(() => [springs.map((x) => ({ ...x })), ref]);
+
+  return value as any;
+}