native-document 1.0.0

package/src/elements/form.js

@@ -0,0 +1,71 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+
+export const Form = HtmlElementWrapper('form', function(el) {
+
+    el.submit = function(action) {
+        if(typeof action === 'function') {
+            el.on.submit((e) => {
+                e.preventDefault();
+                action(e);
+            });
+            return el;
+        }
+        this.setAttribute('action', action);
+        return el;
+    };
+    el.multipartFormData = function() {
+        this.setAttribute('enctype', 'multipart/form-data');
+        return el;
+    }
+    el.post = function(action) {
+        this.setAttribute('method', 'post');
+        this.setAttribute('action', action);
+        return el;
+    };
+    el.get = function(action) {
+        this.setAttribute('method', 'get');
+        this.setAttribute('action', action);
+    };
+    return el;
+});
+
+export const Input = HtmlElementWrapper('input');
+
+export const TextArea = HtmlElementWrapper('textarea');
+export const TextInput = TextArea;
+
+export const Select = HtmlElementWrapper('select');
+export const FieldSet = HtmlElementWrapper('fieldset', );
+export const Option = HtmlElementWrapper('option');
+export const Legend = HtmlElementWrapper('legend');
+export const Datalist = HtmlElementWrapper('datalist');
+export const Output = HtmlElementWrapper('output');
+export const Progress = HtmlElementWrapper('progress');
+export const Meter = HtmlElementWrapper('meter');
+
+export const ReadonlyInput = (attributes) => Input({ readonly: true, ...attributes });
+export const HiddenInput = (attributes) => Input({type: 'hidden', ...attributes });
+export const FileInput = (attributes) => Input({ type: 'file', ...attributes });
+export const PasswordInput = (attributes) => Input({ type: 'password', ...attributes });
+export const Checkbox = (attributes) => Input({ type: 'checkbox', ...attributes });
+export const Radio = (attributes) => Input({ type: 'radio', ...attributes });
+
+export const RangeInput = (attributes) => Input({ type: 'range', ...attributes });
+export const ColorInput = (attributes) => Input({ type: 'color', ...attributes });
+export const DateInput = (attributes) => Input({ type: 'date', ...attributes });
+export const TimeInput = (attributes) => Input({ type: 'time', ...attributes });
+export const DateTimeInput = (attributes) => Input({ type: 'datetime-local', ...attributes });
+export const WeekInput = (attributes) => Input({ type: 'week', ...attributes });
+export const MonthInput = (attributes) => Input({ type: 'month', ...attributes });
+export const SearchInput = (attributes) => Input({ type: 'search', ...attributes });
+export const TelInput = (attributes) => Input({ type: 'tel', ...attributes });
+export const UrlInput = (attributes) => Input({ type: 'url', ...attributes });
+export const EmailInput = (attributes) => Input({ type: 'email', ...attributes });
+export const NumberInput = (attributes) => Input({ type: 'number', ...attributes });
+
+
+export const Button = HtmlElementWrapper('button');
+export const SimpleButton = (child, attributes) => Button(child, { type: 'button', ...attributes });
+export const SubmitButton = (child, attributes) => Button(child, { type: 'submit', ...attributes });
+

package/src/elements/html5-semantics.js

@@ -0,0 +1,12 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+export const Main = HtmlElementWrapper('main');
+export const Section = HtmlElementWrapper('section');
+export const Article = HtmlElementWrapper('article');
+export const Aside = HtmlElementWrapper('aside');
+export const Nav = HtmlElementWrapper('nav');
+export const Figure = HtmlElementWrapper('figure');
+export const FigCaption = HtmlElementWrapper('figcaption');
+
+export const Header = HtmlElementWrapper('header');
+export const Footer = HtmlElementWrapper('footer');

package/src/elements/img.js

