5htp-core 0.2.6 → 0.2.7-2

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

@@ -55,7 +55,8 @@ export default ({ service: router }: { service: Router }) => {
 
         // Page not found: Directly load with the browser
         if (newpage === undefined) {
-            window.location.replace(request.path);
+            window.location.replace(request.url);
+            console.error("not found");
             return;
         // Unable to load (no connection, server error, ....)
         } else if (newpage === null) {
@@ -86,7 +87,7 @@ export default ({ service: router }: { service: Router }) => {
                 //  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);
+                window.location.replace(request.url);
                 return pages;
 
                 context.app.setLayout(newLayout);

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

@@ -89,16 +89,11 @@ export default class ApiClient implements ApiClientService {
                 fetcher.data = { ...(fetcher.data || {}), ...params };
 
             console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
-            const indicator = this.toast.loading("Loading ...");
 
             this.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
 
                 this.set({ [id]: data });
 
-            }).finally(() => {
-
-                indicator.close(true);
-
             })
         }
     }

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

@@ -27,6 +27,8 @@ export default class ClientRequest<TRouter extends ClientRouter = ClientRouter>
 
     public api: ApiClient;
     public response?: ClientResponse<TRouter>;
+
+    public url: string;
     public hash?: string;
 
     public constructor( 
@@ -38,8 +40,16 @@ export default class ClientRequest<TRouter extends ClientRouter = ClientRouter>
         super(location.pathname);
 
         this.host = window.location.host;
+        this.url = window.location.protocol + '//' + window.location.host + this.path;
         this.hash = location.hash;
 
+        // Extract search params
+        if (location.search) {
+            this.url += location.search;
+            this.data = Object.fromEntries( new URLSearchParams( location.search ));
+        }
+    
+        // Request services
         this.api = new ApiClient(this.app, this);
     }
 

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

@@ -10,18 +10,129 @@ import { FileToUpload } from '@client/components/inputv3/file';
 - TYPES
 ----------------------------------*/
 
+function mergeObjects(object1, object2) {
+    return [object1, object2].reduce(function (carry, objectToMerge) {
+        Object.keys(objectToMerge).forEach(function (objectKey) {
+            carry[objectKey] = objectToMerge[objectKey];
+        });
+        return carry;
+    }, {});
+}
+
+function isArray(val) {
+
+    return ({}).toString.call(val) === '[object Array]';
+}
+
+function isJsonObject(val) {
+
+    return !isArray(val) && typeof val === 'object' && !!val && !(val instanceof Blob) && !(val instanceof Date);
+}
+
+function isAppendFunctionPresent(formData) {
+
+    return typeof formData.append === 'function';
+}
+
+function isGlobalFormDataPresent() {
+
+    return typeof FormData === 'function';
+}
+
+function getDefaultFormData() {
+
+    if (isGlobalFormDataPresent()) {
+        return new FormData();
+    }
+}
+
+function convertRecursively(jsonObject, options, formData, parentKey) {
+
+    var index = 0;
+
+    for (var key in jsonObject) {
+
+        if (jsonObject.hasOwnProperty(key)) {
+
+            var propName = parentKey || key;
+            var value = options.mapping(jsonObject[key]);
+
+            if (parentKey && isJsonObject(jsonObject)) {
+                propName = parentKey + '[' + key + ']';
+            }
+
+            if (parentKey && isArray(jsonObject)) {
+
+                if (isArray(value) || options.showLeafArrayIndexes ) {
+                    propName = parentKey + '[' + index + ']';
+                } else {
+                    propName = parentKey + '[]';
+                }
+            }
+
+            // Exract the file object from value
+            if (typeof value === 'object' && value instanceof FileToUpload)
+                value = value.data;
+
+            if (isArray(value) || isJsonObject(value)) {
+
+                convertRecursively(value, options, formData, propName);
+
+            } else if (value instanceof FileList) {
+
+                for (var j = 0; j < value.length; j++) {
+                    formData.append(propName + '[' + j + ']', value.item(j));
+                }
+            } else if (value instanceof Blob) {
+
+                formData.append(propName, value, value.name);
+
+            } else if (value instanceof Date) {
+
+                formData.append(propName, value.toISOString());
+
+            } else if (((value === null && options.includeNullValues) || value !== null) && value !== undefined) {
+
+                formData.append(propName, value);
+            }
+        }
+        index++;
+    }
+    return formData;
+}
+
 /*----------------------------------
 - UTILS
 ----------------------------------*/
