feat(transition): change transition api to reflect the new types

Author: dvcol

src/lib/components/RouteTransition.svelte

@@ -9,30 +9,30 @@
 
   const { children, key, id, transition }: { children: Snippet; id: string; key: any | any[]; transition: TransitionProps } = $props();
 
-  let firstRender = true;
-  const skipFirst = $derived<TransitionProps['skipFirst']>(transition?.skipFirst ?? false);
-  const skipTransition = (skip = skipFirst) => {
+  let firstRender = $state(true);
+  const first = $derived<TransitionProps['first']>(transition?.first ?? true);
+  const skipTransition = () => {
     if (!firstRender) return false;
     firstRender = false;
-    return skip === true;
+    return first === false;
   };
 
-  const isTransitionFunction = (skip?: TransitionProps['skipFirst']): skip is TransitionFunction => typeof skip === 'function' && !!skip;
-  const isTransitionObject = (skip?: TransitionProps['skipFirst']): skip is TransitionWithProps => typeof skip === 'object' && !!skip?.use;
+  const isTransitionFunction = (skip?: TransitionProps['first']): skip is TransitionFunction => typeof skip === 'function' && !!skip;
+  const isTransitionObject = (skip?: TransitionProps['first']): skip is TransitionWithProps => typeof skip === 'object' && !!skip?.use;
 
   const _in = $derived<TransitionFunction>(((node, props, options) => {
     if (skipTransition()) return;
-    if (firstRender && isTransitionFunction(skipFirst)) return skipFirst;
-    if (firstRender && isTransitionObject(skipFirst)) return skipFirst.use;
+    if (firstRender && isTransitionFunction(first)) return first;
+    if (firstRender && isTransitionObject(first)) return first.use;
     return transition?.in?.(node, props, options);
   }) as TransitionFunction);
   const _out = $derived<TransitionFunction>(((node, props, options) => {
-    if (firstRender && skipFirst) return;
+    if (firstRender && first) return;
     return transition?.out?.(node, props, options);
   }) as TransitionFunction);
 
   const _inParams = $derived.by(() => {
-    if (firstRender && isTransitionObject(skipFirst) && skipFirst.props) return skipFirst.props;
+    if (firstRender && isTransitionObject(first) && first.props) return first.props;
     return transition?.params?.in ?? {};
   });
   const _outParams = $derived(transition?.params?.out ?? {});

src/lib/models/component.model.ts

@@ -32,12 +32,6 @@ export type TransitionDiscardFunction = (entry: MutationRecord, index: number, e
 export interface TransitionProps<
   T extends { in?: TransitionParams; out?: TransitionParams; first?: TransitionParams } = { in?: TransitionParams; out?: TransitionParams; first?: TransitionParams },
 > {
-  /**
-   * Skip the first enter transition.
-   * This is useful when the first route load is fast and the transition is not needed.
-   * @default false
-   */
-  skipFirst?: boolean | TransitionFunction<T['first']> | TransitionWithProps<TransitionParams>;
   /**
    * If `true`, the transition will be updated on any route change.
    * By default, the transition is only triggered when the component changes to avoid unnecessary mounting and unmounting.
@@ -58,6 +52,18 @@ export interface TransitionProps<
    * Transition to use when navigating away from the current route.
    */
   out?: TransitionFunction<T['out']>;
+  /**
+   * The enter transition to use when the route is first loaded.
+   * This is useful when the first route load is fast and the transition is not needed.
+   *
+   * If `false`, no transition will be applied on the first route load.
+   * If `true`, the transition will be applied.
+   * If a function is provided, it will be called with the `in` transition parameters.
+   * If a transition object is provided, it will be used as the transition function and parameters.
+   *
+   * @default true
+   */
+  first?: boolean | TransitionFunction<T['first']> | TransitionWithProps<TransitionParams>;
   /**
    * Transition parameters to be passed to the transition functions.
    */

src/lib/utils/transition.utils.ts

@@ -8,5 +8,5 @@ export const transition: TransitionProps<{ in?: ScaleFreezeParams; out?: ScaleFr
   in: scaleFreeze,
   out: scaleFreeze,
   params: { in: { delay: 400 } },
-  skipFirst: { use: scaleFreeze, props: { delay: 100 } },
+  first: { use: scaleFreeze, props: { delay: 100 } },
 };