@@ -0,0 +1,45 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper"
+import Validator from "../utils/validator";
+import NativeDocumentError from "../errors/NativeDocumentError";
+
+export const BaseImage = HtmlElementWrapper('img');
+export const Img = function(src, attributes) {
+    return BaseImage({ src, ...attributes });
+};
+
+/**
+ *
+ * @param {string} src
+ * @param {string|null} defaultImage
+ * @param {Object} attributes
+ * @param {?Function} callback
+ * @returns {Image}
+ */
+export const AsyncImg = function(src, defaultImage, attributes, callback) {
+    const image = Img(defaultImage || src, attributes);
+    const img = new Image();
+    img.onload = () => {
+        Validator.isFunction(callback) && callback(null, image);
+        image.src = src;
+    };
+    img.onerror = () => {
+        Validator.isFunction(callback) && callback(new NativeDocumentError('Image not found'));
+    };
+    if(Validator.isObservable(src)) {
+        src.subscribe(newSrc => {
+            img.src = newSrc;
+        });
+    }
+    img.src = src;
+    return image;
+};
+
+/**
+ *
+ * @param {string} src
+ * @param {Object} attributes
+ * @returns {Image}
+ */
+export const LazyImg = function(src, attributes) {
+    return Img(src, { ...attributes, loading: 'lazy' });
+};

package/src/elements/index.js

@@ -0,0 +1,21 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+export * from './control/for-each';
+export * from './control/show-if';
+export * from './control/switch';
+export * from './content-formatter';
+export * from './description-list';
+export * from './form';
+export * from './html5-semantics';
+export * from './img';
+export * from './interactive';
+export * from './list';
+export * from './medias';
+export * from './meta-data';
+export * from './table';
+
+export const Fragment = HtmlElementWrapper('');
+
+
+
+

package/src/elements/interactive.js

@@ -0,0 +1,7 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+
+export const Details = HtmlElementWrapper('details');
+export const Summary = HtmlElementWrapper('summary');
+export const Dialog = HtmlElementWrapper('dialog');
+export const Menu = HtmlElementWrapper('menu');

package/src/elements/list.js

@@ -0,0 +1,6 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+export const OrderedList = HtmlElementWrapper('ol');
+export const UnorderedList = HtmlElementWrapper('ul');
+export const ListItem = HtmlElementWrapper('li');
+

package/src/elements/medias.js

@@ -0,0 +1,8 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+export const Audio = HtmlElementWrapper('audio');
+export const Video = HtmlElementWrapper('video');
+export const Source = HtmlElementWrapper('source');
+export const Track = HtmlElementWrapper('track');
+export const Canvas = HtmlElementWrapper('canvas');
+export const Svg = HtmlElementWrapper('svg');

package/src/elements/meta-data.js

@@ -0,0 +1,9 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+export const Time = HtmlElementWrapper('time');
+export const Data = HtmlElementWrapper('data');
+export const Address = HtmlElementWrapper('address');
+export const Kbd = HtmlElementWrapper('kbd');
+export const Samp = HtmlElementWrapper('samp');
+export const Var = HtmlElementWrapper('var');
+export const Wbr = HtmlElementWrapper('wbr');

package/src/elements/table.js

@@ -0,0 +1,14 @@
+import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+
+export const Caption = HtmlElementWrapper('caption');
+export const Table = HtmlElementWrapper('table');
+export const THead = HtmlElementWrapper('thead');
+export const TFoot = HtmlElementWrapper('tfoot');
+export const TBody = HtmlElementWrapper('tbody');
+export const Tr = HtmlElementWrapper('tr');
+export const TRow = Tr;
+export const Th = HtmlElementWrapper('th');
+export const THeadCell = Th;
+export const TFootCell = Th;
+export const Td = HtmlElementWrapper('td');
+export const TBodyCell = Td;

package/src/errors/ArgTypesError.js

@@ -0,0 +1,7 @@
+
+
+export default class ArgTypesError extends Error {
+    constructor(message, errors) {
+        super(`${message}\n\n${errors.join("\n")}\n\n`);
+    }
+}

package/src/errors/NativeDocumentError.js

@@ -0,0 +1,8 @@
+export default class NativeDocumentError extends Error {
+    constructor(message, context = {}) {
+        super(message);
+        this.name = 'NativeDocumentError';
+        this.context = context;
+        this.timestamp = new Date().toISOString();
+    }
+}

package/src/errors/RouterError.js

@@ -0,0 +1,9 @@
+
+
+export default class RouterError extends Error {
+    constructor(message, context) {
+        super(message);
+        this.context = context;
+    }
+
+}

package/src/router/Route.js

