native-document 1.0.164 → 1.0.166

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

@@ -1,5 +1,5 @@
-import { ElementCreator } from "../ElementCreator";
-import NodeCloner from "./NodeCloner";
+import { ElementCreator } from '../ElementCreator';
+import NodeCloner from './NodeCloner';
 
 const pathProcess = (target, path, data) => {
     if(path.HYDRATE_TEXT) {
@@ -37,7 +37,7 @@ const prepareBindingMetadata = (bindDingData) => {
         for (const attr in bindDingData.attributes) {
             attributes.push({
                 name: attr,
-                value: bindDingData.attributes[attr]
+                value: bindDingData.attributes[attr],
             });
         }
     }
@@ -48,7 +48,7 @@ const prepareBindingMetadata = (bindDingData) => {
             classAndStyles.push({
                 name: 'class',
                 key: className,
-                value: bindDingData.classes[className]
+                value: bindDingData.classes[className],
             });
         }
     }
@@ -59,7 +59,7 @@ const prepareBindingMetadata = (bindDingData) => {
             classAndStyles.push({
                 name: 'style',
                 key: property,
-                value: bindDingData.styles[property]
+                value: bindDingData.styles[property],
             });
         }
     }
@@ -71,7 +71,16 @@ const prepareBindingMetadata = (bindDingData) => {
     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') {
@@ -85,6 +94,14 @@ export const $hydrateFn = function(value, targetType, element, property) {
     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];
@@ -94,6 +111,14 @@ export const bindAttachMethods = (node, bindDingData, data) => {
     }
 };
 
