update

Author: Aslemammad

spring/src/scheduleProps.ts

@@ -0,0 +1,100 @@
+import * as G from './globals'
+import { raf } from "./rafz";
+import { InferProps, InferState, RunAsyncProps, RunAsyncState } from "./runAsync";
+import { AnimationResolver, AnimationTarget, AsyncResult, callProp, is, matchProp, MatchProp, Timeout } from "./utils";
+
+// The `scheduleProps` function only handles these defaults.
+type DefaultProps<T> = { cancel?: MatchProp<T>; pause?: MatchProp<T> }
+
+interface ScheduledProps<T extends AnimationTarget> {
+  key?: string
+  props: InferProps<T>
+  defaultProps?: DefaultProps<InferState<T>>
+  state: RunAsyncState<T>
+  actions: {
+    pause: () => void
+    resume: () => void
+    start: (props: RunAsyncProps<T>, resolve: AnimationResolver<T>) => void
+  }
+}
+
+/**
+ * This function sets a timeout if both the `delay` prop exists and
+ * the `cancel` prop is not `true`.
+ *
+ * The `actions.start` function must handle the `cancel` prop itself,
+ * but the `pause` prop is taken care of.
+ */
+export function scheduleProps<T extends AnimationTarget>(
+  callId: number,
+  { key, props, defaultProps, state, actions }: ScheduledProps<T>
+): AsyncResult<T> {
+  return new Promise((resolve, reject) => {
+    let delay: number
+    let timeout: Timeout
+
+    let cancel = matchProp(props.cancel ?? defaultProps?.cancel, key)
+    if (cancel) {
+      onStart()
+    } else {
+      // The `pause` prop updates the paused flag.
+      if (!is.und(props.pause)) {
+        state.paused = matchProp(props.pause, key)
+      }
+      // The default `pause` takes precedence when true,
+      // which allows `SpringContext` to work as expected.
+      let pause = defaultProps?.pause
+      if (pause !== true) {
+        pause = state.paused || matchProp(pause, key)
+      }
+
+      delay = callProp(props.delay || 0, key)
+      if (pause) {
+        state.resumeQueue.add(onResume)
+        actions.pause()
+      } else {
+        actions.resume()
+        onResume()
+      }
+    }
+
+    function onPause() {
+      state.resumeQueue.add(onResume)
+      state.timeouts.delete(timeout)
+      timeout.cancel()
+      // Cache the remaining delay.
+      delay = timeout.time - raf.now()
+    }
+
+    function onResume() {
+      if (delay > 0 && !G.skipAnimation) {
+        state.delayed = true
+        timeout = raf.setTimeout(onStart, delay)
+        state.pauseQueue.add(onPause)
+        state.timeouts.add(timeout)
+      } else {
+        onStart()
+      }
+    }
+
+    function onStart() {
+      if (state.delayed) {
+        state.delayed = false
+      }
+
+      state.pauseQueue.delete(onPause)
+      state.timeouts.delete(timeout)
+
+      // Maybe cancelled during its delay.
+      if (callId <= (state.cancelId || 0)) {
+        cancel = true
+      }
+
+      try {
+        actions.start({ ...props, callId, cancel }, resolve)
+      } catch (err) {
+        reject(err)
+      }
+    }
+  })
+}

spring/src/withAnimated.tsx

@@ -0,0 +1,94 @@
+import { Dynamic } from "solid-js/web";
+import {
+  children,
+  createComponent,
+  createRenderEffect,
+  JSX,
+  onCleanup,
+  onMount,
+} from "solid-js";
+import { AnimatedObject } from "./AnimatedObject";
+import { TreeContext } from "./context";
+import { HostConfig } from "./createHost";
+import {
+  addFluidObserver,
+  FluidEvent,
+  FluidValue,
+  removeFluidObserver,
+} from "./fluids";
+import { each } from "./utils";
+import { raf } from "./rafz";
+
+export type AnimatableComponent = string;
+
+// Shout out to @Otonashi & @Alex Lohr: https://discord.com/channels/722131463138705510/817960620736380928/961505601039523880
+export const withAnimated = (Component: string, host: HostConfig) => {
+  return (props: any) => {
+    const c = children(() =>
+      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
+        ? host.applyAnimatedValues(instanceRef, _props.getValue(true))
+        : false;
+
+      // Re-render the component when native updates fail.
+      if (didUpdate === false) {
+        console.log(didUpdate);
+        // forceUpdate()
+      }
+    };
+
+    const observer = new PropsObserver(callback, deps);
+
+    createRenderEffect(() => {
+      // Observe the latest dependencies.
+      each(deps, (dep) => addFluidObserver(dep, observer));
+
+      // if (lastObserver) {
+      // each(observer.deps, (dep) => removeFluidObserver(dep, observer));
+      // raf.cancel(observer.update);
+      // }
+    });
+    callback();
+    onCleanup(() => {
+      each(observer.deps, (dep) => removeFluidObserver(dep, observer));
+    });
+
+    return c;
+  };
+};
+
+class PropsObserver {
+  constructor(readonly update: () => void, readonly deps: Set<FluidValue>) {}
+  eventObserved(event: FluidEvent) {
+    if (event.type == "change") {
+      raf.write(this.update);
+    }
+  }
+}
+
+type AnimatedState = [props: AnimatedObject, dependencies: Set<FluidValue>];
+
+function getAnimatedState(props: any, host: HostConfig): AnimatedState {
+  const dependencies = new Set<FluidValue>();
+  TreeContext.dependencies = dependencies;
+
+  // Search the style for dependencies.
+  if (props.style)
+    props = {
+      ...props,
+      style: host.createAnimatedStyle(props.style),
+    };
+
+  // Search the props for dependencies.
+  props = new AnimatedObject(props);
+
+  TreeContext.dependencies = null;
+  return [props, dependencies];
+}