@@ -0,0 +1,102 @@
+import {trim} from "../utils/helpers.js";
+
+export const RouteParamPatterns = {
+
+};
+
+/**
+ *
+ * @param {string} $path
+ * @param {Function} $component
+ * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object }}$options
+ * @class
+ */
+export function Route($path, $component, $options = {}) {
+
+    $path = '/'+trim($path, '/');
+
+    let $pattern = null;
+    let $name = $options.name || null;
+
+    const $middlewares = $options.middlewares || [];
+    const $shouldRebuild = $options.shouldRebuild || false;
+    const $paramsValidators = $options.with || {};
+
+    const $params = {};
+    const $paramsNames = [];
+
+
+    const paramsExtractor = (description) => {
+        if(!description) return null;
+        const [name, type] = description.split(':');
+
+        let pattern = $paramsValidators[name];
+        if(!pattern && type) {
+            pattern = RouteParamPatterns[type];
+        }
+        if(!pattern) {
+            pattern = '[^/]+';
+        }
+
+        pattern = pattern.replace('(', '(?:');
+
+        return { name, pattern: `(${pattern})` };
+    };
+
+    const getPattern = () => {
+        if($pattern) {
+            return $pattern;
+        }
+
+        const patternDescription = $path.replace(/\{(.*?)}/ig, (block, definition) => {
+            const description = paramsExtractor(definition);
+            if(!description || !description.pattern) return block;
+            $params[description.name] = description.pattern;
+            $paramsNames.push(description.name);
+            return description.pattern;
+        });
+
+        $pattern = new RegExp('^'+patternDescription+'$');
+        return $pattern;
+    };
+
+    this.name = () => $name;
+    this.component = () => $component;
+    this.middlewares = () => $middlewares;
+    this.shouldRebuild = () => $shouldRebuild;
+    this.path = () => $path;
+
+    /**
+     *
+     * @param {string} path
+     */
+    this.match = function(path) {
+        path = '/'+trim(path, '/');
+        const match = getPattern().exec(path);
+        if(!match) return false;
+        const params = {};
+
+        getPattern().exec(path).forEach((value, index) => {
+            if(index < 1) return;
+            const name = $paramsNames[index - 1];
+            params[name] = value;
+        });
+
+        return params;
+    };
+    /**
+     * @param {{params: ?Object, query: ?Object, basePath: ?string}} configs
+     */
+    this.url = function(configs) {
+        const path = $path.replace(/\{(.*?)}/ig, (block, definition) => {
+            const description = paramsExtractor(definition);
+            if(configs.params && configs.params[description.name]) {
+                return configs.params[description.name];
+            }
+            throw new Error(`Missing parameter '${description.name}'`);
+        });
+
+        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

@@ -0,0 +1,52 @@
+import {trim} from "../utils/helpers.js";
+
+export const RouteGroupHelper = {
+    /**
+     *
+     * @param {{suffix: string, options: {middlewares: Function[], name: string}}[]} $groupTree
+     * @param {string} path
+     * @returns {string}
+     */
+    fullPath: ($groupTree, path) => {
+        const fullPath = [];
+        $groupTree.forEach(group => {
+            fullPath.push(trim(group.suffix, '/'));
+        });
+        fullPath.push(trim(path, '/'));
+        return fullPath.join('/');
+    },
+    /**
+     *
+     * @param {{suffix: string, options: {middlewares: Function[], name: string}}[]} $groupTree
+     * @param {Function[]} middlewares
+     * @returns {Function[]}
+     */
+    fullMiddlewares: ($groupTree, middlewares) => {
+        const fullMiddlewares = [];
+        $groupTree.forEach(group => {
+            if(group.options.middlewares) {
+                fullMiddlewares.push(...group.options.middlewares);
+            }
+        });
+        if(middlewares) {
+            fullMiddlewares.push(...middlewares);
+        }
+        return fullMiddlewares;
+    },
+    /**
+     *
+     * @param {{suffix: string, options: {middlewares: Function[], name: string}}[]} $groupTree
+     * @param {string} name
+     * @returns {string}
+     */
+    fullName: ($groupTree, name) => {
+        const fullName = [];
+        $groupTree.forEach(group => {
+            if(group.options?.name) {
+                fullName.push(group.options.name);
+            }
+        });
+        name && fullName.push(name);
+        return fullName.join('.');
+    }
+};

package/src/router/Router.js

@@ -0,0 +1,232 @@
+import {Route} from "./Route.js";
+import Validator from "../utils/validator.js";
+import RouterError from "../errors/RouterError.js";
+import {RouteGroupHelper} from "./RouteGroupHelper.js";
+import {trim} from "../utils/helpers.js";
+import HashRouter from "./modes/HashRouter.js";
+import HistoryRouter from "./modes/HistoryRouter.js";
+import MemoryRouter from "./modes/MemoryRouter.js";
+import DebugManager from "../utils/debug-manager.js";
+import {RouterComponent} from "./RouterComponent.js";
+
+const DEFAULT_ROUTER_NAME = 'default';
+
+/**
+ *
+ * @param {{mode: 'memory'|'history'|'hash'}} $options
+ * @constructor
+ */
+export default function Router($options = {}) {
+
+    /** @type {Route[]} */
+    const $routes = [];
+    /** @type {{[string]: Route}} */
+    const $routesByName = {};
+    const $groupTree = [];
+    const $listeners = [];
+    const $currentState = { route: null, params: null, query: null, path: null, hash: null };
+
+    if($options.mode === 'hash') {
+        HashRouter.apply(this, []);
+    } else if($options.mode === 'history') {
+        HistoryRouter.apply(this, []);
+    } else if($options.mode === 'memory') {
+        MemoryRouter.apply(this, []);
+    } else {
+        throw new RouterError('Invalid router mode '+$options.mode);
+    }
+
+    const trigger = function(request, next) {
+        for(const listener of $listeners) {
+            try {
+                listener(request);
+                next && next(request);
+            } catch (e) {
+                DebugManager.warn('Route Listener', 'Error in listener:', e);
+            }
+        }
+    }
+
+    this.routes = () => [...$routes];
+    this.currentState = () => ({ ...$currentState });
+
+    /**
+     *
+     * @param {string} path
+     * @param {Function} component
+     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object }} options
+     * @returns {this}
+     */
+    this.add = function(path, component, options) {
+        const route = new Route(RouteGroupHelper.fullPath($groupTree, path), component, {
+            ...options,
+            middlewares: RouteGroupHelper.fullMiddlewares($groupTree, options?.middlewares || []),
+            name: options?.name ? RouteGroupHelper.fullName($groupTree, options.name) : null,
+        });
+        $routes.push(route);
+        if(route.name()) {
+            $routesByName[route.name()] = route;
+        }
+        return this;
+    };
+
+    /**
+     *
+     * @param {string} suffix
+     * @param {{ middlewares: Function[], name: string}} options
+     * @param {Function} callback
+     * @returns {this}
+     */
+    this.group = function(suffix, options, callback) {
+        if(!Validator.isFunction(callback)) {
+            throw new RouterError('Callback must be a function');
+        }
+        $groupTree.push({suffix, options});
+        callback();
+        $groupTree.pop();
+        return this;
+    };
+
+    /**
+     *
+     * @param {string} name
+     * @param {Object}params
+     * @param {Object} query
+     * @returns {*}
+     */
+    this.generateUrl = function(name, params = {}, query = {}) {
+        const route = $routesByName[name];
+        if(!route) {
+            throw new RouterError(`Route not found for name: ${name}`);
+        }
+        return route.url({ params, query });
+    };
+
+    /**
+     *
+     * @param {string|{name:string,params?:Object, query?:Object }} target
+     * @returns {{route:Route, params:Object, query:Object, path:string}}
+     */
+    this.resolve = function(target) {
+        if(Validator.isJson(target)) {
+            const route = $routesByName[target.name];
+            if(!route) {
+                throw new RouterError(`Route not found for name: ${target.name}`);
+            }
+            return {
+                route,
+                params: target.params,
+                query: target.query,
+                path: route.url({ ...target })
+            };
+        }
+
+        const [urlPath, urlQuery] = target.split('?');
+        const path = '/'+trim(urlPath, '/');
+        let routeFound = null, params;
+
+        for(const route of $routes) {
+            params = route.match(path);
+            if(params) {
+                routeFound = route;
+                break;
+            }
+        }
+        if(!routeFound) {
+            throw new RouterError(`Route not found for url: ${urlPath}`);
+        }
+        const queryParams = {};
+        if(urlQuery) {
+            const queries = new URLSearchParams(urlQuery).entries();
+            for (const [key, value] of queries) {
+                queryParams[key] = value;
+            }
+        }
+
+        return { route: routeFound, params, query: queryParams, path: target };
+    };
+
+    /**
+     *
+     * @param {Function} listener
+     * @returns {(function(): void)|*}
+     */
+    this.subscribe = function(listener) {
+        if(!Validator.isFunction(listener)) {
+            throw new RouterError('Listener must be a function');
+        }
+        $listeners.push(listener);
+        return () => {
+            $listeners.splice($listeners.indexOf(listener), 1);
+        };
+    };
+
+    /**
+     *
+     * @param {Route} route
+     * @param {Object} params
+     * @param {Object} query
+     * @param {string} path
+     */
+    this.handleRouteChange = function(route, params, query, path) {
+        $currentState.route = route;
+        $currentState.params = params;
+        $currentState.query = query;
+        $currentState.path = path;
+
+        console.log($currentState.query)
+        const middlewares = [...route.middlewares(), trigger];
+        let currentIndex = 0;
+        const request = { ...$currentState };
+
+        const next = (editableRequest) => {
+            currentIndex++;
+            if(currentIndex >= middlewares.length) {
+                return;
+            }
+            return middlewares[currentIndex](editableRequest || request, next);
+        };
+        return middlewares[currentIndex](request, next);
+    };
+
+}
+
+Router.routers = {};
+
+/**
+ *
+ * @param {{mode: 'memory'|'history'|'hash', name:string, entry: string}} options
+ * @param {Function} callback
+ * @param {Element} container
+ */
+Router.create = function(options, callback) {
+    if(!Validator.isFunction(callback)) {
+        DebugManager.error('Router', 'Callback must be a function', e);
+        throw new RouterError('Callback must be a function');
+    }
+    const router = new Router(options);
+    Router.routers[options.name || DEFAULT_ROUTER_NAME] = router;
+    callback(router);
+
+    router.init(options.entry);
+
+    return {
+        mount: (container) => {
+            if(Validator.isString(container)) {
+                const mountContainer = document.querySelector(container);
+                if(!mountContainer) {
+                    throw new RouterError(`Container not found for selector: ${container}`);
+                }
+                container = mountContainer;
+            } else if(!Validator.isElement(container)) {
+                throw new RouterError('Container must be a string or an Element');
+            }
+
+            RouterComponent(router, container);
+        }
+    };
+};
+
+Router.get = function(name) {
+    return Router.routers[name || DEFAULT_ROUTER_NAME];
+};

package/src/router/RouterComponent.js

@@ -0,0 +1,37 @@
+/**
+ *
+ * @param {Router} router
+ * @param {?HTMLElement} container
+ */
+export function RouterComponent(router, container) {
+
+    const $cache = new Map();
+
+    const updateContainer = function(node) {
+        container.innerHTML = '';
+        container.appendChild(node);
+    };
+
+    const handleCurrentRouterState = function(state) {
+        if(!state.route) {
+            return;
+        }
+        const { route, params, query, path } = state;
+        if($cache.has(path)) {
+            const cacheNode = $cache.get(path);
+            console.log(cacheNode);
+            updateContainer(cacheNode);
+            return;
+        }
+        const Component = route.component()
+        console.log({ params, query })
+        const node = Component({ params, query });
+        $cache.set(path, node);
+        updateContainer(node);
+    };
+
+    router.subscribe(handleCurrentRouterState);
+
+    handleCurrentRouterState(router.currentState());
+    return container;
+}

package/src/router/link.js

@@ -0,0 +1,27 @@
+import Validator from "../utils/validator.js";
+import {Link as NativeLink} from "../../elements.js";
+import Router from "./Router.js";
+import RouterError from "../errors/RouterError.js";
+
+
+export function Link(attributes, children){
+    const target = attributes.to || attributes.href;
+    if(Validator.isString(target)) {
+        const router = Router.get();
+        return NativeLink({ ...attributes, href: target}, children).nd.on.prevent.click(() => {
+            router.push(target);
+        });
+    }
+    const router = Router.get(target.router);
+    if(!router) {
+        throw new RouterError('Router not found "'+target.router+'" for link "'+target.name+'"');
+    }
+    const url = router.generateUrl(target.name, target.params, target.query);
+    return NativeLink({ ...attributes, href: url }, children).nd.on.prevent.click(() => {
+        router.push(url);
+    });
+}
+
+Link.blank = function(attributes, children){
+    return NativeLink({ ...attributes, target: '_blank'}, children);
+};