-export const toMultipart = (postData: TPostData) => {
-
-    const formData = new FormData();
-    for (const key in postData) {
-        let data = postData[key];
-        if (typeof data === 'object' && (data instanceof FileToUpload))
-            data = data.data;
-        formData.append(key, data);
+/* Based on https://github.com/hyperatom/json-form-data
+    Changes:
+    - Add support for FileToUpload
+*/
+export const toMultipart = (jsonObject: TPostData, options) => {
+
+    if (options && options.initialFormData) {
+        
+        if (!isAppendFunctionPresent(options.initialFormData)) {
+            throw 'initialFormData must have an append function.';
+        }
+    } else if (!isGlobalFormDataPresent()) {
+
+        throw 'This environment does not have global form data. options.initialFormData must be specified.';
     }
 
-    return formData;
+    var defaultOptions = {
+        initialFormData: getDefaultFormData(),
+        showLeafArrayIndexes: true,
+        includeNullValues: false,
+        mapping: function(value) {
+            if (typeof value === 'boolean') {
+                return +value ? '1': '0';
+            }
+            return value;
+        }
+    };
+
+    var mergedOptions = mergeObjects(defaultOptions, options || {});
+
+    return convertRecursively(jsonObject, mergedOptions, mergedOptions.initialFormData);
 }

package/src/server/app/config.ts

@@ -51,6 +51,8 @@ type AppIdentityConfig = {
 
     web: {
         title: string,
+        titleSuffix: string,
+        fullTitle: string,
         description: string,
         version: string
     }                                 

package/src/server/app/index.ts

@@ -183,7 +183,7 @@ export default abstract class Application extends Service<Config, Hooks, /* TODO
             service.status = 'starting';
 
             if (service.register)
-                service.register();
+                await service.register();
 
             // Register commands
             if (service.commands)
@@ -193,9 +193,11 @@ export default abstract class Application extends Service<Config, Hooks, /* TODO
             if (service.start) {
                 service.started = service.start();
                 await service.started.catch(e => {
-                    console.error("Catched error while starting service " + serviceClassName + '. Exiting process if mode production.');
+                    console.error("Catched error while starting service " + serviceClassName + '. Exiting process if mode production.', e);
                     if (this.env.profile === 'prod')
                         process.exit();
+                    else
+                        throw e;
                 })
             }
 

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

@@ -190,10 +190,10 @@ export default class Console extends Service<Config, Hooks, Application> {
     }
 
     private clean() {
-        this.config.debug && console.log(LogPrefix, `Clean logs buffer. Current size:`, this.logs.length, '/', this.config.bufferLimit);
+        /*this.config.debug && console.log(LogPrefix, `Clean logs buffer. Current size:`, this.logs.length, '/', this.config.bufferLimit);
         const bufferOverflow = this.logs.length - this.config.bufferLimit;
         if (bufferOverflow > 0)
-            this.logs = this.logs.slice(bufferOverflow);
+            this.logs = this.logs.slice(bufferOverflow);*/
     }
 
     /*----------------------------------
@@ -230,7 +230,7 @@ export default class Console extends Service<Config, Hooks, Application> {
         // On envoi l'email avant l'insertion dans bla bdd
         // Car cette denrière a plus de chances de provoquer une erreur
         const logsHtml = this.printHtml(
-            this.logs.filter(e => e.channelId === channelId), 
+            this.logs/*.filter(e => e.channelId === channelId)*/.slice(-100), 
             true
         );
 
@@ -372,7 +372,7 @@ export default class Console extends Service<Config, Hooks, Application> {
             }
         }
         
