native-document 1.0.294 → 1.0.295

package/package.json

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

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/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;