proteum 1.0.2 → 2.0.0

package/client/services/router/response/index.tsx

@@ -2,66 +2,84 @@
 - DEPENDANCES
 ----------------------------------*/
 
-// Libs 
-import type ServerRouter from '@server/services/router';
+// Libs
+import type { TAnyRouter } from '@server/services/router';
 import type ServerResponse from '@server/services/router/response';
 
 import type { TAnyRoute, TErrorRoute } from '@common/router';
 import BaseResponse, { TResponseData } from '@common/router/response';
 
 import type ClientApplication from '@client/app';
-import type { default as ClientRouter } from '@client/services/router'
-import type ClientResponse from '@client/services/router/response'
-import ClientRequest from '@client/services/router/request'
-import ClientPage from '@client/services/router/response/page'
+import type { default as ClientRouter } from '@client/services/router';
+import type ClientResponse from '@client/services/router/response';
+import ClientRequest from '@client/services/router/request';
+import ClientPage from '@client/services/router/response/page';
 import { history } from '@client/services/router/request/history';
+import createControllers from '@/common/.generated/controllers';
+import type { TControllers } from '@/common/.generated/controllers';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-export type TPageResponse<TRouter extends ClientRouter> = (
-    ClientResponse<TRouter, ClientPage>
-    |
-    ServerResponse<ServerRouter, ClientPage>
-);
+export type TPageResponse<TRouter extends ClientRouter<any, any>> =
+    | ClientResponse<TRouter, ClientPage<TRouter>>
+    | ServerResponse<TAnyRouter>;
+
+type TRouterContextBase<
+    TRouter extends ClientRouter<any, any> = ClientRouter<any, any>,
+    TApplication extends ClientApplication = ClientApplication,
+> = {
+    app: TApplication;
+    request: ClientRequest<TRouter>;
+    route: TAnyRoute<TRouterContext<TRouter, TApplication>>;
+    api: ClientRequest<TRouter>['api'];
+    Router: TRouter;
+    page: ClientPage<TRouter>;
+    data: TObjetDonnees;
+};
+
+type TContextOwnState<TValue> = {
+    [TKey in keyof TValue as TValue[TKey] extends (...args: any[]) => any ? never : TKey]: TValue[TKey];
+};
+
+type TRouterRuntimeContext<
+    TRouter extends ClientRouter<any, any> = ClientRouter<any, any>,
+    TApplication extends ClientApplication = ClientApplication,
+> = TRouterContextBase<TRouter, TApplication> &
+    TContextOwnState<TApplication> &
+    TControllers;
+
+const createRuntimeContextBase = <
+    TRouter extends ClientRouter<any, any> = ClientRouter<any, any>,
+    TApplication extends ClientApplication = ClientApplication,
+>(
+    app: TApplication,
+    controllers: TControllers,
+    fields: TRouterContextBase<TRouter, TApplication>,
+): TRouterRuntimeContext<TRouter, TApplication> => Object.assign({}, app, controllers, fields);
 
 export type TRouterContext<
-    TRouter extends ClientRouter = ClientRouter, 
-    TApplication extends ClientApplication = ClientApplication
-> = (
-    // ClientPage context
-    {
-        app: TApplication,
-        request: ClientRequest<TRouter>,
-        route: TAnyRoute<TRouterContext>,
-        api: ClientRequest<TRouter>["api"],
-        page: ClientPage<TRouter>,
-        data: TObjetDonnees
-    }
-    // Expose client application services (api, socket, ...)
-    //TRouter["app"] 
-    & TApplication
-    & ReturnType<TRouter["config"]["context"]>
-)
+    TRouter extends ClientRouter<any, any> = ClientRouter<any, any>,
+    TApplication extends ClientApplication = ClientApplication,
+> = TRouterRuntimeContext<TRouter, TApplication> &
+    ReturnType<TRouter['config']['context']> & { context: TRouterContext<TRouter, TApplication> };
 
 /*----------------------------------
 - ROUTER
 ----------------------------------*/
 export default class ClientPageResponse<
     TRouter extends ClientRouter,
