native-document 1.0.15 → 1.0.16-8.1

package/src/core/wrappers/template-cloner/utils.js

@@ -0,0 +1,173 @@
+import { ElementCreator } from '../ElementCreator';
+import NodeCloner from './NodeCloner';
+
+const pathProcess = (target, path, data) => {
+    if(path.HYDRATE_TEXT) {
+        const value = path.value;
+        ElementCreator.bindTextNode(target, path.isString ? data[0][value] : value.apply(null, data));
+        return;
+    }
+    if(path.ATTACH_METHOD) {
+        const bindingData = path.bindingData;
+        for(let i = 0, length = bindingData._attachLength; i < length; i++) {
+            const method = bindingData.attach[i];
+            target.nd[method.methodName](function() {
+                method.fn.call(this, ...data, ...arguments);
+            });
+        }
+    }
+    if(path.HYDRATE_ATTRIBUTES) {
+        path.hydrator(target, path.bindingData, data);
+    }
+};
+
+const buildAttributesCache = (bindDingData) => {
+    const cache = { };
+    if(bindDingData.attributes) cache.attributes = {};
+    if(bindDingData.classes)    cache.class = {};
+    if(bindDingData.styles)     cache.style = {};
+    bindDingData._cache = cache;
+};
+
+const prepareBindingMetadata = (bindDingData) => {
+    const attributes = [];
+    const classAndStyles = [];
+
+    if(bindDingData.attributes) {
+        for (const attr in bindDingData.attributes) {
+            attributes.push({
+                name: attr,
+                value: bindDingData.attributes[attr],
+            });
+        }
+    }
+
+    if(bindDingData.classes) {
+        for (const className in bindDingData.classes) {
+            bindDingData._hasClassAttribute = true;
+            classAndStyles.push({
+                name: 'class',
+                key: className,
+                value: bindDingData.classes[className],
+            });
+        }
+    }
+
+    if(bindDingData.styles) {
+        for (const property in bindDingData.styles) {
+            bindDingData._hasStyleAttribute = true;
+            classAndStyles.push({
+                name: 'style',
+                key: property,
+                value: bindDingData.styles[property],
+            });
+        }
+    }
+
+    bindDingData._flatAttributes = attributes;
+    bindDingData._flatAttributesLength = attributes.length;
+    bindDingData._flatDynamique = classAndStyles;
+    bindDingData._flatDynamiqueLength = classAndStyles.length;
+    bindDingData._attachLength = bindDingData.attach.length;
+};
+
+/**
+ * Applies a binding to a DOM node via its NodeCloner, routing to the correct binding type.
+ * Called internally by TemplateCloner's binder methods (text, style, class, attr, event).
+ *
+ * @internal
+ * @param {Function|string} value - Binding callback or property name
+ * @param {'value'|'style'|'class'|'attach'|string} targetType - Binding type determining which NodeCloner method to call
+ * @param {HTMLElement} element - Target DOM element
+ * @param {string} property - Attribute name or method name (used for 'attach' and 'attr' types)
+ */
+export const $hydrateFn = function(value, targetType, element, property) {
+    element.nodeCloner = element.nodeCloner || new NodeCloner(element);
+    if(targetType === 'value') {
+        element.nodeCloner.text(value);
+        return;
+    }
+    if(targetType === 'attach') {
+        element.nodeCloner.attach(property, value);
+        return;
+    }
+    element.nodeCloner.attr(targetType, { property, value });
+};
+
+/**
+ * Attaches all event handler bindings from a BindingData object to a cloned DOM node.
+ *
+ * @internal
+ * @param {HTMLElement} node - Cloned DOM node
+ * @param {BindingData} bindDingData - Pre-compiled binding metadata containing attachment definitions
+ * @param {Array} data - Data array passed to each attachment callback
+ */
+export const bindAttachMethods = (node, bindDingData, data) => {
+    for(let i = 0, length = bindDingData._attachLength; i < length; i++) {
+        const method = bindDingData.attach[i];
+        node.nd[method.methodName](function() {
+            method.fn.call(this, ...data, ...arguments);
+        });
+    }
+};
+
+/**
+ * Prepares a BindingData object for efficient hydration by building attribute caches
+ * and flattening binding lists into indexed arrays.
+ * Called once per template during compilation.
+ *
+ * @internal
+ * @param {BindingData} bindDingData - Binding metadata object to optimise in-place
+ */
+export const optimizeBindingData = (bindDingData) => {
+    buildAttributesCache(bindDingData);
+    prepareBindingMetadata(bindDingData);
+};
+
+
+const $applyBindingParents = [];
+
+/**
+ * Traverses a cloned DOM tree and applies all compiled binding steps to each matching node.
+ * Uses a pre-built path index for O(n) traversal without querySelector.
+ *
+ * @internal
+ * @param {HTMLElement} root - Root cloned node
+ * @param {Array} data - Data array passed to each binding callback
+ * @param {Array} paths - Pre-compiled binding paths from template analysis
+ * @param {number} pathSize - Number of paths to process (paths.length - 1)
+ */
+export const hydrateClonedNode = (root, data, paths, pathSize) => {
+    const rootPath = paths[pathSize];
+    $applyBindingParents[rootPath.id] = root;
+    pathProcess(root, rootPath, data);
+
+    let target = null, path = null;
+    for(let i = 0; i < pathSize; i++) {
+        path = paths[i];
+        target = $applyBindingParents[path.parentId].childNodes[path.index];
+        $applyBindingParents[path.id] = target;
+
+        if(path.HYDRATE_TEXT) {
+            const value = path.value;
+            ElementCreator.bindTextNode(target, path.isString ? data[0][value] : value.apply(null, data));
+            continue;
+        }
+        if(path.ATTACH_METHOD) {
+            const bindingData = path.bindingData;
+            for(let i = 0, length = bindingData._attachLength; i < length; i++) {
+                const method = bindingData.attach[i];
+                target.nd[method.methodName](function() {
+                    method.fn.call(this, ...data, ...arguments);
+                });
+            }
+        }
+        if(path.HYDRATE_ATTRIBUTES) {
+            path.hydrator(target, path.bindingData, data);
+        }
+    }
+
+    for (let i = 0; i <= pathSize; i++) {
+        $applyBindingParents[i] = null;
+    }
+};