+/**
+ * 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);
@@ -101,6 +126,17 @@ export const optimizeBindingData = (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;

package/src/fetch/NativeFetch.js

@@ -2,7 +2,7 @@ export default function NativeFetch($baseUrl) {
 
     const $interceptors = {
         request: [],
-        response: []
+        response: [],
     };
 
     this.interceptors = {
@@ -11,7 +11,7 @@ export default function NativeFetch($baseUrl) {
         },
         request: (callback) => {
             $interceptors.request.push(callback);
-        }
+        },
     };
 
     this.fetch = async function(method, endpoint, params = {}, options = {}) {
@@ -28,7 +28,7 @@ export default function NativeFetch($baseUrl) {
         let configs = {
             method,
             headers: {
-                ...(options.headers || {})
+                ...(options.headers || {}),
             },
         };
         if(params) {

package/src/i18n/bin/scan.js

@@ -8,8 +8,8 @@ const Debug = {
     $warning: [],
     warn(category, message, data) {
         Debug.$warning.push({ message: `[${category}] ${message}`, data });
-    }
-}
+    },
+};
 
 function scanFolder(dirPath, callback) {
     const files = Fs.readdirSync(dirPath);
@@ -42,11 +42,11 @@ function scanFile(filePath) {
 function getKey(args, filePath) {
     const trimmed = args.trim();
     const firstChar = trimmed[0];
-    if(firstChar !== '"' && firstChar !== "'") {
+    if(firstChar !== '"' && firstChar !== '\'') {
         Debug.warn('Key Extract', '', {
             message: `can't extract key from ("${args}") in file.`,
             args: args,
-            file: filePath
+            file: filePath,
         });
 
         return;
@@ -93,7 +93,7 @@ function scan() {
             return;
         }
 
-        console.log(":: scan locales");
+        console.log(':: scan locales');
         scanFolder(config.locales, (filePath) => {
             if(!filePath.endsWith('.json')) {
                 return;
@@ -108,7 +108,7 @@ function scan() {
                 return acc;
             }, {});
 
-            console.log("-- " + locale + ` : ${absentKeys.length} keys are absent in locale file.`);
+            console.log('-- ' + locale + ` : ${absentKeys.length} keys are absent in locale file.`);
             if(!config?.save) {
                 console.log('-- display result:');
                 console.log(result);

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

@@ -1,6 +1,6 @@
-import i18next from "i18next";
-import {Observable} from "../../core/data/Observable";
-import {hasObservableParams, getObservableParams, getParams} from "./functions";
+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';
@@ -13,7 +13,7 @@ const I18nService = (function () {
                 lng: import.meta.env.VITE_LOCALE,
                 fallbackLng: import.meta.env.VITE_FALLBACK_LANGUE || 'en',
                 debug: import.meta.env.VITE_ENV === 'development',
-                resources
+                resources,
             });
         },
         current: $current,
@@ -22,7 +22,7 @@ const I18nService = (function () {
         },
         tr(key, ...args) {
             return i18next.t(key, ...args) || key;
-        }
+        },
     };
 }());
 

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

@@ -1,5 +1,5 @@
-import {Observable} from "../../core/data/Observable";
-import Validator from "../../core/utils/validator";
+import {Observable} from '../../core/data/Observable';
+import Validator from '../../core/utils/validator';
 
 export const getParams = (params) => {
     if(!params) {

package/src/router/Route.js

@@ -1,4 +1,4 @@
-import {trim} from "../core/utils/helpers.js";
+import {trim} from '../core/utils/helpers.js';
 
 export const RouteParamPatterns = {
     id:       '[0-9]+',
@@ -39,7 +39,7 @@ export function Route($path, $component, $options = {}) {
     $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;
@@ -123,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 "../core/utils/helpers.js";
+import {trim} from '../core/utils/helpers.js';
 
 export const RouteGroupHelper = {
     /**
@@ -56,5 +56,5 @@ export const RouteGroupHelper = {
             }
         }
         return null;
-    }
+    },
 };

package/src/router/Router.js

@@ -1,13 +1,13 @@
-import {Route} from "./Route.js";
-import Validator from "../core/utils/validator.js";
-import RouterError from "./errors/RouterError.js";
-import {RouteGroupHelper} from "./RouteGroupHelper.js";
-import {trim} from "../core/utils/helpers.js";
-import HashRouter from "./modes/HashRouter.js";
-import HistoryRouter from "./modes/HistoryRouter.js";
-import MemoryRouter from "./modes/MemoryRouter.js";
-import DebugManager from "../core/utils/debug-manager.js";
-import {RouterComponent} from "./RouterComponent.js";
+import {Route} from './Route.js';
+import Validator from '../core/utils/validator.js';
+import RouterError from './errors/RouterError.js';
+import {RouteGroupHelper} from './RouteGroupHelper.js';
+import {trim} from '../core/utils/helpers.js';
+import HashRouter from './modes/HashRouter.js';
+import HistoryRouter from './modes/HistoryRouter.js';
+import MemoryRouter from './modes/MemoryRouter.js';
+import DebugManager from '../core/utils/debug-manager.js';
+import {RouterComponent} from './RouterComponent.js';
 
 export const DEFAULT_ROUTER_NAME = 'default';
 
@@ -45,7 +45,7 @@ export default function Router($options = {}) {
                 DebugManager.warn('Route Listener', 'Error in listener:', e);
             }
         }
-    }
+    };
 
     this.routes = () => [...$routes];
     this.currentState = () => ({ ...$currentState });
@@ -62,7 +62,7 @@ export default function Router($options = {}) {
             ...options,
             middlewares: RouteGroupHelper.fullMiddlewares($groupTree, options?.middlewares || []),
             name: options?.name ? RouteGroupHelper.fullName($groupTree, options.name) : null,
-            layout: options?.layout || RouteGroupHelper.layout($groupTree)
+            layout: options?.layout || RouteGroupHelper.layout($groupTree),
         });
         $routes.push(route);
         if(route.name()) {
@@ -125,7 +125,7 @@ export default function Router($options = {}) {
                     route,
                     params: [],
                     query: [],
-                    path: route.url({ name: target })
+                    path: route.url({ name: target }),
                 };
             }
         }
@@ -138,7 +138,7 @@ export default function Router($options = {}) {
                 route,
                 params: target.params,
                 query: target.query,
-                path: route.url({ ...target })
+                path: route.url({ ...target }),
             };
         }
 
@@ -285,7 +285,7 @@ Router.redirectTo = function(pathOrRouteName, params = null, name = null) {
     const router = Router.get(name);
     const route = router.resolve({ name: pathOrRouteName, params });
     if(route) {
-        target = { name: pathOrRouteName, params}
+        target = { name: pathOrRouteName, params};
     }
     return router.push(target);
 };

package/src/router/RouterComponent.js

@@ -1,6 +1,6 @@
-import Validator from "../core/utils/validator";
-import {Anchor} from "../../elements";
-import {ElementCreator} from "../core/wrappers/ElementCreator";
+import Validator from '../core/utils/validator';
+import {Anchor} from '../../elements';
+import {ElementCreator} from '../core/wrappers/ElementCreator';
 
 /**
  *
@@ -16,6 +16,9 @@ export function RouterComponent(router, container) {
 
     let $lastNodeInserted  = null;
 
+    const $lifecycles = new Map();
+    let $currentPath = null;
+
     const getNodeAnchorForLayout = (node, path) => {
         const existingAnchor = $routeInstanceAnchors.get(node);
         if(existingAnchor) {
@@ -53,7 +56,7 @@ export function RouterComponent(router, container) {
     };
 
     const updateContainerByLayout = (layout, node, route, path) => {
-        let nodeToInsert = getNodeToInsert(node);
+        const nodeToInsert = getNodeToInsert(node);
 
         const cachedLayout = $layoutCache.get(nodeToInsert);
         if(cachedLayout) {
@@ -79,7 +82,7 @@ export function RouterComponent(router, container) {
         $currentLayout = ElementCreator.getChild(layout(anchor));
         $layoutCache.set(nodeToInsert, $currentLayout);
         container.appendChild($currentLayout);
-    }
+    };
 
     const updateContainer = function(node, route, path) {
         const layout = route.layout();
@@ -87,7 +90,7 @@ export function RouterComponent(router, container) {
             updateContainerByLayout(layout, node, route, path);
             return;
         }
-        let nodeToInsert = getNodeToInsert(node);
+        const nodeToInsert = getNodeToInsert(node);
 
         cleanContainer();
         container.appendChild(nodeToInsert);
@@ -98,16 +101,39 @@ export function RouterComponent(router, container) {
         if(!state.route) {
             return;
         }
+
         const { route, params, query, path } = state;
+
+        if($currentPath && $currentPath !== path) {
+            $lifecycles.get($currentPath)?.onLeave?.();
+        }
+
         if($cache.has(path)) {
             const cacheNode = $cache.get(path);
             updateContainer(cacheNode, route);
+
+            $lifecycles.get(path)?.onEnter?.(params, query);
+            $currentPath = path;
+
             return;
         }
+        const pathLifecycles = {};
+        $lifecycles.set(path, pathLifecycles);
+
+
+
         const Component = route.component();
-        const node = Component({ params, query });
+        const node = Component({
+            params,
+            query,
+            onEnter: (cb) => { pathLifecycles.onEnter = cb; },
+            onLeave: (cb) => { pathLifecycles.onLeave = cb; },
+        });
         $cache.set(path, node);
         updateContainer(node, route, path);
+
+        pathLifecycles.onEnter?.(params, query);
+        $currentPath = path;
     };
 
     router.subscribe(handleCurrentRouterState);

package/src/router/link.js

@@ -1,7 +1,7 @@
-import Validator from "../core/utils/validator";
-import {Link as NativeLink} from "../../elements";
-import Router, {DEFAULT_ROUTER_NAME} from "./Router";
-import RouterError from "./errors/RouterError";
+import Validator from '../core/utils/validator';
+import {Link as NativeLink} from '../../elements';
+import Router, {DEFAULT_ROUTER_NAME} from './Router';
+import RouterError from './errors/RouterError';
 
 
 export function Link(options, children){

package/src/router/modes/HashRouter.js

@@ -32,7 +32,7 @@ export default function HashRouter() {
      */
     const setHash = (path) => {
         window.location.replace(`${window.location.pathname}${window.location.search}#${path}`);
-    }
+    };
 
     const getCurrentHash = () => window.location.hash.slice(1);
 