-    TData extends TResponseData = TResponseData
+    TData extends TResponseData = TResponseData,
 > extends BaseResponse<TData> {
-
-    public context: TRouterContext<TRouter, TRouter["app"]>;
+    public context: TRouterContext<TRouter, TRouter['app']>;
 
     public constructor(
         public request: ClientRequest<TRouter>,
-        public route: TAnyRoute | TErrorRoute,
+        public route: TAnyRoute<TRouterContext<TRouter, TRouter['app']>>,
 
         public app = request.app,
     ) {
-
         super(request);
 
         request.response = this;
@@ -70,54 +88,43 @@ export default class ClientPageResponse<
         this.context = this.createContext();
     }
 
-    private createContext(): TRouterContext<TRouter, TRouter["app"]> {
-
-        const basicContext: TRouterContext<TRouter, TRouter["app"]> = {
-
-            // App services (TODO: expose only services)
-            ...this.request.app,
-
+    private createContext(): TRouterContext<TRouter, TRouter['app']> {
+        const basicContext = createRuntimeContextBase(this.request.app, createControllers(this.request.api), {
             // Router context
             app: this.app,
             request: this.request,
             route: this.route,
             api: this.request.api,
+            Router: this.request.router,
             // Will be assigned when the controller will be runned
-            page: undefined as unknown as ClientPage<TRouter>, 
+            page: undefined!,
             data: {},
-        }
-
-        const newContext: TRouterContext<TRouter, TRouter["app"]> = {
-            ...basicContext,
-            // Custom context
-            ...this.request.router.config.context( basicContext, this.request.router )
-        }
+        });
+        const customContext = this.request.router.config.context(basicContext, this.request.router);
 
+        const newContext: TRouterContext<TRouter, TRouter['app']> = Object.create(Object.prototype);
+        Object.assign(newContext, basicContext, customContext);
         newContext.context = newContext;
 
         // Update context object if already exists
         // NOTE: we don't create a nex instance of context because we don't want to rereder the full page (inc layout) to update the context given by thr react context provider
         const existingContext = this.request.router.context;
         if (existingContext === undefined) {
+            this.request.router.context = newContext;
+        } else {
+            Object.assign(existingContext, newContext);
+        }
 
-            this.request.router.context = newContext
-
-        } else for(const key in newContext)
-            existingContext[ key ] = newContext[ key ];
-
-        return newContext
+        return newContext;
     }
 
-    public async runController( additionnalData: {} = {} ): Promise<ClientPage> {
-
+    public async runController(additionnalData: {} = {}): Promise<ClientPage<TRouter>> {
         // Run contoller
         const result = this.route.controller(this.context);
 
         // Default data type for `return <raw data>`
-        if (result instanceof ClientPage)
-            await result.preRender(additionnalData);
-        else
-            throw new Error(`Unsupported response format: ${result.constructor?.name}`);
+        if (result instanceof ClientPage) await result.preRender(additionnalData);
+        else throw new Error(`Unsupported response format: ${result.constructor?.name}`);
 
         return result;
     }
@@ -125,4 +132,4 @@ export default class ClientPageResponse<
     public redirect(url: string) {
         history?.replace(url);
     }
-}
+}

package/client/services/router/response/page.ts

@@ -6,81 +6,77 @@
 import type { ComponentChild } from 'preact';
 
 // Core
-import type { TClientOrServerContextForPage, Layout, TRoute, TErrorRoute } from '@common/router';
-import PageResponse, { TFrontRenderer } from "@common/router/response/page";
+import type { Layout, TErrorRoute, TRoute } from '@common/router';
+import PageResponse, { TFrontRenderer } from '@common/router/response/page';
+import { isClientRequest } from '../request';
 
 // Specific
 import type ClientRouter from '..';
