metaowl 0.4.1 → 0.6.0

package/build/runtime/modules/store.js

@@ -0,0 +1,198 @@
+/**
+ * @module Store
+ *
+ * Lightweight state management for OWL applications, inspired by Pinia/Vuex.
+ */
+import { reactive } from '@odoo/owl';
+const stores = new Map();
+const plugins = [];
+export class Store {
+    _id;
+    _config;
+    _state;
+    _getters;
+    _mutations;
+    _actions;
+    _subscribers;
+    _actionSubscribers;
+    constructor(id, config) {
+        this._id = id;
+        this._config = config;
+        this._state = reactive(config.state ? config.state() : {});
+        this._getters = {};
+        this._mutations = config.mutations || {};
+        this._actions = config.actions || {};
+        this._subscribers = [];
+        this._actionSubscribers = [];
+        if (config.getters) {
+            for (const [name, fn] of Object.entries(config.getters)) {
+                Object.defineProperty(this._getters, name, {
+                    get: () => fn(this._state, this._getters),
+                    enumerable: true,
+                    configurable: true
+                });
+            }
+        }
+        for (const plugin of plugins) {
+            plugin(this);
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    get state() {
+        return this._state;
+    }
+    get getters() {
+        return this._getters;
+    }
+    commit(type, payload) {
+        const mutation = this._mutations[type];
+        if (!mutation) {
+            throw new Error(`[metaowl] Mutation "${type}" not found in store "${this._id}"`);
+        }
+        const prevState = JSON.parse(JSON.stringify(this._state));
+        const result = mutation(this._state, payload);
+        for (const subscriber of this._subscribers) {
+            subscriber({ type, payload }, this._state, prevState);
+        }
+        return result;
+    }
+    async dispatch(type, payload) {
+        const action = this._actions[type];
+        if (!action) {
+            throw new Error(`[metaowl] Action "${type}" not found in store "${this._id}"`);
+        }
+        const context = {
+            state: this._state,
+            getters: this._getters,
+            commit: this.commit.bind(this),
+            dispatch: this.dispatch.bind(this)
+        };
+        for (const subscriber of this._actionSubscribers) {
+            subscriber({ type, payload }, 'before');
+        }
+        try {
+            const result = await action(context, payload);
+            for (const subscriber of this._actionSubscribers) {
+                subscriber({ type, payload }, 'after', result);
+            }
+            return result;
+        }
+        catch (error) {
+            for (const subscriber of this._actionSubscribers) {
+                subscriber({ type, payload }, 'error', error);
+            }
+            throw error;
+        }
+    }
+    subscribe(callback) {
+        this._subscribers.push(callback);
+        return () => {
+            const index = this._subscribers.indexOf(callback);
+            if (index > -1)
+                this._subscribers.splice(index, 1);
+        };
+    }
+    subscribeAction(callback) {
+        this._actionSubscribers.push(callback);
+        return () => {
+            const index = this._actionSubscribers.indexOf(callback);
+            if (index > -1)
+                this._actionSubscribers.splice(index, 1);
+        };
+    }
+    reset() {
+        if (this._config.state) {
+            const initialState = this._config.state();
+            const keys = Object.keys(this._state);
+            for (const key of keys) {
+                ;
+                this._state[key] = undefined;
+            }
+            Object.assign(this._state, initialState);
+        }
+    }
+    static define(id, config) {
+        return function useStore() {
+            if (!stores.has(id)) {
+                stores.set(id, new Store(id, config));
+            }
+            return stores.get(id);
+        };
+    }
+    static get(id) {
+        return stores.get(id);
+    }
+    static has(id) {
+        return stores.has(id);
+    }
+    static remove(id) {
+        const store = stores.get(id);
+        if (store) {
+            store.reset();
+            return stores.delete(id);
+        }
+        return false;
+    }
+    static clear() {
+        stores.clear();
+    }
+    static storeIds() {
+        return Array.from(stores.keys());
+    }
+    static use(plugin) {
+        plugins.push(plugin);
+    }
+}
+export function createPersistencePlugin(options = {}) {
+    const { storage = localStorage, key, paths } = options;
+    return function persistencePlugin(store) {
+        const storageKey = key || `metaowl:store:${store.id}`;
+        try {
+            const saved = storage.getItem(storageKey);
+            if (saved) {
+                const persisted = JSON.parse(saved);
+                if (paths) {
+                    for (const path of paths) {
+                        if (path in persisted && path in store.state) {
+                            store.state[path] = persisted[path];
+                        }
+                    }
+                }
+                else {
+                    Object.assign(store.state, persisted);
+                }
+            }
+        }
+        catch (error) {
+            console.warn('[metaowl] Failed to restore store from storage:', error);
+        }
+        store.subscribe((_mutation, state) => {
+            try {
+                const toPersist = paths
+                    ? Object.fromEntries(paths.map((path) => [path, state[path]]))
+                    : state;
+                storage.setItem(storageKey, JSON.stringify(toPersist));
+            }
+            catch (error) {
+                console.warn('[metaowl] Failed to persist store:', error);
+            }
+        });
+    };
+}
+export function createStore(initialState = {}) {
+    const state = reactive({ ...initialState });
+    state.$patch = (partialState) => {
+        Object.assign(state, partialState);
+    };
+    state.$reset = () => {
+        Object.keys(state).forEach((key) => {
+            if (!key.startsWith('$')) {
+                delete state[key];
+            }
+        });
+        Object.assign(state, initialState);
+    };
+    return state;
+}

package/build/runtime/modules/templates-manager.js

@@ -0,0 +1,52 @@
+/**
+ * @module TemplatesManager
+ *
+ * Template loading and merging utilities for OWL applications.
+ */
+import { loadFile } from '@odoo/owl';
+const LINK_COMPONENT_TEMPLATE = /* xml */ `
+  <t t-name="Link">
+    <a
+      t-att="forwardedAttrs"
+      t-att-href="props.to"
+      t-att-class="linkClasses"
+      t-att-target="props.target"
+      t-att-rel="linkRel"
+      t-att-title="props.title"
+      t-att-download="props.download"
+      t-on-click="onClick"
+    >
+      <t t-slot="default"/>
+    </a>
+  </t>
+`;
+const INTERNAL_TEMPLATES = [LINK_COMPONENT_TEMPLATE];
+export async function mergeTemplates(files) {
+    const fileArray = Array.isArray(files) ? files : [files];
+    if (fileArray.length === 1) {
+        try {
+            const content = await loadFile(fileArray[0]);
+            if (content.trim().startsWith('<templates>')) {
+                return content.replace('</templates>', INTERNAL_TEMPLATES.join('') + '</templates>');
+            }
+            return '<templates>' + content + INTERNAL_TEMPLATES.join('') + '</templates>';
+        }
+        catch (error) {
+            console.error(`[metaowl] Failed to load template: ${fileArray[0]}`, error);
+            return '<templates>' + INTERNAL_TEMPLATES.join('') + '</templates>';
+        }
+    }
+    const results = await Promise.all(fileArray.map(async (file) => {
+        try {
+            return await loadFile(file);
+        }
+        catch (error) {
+            console.error(`[metaowl] Failed to load template: ${file}`, error);
+            return '';
+        }
+    }));
+    return '<templates>' + results.join('') + INTERNAL_TEMPLATES.join('') + '</templates>';
+}
+export function getInternalTemplates() {
+    return [...INTERNAL_TEMPLATES];
+}

package/build/runtime/modules/test-utils.js

@@ -0,0 +1,238 @@
+/**
+ * @module TestUtils
+ *
+ * Testing utilities for MetaOwl OWL applications.
+ */
+import { mount, reactive } from '@odoo/owl';
+export function createMockStore(config = {}) {
+    const { state: initialState = {}, getters: getterDefs = {}, mutations: mutationDefs = {}, actions: actionDefs = {} } = config;
+    const state = reactive({ ...initialState });
+    const getters = {};
+    for (const [name, fn] of Object.entries(getterDefs)) {
+        Object.defineProperty(getters, name, {
+            get: () => fn(state),
+            enumerable: true
+        });
+    }
+    const mutations = {};
+    for (const [name, fn] of Object.entries(mutationDefs)) {
+        mutations[name] = (payload) => {
+            fn(state, payload);
+        };
+    }
+    const actions = {};
+    for (const [name, fn] of Object.entries(actionDefs)) {
+        actions[name] = async (payload) => {
+            const context = {
+                state,
+                getters,
+                commit: (mutation, nextPayload) => mutations[mutation]?.(nextPayload),
+                dispatch: (action, nextPayload) => actions[action]?.(nextPayload)
+            };
+            return await fn(context, payload);
+        };
+    }
+    return {
+        state,
+        getters,
+        mutations,
+        actions,
+        commit(name, payload) {
+            if (mutations[name]) {
+                mutations[name](payload);
+            }
+            else {
+                console.warn(`[TestUtils] Mutation '${name}' not found`);
+            }
+        },
+        async dispatch(name, payload) {
+            if (actions[name]) {
+                return await actions[name](payload);
+            }
+            console.warn(`[TestUtils] Action '${name}' not found`);
+            return undefined;
+        },
+        reset() {
+            Object.keys(state).forEach((key) => delete state[key]);
+            Object.assign(state, initialState);
+        },
+        setState(newState) {
+            Object.assign(state, newState);
+        }
+    };
+}
+export function mockRouter(config = {}) {
+    const { initialRoute = '/', routes = [] } = config;
+    const currentRoute = reactive({
+        path: initialRoute,
+        name: null,
+        params: {},
+        query: {},
+        hash: ''
+    });
+    const beforeEachGuards = [];
+    const afterEachHooks = [];
+    function parseUrl(url) {
+        const [pathAndQuery, hash = ''] = url.split('#');
+        const [path = '', queryString = ''] = pathAndQuery.split('?');
+        const query = {};
+        if (queryString) {
+            queryString.split('&').forEach((param) => {
+                const [key, value] = param.split('=');
+                query[decodeURIComponent(key)] = decodeURIComponent(value || '');
+            });
+        }
+        let matchedRoute = null;
+        let params = {};
+        for (const route of routes) {
+            const match = matchPath(path, route.path);
+            if (match) {
+                matchedRoute = route;
+                params = match.params;
+                break;
+            }
+        }
+        return {
+            path,
+            name: matchedRoute?.name || null,
+            params,
+            query,
+            hash
+        };
+    }
+    function matchPath(path, pattern) {
+        const paramNames = [];
+        const regexPattern = pattern
+            .replace(/\*/g, '.*')
+            .replace(/:([^/]+)/g, (_match, name) => {
+            paramNames.push(name);
+            return '([^/]+)';
+        });
+        const regex = new RegExp(`^${regexPattern}$`);
+        const match = path.match(regex);
+        if (!match)
+            return null;
+        const params = {};
+        paramNames.forEach((name, index) => {
+            params[name] = match[index + 1];
+        });
+        return { params };
+    }
+    Object.assign(currentRoute, parseUrl(initialRoute));
+    return {
+        currentRoute,
+        async push(path) {
+            const to = parseUrl(path);
+            const from = { ...currentRoute };
+            for (const guard of beforeEachGuards) {
+                const result = await guard(to, from, () => { });
+                if (result === false)
+                    return;
+            }
+            Object.assign(currentRoute, to);
+            for (const hook of afterEachHooks) {
+                await hook(to, from);
+            }
+        },
+        async replace(path) {
+            await this.push(path);
+        },
+        back() {
+            // Mock - does nothing in test environment
+        },
+        beforeEach(guard) {
+            beforeEachGuards.push(guard);
+            return () => {
+                const index = beforeEachGuards.indexOf(guard);
+                if (index > -1)
+                    beforeEachGuards.splice(index, 1);
+            };
+        },
+        afterEach(hook) {
+            afterEachHooks.push(hook);
+            return () => {
+                const index = afterEachHooks.indexOf(hook);
+                if (index > -1)
+                    afterEachHooks.splice(index, 1);
+            };
+        },
+        resolve(name, params = {}) {
+            const route = routes.find((candidate) => candidate.name === name);
+            if (!route)
+                return '/';
+            let path = route.path;
+            for (const [key, value] of Object.entries(params)) {
+                path = path.replace(`:${key}`, String(value));
+            }
+            return path;
+        }
+    };
+}
+export async function mountComponent(ComponentClass, options = {}) {
+    const { props = {}, store = null, router = null, target = document.createElement('div') } = options;
+    const env = {};
+    if (store)
+        env.store = store;
+    if (router)
+        env.router = router;
+    return await mount(ComponentClass, target, {
+        props,
+        env
+    });
+}
+export function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+export function nextTick() {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => resolve());
+    });
+}
+export async function flushPromises() {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+}
+export const userEvent = {
+    async click(element) {
+        element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await flushPromises();
+    },
+    async type(input, text) {
+        input.value = text;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await flushPromises();
+    },
+    async submit(form) {
+        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+        await flushPromises();
+    },
+    async select(select, value) {
+        select.value = value;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        await flushPromises();
+    }
+};
+export const dom = {
+    query(selector, container = document) {
+        return container.querySelector(selector);
+    },
+    queryAll(selector, container = document) {
+        return container.querySelectorAll(selector);
+    },
+    hasClass(element, className) {
+        return element?.classList?.contains(className) || false;
+    },
+    text(element) {
+        return element?.textContent?.trim() || '';
+    }
+};
+export const TestUtils = {
+    createMockStore,
+    mockRouter,
+    mountComponent,
+    wait,
+    nextTick,
+    flushPromises,
+    userEvent,
+    dom
+};
+export default TestUtils;

