metaowl 0.4.0 → 0.5.0

package/bin/metaowl-generate.js

@@ -1,339 +0,0 @@
-#!/usr/bin/env node
-/**
- * metaowl generate — SSG production build.
- *
- * Runs lint + vite build, then generates a static HTML file for every page:
- * - <title> and meta tags extracted statically from Meta.*() calls in the page JS
- * - Static HTML content auto-extracted from the page's OWL XML template,
- *   with OWL-specific syntax stripped (best-effort, no JS evaluated)
- *
- * pagesDir / outDir can be overridden in package.json under "metaowl":
- *   { "metaowl": { "pagesDir": "src/pages", "outDir": "dist" } }
- */
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { globSync } from 'glob'
-import { banner, cwd, metaowlRoot, resolveBin, run, step, success, failure } from './utils.js'
-
-banner('generate')
-
-function escapeAttr(str) {
-  return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;')
-}
-
-/**
- * Statically extract Meta.*() call arguments from JS source.
- * Only works for string literals — dynamic values are skipped.
- *
- * Returns an object with the keys:
- *   title, description, keywords, author, canonical,
- *   ogTitle, ogDescription, ogImage, ogUrl, ogType, ogSiteName
- */
-function extractMetaFromJs(src) {
-  const meta = {}
-  const fns = [
-    'title', 'description', 'keywords', 'author', 'canonical',
-    'ogTitle', 'ogDescription', 'ogImage', 'ogUrl', 'ogType', 'ogSiteName',
-  ]
-  for (const fn of fns) {
-    const m = src.match(new RegExp(`Meta\\.${fn}\\s*\\(\\s*(['"\`])([^'"\`]+)\\1\\s*\\)`))
-    if (m) meta[fn] = m[2]
-  }
-  return meta
-}
-
-/**
- * Inject extracted meta values into the HTML head.
- * Returns the modified HTML string.
- */
-function injectMeta(html, meta) {
-  if (meta.title) {
-    html = html.replace(/<title>[^<]*<\/title>/, `<title>${escapeAttr(meta.title)}</title>`)
-  }
-  /** @param {string} selector @param {string} tag */
-  const injectTag = (selector, tag) => {
-    html = html.replace(new RegExp(`\\s*${selector}[^>]*>\\s*`, 'gi'), '')
-    html = html.replace('</head>', `  ${tag}\n  </head>`)
-  }
-  if (meta.description)
-    injectTag('<meta\\s+name="description"', `<meta name="description" content="${escapeAttr(meta.description)}">`)
-  if (meta.keywords)
-    injectTag('<meta\\s+name="keywords"', `<meta name="keywords" content="${escapeAttr(meta.keywords)}">`)
-  if (meta.author)
-    injectTag('<meta\\s+name="author"', `<meta name="author" content="${escapeAttr(meta.author)}">`)
-  if (meta.canonical)
-    injectTag('<link\\s+rel="canonical"', `<link rel="canonical" href="${escapeAttr(meta.canonical)}">`)
-  if (meta.ogTitle)
-    injectTag('<meta\\s+property="og:title"', `<meta property="og:title" content="${escapeAttr(meta.ogTitle)}">`)
-  if (meta.ogDescription)
-    injectTag('<meta\\s+property="og:description"', `<meta property="og:description" content="${escapeAttr(meta.ogDescription)}">`)
-  if (meta.ogImage)
-    injectTag('<meta\\s+property="og:image"', `<meta property="og:image" content="${escapeAttr(meta.ogImage)}">`)
-  if (meta.ogUrl)
-    injectTag('<meta\\s+property="og:url"', `<meta property="og:url" content="${escapeAttr(meta.ogUrl)}">`)
-  if (meta.ogType)
-    injectTag('<meta\\s+property="og:type"', `<meta property="og:type" content="${escapeAttr(meta.ogType)}">`)
-  if (meta.ogSiteName)
-    injectTag('<meta\\s+property="og:site_name"', `<meta property="og:site_name" content="${escapeAttr(meta.ogSiteName)}">`)
-  return html
-}
-
-// Read project config
-const pkg = JSON.parse(readFileSync(resolve(cwd, 'package.json'), 'utf-8'))
-const metaowlConfig = pkg.metaowl ?? {}
-const pagesDir = metaowlConfig.pagesDir ?? 'src/pages'
-const outDir = metaowlConfig.outDir ?? 'dist'
-
-// Derive URL route from a page file path
-function deriveRoute(pageFile) {
-  const rel = pageFile.replace(new RegExp(`^${pagesDir}[\\/]`), '')
-  const parts = rel.split('/').slice(0, -1)
-  if (parts.length === 1 && parts[0] === 'index') return '/'
-  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 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, 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)
-  html = html.replace(/\s+t-[\w-]+(="[^"]*")?/g, '')
-  // Unwrap bare <t> wrapper elements (self-closing)
-  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 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()
-}
-
-// Build final HTML shell for a page
-function buildShell(baseHtml, pageFile) {
-  let html = baseHtml
-
-  // Extract meta tags from JS source (Meta.title(...), Meta.description(...) etc.)
-  const jsSource = readFileSync(resolve(cwd, pageFile), 'utf-8')
-  const meta = extractMetaFromJs(jsSource)
-  html = injectMeta(html, meta)
-
-  // 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
-}
-
-// 1. Lint
-run('Linting', `node "${metaowlRoot}/bin/metaowl-lint.js"`)
-
-// 2. Vite build
-run('Building', `"${resolveBin('vite')}" build`)
-
-// 3. SSG post-processing
-step('Generating static pages...')
-console.log()
-const baseHtml = readFileSync(resolve(cwd, outDir, 'index.html'), 'utf-8')
-
-const pageFiles = globSync(`${pagesDir}/**/*.js`, { cwd })
-
-const seen = new Set()
-
-for (const pageFile of pageFiles) {
-  const route = deriveRoute(pageFile)
-  if (seen.has(route)) continue
-  seen.add(route)
-
-  const shell = buildShell(baseHtml, pageFile)
-
-  if (route === '/') {
-    writeFileSync(resolve(cwd, outDir, 'index.html'), shell)
-    console.log(`    /index.html`)
-  } else {
-    const destDir = resolve(cwd, outDir, route.slice(1))
-    mkdirSync(destDir, { recursive: true })
-    writeFileSync(resolve(destDir, 'index.html'), shell)
-    console.log(`    ${route}/index.html`)
-  }
-}
-
-console.log()
-success(`${seen.size} route(s) generated`)
-console.log()