+import type { TRouterContext } from '../response';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-
+type TClientPageRouteLike<TRouter extends ClientRouter<any, any>> =
+    | TRoute<TRouterContext<TRouter, TRouter['app']>>
+    | TErrorRoute<TRouterContext<TRouter, TRouter['app']>>;
 
 /*----------------------------------
 - CLASS
 ----------------------------------*/
 
-export default class ClientPage<TRouter = ClientRouter> extends PageResponse<TRouter> {
-
-    public scrollToId: string;
+export default class ClientPage<TRouter extends ClientRouter<any, any> = ClientRouter<any, any>> extends PageResponse<
+    TRouter,
+    TClientPageRouteLike<TRouter>,
+    TRouterContext<TRouter, TRouter['app']>
+> {
+    public scrollToId?: string;
 
     public constructor(
-        public route: TRoute | TErrorRoute,
+        public route: TClientPageRouteLike<TRouter>,
         public component: TFrontRenderer,
-        public context: TClientOrServerContextForPage,
-        public layout?: Layout
+        public context: TRouterContext<TRouter, TRouter['app']>,
+        public layout?: Layout,
     ) {
-
         super(route, component, context);
 
         this.bodyId = context.route.options.bodyId;
-        this.scrollToId = context.request.hash;
-        
+        this.scrollToId = isClientRequest(context.request) ? context.request.hash : undefined;
     }
-    
-    public async preRender( data?: TObjetDonnees ) {
 
+    public async preRender(data?: TObjetDonnees) {
         // Add the page to the context
         this.context.page = this;
 
         // Data succesfully loaded
-        this.context.data = this.data = data || await this.fetchData();
+        this.context.data = this.data = data || (await this.fetchData());
 
         return this;
     }
 
-   /*----------------------------------
+    /*----------------------------------
     - ACTIONS
     ----------------------------------*/
     // Should be called AFTER rendering the page
     public updateClient() {
-
-        document.body.id = this.bodyId || this.id;
+        document.body.id = this.bodyId || this.chunkId || '';
         document.title = this.title || APP_NAME;
         document.body.className = [...this.bodyClass].join(' ');
-        
     }
 
-    public setAllData( callback: (data: {[k: string]: any}) => void) { 
-        console.warn(`page.setAllData not yet attached to the page Reatc component.`); 
+    public setAllData(callback: (data: { [k: string]: any }) => void) {
+        console.warn(`page.setAllData not yet attached to the page Reatc component.`);
     }
-    public setData( key: string, value: ((value: any) => void) | any ) {
-        this.setAllData(old => ({ 
-            ...old, 
-            [key]: typeof value === 'function' ? value(old[key]) : value 
-        }));
+    public setData(key: string, value: ((value: any) => void) | any) {
+        this.setAllData((old) => ({ ...old, [key]: typeof value === 'function' ? value(old[key]) : value }));
     }
 
     public setLoading(state: boolean) {
-
         if (state === true) {
-            if (!document.body.classList.contains("loading"))
-                document.body.classList.add("loading");
+            if (!document.body.classList.contains('loading')) document.body.classList.add('loading');
         } else {
-            document.body.classList.remove("loading");
+            document.body.classList.remove('loading');
         }
-
     }
-}
+}

package/client/utils/dom.ts

@@ -1,14 +1,8 @@
-import type { RefObject } from 'preact';
 import { history } from '@client/services/router/request/history';
 
 type ElementOrSelector = HTMLElement | string;
-export const deepContains = (
-    parents: ElementOrSelector | ElementOrSelector[],
-    children: HTMLElement
-): boolean => {
-
-    if (!Array.isArray(parents))
-        parents = [parents];
+export const deepContains = (parents: ElementOrSelector | ElementOrSelector[], children: HTMLElement): boolean => {
+    if (!Array.isArray(parents)) parents = [parents];
 
     let node: HTMLElement | null = children;
     while (node) {
@@ -16,8 +10,7 @@ export const deepContains = (
             //console.log('Checking if', parent, 'matches with', node);
             if (
                 // HTML Element
-                node === parent 
-                || 
+                node === parent ||
                 // CSS Selector
                 (typeof parent === 'string' && node.matches && node.matches(parent))
             )
@@ -28,50 +21,41 @@ export const deepContains = (
     }
 
     return false;
-}
+};
 
 // Usage: React.useEffect( blurable([ <element>, <function> ]) );
 export const blurable = (...args: [HTMLElement, Function][]) => {
-
-    if (!history)
-        return;
+    if (!history) return;
 
     const blur = (e: MouseEvent) => {
-
-        if (e.target === null)
-            return;
+        if (!(e.target instanceof HTMLElement)) return;
 
         for (const [refElement, masquer] of args) {
-
             //console.log("refElement", refElement, e.target?.matches);
 
-            if (!deepContains([refElement], e.target))
-                masquer();
-                
+            if (!deepContains([refElement], e.target)) masquer();
         }
-    }
+    };
 
     window.addEventListener('mousedown', blur);
 
     const unlisten = history.listen(() => {
         for (const [, masquer] of args) {
-
             masquer();
-
         }
-    })
+    });
 
     return () => {
         window.removeEventListener('mousedown', blur);
         unlisten();
-    }
-}
-
-export const focusContent = ( container: HTMLElement ) => {
+    };
+};
 
-    const toFocus = container.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement>(
-        'input, textarea, button.btn.primary, footer > button.btn'
-    ) || container;  // Is it useful ? Creating unwanted scroll issue on showing popover
+export const focusContent = (container: HTMLElement) => {
+    const toFocus =
+        container.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement>(
+            'input, textarea, button.btn.primary, footer > button.btn',
+        ) || container; // Is it useful ? Creating unwanted scroll issue on showing popover
 
     toFocus?.focus();
-}
+};

