metaowl 0.4.1 → 0.6.0

package/test/test-utils.test.js

@@ -1,314 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import {
-  createMockStore,
-  mockRouter,
-  mountComponent,
-  wait,
-  nextTick,
-  flushPromises,
-  userEvent,
-  dom,
-  TestUtils
-} from '../modules/test-utils.js'
-
-describe('TestUtils', () => {
-  describe('Exports', () => {
-    it('should export all functions', () => {
-      expect(typeof createMockStore).toBe('function')
-      expect(typeof mockRouter).toBe('function')
-      expect(typeof mountComponent).toBe('function')
-      expect(typeof wait).toBe('function')
-      expect(typeof nextTick).toBe('function')
-      expect(typeof flushPromises).toBe('function')
-      expect(typeof userEvent.click).toBe('function')
-      expect(typeof dom.query).toBe('function')
-    })
-
-    it('should export TestUtils namespace', () => {
-      expect(TestUtils.createMockStore).toBe(createMockStore)
-      expect(TestUtils.mockRouter).toBe(mockRouter)
-      expect(TestUtils.mountComponent).toBe(mountComponent)
-    })
-  })
-
-  describe('createMockStore', () => {
-    it('should create store with initial state', () => {
-      const store = createMockStore({
-        state: { count: 0, user: null }
-      })
-
-      expect(store.state.count).toBe(0)
-      expect(store.state.user).toBeNull()
-    })
-
-    it('should handle mutations', () => {
-      const store = createMockStore({
-        state: { count: 0 },
-        mutations: {
-          increment: (state) => { state.count++ },
-          add: (state, n) => { state.count += n }
-        }
-      })
-
-      store.commit('increment')
-      expect(store.state.count).toBe(1)
-
-      store.commit('add', 5)
-      expect(store.state.count).toBe(6)
-    })
-
-    it('should handle actions', async () => {
-      const store = createMockStore({
-        state: { user: null },
-        mutations: {
-          setUser: (state, user) => { state.user = user }
-        },
-        actions: {
-          login: async ({ commit }, credentials) => {
-            const user = { name: 'Test User', email: credentials.email }
-            commit('setUser', user)
-            return user
-          }
-        }
-      })
-
-      const result = await store.dispatch('login', { email: 'test@test.com', password: '123' })
-
-      expect(store.state.user.name).toBe('Test User')
-      expect(result.name).toBe('Test User')
-    })
-
-    it('should handle getters', () => {
-      const store = createMockStore({
-        state: { count: 5 },
-        getters: {
-          doubled: (state) => state.count * 2,
-          isPositive: (state) => state.count > 0
-        }
-      })
-
-      expect(store.getters.doubled).toBe(10)
-      expect(store.getters.isPositive).toBe(true)
-    })
-
-    it('should reset state', () => {
-      const store = createMockStore({
-        state: { count: 0, name: 'Initial' }
-      })
-
-      store.state.count = 10
-      store.state.name = 'Changed'
-
-      store.reset()
-
-      expect(store.state.count).toBe(0)
-      expect(store.state.name).toBe('Initial')
-    })
-
-    it('should set state directly', () => {
-      const store = createMockStore({
-        state: { count: 0 }
-      })
-
-      store.setState({ count: 42, extra: 'value' })
-
-      expect(store.state.count).toBe(42)
-      expect(store.state.extra).toBe('value')
-    })
-  })
-
-  describe('mockRouter', () => {
-    it('should create router with initial route', () => {
-      const router = mockRouter({
-        initialRoute: '/dashboard'
-      })
-
-      expect(router.currentRoute.path).toBe('/dashboard')
-    })
-
-    it('should navigate with push', async () => {
-      const router = mockRouter({
-        routes: [{ path: '/', name: 'home' }, { path: '/about', name: 'about' }]
-      })
-
-      await router.push('/about')
-
-      expect(router.currentRoute.path).toBe('/about')
-      expect(router.currentRoute.name).toBe('about')
-    })
-
-    it('should parse route params', async () => {
-      const router = mockRouter({
-        routes: [{ path: '/user/:id', name: 'user' }]
-      })
-
-      await router.push('/user/123')
-
-      expect(router.currentRoute.params.id).toBe('123')
-    })
-
-    it('should parse query params', async () => {
-      const router = mockRouter()
-
-      await router.push('/search?q=test&page=2')
-
-      expect(router.currentRoute.query.q).toBe('test')
-      expect(router.currentRoute.query.page).toBe('2')
-    })
-
-    it('should run beforeEach guards', async () => {
-      const guard = vi.fn()
-      const router = mockRouter()
-
-      router.beforeEach(guard)
-      await router.push('/protected')
-
-      expect(guard).toHaveBeenCalled()
-    })
-
-    it('should run afterEach hooks', async () => {
-      const hook = vi.fn()
-      const router = mockRouter()
-
-      router.afterEach(hook)
-      await router.push('/page')
-
-      expect(hook).toHaveBeenCalled()
-    })
-
-    it('should unsubscribe from guards', async () => {
-      const guard = vi.fn()
-      const router = mockRouter()
-
-      const unsubscribe = router.beforeEach(guard)
-      unsubscribe()
-
-      await router.push('/page')
-      expect(guard).not.toHaveBeenCalled()
-    })
-
-    it('should resolve named routes', () => {
-      const router = mockRouter({
-        routes: [
-          { path: '/', name: 'home' },
-          { path: '/user/:id', name: 'user' }
-        ]
-      })
-
-      expect(router.resolve('home')).toBe('/')
-      expect(router.resolve('user', { id: 123 })).toBe('/user/123')
-    })
-
-    it('should handle hash', async () => {
-      const router = mockRouter()
-
-      await router.push('/page#section1')
-
-      expect(router.currentRoute.hash).toBe('section1')
-    })
-  })
-
-  describe('Async utilities', () => {
-    it('wait should delay execution', async () => {
-      const start = Date.now()
-      await wait(50)
-      const elapsed = Date.now() - start
-
-      expect(elapsed).toBeGreaterThanOrEqual(45)
-    })
-
-    it('flushPromises should resolve pending promises', async () => {
-      let resolved = false
-      Promise.resolve().then(() => { resolved = true })
-
-      expect(resolved).toBe(false)
-      await flushPromises()
-      expect(resolved).toBe(true)
-    })
-  })
-
-  describe('DOM utilities', () => {
-    beforeEach(() => {
-      document.body.innerHTML = `
-        <div id="app">
-          <button class="btn primary">Click me</button>
-          <span class="text">Hello World</span>
-        </div>
-      `
-    })
-
-    it('should query element', () => {
-      const button = dom.query('.btn')
-      expect(button).not.toBeNull()
-      expect(button.tagName).toBe('BUTTON')
-    })
-
-    it('should query all elements', () => {
-      const spans = dom.queryAll('.text')
-      expect(spans.length).toBe(1)
-    })
-
-    it('should check for class', () => {
-      const button = dom.query('.btn')
-      expect(dom.hasClass(button, 'btn')).toBe(true)
-      expect(dom.hasClass(button, 'primary')).toBe(true)
-      expect(dom.hasClass(button, 'nonexistent')).toBe(false)
-    })
-
-    it('should get text content', () => {
-      const span = dom.query('.text')
-      expect(dom.text(span)).toBe('Hello World')
-    })
-  })
-
-  describe('userEvent utilities', () => {
-    beforeEach(() => {
-      document.body.innerHTML = `
-        <input id="input" type="text" />
-        <form id="form">
-          <button type="submit">Submit</button>
-        </form>
-        <select id="select">
-          <option value="a">A</option>
-          <option value="b">B</option>
-        </select>
-      `
-    })
-
-    it('should simulate click', async () => {
-      const button = document.querySelector('button')
-      const handler = vi.fn()
-      button.addEventListener('click', handler)
-
-      await userEvent.click(button)
-
-      expect(handler).toHaveBeenCalled()
-    })
-
-    it('should simulate typing', async () => {
-      const input = document.querySelector('#input')
-
-      await userEvent.type(input, 'hello')
-
-      expect(input.value).toBe('hello')
-    })
-
-    it('should simulate form submit', async () => {
-      const form = document.querySelector('#form')
-      const handler = vi.fn(e => e.preventDefault())
-      form.addEventListener('submit', handler)
-
-      await userEvent.submit(form)
-
-      expect(handler).toHaveBeenCalled()
-    })
-
-    it('should simulate select change', async () => {
-      const select = document.querySelector('#select')
-
-      await userEvent.select(select, 'b')
-
-      expect(select.value).toBe('b')
-    })
-  })
-})

