what-router 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-router",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "What Framework - File-based & programmatic router with View Transitions",
   "type": "module",
   "main": "src/index.js",
@@ -26,7 +26,7 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
-    "what-core": "^0.3.0"
+    "what-core": "^0.4.0"
   },
   "repository": {
     "type": "git",

package/src/index.js

@@ -108,8 +108,11 @@ function compilePath(path) {
 }
 
 function matchRoute(path, routes) {
+  // Filter out routes without a path (layout-only routes, etc.)
+  const routable = routes.filter(r => r.path);
+
   // Sort routes by specificity (more specific first)
-  const sorted = [...routes].sort((a, b) => {
+  const sorted = routable.sort((a, b) => {
     const aSpecific = (a.path.match(/:/g) || []).length + (a.path.includes('*') ? 100 : 0);
     const bSpecific = (b.path.match(/:/g) || []).length + (b.path.includes('*') ? 100 : 0);
     return aSpecific - bSpecific;
@@ -145,6 +148,7 @@ function parseQuery(search) {
 // Build the layout chain for a route
 function buildLayoutChain(route, routes) {
   const layouts = [];
+  if (!route.path) return layouts;
 
   // Check for nested layouts based on path segments
   const segments = route.path.split('/').filter(Boolean);
@@ -261,7 +265,10 @@ export function Link({
   ...rest
 }) {
   const currentPath = route.path;
-  const isActive = currentPath.startsWith(href);
+  // Segment-boundary matching: '/blog' matches '/blog/123' but not '/blog-archive'
+  const isActive = href === '/'
+    ? currentPath === '/'
+    : currentPath === href || currentPath.startsWith(href + '/');
   const isExactActive = currentPath === href;
 
   const classes = [
@@ -273,13 +280,13 @@ export function Link({
   return h('a', {
     href,
     class: classes,
-    onClick: (e) => {
+    onclick: (e) => {
       // Only intercept left-clicks without modifiers
       if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.button !== 0) return;
       e.preventDefault();
       navigate(href, { replace: rep, transition });
     },
-    onMouseenter: shouldPrefetch ? () => prefetch(href) : undefined,
+    onmouseenter: shouldPrefetch ? () => prefetch(href) : undefined,
     ...rest,
   }, ...(Array.isArray(children) ? children : [children]));
 }
@@ -480,3 +487,38 @@ export function Outlet({ children }) {
   // Children passed from parent layout
   return children || null;
 }
+
+// --- File-Based Router ---
+// Consumes routes generated by what-compiler's file router (virtual:what-routes).
+// Usage:
+//   import { routes } from 'virtual:what-routes';
+//   mount(<FileRouter routes={routes} />, '#app');
+
+export function FileRouter({
+  routes,
+  layout: globalLayout,
+  fallback,
+  error: globalError,
+}) {
+  // Convert file-router route format to Router's expected format
+  const routerRoutes = routes.map(r => ({
+    path: r.path,
+    component: r.component,
+    layout: r.layout || undefined,
+    // Attach page mode as metadata for build system
+    _mode: r.mode || 'client',
+  }));
+
+  return Router({
+    routes: routerRoutes,
+    globalLayout,
+    fallback: fallback || Default404,
+  });
+}
+
+function Default404() {
+  return h('div', { style: 'text-align:center;padding:60px 20px' },
+    h('h1', { style: 'font-size:48px;margin-bottom:8px' }, '404'),
+    h('p', { style: 'color:#64748b' }, 'Page not found'),
+  );
+}