pushing incremental changes

JonathonRP · Dec 12, 2024 · 23f98fc · 23f98fc
1 parent d5abf47
commit 23f98fc
Show file tree

Hide file tree

Showing 15 changed files with 81 additions and 110 deletions.
diff --git a/src/lib/components/motion/CyclingThroughStates.svelte b/src/lib/components/motion/CyclingThroughStates.svelte
@@ -23,7 +23,6 @@
         "#9EF4FF",
         "#0FBFFF",
     );
-    $: console.log($backgroundColor, $scale);
 </script>
 
 <Box cls="bg-slate-800 text-black">

diff --git a/src/lib/motion-start/animation/hooks/use-animated-state.svelte.ts b/src/lib/motion-start/animation/hooks/use-animated-state.svelte.ts
@@ -50,23 +50,10 @@ const useVisualState = makeUseVisualState({
  * on any version.
  */
 export function useAnimatedState(initialState: any) {
-	let animationState = initialState;
-	const visualState = useVisualState({}, false);
+	let animationState = $state(initialState);
+	const visualState = $derived(useVisualState({}, false));
 
-	let element = new StateVisualElement(
-		{
-			props: {
-				onUpdate: (v) => {
-					animationState = { ...v };
-				},
-			},
-			visualState,
-			presenceContext: null,
-		},
-		{ initialState }
-	);
-
-	element = new StateVisualElement(
+	const element = new StateVisualElement(
 		{
 			props: {
 				onUpdate: (v) => {
@@ -78,6 +65,7 @@ export function useAnimatedState(initialState: any) {
 		},
 		{ initialState }
 	);
+	$inspect(element);
 
 	$effect.pre(() => {
 		element.mount({});

diff --git a/src/lib/motion-start/components/AnimatePresence/AnimatePresence.svelte b/src/lib/motion-start/components/AnimatePresence/AnimatePresence.svelte
@@ -35,12 +35,16 @@ Copyright (c) 2018 Framer B.V. -->
 
     let _list = $state(list !== undefined ? list : show ? [{ key: 1 }] : []);
 
+    $effect(() => {
+        _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
+    });
+
     let presentChildren = $state(_list);
     const presentKeys = $derived(presentChildren.map(getChildKey));
 
     let isInitialRender = $state(true);
 
-    let renderedChildren = $state(
+    const renderedChildren = $derived(
         presentChildren.map((v) => ({
             present: true,
             item: v,
@@ -64,7 +68,7 @@ Copyright (c) 2018 Framer B.V. -->
         _list = [..._list];
     });
 
-    $effect.pre(() => {
+    $effect(() => {
         if (!isInitialRender) {
             /**
              * Update complete status of exiting children.
@@ -112,9 +116,7 @@ Copyright (c) 2018 Framer B.V. -->
                     item: child,
                     key: getChildKey(child),
                     onExit:
-                        !isInitialRender &&
-                        exitComplete.has(key) &&
-                        !_list.includes(child)
+                        exitComplete.has(key) && child
                             ? () => {
                                   exitingChildren.delete(key!);
 
@@ -131,7 +133,7 @@ Copyright (c) 2018 Framer B.V. -->
 
                                   // Defer re-rendering until all exiting children have indeed left
                                   if (!exitingChildren.size) {
-                                      renderedChildren = [..._list];
+                                      presentChildren = [..._list];
                                       forceRender?.();
                                       onExitComplete && onExitComplete();
                                   }
@@ -144,8 +146,8 @@ Copyright (c) 2018 Framer B.V. -->
              * Early return to ensure once we've set state with the latest diffed
              * children, we can immediately re-render.
              */
-            presentChildren = renderedChildren;
-            return;
+            // presentChildren = renderedChildren;
+            // return;
         } else {
             isInitialRender = false;
         }

diff --git a/src/lib/motion-start/components/AnimatePresence/PresenceChild/PresenceChild.svelte b/src/lib/motion-start/components/AnimatePresence/PresenceChild/PresenceChild.svelte
@@ -16,7 +16,6 @@ Copyright (c) 2018 Framer B.V. -->
     import { useContext } from "$lib/motion-start/context/utils/context.svelte.js";
     import { useId } from "$lib/motion-start/utils/useId.js";
     import { fromStore } from "svelte/store";
-    import { tick, untrack } from "svelte";
 
     interface Props extends PresenceChildProps {
         isCustom?: boolean;
@@ -59,40 +58,37 @@ Copyright (c) 2018 Framer B.V. -->
             },
         };
     });
-    let context = fromStore(useContext(PresenceContext, isCustom)).current;
+    let context = $derived(fromStore(useContext(PresenceContext, isCustom)));
 
-    $effect(() => {
+    $effect.pre(() => {
         if (presenceAffectsLayout) {
-            context = untrack(() => memoContext());
-            return;
+            context.current = memoContext();
         }
 
-        context = untrack(() => memoContext(refresh));
+        context.current = memoContext(refresh);
     });
 
     const keyset = (flag?: boolean) => {
         presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
     };
 
-    $effect(() => {
-        keyset(untrack(() => isPresent));
+    $inspect(isPresent);
+
+    $effect.pre(() => {
+        console.log(isPresent);
+        keyset(isPresent);
+
+        !isPresent && !presenceChildren.size && onExitComplete?.();
 
-        untrack(() => !isPresent) &&
-            !presenceChildren.size &&
-            onExitComplete?.();
-    });
-    $effect(() => {
         PresenceContext["_c"] = isCustom;
-        PresenceContext.Provider = context;
+        PresenceContext.Provider = context.current;
     });
 </script>
 
 {#if mode === "popLayout"}
     <PopChild {isPresent}>
-        {#if isPresent}
-            {@render children?.()}
-        {/if}
+        {@render children?.()}
     </PopChild>
-{:else if isPresent}
+{:else}
     {@render children?.()}
 {/if}
diff --git a/src/lib/motion-start/events/use-dom-event.svelte.ts b/src/lib/motion-start/events/use-dom-event.svelte.ts
@@ -1,4 +1,3 @@
-import { onDestroy, tick } from 'svelte';
 import type { RefObject } from '../utils/safe-react-types';
 import { addDomEvent } from './add-dom-event';
 
@@ -44,5 +43,7 @@ export function useDomEvent(
 			}
 		};
 
-	$effect.pre(initDomEvent(ref, eventName, handler, options));
+	const cleanup = initDomEvent(ref, eventName, handler, options);
+
+	$effect.pre(() => cleanup);
 }
diff --git a/src/lib/motion-start/motion/features/animation/exit.ts b/src/lib/motion-start/motion/features/animation/exit.ts
@@ -17,6 +17,8 @@ export class ExitAnimationFeature extends Feature<unknown> {
 		const { isPresent, onExitComplete } = this.node.presenceContext;
 		const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
 
+		console.log(isPresent, prevIsPresent);
+
 		if (!this.node.animationState || isPresent === prevIsPresent) {
 			return;
 		}

diff --git a/src/lib/motion-start/motion/features/types.ts b/src/lib/motion-start/motion/features/types.ts
@@ -62,10 +62,10 @@ export type RenderComponent<Instance, RenderState> = Component<
 	{
 		Component: string;
 		props: MotionProps;
-		ref: RefCallBack<Instance>;
+		// ref: RefCallBack<Instance>;
 		visualState: VisualState<Instance, RenderState>;
 		isStatic: boolean;
 		visualElement?: VisualElement<Instance>;
 		children?: Snippet;
-	} & { el: SvelteHTMLElements[Parameters<RenderComponent<Instance, RenderState>>[1]['Component']]['this'] }
+	} & { ref: SvelteHTMLElements[Parameters<RenderComponent<Instance, RenderState>>[1]['Component']]['this'] }
 >;
diff --git a/src/lib/motion-start/motion/index.svelte.ts b/src/lib/motion-start/motion/index.svelte.ts
@@ -72,9 +72,9 @@ export const createRendererMotionComponent = <Props extends {}, Instance, Render
 	preloadedFeatures && loadFeatures(preloadedFeatures);
 
 	const MotionComponent: Component<
-		MotionComponentProps<Props> & { externalRef?: Ref<Instance> | undefined; ref?: Instance | null }
+		MotionComponentProps<Props> & { externalRef?: Ref<Instance> | undefined; ref?: Instance | null | undefined }
 	> = (anchor, _props) => {
-		const { externalRef, children, ...props } = $derived(_props);
+		const { externalRef, ref, children, ...props } = $derived(_props);
 		// const props = () =>
 		// 	new Proxy(restProps, {
 		// 		get(target, key: keyof typeof restProps) {
@@ -84,7 +84,6 @@ export const createRendererMotionComponent = <Props extends {}, Instance, Render
 		// 			target[key] = value;
 		// 		},
 		// 	});
-		$inspect(props);
 
 		/**
 		 * If we need to measure the element we load this functionality in a
@@ -155,7 +154,10 @@ export const createRendererMotionComponent = <Props extends {}, Instance, Render
 				return props;
 			},
 			get ref() {
-				return useMotionRef<Instance, RenderState>(visualState, context.visualElement, externalRef);
+				return ref as Instance;
+			},
+			set ref(v: Instance) {
+				useMotionRef<Instance, RenderState>(visualState, context.visualElement, externalRef)(v);
 			},
 			get visualState() {
 				return visualState;
@@ -169,12 +171,6 @@ export const createRendererMotionComponent = <Props extends {}, Instance, Render
 			get children() {
 				return children;
 			},
-			get el() {
-				return props.ref;
-			},
-			set el(val) {
-				props.ref = val;
-			},
 		});
 
 		$effect(() => {

diff --git a/src/lib/motion-start/motion/utils/use-visual-element.svelte.ts b/src/lib/motion-start/motion/utils/use-visual-element.svelte.ts
@@ -18,7 +18,7 @@ import { isRefObject } from '../../utils/is-ref-object.js';
 import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id';
 import { microtask } from '../../frameloop/microtask';
 import { useContext } from '$lib/motion-start/context/utils/context.svelte';
-import { untrack } from 'svelte';
+import { tick } from 'svelte';
 
 export function useVisualElement<Instance, RenderState>(
 	Component: string,
@@ -30,60 +30,57 @@ export function useVisualElement<Instance, RenderState>(
 ): VisualElement<Instance> | undefined {
 	const { visualElement: parent } = $derived(fromStore(useContext(MotionContext, isCustom)).current);
 
-	const lazyContext = $derived(fromStore(useContext(LazyContext, isCustom)).current);
+	const lazyContext = $derived(fromStore(useContext(LazyContext, isCustom)));
 
-	const presenceContext = $derived(fromStore(useContext(PresenceContext, isCustom)).current);
+	const presenceContext = $derived(fromStore(useContext(PresenceContext, isCustom)));
+	$inspect(presenceContext.current);
 
-	const reducedMotionConfig = $derived(fromStore(useContext(MotionConfigContext)).current.reducedMotion);
+	const reducedMotionConfig = fromStore(useContext(MotionConfigContext)).current.reducedMotion;
 
 	let visualElementRef: VisualElement<Instance> | undefined = $state(undefined);
 
-	const props = $derived(_props());
+	const props = $derived.by(_props);
 	const visualState = $derived(_visualState);
 	const ProjectionNodeConstructor = $derived(projectionNodeConstructor?.());
 
-	$inspect(props);
-
 	/**
 	 * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
 	 */
-	createVisualElement = createVisualElement || lazyContext.renderer;
+	createVisualElement = createVisualElement || lazyContext.current.renderer;
 
 	if (!visualElementRef && createVisualElement) {
 		visualElementRef = createVisualElement(Component, {
 			visualState,
 			parent,
 			props,
-			presenceContext,
-			blockInitialAnimation: presenceContext?.initial === false,
+			presenceContext: presenceContext.current,
+			blockInitialAnimation: presenceContext.current?.initial === false,
 			reducedMotionConfig,
 		});
 	}
 
 	const visualElement: VisualElement<Instance> | undefined = $derived(visualElementRef);
 
-	const initialLayoutGroupConfig = $derived(fromStore(useContext(SwitchLayoutGroupContext, isCustom)).current);
+	const initialLayoutGroupConfig = $derived(fromStore(useContext(SwitchLayoutGroupContext, isCustom)));
 
 	if (
 		visualElement &&
 		!visualElement.projection &&
 		ProjectionNodeConstructor &&
 		(visualElement.type === 'html' || visualElement.type === 'svg')
 	) {
-		createProjectionNode(visualElementRef!, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
+		createProjectionNode(visualElementRef!, props, ProjectionNodeConstructor, initialLayoutGroupConfig.current);
 	}
 
 	let isMounted = false;
 	$effect.pre(() => {
-		// props.children?.();
 		isMounted = true;
-
-		/**
-		 * Check the component has already mounted before calling
-		 * `update` unnecessarily. This ensures we skip the initial update.
-		 */
 		if (visualElement && isMounted) {
-			visualElement?.update(props, presenceContext);
+			/**
+			 * Check the component has already mounted before calling
+			 * `update` unnecessarily. This ensures we skip the initial update.
+			 */
+			visualElement?.update(props, presenceContext.current);
 		}
 
 		return () => {
@@ -101,8 +98,8 @@ export function useVisualElement<Instance, RenderState>(
 		!window.MotionHandoffIsComplete?.(optimisedAppearId) &&
 		window.MotionHasOptimisedAnimation?.(optimisedAppearId);
 
-	$effect(() => {
-		if (!visualElement) return;
+	$effect.pre(() => {
+		if (!visualElement?.current) return;
 
 		isMounted = true;
 		window.MotionIsMounted = true;

diff --git a/src/lib/motion-start/motion/utils/use-visual-state.ts b/src/lib/motion-start/motion/utils/use-visual-state.ts
@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import { get } from 'svelte/store';
+import { fromStore } from 'svelte/store';
 import type { ResolvedValues, ScrapeMotionValuesFromProps } from '../../render/types';
 import type { MotionProps } from '../types';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.js';
@@ -55,9 +55,9 @@ function makeState<I, RS>(
 export const makeUseVisualState =
 	<I, RS>(config: UseVisualStateConfig<I, RS>): UseVisualState<I, RS> =>
 	(props: MotionProps, isStatic: boolean, isCustom = false): VisualState<I, RS> => {
-		const context = useContext(MotionContext, isCustom);
-		const presenceContext = useContext(PresenceContext, isCustom);
-		const make = () => makeState(config, props, get(context), get(presenceContext));
+		const context = fromStore(useContext(MotionContext, isCustom));
+		const presenceContext = fromStore(useContext(PresenceContext, isCustom));
+		const make = () => makeState(config, props, context.current, presenceContext.current);
 
 		let state = make();
 

diff --git a/src/lib/motion-start/render/VisualElement.svelte.ts b/src/lib/motion-start/render/VisualElement.svelte.ts
@@ -308,7 +308,6 @@ export abstract class VisualElement<
 	constructor(visualOptions: VisualElementOptions<Instance, RenderState>, options: Options = {} as any) {
 		const { parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState } =
 			$derived(visualOptions);
-		$inspect(props, parent, visualState);
 		const { latestValues, renderState } = visualState;
 		this.latestValues = latestValues;
 		this.baseTarget = { ...latestValues };
@@ -415,7 +414,7 @@ export abstract class VisualElement<
 	private bindToMotionValue(key: string, value: MotionValue) {
 		if (this.valueSubscriptions.has(key)) {
 			// this is to insure it runs on unmount and not during mount of keyed element
-			$effect(() => () => {
+			$effect.pre(() => () => {
 				this.valueSubscriptions.get(key)!();
 			});
 		}