fix: 🐛 svg animation and ssr support

enable svg animation and ssr support BREAKING CHANGE: 🧨 all ✅ Closes: none
JonathonRP · Dec 8, 2024 · 5ae3550 · 5ae3550
1 parent f8fea46
commit 5ae3550
Show file tree

Hide file tree

Showing 59 changed files with 232 additions and 154 deletions.
diff --git a/src/lib/motion-start/animation/animators/AcceleratedAnimation.ts b/src/lib/motion-start/animation/animators/AcceleratedAnimation.ts
@@ -8,7 +8,7 @@ import { backInOut } from '../../easing/back';
 import { circInOut } from '../../easing/circ';
 import type { EasingDefinition } from '../../easing/types';
 import { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver';
-import type { ResolvedKeyframes } from '../../render/utils/KeyframesResolver';
+import type { ResolvedKeyframes } from '../../render/utils/KeyframesResolver.svelte';
 import { noop } from '../../utils/noop';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion';
 import type { MotionValue } from '../../value';

diff --git a/src/lib/motion-start/animation/animators/BaseAnimation.ts b/src/lib/motion-start/animation/animators/BaseAnimation.ts
@@ -8,7 +8,7 @@ import {
 	type KeyframeResolver,
 	type ResolvedKeyframes,
 	flushKeyframeResolvers,
-} from '../../render/utils/KeyframesResolver';
+} from '../../render/utils/KeyframesResolver.svelte';
 import { instantAnimationState } from '../../utils/use-instant-transition-state';
 import type {
 	AnimationPlaybackControls,

diff --git a/src/lib/motion-start/animation/animators/MainThreadAnimation.ts b/src/lib/motion-start/animation/animators/MainThreadAnimation.ts
@@ -6,7 +6,7 @@ Copyright (c) 2018 Framer B.V.
 import {
 	KeyframeResolver as DefaultKeyframeResolver,
 	type ResolvedKeyframes,
-} from '../../render/utils/KeyframesResolver';
+} from '../../render/utils/KeyframesResolver.svelte';
 import { spring } from '../generators/spring/index';
 import { inertia } from '../generators/inertia';
 import { keyframes as keyframesGeneratorFactory } from '../generators/keyframes';
