native-document 1.0.294 → 1.0.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.294",
+  "version": "1.0.296",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/core/data/observable-helpers/observable.is-to.js

@@ -301,6 +301,10 @@ ObservableItem.prototype.toBoolean = function () {
     return $checker(this, x => !!x);
 };
 
+ObservableItem.prototype.toNumber = function () {
+    return $checker(this, Number);
+};
+
 /**
  * Returns a derived observable that emits a string with the placeholder replaced by the current value.
  * Alias: toFormatted

package/src/core/data/observable-helpers/observable.prototypes.js

@@ -64,7 +64,7 @@ ObservableItem.prototype.is = function(callbackOrValue) {
     if(typeof callbackOrValue === 'function') {
         return new ObservableChecker(this, callbackOrValue);
     }
-    return new ObservableChecker(this, (value) => value === callbackOrValue);
+    return this.isEqualTo(callbackOrValue);
 };
 ObservableItem.prototype.select = ObservableItem.prototype.check;
 

package/src/router/Route.js

@@ -47,7 +47,7 @@ export function Route($path, $component, $options = {}) {
     const $shouldRebuild = $options.shouldRebuild || false;
     const $paramsValidators = $options.with || {};
     const $layout = $options.layout  || null;
-    const $layouts = $options.layouts  || null;
+    const $layouts = $options.layouts  || [];
 
     const $params = {};
     const $paramsNames = [];

package/src/router/RouteGroupHelper.js

@@ -58,8 +58,14 @@ export const RouteGroupHelper = {
         return null;
     },
     layouts($groupTree) {
-        return $groupTree
-            .map(g => g.options?.layout)
-            .filter(Boolean);
+        return $groupTree.map(g => g.options?.layout).filter(Boolean);
+    },
+    watches($groupTree) {
+        return $groupTree.mpa((g) => {
+            if(!g.options?.layout || !g.options?.watch) {
+                return null;
+            }
+            return { layout: g.options.layout, watch: g.options.watch };
+        }).filter(Boolean);
     },
 };

package/src/router/Router.js

@@ -25,6 +25,7 @@ export default function Router($options = {}) {
     const $groupTree = [];
     const $listeners = [];
     const $currentState = { route: null, params: null, query: null, path: null, hash: null };
+    const $layoutWatches = new Map();
 
     if($options.mode === 'hash') {
         HashRouter.apply(this, []);
@@ -54,10 +55,14 @@ export default function Router($options = {}) {
      *
      * @param {string} path
      * @param {Function} component
-     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object, layout: Function }} options
+     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object, layout: Function, watch?: string[] }} options
      * @returns {this}
      */
     this.add = function(path, component, options) {
+        if(options?.watch && !options?.layout) {
+            DebugManager.warn('Router', `'watch' ignored on route '${path}': requires a 'layout' defined at a group() level`);
+        }
+
         const route = new Route(RouteGroupHelper.fullPath($groupTree, path), component, {
             ...options,
             middlewares: RouteGroupHelper.fullMiddlewares($groupTree, options?.middlewares || []),
@@ -68,6 +73,7 @@ export default function Router($options = {}) {
                 ...(options?.layout ? [options.layout] : []),
             ],
         });
+
         $routes.push(route);
         if(route.name()) {
             $routesByName[route.name()] = route;
@@ -84,6 +90,10 @@ export default function Router($options = {}) {
         });
     };
 