package/common/app/index.ts

@@ -1,9 +1,9 @@
 import type ClientApplication from '@client/app';
-import type ServerApplication from '@server/app';
+import type ServerApplication from '@server/app/index';
 
 export type ClientOrServerApplication = ClientApplication | ServerApplication;
 
 export type TAppArrowFunction<
     TRegisteredData = void,
-    TApplication extends ClientOrServerApplication = ClientOrServerApplication
-> = (app: TApplication) => TRegisteredData
+    TApplication extends ClientOrServerApplication = ClientOrServerApplication,
+> = (app: TApplication) => TRegisteredData;

package/common/data/chaines/index.ts

@@ -11,44 +11,43 @@ export const nameToID = (name: string) => name.toLowerCase().replace(/[^a-z1-9]/
 
 export const ucfirst = (chaine: string): string => {
     return chaine.charAt(0).toUpperCase() + chaine.slice(1);
-} 
+};
 
 export const linkify = (texte: string): string => {
     const regex = /((http|https)\:\/\/([a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?))/gi;
     return texte.replace(regex, '<a href="$1" target="_blank">$3</a>');
-}
+};
 
 export const trim = (s: string, c: string) => {
-    if (c === "]") c = "\\]";
-    if (c === "\\") c = "\\\\";
-    return s.replace(new RegExp(
-        "^[" + c + "]+|[" + c + "]+$", "g"
-    ), "");
-}  
+    if (c === ']') c = '\\]';
+    if (c === '\\') c = '\\\\';
+    return s.replace(new RegExp('^[' + c + ']+|[' + c + ']+$', 'g'), '');
+};
 
-export const trimLeft = (chaine: string, toTrim: string) => chaine.startsWith(toTrim)
-    ? chaine.substring(toTrim.length) : chaine;
+export const trimLeft = (chaine: string, toTrim: string) =>
+    chaine.startsWith(toTrim) ? chaine.substring(toTrim.length) : chaine;
 
