metaowl 0.2.9 → 0.2.11

package/bin/metaowl-create.js

@@ -397,6 +397,39 @@ router.beforeEach((to, from, next) => {
 - File: pages/blog/[slug]/Blog.js → URL: /blog/:slug
 - File: pages/[...path]/NotFound.js → URL: /:path(.*)
 
+### Layouts
+Share page structures across routes with automatic layout resolution:
+
+\`\`\`javascript
+// pages/admin/Dashboard.js
+export class DashboardPage extends Component {
+  static template = 'DashboardPage'
+  static layout = 'admin'  // Use admin layout
+}
+\`\`\`
+
+Layout Directory:
+\`\`\`
+src/
+├── layouts/
+│   ├── default/
+│   │   ├── DefaultLayout.js
+│   │   └── DefaultLayout.xml
+│   └── admin/
+│       ├── AdminLayout.js
+│       └── AdminLayout.xml
+\`\`\`
+
+Layout Template uses \`<t t-slot=\"default\"/>\` to render page content:
+\`\`\`xml
+<t t-name="AdminLayout">
+  <div class="layout-admin">
+    <aside>Sidebar</aside>
+    <main><t t-slot="default"/></main>
+  </div>
+</t>
+\`\`\`
+
 ### API Requests
 \`\`\`javascript
 import { Fetch } from 'metaowl'
@@ -521,6 +554,24 @@ router.push('/path')
 router.back()
 \`\`\`
 
+### Layouts
+Shared page structures with automatic resolution.
+\`\`\`javascript
+// In page component
+export class DashboardPage extends Component {
+  static template = 'DashboardPage'
+  static layout = 'admin'  // Use admin layout
+}
+\`\`\`
+
+// Layout component uses t-slot for page content:
+// <t t-slot="default"/>
+
+Layout functions:
+- registerLayout(name, Component) - Register a layout
+- resolveLayout(Component, path?) - Get layout for component
+- setRouteLayout(path, name) - Assign layout to route
+
 ## Component Template
 \`\`\`javascript
 import { Component } from '@odoo/owl'

package/modules/app-mounter.js

@@ -7,6 +7,7 @@
  */
 import { mount } from '@odoo/owl'
 import { mergeTemplates } from './templates-manager.js'
+import { resolveLayout, getLayout, mountWithLayout } from './layouts.js'
 
 const _defaults = {
   warnIfNoStaticProps: true,
@@ -43,5 +44,18 @@ export async function mountApp(route) {
   const mountElement = document.getElementById('metaowl')
   mountElement.innerHTML = ''
 
-  await mount(route[0].component, mountElement, { ..._config, templates })
+  const pageComponent = route[0].component
+  const pagePath = route[0].path
+
+  // Check for layout
+  const layoutName = resolveLayout(pageComponent, pagePath)
+  const LayoutClass = getLayout(layoutName)
+
+  if (LayoutClass) {
+    // Mount with layout
+    await mountWithLayout(pageComponent, mountElement, { routePath: pagePath, templates })
+  } else {
+    // Mount without layout
+    await mount(pageComponent, mountElement, { ..._config, templates })
+  }
 }

package/modules/layouts.js

@@ -272,7 +272,7 @@ export function createLayoutWrapper(layoutComponent, pageComponent, props = {})
  * @returns {Promise<Component>} Mounted component instance
  */
 export async function mountWithLayout(pageComponent, target, options = {}, config = {}) {
-  const { routePath, props = {} } = options
+  const { routePath, props = {}, templates } = options
 
   const layoutName = resolveLayout(pageComponent, routePath)
   const LayoutClass = getLayout(layoutName)
@@ -280,14 +280,14 @@ export async function mountWithLayout(pageComponent, target, options = {}, confi
   if (!LayoutClass) {
     console.warn(`[metaowl] Layout "${layoutName}" not found, mounting page without layout`)
     const { mount } = await import('@odoo/owl')
-    return mount(pageComponent, target, { ...config, props })
+    return mount(pageComponent, target, { ...config, props, templates })
   }
 
   // Create wrapper that combines layout and page
   const WrapperClass = createLayoutWrapper(LayoutClass, pageComponent, props)
 
   const { mount } = await import('@odoo/owl')
-  const instance = await mount(WrapperClass, target, config)
+  const instance = await mount(WrapperClass, target, { ...config, templates })
 
   _currentLayout = instance
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metaowl",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "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/vite/plugin.js

@@ -35,6 +35,7 @@ function collectXml(globPattern) {
  * @param {string} [options.publicDir='../public'] - Public assets directory.
  * @param {string} [options.componentsDir='src/components'] - OWL components directory.
  * @param {string} [options.pagesDir='src/pages'] - OWL pages directory.
+ * @param {string} [options.layoutsDir='src/layouts'] - OWL layouts directory.
  * @param {string[]} [options.restartGlobs] - Additional globs that trigger dev-server restart.
  * @param {string} [options.frameworkEntry] - Framework entry for manual chunk.
  * @param {string[]} [options.vendorPackages] - npm packages bundled into the vendor chunk.
@@ -51,6 +52,7 @@ export async function metaowlPlugin(options = {}) {
     publicDir = '../public',
     componentsDir = 'src/components',
     pagesDir = 'src/pages',
+    layoutsDir = 'src/layouts',
     restartGlobs = [],
     frameworkEntry = './node_modules/metaowl/index.js',
     vendorPackages = ['@odoo/owl'],
@@ -60,7 +62,8 @@ export async function metaowlPlugin(options = {}) {
 
   const componentXml = collectXml(`${componentsDir}/**/*.xml`)
   const pageXml = collectXml(`${pagesDir}/**/*.xml`)
-  const allComponents = [...pageXml, ...componentXml]
+  const layoutXml = collectXml(`${layoutsDir}/**/*.xml`)
+  const allComponents = [...pageXml, ...componentXml, ...layoutXml]
 
   const defaultRestartGlobs = [
     `${root}/**/*.[jt]s`,
@@ -169,7 +172,8 @@ export async function metaowlPlugin(options = {}) {
           include: ['@odoo/owl'],
           entries: [
             `${componentsDir}/**/*.[jt]s`,
-            `${pagesDir}/**/*.[jt]s`
+            `${pagesDir}/**/*.[jt]s`,
+            `${layoutsDir}/**/*.[jt]s`
           ],
           ...(cfg.optimizeDeps ?? {})
         }
@@ -183,10 +187,14 @@ export async function metaowlPlugin(options = {}) {
       transform(code, id) {
         if (!id.endsWith('/metaowl.js')) return
         const pagesRel = pagesDir.replace(new RegExp(`^${root}[\\/]`), '')
+        const layoutsRel = layoutsDir.replace(new RegExp(`^${root}[\\/]`), '')
         return {
           code: code.replace(
             /boot\(\s*\)/,
             `boot(import.meta.glob('./${pagesRel}/**/*.js', { eager: true }))`
+          ).replace(
+            /discoverLayouts\(\s*\)/,
+            `discoverLayouts(import.meta.glob('./${layoutsRel}/**/*.js', { eager: true }))`
           ),
           map: null
         }
@@ -198,10 +206,12 @@ export async function metaowlPlugin(options = {}) {
         if (!id.endsWith('/css.js')) return
         const compRel = componentsDir.replace(new RegExp(`^${root}[\\/]`), '')
         const pagesRel = pagesDir.replace(new RegExp(`^${root}[\\/]`), '')
+        const layoutsRel = layoutsDir.replace(new RegExp(`^${root}[\\/]`), '')
         return {
           code: code + '\n' +
             `import.meta.glob('/${compRel}/**/*.{css,scss}', { eager: true })\n` +
-            `import.meta.glob('/${pagesRel}/**/*.{css,scss}', { eager: true })\n`,
+            `import.meta.glob('/${pagesRel}/**/*.{css,scss}', { eager: true })\n` +
+            `import.meta.glob('/${layoutsRel}/**/*.{css,scss}', { eager: true })\n`,
           map: null
         }
       }
@@ -213,7 +223,7 @@ export async function metaowlPlugin(options = {}) {
         const projectRoot = process.cwd()
 
         // Copy OWL XML templates (loaded at runtime via fetch — not processed by Vite)
-        const xmlFiles = globSync([`${componentsDir}/**/*.xml`, `${pagesDir}/**/*.xml`])
+        const xmlFiles = globSync([`${componentsDir}/**/*.xml`, `${pagesDir}/**/*.xml`, `${layoutsDir}/**/*.xml`])
         for (const xmlFile of xmlFiles) {
           const relPath = xmlFile.replace(new RegExp(`^${root}[\\/]`), '')
           const dest = resolve(_outDirResolved, relPath)