Skip to content

Commit

Permalink
checking in bunch of improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@JonathonRP
JonathonRP committed Jan 7, 2025
1 parent cd5bae8 commit cbe947c
Show file tree
Hide file tree
Showing 48 changed files with 312 additions and 379 deletions.
60 changes: 19 additions & 41 deletions bun.lock
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,27 +47,27 @@
"@changesets/cli": "^2.27.11",
"@emotion/is-prop-valid": "^1.3.1",
"@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.15.1",
"@sveltejs/kit": "^2.15.2",
"@sveltejs/package": "^2.3.7",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/typography": "^0.5.16",
"@tailwindcss/vite": "^4.0.0-beta.8",
"@tsconfig/svelte": "^5.0.4",
"@types/node": "^20.17.10",
"@types/node": "^20.17.12",
"@vitest/ui": "^2.1.8",
"csstype": "^3.1.3",
"publint": "^0.2.12",
"runed": "^0.22.0",
"publint": "^0.3.0",
"runed": "^0.23.0",
"sv": "^0.6.10",
"svelte-check": "^4.1.1",
"tailwindcss": "^4.0.0-beta.8",
"typescript": "^5.7.2",
"vite": "^6.0.6",
"vite": "^6.0.7",
"vitest": "^2.1.8"
},
"peerDependencies": {
"svelte": "^5.16.0"
"svelte": "^5.16.6"
},
"engines": {
"bun": ">=1.0.0",
Expand Down
32 changes: 17 additions & 15 deletions src/lib/components/motion/AnimatePresenceMode.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,23 @@
<ul
class="flex w-[300px] h-[300px] flex-col gap-[20px] m-0 p-0 list-none"
>
<AnimatePresence {mode}>
{#each items as id, indx (id)}
<motion.li
class="block bg-accent-500 h-[80px] w-full shrink-0 grow-0 basis-[80px] rounded-[20px] m-0 p-0"
layout
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
transition={{ type: "spring" }}
onclick={() => {
const newItems = [...items];
if (indx > -1) newItems.splice(indx, 1);
items = newItems;
}}
/>
{/each}
<AnimatePresence
{mode}
list={items.map((id, indx) => ({ key: id, id, indx }))}
let:item
>
<motion.li
class="block bg-accent-500 h-[80px] w-full shrink-0 grow-0 basis-[80px] rounded-[20px] m-0 p-0"
layout
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
transition={{ type: "spring" }}
onclick={() => {
const newItems = [...items];
if (item.indx > -1) newItems.splice(item.indx, 1);
items = newItems;
}}
/>
</AnimatePresence>
</ul>
</div>
Expand Down
17 changes: 0 additions & 17 deletions src/lib/components/motion/ReorderList.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,20 +68,3 @@
{/each}
</Reorder.Group>
</Box>

<style>
:global(li svg) {
width: 18px;
height: 18px;
cursor: grab;
}
:global(.background) {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: #fff;
}
</style>
0 ...tion-start/animation/hooks/use-animate.ts → ...art/animation/hooks/use-animate.svelte.ts
View file
File renamed without changes.
22 changes: 12 additions & 10 deletions ...art/animation/hooks/use-animated-state.ts → ...mation/hooks/use-animated-state.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V.

import type { TargetAndTransition } from '../../types';
import type { ResolvedValues } from '../../render/types';
import { makeUseVisualState } from '../../motion/utils/use-visual-state.svelte';
import { makeUseVisualState } from '../../motion/utils/use-visual-state';
import { createBox } from '../../projection/geometry/models';
import { VisualElement } from '../../render/VisualElement.svelte';
import { animateVisualElement } from '../interfaces/visual-element';
Expand Down Expand Up @@ -53,17 +53,19 @@ export function useAnimatedState(initialState: any) {
let animationState = $state(initialState);
const visualState = useVisualState({}, false);

const element = new StateVisualElement(
{
props: {
onUpdate: (v) => {
animationState = { ...v };
const element = $derived(
new StateVisualElement(
{
props: {
onUpdate: (v) => {
animationState = { ...v };
},
},
visualState,
presenceContext: null,
},
visualState,
presenceContext: null,
},
{ initialState }
{ initialState }
)
);

$effect.pre(() => {
Expand Down
10 changes: 6 additions & 4 deletions src/lib/motion-start/components/AnimatePresence/AnimatePresence.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ Copyright (c) 2018 Framer B.V. -->
let _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
$: _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
$: layoutContext = useContext(LayoutGroupContext);
$: layoutContext = useContext(LayoutGroupContext).current;
$: forceRender = () => {
layoutContext.forceRender?.();
layoutContext?.forceRender?.();
_list = [..._list];
};
Expand All @@ -37,8 +37,10 @@ Copyright (c) 2018 Framer B.V. -->
$: pendingPresentChildren = _list;
let presentChildren = pendingPresentChildren;
let diffedChildren = new SvelteMap<string | number, { key: number }>();
let exiting = new SvelteSet<"" | number>();
// $: presentChildren = pendingPresentChildren;
let diffedChildren = new Map<string | number, { key: number }>();
let exiting = new Set<"" | number>();
const updateChildLookup = (
children: { key: number }[],
allChild: Map<string | number, { key: number }>,
Expand Down
6 changes: 4 additions & 2 deletions src/lib/motion-start/components/AnimatePresence/PopChild/PopChild.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ Copyright (c) 2018 Framer B.V. -->
// PopChild ---
const id = useId();
let ref: RefObject<HTMLElement>;
let ref: RefObject<HTMLElement> = {
current: null,
};
let size: RefObject<Size> = {
current: {
width: 0,
Expand All @@ -55,7 +57,7 @@ Copyright (c) 2018 Framer B.V. -->
},
};
const { nonce } = $derived(useContext(MotionConfigContext));
const { nonce } = $derived(useContext(MotionConfigContext).current);
/**
* We create and inject a style block so we can apply this explicit
Expand Down
50 changes: 26 additions & 24 deletions src/lib/motion-start/components/AnimatePresence/PresenceChild/PresenceChild.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Copyright (c) 2018 Framer B.V. -->
<script module lang="ts">
import { SvelteMap } from "svelte/reactivity";
function newChildrenMap(): Map<string | number, boolean> {
return new SvelteMap<string | number, boolean>();
return new Map<string | number, boolean>();
}
</script>

Expand All @@ -15,7 +15,7 @@ Copyright (c) 2018 Framer B.V. -->
import PopChild from "../PopChild/PopChild.svelte";
import { useContext } from "$lib/motion-start/context/utils/context.js";
import { useId } from "$lib/motion-start/utils/useId.js";
import { tick } from "svelte";
import { tick, untrack } from "svelte";
interface Props extends PresenceChildProps {}
Expand All @@ -30,53 +30,55 @@ Copyright (c) 2018 Framer B.V. -->
}: Props = $props();
const presenceChildren = newChildrenMap();
const id = $derived(useId());
const id = useId();
const refresh = $derived(presenceAffectsLayout ? undefined : isPresent);
const memoOnExitComplete = $derived((childId: string | number) => {
presenceChildren.set(childId, true);
for (const isComplete of presenceChildren.values()) {
if (!isComplete) return;
}
onExitComplete && onExitComplete();
});
const presenceProps = $derived((cacheBuster?: boolean | number) => ({
const presenceProps = $derived(() => ({
id,
initial,
isPresent,
custom,
onExitComplete: (childId: string | number) => {
presenceChildren.set(childId, true);
let allComplete = true;
presenceChildren.forEach((isComplete) => {
if (!isComplete) allComplete = false;
});
allComplete && onExitComplete?.();
},
onExitComplete: memoOnExitComplete,
register: (childId: string | number) => {
presenceChildren.set(childId, false);
return () => presenceChildren.delete(childId);
},
}));
let context = $derived({ current: useContext(PresenceContext) });
const context = useContext(PresenceContext);
/**
* this context needs to allow updating of value - otherwise exit doesn't play.
* but also in current state enter/layout animation plays but doesn't if context object is mutated.
*/
$effect.pre(() => {
$effect(() => {
memoOnExitComplete;
if (presenceAffectsLayout) {
context.current = presenceProps();
}
context.current = presenceProps(refresh);
});
const keyset = (presence: boolean) =>
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
const keyset = $derived((presence: boolean) =>
presenceChildren.forEach((_, key) => presenceChildren.set(key, false)),
);
PresenceContext.Provider = context.current;
// $inspect(isPresent);
$effect(() => {
// $inspect.trace();
memoOnExitComplete;
context.current = presenceProps();
keyset(isPresent);
tick().then(() => {
!isPresent && !presenceChildren.size && onExitComplete?.();
});
PresenceContext.Provider = context.current;
});
</script>

Expand Down
30 changes: 12 additions & 18 deletions src/lib/motion-start/components/AnimatePresence/use-presence.svelte.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ based on [email protected],
Copyright (c) 2018 Framer B.V.
*/

import { derived, readable, toStore, type Readable } from 'svelte/store';
import { useContext } from '../../context/utils/context';
import { PresenceContext } from '../../context/PresenceContext';
import { useId } from '$lib/motion-start/utils/useId';
import { untrack } from 'svelte';

export type SafeToRemove = () => void;
export type AlwaysPresent = [true, null];
export type Present = [true];
export type NotPresent = [false, SafeToRemove];

export function isPresent(context: PresenceContext) {
export function isPresent(context: PresenceContext | null) {
return context === null ? true : context.isPresent;
}

Expand All @@ -38,8 +38,8 @@ export function isPresent(context: PresenceContext) {
* @public
*/
export const useIsPresent = (): boolean => {
const presenceContext = $derived(useContext(PresenceContext));
return isPresent(presenceContext);
const presenceContext = useContext(PresenceContext);
return isPresent(presenceContext.current);
};

/**
Expand All @@ -64,27 +64,21 @@ export const useIsPresent = (): boolean => {
*
* @public
*/
export const usePresence = (): Readable<AlwaysPresent | Present | NotPresent> => {
const context = $derived(useContext(PresenceContext));
export const usePresence = (): AlwaysPresent | Present | NotPresent => {
const context = useContext(PresenceContext).current;

if (context === null) {
return readable([true, null]) satisfies Readable<AlwaysPresent>;
return [true, null] satisfies AlwaysPresent;
}

const { register } = $derived(context);
const { isPresent, onExitComplete, register } = context;

const id = useId();
$effect.pre(() => {
if (context !== null) {
register(id);
}
register(id);
});

return derived<Readable<PresenceContext | null>, Present | NotPresent>(
toStore(() => context),
($v) =>
!$v?.isPresent && $v?.onExitComplete
? ([false, () => $v.onExitComplete?.(id)] satisfies NotPresent)
: ([true] satisfies Present)
);
const safeToRemove = onExitComplete && onExitComplete(id);

return !isPresent && onExitComplete && safeToRemove ? [false, safeToRemove] : [true];
};
10 changes: 5 additions & 5 deletions src/lib/motion-start/components/LayoutGroup/LayoutGroup.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Copyright (c) 2018 Framer B.V. -->
<svelte:options runes />

<script lang="ts" context="module" module>
<script lang="ts" module>
type InheritOption = boolean | "id";
export interface LayoutGroupProps {
Expand Down Expand Up @@ -30,10 +30,10 @@ Copyright (c) 2018 Framer B.V. -->
let { id, inherit = true, children }: Props = $props();
const layoutGroupContext = $derived(useContext(LayoutGroupContext));
const layoutGroupContext = $derived(useContext(LayoutGroupContext).current);
const deprecatedLayoutGroupContext = $derived(
useContext(DeprecatedLayoutGroupContext),
useContext(DeprecatedLayoutGroupContext).current,
);
const [forceRender, key] = useForceUpdate();
Expand All @@ -43,7 +43,7 @@ Copyright (c) 2018 Framer B.V. -->
} as MutableRefObject<LayoutGroupContext | null>;
const upstreamId = $derived(
layoutGroupContext.id || deprecatedLayoutGroupContext,
layoutGroupContext?.id || deprecatedLayoutGroupContext,
);
$effect(() => {
Expand All @@ -55,7 +55,7 @@ Copyright (c) 2018 Framer B.V. -->
context.current = {
id,
group: shouldInheritGroup(inherit!)
? layoutGroupContext.group || nodeGroup()
? layoutGroupContext?.group || nodeGroup()
: nodeGroup(),
};
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/motion-start/components/LazyMotion/LazyMotion.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Copyright (c) 2018 Framer B.V. -->
<svelte:options runes />

<script lang="ts" context="module" module>
<script lang="ts" module>
function isLazyBundle(
features: FeatureBundle | LazyFeatureBundle,
): features is LazyFeatureBundle {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/motion-start/components/MotionConfig/MotionConfig.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Copyright (c) 2018 Framer B.V. -->
* Inherit props from any parent MotionConfig components
*/
const config = $derived({
...useContext(MotionConfigContext),
...useContext(MotionConfigContext).current,
...{
transformPagePoint: transformPagePoint!,
isStatic: isStatic!,
Expand Down
Loading

0 comments on commit cbe947c

Please sign in to comment.