package/build/runtime/vite/plugin.js

@@ -0,0 +1,197 @@
+import { createHash } from 'node:crypto';
+import { cpSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { config as dotenvConfig } from 'dotenv';
+import { globSync } from 'glob';
+import tsconfigPaths from 'vite-tsconfig-paths';
+const require = createRequire(import.meta.url);
+function isPathSafe(path, root) {
+    const resolved = resolve(root, path);
+    return resolved.startsWith(resolve(root));
+}
+function sanitizeDirOption(path, root, fallback) {
+    if (!path)
+        return fallback;
+    if (isPathSafe(path, root))
+        return path;
+    console.warn(`[metaowl] Path "${path}" escapes root, using default "${fallback}"`);
+    return fallback;
+}
+function resolveOwlPath() {
+    return require.resolve('@odoo/owl/dist/owl.es.js', {
+        paths: [process.cwd(), dirname(fileURLToPath(import.meta.url))]
+    });
+}
+function collectXml(globPattern) {
+    return globSync(globPattern).map((filePath) => filePath.replace(/^src[\\/]/, '/'));
+}
+function mergeXmlFiles(xmlPaths) {
+    const templates = xmlPaths.map((filePath) => {
+        try {
+            let content = readFileSync(filePath, 'utf-8');
+            content = content.replace(/<templates>/g, '').replace(/<\/templates>/g, '');
+            return content;
+        }
+        catch (error) {
+            console.error(`[metaowl] Failed to read XML file: ${filePath}`, error);
+            return '';
+        }
+    }).join('');
+    return '<templates>' + templates + '</templates>';
+}
+export async function metaowlPlugin(options = {}) {
+    const rootDir = options.root ?? 'src';
+    const resolvedRoot = resolve(process.cwd(), rootDir);
+    const { outDir = '../dist', publicDir = '../public', componentsDir = sanitizeDirOption(options.componentsDir ?? 'src/components', resolvedRoot, 'src/components'), pagesDir = sanitizeDirOption(options.pagesDir ?? 'src/pages', resolvedRoot, 'src/pages'), layoutsDir = sanitizeDirOption(options.layoutsDir ?? 'src/layouts', resolvedRoot, '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;
+    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' });
+        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 }) {
+                if (file.startsWith(resolve(componentsDir)) && file.endsWith('.js')) {
+                    void scanComponents(componentsDir, { pattern: autoImport.pattern || '*.js' }).then((nextComponents) => {
+                        return generateComponentDts(nextComponents, autoImportDtsPath);
+                    });
+                }
+            }
+        };
+    }
+    const plugins = [
+        ...(autoImportPlugin ? [autoImportPlugin] : []),
+        tsconfigPaths({ root: process.cwd() }),
+        {
+            name: 'metaowl:define',
+            config(cfg, { mode }) {
+                dotenvConfig();
+                const isDev = mode === 'development';
+                const safeEnv = Object.fromEntries(Object.entries(process.env).filter(([key]) => key === 'NODE_ENV' || (envPrefix && key.startsWith(envPrefix))));
+                cfg.define = {
+                    ...(cfg.define ?? {}),
+                    DEV_MODE: isDev,
+                    COMPONENTS: JSON.stringify(isDev ? allComponents : ['/templates.xml']),
+                    'process.env': safeEnv
+                };
+                cfg.root = cfg.root ?? rootDir;
+                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(rootDir, '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 null;
+                const pagesRel = pagesDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                const layoutsRel = layoutsDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                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 null;
+                const compRel = componentsDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                const pagesRel = pagesDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                const layoutsRel = layoutsDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                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() {
+                if (!outDirResolved)
+                    return;
+                const projectRoot = process.cwd();
+                const xmlFiles = globSync([`${componentsDir}/**/*.xml`, `${pagesDir}/**/*.xml`, `${layoutsDir}/**/*.xml`]);
+                const mergedXml = mergeXmlFiles(xmlFiles);
+                const hash = createHash('sha256').update(mergedXml).digest('hex').slice(0, 8);
+                const hashedFilename = `templates.${hash}.xml`;
+                writeFileSync(resolve(outDirResolved, hashedFilename), mergedXml, 'utf-8');
+                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');
+                    }
+                }
+                const srcImages = resolve(projectRoot, rootDir, 'assets', 'images');
+                if (existsSync(srcImages)) {
+                    cpSync(srcImages, resolve(outDirResolved, 'assets', 'images'), { recursive: true });
+                }
+            }
+        }
+    ];
+    return plugins;
+}
+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
+    };
+}