metaowl 0.4.1 → 0.6.0

package/build/runtime/modules/file-router.js

@@ -0,0 +1,207 @@
+/**
+ * @module FileRouter
+ *
+ * File-based routing with dynamic route parameter support.
+ */
+import { buildRouteRegexPattern } from './constants.js';
+export function pathFromKey(key) {
+    const relativePath = key.replace(/^\.\/pages\//, '');
+    const parts = relativePath.split('/');
+    parts.pop();
+    if (parts.length === 0) {
+        return '/';
+    }
+    if (parts.length === 1 && parts[0] === 'index') {
+        return '/';
+    }
+    return '/' + parts.map(segmentToPattern).join('/');
+}
+function segmentToPattern(segment) {
+    const insideBrackets = segment.match(/^\[(.+)\]$/);
+    if (insideBrackets) {
+        const content = insideBrackets[1];
+        if (content.startsWith('...')) {
+            const paramName = content.slice(3) || 'path';
+            return `:${paramName}(.*)`;
+        }
+        if (content.endsWith('?')) {
+            const paramName = content.slice(0, -1);
+            return `:${paramName}?`;
+        }
+        return `:${content}`;
+    }
+    return segment;
+}
+function extractParamNames(filePath) {
+    const params = [];
+    const parts = filePath.split('/');
+    for (const part of parts) {
+        const match = part.match(/^\[([^?\]]+)\??\]$|^\[\.\.\.([^\]]+)\]$/);
+        if (match) {
+            params.push((match[1] || match[2] || 'path'));
+        }
+    }
+    return params;
+}
+function buildRegexPattern(path) {
+    return buildRouteRegexPattern(path);
+}
+export function matchRoute(pattern, path) {
+    const paramNames = [];
+    const paramRegex = /:([^/?(]+)/g;
+    let match;
+    while ((match = paramRegex.exec(pattern)) !== null) {
+        paramNames.push(match[1]);
+    }
+    const regex = new RegExp(buildRegexPattern(pattern));
+    const matches = path.match(regex);
+    if (!matches) {
+        return null;
+    }
+    const params = {};
+    for (let index = 0; index < paramNames.length; index++) {
+        const value = matches[index + 1];
+        if (value !== undefined) {
+            params[paramNames[index]] = value;
+        }
+    }
+    return { params, pattern };
+}
+export function isDynamicRoute(path) {
+    return path.includes(':');
+}
+function componentFromModule(mod, key) {
+    if (typeof mod.default === 'function') {
+        return mod.default;
+    }
+    const funcs = Object.values(mod).filter((v) => typeof v === 'function');
+    if (funcs.length === 0) {
+        throw new Error(`[metaowl] No component export found in "${key}"`);
+    }
+    return funcs[0];
+}
+export function buildRoutes(modules) {
+    const routes = [];
+    const nameCounts = {};
+    for (const [key, mod] of Object.entries(modules)) {
+        const derivedPath = pathFromKey(key);
+        const component = componentFromModule(mod, key);
+        const routeConfig = component.route || {};
+        const routePath = typeof routeConfig.path === 'string' ? routeConfig.path : derivedPath;
+        const baseName = routePath === '/'
+            ? 'index'
+            : routePath.slice(1).replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+        const routeName = nameCounts[baseName] !== undefined
+            ? `${baseName}-${++nameCounts[baseName]}`
+            : (nameCounts[baseName] = 0, baseName);
+        const route = {
+            name: routeName,
+            path: [routePath],
+            component,
+            params: extractParamNames(key),
+            meta: component.route?.meta || {}
+        };
+        if (component.route) {
+            Object.assign(route, component.route);
+            route.path = [typeof route.path === 'string' ? route.path : routePath];
+            route.meta = route.meta || {};
+        }
+        routes.push(route);
+    }
+    routes.sort((left, right) => {
+        const leftPath = left.path[0];
+        const rightPath = right.path[0];
+        const leftIsCatchAll = leftPath.includes('(.*)');
+        const rightIsCatchAll = rightPath.includes('(.*)');
+        if (!leftIsCatchAll && rightIsCatchAll)
+            return -1;
+        if (leftIsCatchAll && !rightIsCatchAll)
+            return 1;
+        const leftIsDynamic = isDynamicRoute(leftPath);
+        const rightIsDynamic = isDynamicRoute(rightPath);
+        if (!leftIsDynamic && rightIsDynamic)
+            return -1;
+        if (leftIsDynamic && !rightIsDynamic)
+            return 1;
+        if (leftIsDynamic && rightIsDynamic) {
+            const leftSegments = leftPath.split('/').length;
+            const rightSegments = rightPath.split('/').length;
+            if (leftSegments !== rightSegments)
+                return rightSegments - leftSegments;
+            const leftParamCount = left.params?.length || 0;
+            const rightParamCount = right.params?.length || 0;
+            return leftParamCount - rightParamCount;
+        }
+        return 0;
+    });
+    return routes;
+}
+export function findRoute(routes, path) {
+    for (const route of routes) {
+        for (const routePath of route.path) {
+            const match = matchRoute(routePath, path);
+            if (match) {
+                return {
+                    ...route,
+                    matchedPath: routePath,
+                    params: match.params
+                };
+            }
+        }
+    }
+    return null;
+}
+export function generateUrl(routes, name, params = {}) {
+    const route = routes.find((candidate) => candidate.name === name);
+    if (!route) {
+        throw new Error(`[metaowl] Route "${name}" not found`);
+    }
+    let path = route.path[0];
+    for (const [key, value] of Object.entries(params)) {
+        path = path.replace(`:${key}`, value);
+        path = path.replace(`:${key}?`, value);
+    }
+    return path.replace(/\/:[^/]+\?/g, '').replace(/\?$/, '');
+}
+export function validateRouteParams(route, params) {
+    const required = route.params || [];
+    const provided = Object.keys(params);
+    const missing = required.filter((param) => !provided.includes(param));
+    const extra = provided.filter((param) => !required.includes(param));
+    return {
+        valid: missing.length === 0,
+        missing,
+        extra
+    };
+}
+export function parseCurrentRoute(routes) {
+    return findRoute(routes, document.location.pathname);
+}
+export function defineRoute(config) {
+    return config;
+}
+export function route(config) {
+    return function decorator(componentClass) {
+        componentClass.route = config;
+        return componentClass;
+    };
+}
+export function createCatchAllRoute(component, options = {}) {
+    return {
+        name: options.name || '404',
+        path: ['/:path(.*)'],
+        component,
+        params: ['path'],
+        meta: { ...options.meta, catchAll: true }
+    };
+}
+export function createRedirectRoute(from, to) {
+    const name = from.replace(/^\//, '').replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-');
+    return {
+        name: `redirect-${name}`,
+        path: [from],
+        redirect: to,
+        component: null,
+        meta: {}
+    };
+}

package/build/runtime/modules/fonts.js

@@ -0,0 +1,172 @@
+/**
+ * @module Fonts
+ *
+ * Font optimization utilities for metaowl applications.
+ * Provides font loading strategies, font face declarations, and font display optimization.
+ */
+const loadedFonts = new Map();
+const fontPreloadLinks = new Map();
+export function defineFontFace(options) {
+    const { family, src, weight = 'normal', style = 'normal', display = 'swap', unicodeRange } = options;
+    const srcString = Array.isArray(src) ? src.map((s) => `url("${s}")`).join(', ') : `url("${src}")`;
+    const weightStr = Array.isArray(weight) ? weight.join(' ') : weight;
+    const descriptors = {
+        weight: weightStr,
+        style,
+        display,
+        unicodeRange: unicodeRange || 'U+0-FFFF'
+    };
+    const fontFace = new FontFace(`${family}-${weightStr}`, srcString, descriptors);
+    return fontFace;
+}
+export async function loadFont(options) {
+    const { family, weight = 'normal' } = options;
+    const key = `${family}-${weight}`;
+    if (!loadedFonts.has(family)) {
+        loadedFonts.set(family, new Set());
+    }
+    const fontFace = defineFontFace(options);
+    try {
+        await fontFace.load();
+        document.fonts.add(fontFace);
+        const familySet = loadedFonts.get(family);
+        familySet.add(key);
+        return fontFace;
+    }
+    catch (error) {
+        console.warn(`[metaowl] Failed to load font ${family}:`, error);
+        throw error;
+    }
+}
+export async function loadFontFamily(family, variants) {
+    return Promise.all(variants.map((variant) => loadFont({ ...variant, family })));
+}
+export function isFontLoaded(family, weight) {
+    if (!loadedFonts.has(family)) {
+        return false;
+    }
+    if (weight) {
+        return loadedFonts.get(family).has(`${family}-${weight}`);
+    }
+    return loadedFonts.get(family).size > 0;
+}
+export function preloadFont(family, src, options = {}) {
+    const { weight, as = 'font', type = 'font/woff2' } = options;
+    const linkId = `metaowl-font-preload-${family}-${weight || 'normal'}`;
+    if (document.getElementById(linkId)) {
+        return;
+    }
+    const link = document.createElement('link');
+    link.id = linkId;
+    link.rel = 'preload';
+    link.as = as;
+    link.href = src;
+    link.crossOrigin = 'anonymous';
+    if (type) {
+        link.type = type;
+    }
+    document.head.appendChild(link);
+    fontPreloadLinks.set(linkId, link);
+}
+export function removeFontPreload(family, weight) {
+    const linkId = `metaowl-font-preload-${family}-${weight || 'normal'}`;
+    const link = fontPreloadLinks.get(linkId);
+    if (link) {
+        link.remove();
+        fontPreloadLinks.delete(linkId);
+    }
+}
+export function generateFontDisplayStyle(display) {
+    return `font-display: ${display};`;
+}
+export function createFontFaceRule(options) {
+    const { family, src, weight = 'normal', style = 'normal', display = 'swap', unicodeRange } = options;
+    const srcString = Array.isArray(src) ? src.map((s) => `url("${s}")`).join(', ') : `url("${src}")`;
+    const weightStr = Array.isArray(weight) ? weight.join(' ') : weight;
+    let rule = '@font-face {\n';
+    rule += `  font-family: '${family}';\n`;
+    rule += `  src: ${srcString};\n`;
+    rule += `  font-weight: ${weightStr};\n`;
+    rule += `  font-style: ${style};\n`;
+    rule += `  font-display: ${display};\n`;
+    if (unicodeRange) {
+        rule += `  unicode-range: ${unicodeRange};\n`;
+    }
+    rule += '}';
+    return rule;
+}
+export function injectFontFaceRules(options) {
+    const rules = Array.isArray(options) ? options : [options];
+    const styleId = 'metaowl-font-faces';
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = styleId;
+        document.head.appendChild(styleEl);
+    }
+    const cssText = rules.map(createFontFaceRule).join('\n\n');
+    styleEl.textContent += cssText;
+}
+export function measureTextWidth(text, font, size = 16) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        const numericSize = typeof size === 'string' ? parseInt(size, 10) : size;
+        return text.length * numericSize * 0.5;
+    }
+    const fontString = typeof size === 'number' ? `${size}px ${font}` : `${size} ${font}`;
+    ctx.font = fontString;
+    return ctx.measureText(text).width;
+}
+export function estimateFontMetrics(el) {
+    const style = window.getComputedStyle(el);
+    const family = style.fontFamily;
+    const fontMetricsMap = {
+        'Arial': { family: 'Arial', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'Helvetica': { family: 'Helvetica', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'Times New Roman': { family: 'Times New Roman', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'Georgia': { family: 'Georgia', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'system-ui': { family: 'system-ui', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 }
+    };
+    return fontMetricsMap[family] || null;
+}
+export function adjustFontForFout(el, _fallbackFont = 'sans-serif', timeout = 3000) {
+    return new Promise((resolve) => {
+        el.style.setProperty('font-display', 'block');
+        const timer = setTimeout(() => {
+            el.classList.add('metaowl-font-fout');
+            resolve();
+        }, timeout);
+        document.fonts.ready.then(() => {
+            clearTimeout(timer);
+            el.classList.add('metaowl-font-loaded');
+            resolve();
+        });
+    });
+}
+export function getFontLoadStatus() {
+    const status = {};
+    for (const [family, weights] of loadedFonts.entries()) {
+        status[family] = weights.size > 0;
+    }
+    return status;
+}
+export function clearLoadedFonts() {
+    loadedFonts.clear();
+}
+export const Fonts = {
+    defineFontFace,
+    loadFont,
+    loadFontFamily,
+    isFontLoaded,
+    preloadFont,
+    removeFontPreload,
+    generateFontDisplayStyle,
+    createFontFaceRule,
+    injectFontFaceRules,
+    measureTextWidth,
+    estimateFontMetrics,
+    adjustFontForFout,
+    getFontLoadStatus,
+    clearLoadedFonts
+};

package/build/runtime/modules/forms.js

@@ -0,0 +1,193 @@
+/**
+ * @module Forms
+ *
+ * Form handling and validation for MetaOwl applications.
+ */
+import { reactive } from '@odoo/owl';
+function getChangedValue(event) {
+    if (typeof event === 'object' && event !== null && 'target' in event) {
+        const target = event.target;
+        return target?.value ?? event;
+    }
+    return event;
+}
+export function useForm(fieldsConfig = {}) {
+    const fields = {};
+    const errors = {};
+    const touched = {};
+    const dirty = {};
+    const validating = {};
+    for (const [name, config] of Object.entries(fieldsConfig)) {
+        const initialValue = config?.default ?? '';
+        fields[name] = initialValue;
+        errors[name] = null;
+        touched[name] = false;
+        dirty[name] = false;
+        validating[name] = false;
+    }
+    const state = reactive({
+        fields,
+        errors,
+        touched,
+        dirty,
+        validating,
+        isSubmitting: false,
+        isValidating: false,
+        submitCount: 0
+    });
+    async function validateField(name) {
+        const config = fieldsConfig[name];
+        if (!config?.validation) {
+            state.errors[name] = null;
+            return true;
+        }
+        const value = state.fields[name];
+        const validatorList = Array.isArray(config.validation)
+            ? config.validation
+            : [config.validation];
+        for (const validator of validatorList) {
+            const result = validator(value, state.fields);
+            if (result !== true) {
+                state.errors[name] = result || 'Invalid';
+                return false;
+            }
+        }
+        if (config.asyncValidation) {
+            state.validating[name] = true;
+            state.isValidating = true;
+            try {
+                const result = await config.asyncValidation(value, state.fields);
+                if (result !== true) {
+                    state.errors[name] = result || 'Invalid';
+                    return false;
+                }
+            }
+            finally {
+                state.validating[name] = false;
+                state.isValidating = Object.values(state.validating).some(Boolean);
+            }
+        }
+        state.errors[name] = null;
+        return true;
+    }
+    async function validateAll() {
+        const results = await Promise.all(Object.keys(fieldsConfig).map((name) => validateField(name)));
+        return results.every(Boolean);
+    }
+    const controller = {
+        fields: state.fields,
+        errors: state.errors,
+        touched: state.touched,
+        dirty: state.dirty,
+        validating: state.validating,
+        isSubmitting: state.isSubmitting,
+        isValidating: state.isValidating,
+        submitCount: state.submitCount,
+        get isValid() {
+            return Object.values(state.errors).every((error) => error === null);
+        },
+        get isDirty() {
+            return Object.values(state.dirty).some(Boolean);
+        },
+        get isTouched() {
+            return Object.values(state.touched).some(Boolean);
+        },
+        setValue(name, value) {
+            state.fields[name] = value;
+            state.dirty[name] = value !== (fieldsConfig[name]?.default ?? '');
+        },
+        setTouched(name) {
+            state.touched[name] = true;
+        },
+        setAllTouched() {
+            for (const name of Object.keys(fieldsConfig)) {
+                state.touched[name] = true;
+            }
+        },
+        validateField,
+        validate: validateAll,
+        reset() {
+            for (const [name, config] of Object.entries(fieldsConfig)) {
+                state.fields[name] = config?.default ?? '';
+                state.errors[name] = null;
+                state.touched[name] = false;
+                state.dirty[name] = false;
+            }
+            state.isSubmitting = false;
+            state.submitCount = 0;
+        },
+        handleSubmit(onSubmit, options = {}) {
+            const { validate = true } = options;
+            return async (...args) => {
+                state.isSubmitting = true;
+                state.submitCount++;
+                try {
+                    if (validate) {
+                        controller.setAllTouched();
+                        const isValid = await controller.validate();
+                        if (!isValid) {
+                            state.isSubmitting = false;
+                            return;
+                        }
+                    }
+                    await onSubmit({ ...state.fields }, ...args);
+                }
+                finally {
+                    state.isSubmitting = false;
+                }
+            };
+        },
+        register(name) {
+            return {
+                value: state.fields[name],
+                onChange: (event) => controller.setValue(name, getChangedValue(event)),
+                onBlur: () => {
+                    controller.setTouched(name);
+                    void controller.validateField(name);
+                },
+                error: state.touched[name] ? state.errors[name] : null
+            };
+        }
+    };
+    return controller;
+}
+export const validators = {
+    required: (message = 'Required') => (value) => Boolean(value) || message,
+    minLength: (min, message) => (value) => (value?.length ?? 0) >= min || message || `Min ${min} characters`,
+    maxLength: (max, message) => (value) => (value?.length ?? 0) <= max || message || `Max ${max} characters`,
+    min: (min, message) => (value) => Number(value) >= min || message || `Min ${min}`,
+    max: (max, message) => (value) => Number(value) <= max || message || `Max ${max}`,
+    email: (message = 'Invalid email') => (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value ?? '')) || message,
+    url: (message = 'Invalid URL') => (value) => /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})[/\w .-]*\/?$/.test(String(value ?? '')) || message,
+    pattern: (regex, message = 'Invalid format') => (value) => regex.test(String(value ?? '')) || message,
+    match: (field, message) => (value, values) => value === values[field] || message || 'Fields do not match'
+};
+export function createSchema(schema) {
+    const fieldsConfig = {};
+    for (const [name, fieldValidators] of Object.entries(schema)) {
+        const validatorArray = Array.isArray(fieldValidators) ? fieldValidators : [fieldValidators];
+        fieldsConfig[name] = {
+            default: '',
+            validation: (value, values) => {
+                for (const validator of validatorArray) {
+                    const result = validator(value, values);
+                    if (result !== true)
+                        return result;
+                }
+                return true;
+            }
+        };
+    }
+    return fieldsConfig;
+}
+export function fieldProps(form, name) {
+    return {
+        value: form.fields[name],
+        error: form.touched[name] ? form.errors[name] : null,
+        onChange: (value) => form.setValue(name, getChangedValue(value)),
+        onBlur: () => {
+            form.setTouched(name);
+            void form.validateField(name);
+        }
+    };
+}