@@ -79,5 +79,5 @@ export default function HashRouter() {
         $history.push({ route, params, query, path });
         $currentIndex = 0;
         this.handleRouteChange(route, params, query, path);
-    }
+    };
 };

package/src/router/modes/HistoryRouter.js

@@ -1,4 +1,4 @@
-import DebugManager from "../../core/utils/debug-manager.js";
+import DebugManager from '../../core/utils/debug-manager.js';
 
 export default function HistoryRouter() {
 
@@ -60,6 +60,6 @@ export default function HistoryRouter() {
         });
         const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
         this.handleRouteChange(route, params, query, path);
-    }
+    };
 
 };

package/src/router/modes/MemoryRouter.js

@@ -67,5 +67,5 @@ export default function MemoryRouter() {
         $currentIndex = 0;
 
         this.handleRouteChange(route, params, query, path);
-    }
+    };
 };

package/src/ui/components/accordion/AccordionItemRender.js

@@ -18,7 +18,7 @@ const buildHeader = ($desc, instance) => {
     }
 
     const indicatorClass = $desc.expanded.transform(
-        (expanded) => 'accordion-indicator' + (expanded ? ' is-expanded' : '')
+        (expanded) => 'accordion-indicator' + (expanded ? ' is-expanded' : ''),
     );
 
     const content = [
@@ -53,11 +53,11 @@ const buildIndicator = ($desc) => {
 const buildContent = ($desc, instance) => {
     if($desc.renderContent) {
         return ShowIf($desc.expanded, () =>
-            Div({class: 'accordion-content'}, $desc.renderContent($desc, instance))
+            Div({class: 'accordion-content'}, $desc.renderContent($desc, instance)),
         );
     }
 
     return ShowIf($desc.expanded, () =>
-        Div({class: 'accordion-content'}, $desc.content)
+        Div({class: 'accordion-content'}, $desc.content),
     );
 };

package/src/ui/components/accordion/AccordionRender.js

@@ -29,7 +29,7 @@ export default function AccordionRender($desc, instance) {
         });
 
         return item;
-    }
+    };
 
     return Div(instance.resolveProps(), ForEachArray($desc.items, addItem));
 }

