betal-fe 4.2.0 → 4.4.0

package/README.md

@@ -15,7 +15,7 @@ npm install betal-fe
 - **Reactive State** - Automatic re-rendering on state changes
 - **Lifecycle Hooks** - `onMounted`, `onUnmounted`, `onPropsChange`, `onStateChange`
 - **Slots** - Content projection for flexible component composition (Vue-style)
-- **Hash Router** - Built-in SPA routing with route guards and params
+- **Hash Router** - Built-in SPA routing with route guards, params, and scroll behavior
 - **Event System** - Parent-child communication via emit/subscribe
 - **Scheduler** - Async lifecycle execution with microtask batching
 
@@ -65,7 +65,9 @@ const router = new HashRouter([
   { path: '/', component: HomePage },
   { path: '/about', component: AboutPage },
   { path: '/user/:id', component: UserPage },
-]);
+], {
+  scrollBehavior: 'top'  // 'top', false, or custom function
+});
 
 const App = defineComponent({
   render() {
@@ -197,10 +199,36 @@ Creates a hash-based router.
 const router = new HashRouter([
   { path: '/', component: HomePage },
   { path: '/user/:id', component: UserPage },
+  { 
+    path: '/admin', 
+    component: AdminPage,
+    beforeEnter: (from, to) => {
+      // Route guard - return false to cancel, string to redirect
+      return isLoggedIn() ? true : '/login';
+    }
+  }
 ], {
-  beforeEnter: (to, from) => {
-    // Route guard - return false to cancel navigation
-    return true;
+  scrollBehavior: 'top'  // 'top' (default), false, or custom function
+});
+```
+
+#### Scroll Behavior Options
+
+```javascript
+// Default: scroll to top
+new HashRouter(routes);
+
+// Disable scroll
+new HashRouter(routes, { scrollBehavior: false });
+
+// Custom function for route-specific behavior
+new HashRouter(routes, {
+  scrollBehavior: (from, to) => {
+    // Don't scroll when navigating within the same section
+    if (from?.path?.startsWith('/docs') && to?.path?.startsWith('/docs')) {
+      return null;  // Prevent scrolling
+    }
+    return { x: 0, y: 0, behavior: 'smooth' };
   }
 });
 ```
@@ -216,7 +244,14 @@ this.appContext.router.navigateTo('/path')
 #### `RouterLink` Component
 
 ```javascript
-h(RouterLink, { to: '/about', activeClass: 'active' }, ['About'])
+h(RouterLink, { to: '/about' }, ['About'])
+
+// With anchor fragments
+h(RouterLink, { to: '/about#team' }, ['Meet the Team'])
+h(RouterLink, { to: '#features' }, ['Jump to Features'])
+
+// With custom classes and attributes
+h(RouterLink, { to: '/about', class: 'nav-link active' }, ['About'])
 ```
 
 #### `RouterOutlet` Component

package/dist/betal-fe.js

@@ -530,6 +530,7 @@ class HashRouter {
   #dispatcher = new Dispatcher();
   #subscriptions = new WeakMap();
   #subscriberFns = new Set();
+  #scrollBehavior = 'top';
   get matchedRoute() {
     return this.#matchedRoute;
   }
@@ -549,9 +550,12 @@ class HashRouter {
     return hash.slice(1);
   }
   #onPopState = () => this.#matchCurrentRoute();
-  constructor(routes = []) {
+  constructor(routes = [], options = {}) {
     assert(Array.isArray(routes), "Routes must be an array");
     this.#matchers = routes.map(makeRouteMatcher);
+    if (options.scrollBehavior !== undefined) {
+      this.#scrollBehavior = options.scrollBehavior;
+    }
   }
   async init() {
     if (this.#isInitialized) {
@@ -573,9 +577,12 @@ class HashRouter {
     this.#isInitialized = false;
   }
   async navigateTo(path) {
-    const matcher = this.#matchers.find((matcher) => matcher.checkMatch(path));
+    const hashIndex = path.indexOf('#', 1);
+    const pathWithoutHash = hashIndex !== -1 ? path.slice(0, hashIndex) : path;
+    const hash = hashIndex !== -1 ? path.slice(hashIndex + 1) : null;
+    const matcher = this.#matchers.find((matcher) => matcher.checkMatch(pathWithoutHash));
     if (matcher == null) {
-      console.warn(`[Router] No route matches path "${path}"`);
+      console.warn(`[Router] No route matches path "${pathWithoutHash}"`);
       this.#matchedRoute = null;
       this.#params = {};
       this.#query = {};
@@ -593,12 +600,39 @@ class HashRouter {
     }
     if (shouldNavigate) {
       this.#matchedRoute = matcher.route;
-      this.#params = matcher.extractParams(path);
-      this.#query = matcher.extractQuery(path);
+      this.#params = matcher.extractParams(pathWithoutHash);
+      this.#query = matcher.extractQuery(pathWithoutHash);
       this.#pushState(path);
+      this.#handleScrollBehavior(from, to, hash);
       this.#dispatcher.dispatch(ROUTER_EVENT, { from, to, router: this });
     }
   }
+  #handleScrollBehavior(from, to, hash) {
+    if (this.#scrollBehavior === false) {
+      return;
+    }
+    setTimeout(() => {
+      if (typeof this.#scrollBehavior === 'function') {
+        const position = this.#scrollBehavior(from, to, { hash });
+        if (position) {
+          window.scrollTo({
+            left: position.x || 0,
+            top: position.y || 0,
+            behavior: position.behavior || 'auto'
+          });
+        }
+      } else if (this.#scrollBehavior === 'top') {
+        if (hash) {
+          const element = document.getElementById(hash);
+          if (element) {
+            element.scrollIntoView({ behavior: 'auto' });
+            return;
+          }
+        }
+        window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+      }
+    }, 0);
+  }
   back() {
     window.history.back();
   }
@@ -1121,42 +1155,18 @@ const RouterLink = defineComponent({
     return h(
       "a",
       {
-        href: to,
+        href: `#${to}`,
         ...rest,
         on: {
           click: (e) => {
             e.preventDefault();
-            this.handleNavigation(to);
+            this.appContext.router.navigateTo(to);
           },
         },
       },
       [hSlot()]
     );
   },
-  handleNavigation(to) {
-    const anchorIndex = to.indexOf('#');
-    if (anchorIndex !== -1 && anchorIndex > 0) {
-      const path = to.substring(0, anchorIndex);
-      const anchor = to.substring(anchorIndex + 1);
-      this.appContext.router.navigateTo(path);
-      setTimeout(() => {
-        this.scrollToAnchor(anchor);
-      }, 0);
-    } else if (anchorIndex === 0) {
-      const anchor = to.substring(1);
-      this.scrollToAnchor(anchor);
-    } else {
-      this.appContext.router.navigateTo(to);
-    }
-  },
-  scrollToAnchor(anchorId) {
-    const element = document.getElementById(anchorId);
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    } else {
-      console.warn(`[RouterLink] Element with id "${anchorId}" not found`);
-    }
-  },
 });
 const RouterOutlet = defineComponent({
   state() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "betal-fe",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "type": "module",
   "main": "dist/betal-fe.js",
   "files": [