package/src/fetch/NativeFetch.js

@@ -0,0 +1,89 @@
+export default function NativeFetch($baseUrl) {
+
+    const $interceptors = {
+        request: [],
+        response: [],
+    };
+
+    this.interceptors = {
+        response: (callback) => {
+            $interceptors.response.push(callback);
+        },
+        request: (callback) => {
+            $interceptors.request.push(callback);
+        },
+    };
+
+    this.fetch = async function(method, endpoint, params = {}, options = {}) {
+        if(options.formData) {
+            const formData = new FormData();
+            for(const key in params) {
+                formData.append(key, params[key]);
+            }
+            params = formData;
+        }
+        if(!endpoint.startsWith('http')) {
+            endpoint = ($baseUrl.endsWith('/') ? $baseUrl : $baseUrl+'/') + endpoint;
+        }
+        let configs = {
+            method,
+            headers: {
+                ...(options.headers || {}),
+            },
+        };
+        if(params) {
+            if(params instanceof FormData) {
+                configs.body = params;
+            }
+            else {
+                if(method !== 'GET') {
+                    configs.headers['Content-Type'] = 'application/json';
+                    configs.body = JSON.stringify(params);
+                } else {
+                    const queryString = new URLSearchParams(params).toString();
+                    if (queryString) {
+                        endpoint = endpoint + (endpoint.includes('?') ? '&' : '?') + queryString;
+                    }
+                }
+            }
+        }
+
+        for(const interceptor of $interceptors.request) {
+            configs = (await interceptor(configs, endpoint)) || configs;
+        }
+
+        let response = await fetch(endpoint, configs);
+
+        for(const interceptor of $interceptors.response) {
+            response = (await interceptor(response, endpoint)) || response;
+        }
+
+        const contentType = response.headers.get('content-type') || '';
+        const data = contentType.includes('application/json')
+            ? await response.json()
+            : await response.text();
+
+        if(!response.ok) {
+            const error = new Error(data?.message || response.statusText);
+            error.status = response.status;
+            error.data = data;
+            throw error;
+        }
+
+        return data;
+    };
+
+
+    this.post = function (endpoint, params = {}, options = {}) {
+        return this.fetch('POST', endpoint, params, options);
+    };
+    this.put = function (endpoint, params = {}, options = {}) {
+        return this.fetch('PUT', endpoint, params, options);
+    };
+    this.delete = function (endpoint, params = {}, options = {}) {
+        return this.fetch('DELETE', endpoint, params, options);
+    };
+    this.get = function (endpoint, params = {}, options = {}) {
+        return this.fetch('GET', endpoint, params, options);
+    };
+};