package/bin/metaowl-lint.js

@@ -1,71 +0,0 @@
-#!/usr/bin/env node
-/**
- * metaowl lint — format with Prettier then lint with ESLint.
- *
- * Lint targets can be configured in package.json under `metaowl.lint`:
- *
- *   "metaowl": {
- *     "lint": ["src/app.js", "src/pages/**", "src/components/**"]
- *   }
- */
-import { execSync } from 'node:child_process'
-import { existsSync, readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-import { globSync } from 'glob'
-import { banner, cwd, resolveBin, step, success, failure } from './utils.js'
-
-banner('lint')
-
-let lintTargets = null
-try {
-  const pkg = JSON.parse(readFileSync(resolve(cwd, 'package.json'), 'utf8'))
-  lintTargets = pkg?.metaowl?.lint ?? null
-} catch {
-  // no package.json or no metaowl config
-}
-
-const defaults = [
-  'src/metaowl.js',
-  'src/css.js',
-  'src/pages/**',
-  'src/components/**'
-]
-
-const candidates = lintTargets ?? defaults
-
-const existing = candidates.filter(pattern => {
-  if (existsSync(resolve(cwd, pattern))) return true
-  return globSync(pattern, { cwd }).length > 0
-})
-
-if (existing.length === 0) {
-  success('No lint targets found — skipping')
-  console.log()
-  process.exit(0)
-}
-
-const targets = existing.map(t => `"${t}"`).join(' ')
-
-step('Formatting with Prettier...')
-console.log()
-try {
-  execSync(`"${resolveBin('prettier')}" src --single-quote --no-semi --write`, { stdio: 'inherit', cwd })
-} catch {
-  failure('Prettier failed')
-  process.exit(1)
-}
-console.log()
-
-step('Linting with ESLint...')
-console.log()
-try {
-  execSync(`"${resolveBin('eslint')}" ${targets} --fix`, { stdio: 'inherit', cwd })
-} catch {
-  failure('ESLint failed')
-  process.exit(1)
-}
-console.log()
-
-success('Lint complete')
-console.log()
-

package/bin/utils.js

@@ -1,82 +0,0 @@
-/**
- * Shared CLI utilities for metaowl bin scripts.
- * Uses ANSI escape codes only when stdout is a TTY (no color when piped).
- */
-import { existsSync, readFileSync } from 'node:fs'
-import { resolve, dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { execSync } from 'node:child_process'
-
-export const metaowlRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
-export const bin = resolve(metaowlRoot, 'node_modules/.bin')
-export const cwd = process.cwd()
-const cwdBin = resolve(cwd, 'node_modules/.bin')
-
-const { version } = JSON.parse(readFileSync(resolve(metaowlRoot, 'package.json'), 'utf-8'))
-export { version }
-
-/**
- * Resolve an executable path with fallback for hoisted installs.
- * Priority:
- * 1) metaowl-local node_modules/.bin
- * 2) project node_modules/.bin
- * 3) command name (PATH lookup by shell)
- *
- * @param {string} name
- * @returns {string}
- */
-export function resolveBin(name) {
-  const local = resolve(bin, name)
-  if (existsSync(local)) return local
-
-  const project = resolve(cwdBin, name)
-  if (existsSync(project)) return project
-
-  return name
-}
-
-const TTY = Boolean(process.stdout.isTTY)
-const a = (str, code) => TTY ? `\x1b[${code}m${str}\x1b[0m` : str
-
-/** Print a styled header for the current command. */
-export function banner(command) {
-  console.log()
-  console.log(`  ${a('metaowl', '1;36')} ${a(command, '1')}  ${a(`v${version}`, '2')}`)
-  console.log()
-}
-
-/** Print a step indicator: "  › message" */
-export function step(msg) {
-  console.log(`  ${a('›', '36')} ${msg}`)
-}
-
-/** Print a success line: "  ✓ message" */
-export function success(msg) {
-  console.log(`  ${a('✓', '32')} ${a(msg, '2')}`)
-}
-
-/** Print an error line: "  ✗ message" */
-export function failure(msg) {
-  console.error(`  ${a('✗', '31')} ${msg}`)
-}
-
-/**
- * Run a shell command, printing a step label before and a blank line after.
- * Exits the process with code 1 on failure.
- *
- * @param {string} label  - Human-readable step description.
- * @param {string} cmd    - Shell command to execute.
- * @param {object} [opts] - Additional options forwarded to execSync.
- */
-export function run(label, cmd, opts = {}) {
-  step(label)
-  console.log()
-  try {
-    execSync(cmd, { stdio: 'inherit', cwd, ...opts })
-  } catch {
-    console.log()
-    failure(`${label} failed`)
-    process.exit(1)
-  }
-  console.log()
-}