@inglorious/ui 9.6.0 → 9.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.6.0",
+  "version": "9.7.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -314,21 +314,21 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/store": "12.0.0",
+    "@inglorious/store": "12.1.0",
     "@inglorious/utils": "5.1.0",
-    "@inglorious/web": "6.9.1"
+    "@inglorious/web": "6.10.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "12.2.2",
+    "@inglorious/charts": "12.2.3",
     "@inglorious/eslint-config": "1.2.0",
-    "@inglorious/store": "12.0.0",
+    "@inglorious/store": "12.1.0",
     "@inglorious/vite-plugin-jsx": "2.0.5",
     "@inglorious/vite-plugin-vue": "1.0.6",
-    "@inglorious/web": "6.9.1",
+    "@inglorious/web": "6.10.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",

package/src/navigation/view-transitions/index.js

@@ -2,10 +2,11 @@
  * @typedef {import("../../../types/navigation/view-transitions").TransitionsStore} Store
  * @typedef {import("../../../types/navigation/view-transitions").ViewTransitionType} ViewTransitionType
  * @typedef {import("../../../types/navigation/view-transitions").TransitionsOptions} TransitionsOptions
+ * @typedef {(store: Store) => Store} Middleware
  */
 
 /**
- * Wraps a store so that the renders which follow a navigation are run inside a
+ * A store middleware that runs the renders which follow a navigation inside a
  * view transition, tagged with the direction they navigated in. Pair it with
  * `style.css` from this package, which turns those tags into a slide.
  *
@@ -20,7 +21,7 @@
  * import { withTransitions } from "@inglorious/ui/view-transitions"
  * import "@inglorious/ui/view-transitions.css"
  *
- * mount(withTransitions(store), renderApp, document.getElementById("root"))
+ * const store = createStore({ types, entities, middlewares: [withTransitions()] })
  *
  * Pass `routes` to choose which navigations animate; the rest change page
  * without a transition. A list of route names animates every navigation into
@@ -30,20 +31,23 @@
  *
  * @example
  * // Slide into and out of detail pages; switch tabs instantly.
- * withTransitions(store, { routes: ["eventDetail", "userDetail"] })
+ * withTransitions({ routes: ["eventDetail", "userDetail"] })
  *
  * @example
  * // Slide only when going deeper or coming back up, never sideways.
- * withTransitions(store, {
+ * withTransitions({
  *   routes: ({ from, to }) => from.path.startsWith(to.path) || to.path.startsWith(from.path),
  * })
  *
- * @param {Store} store - The store to wrap.
  * @param {TransitionsOptions} [options]
- * @returns {Store} The same store, with a wrapped `subscribe`.
- * @throws {Error} If the store has no `Router` type.
+ * @returns {Middleware} The middleware, which returns the store it is given with a
+ *   wrapped `subscribe`, and throws if the store has no `Router` type.
  */
-export function withTransitions(store, { routes } = {}) {
+export function withTransitions({ routes } = {}) {
+  return (store) => wrapStore(store, routes)
+}
+
+function wrapStore(store, routes) {
   if (!store.getType("Router")) {
     throw new Error(
       '[withTransitions] Requires the "Router" type from @inglorious/web. The ' +

package/types/navigation/view-transitions.d.ts

@@ -33,11 +33,10 @@ export interface TransitionsOptions {
 }
 
 export interface WithTransitions {
-  /** Returns the store it was given, so it still fits wherever the store did, such as `mount`. */
-  <Store extends TransitionsStore<any>>(
-    store: Store,
+  /** A store middleware, for the `middlewares` of `createStore`. It returns the store it is given. */
+  (
     options?: TransitionsOptions,
-  ): Store
+  ): <Store extends TransitionsStore<any>>(store: Store) => Store
 }
 
 export declare const withTransitions: WithTransitions