package/vite/plugin.js

@@ -1,290 +0,0 @@
-import { createHash } from 'node:crypto'
-import { fileURLToPath } from 'node:url'
-import { resolve, dirname } from 'node:path'
-import { mkdirSync, cpSync, existsSync, readFileSync, writeFileSync } from 'node:fs'
-import { createRequire } from 'node:module'
-import { globSync } from 'glob'
-import { config as dotenvConfig } from 'dotenv'
-import tsconfigPaths from 'vite-tsconfig-paths'
-
-const require = createRequire(import.meta.url)
-
-function resolveOwlPath() {
-  return require.resolve('@odoo/owl/dist/owl.es.js', {
-    paths: [process.cwd(), dirname(fileURLToPath(import.meta.url))]
-  })
-}
-
-/**
- * Collect all .xml files from a directory glob and return them as
- * URL-style paths (e.g. /components/Header/Header.xml).
- *
- * @param {string} globPattern - e.g. 'src/components/**\/*.xml'
- * @returns {string[]}
- */
-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>.
- * Templates are concatenated without minification to preserve intentional line breaks.
- *
- * @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('')
-
-  return '<templates>' + templates + '</templates>'
-}
-
-/**
- * metaowl Vite plugin.
- *
- * @param {object} [options]
- * @param {string} [options.root='src'] - Vite root directory.
- * @param {string} [options.outDir='../dist'] - Build output directory.
- * @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.frameworkEntry] - Framework entry for manual chunk.
- * @param {string[]} [options.vendorPackages] - npm packages bundled into the vendor chunk.
- * @param {string} [options.envPrefix] - Only expose env vars with this prefix (plus NODE_ENV) via process.env.
- * @param {object} [options.autoImport] - Enable component auto-import
- * @param {boolean} [options.autoImport.enabled=false] - Enable auto-import
- * @param {string} [options.autoImport.pattern='*.js'] - Glob pattern for components
- * @returns {import('vite').Plugin[]}
- */
-export async function metaowlPlugin(options = {}) {
-  const {
-    root = 'src',
-    outDir = '../dist',
-    publicDir = '../public',
-    componentsDir = 'src/components',
-    pagesDir = 'src/pages',
-    layoutsDir = 'src/layouts',
-    frameworkEntry = './node_modules/metaowl/index.js',
-    vendorPackages = ['@odoo/owl'],
-    autoImport = {},
-    envPrefix
-  } = options
-
-  const componentXml = collectXml(`${componentsDir}/**/*.xml`)
-  const pageXml = collectXml(`${pagesDir}/**/*.xml`)
-  const layoutXml = collectXml(`${layoutsDir}/**/*.xml`)
-  const allComponents = [...layoutXml, ...pageXml, ...componentXml]
-
-  let _outDirResolved = null
-
-  // Generate auto-import d.ts for components
-  const autoImportDtsPath = resolve(process.cwd(), '.metaowl', 'components.d.ts')
-  let autoImportPlugin = null
-
-  if (autoImport.enabled) {
-    const { generateComponentDts, scanComponents } = await import('../modules/auto-import.js')
-    const components = await scanComponents(componentsDir, { pattern: autoImport.pattern || '*.js' })
-
-    // Ensure .metaowl directory exists
-    const metaowlDir = dirname(autoImportDtsPath)
-    if (!existsSync(metaowlDir)) {
-      mkdirSync(metaowlDir, { recursive: true })
-    }
-
-    await generateComponentDts(components, autoImportDtsPath)
-
-    autoImportPlugin = {
-      name: 'metaowl:auto-import',
-      enforce: 'pre',
-      configResolved() {
-        // Components are scanned at startup
-      },
-      handleHotUpdate({ file }) {
-        // Rescan when component files change
-        if (file.startsWith(resolve(componentsDir)) && file.endsWith('.js')) {
-          scanComponents(componentsDir, { pattern: autoImport.pattern || '*.js' }).then(comps => {
-            generateComponentDts(comps, autoImportDtsPath)
-          })
-        }
-      }
-    }
-  }
-
-  const plugins = [
-    ...(autoImportPlugin ? [autoImportPlugin] : []),
-    tsconfigPaths({ root: process.cwd() }),
-    {
-      name: 'metaowl:define',
-      config(cfg, { mode }) {
-        // Load .env file from project root
-        dotenvConfig()
-
-        const isDev = mode === 'development'
-
-        // Expose only NODE_ENV + vars matching the configured prefix.
-        // Never expose the full system env to avoid leaking secrets.
-        const safeEnv = Object.fromEntries(
-          Object.entries(process.env).filter(([k]) =>
-            k === 'NODE_ENV' || (envPrefix && k.startsWith(envPrefix))
-          )
-        )
-
-        cfg.define = {
-          ...(cfg.define ?? {}),
-          DEV_MODE: isDev,
-          COMPONENTS: JSON.stringify(isDev ? allComponents : ['/templates.xml']),
-          'process.env': safeEnv
-        }
-
-        cfg.root = cfg.root ?? root
-        cfg.publicDir = cfg.publicDir ?? publicDir
-        cfg.appType = cfg.appType ?? 'spa'
-
-        const owlPath = resolveOwlPath()
-        cfg.resolve = {
-          ...(cfg.resolve ?? {}),
-          alias: {
-            ...(cfg.resolve?.alias ?? {}),
-            '@odoo/owl': owlPath
-          }
-        }
-
-        cfg.build = {
-          outDir,
-          emptyOutDir: true,
-          sourcemap: isDev,
-          chunkSizeWarningLimit: 1024,
-          target: 'esnext',
-          rollupOptions: {
-            input: resolve(root, 'index.html'),
-            output: {
-              manualChunks: {
-                vendor: vendorPackages,
-                framework: [frameworkEntry]
-              }
-            }
-          },
-          ...(cfg.build ?? {})
-        }
-
-        cfg.optimizeDeps = {
-          include: ['@odoo/owl'],
-          ...(cfg.optimizeDeps ?? {})
-        }
-      },
-      configResolved(resolvedConfig) {
-        _outDirResolved = resolve(resolvedConfig.root, resolvedConfig.build.outDir)
-      }
-    },
-    {
-      name: 'metaowl:app',
-      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 }), import.meta.glob('./${layoutsRel}/**/*.js', { eager: true }))`
-          ),
-          map: null
-        }
-      }
-    },
-    {
-      name: 'metaowl:styles',
-      transform(code, id) {
-        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('/${layoutsRel}/**/*.{css,scss}', { eager: true })\n`,
-          map: null
-        }
-      }
-    },
-    {
-      name: 'metaowl:copy-assets',
-      apply: 'build',
-      closeBundle() {
-        const projectRoot = process.cwd()
-
-        // Merge all OWL XML templates into a single file
-        const xmlFiles = globSync([`${componentsDir}/**/*.xml`, `${pagesDir}/**/*.xml`, `${layoutsDir}/**/*.xml`])
-        const mergedXml = mergeXmlFiles(xmlFiles)
-
-        // Compute content hash for cache-busting in production
-        const hash = createHash('sha256').update(mergedXml).digest('hex').slice(0, 8)
-        const hashedFilename = `templates.${hash}.xml`
-        writeFileSync(resolve(_outDirResolved, hashedFilename), mergedXml, 'utf-8')
-
-        // Rewrite /templates.xml references in all built HTML and JS files
-        const outputFiles = globSync(['**/*.html', '**/*.js'], { cwd: _outDirResolved, absolute: true })
-        for (const file of outputFiles) {
-          const content = readFileSync(file, 'utf-8')
-          if (content.includes('/templates.xml')) {
-            writeFileSync(file, content.replace(/\/templates\.xml/g, `/${hashedFilename}`), 'utf-8')
-          }
-        }
-
-        // Copy assets/images (referenced via absolute URLs in XML — not processed by Vite)
-        const srcImages = resolve(projectRoot, root, 'assets', 'images')
-        if (existsSync(srcImages)) {
-          cpSync(srcImages, resolve(_outDirResolved, 'assets', 'images'), { recursive: true })
-        }
-      }
-    }
-  ]
-
-  return plugins
-}
-
-/**
- * Convenience wrapper that returns a complete Vite config with metaowl defaults.
- * All options except `server`, `preview` and `build` are forwarded to metaowlPlugin().
- *
- * Usage in vite.config.js:
- *
- *   import { metaowlConfig } from 'metaowl/vite'
- *   export default async () => {
- *     return metaowlConfig({
- *       server: { port: 3333 },
- *       preview: { port: 8095 },
- *       envPrefix: 'MY_',
- *       vendorPackages: ['@odoo/owl', 'apexcharts']
- *     })
- *   }
- *
- * @param {object} [options]
- * @param {object} [options.server]  - Vite server config overrides (merged with defaults).
- * @param {object} [options.preview] - Vite preview config overrides (merged with defaults).
- * @param {object} [options.build]   - Vite build config overrides.
- * @param {*}      [options.*]       - All other options forwarded to metaowlPlugin().
- * @returns {import('vite').UserConfig}
- */
-export async function metaowlConfig(options = {}) {
-  const { server, preview, build, ...metaowlOptions } = options
-  const plugins = await metaowlPlugin(metaowlOptions)
-  return {
-    server: { port: 3000, strictPort: true, host: true, ...server },
-    preview: { port: 4173, strictPort: true, ...preview },
-    ...(build ? { build } : {}),
-    plugins
-  }
-}

package/vitest.config.js

@@ -1,8 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    environment: 'jsdom',
-    include: ['test/**/*.test.js']
-  }
-})