native-document 1.0.40 → 1.0.42

package/src/elements/control/show-if.js

@@ -9,7 +9,7 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
  *
  * @param {ObservableItem|ObservableChecker} condition
  * @param {*} child
- * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} comment
+ * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} configs
  * @returns {DocumentFragment}
  */
 export const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
@@ -25,7 +25,7 @@ export const ShowIf = function(condition, child, { comment = null, shouldKeepInC
         }
         childElement = ElementCreator.getChild(child);
         if(Validator.isFragment(childElement)) {
-            childElement = Array.from(childElement.children);
+            childElement = Array.from(childElement.childNodes);
         }
         return childElement;
     };
@@ -50,15 +50,14 @@ export const ShowIf = function(condition, child, { comment = null, shouldKeepInC
  * Hide the element if the condition is true
  * @param {ObservableItem|ObservableChecker} condition
  * @param child
- * @param comment
+ * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} configs
  * @returns {DocumentFragment}
  */
-export const HideIf = function(condition, child, comment) {
-
+export const HideIf = function(condition, child, configs) {
     const hideCondition = Observable(!condition.val());
     condition.subscribe(value => hideCondition.set(!value));
 
-    return ShowIf(hideCondition, child, comment);
+    return ShowIf(hideCondition, child, configs);
 }
 
 /**
@@ -66,9 +65,9 @@ export const HideIf = function(condition, child, comment) {
  *
  * @param {ObservableItem|ObservableChecker} condition
  * @param {*} child
- * @param {string|null} comment
+ * @param {{comment?: string|null, shouldKeepInCache?: Boolean}} configs
  * @returns {DocumentFragment}
  */
-export const HideIfNot = function(condition, child, comment) {
-    return ShowIf(condition, child, comment);
+export const HideIfNot = function(condition, child, configs) {
+    return ShowIf(condition, child, configs);
 }

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/elements/img.js

@@ -16,11 +16,13 @@ export const Img = function(src, attributes) {
  * @returns {Image}
  */
 export const AsyncImg = function(src, defaultImage, attributes, callback) {
-    const image = Img(defaultImage || src, attributes);
+    const defaultSrc = Validator.isObservable(src) ? src.val() : src;
+    const image = Img(defaultImage || defaultSrc, attributes);
     const img = new Image();
+
     img.onload = () => {
         Validator.isFunction(callback) && callback(null, image);
-        image.src = src;
+        image.src = Validator.isObservable(src) ? src.val() : src;
     };
     img.onerror = () => {
         Validator.isFunction(callback) && callback(new NativeDocumentError('Image not found'));
@@ -30,7 +32,7 @@ export const AsyncImg = function(src, defaultImage, attributes, callback) {
             img.src = newSrc;
         });
     }
-    img.src = src;
+    img.src = defaultSrc;
     return image;
 };
 

package/src/router/Route.js

@@ -13,7 +13,7 @@ export const RouteParamPatterns = {
  */
 export function Route($path, $component, $options = {}) {
 
-    $path = '/'+trim($path, '/');
+    $path = '/'+trim($path, '/').replace(/\/+/, '/');
 
     let $pattern = null;
     let $name = $options.name || null;
@@ -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,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;
     }
 };

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/fetch/NativeFetch.js

@@ -0,0 +1,79 @@
+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(!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 {
+                configs.headers['Content-Type'] = 'application/json';
+                if(method !== 'GET') {
+                    configs.body = JSON.stringify(params);
+                } else {
+                    configs.params = params;
+                }
+            }
+        }
+
+        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/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,20 @@ 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;
+    clear: ()  => void;
+    remove: ()  => void;
+    removeChildren: ()  => void;
+    insertBefore: (child: ValidChild, before: HTMLElement|Comment)  => void;
+    replaceContent: (child: ValidChild)  => void;
+    appendElement: (child: ValidChild, before: HTMLElement) => void;
+    getByIndex: (index: number) => HTMLElement;
+    endElement: () => Comment;
+    startElement: () => Comment;
+};
+
 // 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;

package/utils.js

@@ -0,0 +1,6 @@
+import NativeFetch from "./src/utils/fetch/NativeFetch";
+
+
+export {
+    NativeFetch
+};