@llui/transitions 0.0.14 → 0.0.16

package/dist/route-transition.d.ts

@@ -11,19 +11,43 @@ export interface RouteTransitionOptions {
 }
 /**
  * Convenience wrapper that returns `{ enter, leave }` hooks suitable for
- * spreading into a `branch()` call to animate page transitions.
+ * animating page-to-page transitions. Used in two ways:
  *
- * Can be called two ways:
+ * **Manual branch-based routing:** spread the result into a `branch()`
+ * call that switches on the current route key. The runtime invokes
+ * `enter` / `leave` as the branch swaps cases.
  *
- * 1. With route-specific options (produces a fade + optional slide):
- *    ```ts
- *    branch({ on, cases, ...routeTransition({ duration: 200 }) })
- *    ```
+ * ```ts
+ * branch({
+ *   on: (s) => s.route,
+ *   cases: { '/': home, '/about': about },
+ *   ...routeTransition({ duration: 200 }),
+ * })
+ * ```
  *
- * 2. With a pre-built `TransitionOptions` (e.g. from any preset):
- *    ```ts
- *    branch({ on, cases, ...routeTransition(fade({ duration: 200 })) })
- *    ```
+ * **Vike filesystem routing (`@llui/vike`):** Vike's `onRenderClient`
+ * doesn't consume `{ enter, leave }` directly because each page is its
+ * own component and the swap goes through dispose + clear + mount. Use
+ * `fromTransition` from `@llui/vike/client` to adapt the transition to
+ * the `onLeave` / `onEnter` hook shape:
+ *
+ * ```ts
+ * // pages/+onRenderClient.ts
+ * import { createOnRenderClient, fromTransition } from '@llui/vike/client'
+ * import { routeTransition } from '@llui/transitions'
+ *
+ * export const onRenderClient = createOnRenderClient({
+ *   ...fromTransition(routeTransition({ duration: 200 })),
+ * })
+ * ```
+ *
+ * The vike variant operates on the container element itself (the `#app`
+ * div) — its opacity / transform fades out the whole page, then the new
+ * page fades in when it mounts.
+ *
+ * Both call forms also accept a pre-built `TransitionOptions` from any
+ * preset (`fade`, `slide`, `scale`, …) — `routeTransition` will pass it
+ * through unchanged.
  */
 export declare function routeTransition(opts?: RouteTransitionOptions | TransitionOptions): TransitionOptions;
 //# sourceMappingURL=route-transition.d.ts.map

