metaowl 0.3.0 → 0.3.2

package/bin/metaowl-generate.js

@@ -92,15 +92,56 @@ function deriveRoute(pageFile) {
   return '/' + parts.join('/')
 }
 
+/**
+ * Extracts the layout name from a page component JS file.
+ * Looks for `static layout = 'layoutName'` or `@layout('layoutName')`.
+ *
+ * @param {string} pageFile - Absolute path to the page JS file
+ * @returns {string|null} Layout name or null if not found
+ */
+function extractLayoutName(pageFile) {
+  const jsSource = readFileSync(pageFile, 'utf-8')
+
+  // Match: static layout = 'layoutName' or static layout = "layoutName"
+  let match = jsSource.match(/static\s+layout\s*=\s*['"]([^'"]+)['"]/)
+  if (match) return match[1]
+
+  // Match: @layout('layoutName') or @layout("layoutName")
+  match = jsSource.match(/@layout\s*\(\s*['"]([^'"]+)['"]\s*\)/)
+  if (match) return match[1]
+
+  // Match: @defineLayout('layoutName', ...)
+  match = jsSource.match(/@defineLayout\s*\(\s*['"]([^'"]+)['"]/)
+  if (match) return match[1]
+
+  return 'default'
+}
+
 /**
  * Converts an OWL XML template to best-effort static HTML.
  * - Strips t-name on the root element
  * - Strips all t-* attributes
  * - Unwraps bare <t> elements (replaces with their inner content)
- * - Replaces PascalCase component tags with an HTML comment placeholder
+ * - Replaces PascalCase component tags with their template content
+ * - Replaces t-slot="default" with provided page content
+ * - Removes <templates> wrapper and root <t> elements
+ *
+ * @param {string} xml - OWL XML template
+ * @param {string} [pageContent] - Optional page content to inject into t-slot="default"
+ * @param {object} [options] - Options object
+ * @param {Map<string, string>} [options.templateCache] - Cache of template name -> content
  */
-function xmlToStaticHtml(xml) {
+function xmlToStaticHtml(xml, pageContent = '', options = {}) {
+  const { templateCache } = options
   let html = xml
+
+  // Remove <templates> wrapper
+  html = html.replace(/<templates>/g, '').replace(/<\/templates>/g, '')
+
+  // Remove root <t> elements (self-closing or with content)
+  // Match <t ...>...</t> at the start and end
+  html = html.replace(/^\s*<t[^>]*>/, '').replace(/<\/t>\s*$/, '')
+
   // Remove t-name attribute from root
   html = html.replace(/\s+t-name="[^"]*"/g, '')
   // Remove all t-* attributes (handles both t-if="..." and bare t-else/t-else)
@@ -109,10 +150,52 @@ function xmlToStaticHtml(xml) {
   html = html.replace(/<t\s*\/>/g, '')
   // Unwrap <t ...> ... </t> blocks — replace opening/closing tags with content
   html = html.replace(/<t(?:\s[^>]*)?>([\s\S]*?)<\/t>/g, (_, inner) => inner)
-  // Replace PascalCase component tags with a comment stub
-  // Matches <ComponentName ... /> and <ComponentName ...></ComponentName>
-  html = html.replace(/<([A-Z][A-Za-z0-9]*)\s*\/>/g, '<!-- $1 -->')
-  html = html.replace(/<([A-Z][A-Za-z0-9]*)(?:\s[^>]*)?>[\s\S]*?<\/\1>/g, '<!-- $1 -->')
+  // Replace t-slot="default" with page content (if provided)
+  if (pageContent) {
+    html = html.replace(/<t\s+t-slot="default"\s*\/?>/g, pageContent)
+    html = html.replace(/<t\s+t-slot="default"[^>]*>([\s\S]*?)<\/t>/g, pageContent)
+  }
+
+  // Replace PascalCase component tags with their template content (if available)
+  if (templateCache) {
+    // Keep replacing until no more changes (for nested components)
+    let previousHtml
+    do {
+      previousHtml = html
+      html = html.replace(/<([A-Z][A-Za-z0-9]*)\s*\/>/g, (match, componentName) => {
+        // Try different naming conventions
+        const templateNames = [
+          componentName,
+          componentName.charAt(0).toLowerCase() + componentName.slice(1),
+          componentName + 'Component',
+        ]
+        for (const name of templateNames) {
+          if (templateCache.has(name)) {
+            return templateCache.get(name)
+          }
+        }
+        return match // Keep original if not found
+      })
+      html = html.replace(/<([A-Z][A-Za-z0-9]*)(?:\s[^>]*)?>([\s\S]*?)<\/\1>/g, (match, componentName, innerContent) => {
+        const templateNames = [
+          componentName,
+          componentName.charAt(0).toLowerCase() + componentName.slice(1),
+          componentName + 'Component',
+        ]
+        for (const name of templateNames) {
+          if (templateCache.has(name)) {
+            return templateCache.get(name)
+          }
+        }
+        return match
+      })
+    } while (html !== previousHtml)
+  } else {
+    // No cache available, use comment stubs as fallback
+    html = html.replace(/<([A-Z][A-Za-z0-9]*)\s*\/>/g, '<!-- $1 -->')
+    html = html.replace(/<([A-Z][A-Za-z0-9]*)(?:\s[^>]*)?>[\s\S]*?<\/\1>/g, '<!-- $1 -->')
+  }
+
   return html.trim()
 }
 
@@ -125,16 +208,96 @@ function buildShell(baseHtml, pageFile) {
   const meta = extractMetaFromJs(jsSource)
   html = injectMeta(html, meta)
 
-  // Inject static HTML from OWL XML template (auto-extracted, best-effort)
-  const xmlFile = resolve(cwd, pageFile.replace(/\.js$/, '.xml'))
-  if (existsSync(xmlFile)) {
-    const xmlContent = readFileSync(xmlFile, 'utf-8')
-    const staticHtml = xmlToStaticHtml(xmlContent)
-    if (staticHtml) {
-      html = html.replace(/(<div\s+id="metaowl"[^>]*>)(<\/div>)/, `$1${staticHtml}$2`)
+  // Get the page's layout name
+  const layoutName = extractLayoutName(resolve(cwd, pageFile))
+  const layoutsDir = metaowlConfig.layoutsDir ?? 'src/layouts'
+  const componentsDir = metaowlConfig.componentsDir ?? 'src/components'
+
+  // Build template cache from all XML files (components, pages, layouts)
+  const templateCache = new Map()
+
+  // Scan component XML files
+  const componentXmlFiles = globSync(`${componentsDir}/**/*.xml`, { cwd })
+  for (const componentXmlFile of componentXmlFiles) {
+    const content = readFileSync(resolve(cwd, componentXmlFile), 'utf-8')
+    // Extract t-name values and their content: <t t-name="ComponentName">...content...</t>
+    const tNameMatches = content.matchAll(/<t\s+t-name="([^"]+)"[^>]*>([\s\S]*?)<\/t>/g)
+    for (const match of tNameMatches) {
+      const templateName = match[1]
+      const templateContent = match[2]
+      templateCache.set(templateName, templateContent)
+    }
+    // Also try to get the root element as the template (without t-name)
+    const rootMatch = content.match(/<templates>\s*<t[^>]*>([\s\S]*?)<\/t>\s*<\/templates>/)
+    if (rootMatch) {
+      // Try to derive component name from file path
+      const fileName = componentXmlFile.replace(/\.xml$/, '').split('/').pop()
+      if (fileName) {
+        templateCache.set(fileName, rootMatch[1])
+      }
+    }
+  }
+
+  // Also scan layout XML files for templates
+  const layoutXmlFiles = globSync(`${layoutsDir}/**/*.xml`, { cwd })
+  for (const layoutXmlFile of layoutXmlFiles) {
+    const content = readFileSync(resolve(cwd, layoutXmlFile), 'utf-8')
+    const tNameMatches = content.matchAll(/<t\s+t-name="([^"]+)"[^>]*>([\s\S]*?)<\/t>/g)
+    for (const match of tNameMatches) {
+      templateCache.set(match[1], match[2])
+    }
+  }
+
+  // Also scan page XML files for templates
+  const pageXmlFiles = globSync(`${pagesDir}/**/*.xml`, { cwd })
+  for (const pageXmlFile of pageXmlFiles) {
+    const content = readFileSync(resolve(cwd, pageXmlFile), 'utf-8')
+    const tNameMatches = content.matchAll(/<t\s+t-name="([^"]+)"[^>]*>([\s\S]*?)<\/t>/g)
+    for (const match of tNameMatches) {
+      templateCache.set(match[1], match[2])
+    }
+    // Try to get the root element as the template (without t-name)
+    const rootMatch = content.match(/<templates>\s*<t[^>]*>([\s\S]*?)<\/t>\s*<\/templates>/)
+    if (rootMatch) {
+      const fileName = pageXmlFile.replace(/\.xml$/, '').split('/').pop()
+      if (fileName) {
+        templateCache.set(fileName, rootMatch[1])
+      }
     }
   }
 
+  // Try to find and read the layout XML template
+  let finalContent = ''
+
+  // First, try to read the layout XML
+  const layoutXmlFile = resolve(cwd, layoutsDir, layoutName, `${layoutName.charAt(0).toUpperCase() + layoutName.slice(1)}Layout.xml`)
+  const layoutXmlExists = existsSync(layoutXmlFile)
+
+  // Read the page XML template
+  const pageXmlFile = resolve(cwd, pageFile.replace(/\.js$/, '.xml'))
+  const pageXmlExists = existsSync(pageXmlFile)
+
+  if (layoutXmlExists && pageXmlExists) {
+    // Read both layout and page templates
+    const layoutXmlContent = readFileSync(layoutXmlFile, 'utf-8')
+    const pageXmlContent = readFileSync(pageXmlFile, 'utf-8')
+
+    // Convert page XML to static HTML first
+    const pageStaticHtml = xmlToStaticHtml(pageXmlContent, '', { templateCache })
+
+    // Then inject into layout's t-slot="default"
+    finalContent = xmlToStaticHtml(layoutXmlContent, pageStaticHtml, { templateCache })
+  } else if (pageXmlExists) {
+    // No layout found, just use page content
+    const pageXmlContent = readFileSync(pageXmlFile, 'utf-8')
+    finalContent = xmlToStaticHtml(pageXmlContent, '', { templateCache })
+  }
+
+  // Inject the combined layout + page HTML
+  if (finalContent) {
+    html = html.replace(/(<div\s+id="metaowl"[^>]*>)(<\/div>)/, `$1${finalContent}$2`)
+  }
+
   return html
 }
 

package/modules/templates-manager.js

@@ -6,15 +6,37 @@
 import { loadFile } from '@odoo/owl'
 
 /**
- * Loads and concatenates a list of OWL XML template files into a single
- * `<templates>` string ready to be passed to OWL's mount() options.
+ * Loads OWL XML template(s) into a string ready to be passed to OWL's mount() options.
  *
- * @param {string[]} files - Array of URL-style XML paths, e.g. ['/owl/components/Header/Header.xml']
+ * If a single file is provided that already contains <templates> wrapper (merged file),
+ * it's returned as-is. Otherwise, the content is wrapped in <templates>.
+ *
+ * @param {string|string[]} files - Array of URL-style XML paths or single path
  * @returns {Promise<string>}
  */
 export async function mergeTemplates(files) {
+  // Normalize to array
+  const fileArray = Array.isArray(files) ? files : [files]
+
+  // If there's only one file, check if it's already wrapped
+  if (fileArray.length === 1) {
+    try {
+      const content = await loadFile(fileArray[0])
+      // If already wrapped (merged templates.xml), return as-is
+      if (content.trim().startsWith('<templates>')) {
+        return content
+      }
+      // Otherwise wrap it
+      return '<templates>' + content + '</templates>'
+    } catch (e) {
+      console.error(`[metaowl] Failed to load template: ${fileArray[0]}`, e)
+      return '<templates></templates>'
+    }
+  }
+
+  // Multiple files: load each and wrap in <templates>
   const results = await Promise.all(
-    files.map(async (file) => {
+    fileArray.map(async (file) => {
       try {
         return await loadFile(file)
       } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "metaowl",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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",
@@ -37,7 +37,6 @@
   },
   "dependencies": {
     "@eslint/js": "^9.20.1",
-    "@fullhuman/postcss-purgecss": "^6.0.0",
     "@odoo/owl": "^2.8.2",
     "@typescript-eslint/eslint-plugin": "^8.24.1",
     "@typescript-eslint/parser": "^8.24.1",
@@ -54,7 +53,7 @@
     "vite-tsconfig-paths": "^6.1.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "scripts": {
     "test": "vitest run",

package/postcss.cjs

@@ -4,37 +4,22 @@
 //   const { createPostcssConfig } = require('metaowl/postcss')
 //   module.exports = createPostcssConfig()
 //
-// Override safelist or add content globs:
+// Add extra PostCSS plugins:
 //
 //   module.exports = createPostcssConfig({
-//     safelist: [/^my-custom-class/],
-//     content: ['./templates/**/*.html']
+//     additionalPlugins: [require('some-postcss-plugin')()]
 //   })
-
-const defaultSafelist = []
+//
+// Note: PurgeCSS is intentionally not included. Tailwind CSS v4 performs its
+// own content scanning and generates only the CSS that is actually used.
+// Adding PurgeCSS on top breaks responsive variants (sm:, md:, lg:, etc.)
+// because its default extractor treats ":" as a separator.
 
 function createPostcssConfig(options = {}) {
-  const {
-    safelist = [],
-    content = [],
-    additionalPlugins = []
-  } = options
+  const { additionalPlugins = [] } = options
 
   return {
     plugins: [
-      ...process.env.NODE_ENV === 'production'
-        ? [
-            require('@fullhuman/postcss-purgecss')({
-              content: [
-                './**/*.xml',
-                './**/*.html',
-                './src/**/*.js',
-                ...content
-              ],
-              safelist: [...defaultSafelist, ...safelist]
-            })
-          ]
-        : [],
       ...additionalPlugins
     ]
   }

package/vite/plugin.js

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import { resolve, dirname } from 'node:path'
-import { mkdirSync, copyFileSync, cpSync, existsSync } from 'node:fs'
+import { mkdirSync, copyFileSync, cpSync, existsSync, readFileSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { globSync } from 'glob'
 import { config as dotenvConfig } from 'dotenv'
@@ -25,6 +25,33 @@ function collectXml(globPattern) {
   return globSync(globPattern).map(p => p.replace(/^src[\\/]/, '/'))
 }
 
+/**
+ * Merge all XML template files into a single XML string.
+ * Removes <templates> wrappers from individual files and wraps everything in a single <templates>.
+ * The result is minified to reduce file size.
+ *
+ * @param {string[]} xmlPaths - Array of absolute file paths to XML files
+ * @returns {string} Merged XML string
+ */
+function mergeXmlFiles(xmlPaths) {
+  const templates = xmlPaths.map(filePath => {
+    try {
+      let content = readFileSync(filePath, 'utf-8')
+      // Remove <templates> wrapper if present in individual file
+      content = content.replace(/<templates>/g, '').replace(/<\/templates>/g, '')
+      return content
+    } catch (e) {
+      console.error(`[metaowl] Failed to read XML file: ${filePath}`, e)
+      return ''
+    }
+  }).join('')
+
+  // Minify: remove unnecessary whitespace while keeping valid XML structure
+  const minified = '<templates>' + templates.replace(/\s+/g, ' ').replace(/>\s+</g, '><').trim() + '</templates>'
+
+  return minified
+}
+
 /**
  * metaowl Vite plugin.
  *
@@ -119,7 +146,7 @@ export async function metaowlPlugin(options = {}) {
         cfg.define = {
           ...(cfg.define ?? {}),
           DEV_MODE: isDev,
-          COMPONENTS: JSON.stringify(allComponents),
+          COMPONENTS: JSON.stringify(isDev ? allComponents : ['/templates.xml']),
           'process.env': safeEnv
         }
 
@@ -200,14 +227,11 @@ export async function metaowlPlugin(options = {}) {
       closeBundle() {
         const projectRoot = process.cwd()
 
-        // Copy OWL XML templates (loaded at runtime via fetch — not processed by Vite)
+        // Merge all OWL XML templates into a single file
         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)
-          mkdirSync(dirname(dest), { recursive: true })
-          copyFileSync(resolve(projectRoot, xmlFile), dest)
-        }
+        const mergedXml = mergeXmlFiles(xmlFiles)
+        const templatesPath = resolve(_outDirResolved, 'templates.xml')
+        writeFileSync(templatesPath, mergedXml, 'utf-8')
 
         // Copy assets/images (referenced via absolute URLs in XML — not processed by Vite)
         const srcImages = resolve(projectRoot, root, 'assets', 'images')