-export const trimRight = (chaine: string, toTrim: string) => chaine.endsWith(toTrim)
-    ? chaine.substring(0, -toTrim.length) : chaine;
+export const trimRight = (chaine: string, toTrim: string) =>
+    chaine.endsWith(toTrim) ? chaine.substring(0, -toTrim.length) : chaine;
 
-export const escapeRegExp = (string: string) =>
-    string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+export const escapeRegExp = (string: string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 
 /*----------------------------------
 - EXTRACT
 ----------------------------------*/
-export const getKeywords = (str: string, delimiter: string = ' ') => str
+export const getKeywords = (str: string, delimiter: string = ' ') =>
+    str
 
-    // Minuscule
-    .toLowerCase()
+        // Minuscule
+        .toLowerCase()
 
-    // condenseWhitespace ( https://github.com/sindresorhus/condense-whitespace/blob/main/index.js )
-    .trim().replace(/\s{2,}/gu, ' ')
+        // condenseWhitespace ( https://github.com/sindresorhus/condense-whitespace/blob/main/index.js )
+        .trim()
+        .replace(/\s{2,}/g, ' ')
 
-    // Ne garde que les caractères alĥanumériques, ainsi que .
-    // https://stackoverflow.com/questions/20690499/concrete-javascript-regex-for-accented-characters-diacritics
-    .replace(/[^\.0-9A-Za-zÀ-ÖØ-öø-ÿ]/ig, ' ')
+        // Ne garde que les caractères alĥanumériques, ainsi que .
+        // https://stackoverflow.com/questions/20690499/concrete-javascript-regex-for-accented-characters-diacritics
+        .replace(/[^\.0-9A-Za-zÀ-ÖØ-öø-ÿ]/gi, ' ');
 
 // TODO: remove stopwords: https://github.com/fergiemcdowall/stopword
-export const getSlug = (str: string) => getKeywords(str, '-')
+export const getSlug = (str: string) => getKeywords(str, '-');

package/common/data/dates.ts

@@ -49,80 +49,59 @@ console.log(formatRelativeTime(date1, date2)); // Output: "in 1 year"
 
 */
 
-export type TDateInfo = {
-    isPast: boolean,
-    delta: number,
-    text: string
-}
+export type TDateInfo = { isPast: boolean; delta: number; text: string };
 
 export const timeSince = (date: Date | number | string): TDateInfo | null => {
-
-    if (date === undefined)
-        return null;
+    if (date === undefined) return null;
 
     // Timeago ne prend que des dates et des timestamp
     if (typeof date === 'string') {
         date = Date.parse(date);
-        if (isNaN(date))
-            return null;
+        if (isNaN(date)) return null;
     }
 
     // Get metas
-    const now = Date.now()
+    const now = Date.now();
     const timestamp = date instanceof Date ? date.getTime() : date;
-    const deltaSeconds = Math.abs( Math.round( (now - timestamp) / 1000 ));
+    const deltaSeconds = Math.abs(Math.round((now - timestamp) / 1000));
     const isPast = now > timestamp;
 
     return {
-        text: date,//timeAgo.format(date),
+        text: String(date), //timeAgo.format(date),
         isPast,
-        delta: deltaSeconds
+        delta: deltaSeconds,
     };
-}
+};
 
 export const tempsRelatif = (time: number, nbChiffresInit?: number) => {
-
     const nbChiffres = nbChiffresInit === undefined ? 2 : nbChiffresInit;
 
     const jours = Math.floor(time / (60 * 60 * 24));
 
     if (jours >= 1) {
-
-        return jours + (jours === 1 ? ' day' : ' days')
-
+        return jours + (jours === 1 ? ' day' : ' days');
     } else {
-
         const heures = Math.floor((time % (60 * 60 * 24)) / (60 * 60));
-        const minutes = Math.floor((time % (60 * 60)) / (60));
-        const secondes = Math.floor(time % (60));
-
-        return [heures, minutes, secondes].filter(
-            (nb: number | false, i: number) => nb > 0 || 4 - i <= nbChiffres
-        ).map(
-            (nb: number) => nb < 10 ? '0' + nb : nb
-        ).join(':');
+        const minutes = Math.floor((time % (60 * 60)) / 60);
+        const secondes = Math.floor(time % 60);
+
+        return [heures, minutes, secondes]
+            .filter((nb, i) => nb > 0 || 4 - i <= nbChiffres)
+            .map((nb) => (nb < 10 ? '0' + nb : nb))
+            .join(':');
     }
-}
+};
 
 export const chaineDate = (chaine: string): boolean => {
     // 2019-09-09T11:28:21.778Z
     const regexDate = /[0-9]{4}\-[0-9]{2}\-[0-9]{2}T[0-9]{2}\:[0-9]{2}\:[0-9]{2}\.[0-9]{3}Z/;
-    return regexDate.test( chaine );
-}
-
-
-
-
+    return regexDate.test(chaine);
+};
 
 // Based on https://github.com/sebastiansandqvist/s-ago/blob/master/index.ts
