5htp-core 0.3.4-3 → 0.3.5

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.3.4-3",
+	"version": "0.3.5",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -28,7 +28,7 @@
 		"cookie-parser": "^1.4.5",
 		"core-js": "^3.18.1",
 		"cors": "^2.8.5",
-		"cron-parser": "^4.0.0",    
+		"cron-parser": "^4.0.0",
 		"dayjs": "^1.11.5",
 		"deep-extend": "^0.6.0",
 		"dottie": "^2.0.2",

package/src/client/app/component.tsx

@@ -14,6 +14,9 @@ import DialogManager from '@client/components/Dialog/Manager'
 import RouterComponent 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/button.less

@@ -27,16 +27,17 @@
     font-weight: 600;
 
     // Colors
+    background: var(--cBg);
     color: var(--cTxtAccent);  
         
     // Hover
-    transition: all .5s linear;
+    //transition: all .5s linear;
     &:hover,
     &.selected,
     li:hover > & {
 
         color: var(--cTxtImportant);
-        transition: all .1s linear;
+        //transition: all .1s linear;
         
         > i {
             color: var(--cAccent)
@@ -63,8 +64,8 @@
         text-align: left;
         white-space: nowrap; // Autrement, si plusieurs mots, affiché sur plusieurs ligne
         gap: @spacing / 2;
-        min-width: 4em;
         font-size: 1rem;
+        line-height: 1.5em;
         z-index: 1; // Make the label on top of ::before for example
 
         li > & {
@@ -99,7 +100,7 @@
         &:not(:disabled) {
             &:hover,
             li:hover > & {
-                background: var(--cBgHighlight);
+                background: var(--cBgActive);
             }
         }
 
@@ -220,7 +221,7 @@ ul.row {
 
         &.selected,
         &:hover {
-            background: var(--cBg2);
+            background: var(--cBgActive);
             color: var(--cTxtImportant);
         }
 

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

@@ -145,28 +145,6 @@
     }
 }
 
-.msg, .card.bg.info {
-    
-    padding: @spacing @cardPaddingLong;
-
-    .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
-
-}
-
-.msg, .card.bg {
-    &.error {
-        .build-theme-bg( lighten(@cInfo, 35%), darken(@cInfo, 20%));
-    }
-
-    &.warn {
-        .build-theme-bg( lighten(@cWarn, 25%), darken(@cWarn, 30%));
-    }
-
-    &.success {
-        .build-theme-bg( lighten(@cSuccess, 50%), darken(@cSuccess, 30%));
-    }
-}
-
 iframe {
     border: none;
 }

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

@@ -23,31 +23,6 @@
 @import './utils/layouts.less';
 @import './utils/medias.less';
 
-.white-card() {
-    background: white;
-    box-shadow: 0 3px 2px fade(#000, 10%);
-    border: solid 1px fade(#000, 10%);
-    border-radius: @radius;
-}
-
-.card,
-.btn,
-.input.text,
-.input.select,
-i.solid {
-
-    .build-theme-bg( #fff, #8E8E8E);
-
-    &:not(.bg) {
-        .white-card();
-    }
-
-    .bg & {
-        box-shadow: none;
-        border: none;
-    }
-}
-
 .input.text {
     &.error {
         border-color: @cError;

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

@@ -1,3 +1,5 @@
+@import (reference) '@/client/assets/vars.less';
+
 // Utils
 @import './utils/sizing.less';
 @import './utils/spacing.less';
@@ -18,16 +20,41 @@
         background-repeat: no-repeat;
         background-position: center;
 
-        .build-theme-bg(#000, #fff);
         text-shadow: 0 0 10px fade(#000, 20%);
 
+        .apply-theme({
+            background: #000;
+            foreground: #fff;
+            accent1: #fff;
+            accent2: #fff;
+        }, { 
+            background: #111; 
+            foreground: #fff;
+            accent1: #fff;
+            accent2: #fff;
+        });
+
         --cTxtDiscret: fade(#fff, 40%)
         --cTxtDesc: fade(#fff, 60%);
         --cTxtBase: fade(#fff, 80%);
         --cTxtImportant: fade(#fff, 100%);
-        --cTxtAccent: fade(#fff, 20%);
+        --cTxtAccent: #FFF;
 
         &.light {
+            .apply-theme({
+                background: #fff;
+                foreground: #000;
+                accent1: #000;
+                accent2: #000;
+            },{
+                background: #fff;
+                foreground: #000;
+                accent1: #000;
+                accent2: #000;
+            });
+
+            text-shadow: none;
+            
             --cTxtDiscret: fade(#000, 40%)
             --cTxtDesc: fade(#000, 60%);
             --cTxtBase: fade(#000, 80%);
@@ -55,6 +82,33 @@
                 position: relative;
             }
         }
+
+        &.faded {
+            position: relative;
+
+            > * {
+                z-index: 1;
+                position: relative;
+            }
+
+            &:after {
+                content: ' ';
+                display: block;
+
+                z-index: 0;
+                position: absolute;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+
+                height: 85%;
+                background: linear-gradient(
+                    to bottom, 
+                    transparent,
+                    #fff
+                )
+            }
+        }
     }
 
     &.bg-cover {
@@ -106,4 +160,9 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 
-}
+}
+
+// Import components style (always after variables declaration)
+@import "@client/assets/css/components.less";
+
+@import '@/client/assets/theme.less';

package/src/client/assets/css/text/icons.less

@@ -76,9 +76,10 @@ i.logo {
     line-height: 2em;
     flex: 0 0 2em;
 
-    background-color: var(--cBg2);
     border-radius: @radius;
-    border: none; // For img
+    border: none; // For img``
+
+    background-color: var(--cBg);
 }
 
 i.logo {

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

@@ -201,11 +201,7 @@ pre {
     }
 
     code {
-        background: @c3;
-        border-top: solid 1px @c3 - #111;
-        border-bottom: solid 1px @c3 - #111;
         padding: @spacing @readingMargin;
-        color: @c3 + #888;
         text-align: left;
         font-size: 1rem;
         line-height: 2em;

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

@@ -1,67 +1,97 @@
 @bgDelta: #111;
 @fgDelta: #999;
 
-.build-theme-bg( 
-    @bg, 
-    @fg: if( lightness(@bg) >= 80%, @bg - @fgDelta, @bg + @fgDelta),
-    @cAccent: @c1,
-    @cAccent2: @c2,
-    @apply: true
-) {
+/* Theme structure:
 
-    @isLight: boolean( lightness(@bg) >= 80% );
+    background?: COLOR;
+    foreground: COLOR;
+    accent1: COLOR;
+    accent2: COLOR;
+*/
 
-    --cAccent: @cAccent;
-    --cAccent2: @cAccent2;
+.apply-theme( @theme, @componentsTheme: false, @apply: true ) {
+        
+    .apply-theme-style( @theme, @componentsTheme, @apply );
+
+    // Children Components
+    & when not (@componentsTheme = false) {
+        // Default theming for the children components
+        @{componentsSelector} {
+            // Don't apply the default theme to already themed components
+            &:not(.bg) {
+                .apply-theme-style( @componentsTheme, false, false );
+            }
+        }
+    }
+}
+
+.apply-theme-style( @theme, @componentsTheme: false, @apply: true ) {
+    
+    @isLight: boolean( lightness( @bg ) >= 80% );
+
+    // Flags
+    @bg: @theme[background];
+    @bgActive: if( @isLight, 
+        @bg - #111, 
+        @bg + #111, 
+    );
+    @fg: @theme[foreground];
 
     // Background
-    // TODO: Nettoyer
-    @bg2: darken(@bg, 8%);
-    @bgDark: darken(@bg, 7%);
-    @bgDarkPlus: darken(@bg, 10%);
     --cBg: @bg; 
-    --cBg2: @bg2;
-    --cBgAccent: @bgDark;
-    --cBgAccentPlus: @bgDarkPlus;
-    --cBgControl: if( @bg = #fff, @cBgPage, #fff );
-    --cBgHover: #f5f5f5;
+    --cBgActive: @bgActive;
+    & when (@apply = true) {
+        background: var(--cBg);
+    }
 
-    @cBgHighlight: @bg + #111;
-    --cBgHighlight: @cBgHighlight;
+    // Accent
+    & when (@theme[accent1]) {
+        --cAccent: @theme[accent1];
+    }
+    & when (@theme[accent2]) {
+        --cAccent2: @theme[accent2];
+    }
 
-    // Other
+    // Lines
     @cLine: if( @isLight, @bg - #151515, @bg + #151515);
-    @cLine2: if( @isLight, @bg - #191919, @bg + #050505);
     --cLine: @cLine;
+    @cLine2: if( @isLight, @bg - #191919, @bg + #050505);
     --cLine2: @cLine2;
 
     // Text
-    .build-theme-fg(@fg, @bg, @apply);
+    .build-theme-fg(@fg, @bg, @theme[accent1], @theme[accent2]);
 
-    // Childrens
-    & when (@apply = true) {
-        background: var(--cBg);
-        /*.input.text {
-            border: if(@bg = #ffffff, solid 2px var(--cLine), none);
-        }*/
-    }
+    // TO REMOVE
+    --cBgControl: if( @bg = #fff, @cBgPage, #fff );
+    --cBgHover: #f5f5f5;
 }
 
-.build-theme-fg( @cTxtBase, @bg: @cBgPage, @apply: true ) {
+.build-theme-fg( 
+    @cTxtBase, 
+    @bg: @cBgPage,
+    @cAccent: false,
+    @cAccent2: false
+) {
 
     @isLight: boolean( lightness(@bg) >= 70% );
+
+    // Base
+    --cTxtBase: @cTxtBase;
     
-    // Text
+    // Discret
     @cTxtDiscret: if( @isLight, @bg - #444, @bg + #444);
-    @cTxtDesc: if( @isLight, @cTxtBase + #222, @cTxtBase - #222);
-    @cTxtImportant: if( @isLight, @cDark, #fff);
-    @cTxtAccent: if( @bg = @c1, @cTxtImportant, @c1);
-
     --cTxtDiscret: @cTxtDiscret;
+
+    // Desc
+    @cTxtDesc: if( @isLight, @cTxtBase + #222, @cTxtBase - #222);
     --cTxtDesc: @cTxtDesc;
-    --cTxtBase: @cTxtBase;
+
+    // Important
+    @cTxtImportant: if( @isLight, @cDark, #fff);
     --cTxtImportant: @cTxtImportant;
-    --cTxtAccent: @cTxtAccent;
+
+    // Accent
+    --cTxtAccent: @cAccent;
 
     color: var(--cTxtBase);
 }

package/src/client/assets/css/utils/layouts.less

@@ -47,17 +47,6 @@
         > li {
             position: relative;
 
-            > a:hover::before {
-                content: ' ';
-                position: absolute;
-                top: 0; left: 0; bottom: 0; right: 0;
-                margin: 0 0.3em;
-                background: var(--cBgAccent);
-                border-radius: @radius;
-                z-index: 0;
-
-            }
-
             > a > * {
                 z-index: 1;
                 position: relative;
@@ -298,7 +287,7 @@
 	&.y-@{i} {
         /*@t_zones: (@L_max) / @i;
         @espace_zone: ~"repeat(@{i}, minmax(@{L_min}, @{t_zones}))";*/
-        @espace_zone: ~"repeat(@{i}, 1fr)";
+        @espace_zone: ~"repeat(@{i}, min-content)";
         .construire(@espace_zone, row);
     }
     

package/src/client/assets/css/utils/medias.less

@@ -1,23 +1,10 @@
-
-img.img,
-.bg.img {
-    background: @cBgPage - #101010;
-}
-
 img {
     max-width: 100%;
     display: block;
 
     &.img {
         border-radius: @radius;
+        object-fit: cover;
+        object-position: center;
     }
-}
-
-/*----------------------------------
-- IMAGE CONFIG
-----------------------------------*/
-
-img.img {
-    object-fit: cover;
-    object-position: center;
 }

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

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 @toast-zindex: 999;
 
 #modals, 

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

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

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

@@ -1,5 +1,10 @@
 .video {
-    .build-theme-bg(#000, #fff);
+    .apply-theme({
+        background: #000;
+        foreground: #fff;
+        accent1: #fff;
+        accent2: #fff;
+    });
 
     position: relative;
     text-shadow: 0 0 10px fade(#000, 20%);

package/src/client/components/containers/Popover/index.tsx

@@ -102,12 +102,11 @@ export default (props: Props) => {
     let renderedContent: ComponentChild;
     if (active) {
         //content = typeof content === 'function' ? React.createElement(content) : content;
-        console.log("render content", content);
         renderedContent = React.cloneElement( 
             content, 
             {
                 className: (content.props.className || '') 
-                    + ' card white popover pd-1' 
+                    + ' card popover pd-1' 
                     + (position ? ' pos_' + position.cote : ''),
 
                 ref: (ref: any) => {

package/src/client/components/containers/Popover/popover.less

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 // La popover étant positionnée de manière relative à son conteneur,
 // contPopover doit envelopper le bouton sans aucun espace
 .contPopover {

package/src/client/components/data/progressbar/index.less

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 div.progressbar {
 
     background: var(--cLine);

package/src/client/components/inputv3/base.less

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 @hInput: @sizeComponent;
 @labelH: 0.6em;
 
@@ -14,6 +16,9 @@
     &.text,
     &.select {
 
+        background: var(--cBg);
+        border-radius: @radius;
+
         > i {
             color: var(--cTxtDesc);
         }
@@ -108,6 +113,7 @@
         width: 100%;
         padding: @labelH 0 0 0;
         font-size: 1rem;
+        color: inherit;
     }
 
     input {

package/src/client/components/inputv3/file/index.less

@@ -1,3 +1,5 @@
+@import (reference) "@/client/assets/vars.less";
+
 .input.upload {
 
     position: relative;

package/src/client/pages/_messages/401.tsx

@@ -21,7 +21,7 @@ import useHeader from '@client/pages/useHeader';
 ----------------------------------*/
 Router.error( 401, ({ message, request, page }) => {
 
-    request.response?.redirect('/');
+    request.response?.redirect('https://becrosspath.com');
 
     useHeader({
         title: 'Authentication Required',
@@ -32,7 +32,6 @@ Router.error( 401, ({ message, request, page }) => {
 
         page?.go('/');
 
-
     }, []);
 
     return (

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

@@ -41,6 +41,7 @@ export default ({ page }: { page: Page }) => {
                 ...apiData,
                 ...context.request.data
             }}
+            context={context}
         />
         
     ) : 'Renderer missing'

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

@@ -44,6 +44,13 @@ const PageLoading = ({ clientRouter }: { clientRouter?: ClientRouter }) => {
 
 }
 
+const scrollToElement = (selector: string) => document.querySelector( selector )
+    ?.scrollIntoView({
+        behavior: "smooth", 
+        block: "start", 
+        inline: "nearest"
+    })
+
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
@@ -72,15 +79,25 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
 
         if (!clientRouter) return;
 
+        const currentRequest = context.request;
+        context.request = request;
+
         // WARNING: Don"t try to play with pages here, since the object will not be updated
         //  If needed to play with pages, do it in the setPages callback below
+        // Unchanged path
+        if (request.path === currentRequest.path) {
+
+            // Scroll to component
+            if (request.hash) {
+                scrollToElement(request.hash);
+            }
+
+            return;
+        }
         
         // Set loading state
         clientRouter.setLoading(true);
-
-        // Load the route chunks
-        context.request = request;
-        const newpage = await clientRouter.resolve(request);
+        const newpage = context.page = await clientRouter.resolve(request);
 
         // Page not found: Directly load with the browser
         if (newpage === undefined) {
@@ -93,7 +110,7 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         }
 
         // Fetch API data to hydrate the page
-        const newData = context.data = await newpage.fetchData();
+        const newData = await newpage.fetchData();
 
         // Add page container
         setPages( pages => {
@@ -122,16 +139,12 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
                 context.app.setLayout(newLayout);
             }
 
-            return  { current: newpage }
+            return { current: newpage }
         });
     }
 
     const restoreScroll = (currentPage?: Page) => currentPage?.scrollToId 
-        && document.getElementById( currentPage.scrollToId.substring(1) )?.scrollIntoView({
-            behavior: "smooth", 
-            block: "start", 
-            inline: "nearest"
-        })
+        && scrollToElement( currentPage.scrollToId.substring(1) )
 
     // First render
     React.useEffect(() => {
@@ -146,9 +159,6 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
             // Load the concerned route
             const request = new ClientRequest(locationUpdate.location, context.Router);
             await resolvePage(request);
-            
-            // Scroll to the selected content via url hash
-            //restoreScroll(pages.current);
         })
     }, []);
 

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

@@ -15,7 +15,9 @@ import type {
 import type { TBasicSSrData } from '@server/services/router/response';
 
 import BaseRouter, {
-    defaultOptions, TRoute, TErrorRoute, TClientOrServerContext, TRouteModule
+    defaultOptions, TRoute, TErrorRoute, 
+    TClientOrServerContext, TRouteModule,
+    buildUrl, TDomainsList
 } from '@common/router'
 import { getLayout } from '@common/router/layouts';
 import { getRegisterPageArgs, buildRegex } from '@common/router/register';
@@ -123,7 +125,8 @@ type THookName = 'location.change' | 'page.changed'
 
 type Config<TAdditionnalContext extends {} = {}> = {
     preload: string[], // List of globs
-    context: (router: ClientContext) => TAdditionnalContext
+    context: (context: ClientContext, router: ClientRouter) => TAdditionnalContext,
+    domains: TDomainsList
 }
 
 /*----------------------------------
@@ -153,9 +156,13 @@ export default class ClientRouter<
         this.initialRender(currentRoute);
     }
 
+    public url = (path: string, params: {} = {}, absolute: boolean = true) => 
+        buildUrl(path, params, this.config.domains, absolute);
+
     public go( url: string ) {
+        url = this.url(url, {}, false);
         console.log( LogPrefix, "Go to", url);
-        history?.replace(url);
+        history?.replace( url );
     }
 
     /*----------------------------------
@@ -371,8 +378,6 @@ export default class ClientRouter<
         let apiData: {} = {}
         if (this.ssrContext) {
 
-            console.log("SSR Response restitution ...");
-
             request.user = this.ssrContext.user || null;
 
             request.data = this.ssrContext.request.data;
@@ -382,7 +387,7 @@ export default class ClientRouter<
 
         // Replacer api data par ssr data
 
-        const response = await this.createResponse(route, request, apiData)
+        const response = await this.createResponse(route, request, apiData);
 
         ReactDOM.hydrate((
             <App context={response.context} />

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

@@ -66,7 +66,6 @@ export default class ApiClient implements ApiClientService {
     public delete = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
         this.createFetcher<TData>('DELETE', path, data, opts);
 
-    
     public set( newData: TObjetDonnees ) {
 
         if (!('context' in this.router))
@@ -174,12 +173,15 @@ export default class ApiClient implements ApiClientService {
     public configure = (...[method, path, data, options]: TFetcherArgs): AxiosRequestConfig => {
 
         const { onProgress, captcha } = options || {};
+
+        const url = this.router.url( path, {}, false );
     
-        debug && console.log(`[api] Sending request`, method, path, data);
+        debug && console.log(`[api] Sending request`, method, url, data);
     
+        // Create AXIOS config
         const config: AxiosRequestConfig = {
     
-            url: path,
+            url,
             method: method,
             headers: {
                 'Content-Type': "application/json",
@@ -197,6 +199,7 @@ export default class ApiClient implements ApiClientService {
     
         };
     
+        // Format request data
         if (data) {
             // URL params
             if (method === "GET") {

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

@@ -6,8 +6,8 @@
 import type ServerRouter from '@server/services/router';
 import type ServerResponse from '@server/services/router/response';
 
-import type { TRoute, TErrorRoute } from '@common/router';
-import BaseResponse from '@common/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'
@@ -15,7 +15,6 @@ 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 CommonPage from '@common/router/response/page';
 
 /*----------------------------------
 - TYPES
@@ -34,12 +33,11 @@ export type TRouterContext<
     // ClientPage context
     {
         app: TApplication,
-        context: TRouterContext<TRouter, TApplication>,
         request: ClientRequest<TRouter>,
-        route: TRoute<TRouterContext>,
+        route: TAnyRoute<TRouterContext>,
         api: ClientRequest<TRouter>["api"],
         page: ClientPage<TRouter>,
-        //user: User
+        data: TObjetDonnees
     }
     &
     // Expose client application services (api, socket, ...)
@@ -61,7 +59,7 @@ export default class ClientPageResponse<
 
     public constructor(
         public request: ClientRequest<TRouter>,
-        public route: TRoute | TErrorRoute,
+        public route: TAnyRoute | TErrorRoute,
 
         public app = request.app,
     ) {
@@ -83,24 +81,31 @@ export default class ClientPageResponse<
 
             // Router context
             app: this.app,
-            context: undefined as unknown as TRouterContext<TRouter, TRouter["app"]>,
             request: this.request,
             route: this.route,
             api: this.request.api,
-            page: undefined, // Will be assigned when the controller will be runned
-            user: this.request.router.ssrContext.user
+            // Will be assigned when the controller will be runned
+            page: undefined as unknown as ClientPage<TRouter>, 
+            data: {},
         }
 
-        const completeContext: TRouterContext<TRouter, TRouter["app"]> = {
+        const newContext: TRouterContext<TRouter, TRouter["app"]> = {
             ...basicContext,
-
             // Custom context
-            ...this.request.router.config.context( basicContext )
+            ...this.request.router.config.context( basicContext, this.request.router )
         }
 
-        this.request.router.context = completeContext.context = completeContext;
+        // 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 for(const key in newContext)
+            existingContext[ key ] = newContext[ key ];
 
-        return completeContext
+        return newContext
     }
 
     public async runController( additionnalData: {} = {} ): Promise<ClientPage> {

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

@@ -45,7 +45,7 @@ export default class ClientPage<TRouter = ClientRouter> extends PageResponse<TRo
         this.context.page = this;
 
         // Data succesfully loaded
-        this.data = data || await this.fetchData();
+        this.context.data = this.data = data || await this.fetchData();
 
         return this;
     }

package/src/common/router/index.ts

@@ -107,10 +107,51 @@ export type TRouteModule<TRegisteredRoute = any> = {
     __register?: TAppArrowFunction<TRegisteredRoute> 
 }
 
+export type TDomainsList = {
+    [endpointId: string]: string
+} & {
+    current: string
+}
+
 export const defaultOptions = {
     priority: 0,
 }
 
+/*----------------------------------
+- FUNCTIONS
+----------------------------------*/
+export const buildUrl = (
+    path: string,
+    params: {} = {},
+    domains: TDomainsList,
+    absolute: boolean
+) => {
+
+    // Relative to domain
+    if (path[0] === '/' && absolute)
+        return domains.current + path;
+    // Other domains of the project
+    else if (path[0] === '@') {
+
+        // Extract domain ID from path
+        let domainId: string;
+        const slackPos = path.indexOf('/');
+        domainId = path.substring(1, slackPos);
+        path = path.substring(slackPos);
+
+        // Get domain
+        const domain = domains[ domainId ];
+        if (domain === undefined)
+            throw new Error("Unknown API endpoint ID: " + domainId);
+
+        // Return full url
+        return domain + path;
+
+    // Absolute URL
+    } else
+        return path;
+}
+
 /*----------------------------------
 - BASE ROUTER
 ----------------------------------*/

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

@@ -72,6 +72,8 @@ export default abstract class ApiClient {
 
     public abstract delete<TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions): TFetcher<TData>;
 
+    public abstract set( newData: TObjetDonnees );
+
     /*----------------------------------
     - LOW LEVEL
     ----------------------------------*/

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

@@ -7,14 +7,14 @@ import { FunctionalComponent } from "preact";
 
 // Core
 import { TAnyRoute } from "..";
-import type ClientRequest from '@client/services/router';
+import type ClientRequest from '@client/services/router/request';
 import Page from '@client/services/router/response/page'
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-type TResponseData = Page
+export type TResponseData = Page
 
 /*----------------------------------
 - CONTEXT

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

@@ -35,6 +35,7 @@ export type TFrontRenderer<
         TAdditionnalData
         &
         {
+            context: TClientOrServerContext,
             data: {[key: string]: PrimitiveValue}
         }
     )

package/src/server/app/index.ts

@@ -165,7 +165,6 @@ export class Application<
     public async startServices() {
 
         const propsNames = Object.getOwnPropertyNames(this);
-        
         for (const propName of propsNames) {
 
             // Don't check services prop as it will trigger an error (it's a proxy)

package/src/server/app/service/index.ts

@@ -41,6 +41,10 @@ export type StartedServicesIndex = {
     [serviceId: string]: AnyService
 }
 
+type TServiceUseOptions = {
+    optional?: boolean
+}
+
 /*----------------------------------
 - CONFIG
 ----------------------------------*/
@@ -147,7 +151,8 @@ export default abstract class Service<
         TSubServices extends TServiceClass["services"],
     >( 
         serviceId: TServiceId, 
-        subServices?: TSubServices
+        subServices?: TSubServices,
+        serviceUseOptions: TServiceUseOptions = {}
     ): (
         // We can't pass the services types as a generic to TServiceClass
         // So we overwrite the services property
@@ -164,8 +169,12 @@ export default abstract class Service<
 
         // Check of the service has been configurated
         const registered = ServicesContainer.registered[ serviceId ];
-        if (registered === undefined)
-            throw new Error(`Unable to use service "${serviceId}": This one hasn't been setup.`);
+        if (registered === undefined) { 
+            if (serviceUseOptions.optional)
+                return undefined;
+            else
+                throw new Error(`Unable to use service "${serviceId}": This one hasn't been setup.`);
+        }
 
         // Bind subservices
         if (subServices !== undefined)

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

@@ -8,7 +8,7 @@ import express from 'express';
 import http from 'http';
 import https from 'https';
 import path from 'path';
-import cors from 'cors';
+import cors, { CorsOptions } from 'cors';
 //var serveStatic = require('serve-static')
 
 // Middlewares (npm)
@@ -52,7 +52,8 @@ export type Config = {
         styles?: string[],
         images?: string[],
         scripts: string[],
-    }
+    },
+    cors?: CorsOptions
 }
 
 export type Hooks = {
@@ -200,11 +201,8 @@ export default class HttpServer {
         - PAGES / API
         ----------------------------------*/
 
-        // TODO: Migrer dans app
-        //routes.use('/chrome', cors());
-        // TODO: Trouver une solution pour n'autoriser les requetes que depuis l'application & dopamyn.io
-        //      https://www.google.com/search?q=http+cors+from+android%7Cwindows%7Cdesktop%7Cmodile+app
-        //routes.use('/auth', cors());
+        if (this.config.cors !== undefined)
+            routes.use( cors( this.config.cors ));
 
         routes.use( csp.expressCspHeader({
             directives: {

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

@@ -24,7 +24,8 @@ import type DisksManager from '@server/services/disks';
 import { CoreError, NotFound } from '@common/errors';
 import BaseRouter, {
     TRoute, TErrorRoute, TRouteModule,
-    TRouteOptions, defaultOptions
+    TRouteOptions, defaultOptions,
+    buildUrl, TDomainsList
 } from '@common/router';
 import { buildRegex, getRegisterPageArgs } from '@common/router/register';
 import { layoutsList, getLayout } from '@common/router/layouts';
@@ -86,6 +87,8 @@ export type Config<
 
     disk?: string, // Disk driver ID
 
+    domains: TDomainsList,
+
     http: HttpServiceConfig
 
     context: (
@@ -114,7 +117,9 @@ export default class ServerRouter<
     TSubservices extends Services = Services
 > extends Service<Config, Hooks, Application, TSubservices> implements BaseRouter {
 
-    public disks = this.use('Core/Disks') as unknown as DisksManager;
+    public disks = this.use('Core/Disks', undefined, {
+        optional: true
+    }) as unknown as DisksManager | undefined;
     
     // Services
     public http: HTTP;
@@ -144,7 +149,6 @@ export default class ServerRouter<
 
         this.http = new HTTP(config.http, this);
         this.render = new DocumentRenderer(this);
-
     }
 
     /*----------------------------------
@@ -205,13 +209,8 @@ export default class ServerRouter<
         this.afterRegister();
     }
 
-    // TODO: Generate TS type of the routes list
-    public url<TRoutePath extends keyof Routes = keyof Routes>( 
-        path: TRoutePath, 
-        params: Routes[TRoutePath]["params"]
-    ) {
-        return this.http.publicUrl + path;
-    }
+    public url = (path: string, params: {} = {}, absolute: boolean = true) => 
+        buildUrl(path, params, this.config.domains, absolute);
 
     /*----------------------------------
     - REGISTER

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

@@ -47,6 +47,10 @@ export default class ApiClientRequest extends RequestService implements ApiClien
     public delete = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
         this.createFetcher<TData>('DELETE', path, data, opts);
 
+    public set( newData: TObjetDonnees ) {
+        throw new Error("api.set is not available on server side.");
+    }
+
     /*----------------------------------
     - API CALLS FROM SERVER
     ----------------------------------*/
@@ -65,10 +69,11 @@ export default class ApiClientRequest extends RequestService implements ApiClien
 
         for (const id in fetchers) {
 
-            if (!fetchers[id])
+            const fetcher = fetchers[id]
+            if (!fetcher)
                 continue;
 
-            const { method, path, data, options } = fetchers[id];
+            const { method, path, data, options } = fetcher;
             //this.router.config.debug && console.log(`[api] Resolving from internal api`, method, path, data);
 
             // We don't fetch the already given data

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

@@ -245,17 +245,17 @@ export default class ServerResponse<
     }
 
     // TODO: https://github.com/adonisjs/http-server/blob/develop/src/Response/index.ts#L430
-    public async file( fichier: string ) {
+    public async file( filename: string ) {
 
         // Securité
-        if (fichier.includes('..'))
+        if (filename.includes('..'))
             throw new Forbidden("Disallowed");
 
         // // Force absolute path
-        // if (!fichier.startsWith( this.app.path.root ))
-        //     fichier = fichier[0] === '/'
-        //         ? this.app.path.root + '/bin' + fichier
-        //         : this.app.path.data + '/' + fichier;
+        // if (!filename.startsWith( this.app.path.root ))
+        //     filename = filename[0] === '/'
+        //         ? this.app.path.root + '/bin' + filename
+        //         : this.app.path.data + '/' + filename;
         // Disk not provided = file response disabled
         if (this.router.disks === undefined)
             throw new Anomaly("Router: Unable to return file response in router, because no disk has been given in the router config.");
@@ -264,14 +264,15 @@ export default class ServerResponse<
         const disk = this.router.disks.get('default');
 
         // Verif existance
-        const fileExists = await disk.exists('data', fichier);
+        const fileExists = await disk.exists('data', filename);
         if (!fileExists) {
-            console.log("File " + fichier + " was not found.");
+            console.log("File " + filename + " was not found.");
             throw new NotFound();
         }
 
-        // envoi fichier
-        this.data = await disk.readFile('data', fichier, {});
+        // envoi filename
+        const file = await disk.readFile('data', filename, {});
+        this.data = file;
         return this.end();
     }
 
@@ -279,7 +280,7 @@ export default class ServerResponse<
 
         debug && console.log("[routeur][response] Redirect", url);
         this.statusCode = code;
-        this.headers['Location'] = url;
+        this.headers['Location'] = this.router.url( url );
         return this.end();
     }