package/src/i18n/bin/scan.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+
+import Fs from 'node:fs';
+import Path from 'node:path';
+const configFile = Path.resolve('i18n.scanner.config.json');
+
+const Debug = {
+    $warning: [],
+    warn(category, message, data) {
+        Debug.$warning.push({ message: `[${category}] ${message}`, data });
+    },
+};
+
+function scanFolder(dirPath, callback) {
+    const files = Fs.readdirSync(dirPath);
+
+    files.forEach((file) => {
+        const filePath = Path.join(dirPath, file);
+        const stats = Fs.statSync(filePath);
+
+        if (stats.isDirectory()) {
+            scanFolder(filePath, callback);
+        } else if (stats.isFile()) {
+            // If it's a file, add its path to the list
+            callback(filePath);
+        }
+    });
+}
+
+function scanFile(filePath) {
+    const fileContent = Fs.readFileSync(filePath, 'utf-8');
+    const keys = [];
+    fileContent.replace(/\btr\((.*?)\)/g, function(_, args) {
+        const key = getKey(args, filePath);
+        if(key) {
+            keys.push(key);
+        }
+    });
+    return keys;
+}
+
+function getKey(args, filePath) {
+    const trimmed = args.trim();
+    const firstChar = trimmed[0];
+    if(firstChar !== '"' && firstChar !== '\'') {
+        Debug.warn('Key Extract', '', {
+            message: `can't extract key from ("${args}") in file.`,
+            args: args,
+            file: filePath,
+        });
+
+        return;
+    }
+    const key = [];
+    let i = 1;
+    while(i < trimmed.length) {
+        const char = trimmed[i];
+        if(char === '\\') {
+            key.push(trimmed[++i]);
+            i++;
+            continue;
+        }
+        if(char === firstChar) {
+            break;
+        }
+        i++;
+        key.push(char);
+    }
+    return key.join('');
+}
+
+function scan() {
+    if(!Fs.existsSync(configFile)) {
+        console.error('Config file not found. Please create i18n.scanner.config.json file in your project root directory.');
+        return;
+    }
+
+    const keys = [];
+    try {
+        const configContent = Fs.readFileSync(configFile, 'utf-8');
+        const config = JSON.parse(configContent);
+        const initialPath = Path.resolve(process.cwd(), config?.scan?.dir || 'src');
+        scanFolder(initialPath, (filePath) => {
+            const fileExtensions = config?.scan?.extensions || ['js'];
+            const shouldScanFile = fileExtensions.some(extension => filePath.endsWith(extension));
+            if(!shouldScanFile) {
+                return;
+            }
+            keys.push(...scanFile(filePath));
+        });
+        if(!config?.locales) {
+            console.log('No locales found in config file.');
+            return;
+        }
+
+        console.log(':: scan locales');
+        scanFolder(config.locales, (filePath) => {
+            if(!filePath.endsWith('.json')) {
+                return;
+            }
+            const locale = Path.basename(filePath, '.json');
+            const localeData = JSON.parse(Fs.readFileSync(filePath, 'utf-8'));
+            const localeKeys = Object.keys(localeData);
+            const absentKeys = keys.filter(key => !localeKeys.includes(key));
+
+            const result = absentKeys.reduce((acc, key) => {
+                acc[key] = key;
+                return acc;
+            }, {});
+
+            console.log('-- ' + locale + ` : ${absentKeys.length} keys are absent in locale file.`);
+            if(!config?.save) {
+                console.log('-- display result:');
+                console.log(result);
+                return;
+            }
+
+            const saveFile = config.save+'/'+(locale+'.absent.json');
+            const saveFilePath = Path.resolve(process.cwd(), saveFile);
+            console.log('-- save result to ' + saveFile);
+            const dirName = Path.dirname(saveFilePath);
+            if(!Fs.existsSync(saveFilePath)) {
+                Fs.mkdirSync(dirName, { recursive: true });
+            }
+            Fs.writeFileSync(saveFilePath, JSON.stringify(result, null, 4));
+        });
+    } catch (e) {
+        console.log(e);
+    }
+}
+
+scan();

