aaex-file-router 1.7.4 → 1.8.0

package/README.md

@@ -2,8 +2,10 @@
 
 A file-based routing system for React projects that automatically generates routes from your file structure. Similar to Next.js App Router or Remix file conventions.
 
-## V. 1.7.3
-Removed the 404 and root layout support since it was implemented wrong and broke 
+## V. 1.8.0
+
+Added [useScroll hook](#useScroll) to help with page scroll after navigation
+
 ## Table of Contents
 
 - [Features](#features)
@@ -19,6 +21,7 @@ Removed the 404 and root layout support since it was implemented wrong and broke
 - [Import strategy](#import-strategy)
 - [Layouts](#layouts)
 - [FileLink component](#filelink-component)
+- [useScroll hook](#useScroll)
 - [Usage](#usage)
 - [Generated files](#generated-files)
 - [API Reference](#api-reference)
@@ -288,9 +291,6 @@ All routes in `src/pages/dashboard/*` will render inside this layout.
 
 ---
 
-Top-level pages are always statically imported for faster initial navigation.
-All nested pages are lazy-loaded and wrapped in a Suspense boundary.
-
 ## FileLink component
 
 The FileLink component is a type safe wrapper for the Link component in react router that uses an autogenerated type to check which routes are available.
@@ -322,7 +322,6 @@ export default function Home() {
   return (
     <>
       Hello Home!
-      {/* FileRoutes is optional and not required it will work fine with any string if not passed */}
       <FileLink<FileRoutes> to="test">Test safe</FileLink>
       {/* or without type safety */}
       <FileLink to="some-route">Non safe</FileLink>
@@ -331,6 +330,73 @@ export default function Home() {
 }
 ```
 
+## useScroll
+
+Custom React hook that scrolls to the top after navigation.
+Designed to work seamlessly with client-side routing while remaining SSR-safe.
+
+### Features
+
+- Automatically scrolls on route change
+
+- Supports smooth scrolling
+
+- Can scroll either the window or a specific container
+
+- Safe to use in SSR environments
+
+### Usage
+
+```tsx
+import { useScroll } from "aaex-file-router";
+
+export default function PageWithNavigation() {
+  useScroll();
+
+  return <>{/* rest of content */}</>;
+}
+```
+
+### Options
+
+`useScroll` accepts an optional config object.
+
+```tsx
+useScroll({
+  behavior?: ScrollBehavior;
+  container?: HTMLElement | null;
+});
+```
+
+| Option      | Type                  | Default    | Description                              |
+| ----------- | --------------------- | ---------- | ---------------------------------------- | ------------------------- |
+| `behavior`  | `"auto"`              | `"smooth"` | `"auto"`                                 | Scroll animation behavior |
+| `container` | `HTMLElement \| null` | `null`     | Scrolls this element instead of `window` |
+
+### Example: smooth scroll
+
+```tsx
+useScroll({
+  behavior: "smooth",
+});
+```
+
+### Example: scroll a container
+
+```tsx
+const ref = useRef<HTMLDivElement>(null);
+
+useScroll({
+  container: ref.current,
+});
+
+return <div ref={ref}>...</div>;
+```
+
+---
+
+<br/>
+
 ## Generated files
 
 ### routes.ts

package/dist/components/FileLink.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-interface FileLinkProps<RouteType extends string = string> {
+interface FileLinkProps<RouteType extends string = string> extends React.PropsWithChildren {
     to: RouteType;
-    children: React.ReactNode;
+    activeClassName?: string;
+    className?: string;
 }
-export declare function FileLink<RouteType extends string = string>({ to, children, }: FileLinkProps<RouteType>): import("react/jsx-runtime").JSX.Element;
+export declare function FileLink<RouteType extends string = string>({ to, children, activeClassName, className, }: FileLinkProps<RouteType>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FileLink.d.ts.map

package/dist/components/FileLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileLink.d.ts","sourceRoot":"","sources":["../../src/components/FileLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,aAAa,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM;IACvD,EAAE,EAAE,SAAS,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,QAAQ,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,EAAE,EACF,QAAQ,GACT,EAAE,aAAa,CAAC,SAAS,CAAC,2CAS1B"}
+{"version":3,"file":"FileLink.d.ts","sourceRoot":"","sources":["../../src/components/FileLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,aAAa,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CACvD,SAAQ,KAAK,CAAC,iBAAiB;IAC/B,EAAE,EAAE,SAAS,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,EAAE,EACF,QAAQ,EACR,eAA0B,EAC1B,SAAc,GACf,EAAE,aAAa,CAAC,SAAS,CAAC,2CAmB1B"}

package/dist/components/FileLink.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
-export function FileLink({ to, children, }) {
+import { Link, useLocation } from "react-router-dom";
+export function FileLink({ to, children, activeClassName = "active", className = "", }) {
     const isServer = typeof window === "undefined";
     if (isServer) {
-        //supports server side routing 
+        // SSR fallback
         return _jsx("a", { href: to, children: children });
     }
-    // client side routing
-    return _jsx(Link, { to: to, children: children });
+    const location = useLocation();
+    const isActive = location.pathname === to;
+    return (_jsx(Link, { to: to, className: `${className} ${isActive ? activeClassName : ""}`.trim(), children: children }));
 }
 //# sourceMappingURL=FileLink.js.map

package/dist/components/FileLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileLink.js","sourceRoot":"","sources":["../../src/components/FileLink.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAOxC,MAAM,UAAU,QAAQ,CAAoC,EAC1D,EAAE,EACF,QAAQ,GACiB;IACzB,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAE/C,IAAI,QAAQ,EAAE,CAAC;QACb,+BAA+B;QAC/B,OAAO,YAAG,IAAI,EAAE,EAAY,YAAG,QAAQ,GAAK,CAAC;IAC/C,CAAC;IACD,sBAAsB;IACtB,OAAO,KAAC,IAAI,IAAC,EAAE,EAAE,EAAY,YAAG,QAAQ,GAAQ,CAAC;AACnD,CAAC"}
+{"version":3,"file":"FileLink.js","sourceRoot":"","sources":["../../src/components/FileLink.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AASrD,MAAM,UAAU,QAAQ,CAAoC,EAC1D,EAAE,EACF,QAAQ,EACR,eAAe,GAAG,QAAQ,EAC1B,SAAS,GAAG,EAAE,GACW;IACzB,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAE/C,IAAI,QAAQ,EAAE,CAAC;QACb,eAAe;QACf,OAAO,YAAG,IAAI,EAAE,EAAY,YAAG,QAAQ,GAAK,CAAC;IAC/C,CAAC;IAED,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,KAAK,EAAE,CAAC;IAE1C,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,EAAY,EAChB,SAAS,EAAE,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,YAElE,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/hooks/useScroll.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Scrolls the window or a container to the top on route change
+ */
+export declare function useScroll(options?: {
+    behavior?: ScrollBehavior;
+    container?: HTMLElement | null;
+}): void;
+//# sourceMappingURL=useScroll.d.ts.map

package/dist/hooks/useScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useScroll.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,CAAC,EAAE;IAClC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC,QAaA"}

package/dist/hooks/useScroll.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+/**
+ * Scrolls the window or a container to the top on route change
+ */
+export function useScroll(options) {
+    const { pathname } = useLocation();
+    const behavior = options?.behavior ?? "auto";
+    const container = options?.container ?? null;
+    useEffect(() => {
+        if (container) {
+            container.scrollTo({ top: 0, behavior });
+        }
+        else {
+            window.scrollTo({ top: 0, behavior });
+        }
+    }, [pathname, behavior, container]);
+}
+//# sourceMappingURL=useScroll.js.map

package/dist/hooks/useScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroll.js","sourceRoot":"","sources":["../../src/hooks/useScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,OAGzB;IACC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IAEnC,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,IAAI,MAAM,CAAC;IAC7C,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,IAAI,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;AACtC,CAAC"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { FileLink } from "./components/FileLink.js";
+export { useScroll } from "./hooks/useScroll.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { FileLink } from "./components/FileLink.js";
+export { useScroll } from "./hooks/useScroll.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aaex-file-router",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "A file-based routing system for React projects that automatically generates routes from your file structure. Similar to Next.js App Router or Remix file conventions.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",