metaowl 0.3.4 → 0.3.5

package/README.md

@@ -267,7 +267,7 @@ File-based routing supports dynamic segments using bracket notation. The router
 | `pages/product/[category]/[slug]/Product.js` | `/product/:category/:slug` | `/product/tech/hello` | `{ category: 'tech', slug: 'hello' }` |
 | `pages/blog/[id]/[slug?]/Blog.js` | `/blog/:id/:slug?` | `/blog/123` or `/blog/123/my-post` | `{ id: '123' }` or `{ id: '123', slug: 'my-post' }` |
 | `pages/docs/[...path]/Docs.js` | `/docs/:path(.*)` | `/docs/api/routing` | `{ path: 'api/routing' }` |
-| `pages/[...404]/NotFound.js` | `/:path(.*)` | `/any/unknown/path` | `{ path: 'any/unknown/path' }` |
+| `pages/[...path]/NotFound.js` | `/:path(.*)` | `/any/unknown/path` | `{ path: 'any/unknown/path' }` |
 
 **Param Types:**
 
@@ -275,23 +275,53 @@ File-based routing supports dynamic segments using bracket notation. The router
 - `[param?]` — Optional parameter, may be omitted
 - `[...param]` — Catch-all parameter, matches any number of segments
 
-Access parameters in your component:
+Access parameters in your component via `getCurrentRoute()`:
 
 ```js
-import { Component, xml } from '@odoo/owl'
+import { Component } from '@odoo/owl'
+import { getCurrentRoute } from 'metaowl'
 
-export class UserPage extends Component {
-  static template = xml`
-    <div>
-      <h1>User Profile</h1>
-      <p>ID: <t t-esc="props.params.id"/></p>
-    </div>
-  `
-  
-  static props = ['params']
+export default class UserPage extends Component {
+  static template = 'UserPage'
+
+  setup() {
+    const route = getCurrentRoute()
+    this.id = route?.params?.id
+  }
+}
+```
+
+---
+
+### 404 / Not Found Pages
+
+Create a catch-all route at `pages/[...path]/` to handle unknown URLs:
+
+```
+src/pages/
+  [...path]/
+    NotFound.js   ← rendered for any unmatched URL
+    NotFound.xml
+```
+
+```js
+// pages/[...path]/NotFound.js
+import { Component } from '@odoo/owl'
+import { Meta } from 'metaowl'
+
+export default class NotFound extends Component {
+  static template = 'NotFound'
+
+  setup() {
+    Meta.title('404 – Page Not Found')
+  }
 }
 ```
 
+The catch-all directory can be named `[...path]`, `[...404]`, or any `[...name]` — the bracket-dot-dot-dot prefix is what makes it a catch-all regardless of name.
+
+If no catch-all route exists and a URL cannot be matched, metaowl renders a minimal built-in 404 message so the page doesn't silently break.
+
 ---
 
 ## Layouts

package/index.js

@@ -188,6 +188,27 @@ export async function boot(routesOrModules = {}, layoutsOrModules = null) {
   const routes = Array.isArray(routesOrModules)
     ? routesOrModules
     : buildRoutes(routesOrModules)
-  const route = await processRoutes(routes)
+
+  let route
+  try {
+    route = await processRoutes(routes)
+  } catch (error) {
+    if (error.message && error.message.startsWith('No route found')) {
+      console.warn('[metaowl]', error.message)
+      const el = document.getElementById('metaowl')
+      if (el) {
+        el.innerHTML = [
+          '<div style="font-family:sans-serif;padding:3rem;text-align:center">',
+          '<h1 style="font-size:4rem;font-weight:700;margin:0;color:#6b7280">404</h1>',
+          '<p style="font-size:1.25rem;color:#9ca3af;margin-top:0.5rem">Page not found</p>',
+          '<p style="margin-top:2rem"><a href="/" style="color:#3b82f6;text-decoration:none">← Go home</a></p>',
+          '</div>'
+        ].join('')
+      }
+      return
+    }
+    throw error
+  }
+
   await mountApp(route)
 }

package/modules/file-router.js

@@ -279,20 +279,30 @@ export function buildRoutes(modules) {
     routes.push(route)
   }
 