package/src/i18n/index.d.ts

@@ -0,0 +1,2 @@
+export type { I18nResources, I18nServiceInstance } from './service/I18nService';
+export { I18nService, tr } from './service/I18nService';

package/src/i18n/service/I18nService.d.ts

@@ -0,0 +1,27 @@
+import type { ObservableItem } from '../../../types/observable';
+
+export interface I18nResources {
+    [language: string]: {
+        translation: Record<string, string>;
+    };
+}
+
+export interface I18nServiceInstance {
+    init(resources: I18nResources): Promise<void>;
+    current: ObservableItem<string>;
+    use(lng: string): Promise<void>;
+    tr(key: string, ...args: unknown[]): string;
+}
+
+export declare const I18nService: I18nServiceInstance;
+
+export declare function tr(
+    key: string,
+    params?: Record<string, ObservableItem<unknown> | unknown>
+): ObservableItem<string>;
+
+declare global {
+    interface String {
+        tr(params?: Record<string, ObservableItem<unknown> | unknown>): ObservableItem<string>;
+    }
+}

package/src/i18n/service/I18nService.js

@@ -0,0 +1,46 @@
+import i18next from 'i18next';
+import {Observable} from '../../core/data/Observable';
+import {hasObservableParams, getObservableParams, getParams} from './functions';
+
+const I18nService = (function () {
+    const defaultLang = import.meta.env.VITE_LOCALE || 'en';
+    const $current = Observable(defaultLang);
+    i18next.on('languageChanged', (lng) => $current.set(lng));
+
+    return {
+        init(resources) {
+            return i18next.init({
+                lng: import.meta.env.VITE_LOCALE,
+                fallbackLng: import.meta.env.VITE_FALLBACK_LANGUE || 'en',
+                debug: import.meta.env.VITE_ENV === 'development',
+                resources,
+            });
+        },
+        current: $current,
+        use(lng) {
+            return i18next.changeLanguage(lng);
+        },
+        tr(key, ...args) {
+            return i18next.t(key, ...args) || key;
+        },
+    };
+}());
+
+const tr = (key, params = {}) => {
+    const isContainObservable = hasObservableParams(params);
+    const observable = isContainObservable
+        ? Observable.computed(() => I18nService.tr(key, getParams(params)), getObservableParams(params))
+        : Observable(I18nService.tr(key, params));
+
+    i18next.on('languageChanged', (lng) => {
+        const data = isContainObservable ? getParams(params) : params;
+        observable.set(I18nService.tr(key, data));
+    });
+    return observable;
+};
+
+String.prototype.tr = function(params = {}) {
+    return tr(this, params);
+};
+
+export { I18nService, tr };

package/src/i18n/service/functions.d.ts

@@ -0,0 +1,22 @@
+import type { ObservableItem } from '../../types/observable';
+
+/**
+ * Resolves all param values — unwraps ObservableItem values to their current value.
+ */
+export declare function getParams(
+    params: Record<string, ObservableItem<unknown> | unknown> | null | undefined
+): Record<string, unknown>;
+
+/**
+ * Returns true if any param value is an ObservableItem.
+ */
+export declare function hasObservableParams(
+    params: Record<string, unknown> | null | undefined
+): boolean;
+
+/**
+ * Returns only the ObservableItem values from a params object.
+ */
+export declare function getObservableParams(
+    params: Record<string, ObservableItem<unknown> | unknown> | null | undefined
+): ObservableItem<unknown>[];

package/src/i18n/service/functions.js