-type TUnit = {
-    max: number,
-    divisor?: number,
-    past: string,
-    future: string
-}
+type TUnit = { max: number; divisor?: number; past: string; future: string };
 
-const units: {[name: string]: TUnit} = {
+const units: { [name: string]: TUnit } = {
     seconds: { max: 60000, past: 'just now', future: 'now' },
     minute: { max: 2760000, divisor: 60000, past: 'a minute ago', future: 'in a minute' }, // max: 46 minutes
     hour: { max: 72000000, divisor: 3600000, past: 'an hour ago', future: 'in an hour' }, // max: 20 hours
@@ -132,13 +111,10 @@ const units: {[name: string]: TUnit} = {
     year: { max: Infinity, divisor: 31536000000, past: 'last year', future: 'in a year' },
 };
 
-export function ago(date: Date | string, { min, max }: { min?: string, max?: string } = {}): string {
-
-    if (!date)
-        return '-';
+export function ago(date: Date | string, { min, max }: { min?: string; max?: string } = {}): string {
+    if (!date) return '-';
 
-    if (typeof date === 'string')
-        date = new Date(date);
+    if (typeof date === 'string') date = new Date(date);
 
     const minUnit = min ? units[min].max : 0;
     const diff = Date.now() - date.getTime();
@@ -148,32 +124,21 @@ export function ago(date: Date | string, { min, max }: { min?: string, max?: str
     let unit!: TUnit;
     for (unitName in units) {
         unit = units[unitName];
-        if (unit.max >= minUnit && (delta < unit.max || unitName === max))
-            break;
+        if (unit.max >= minUnit && (delta < unit.max || unitName === max)) break;
     }
 
-    if (unit.divisor === undefined)
-        return diff < 0 ? unit.future : unit.past;
+    if (unit.divisor === undefined) return diff < 0 ? unit.future : unit.past;
 
     var val = Math.round(delta / unit.divisor);
-    if (diff < 0) 
-        return val <= 1 ? unit.future : 'in ' + val + ' ' + unitName + 's';
-    else
-        return val <= 1 ? unit.past : val + ' ' + unitName + 's ago';
-
-};
+    if (diff < 0) return val <= 1 ? unit.future : 'in ' + val + ' ' + unitName + 's';
+    else return val <= 1 ? unit.past : val + ' ' + unitName + 's ago';
+}
 
 export const daysAgo = (date: string) => {
+    const days = dayjs().diff(date, 'days');
 
-    const days = dayjs().diff(date, 'days')
-
-    if (days === 0)
-        return 'Today';
-    else if (days === 1)
-        return 'Yesterday';
-    else if (days <= 7)
-        return days + ' days ago'
-    else 
-        return dayjs(date).format('DD/MM');
-
-}
+    if (days === 0) return 'Today';
+    else if (days === 1) return 'Yesterday';
+    else if (days <= 7) return days + ' days ago';
+    else return dayjs(date).format('DD/MM');
+};