+    this.getLayoutWatches = function(layout) {
+        return $layoutWatches.get(layout);
+    };
+
     /**
      * Groups routes under a common path prefix with shared options.
      *
@@ -104,7 +114,10 @@ export default function Router($options = {}) {
         if(!Validator.isFunction(callback)) {
             throw new RouterError('Callback must be a function');
         }
-        $groupTree.push({suffix, options});
+        $groupTree.push({ suffix, options });
+        if(options.layout && options.watch) {
+            $layoutWatches.set(options.layout, options.watch);
+        }
         callback();
         $groupTree.pop();
         return this;

package/src/router/RouterComponent.js

@@ -1,6 +1,7 @@
 import Validator from '../core/utils/validator';
 import {Anchor} from '../../elements';
 import {ElementCreator} from '../core/wrappers/ElementCreator';
+import {Observable} from 'native-document';
 
 /**
  *
@@ -12,7 +13,6 @@ export function RouterComponent(router, container) {
     const $cache = new Map();
     const $layoutCache = new WeakMap();
     const $routeInstanceAnchors = new WeakMap();
-    let $currentLayout = null;
 
     let $lastNodeInserted  = null;
 
@@ -42,10 +42,6 @@ export function RouterComponent(router, container) {
     const cleanContainer = () => {
         container.nodeValue = '';
         removeLastNodeInserted();
-
-        if($currentLayout) {
-            $currentLayout.remove();
-        }
     };
 
     const getNodeToInsert = (node) => {
@@ -56,7 +52,7 @@ export function RouterComponent(router, container) {
         return nodeToInsert;
     };
 
-    const updateContainerByLayout = (layouts, node, route, path) => {
+    const updateContainerByLayout = (layouts, node, route, path, routeContext) => {
 
         const nodeToInsert = getNodeToInsert(node);
         let matchDepth = 0;
@@ -69,6 +65,7 @@ export function RouterComponent(router, container) {
             removeLastNodeInserted();
             $lastNodeInserted = nodeToInsert;
             $mountedChain[matchDepth - 1]?.anchor?.replaceContent(nodeToInsert);
+            updateLayoutParams(routeContext);
             return;
         }
 
@@ -85,21 +82,32 @@ export function RouterComponent(router, container) {
         for(let i = layouts.length - 1; i >= matchDepth; i -= 1) {
             const layout = layouts[i];
             let cached  = $layoutCache.get(layout);
+            let $watches = null;
             if(!cached) {
+                const watches = router.getLayoutWatches(layout);
+                if(watches?.length) {
+                    const watchesSource = {};
+                    for(const name of watches) {
+                        watchesSource[name] = routeContext.params[name];
+                    }
+                    $watches = Observable.object(watchesSource)
+
+                }
                 const anchor = getNodeAnchorForLayout(slot, `${path}:layout:${i}`);
-                const element = ElementCreator.getChild(layout(anchor));
-                cached = { element, anchor };
+                const element = ElementCreator.getChild(layout(anchor, { params: $watches }));
+                cached = { element, anchor, $watches };
                 $layoutCache.set(layout, cached);
             }
             else {
                 cached.anchor.replaceContent(slot);
             }
 
-            newLayers.unshift({ layoutFn: layout, anchor: cached.anchor, element: cached.element });
+            newLayers.unshift({ layoutFn: layout, anchor: cached.anchor, element: cached.element, $watches: cached.$watches });
             slot = cached.element;
         }
 
         $mountedChain = [...$mountedChainKeep, ...newLayers];
+        updateLayoutParams(routeContext);
 
         if (matchDepth === 0) {
             container.appendChild(newLayers[0].element);
@@ -109,12 +117,25 @@ export function RouterComponent(router, container) {
 
     };
 
-    const updateContainer = function(node, route, path) {
-        const layouts = route.layouts();
+    const updateLayoutParams = function(routeContext) {
+        for(let i = 0; i < $mountedChain.length; i++) {
+            const layer = $mountedChain[i];
+            if(!layer.$watches) {
+                continue;
+            }
+            const watches = router.getLayoutWatches(layer.layoutFn);
+
+            for(const name of watches) {
+                layer.$watches[name]?.set(routeContext.params[name]);
+            }
+        }
+    };
 
+    const updateContainer = function(node, route, path, routeContext) {
+        const layouts = route.layouts();
 
         if(layouts.length) {
-            updateContainerByLayout(layouts, node, route, path);
+            updateContainerByLayout(layouts, node, route, path, routeContext);
             return;
         }
         const nodeToInsert = getNodeToInsert(node);
@@ -135,9 +156,11 @@ export function RouterComponent(router, container) {
             $lifecycles.get($currentPath)?.onLeave?.();
         }
 
+
+
         if($cache.has(path)) {
             const cacheNode = $cache.get(path);
-            updateContainer(cacheNode, route);
+            updateContainer(cacheNode, route, path, { query, params });
 
             $lifecycles.get(path)?.onEnter?.(params, query);
             $currentPath = path;
@@ -145,19 +168,20 @@ export function RouterComponent(router, container) {
             return;
         }
         const pathLifecycles = {};
+        const routeContext = {
+            params,
+            query,
+            onEnter: (cb) => { pathLifecycles.onEnter = cb; },
+            onLeave: (cb) => { pathLifecycles.onLeave = cb; },
+        };
         $lifecycles.set(path, pathLifecycles);
 
 
 
         const Component = route.component();
-        const node = Component({
-            params,
-            query,
-            onEnter: (cb) => { pathLifecycles.onEnter = cb; },
-            onLeave: (cb) => { pathLifecycles.onLeave = cb; },
-        });
+        const node = Component(routeContext);
         $cache.set(path, node);
-        updateContainer(node, route, path);
+        updateContainer(node, route, path, routeContext);
 
         pathLifecycles.onEnter?.(params, query);
         $currentPath = path;

package/src/ui/components/list/item/ListItemRender.js

@@ -25,15 +25,35 @@ export default function ListItemRender($desc, instance) {
 
     const $list = instance.$parent;
 
-    // Checkbox — réactif via ShowIf
     const selectedValues = $list.$description.selectedValues;
     const value          = $desc.value ?? instance;
     const isChecked      = selectedValues ? selectedValues.isIncludes(value) : null;
 
+
     if($list.$description?.selectable || $desc.selected) {
         const selectedSource = $desc.selected ?? isChecked;
         props.class.add('is-selected', selectedSource);
         props['aria-selected'] = selectedSource;
+
+        if(selectedSource.__$Observable) {
+            selectedSource.subscribe((isSelected) => {
+                const $values = $list.$description.selectedValues;
+                if (!$values) return;
+                const value = $desc.value ?? instance;
+
+                if(isSelected) {
+                    if(!$values.includes(value)) {
+                        if (!$list.$description.multiSelect.val()) {
+                            $values.clear();
+                        }
+                        $values.push(value);
+                    }
+                } else {
+                    $values.removeItem(value);
+                }
+            });
+        }
+
     }
 
     if ($list?.$description?.selectByCheckbox) {
@@ -48,26 +68,21 @@ export default function ListItemRender($desc, instance) {
         );
     }
 
+
+
     if ($desc.icon) {
         frontContent.push(Span({ class: 'list-item-icon' }, $desc.icon));
     }
 
     frontContent.push(buildBody($desc));
 
-    // Select indicator — réactif via isIncludes
     if ($list?.$description?.selectByClick) {
-        const selectedValues = $list.$description.selectedValues;
-        const value          = $desc.value ?? instance;
-        const isSelected     = selectedValues ? selectedValues.isIncludes(value) : null;
-
-        if (isSelected) {
-            frontContent.push(
-                Span({
-                    class: isSelected.transform((s) => 'list-item-indicator' + (s ? ' is-visible' : '')),
-                    'aria-hidden': 'true',
-                }, $desc.isSelectedIcon)
-            );
-        }
+        frontContent.push(
+            Span({
+                class: isChecked.transform((s) => 'list-item-indicator' + (s ? ' is-visible' : '')),
+                'aria-hidden': 'true',
+            }, $desc.isSelectedIcon)
+        );
     }
 
     if ($desc.trailing) {

package/types/observable.d.ts

@@ -138,6 +138,7 @@ export interface ObservableItem<T = any> {
     toTrimmed(): ObservableChecker<string>;
     toBoolean(): ObservableChecker<boolean>;
     toLiteral(template: string, placeholder?: string): ObservableChecker<string>;
+    toNumber(): ObservableChecker<number>;
     toFormatted(template: string, placeholder?: string): ObservableChecker<string>;
     toProperty<U = any>(path: string): ObservableChecker<U>;
     toLength(): ObservableChecker<number>;

package/types/router.d.ts

@@ -44,7 +44,8 @@ export interface Router {
         middlewares?: Function[];
         shouldRebuild?: boolean;
         with?: Record<string, string>;
-        layout?: (children: ValidChild) => ValidChild ;
+        layout?: (children: ValidChild) => ValidChild;
+        watch?: string[]
     }): this;
     notFound(page: (context: RouteContext) => HTMLElement | DocumentFragment): void;