@@ -184,6 +184,7 @@ export class MainThreadAnimation<T extends string | number> extends BaseAnimatio
 	}
 
 	onPostResolved() {
+		console.log('post resolve');
 		const { autoplay = true } = this.options;
 
 		this.play();
@@ -378,6 +379,7 @@ export class MainThreadAnimation<T extends string | number> extends BaseAnimatio
 	}
 
 	play() {
+		console.log('play', this.isStopped);
 		if (!this.resolver.isScheduled) {
 			this.resolver.resume();
 		}
@@ -437,6 +439,7 @@ export class MainThreadAnimation<T extends string | number> extends BaseAnimatio
 	 * animation.stop is returned as a reference from a useEffect.
 	 */
 	stop = () => {
+		console.log(new Error().stack?.toString());
 		this.resolver.cancel();
 		this.isStopped = true;
 		if (this.state === 'idle') return;

diff --git a/src/lib/motion-start/animation/animators/utils/can-animate.ts b/src/lib/motion-start/animation/animators/utils/can-animate.ts
@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { ResolvedKeyframes } from '../../../render/utils/KeyframesResolver';
+import type { ResolvedKeyframes } from '../../../render/utils/KeyframesResolver.svelte';
 import { warning } from '../../../utils/errors';
 import { isGenerator } from '../../generators/utils/is-generator';
 import type { AnimationGeneratorType } from '../../types';

diff --git a/src/lib/motion-start/animation/hooks/animation-controls.ts b/src/lib/motion-start/animation/hooks/animation-controls.ts
@@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.
 
 import { invariant } from '../../utils/errors';
 import { setTarget } from '../../render/utils/setters';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import type { AnimationControls, AnimationDefinition } from '../types';
 import { animateVisualElement } from '../interfaces/visual-element';
 

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
@@ -7,7 +7,7 @@ import type { TargetAndTransition } from '../../types';
 import type { ResolvedValues } from '../../render/types';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state';
 import { createBox } from '../../projection/geometry/models';
-import { VisualElement } from '../../render/VisualElement';
+import { VisualElement } from '../../render/VisualElement.svelte';
 import { animateVisualElement } from '../interfaces/visual-element';
 
 interface AnimatedStateOptions {

diff --git a/src/lib/motion-start/animation/interfaces/motion-value.ts b/src/lib/motion-start/animation/interfaces/motion-value.ts
@@ -9,10 +9,10 @@ import type { MotionValue, StartAnimation } from '../../value';
 import { getDefaultTransition } from '../utils/default-transitions';
 import { getValueTransition } from '../utils/get-value-transition';
 import type { AnimationPlaybackControls, ValueAnimationOptions } from '../types';
-import type { UnresolvedKeyframes } from '../../render/utils/KeyframesResolver';
+import type { UnresolvedKeyframes } from '../../render/utils/KeyframesResolver.svelte';
 import { MotionGlobalConfig } from '../../utils/GlobalConfig';
 import { instantAnimationState } from '../../utils/use-instant-transition-state';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe';
 import { frame } from '../../frameloop/frame';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation';

diff --git a/src/lib/motion-start/animation/interfaces/visual-element-target.ts b/src/lib/motion-start/animation/interfaces/visual-element-target.ts
@@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.
 
 import { transformProps } from '../../render/html/utils/transform';
 import type { AnimationTypeState } from '../../render/utils/animation-state';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import type { TargetAndTransition } from '../../types';
 import type { VisualElementAnimationOptions } from './types';
 import { animateMotionValue } from './motion-value';

diff --git a/src/lib/motion-start/animation/interfaces/visual-element-variant.ts b/src/lib/motion-start/animation/interfaces/visual-element-variant.ts
@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { resolveVariant } from '../../render/utils/resolve-dynamic-variants';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import type { VisualElementAnimationOptions } from './types';
 import { animateTarget } from './visual-element-target';
 

diff --git a/src/lib/motion-start/animation/interfaces/visual-element.ts b/src/lib/motion-start/animation/interfaces/visual-element.ts
@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { resolveVariant } from '../../render/utils/resolve-dynamic-variants';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import type { AnimationDefinition } from '../types';
 import type { VisualElementAnimationOptions } from './types';
 import { animateTarget } from './visual-element-target';

diff --git a/src/lib/motion-start/animation/types.ts b/src/lib/motion-start/animation/types.ts
@@ -4,14 +4,14 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import type { TargetAndTransition, TargetResolver } from '../types';
-import type { VisualElement } from '../render/VisualElement';
+import type { VisualElement } from '../render/VisualElement.svelte';
 import type { Easing } from '../easing/types';
 import type { Driver } from './animators/drivers/types';
 import type { SVGPathProperties, VariantLabels } from '../motion/types';
 import type { SVGAttributes } from '../render/svg/types-attributes';
 import type { ProgressTimeline } from '../render/dom/scroll/observe';
 import type { MotionValue } from '../value';
-import type { KeyframeResolver, OnKeyframesResolved } from '../render/utils/KeyframesResolver';
+import type { KeyframeResolver, OnKeyframesResolved } from '../render/utils/KeyframesResolver.svelte';
 import type { KeyframeGenerator } from './generators/types';
 
 export interface AnimationPlaybackLifecycles<V> {

diff --git a/src/lib/motion-start/components/AnimatePresence/AnimatePresence.svelte b/src/lib/motion-start/components/AnimatePresence/AnimatePresence.svelte
@@ -9,7 +9,7 @@ Copyright (c) 2018 Framer B.V. -->
     import PresenceChild from "./PresenceChild/PresenceChild.svelte";
     import { fromStore } from "svelte/store";
     import { SvelteMap, SvelteSet } from "svelte/reactivity";
-    import { onMount, untrack, type Snippet } from "svelte";
+    import { untrack, type Snippet } from "svelte";
 
     type Props = AnimatePresenceProps<ConditionalGeneric<T>> & {
         isCustom?: boolean;

diff --git a/src/lib/motion-start/components/LazyMotion/LazyMotion.svelte b/src/lib/motion-start/components/LazyMotion/LazyMotion.svelte
@@ -11,7 +11,7 @@ Copyright (c) 2018 Framer B.V. -->
 </script>
 
 <script lang="ts">
-  import { onMount, type Snippet } from "svelte";
+  import { type Snippet } from "svelte";
 
   import { useContext } from "../../context/utils/context.svelte";
   import { LazyContext } from "../../context/LazyContext";

diff --git a/src/lib/motion-start/context/MotionContext/index.ts b/src/lib/motion-start/context/MotionContext/index.ts
@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import { createContext } from '../utils/context.svelte';
 
 export interface MotionContextProps<Instance = unknown> {

diff --git a/src/lib/motion-start/context/utils/context.svelte.ts b/src/lib/motion-start/context/utils/context.svelte.ts
@@ -31,15 +31,15 @@ class Context<T> extends CallableContext<T> {
 	) {
 		super((c?: any) => {
 			let context = null;
-			$effect(() => {
+			$effect.pre(() => {
 				context = getDomContext(this.key, this.c || c);
 			});
 			return getContext<T>(this) || context || this._default;
 		});
 	}
 
 	set Provider(value: UnwrapWritable<T>) {
-		$effect(() => {
+		$effect.pre(() => {
 			setDomContext(this.key, this.c, writable(value));
 		});
 		setContext(this, writable(value));

diff --git a/src/lib/motion-start/gestures/drag/VisualElementDragControls.ts b/src/lib/motion-start/gestures/drag/VisualElementDragControls.ts
@@ -18,7 +18,7 @@ import {
 	defaultElastic,
 	calcOrigin,
 } from './utils/constraints';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import type { MotionProps } from '../../motion/types';
 import type { Axis, Point } from '../../projection/geometry/types';
 import { createBox } from '../../projection/geometry/models';

diff --git a/src/lib/motion-start/gestures/drag/index.ts b/src/lib/motion-start/gestures/drag/index.ts
@@ -4,7 +4,7 @@ Copyright (c) 2018 Framer B.V.
 */
 
 import { Feature } from '../../motion/features/Feature';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import { noop } from '../../utils/noop';
 import { VisualElementDragControls } from './VisualElementDragControls';
 

diff --git a/src/lib/motion-start/gestures/hover.ts b/src/lib/motion-start/gestures/hover.ts
@@ -7,7 +7,7 @@ import { addPointerEvent } from '../events/add-pointer-event';
 import { pipe } from '../utils/pipe';
 import { isDragActive } from './drag/utils/lock';
 import type { EventInfo } from '../events/types';
-import type { VisualElement } from '../render/VisualElement';
+import type { VisualElement } from '../render/VisualElement.svelte';
 import { Feature } from '../motion/features/Feature';
 import { frame } from '../frameloop';
 

diff --git a/src/lib/motion-start/index.ts b/src/lib/motion-start/index.ts
@@ -81,7 +81,7 @@ export { useDomEvent } from './events/use-dom-event.svelte';
 export { createRendererMotionComponent } from './motion/index.svelte';
 export { isMotionComponent } from './motion/utils/is-motion-component';
 export { unwrapMotionComponent } from './motion/utils/unwrap-motion-component';
-export { VisualElement } from './render/VisualElement';
+export { VisualElement } from './render/VisualElement.svelte';
 export { addScaleCorrector } from './projection/styles/scale-correction';
 export {
 	useInstantTransition,

diff --git a/src/lib/motion-start/motion/features/Feature.ts b/src/lib/motion-start/motion/features/Feature.ts
@@ -3,7 +3,7 @@ based on [email protected],
 Copyright (c) 2018 Framer B.V.
 */
 
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 
 export abstract class Feature<I> {
 	isMounted = false;

diff --git a/src/lib/motion-start/motion/features/animation/index.svelte.ts b/src/lib/motion-start/motion/features/animation/index.svelte.ts
@@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.
 
 import { isAnimationControls } from '../../../animation/utils/is-animation-controls';
 import { createAnimationState } from '../../../render/utils/animation-state';
-import type { VisualElement } from '../../../render/VisualElement';
+import type { VisualElement } from '../../../render/VisualElement.svelte';
 import { Feature } from '../Feature';
 
 export class AnimationFeature extends Feature<unknown> {

diff --git a/src/lib/motion-start/motion/features/layout/MeasureLayout.ts b/src/lib/motion-start/motion/features/layout/MeasureLayout.ts
@@ -9,7 +9,7 @@ import { useContext } from '../../../context/utils/context.svelte';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext';
 import { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext';
 import type { MotionProps } from '../../types';
-import type { VisualElement } from '../../../render/VisualElement';
+import type { VisualElement } from '../../../render/VisualElement.svelte';
 import { default as MeasureLayoutWithContext } from './MeasureLayoutWithContext.svelte';
 import type { Component } from 'svelte';
 

diff --git a/src/lib/motion-start/motion/features/layout/MeasureLayoutWithContext.svelte b/src/lib/motion-start/motion/features/layout/MeasureLayoutWithContext.svelte
@@ -26,7 +26,7 @@ Copyright (c) 2018 Framer B.V. -->
 
 <script lang="ts">
   import { frame } from "../../../frameloop";
-  import { onDestroy, onMount } from "svelte";
+  import { onMount } from "svelte";
   import { addScaleCorrector } from "../../../projection/styles/scale-correction";
   import { globalProjectionState } from "../../../projection/node/state";
   import { microtask } from "../../../frameloop/microtask";

diff --git a/src/lib/motion-start/motion/features/types.ts b/src/lib/motion-start/motion/features/types.ts
@@ -5,12 +5,13 @@ Copyright (c) 2018 Framer B.V.
 
 import type { MotionProps } from '../types';
 import type { VisualState } from '../utils/use-visual-state';
-import type { VisualElement } from '../../render/VisualElement';
+import type { VisualElement } from '../../render/VisualElement.svelte';
 import type { CreateVisualElement } from '../../render/types';
 import type { Feature } from './Feature';
 import type { MeasureLayout } from './layout/MeasureLayout';
 import type { Ref, RefCallBack } from '../../utils/safe-react-types';
 import type { Component, Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
 
 export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
@@ -57,12 +58,14 @@ export interface FeatureBundle extends FeaturePackages {
 
 export type LazyFeatureBundle = () => Promise<FeatureBundle>;
 
-export type RenderComponent<Instance, RenderState> = Component<{
-	Component: string;
-	props: MotionProps;
-	ref: RefCallBack<Instance>;
-	visualState: VisualState<Instance, RenderState>;
-	isStatic: boolean;
-	visualElement?: VisualElement<Instance>;
-	children?: Snippet;
-}>;
+export type RenderComponent<Instance, RenderState> = Component<
+	{
+		Component: string;
+		props: MotionProps;
+		ref: RefCallBack<Instance>;
+		visualState: VisualState<Instance, RenderState>;
+		isStatic: boolean;
+		visualElement?: VisualElement<Instance>;
+		children?: Snippet;
+	} & { el: SvelteHTMLElements[Parameters<RenderComponent<Instance, RenderState>>[1]['Component']]['this'] }
+>;