package/dist/route-transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route-transition.d.ts","sourceRoot":"","sources":["../src/route-transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAKlD,MAAM,WAAW,sBAAsB;IACrC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,sBAAsB,GAAG,iBAAiB,GAChD,iBAAiB,CAyBnB"}
+{"version":3,"file":"route-transition.d.ts","sourceRoot":"","sources":["../src/route-transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAKlD,MAAM,WAAW,sBAAsB;IACrC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,sBAAsB,GAAG,iBAAiB,GAChD,iBAAiB,CAyBnB"}

package/dist/route-transition.js

@@ -3,19 +3,43 @@ import { slide } from './presets.js';
 import { mergeTransitions } from './flip.js';
 /**
  * Convenience wrapper that returns `{ enter, leave }` hooks suitable for
- * spreading into a `branch()` call to animate page transitions.
+ * animating page-to-page transitions. Used in two ways:
  *
- * Can be called two ways:
+ * **Manual branch-based routing:** spread the result into a `branch()`
+ * call that switches on the current route key. The runtime invokes
+ * `enter` / `leave` as the branch swaps cases.
  *
- * 1. With route-specific options (produces a fade + optional slide):
- *    ```ts
- *    branch({ on, cases, ...routeTransition({ duration: 200 }) })
- *    ```
+ * ```ts
+ * branch({
+ *   on: (s) => s.route,
+ *   cases: { '/': home, '/about': about },
+ *   ...routeTransition({ duration: 200 }),
+ * })
+ * ```
  *
- * 2. With a pre-built `TransitionOptions` (e.g. from any preset):
- *    ```ts
- *    branch({ on, cases, ...routeTransition(fade({ duration: 200 })) })
- *    ```
+ * **Vike filesystem routing (`@llui/vike`):** Vike's `onRenderClient`
+ * doesn't consume `{ enter, leave }` directly because each page is its
+ * own component and the swap goes through dispose + clear + mount. Use
+ * `fromTransition` from `@llui/vike/client` to adapt the transition to
+ * the `onLeave` / `onEnter` hook shape:
+ *
+ * ```ts
+ * // pages/+onRenderClient.ts
+ * import { createOnRenderClient, fromTransition } from '@llui/vike/client'
+ * import { routeTransition } from '@llui/transitions'
+ *
+ * export const onRenderClient = createOnRenderClient({
+ *   ...fromTransition(routeTransition({ duration: 200 })),
+ * })
+ * ```
+ *
+ * The vike variant operates on the container element itself (the `#app`
+ * div) — its opacity / transform fades out the whole page, then the new
+ * page fades in when it mounts.
+ *
+ * Both call forms also accept a pre-built `TransitionOptions` from any
+ * preset (`fade`, `slide`, `scale`, …) — `routeTransition` will pass it
+ * through unchanged.
  */
 export function routeTransition(opts) {
     // If opts already has enter/leave, treat it as a pre-built TransitionOptions.

package/dist/route-transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"route-transition.js","sourceRoot":"","sources":["../src/route-transition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAa5C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,eAAe,CAC7B,IAAiD;IAEjD,8EAA8E;IAC9E,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,CAAC,EAAE,CAAC;QACjD,OAAO,IAAyB,CAAA;IAClC,CAAC;IAED,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI,EAAE,CAA2B,CAAA;IACrD,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,GAAG,CAAA;IACvC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,UAAU,CAAA;IAC1C,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAA;IACxC,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,IAAI,EAAE,CAAA;IAEhD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAA;IAExC,IAAI,CAAC,SAAS;QAAE,OAAO,KAAK,CAAA;IAE5B,MAAM,MAAM,GAAG,KAAK,CAAC;QACnB,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,aAAa;QACvB,QAAQ;QACR,MAAM;QACN,IAAI,EAAE,KAAK;KACZ,CAAC,CAAA;IAEF,OAAO,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;AACxC,CAAC","sourcesContent":["import type { TransitionOptions } from '@llui/dom'\nimport { fade } from './presets.js'\nimport { slide } from './presets.js'\nimport { mergeTransitions } from './flip.js'\n\nexport interface RouteTransitionOptions {\n  /** Duration in milliseconds (default: 250). */\n  duration?: number\n  /** Easing function (default: 'ease-out'). */\n  easing?: string\n  /** Enable a slight vertical slide alongside the fade (default: true). */\n  slide?: boolean\n  /** Slide distance in pixels (default: 12). */\n  slideDistance?: number\n}\n\n/**\n * Convenience wrapper that returns `{ enter, leave }` hooks suitable for\n * spreading into a `branch()` call to animate page transitions.\n *\n * Can be called two ways:\n *\n * 1. With route-specific options (produces a fade + optional slide):\n *    ```ts\n *    branch({ on, cases, ...routeTransition({ duration: 200 }) })\n *    ```\n *\n * 2. With a pre-built `TransitionOptions` (e.g. from any preset):\n *    ```ts\n *    branch({ on, cases, ...routeTransition(fade({ duration: 200 })) })\n *    ```\n */\nexport function routeTransition(\n  opts?: RouteTransitionOptions | TransitionOptions,\n): TransitionOptions {\n  // If opts already has enter/leave, treat it as a pre-built TransitionOptions.\n  if (opts && ('enter' in opts || 'leave' in opts)) {\n    return opts as TransitionOptions\n  }\n\n  const config = (opts ?? {}) as RouteTransitionOptions\n  const duration = config.duration ?? 250\n  const easing = config.easing ?? 'ease-out'\n  const withSlide = config.slide !== false\n  const slideDistance = config.slideDistance ?? 12\n\n  const fadeT = fade({ duration, easing })\n\n  if (!withSlide) return fadeT\n\n  const slideT = slide({\n    direction: 'up',\n    distance: slideDistance,\n    duration,\n    easing,\n    fade: false,\n  })\n\n  return mergeTransitions(fadeT, slideT)\n}\n"]}
+{"version":3,"file":"route-transition.js","sourceRoot":"","sources":["../src/route-transition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAa5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,UAAU,eAAe,CAC7B,IAAiD;IAEjD,8EAA8E;IAC9E,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,CAAC,EAAE,CAAC;QACjD,OAAO,IAAyB,CAAA;IAClC,CAAC;IAED,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI,EAAE,CAA2B,CAAA;IACrD,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,GAAG,CAAA;IACvC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,UAAU,CAAA;IAC1C,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAA;IACxC,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,IAAI,EAAE,CAAA;IAEhD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAA;IAExC,IAAI,CAAC,SAAS;QAAE,OAAO,KAAK,CAAA;IAE5B,MAAM,MAAM,GAAG,KAAK,CAAC;QACnB,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,aAAa;QACvB,QAAQ;QACR,MAAM;QACN,IAAI,EAAE,KAAK;KACZ,CAAC,CAAA;IAEF,OAAO,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;AACxC,CAAC","sourcesContent":["import type { TransitionOptions } from '@llui/dom'\nimport { fade } from './presets.js'\nimport { slide } from './presets.js'\nimport { mergeTransitions } from './flip.js'\n\nexport interface RouteTransitionOptions {\n  /** Duration in milliseconds (default: 250). */\n  duration?: number\n  /** Easing function (default: 'ease-out'). */\n  easing?: string\n  /** Enable a slight vertical slide alongside the fade (default: true). */\n  slide?: boolean\n  /** Slide distance in pixels (default: 12). */\n  slideDistance?: number\n}\n\n/**\n * Convenience wrapper that returns `{ enter, leave }` hooks suitable for\n * animating page-to-page transitions. Used in two ways:\n *\n * **Manual branch-based routing:** spread the result into a `branch()`\n * call that switches on the current route key. The runtime invokes\n * `enter` / `leave` as the branch swaps cases.\n *\n * ```ts\n * branch({\n *   on: (s) => s.route,\n *   cases: { '/': home, '/about': about },\n *   ...routeTransition({ duration: 200 }),\n * })\n * ```\n *\n * **Vike filesystem routing (`@llui/vike`):** Vike's `onRenderClient`\n * doesn't consume `{ enter, leave }` directly because each page is its\n * own component and the swap goes through dispose + clear + mount. Use\n * `fromTransition` from `@llui/vike/client` to adapt the transition to\n * the `onLeave` / `onEnter` hook shape:\n *\n * ```ts\n * // pages/+onRenderClient.ts\n * import { createOnRenderClient, fromTransition } from '@llui/vike/client'\n * import { routeTransition } from '@llui/transitions'\n *\n * export const onRenderClient = createOnRenderClient({\n *   ...fromTransition(routeTransition({ duration: 200 })),\n * })\n * ```\n *\n * The vike variant operates on the container element itself (the `#app`\n * div) — its opacity / transform fades out the whole page, then the new\n * page fades in when it mounts.\n *\n * Both call forms also accept a pre-built `TransitionOptions` from any\n * preset (`fade`, `slide`, `scale`, …) — `routeTransition` will pass it\n * through unchanged.\n */\nexport function routeTransition(\n  opts?: RouteTransitionOptions | TransitionOptions,\n): TransitionOptions {\n  // If opts already has enter/leave, treat it as a pre-built TransitionOptions.\n  if (opts && ('enter' in opts || 'leave' in opts)) {\n    return opts as TransitionOptions\n  }\n\n  const config = (opts ?? {}) as RouteTransitionOptions\n  const duration = config.duration ?? 250\n  const easing = config.easing ?? 'ease-out'\n  const withSlide = config.slide !== false\n  const slideDistance = config.slideDistance ?? 12\n\n  const fadeT = fade({ duration, easing })\n\n  if (!withSlide) return fadeT\n\n  const slideT = slide({\n    direction: 'up',\n    distance: slideDistance,\n    duration,\n    easing,\n    fade: false,\n  })\n\n  return mergeTransitions(fadeT, slideT)\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llui/transitions",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,12 +11,12 @@
     }
   },
   "peerDependencies": {
-    "@llui/dom": "^0.0.14"
+    "@llui/dom": "^0.0.16"
   },
   "devDependencies": {
     "typescript": "^6.0.0",
     "vitest": "^4.1.2",
-    "@llui/dom": "0.0.14"
+    "@llui/dom": "0.0.16"
   },
   "sideEffects": false,
   "description": "LLui animation helpers — transition(), fade, slide, scale, collapse for branch/show/each",