metaowl 0.4.0 → 0.5.0

package/build/runtime/modules/auto-import.js

@@ -0,0 +1,140 @@
+/**
+ * @module AutoImport
+ *
+ * Automatic component importing for MetaOwl applications.
+ */
+import { globSync } from 'glob';
+import { basename, dirname, extname, relative, resolve } from 'node:path';
+let importMap = null;
+export function generateComponentMap(componentsDir, pattern = '*.js') {
+    const map = new Map();
+    const globPattern = pattern.includes('/') ? pattern : `${componentsDir}/${pattern}`;
+    const files = globSync(globPattern);
+    for (const file of files) {
+        if (file.includes('.test.') || file.includes('.spec.'))
+            continue;
+        const name = getComponentName(file);
+        if (!name)
+            continue;
+        const importPath = `/@components/${relative(componentsDir, file).replace(/\\/g, '/')}`;
+        map.set(name, importPath);
+    }
+    return map;
+}
+function getComponentName(filePath) {
+    const ext = extname(filePath);
+    const base = basename(filePath, ext);
+    if (basename(filePath) === base + ext) {
+        return base;
+    }
+    const dir = relative(process.cwd(), filePath).split('/');
+    if (base === 'index' && dir.length > 1) {
+        return toPascalCase(dir[dir.length - 2] ?? '');
+    }
+    return toPascalCase(base);
+}
+function toPascalCase(str) {
+    return str
+        .replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+        .replace(/^[a-z]/, (char) => char.toUpperCase());
+}
+export async function scanComponents(componentsDir, options = {}) {
+    const { pattern: _pattern = '*.js' } = options;
+    const absoluteDir = resolve(componentsDir);
+    const fs = await import('node:fs/promises');
+    const { join } = await import('node:path');
+    const components = [];
+    async function scanDir(dir) {
+        try {
+            const entries = await fs.readdir(dir, { withFileTypes: true });
+            for (const entry of entries) {
+                const fullPath = join(dir, entry.name);
+                if (entry.isDirectory()) {
+                    await scanDir(fullPath);
+                }
+                else if (entry.isFile() && entry.name.endsWith('.js')) {
+                    if (entry.name.includes('.test.') || entry.name.includes('.spec.'))
+                        continue;
+                    const name = getComponentName(fullPath);
+                    if (name && !components.includes(name)) {
+                        components.push(name);
+                    }
+                }
+            }
+        }
+        catch {
+            // Directory doesn't exist or can't be read
+        }
+    }
+    await scanDir(absoluteDir);
+    return components;
+}
+export async function generateComponentDts(components, outputPath) {
+    const { mkdirSync, writeFileSync } = await import('node:fs');
+    const dir = dirname(outputPath);
+    mkdirSync(dir, { recursive: true });
+    const declarations = components
+        .map((name) => `  ${name}: typeof import('./components/${name}/${name}.js').default`)
+        .join('\n');
+    const content = `// Auto-generated by metaowl - do not edit\ndeclare module '@metaowl/components' {\n${declarations}\n}\n`;
+    writeFileSync(outputPath, content, 'utf-8');
+}
+export function generateImports(componentMap) {
+    const lines = [];
+    for (const [name, path] of componentMap) {
+        lines.push(`import ${name} from '${path}'`);
+    }
+    return lines.join('\n');
+}
+export function generateComponentsObject(componentMap) {
+    const entries = Array.from(componentMap.keys())
+        .map((name) => `  ${name}`)
+        .join(',\n');
+    return `{\n${entries}\n}`;
+}
+export function createAutoImportPlugin(options = {}) {
+    const { enabled = false, componentsDir = 'src/components', pattern = '**/*.js' } = options;
+    if (!enabled) {
+        return null;
+    }
+    importMap = generateComponentMap(componentsDir, `${componentsDir}/${pattern}`);
+    return {
+        name: 'metaowl:auto-import',
+        enforce: 'pre',
+        config(config) {
+            config.resolve ||= {};
+            config.resolve.alias ||= {};
+            config.resolve.alias['/@components'] = resolve(process.cwd(), componentsDir);
+        },
+        transform(code, id) {
+            if (!id.includes('/pages/') || !/\.[jt]s$/.test(id)) {
+                return null;
+            }
+            if (!code.includes('/* auto-import */') && !code.includes('// auto-import')) {
+                return null;
+            }
+            if (!importMap) {
+                return null;
+            }
+            const imports = generateImports(importMap);
+            const componentsObj = generateComponentsObject(importMap);
+            let transformed = imports + '\n\n' + code;
+            if (transformed.includes('extends Component')) {
+                transformed = transformed.replace(/(class\s+\w+\s+extends\s+Component\s*\{)/, `$1\n  static components = ${componentsObj}\n`);
+            }
+            return { code: transformed, map: null };
+        }
+    };
+}
+export function registerAutoImport(name, path) {
+    if (!importMap) {
+        importMap = new Map();
+    }
+    importMap.set(name, path);
+}
+export function getAutoImportMap() {
+    return importMap ? new Map(importMap) : null;
+}
+export function clearAutoImports() {
+    importMap = null;
+}

package/build/runtime/modules/cache.js

@@ -0,0 +1,49 @@
+/**
+ * @module Cache
+ *
+ * Async-style localStorage wrapper.
+ *
+ * Values are automatically JSON-serialised on write and deserialised on read.
+ * All methods return Promises so they are interchangeable with IndexedDB-based
+ * alternatives without changing call-sites.
+ */
+export default class Cache {
+    /**
+     * Retrieve a value by key.
+     */
+    static async get(key) {
+        const rawValue = localStorage.getItem(key);
+        return rawValue === null ? null : JSON.parse(rawValue);
+    }
+    /**
+     * Store a value under the given key.
+     */
+    static async set(key, value) {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+    /**
+     * Remove a single entry.
+     */
+    static async remove(key) {
+        localStorage.removeItem(key);
+    }
+    /**
+     * Remove all entries from localStorage.
+     */
+    static async clear() {
+        localStorage.clear();
+    }
+    /**
+     * Return all keys currently stored in localStorage.
+     */
+    static async keys() {
+        const keys = [];
+        for (let index = 0; index < localStorage.length; index++) {
+            const key = localStorage.key(index);
+            if (key !== null) {
+                keys.push(key);
+            }
+        }
+        return keys;
+    }
+}

package/build/runtime/modules/composables.js

@@ -0,0 +1,353 @@
+/**
+ * @module Composables
+ *
+ * Reusable composables/hooks for MetaOwl OWL applications.
+ */
+import { onMounted, onWillUnmount, useState } from '@odoo/owl';
+import Cache from './cache.js';
+import Fetch from './fetch.js';
+function createRef(initialValue) {
+    const resolvedValue = typeof initialValue === 'function'
+        ? initialValue()
+        : initialValue;
+    const state = useState({
+        value: resolvedValue,
+        __value: resolvedValue
+    });
+    if (state.__value === undefined) {
+        state.__value = resolvedValue;
+    }
+    return state;
+}
+function getRefValue(value) {
+    return typeof value === 'object' && value !== null && 'value' in value
+        ? value.value
+        : value;
+}
+export function useAuth() {
+    const user = createRef(null);
+    const isLoggedIn = createRef(false);
+    const isLoading = createRef(false);
+    let unsubscribe = null;
+    onMounted(async () => {
+        try {
+            const { OdooService } = await import('./odoo-rpc.js');
+            isLoggedIn.value = OdooService.isAuthenticated();
+            user.value = OdooService.getSession();
+            unsubscribe = OdooService.onAuthChange((session) => {
+                user.value = session;
+                isLoggedIn.value = session !== null;
+            });
+        }
+        catch {
+            // OdooService not available, auth stays false
+        }
+    });
+    onWillUnmount(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+    const login = async (credentials) => {
+        isLoading.value = true;
+        try {
+            const { OdooService } = await import('./odoo-rpc.js');
+            await OdooService.authenticate(credentials?.username, credentials?.password);
+            return true;
+        }
+        catch {
+            return false;
+        }
+        finally {
+            isLoading.value = false;
+        }
+    };
+    const logout = async () => {
+        try {
+            const { OdooService } = await import('./odoo-rpc.js');
+            OdooService.logout();
+        }
+        catch {
+            // Ignore errors
+        }
+    };
+    const checkAuth = async () => {
+        try {
+            const { OdooService } = await import('./odoo-rpc.js');
+            return OdooService.isAuthenticated();
+        }
+        catch {
+            return false;
+        }
+    };
+    return {
+        user,
+        isLoggedIn,
+        isLoading,
+        login,
+        logout,
+        checkAuth
+    };
+}
+export function useLocalStorage(key, defaultValue = null) {
+    const state = createRef(() => {
+        try {
+            const item = localStorage.getItem(key);
+            return item !== null ? JSON.parse(item) : defaultValue;
+        }
+        catch {
+            return defaultValue;
+        }
+    });
+    Object.defineProperty(state, 'value', {
+        get() {
+            return state.__value;
+        },
+        set(newValue) {
+            state.__value = newValue;
+            try {
+                if (newValue === null) {
+                    localStorage.removeItem(key);
+                }
+                else {
+                    localStorage.setItem(key, JSON.stringify(newValue));
+                }
+            }
+            catch {
+                // Ignore storage errors
+            }
+        }
+    });
+    const handleStorage = (event) => {
+        if (event.key === key) {
+            try {
+                state.__value = event.newValue !== null
+                    ? JSON.parse(event.newValue)
+                    : defaultValue;
+            }
+            catch {
+                state.__value = defaultValue;
+            }
+        }
+    };
+    onMounted(() => {
+        window.addEventListener('storage', handleStorage);
+    });
+    onWillUnmount(() => {
+        window.removeEventListener('storage', handleStorage);
+    });
+    return state;
+}
+export function useFetch(url, options = {}) {
+    const { initialData = null, immediate = true, transform = (data) => data, onError = null, method = 'GET', data: requestData = null, internal = true, triggerErrorHandler = true } = options;
+    const data = createRef(initialData);
+    const loading = createRef(false);
+    const error = createRef(null);
+    const execute = async (executeUrl = null) => {
+        const fetchUrl = executeUrl || getRefValue(url);
+        if (!fetchUrl)
+            return undefined;
+        loading.value = true;
+        error.value = null;
+        try {
+            const result = await Fetch.url(String(fetchUrl), method, requestData, internal, triggerErrorHandler);
+            if (result === null) {
+                throw new Error('Request failed');
+            }
+            data.value = transform(result);
+            return data.value;
+        }
+        catch (err) {
+            error.value = err;
+            if (onError) {
+                onError(err);
+            }
+            throw err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    const refresh = () => execute();
+    onMounted(() => {
+        if (immediate) {
+            void execute();
+        }
+    });
+    return {
+        data,
+        loading,
+        error,
+        refresh,
+        execute
+    };
+}
+export function useDebounce(value, wait = 300) {
+    const debouncedValue = createRef(value.value);
+    let timeout = null;
+    Object.defineProperty(value, 'value', {
+        get() {
+            return value.__value;
+        },
+        set(newValue) {
+            value.__value = newValue;
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            timeout = setTimeout(() => {
+                debouncedValue.value = newValue;
+            }, wait);
+        }
+    });
+    onWillUnmount(() => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+    });
+    return debouncedValue;
+}
+export function useThrottle(fn, wait = 300) {
+    let lastCall = 0;
+    let timeout = null;
+    const throttled = (...args) => {
+        const now = Date.now();
+        const remaining = wait - (now - lastCall);
+        if (remaining <= 0) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            lastCall = now;
+            fn(...args);
+        }
+        else if (!timeout) {
+            timeout = setTimeout(() => {
+                lastCall = Date.now();
+                timeout = null;
+                fn(...args);
+            }, remaining);
+        }
+    };
+    onWillUnmount(() => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+    });
+    return throttled;
+}
+export function useWindowSize() {
+    const width = createRef(window.innerWidth);
+    const height = createRef(window.innerHeight);
+    const handleResize = () => {
+        width.value = window.innerWidth;
+        height.value = window.innerHeight;
+    };
+    onMounted(() => {
+        window.addEventListener('resize', handleResize);
+    });
+    onWillUnmount(() => {
+        window.removeEventListener('resize', handleResize);
+    });
+    return { width, height };
+}
+export function useOnlineStatus() {
+    const isOnline = createRef(navigator.onLine);
+    const handleOnline = () => {
+        isOnline.value = true;
+    };
+    const handleOffline = () => {
+        isOnline.value = false;
+    };
+    onMounted(() => {
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+    });
+    onWillUnmount(() => {
+        window.removeEventListener('online', handleOnline);
+        window.removeEventListener('offline', handleOffline);
+    });
+    return isOnline;
+}
+export function useAsyncState(asyncFn, options = {}) {
+    const { immediate = false, initialData = null } = options;
+    const state = createRef(null);
+    const data = createRef(initialData);
+    const error = createRef(null);
+    const execute = async (...args) => {
+        state.value = 'loading';
+        error.value = null;
+        try {
+            const result = await asyncFn(...args);
+            data.value = result;
+            state.value = 'success';
+            return result;
+        }
+        catch (err) {
+            error.value = err;
+            state.value = 'error';
+            throw err;
+        }
+    };
+    if (immediate) {
+        onMounted(() => {
+            void execute(...[]);
+        });
+    }
+    return {
+        state,
+        data,
+        error,
+        execute,
+        isLoading: () => state.value === 'loading',
+        isSuccess: () => state.value === 'success',
+        isError: () => state.value === 'error'
+    };
+}
+export function useCache(key, defaultValue = null) {
+    const value = createRef(defaultValue);
+    onMounted(() => {
+        void Cache.get(key)
+            .then((cached) => {
+            value.value = cached ?? defaultValue;
+        })
+            .catch(() => {
+            value.value = defaultValue;
+        });
+    });
+    const set = (newValue) => {
+        value.value = newValue;
+        void Cache.set(key, newValue);
+    };
+    const get = async () => {
+        const cached = await Cache.get(key);
+        value.value = cached ?? defaultValue;
+        return cached;
+    };
+    const remove = () => {
+        value.value = defaultValue;
+        void Cache.remove(key);
+    };
+    const clear = () => {
+        value.value = defaultValue;
+        void Cache.clear();
+    };
+    return {
+        value,
+        set,
+        get,
+        remove,
+        clear
+    };
+}
+export const Composables = {
+    useAuth,
+    useLocalStorage,
+    useFetch,
+    useDebounce,
+    useThrottle,
+    useWindowSize,
+    useOnlineStatus,
+    useAsyncState,
+    useCache
+};
+export default Composables;

package/build/runtime/modules/error-boundary.js

@@ -0,0 +1,116 @@
+/**
+ * @module ErrorBoundary
+ *
+ * Error boundaries for OWL applications.
+ */
+import { Component, useState, xml } from '@odoo/owl';
+const globalErrorHandlers = [];
+let errorContext = {};
+export class ErrorBoundary extends Component {
+    static template = xml `
+    <t t-if="state.hasError">
+      <t t-component="props.Fallback || fallback"
+         t-props="{ error: state.error, errorInfo: state.errorInfo }"/>
+    </t>
+    <t t-else="">
+      <t t-slot="default"/>
+    </t>
+  `;
+    static defaultProps = {
+        Fallback: null
+    };
+    state;
+    setup() {
+        this.state = useState({
+            hasError: false,
+            error: null,
+            errorInfo: null
+        });
+    }
+    onError(error, errorInfo) {
+        this.state.hasError = true;
+        this.state.error = error;
+        this.state.errorInfo = errorInfo;
+        for (const handler of globalErrorHandlers) {
+            handler(error, { ...errorContext, ...errorInfo });
+        }
+    }
+}
+export class DefaultErrorFallback extends Component {
+    static template = xml `
+    <div class="error-boundary-fallback">
+      <h2>Something went wrong</h2>
+      <t t-if="props.error">
+        <details>
+          <summary>Error details</summary>
+          <pre t-esc="props.error.stack || props.error.message || props.error"/>
+        </details>
+      </t>
+    </div>
+  `;
+}
+export function onError(handler) {
+    globalErrorHandlers.push(handler);
+    return () => {
+        const index = globalErrorHandlers.indexOf(handler);
+        if (index > -1) {
+            globalErrorHandlers.splice(index, 1);
+        }
+    };
+}
+export function setErrorContext(context) {
+    errorContext = { ...errorContext, ...context };
+}
+export function getErrorContext() {
+    return { ...errorContext };
+}
+export function clearErrorContext() {
+    errorContext = {};
+}
+export function captureError(error, context = {}) {
+    const fullContext = { ...errorContext, ...context };
+    for (const handler of globalErrorHandlers) {
+        handler(error, fullContext);
+    }
+}
+export function errorBoundary(options = {}) {
+    return function decorator(componentClass) {
+        componentClass.errorBoundary = true;
+        if (options.Fallback) {
+            componentClass.fallback = options.Fallback;
+        }
+        return componentClass;
+    };
+}
+export function withErrorBoundary(componentClass, options = {}) {
+    return class WithErrorBoundary extends Component {
+        static template = xml `
+      <ErrorBoundary Fallback="props.Fallback || fallback">
+        <t t-component="Component" t-props="props"/>
+      </ErrorBoundary>
+    `;
+        static components = { ErrorBoundary };
+        Component;
+        fallback;
+        setup() {
+            this.Component = componentClass;
+            this.fallback = options.Fallback || DefaultErrorFallback;
+        }
+    };
+}
+export function initGlobalErrorHandling() {
+    window.onerror = (message, source, lineno, colno, error) => {
+        captureError(error || new Error(String(message)), {
+            type: 'window.onerror',
+            source,
+            lineno,
+            colno
+        });
+        return false;
+    };
+    window.onunhandledrejection = (event) => {
+        captureError(event.reason, {
+            type: 'unhandledrejection'
+        });
+    };
+}

package/build/runtime/modules/fetch.js

@@ -0,0 +1,31 @@
+/**
+ * @module Fetch
+ *
+ * A static class wrapping the Fetch API with a configurable base URL and
+ * error handling. All internal requests automatically prepend the configured
+ * baseUrl and return parsed JSON.
+ */
+export default class Fetch {
+    static _baseUrl = '';
+    static _onError = null;
+    static configure({ baseUrl = '', onError = null } = {}) {
+        Fetch._baseUrl = baseUrl;
+        Fetch._onError = onError;
+    }
+    static async url(url, method = 'GET', data = null, internal = true, triggerErrorHandler = true) {
+        const fullUrl = `${internal ? Fetch._baseUrl : ''}${url}`;
+        const response = await fetch(fullUrl, {
+            method,
+            body: data ? JSON.stringify(data) : null
+        }).catch((error) => {
+            console.warn('[metaowl] Fetch error:', error);
+            if (triggerErrorHandler && Fetch._onError) {
+                Fetch._onError(error);
+            }
+            return null;
+        });
+        if (!response)
+            return null;
+        return await response.json();
+    }
+}