5htp-core 0.2.0 → 0.2.1-1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
-	"description": "Convenient Full Stack TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.0",
+	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
+	"version": "0.2.1-1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -84,6 +84,6 @@
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7",
-		"babel-plugin-glob-import": "^0.0.3"
+		"babel-plugin-glob-import": "^0.0.6-2"
 	}
 }

package/src/client/app/component.tsx

@@ -14,9 +14,6 @@ import DialogManager from '@client/components/Dialog/Manager'
 import Router from '@client/services/router/components/router';
 import type { TClientOrServerContext } from '@common/router';
 
-// Resources
-import "@client/assets/css/core.less";
-
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/

package/src/client/assets/css/components.less

@@ -0,0 +1,52 @@
+// Text
+@import './text/text.less';
+@import './text/icons.less';
+@import './text/icons.less';
+@import './text/titres.less';
+
+// Components
+@import './components/input.less';
+@import './components/button.less';
+@import './components/lists.less';
+@import './components/card.less';
+@import './components/logo.less';
+@import './components/table.less';
+@import './components/other.less';
+@import '@client/components/chart/chart.less';
+@import '@client/components/data/progressbar/index.less';
+
+// Les classes utilitaires override les classes de composant
+@import './utils/borders.less';
+@import './utils/layouts.less';
+
+.white-card() {
+    background: white;
+    box-shadow: 0 3px 2px fade(#000, 10%);
+    border: solid 1px fade(#000, 10%);
+    border-radius: @radius;
+}
+
+.card,
+.input.text,
+.btn,
+.table,
+i.solid {
+
+    .build-theme-bg( #fff, #8E8E8E);
+
+    &:not(.bg) {
+        .white-card();
+    }
+
+    .bg & {
+        box-shadow: none;
+        border: none;
+    }
+}
+
+//.card.clickable:hover,
+.btn:hover,
+.input.text.focus {
+    z-index: 5;
+    box-shadow: 0 10px 50px fade(#000, 15%);
+}

package/src/client/assets/css/core.less

@@ -1,35 +1,14 @@
+// Utils
+@import './utils/medias.less';
+@import './utils/sizing.less';
+@import './utils/spacing.less';
+@import (reference) "./theme.less";
+
+// Fonts
 @import '../fonts/Inter/index.less';
 @import '../fonts/Rubik/index.less';
 @import '../fonts/Lato/index.less';
 
-@import './text/text.less';
-@import './text/icons.less';
-@import './text/icons.less';
-@import './text/titres.less';
-
-@import './components/components.less';
-@import './components/input.less';
-@import './components/button.less';
-@import './components/lists.less';
-@import './components/card.less';
-@import './components/logo.less';
-@import './components/table.less';
-@import './components/other.less';
-
-// Les classes utilitaires override les classes de composant
-@import './borders.less';
-@import './spacing.less';
-@import './layouts.less';
-
-@import './medias.less';
-@import './sizing.less';
-
-@import '@client/components/chart/chart.less';
-@import '@client/components/data/progressbar/index.less';
-
-@import (reference) "./theme.less";
-@import "~@/client/assets/theme.less";
-
 // Apply the theme class
 .bg {
     background: var(--cBg);

package/src/client/assets/css/theme.less

@@ -17,7 +17,7 @@
     // Background
     // TODO: Nettoyer
     @bg2: darken(@bg, 8%);
-    @bgDark: darken(@bg, 5%);
+    @bgDark: darken(@bg, 7%);
     @bgDarkPlus: darken(@bg, 10%);
     --cBg: @bg; 
     --cBg2: @bg2;

package/src/client/assets/css/{medias.less → utils/medias.less}

@@ -1,4 +1,3 @@
-@import (reference) "~@/client/assets/theme.less";
 
 img.img,
 .bg.img {

package/src/client/components/Card/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import type { ComponentChild } from 'preact';
 
 // Core components
-import Button from '@client/components/button';
+import { Logo } from '@client/components';
 import { Link } from '@client/services/router';
 
 // Resources
@@ -28,6 +28,7 @@ export type Props = {
     link?: string,
     cover?: {
         color?: string,
+        image?: string,
         title?: string,
         logo?: ComponentChild
     },
@@ -49,10 +50,15 @@ export default ({ title, link, cover, metas, class: className = '' }: Props) =>
     
             {cover && (
                 <header class="bg img row al-left cover pdb-1" style={{
-                    backgroundColor: cover.color
+                    backgroundColor: cover.color,
+                    backgroundImage: cover.image
+                        ? 'url(' + cover.image + ')'
+                        : undefined
                 }}>
         
-                    {cover?.logo}
+                    {typeof cover.logo === 'string' 
+                        ? <Logo src={cover.logo} size="xl" /> 
+                        : cover.logo}
         
                     {cover.title && (
                         <strong>
@@ -72,9 +78,9 @@ export default ({ title, link, cover, metas, class: className = '' }: Props) =>
             )}
     
             {metas && (
-                <ul class="row fill">
+                <ul class="row fill al-top">
                     {metas.map(({ label, value, class: className }) => (
-                        <li class={"col al-left sp-05"}>
+                        <li class={"col al-left txt-left sp-05"}>
                             {label}
                             <strong class={className}>{value}</strong>
                         </li>

package/src/client/components/Dialog/Manager.tsx

@@ -163,9 +163,9 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
         setToasts: undefined as unknown as DialogActions["setToasts"],
 
         confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No' = 'No') => show<boolean>(({ close }) => (
-            <div class="col">
+            <div class="card col">
                 <header>
-                    <h1>{title}</h1>
+                    <h2>{title}</h2>
                 </header>
                 {typeof content === 'string' ? <p>{content}</p> : content}
                 <footer class="row fill">
@@ -181,7 +181,7 @@ export const createDialog = (app: Application, isToast: boolean): DialogActions
             </div>
         )),
 
-        loading: (title: string) => app.loadIndicator = show({
+        loading: (title: string) => app.loading  = show({
             title: title,
             type: 'loading'
         }),

package/src/client/components/Dialog/index.less

@@ -1,5 +1,3 @@
-@import (reference) "~@/client/assets/theme.less";
-
 @toast-zindex: 999;
 
 #dialog {
@@ -89,10 +87,10 @@
         border-radius: @radius;
 
         // Desktop = vertically center the modal
-        /*@media (min-width: @responsive1) {
+        @media (min-width: 900px) {
             justify-content: center;
             padding: @spacing;
-        }*/
+        }
 
         // Pour les animations (ex: conffetis
         > canvas {

package/src/client/components/Row/index.less

@@ -1,5 +1,3 @@
-@import (reference) "~@/client/assets/theme.less";
-
 @hideeWidth: 10em;
 
 .scrollable-row {

package/src/client/components/Table/index.tsx

@@ -1,3 +1,4 @@
+
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
@@ -22,7 +23,7 @@ export type Props<TRow> = {
     columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
 
     setData?: (rows: TRow[]) => void,
-    vide?: ComponentChild,
+    empty?: ComponentChild,
     className?: string,
 
     actions?: TAction<TRow>[]
@@ -39,7 +40,7 @@ export type TColumn = {
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
-    data: rows, setData, vide ,
+    data: rows, setData, empty ,
     columns, actions, ...props
 }: Props<TRow>) {
 

package/src/client/components/containers/champs.less

@@ -1,5 +1,3 @@
-@import '~@/general/client/assets/css/vars.less';
-
 @plugin "~@client/components/_base/plugin-less.js";
 
 /*----------------------------------

package/src/client/components/index.ts

@@ -5,4 +5,19 @@ export { default as Table } from './Table';
 export { default as Select } from './Select';
 export { default as Amount } from './Amount';
 export { default as Logo } from './Logo';
-export { default as Input } from './input';
+
+export { default as Input } from './input';
+export { default as Textarea } from './input/Textarea';
+export { default as Number } from './input/Number';
+export { default as Slider } from './input/Slider';
+export { default as Upload } from './input/Upload';
+export { default as Radio } from './input/Radio';
+
+// TOD: fix popover component
+//export { default as Date } from './input/Date';
+//export { default as Periode } from './input/Periode';
+
+// TODO: adapt
+//export { default as Couleur } from './input/Couleur';
+//export { default as Code } from './input/Code';
+//export { default as Rte } from './input/Rte';

package/src/client/components/input/BaseV2/index.less

@@ -1,5 +1,3 @@
-@import (reference) '~@/client/assets/theme.less';
-
 @hInput: @sizeComponent;
 
 // TODO: Adapter textarea à input/basev2

package/src/client/components/input/Date/index.less

@@ -1,5 +1,3 @@
-@import (reference) '~@/general/client/assets/css/vars.less';
-
 .champ.periode {
 
     display: flex;

package/src/client/components/input/Periode/index.less

@@ -1,5 +1,3 @@
-@import (reference) '~@/general/client/assets/css/vars.less';
-
 .champ.periode {
 
     display: flex;

package/src/client/components/input/Radio/index.less

@@ -1,5 +1,3 @@
-@import '~@/general/client/assets/css/vars.less';
-
 @hRadio: 40px;
 @margeRadio: 5px;
 

package/src/client/components/input/UploadImage/index.less

@@ -1,5 +1,3 @@
-@import (reference) '~@/client/assets/theme.less';
-
 .uploadImg {
     position: relative;
     overflow: hidden;

package/src/client/services/router/components/Page.tsx

@@ -19,20 +19,20 @@ export default ({ page, isCurrent }: { page: Page, isCurrent?: boolean }) => {
     const context = useContext();
 
     const [apiData, setApiData] = React.useState<{[k: string]: any} | null>( 
-        page.loadIndicator ? null : page.data 
+        page.loading  ? null : page.data 
     );
     page.setAllData = setApiData;
  
     React.useEffect(() => {
 
         // Fetch the data asynchronously for the first time
-        if (apiData === null && isCurrent)
+        if (/*apiData === null && */isCurrent)
             page.fetchData().then( loadedData => {
-                page.loadIndicator = false;
+                page.loading  = false;
                 setApiData(loadedData);
             })
 
-    }, []);
+    }, [page]);
 
     return (
         <div 

package/src/client/services/router/components/router.tsx

@@ -62,8 +62,9 @@ export default ({ service: router }: { service: Router }) => {
             return;
         }
 
-        // Set.loadIndicator state
-        newpage.loadIndicator = <i src="spin" />
+        // Set.loading  state
+        newpage.isLoading = true;
+        newpage.loading  = <i src="spin" />
         // Add page container
         setPages( pages => {
 
@@ -79,7 +80,15 @@ export default ({ service: router }: { service: Router }) => {
             const curLayout = currentRoute?.options.layout;
             const newLayout = newpage?.route.options.layout;
             if (newLayout && curLayout && newLayout.path !== curLayout.path) {
+
+                // TEMPORARY FIX: reload everything when we change layout
+                //  Because layout can have a different theme
+                //  But when we call setLayout, the style of the previous layout are still oaded and applied
+                //  Find a way to unload the  previous layout / page resources before to load the new one
                 console.log(LogPrefix, `Changing layout. Before:`, curLayout, 'New layout:', newLayout);
+                window.location.replace(request.path);
+                return pages;
+
                 context.app.setLayout(newLayout);
             }
 

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

@@ -343,6 +343,7 @@ export default class ClientRouter<
         const request = new ClientRequest(location, this);
 
         // Restituate SSR response
+        let apiData: {} = {}
         if (this.ssrData) {
 
             console.log("SSR Response restitution ...");
@@ -350,11 +351,15 @@ export default class ClientRouter<
             request.user = this.ssrData.user || null;
 
             request.data = this.ssrData.request.data;
+
+            apiData = this.ssrData.page.data || {};
         }
 
-        const response = await this.createResponse(route, request)
+        // Replacer api data par ssr data
+
+        const response = await this.createResponse(route, request, apiData)
 
-        ReactDOM.hydrate(<App context={response.context} />, document.body, () => {
+        ReactDOM.hydrate( <App context={response.context} />, document.body, () => {
 
             console.log(`Render complete`);
 
@@ -364,7 +369,7 @@ export default class ClientRouter<
     private async createResponse(
         route: TUnresolvedRoute | TRoute,
         request: ClientRequest<this>,
-        additionnalData: {} = {}
+        pageData: {} = {}
     ): Promise<ClientPage> {
 
         // Load if not done before
@@ -376,7 +381,7 @@ export default class ClientRouter<
         try {
 
             const response = new ClientResponse<this, ClientPage>(request, route);
-            return await response.runController(additionnalData);
+            return await response.runController(pageData);
 
         } catch (error) {
 
@@ -387,7 +392,7 @@ export default class ClientRouter<
     private async createErrorResponse(
         e: any,
         request: ClientRequest<this>,
-        additionnalData: {} = {}
+        pageData: {} = {}
     ): Promise<ClientPage> {
 
         const code = 'http' in e ? e.http : 500;
@@ -406,7 +411,7 @@ export default class ClientRouter<
             route = this.errors[code] = await this.load(route);
 
         const response = new ClientResponse<this, ClientPage>(request, route);
-        return await response.runController(additionnalData);
+        return await response.runController(pageData);
     }
 
     /*----------------------------------

package/src/client/services/router/request/api.ts

@@ -127,35 +127,33 @@ export default class ApiClient implements ApiClientService {
         })
     }
 
-    public async fetchSync(fetchers: TFetcherList): Promise<TObjetDonnees> {
-
-        const ids = Object.keys(fetchers);
-        if (ids.length === 1) {
-            const id = ids[0];
-            const fetcher = fetchers[id];
-            return {
-                [id]: await this.fetch( fetcher.method, fetcher.path, fetcher.data, undefined )
-            };
-        }
-
-        const fetchersArgs: {[id: string]: TFetcherArgs} = {};
-        for (const id in fetchers)
-            fetchersArgs[id] = [
-                fetchers[id].method,
-                fetchers[id].path,
-                fetchers[id].data,
-            ]
+    public async fetchSync(fetchers: TFetcherList, alreadyLoadedData: {}): Promise<TObjetDonnees> {
+
+        // Pick the fetchers where the data is needed
+        const fetchersToRun: TFetcherList = {};
+        let fetchersCount: number = 0;
+        for (const fetcherId in fetchers)
+            if (!( fetcherId in alreadyLoadedData )) {
+                fetchersToRun[ fetcherId ] = fetchers[ fetcherId ]
+                fetchersCount++;
+            }
 
-        return await this.fetch("POST", "/api", { fetchers: fetchersArgs }, undefined).then((res) => {
+        // Fetch all the api data thanks to one http request
+        const fetchedData = fetchersCount === 0
+            ? 0
+            : await this.fetch("POST", "/api", { 
+                fetchers: fetchersToRun 
+            }).then((res) => {
 
-            const data: TObjetDonnees = {};
-            for (const id in res) 
-                data[id] = res[id];
+                const data: TObjetDonnees = {};
+                for (const id in res) 
+                    data[id] = res[id];
 
-            return data;
+                return data;
 
-        });
+            });
 
+        return { ...alreadyLoadedData, ...fetchedData }
     }
 
     public configure = (...[method, path, data, options]: TFetcherArgs): AxiosRequestConfig => {

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

@@ -94,7 +94,7 @@ export default class ClientPageResponse<
 
         // Default data type for `return <raw data>`
         if (result instanceof ClientPage)
-            await result.render();
+            await result.preRender(additionnalData);
         else
             throw new Error(`Unsupported response format: ${result.constructor?.name}`);
 

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

@@ -2,6 +2,9 @@
 - DEPENDANCES
 ----------------------------------*/
 
+// Npm
+import type { ComponentChild } from 'preact';
+
 // Core
 import type { TClientOrServerContext } from '@common/router';
 import PageResponse, { TDataProvider, TFrontRenderer } from "@common/router/response/page";
@@ -22,6 +25,7 @@ import type ClientRouter from '..';
 export default class ClientPage<TRouter = ClientRouter> extends PageResponse<TRouter> {
 
     public isLoading: boolean = false;
+    public loading: false | ComponentChild;
     public scrollToId: string;
 
     public constructor(
@@ -38,23 +42,15 @@ export default class ClientPage<TRouter = ClientRouter> extends PageResponse<TRo
         this.scrollToId = context.request.hash;
     }
     
-    public async render( data?: TObjetDonnees ) {
+    public async preRender( data?: TObjetDonnees ) {
 
         // Add the page to the context
         this.context.page = this;
-         
-        // Load the fetchers list to load data if needed
-        if (this.dataProvider)
-            this.fetchers = this.dataProvider( this.context );
+        this.isLoading = true;
 
         // Data succesfully loaded
-        if (data !== undefined) {
-            this.isLoading = false;
-            this.data = data;
-        }
-
-        // Fetch data
-        this.data = await this.fetchData();
+        this.data = data || await this.fetchData();
+        this.isLoading = false;
 
         return this;
     }
@@ -81,8 +77,7 @@ export default class ClientPage<TRouter = ClientRouter> extends PageResponse<TRo
         }));
     }
 
-    public loadIndicator;
-    public loading(state: boolean) {
+    public setLoading(state: boolean) {
 
         if (state === true) {
             if (!document.body.classList.contains("loading"))

package/src/common/router/request/api.ts

@@ -68,5 +68,5 @@ export default abstract class ApiClient {
 
     public abstract createFetcher<TData extends unknown = unknown>(...args: TFetcherArgs): TFetcher<TData>;
 
-    public abstract fetchSync(fetchers: TFetcherList): Promise<TObjetDonnees>;
+    public abstract fetchSync(fetchers: TFetcherList, alreadyLoadedData: {}): Promise<TObjetDonnees>;
 }

package/src/common/router/response/page.ts

@@ -75,6 +75,14 @@ export default class PageResponse<TRouter extends ClientOrServerRouter = ClientO
     }
     
     public async fetchData() {
-        return await this.context.request.api.fetchSync( this.fetchers );
+
+        // Load the fetchers list to load data if needed
+        if (this.dataProvider)
+            this.fetchers = this.dataProvider({ ...this.context, ...this.context.request.data });
+
+        // Execute the fetchers for missing data
+        console.log(`[router][page] Fetching api data:` + Object.keys(this.fetchers));
+        this.data = await this.context.request.api.fetchSync( this.fetchers, this.data );
+        return this.data;
     }
 }

package/src/common/validation/schema.ts

@@ -28,6 +28,7 @@ export type TValidationResult<TFields extends TSchemaFields> = {
 }
 
 export type TValidatedData<TFields extends TSchemaFields> = {
+    // For each field, the values returned by validator.validate()
     [name in keyof TFields]: ReturnType<TFields[name]["validate"]>
 }
 

package/src/common/validation/validator.ts

@@ -46,7 +46,14 @@ type TValidationArgs<TValue, TAllValues extends {}> = [
 
 type TValidationFunction<TValue, TAllValues extends {} = {}> = (
     ...args: TValidationArgs<TValue, TAllValues>
-    ) => TValue | typeof EXCLUDE_VALUE | undefined;
+    ) => TValue | typeof EXCLUDE_VALUE;
+
+type TValidateReturnType<
+    TOptions extends TValidator<TValue>, 
+    TValue extends any
+> = TOptions extends { opt: true } 
+    ? (undefined | TValue) 
+    : TValue
 
 /*----------------------------------
 - CONST
@@ -57,32 +64,32 @@ export const EXCLUDE_VALUE = "action:exclure" as const;
 /*----------------------------------
 - CLASS
 ----------------------------------*/
-export default class Validator<TValue> {
+export default class Validator<TValue, TOptions extends TValidator<TValue> = TValidator<TValue>> {
 
     public constructor( 
         public type: string,
         public validateType: TValidationFunction<TValue>, 
-        public options: TValidator<TValue>
+        public options: TOptions
     ) {
 
     }
 
     public isEmpty = (val: any) => val === undefined || val === '' || val === null
 
-    public validate(...[ val, input, output, correct ]: TValidationArgs<TValue, {}>) {
+    public validate(...[ val, input, output, correct ]: TValidationArgs<TValue, {}>): TValidateReturnType<TOptions, TValue> {
 
         // Required value
         if (this.isEmpty(val)) {
             // Optionnel, on skip
             if (this.options.opt === true)
-                return undefined;
+                return undefined as TValidateReturnType<TOptions, TValue>;
             // Requis
             else
                 throw new InputError("Please enter a value");
         }
 
         // Validate type
-        return this.validateType(val, input, output, correct);
+        return this.validateType(val, input, output, correct) as TValidateReturnType<TOptions, TValue>;
     }
 
 }

package/src/server/services/console/bugReporter.ts

@@ -6,7 +6,7 @@
 import { v4 as uuid } from 'uuid';
 
 // Core
-import { SqlError } from '@server/error';
+import { SqlError } from '@server/services/database/debug';
 import type Console from '.';
 
 // Types

package/src/server/services/database/connection.ts

@@ -7,12 +7,12 @@ import mysql from 'mysql2/promise';
 
 // Core: general
 import Application from '@server/app';
-import { SqlError } from '@server/error';
 import Service from '@server/app/service';
 
 // Core: specific
+import { SqlError } from './debug';
 import type Console from '../console';
-import MetadataParser, { TDatabasesList, TMetasTable, TColumnTypes } from './metas';
+import MetadataParser, { TDatabasesList, TMetasTable, TColumnTypes, TMetasColonne } from './metas';
 import { TMySQLTypeName, mysqlToJs, js as jsTypes } from './datatypes';
 import Bucket from './bucket';
 
@@ -157,7 +157,7 @@ export default class DatabaseConnection extends Service<DatabaseServiceConfig, T
             return next();
 
         // Normal column
-        let type: TColumnTypes;
+        let databaseColumn: TMetasColonne | undefined;
         if (field.db && field.table && field.name) {
 
             const db = this.tables[ field.db ];
@@ -172,15 +172,17 @@ export default class DatabaseConnection extends Service<DatabaseServiceConfig, T
                 throw new Error(`Table metadatas for ${field.db}.${field.table} were not loaded.`);
             }
 
-            const column = table.colonnes[field.name];
-            if (column === undefined) {
-                console.error("Field infos:", field);
-                throw new Error(`Column metadatas for ${field.db}.${field.table}.${field.name} were not loaded.`);
-            }
+            databaseColumn = table.colonnes[field.name];
+        }
+
+
+        let type: TColumnTypes;
+        if (databaseColumn !== undefined) {
 
-            type = column.type;
+            type = databaseColumn.type;
 
-        // Custom column (computed or aliased)
+        // If the column name has not been found in the concerned table, 
+        //  We assume it's a computed column
         } else {
 
             const mysqlType = {

package/src/server/{error/index.ts → services/database/debug.ts}

@@ -1,3 +1,10 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
 export class SqlError extends Error {
 
     public constructor( 

package/src/server/services/email/index.ts

@@ -8,9 +8,10 @@
 
 // Core
 import Application, { Service } from '@server/app';
-import { jsonToHtml } from './utils';
 
-const templates = {} as {[template: string]: (data: any) => string}
+// Speciic
+import { jsonToHtml } from './utils';
+import type { Transporter } from './transporter';
 
 /*----------------------------------
 - SERVICE CONFIG
@@ -22,7 +23,9 @@ export type Config = {
         transporter: string,
         from: string
     },
-    transporters: Config.EmailTransporters,
+    transporters: {
+        [transporterName: string]: Transporter
+    },
     bugReport: {
         from: string,
         to: string
@@ -33,16 +36,12 @@ export type Hooks = {
 
 }
 
-declare global {
-    namespace Config {
-        interface EmailTransporters { }
-    }
-}
-
 /*----------------------------------
 - TYPES: EMAILS
 ----------------------------------*/
 
+export { Transporter } from './transporter';
+
 export type TEmail = THtmlEmail | TTemplateEmail;
 
 type TBaseEmail = { 
@@ -68,11 +67,6 @@ export type TCompleteEmail = With<THtmlEmail, {
 /*----------------------------------
 - TYPES: OPTIONS
 ----------------------------------*/
-
-export abstract class Transporter {
-    public abstract send( emails: TCompleteEmail[] ): Promise<void>;
-}
-
 type TOptions = {
     transporter?: string,
     testing?: boolean
@@ -82,6 +76,8 @@ type TOptions = {
 - FONCTIONS
 ----------------------------------*/
 export default class Email extends Service<Config, Hooks, Application> {
+    
+    private transporters = this.config.transporters;
 
     public async register() {
 
@@ -91,11 +87,6 @@ export default class Email extends Service<Config, Hooks, Application> {
         
     }
 
-    private transporters = {} as {[name: string]: Transporter};
-    public addTransporter( name: string, transporter: (new () => Transporter) ) {
-        console.log(`[email] registering email transporter: ${name}`);
-        this.transporters[ name ] = new transporter();
-    }
 
     public async send(
         emails: TEmail | TEmail[],
@@ -119,6 +110,7 @@ export default class Email extends Service<Config, Hooks, Application> {
                 : email.to;
 
             // Via template
+            // TODO: Restore templates feature
             if ('template' in email) {
 
                 const template = templates[email.template];
@@ -170,8 +162,8 @@ export default class Email extends Service<Config, Hooks, Application> {
             return;
         }
 
-        const Transporter = this.transporters[ transporterName ];
-        await Transporter.send(emailsToSend);
+        const transporter = this.transporters[ transporterName ];
+        await transporter.send(emailsToSend);
 
     }
 }

package/src/server/services/email/transporter.ts

@@ -0,0 +1,38 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+
+// Core
+import type Application from "@server/app";
+import type EmailService from '@server/services/email';
+
+// Specific
+import type { TCompleteEmail } from ".";
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type TBasicConfig = {
+    api: string,
+    debug: boolean
+}
+
+/*----------------------------------
+- CLASS 
+----------------------------------*/
+export abstract class Transporter<TConfig extends {} = {}> {
+
+    public constructor( 
+        protected app: Application & { email: EmailService },
+        protected config: TBasicConfig & TConfig,
+
+        protected email = app.email
+    ) {
+
+    }
+
+    public abstract send( emails: TCompleteEmail[] ): Promise<void>;
+}

package/src/server/services/router/index.ts

@@ -24,7 +24,7 @@ import BaseRouter, {
 } from '@common/router';
 import { buildRegex, getRegisterPageArgs } from '@common/router/register';
 import { layoutsList } from '@common/router/layouts';
-import { TFetcherArgs } from '@common/router/request/api';
+import { TFetcherList, TFetcher } from '@common/router/request/api';
 import type { TFrontRenderer } from '@common/router/response/page';
 import type { TSsrUnresolvedRoute, TRegisterPageArgs } from '@client/services/router';
 
@@ -386,7 +386,7 @@ export default class ServerRouter<
                 // Bulk API Requests
                 if (request.path === '/api' && typeof request.data.fetchers === "object") {
 
-                    return await this.resolveApiBatch(request);
+                    return await this.resolveApiBatch(request.data.fetchers, request);
 
                 } else {
                     response = await this.resolve(request);
@@ -434,7 +434,7 @@ export default class ServerRouter<
 
     public async resolve(request: ServerRequest<this>): Promise<ServerResponse<this>> {
 
-        console.info(request.ip, request.method, request.domain, request.path, 'user =', request.user);
+        console.info(request.ip, request.method, request.domain, request.path);
 
         const response = new ServerResponse<this>(request);
 
@@ -475,12 +475,14 @@ export default class ServerRouter<
         throw new NotFound(`The requested endpoint was not found.`);
     }
 
-    private async resolveApiBatch( request: ServerRequest<this> ) {
+    private async resolveApiBatch( fetchers: TFetcherList, request: ServerRequest<this> ) {
+
+        // TODO: use api.fetchSync instead
 
         const responseData: TObjetDonnees = {};
-        for (const id in request.data.fetchers) {
+        for (const id in fetchers) {
 
-            const [method, path, data] = request.data.fetchers[id] as TFetcherArgs;
+            const { method, path, data } = fetchers[id];
 
             const response = await this.resolve(
                 request.children(method, path, data)
@@ -489,7 +491,6 @@ export default class ServerRouter<
             responseData[id] = response.data;
 
             // TODO: merge response.headers ?
-
         }
 
         // Status

package/src/server/services/router/request/api.ts

@@ -52,22 +52,25 @@ export default class ApiClientRequest extends RequestService implements ApiClien
         };
     }
 
-    public async fetchSync(fetchers: TFetcherList): Promise<TObjetDonnees> {
+    public async fetchSync(fetchers: TFetcherList, alreadyLoadedData: {}): Promise<TObjetDonnees> {
 
-        const resolved: TObjetDonnees = {};
+        const fetchedData: TObjetDonnees = { ...alreadyLoadedData };
 
         for (const id in fetchers) {
 
             const { method, path, data, options } = fetchers[id];
-
             //this.router.config.debug && console.log(`[api] Resolving from internal api`, method, path, data);
 
+            // We don't fetch the already given data
+            if (id in fetchedData)
+                continue;
+
+            // Create a children request to resolve the api data
             const internalHeaders = { accept: 'application/json' }
             const request = this.request.children(method, path, data, { ...internalHeaders/*, ...headers*/ });
-            resolved[id] = await request.router.resolve(request).then(res => res.data);
-
+            fetchedData[id] = await request.router.resolve(request).then(res => res.data);
         }
 
-        return resolved;
+        return fetchedData;
     } 
 }

package/src/server/services/router/response/index.ts

@@ -107,11 +107,16 @@ export default class ServerResponse<
         if (response === undefined)
             return;
 
-        // Default data type for `return <raw data>`
-        if (response instanceof Page)
+        // No need to process the response
+        if (response instanceof ServerResponse)
+            return;
+        // Render react page to html
+        else if (response instanceof Page)
             await this.render(response, context, additionnalData);
+        // Return HTML
         else if (typeof response === 'string' && this.route.options.accept === 'html')
             await this.html(response);
+        // Return JSON
         else
             await this.json(response);
     }
@@ -186,7 +191,7 @@ export default class ServerResponse<
         context.page = page;
         
         // Prepare page & fetch data
-        await page.fetchData();
+        page.data = await page.fetchData();
         if (additionnalData !== undefined) // Example: error message for error pages
             page.data = { ...page.data, ...additionnalData }
 

package/src/server/services/users/index.ts

@@ -162,7 +162,7 @@ export default abstract class UsersManagementService<
 
         const user = request.user;
 
-        this.config.debug && console.warn(LogPrefix, `Check auth, role = ${role}. Current user =`, user);
+        this.config.debug && console.warn(LogPrefix, `Check auth, role = ${role}. Current user =`, this.displayName(user));
 
         if (user === undefined) {
 

package/src/client/assets/css/components/components.less

@@ -1,31 +0,0 @@
-.white-card() {
-    background: white;
-    box-shadow: 0 3px 2px fade(#000, 10%);
-    border: solid 1px fade(#000, 10%);
-    border-radius: @radius;
-}
-
-.card,
-.input.text,
-.btn,
-.table,
-i.solid {
-
-    .build-theme-bg( #fff, #8E8E8E);
-
-    &:not(.bg) {
-        .white-card();
-    }
-
-    .bg & {
-        box-shadow: none;
-        border: none;
-    }
-}
-
-//.card.clickable:hover,
-.btn:hover,
-.input.text.focus {
-    z-index: 5;
-    box-shadow: 0 10px 50px fade(#000, 15%);
-}