native-document 1.0.40 → 1.0.41

package/src/elements/control/switch.js

@@ -18,7 +18,7 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
         throw new NativeDocumentError("Toggle : condition must be an Observable");
     }
 
-    const anchor = new Anchor();
+    const anchor = new Anchor('Match');
     const cache = new Map();
 
     const getItem = function(key) {
@@ -63,7 +63,6 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
  * @returns {DocumentFragment}
  */
 export const Switch = function ($condition, onTrue, onFalse) {
-
     if(!Validator.isObservable($condition)) {
         throw new NativeDocumentError("Toggle : condition must be an Observable");
     }

package/src/router/Route.js

@@ -21,6 +21,7 @@ export function Route($path, $component, $options = {}) {
     const $middlewares = $options.middlewares || [];
     const $shouldRebuild = $options.shouldRebuild || false;
     const $paramsValidators = $options.with || {};
+    const $layout = $options.layout  || null;
 
     const $params = {};
     const $paramsNames = [];
@@ -65,6 +66,7 @@ export function Route($path, $component, $options = {}) {
     this.middlewares = () => $middlewares;
     this.shouldRebuild = () => $shouldRebuild;
     this.path = () => $path;
+    this.layout = () => $layout;
 
     /**
      *

package/src/router/RouteGroupHelper.js

@@ -48,5 +48,8 @@ export const RouteGroupHelper = {
         });
         name && fullName.push(name);
         return fullName.join('.');
+    },
+    layout: ($groupTree) => {
+        return $groupTree[$groupTree.length-1]?.options?.layout || null;
     }
 };

package/src/router/Router.js

@@ -54,7 +54,7 @@ export default function Router($options = {}) {
      *
      * @param {string} path
      * @param {Function} component
-     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object }} options
+     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object, layout: Function }} options
      * @returns {this}
      */
     this.add = function(path, component, options) {
@@ -62,6 +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)
         });
         $routes.push(route);
         if(route.name()) {

package/src/router/RouterComponent.js

@@ -7,8 +7,13 @@ export function RouterComponent(router, container) {
 
     const $cache = new Map();
 
-    const updateContainer = function(node) {
+    const updateContainer = function(node, route) {
         container.innerHTML = '';
+        const layout = route.layout();
+        if(layout) {
+            container.appendChild(layout(node));
+            return;
+        }
         container.appendChild(node);
     };
 
@@ -19,13 +24,13 @@ export function RouterComponent(router, container) {
         const { route, params, query, path } = state;
         if($cache.has(path)) {
             const cacheNode = $cache.get(path);
-            updateContainer(cacheNode);
+            updateContainer(cacheNode, route);
             return;
         }
         const Component = route.component();
         const node = Component({ params, query });
         $cache.set(path, node);
-        updateContainer(node);
+        updateContainer(node, route);
     };
 
     router.subscribe(handleCurrentRouterState);

package/src/utils/validator.js

@@ -19,6 +19,9 @@ const Validator = {
     isProxy(value) {
         return value?.__isProxy__
     },
+    isAnchor(value) {
+        return value?.__Anchor__
+    },
     isObservableChecker(value) {
         return value?.__$isObservableChecker || value instanceof ObservableChecker;
     },
@@ -50,7 +53,8 @@ const Validator = {
         return value && (
             value.nodeType === COMMON_NODE_TYPES.ELEMENT ||
             value.nodeType === COMMON_NODE_TYPES.TEXT ||
-            value.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT
+            value.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT ||
+            value.nodeType === COMMON_NODE_TYPES.COMMENT
         );
     },
     isFragment(value) {

package/src/wrappers/NDElement.js

@@ -10,8 +10,6 @@ export function NDElement(element) {
 }
 NDElement.prototype.__$isNDElement = true;
 
-
-
 NDElement.prototype.valueOf = function() {
     return this.$element;
 };

package/src/wrappers/SingletonView.js

@@ -0,0 +1,48 @@
+import Anchor from "../elements/anchor";
+
+
+export function SingletonView($viewCreator) {
+    let $cacheNode = null;
+    let $components = null;
+
+    this.render = (data) => {
+        if(!$cacheNode) {
+            $cacheNode = $viewCreator(this);
+        }
+        if(!$components) {
+            return $cacheNode;
+        }
+        for(const index in $components) {
+            const updater = $components[index];
+            updater(...data);
+        }
+        return $cacheNode;
+    };
+
+    this.createSection = (name, fn) => {
+        $components = $components || {};
+        const anchor = new Anchor('Component '+name);
+
+        $components[name] = function(...args) {
+            anchor.removeChildren();
+            if(!fn) {
+                anchor.append(args);
+                return;
+            }
+            anchor.appendChild(fn(...args));
+        };
+        return anchor;
+    };
+}
+
+
+export function useSingleton(fn) {
+    let $cache = null;
+
+    return function(...args) {
+        if(!$cache) {
+            $cache = new SingletonView(fn);
+        }
+        return $cache.render(args);
+    };
+}

package/src/wrappers/TemplateCloner.js

@@ -1,5 +1,6 @@
 import {ElementCreator} from "./ElementCreator";
 import {createTextNode} from "./HtmlElementWrapper";
+import Anchor from "../elements/anchor";
 
 const cloneBindingsDataCache = new WeakMap();
 
@@ -142,6 +143,7 @@ export function TemplateCloner($fn) {
     this.attach = (fn) => {
         return createBinding(fn, 'attach');
     };
+
 }
 
 export function useCache(fn) {

package/types/elements.d.ts

@@ -18,6 +18,7 @@ export type ValidChild =
     | ValidChild[]
     | ((...args: any[]) => ValidChild);
 
+
 export type Attributes = Record<string, any> & {
     class?: string | Record<string, boolean | ObservableItem<boolean>>;
     style?: string | Record<string, string | ObservableItem<string>>;
@@ -122,5 +123,13 @@ export declare const TBodyCell: ElementFunction;
 export declare const Fragment: ElementFunction;
 export declare const NativeDocumentFragment: typeof Anchor;
 
+
+export declare type AnchorDocumentFragment = DocumentFragment & {
+    detach: ()  => void;
+    restore: ()  => void;
+    removeChildren: ()  => void;
+    appendElement: (child: ValidChild, before: HTMLElement) => void;
+};
+
 // Anchor
-export declare function Anchor(name?: string, isUniqueChild?: boolean): DocumentFragment;
+export declare function Anchor(name?: string, isUniqueChild?: boolean): AnchorDocumentFragment;

package/types/observable.d.ts

@@ -50,11 +50,14 @@ export interface ObservableArray<T> extends ObservableItem<T[]> {
     sort(compareFn?: (a: T, b: T) => number): T[];
     splice(start: number, deleteCount?: number, ...items: T[]): T[];
 
+    isEmpty(): boolean;
     clear(): boolean;
     merge(values: T[]): void;
+    removeItem(item: T): T[];
     remove(index: number): T[];
     swap(indexA: number, indexB: number): boolean;
     length(): number;
+    count(condition: (item:T, index?:number) => boolean): number;
     populateAndRender(iteration: number, callback: (index: number) => T): void;
 
     map<U>(callback: (value: T, index: number, array: T[]) => U): U[];

package/types/router.d.ts

@@ -1,5 +1,6 @@
 // Router system type definitions
-import { ValidChild, NDElement } from './elements';
+import { ValidChild } from './elements';
+import { NDElement } from './nd-element';
 
 export interface RouteParams {
     [key: string]: string;
@@ -42,7 +43,7 @@ export interface Router {
         with?: Record<string, string>;
     }): this;
 
-    group(suffix: string, options: { middlewares?: Function[]; name?: string }, callback: () => void): this;
+    group(suffix: string, options: { middlewares?: Function[]; name?: string, layout?: Function }, callback: () => void): this;
 
     generateUrl(name: string, params?: RouteParams, query?: QueryParams): string;
     resolve(target: string | { name: string; params?: RouteParams; query?: QueryParams }): {

package/types/singleton.d.ts

@@ -0,0 +1,19 @@
+import { AnchorDocumentFragment } from "./elements";
+
+export type ViewCreator = (instance: SingletonView) => Node;
+
+export type SectionFunction = (...args: any[]) => Node | Node[];
+
+export type ComponentUpdater = (...args: any[]) => void;
+
+export type ComponentsMap = Record<string, ComponentUpdater>;
+
+export declare class SingletonView {
+    constructor(viewCreator: ViewCreator);
+
+    render(data: any[]): Node;
+
+    createSection(name: string, fn?: SectionFunction): AnchorDocumentFragment;
+}
+
+export declare function useSingleton(fn: ViewCreator): (...args: any[]) => Node;