-  // Sort routes: static routes first, then dynamic, then catch-all
+  // Sort routes: static first, then dynamic (fewer params first), catch-all last
   routes.sort((a, b) => {
     const aPath = a.path[0]
     const bPath = b.path[0]
 
-    // Static routes come first
+    // Catch-all :name(.*) routes always come last
+    const aIsCatchAll = aPath.includes('(.*)')
+    const bIsCatchAll = bPath.includes('(.*)')
+    if (!aIsCatchAll && bIsCatchAll) return -1
+    if (aIsCatchAll && !bIsCatchAll) return 1
+
+    // Static routes before dynamic routes
     const aIsDynamic = isDynamicRoute(aPath)
     const bIsDynamic = isDynamicRoute(bPath)
 
     if (!aIsDynamic && bIsDynamic) return -1
     if (aIsDynamic && !bIsDynamic) return 1
 
-    // Among dynamic routes, fewer params come first
+    // Among dynamic routes, more specific (longer path) comes first
     if (aIsDynamic && bIsDynamic) {
+      const aSegments = aPath.split('/').length
+      const bSegments = bPath.split('/').length
+      if (aSegments !== bSegments) return bSegments - aSegments
+
       const aParamCount = a.params?.length || 0
       const bParamCount = b.params?.length || 0
       return aParamCount - bParamCount

package/modules/router.js

@@ -162,24 +162,25 @@ class Router {
    * @returns {boolean}
    */
   pathMatches(routePath, currentPath) {
-    // Convert route pattern to regex
+    // Simple exact match for static routes
     if (!routePath.includes(':') && !routePath.includes('*')) {
-      // Simple exact match
       const normalizedRoute = routePath.replace(/\/$/, '') || '/'
       const normalizedCurrent = currentPath.replace(/\/$/, '') || '/'
       return normalizedRoute === normalizedCurrent
     }
 
-    // Dynamic route matching
+    // Build regex without pre-escaping the whole string (which would break : and * handling)
     let pattern = routePath
-      // Escape special regex characters except pattern markers
-      .replace(/[.+?^${}()|[\]\\]/g, '\\$&')
-      // Replace optional params :param?
-      .replace(/\\:([^/]+)\\?/g, '(?:\\/([^/]+))?')
-      // Replace required params :param
-      .replace(/\\:([^/]+)/g, '([^/]+)')
-      // Replace wildcards
-      .replace(/\\\*/g, '(.*)')
+      // Escape forward slashes
+      .replace(/\//g, '\\/')
+      // Replace catch-all :name(.*) params — must come before required-param replacement
+      .replace(/:([^/(]+)\(\.\*\)/g, '(.*)')
+      // Replace optional params /:name?
+      .replace(/\/:([^/(]+)\?/g, '(?:/([^/]+))?')
+      // Replace required params :name
+      .replace(/:([^/(?\s]+)/g, '([^/]+)')
+      // Replace bare wildcards *
+      .replace(/\*/g, '(.*)')
 
     pattern = '^' + pattern + '$'
     const regex = new RegExp(pattern)
@@ -219,12 +220,23 @@ class Router {
       return null
     }
 
-    // Extract parameter names
+    // Extract parameter names in the correct order
     const paramNames = []
-    const pattern = routePath.replace(/:([^/?]+)\??/g, (match, name) => {
-      paramNames.push(name)
-      return '([^/]+)'
-    })
+
+    // Build pattern: handle catch-all :name(.*) first, then optional, then required
+    let pattern = routePath
+      .replace(/:([^/(]+)\(\.\*\)/g, (match, name) => {
+        paramNames.push(name)
+        return '(.*)'
+      })
+      .replace(/\/:([^/(]+)\?/g, (match, name) => {
+        paramNames.push(name)
+        return '(?:/([^/]+))?'
+      })
+      .replace(/:([^/(?\s]+)/g, (match, name) => {
+        paramNames.push(name)
+        return '([^/]+)'
+      })
 
     const regex = new RegExp('^' + pattern + '$')
     const matches = currentPath.match(regex)
@@ -233,7 +245,9 @@ class Router {
 
     const params = {}
     for (let i = 0; i < paramNames.length; i++) {
-      params[paramNames[i]] = matches[i + 1]
+      if (matches[i + 1] !== undefined) {
+        params[paramNames[i]] = matches[i + 1]
+      }
     }
 
     return params

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metaowl",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Lightweight meta-framework for Odoo OWL — file-based routing, app mounting, Fetch helper, Cache, Meta tags, SSG generator, and a Vite plugin.",
   "type": "module",
   "main": "index.js",

package/test/dynamic-routes.test.js

@@ -393,7 +393,7 @@ describe('Dynamic Routes', () => {
 
       // Check that routes are sorted correctly
       const blogRoute = routes.find(r => r.name === 'blog')
-      const categoryRoute = routes.find(r => r.name.includes('category'))
+      const categoryRoute = routes.find(r => r.name.includes('category') && !r.name.includes('slug'))
       const postRoute = routes.find(r => r.name.includes('slug'))
 
       expect(blogRoute.path[0]).toBe('/blog')