metaowl 0.3.4 → 0.3.7

package/README.md

@@ -4,10 +4,12 @@
 
 [![npm version](https://img.shields.io/npm/v/metaowl.svg)](https://www.npmjs.com/package/metaowl)
 [![License: LGPL v3](https://img.shields.io/badge/License-LGPL_v3-blue.svg)](LICENSE)
-[![Node.js >=18](https://img.shields.io/badge/node-%3E%3D18-brightgreen.svg)](https://nodejs.org)
+[![Node.js >=20](https://img.shields.io/badge/node-%3E%3D20-brightgreen.svg)](https://nodejs.org)
 [![GitHub Issues](https://img.shields.io/github/issues/dennisschott/metaowl.svg)](https://github.com/dennisschott/metaowl/issues)
 
-metaowl is a complete solution for building production-ready OWL applications with everything you need out of the box:
+> ⚠️ **Work in progress:** metaowl is not production-ready yet. APIs may change without notice, and features may still break between releases.
+
+metaowl is a complete solution for building OWL applications with everything you need out of the box:
 
 **Core Infrastructure:** File-based routing with dynamic routes, layout system, navigation guards, Pinia-inspired state management, and zero-config app mounting.
 
@@ -99,7 +101,7 @@ All powered by a batteries-included Vite plugin that handles the build pipeline,
 
 | Dependency | Version |
 |---|---|
-| Node.js | `>=18` |
+| Node.js | `>=20` |
 | `@odoo/owl` | bundled |
 
 ---
@@ -267,7 +269,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,25 +277,55 @@ 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
 
 Layouts provide shared page structures. Create a `layouts/` directory alongside your `pages/`:
@@ -1434,6 +1466,20 @@ npx serve -s dist
 
 ---
 
+## Changelog
+
+### v0.3.7 (2026-03-24)
+
+**Fixed:**
+
+- **bin/metaowl-lint.js**: Fixed inconsistent default lint paths. Changed from `src/owl/pages/**` and `src/owl/components/**` to `src/pages/**` and `src/components/**` to match the documented project structure.
+
+- **eslint.js**: Fixed `ignores` configuration placement. Moved `ignores` to a separate configuration object as required by ESLint Flat Config format. Also added `.metaowl/**` to the ignore list for the auto-generated component declarations.
+
+- **modules/auto-import.js**: Fixed missing `node:` prefix for Node.js built-in module import.
+
+---
+
 ## Contributing
 
 Contributions are welcome! Please open an issue before submitting a pull request so we can discuss the change.

package/bin/metaowl-lint.js

@@ -27,8 +27,8 @@ try {
 const defaults = [
   'src/metaowl.js',
   'src/css.js',
-  'src/owl/pages/**',
-  'src/owl/components/**'
+  'src/pages/**',
+  'src/components/**'
 ]
 
 const candidates = lintTargets ?? defaults

package/eslint.js

@@ -39,11 +39,14 @@ export const eslintConfig = [
       'quotes': ['error', 'single'],
       'comma-dangle': ['error', 'never'],
       'no-undef': 'off'
-    },
+    }
+  },
+  {
     ignores: [
       'node_modules/**',
       'dist/**',
-      'build/**'
+      'build/**',
+      '.metaowl/**'
     ]
   }
 ]

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/auto-import.js

@@ -23,7 +23,7 @@
  */
 
 import { globSync } from 'glob'
-import { resolve, relative, basename, extname, dirname } from 'path'
+import { resolve, relative, basename, extname, dirname } from 'node:path'
 
 /**
  * Registry of auto-discovered components.

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.7",
   "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')