defuss 3.4.2 → 3.4.3

package/dist/index.cjs

@@ -1162,8 +1162,12 @@ const setupRouter = (config = {
     isReady: false,
     pendingResolvers: [],
     currentPath: "",
-    popAttached: false
+    popAttached: false,
+    lifecycleHooks: { beforeUnmount: [], unmount: [] }
   };
+  if (!state.lifecycleHooks) {
+    state.lifecycleHooks = { beforeUnmount: [], unmount: [] };
+  }
   const routeRegistrations = state.routeRegistrations;
   if (typeof window !== "undefined" && !windowImpl) {
     windowImpl = globalThis.__defuss_window || window;
@@ -1286,6 +1290,35 @@ const setupRouter = (config = {
         resolve();
       }
       state.pendingResolvers = [];
+    },
+    createRouteContext(request) {
+      return {
+        request,
+        onBeforeUnmount(fn) {
+          state.lifecycleHooks.beforeUnmount.push(fn);
+        },
+        onUnmount(fn) {
+          state.lifecycleHooks.unmount.push(fn);
+        }
+      };
+    },
+    async runBeforeUnmountHooks() {
+      for (const fn of state.lifecycleHooks.beforeUnmount) {
+        const result = await fn();
+        if (result === false) return false;
+      }
+      return true;
+    },
+    runUnmountHooks() {
+      for (const fn of state.lifecycleHooks.unmount) {
+        fn();
+      }
+    },
+    clearRouteLifecycle() {
+      const oldUnmountHooks = [...state.lifecycleHooks.unmount];
+      state.lifecycleHooks.beforeUnmount = [];
+      state.lifecycleHooks.unmount = [];
+      return { unmountHooks: oldUnmountHooks };
     }
   };
   const handlePopState = (event) => {
@@ -1315,7 +1348,8 @@ if (!globalThis[ROUTER_STATE_KEY]) {
     isReady: false,
     pendingResolvers: [],
     currentPath: "",
-    popAttached: false
+    popAttached: false,
+    lifecycleHooks: { beforeUnmount: [], unmount: [] }
   };
 }
 const getRouterState = () => globalThis[ROUTER_STATE_KEY];
@@ -1336,7 +1370,13 @@ const Route = ({
   const req = router.match(path);
   if (!req.match) return null;
   if (Component) {
-    return /* @__PURE__ */ jsx(Component, {});
+    const routeContext = router.createRouteContext(req);
+    const isAsync = Component.constructor.name === "AsyncFunction";
+    const routeChildren = Array.isArray(children) ? children[0] : children;
+    if (isAsync && routeChildren) {
+      return /* @__PURE__ */ jsx(Component, { route: routeContext, fallback: routeChildren });
+    }
+    return /* @__PURE__ */ jsx(Component, { route: routeContext });
   }
   return Array.isArray(children) ? children[0] : children || null;
 };
@@ -1381,11 +1421,27 @@ const RouterSlot = ({
     router.onRouteChange(async () => {
       const currentPath = router.getRequest().path;
       const isSamePath = currentPath === lastPath;
+      if (!isSamePath) {
+        const allowed = await router.runBeforeUnmountHooks();
+        if (!allowed) {
+          window.history.pushState({}, "", lastPath);
+          router.resolve(lastPath);
+          return;
+        }
+        const { unmountHooks } = router.clearRouteLifecycle();
+        await dom.$(ref).update(
+          typeof RouterOutlet === "function" ? RouterOutlet() : [],
+          transitionConfig
+        );
+        for (const fn of unmountHooks) {
+          fn();
+        }
+      } else {
+        await dom.$(ref).update(
+          typeof RouterOutlet === "function" ? RouterOutlet() : []
+        );
+      }
       lastPath = currentPath;
-      await dom.$(ref).update(
-        typeof RouterOutlet === "function" ? RouterOutlet() : [],
-        isSamePath ? void 0 : transitionConfig
-      );
     });
   }
   if (document.getElementById(slotId)) {

package/dist/index.d.ts

@@ -137,6 +137,60 @@ declare const T: ({ key, values, tag, ref, ...attrs }: TransProps<string>) => VN
 type OnHandleRouteChangeFn = (newRoute: string, oldRoute: string) => void;
 type OnRouteChangeFn = (cb: OnHandleRouteChangeFn) => void;
 type RouterStrategy = "page-refresh" | "slot-refresh";
+type BeforeUnmountHookFn = () => boolean | void | Promise<boolean | void>;
+type UnmountHookFn = () => void;
+/**
+ * Context object passed to components rendered via Route's `component` prop.
+ * Provides access to the current route request and lifecycle hooks.
+ *
+ * @example
+ * ```tsx
+ * const MyScreen = ({ route }: { route: RouteContext }) => {
+ *   route.onBeforeUnmount(() => {
+ *     // Return false to block navigation (e.g. unsaved changes)
+ *     return confirm("Leave page?");
+ *   });
+ *   route.onUnmount(() => {
+ *     console.log("Route was left");
+ *   });
+ *   return <div>Current path: {route.request.path}</div>;
+ * };
+ * ```
+ */
+interface RouteContext {
+    /** The matched RouteRequest for the current route */
+    request: RouteRequest;
+    /**
+     * Register a hook that fires before the route is unmounted.
+     * Returning `false` (or a Promise resolving to `false`) blocks navigation,
+     * allowing implementation of confirmation dialogs.
+     */
+    onBeforeUnmount(fn: BeforeUnmountHookFn): void;
+    /**
+     * Register a hook that fires after the route has been unmounted
+     * (navigation completed, new route is rendered).
+     */
+    onUnmount(fn: UnmountHookFn): void;
+}
+/**
+ * Props mixin for screen components rendered by `<Route component={...} />`.
+ * Extend your component props with this to get typed access to route context.
+ *
+ * @example
+ * ```tsx
+ * import { Router, type Props, type RouteProps } from "defuss";
+ *
+ * export interface ProjectDetailsProps extends Props, RouteProps {}
+ *
+ * export function ProjectDetailsScreen({ route }: ProjectDetailsProps) {
+ *   const { projectName } = route.request.params;
+ *   return <h1>Project: {projectName}</h1>;
+ * }
+ * ```
+ */
+interface RouteProps {
+    route: RouteContext;
+}
 interface RouterConfig {
     strategy?: RouterStrategy;
 }
@@ -268,6 +322,10 @@ interface RouterState {
     pendingResolvers: Array<() => void>;
     currentPath: string;
     popAttached: boolean;
+    lifecycleHooks: {
+        beforeUnmount: Array<BeforeUnmountHookFn>;
+        unmount: Array<UnmountHookFn>;
+    };
 }
 declare global {
     var __defuss_router__: Router | undefined;
@@ -301,10 +359,16 @@ interface Router {
      * ```
      */
     ready(): Promise<void>;
+    /**
+     * Create a RouteContext object for a matched route request.
+     * The context provides lifecycle hooks (onBeforeUnmount, onUnmount)
+     * and is passed to components rendered via Route's `component` prop.
+     */
+    createRouteContext(request: RouteRequest): RouteContext;
 }
 declare const Router: Router;
 
-interface RouteProps extends Props {
+interface RouteComponentProps extends Props {
     path: string;
     router?: Router;
     exact?: boolean;
@@ -315,19 +379,29 @@ interface RouteProps extends Props {
      * has been registered and matched. This ensures `Router.getRequest()`
      * returns the correct params inside the component.
      *
-     * Use this when your component needs route params on initial page load
-     * (server-rendered / hard-reload scenarios).
+     * The component receives a `route` prop (RouteContext) with:
+     * - `route.request` — the matched RouteRequest with params, query, etc.
+     * - `route.onBeforeUnmount(fn)` — register a hook before route leaves; return `false` to block
+     * - `route.onUnmount(fn)` — register a hook after route has been left
+     *
+     * When the component is async and Route has children, the children are
+     * shown as a loading fallback until the async component resolves.
      *
      * @example
      * ```tsx
      * <Route path="/project/:projectName" component={ProjectDetailsScreen} />
+     *
+     * // With loading fallback for async components:
+     * <Route path="/dashboard" component={AsyncDashboard}>
+     *   <Spinner />
+     * </Route>
      * ```
      */
     component?: FC<any>;
 }
-declare const Route: FC<RouteProps>;
+declare const Route: FC<RouteComponentProps>;
 
-interface RedirectProps extends RouteProps {
+interface RedirectProps extends RouteComponentProps {
     to: string;
 }
 declare const Redirect: FC<RedirectProps>;
@@ -412,4 +486,4 @@ declare const Suspense: ({ fallback, ref, children, class: _class, className, id
 };
 
 export { Async, AsyncDefussChild, DOMElement, FC, Globals, NodeType, PersistenceProviderImpl, PersistenceProviderOptions, PersistenceProviderType, Props, Redirect, Ref, RenderInput, Route, Router, RouterSlot, RouterSlotId, Suspense, T, Trans, TransitionConfig, VNode, VNodeAttributes, VNodeChild, addElementEvent, areDomNodesEqual, changeLanguage, checkElementVisibility, clearElementEvents, createI18n, createTrans, domNodeToVNode, getEventMap, getLanguage, getMimeType, getRouterState, htmlStringToVNodes, i18n, inDevMode, isHTML, isMarkup, isSVG, loadLanguage, matchRouteRegistrations, parseDOM, processAllFormElements, queueCallback, removeElementEvent, renderMarkup, replaceDomWithVdom, setupRouter, t, tokenizePath, updateDomWithVdom, waitForDOM, webstorage };
-export type { AsyncProps, AsyncState, AsyncStateRef, I18nStore, MatchRouteRegistrationsOpts, OnHandleRouteChangeFn, OnLanguageChangeListener, OnRouteChangeFn, RedirectProps, Replacements, Resolve, RouteHandler, RouteParams, RouteProps, RouteRegistration, RouteRequest, RouterConfig, RouterSlotProps, RouterStrategy, TokenizedPath, TransProps, TransRef, TranslationKeys, TranslationObject, Translations, ValidChild };
+export type { AsyncProps, AsyncState, AsyncStateRef, BeforeUnmountHookFn, I18nStore, MatchRouteRegistrationsOpts, OnHandleRouteChangeFn, OnLanguageChangeListener, OnRouteChangeFn, RedirectProps, Replacements, Resolve, RouteComponentProps, RouteContext, RouteHandler, RouteParams, RouteProps, RouteRegistration, RouteRequest, RouterConfig, RouterSlotProps, RouterStrategy, TokenizedPath, TransProps, TransRef, TranslationKeys, TranslationObject, Translations, UnmountHookFn, ValidChild };

package/dist/index.mjs

@@ -1161,8 +1161,12 @@ const setupRouter = (config = {
     isReady: false,
     pendingResolvers: [],
     currentPath: "",
-    popAttached: false
+    popAttached: false,
+    lifecycleHooks: { beforeUnmount: [], unmount: [] }
   };
+  if (!state.lifecycleHooks) {
+    state.lifecycleHooks = { beforeUnmount: [], unmount: [] };
+  }
   const routeRegistrations = state.routeRegistrations;
   if (typeof window !== "undefined" && !windowImpl) {
     windowImpl = globalThis.__defuss_window || window;
@@ -1285,6 +1289,35 @@ const setupRouter = (config = {
         resolve();
       }
       state.pendingResolvers = [];
+    },
+    createRouteContext(request) {
+      return {
+        request,
+        onBeforeUnmount(fn) {
+          state.lifecycleHooks.beforeUnmount.push(fn);
+        },
+        onUnmount(fn) {
+          state.lifecycleHooks.unmount.push(fn);
+        }
+      };
+    },
+    async runBeforeUnmountHooks() {
+      for (const fn of state.lifecycleHooks.beforeUnmount) {
+        const result = await fn();
+        if (result === false) return false;
+      }
+      return true;
+    },
+    runUnmountHooks() {
+      for (const fn of state.lifecycleHooks.unmount) {
+        fn();
+      }
+    },
+    clearRouteLifecycle() {
+      const oldUnmountHooks = [...state.lifecycleHooks.unmount];
+      state.lifecycleHooks.beforeUnmount = [];
+      state.lifecycleHooks.unmount = [];
+      return { unmountHooks: oldUnmountHooks };
     }
   };
   const handlePopState = (event) => {
@@ -1314,7 +1347,8 @@ if (!globalThis[ROUTER_STATE_KEY]) {
     isReady: false,
     pendingResolvers: [],
     currentPath: "",
-    popAttached: false
+    popAttached: false,
+    lifecycleHooks: { beforeUnmount: [], unmount: [] }
   };
 }
 const getRouterState = () => globalThis[ROUTER_STATE_KEY];
@@ -1335,7 +1369,13 @@ const Route = ({
   const req = router.match(path);
   if (!req.match) return null;
   if (Component) {
-    return /* @__PURE__ */ jsx(Component, {});
+    const routeContext = router.createRouteContext(req);
+    const isAsync = Component.constructor.name === "AsyncFunction";
+    const routeChildren = Array.isArray(children) ? children[0] : children;
+    if (isAsync && routeChildren) {
+      return /* @__PURE__ */ jsx(Component, { route: routeContext, fallback: routeChildren });
+    }
+    return /* @__PURE__ */ jsx(Component, { route: routeContext });
   }
   return Array.isArray(children) ? children[0] : children || null;
 };
@@ -1380,11 +1420,27 @@ const RouterSlot = ({
     router.onRouteChange(async () => {
       const currentPath = router.getRequest().path;
       const isSamePath = currentPath === lastPath;
+      if (!isSamePath) {
+        const allowed = await router.runBeforeUnmountHooks();
+        if (!allowed) {
+          window.history.pushState({}, "", lastPath);
+          router.resolve(lastPath);
+          return;
+        }
+        const { unmountHooks } = router.clearRouteLifecycle();
+        await $(ref).update(
+          typeof RouterOutlet === "function" ? RouterOutlet() : [],
+          transitionConfig
+        );
+        for (const fn of unmountHooks) {
+          fn();
+        }
+      } else {
+        await $(ref).update(
+          typeof RouterOutlet === "function" ? RouterOutlet() : []
+        );
+      }
       lastPath = currentPath;
-      await $(ref).update(
-        typeof RouterOutlet === "function" ? RouterOutlet() : [],
-        isSamePath ? void 0 : transitionConfig
-      );
     });
   }
   if (document.getElementById(slotId)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "defuss",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "type": "module",
   "publishConfig": {
     "access": "public"