@@ -0,0 +1,29 @@
+import {Observable} from '../../core/data/Observable';
+import Validator from '../../core/utils/validator';
+
+export const getParams = (params) => {
+    if(!params) {
+        return {};
+    }
+
+    const result = {};
+    for (const key in params) {
+        result[key] = Observable.value(params[key]);
+    }
+    return result;
+};
+
+export const hasObservableParams = (params) => {
+    if(!params) {
+        return false;
+    }
+    return Validator.isObject(params)
+        && Object.values(params).some(value => Validator.isObservable(value));
+};
+
+export const getObservableParams = (params) => {
+    if(!params) {
+        return [];
+    }
+    return Object.values(params).filter(value => Validator.isObservable(value));
+};

package/src/router/Route.js

@@ -1,26 +1,50 @@
-import {trim} from "../utils/helpers.js";
+import {trim} from '../core/utils/helpers.js';
 
 export const RouteParamPatterns = {
+    id:       '[0-9]+',
+    uuid:     '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}',
+    slug:     '[a-z0-9]+(?:-[a-z0-9]+)*',
+    hash:     '[a-f0-9]{32,64}',
 
+    alpha:    '[a-zA-Z]+',
+    alphanum: '[a-zA-Z0-9]+',
+    string:   '[^/]+',
+    any:      '.*',
+
+    int:      '[0-9]+',
+    float:    '[0-9]+\\.[0-9]+',
+    number:   '[0-9]+(\\.[0-9]+)?',
+    positive: '[1-9][0-9]*',
+
+    locale:   '[a-z]{2}(-[A-Z]{2})?',
+    lang:     '[a-z]{2}',
+
+    token:    '[A-Za-z0-9_\\-]+',
 };
 
 /**
+ * Creates a new Route instance.
  *
- * @param {string} $path
- * @param {Function} $component
- * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object }}$options
- * @class
+ * @param {string} $path - URL pattern with optional parameters (e.g., '/user/{id:number}')
+ * @param {Function} $component - Component function that returns HTMLElement or DocumentFragment
+ * @param {Object} [$options={}] - Route configuration options
+ * @param {string} [$options.name] - Unique name for the route (used for navigation)
+ * @param {Function[]} [$options.middlewares] - Array of middleware functions
+ * @param {boolean} [$options.shouldRebuild] - Whether to rebuild component on each navigation
+ * @param {Object} [$options.with] - Custom parameter validation patterns
+ * @param {Function} [$options.layout] - Layout component wrapper function
  */
 export function Route($path, $component, $options = {}) {
 
-    $path = '/'+trim($path, '/');
+    $path = '/'+trim($path, '/').replace(/\/+/, '/');
 
     let $pattern = null;
-    let $name = $options.name || null;
+    const $name = $options.name || null;
 
     const $middlewares = $options.middlewares || [];
     const $shouldRebuild = $options.shouldRebuild || false;
     const $paramsValidators = $options.with || {};
+    const $layout = $options.layout  || null;
 
     const $params = {};
     const $paramsNames = [];
@@ -65,6 +89,7 @@ export function Route($path, $component, $options = {}) {
     this.middlewares = () => $middlewares;
     this.shouldRebuild = () => $shouldRebuild;
     this.path = () => $path;
+    this.layout = () => $layout;
 
     /**
      *
@@ -98,5 +123,5 @@ export function Route($path, $component, $options = {}) {
 
         const queryString = (typeof configs.query === 'object') ? (new URLSearchParams(configs.query)).toString() : null;
         return (configs.basePath ? configs.basePath : '') + (queryString ? `${path}?${queryString}` : path);
-    }
+    };
 }

package/src/router/RouteGroupHelper.js

@@ -1,4 +1,4 @@
-import {trim} from "../utils/helpers.js";
+import {trim} from '../core/utils/helpers.js';
 
 export const RouteGroupHelper = {
     /**
@@ -48,5 +48,13 @@ export const RouteGroupHelper = {
         });
         name && fullName.push(name);
         return fullName.join('.');
-    }
+    },
+    layout: ($groupTree) => {
+        for(let i = $groupTree.length - 1; i >= 0; i--) {
+            if($groupTree[i]?.options?.layout) {
+                return $groupTree[i].options.layout;
+            }
+        }
+        return null;
+    },
 };