-        return this.printHtml( entries.reverse() );
+        return this.printHtml( entries );
     }
  
     public printHtml(logs: TLog[], full: boolean = false): string {

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

@@ -93,7 +93,7 @@ export default class FetchService extends Service<Config, Hooks, Application> {
 
         // Convert to webp and finalize
         const processedBuffer = await processing.webp({ quality }).toBuffer().catch(e => {
-            console.error(LogPrefix, `Error while processing image at ${imageBuffer}:`, e);
+            console.error(LogPrefix, `Error while processing image at ${imageFileUrl}:`, e);
             return null;
         })
 

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

@@ -43,6 +43,12 @@ export type Config = {
     upload: {
         maxSize: string // Expression package bytes
     },
+    csp: {
+        default?: string[],
+        styles?: string[],
+        images?: string[],
+        scripts: string[],
+    }
 }
 
 export type Hooks = {
@@ -193,9 +199,7 @@ export default class HttpServer extends Service<Config, Hooks, Application> {
         routes.use( csp.expressCspHeader({
             directives: {
                 'script-src': [csp.INLINE, csp.SELF, 
-                    // Whitelist external js scripts
-                    "https://www.googletagmanager.com/gtag/js",
-                    "https://cdn.jsdelivr.net"
+                   ...this.config.csp.scripts
                 ]
             }
         }));

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

@@ -282,7 +282,7 @@ export default class ServerRouter<
         //await TrackingService.LoadCache();
 
         // Generate typescript typings
-        if (this.app.env.profile = 'dev')
+        if (this.app.env.profile === 'dev')
             this.genTypings();
 
         // Ordonne par ordre de priorité
@@ -468,7 +468,12 @@ declare type Routes = {
 
     public async resolve(request: ServerRequest<this>): Promise<ServerResponse<this>> {
 
-        console.info(request.ip, request.method, request.domain, request.path);
+        console.info(LogPrefix, request.ip, request.method, request.domain, request.path);
+
+        if (this.status === 'starting') {
+            console.log(LogPrefix, `Waiting for servert to be resdy before resolving request`);
+            await this.started;
+        }
 
         const response = new ServerResponse<this>(request);
 
@@ -545,6 +550,9 @@ declare type Routes = {
         // Rapport / debug
         if (code === 500) {
 
+            // Print the error here so the stacktrace appears in the bug report logs
+            console.log(LogPrefix, "Error catched from the router:", e);
+
             // Report error
             await this.app.runHook('error', e, request);
 

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

@@ -133,7 +133,9 @@ export default class ServerResponse<
         for (const serviceName in this.router.services) {
 
             const routerService = this.router.services[serviceName];
-            contextServices[ serviceName ] = routerService.requestService( this.request );
+            const requestService = routerService.requestService( this.request );
+            if (requestService !== null)
+                contextServices[ serviceName ] = requestService;
 
         }
 

package/src/server/services/router/response/page/document.tsx

@@ -19,10 +19,10 @@ import type Page from '.';
 /*----------------------------------
 - SERVICE
 ----------------------------------*/
-export default class DocumentRenderer {
+export default class DocumentRenderer<TRouter extends Router> {
 
     public constructor(
-        public router: Router,
+        public router: TRouter,
         public app = router.app
     ) {
 
@@ -55,7 +55,7 @@ export default class DocumentRenderer {
         );
     }
 
-    public async page( html: string, page: Page, response: ServerResponse<Router> ) {
+    public async page( html: string, page: Page, response: ServerResponse<TRouter> ) {
 
         const fullUrl = this.router.http.publicUrl + response.request.path;
 
@@ -133,7 +133,7 @@ export default class DocumentRenderer {
         </>
     }
 
-    private styles( page ) {
+    private styles( page: Page ) {
         return <>
             <link rel="stylesheet" type="text/css" href="/public/icons.css" />
             <link rel="preload" href="/public/client.css" as="style" />
@@ -151,7 +151,7 @@ export default class DocumentRenderer {
         </>
     }
 
-    private async scripts( response, page ) {
+    private async scripts( response: ServerResponse<TRouter>, page: Page ) {
 
         const context = safeStringify( response.forSsr(page) );
 
@@ -174,21 +174,9 @@ export default class DocumentRenderer {
                 <link rel="preload" href={script.url} as="script" />
                 <script type="text/javascript" src={script.url} {...script.attrs || {}} />
             </> : <>
-                <script type="text/javascript" {...script.attrs || {}} id={script.id} dangerouslySetInnerHTML={{ __html: script.inline }} />
+                <script type="text/javascript" {...script.attrs || {}} id={script.id} 
+                    dangerouslySetInnerHTML={{ __html: script.inline }} />
             </>)}
-
-            {/* Initialize GTM & GA for pagechange events */}
-            {/* TODO: append via the metrics module */}
-            {/*<script async src={"https://www.googletagmanager.com/gtag/js?id=" + this.app.config.tracking.ga.pub}></script>
-            <script dangerouslySetInnerHTML={{ __html: `
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-
-                gtag('config', '${this.app.config.tracking.ga.pub}', {
-                    send_page_view: false
-                });
-            `}} />*/}
         </>
     }
 }

package/src/server/services/router/response/page/index.tsx

@@ -22,6 +22,11 @@ const chunks = require('./chunk-manifest.json');
 - TYPES
 ----------------------------------*/
 
+const seoLimits = {
+    title: 70,
+    description: 255
+}
+
 /*----------------------------------
 - FONCTION
 ----------------------------------*/
@@ -35,7 +40,8 @@ export default class Page<TRouter extends Router = Router> extends PageResponse<
         public layout?: Layout,
 
         public route = context.route,
-        public router = context.request.router
+        public app = context.app,
+        public router = context.request.router,
         
     ) {
 
@@ -45,6 +51,16 @@ export default class Page<TRouter extends Router = Router> extends PageResponse<
 
     public render(): Promise<string> {
 
+        // Complete SEO metadatas
+        const titleSuffix = ' | ' + this.app.identity.web.titleSuffix
+        if (this.title === undefined)
+            this.title = this.app.identity.web.fullTitle;
+        else if (this.title.length < seoLimits.title - titleSuffix.length)
+            this.title += titleSuffix;
+
+        if (this.description === undefined)
+            this.description = this.app.identity.web.description;
+
         // We render page & document separatly,
         // because document needs to access to runtime assigned values
         // Ex: runtime added scripts, title, metas, ....

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

@@ -43,6 +43,6 @@ export default abstract class RouterService<TRouter extends Router = Router> {
     
     public abstract register(): Promise<void>;
 
-    public abstract requestService( request: ServerRequest<TRouter> ): RequestService;
+    public abstract requestService( request: ServerRequest<TRouter> ): RequestService | null;
 
 }

package/src/types/global/modules.d.ts

@@ -36,7 +36,7 @@ declare module "*.svg" {
     export = value;
 }
 
-declare module "*.png" {
+declare module "*.(png|webp)" {
     const value: string;
     export = value;
 }

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

@@ -1,167 +0,0 @@
-.champ.periode {
-
-    display: flex;
-
-    > .input-date {
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        > input[type=number] {
-            -moz-appearance: textfield;
-            padding: 0;
-            text-align: center;
-
-            width: 30px;
-            &.annee { width: 45px; }
-
-            &::-webkit-outer-spin-button,
-            &::-webkit-inner-spin-button {
-              -webkit-appearance: none;
-              margin: 0;
-            }
-        }
-
-    }
-}
-
-// https://github.com/wojtekmaj/react-calendar/blob/master/src/Calendar.less
-.react-calendar {
-  
-    &--doubleView {
-      width: 700px;
-  
-      .react-calendar__viewContainer {
-        display: flex;
-        margin: -.5em;
-  
-        > * {
-          width: 50%;
-          margin: .5em;
-        }
-      }
-    }
-  
-    &, & *, & *:before, & *:after {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-  
-    button {
-      margin: 0;
-      border: 0;
-      outline: none;
-      border-radius: @radiusBase;
-  
-      &:enabled {
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-  
-    &__navigation {
-      height: 40px;
-  
-      button {
-        min-width: 44px;
-        background: none;
-  
-        &:enabled {
-          &:hover, &:focus {
-            background-color: var(--cBgControl)
-          }
-        }
-  
-        &[disabled] {
-          color: var(--cTxtDiscret)
-        }
-      }
-    }
-  
-    &__month-view {
-      &__weekdays {
-        text-align: center;
-        text-transform: uppercase;
-        font-weight: bold;
-        font-size: .75em;
-  
-        &__weekday {
-          padding: .5em;
-        }
-      }
-  
-      &__weekNumbers {
-        font-weight: bold;
-  
-        .react-calendar__tile {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: .75em;
-          padding: calc(.75em / .75) calc(.5em / .75);
-        }
-      }
-  
-      &__days {
-        &__day {
-          &--weekend {
-            //color: rgb(209, 0, 0);
-          }
-  
-          &--neighboringMonth {
-          color: var(--cTxtDesc)
-          }
-        }
-      }
-    }
-  
-    &__year-view,
-    &__decade-view,
-    &__century-view {
-      .react-calendar__tile {
-        padding: 2em .5em;
-      }
-    }
-  
-    &__tile {
-      max-width: 100%;
-      text-align: center;
-      padding: .75em .5em;
-      background: none;
-  
-      &:disabled {
-          color: var(--cTxtDiscret)
-      }
-  
-      &:enabled {
-        &:hover, &:focus {
-            background-color: var(--cBgControl)
-        }
-      }
-  
-      &--now {
-        font-weight: 700;
-      }
-  
-      &--hasActive {
-        background: var(--cPrincipale);
-        color: #fff;
-      }
-  
-      &--active {
-        background: var(--cPrincipale);
-        color: #fff;
-      }
-    }
-  
-    &--selectRange {
-      .react-calendar__tile {
-        &--hover {
-            background-color: var(--cBgControl)
-        }
-      }
-    }
-  }