package/src/ui/components/alert/AlertRender.js

@@ -27,13 +27,13 @@ const buildBody = ($desc, instance) => {
     if($desc.renderTitle) {
         body.push(Div({class: 'alert-title'}, [
             $desc.renderTitle($desc, instance),
-            $desc.closable ? buildClose($desc, instance) : null
+            $desc.closable ? buildClose($desc, instance) : null,
         ]));
     }
     else if($desc.title) {
         body.push(Div({class: 'alert-title'}, [
             $desc.title,
-            $desc.closable ? buildClose($desc, instance) : null
+            $desc.closable ? buildClose($desc, instance) : null,
         ]));
     }
 
@@ -52,7 +52,7 @@ const buildBody = ($desc, instance) => {
     }
 
     return Div({class: 'alert-body'}, body);
-}
+};
 
 const buildFooter = ($desc, instance) => {
     const actions = $desc.actions.map((action) => {
@@ -70,12 +70,12 @@ const buildFooter = ($desc, instance) => {
     });
 
     return Div({class: 'alert-footer'}, actions);
-}
+};
 
 const buildClose = ($desc, instance) => {
-   return Button('×', { class: 'alert-close' })
-       .nd.onClick(() => {
-           instance.emit('close');
-           instance.hide();
-       });
-}
+    return Button('×', { class: 'alert-close' })
+        .nd.onClick(() => {
+            instance.emit('close');
+            instance.hide();
+        });
+};

package/src/ui/components/avatar/avata-group/AvatarGroupRender.js

@@ -39,7 +39,7 @@ function buildMore(count, $desc) {
     const isClickable = $desc.onMoreClick ? ' is-clickable' : '';
 
     const span = Span({
-        class: 'avatar-group-more is-' + size + ' is-' + shape + isClickable
+        class: 'avatar-group-more is-' + size + ' is-' + shape + isClickable,
     }, '+' + count);
 
     if($desc.onMoreClick) {

package/src/ui/components/avatar/avatar/AvatarRender.js

@@ -1,5 +1,5 @@
 import {Div, Img, Span} from '../../../../core/elements';
-import {classPropertyAccumulator} from "../../../../core/utils/property-accumulator";
+import {classPropertyAccumulator} from '../../../../core/utils/property-accumulator';
 
 
 import './avatar.css';

package/src/ui/components/breadcrumb/BreadcrumbRender.js

@@ -8,8 +8,8 @@ export default function BreadcrumbRender($desc, instance) {
 
     return Nav(instance.resolveProps(),
         OrderedList({ class: 'breadcrumb-list' },
-            ForEachArray($desc.items, (item) => buildItem(item, $desc, instance))
-        )
+            ForEachArray($desc.items, (item) => buildItem(item, $desc, instance)),
+        ),
     );
 }
 

package/src/ui/components/button/ButtonRender.js

@@ -1,5 +1,5 @@
 import {Button as NativeButton, ShowIf, Span} from '../../../core/elements';
-import {Spinner} from "../../../components/spinner";
+import {Spinner} from '../../../components/spinner';
 
 import './button.css';
 

package/src/ui/components/contextmenu/ContextmenuRender.js

@@ -1,5 +1,5 @@
-import {Div, ShowIf} from "../../../core/elements";
-import {createPortal} from "../../../core/elements/anchor/anchor";
+import {Div, ShowIf} from '../../../core/elements';
+import {createPortal} from '../../../core/elements/anchor/anchor';
 import {computePosition, flip, shift} from '@floating-ui/dom';
 
 import './contextmenu.css';
@@ -57,12 +57,12 @@ export const contextMenuHandler = (trigger, instance, data = null) => {
                 placement: 'bottom-start',
                 middleware: [
                     flip(),
-                    shift({padding: 8})
+                    shift({padding: 8}),
                 ],
             }).then(({x, y}) => {
                 $positionX.set(x);
                 $positionY.set(y);
             });
         });
-    })
-}
+    });
+};