5htp-core 0.3.1 → 0.3.2-2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.3.1",
+	"version": "0.3.2-2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -61,7 +61,6 @@
 		"mysql2": "^2.3.0",
 		"nodemailer": "^6.6.3",
 		"object-sizeof": "^1.6.3",
-		"ololog": "^1.1.175",
 		"path-to-regexp": "^6.2.0",
 		"picomatch": "^2.3.1",
 		"preact": "^10.5.15",
@@ -75,6 +74,7 @@
 		"request": "^2.88.2",
 		"sharp": "^0.29.1",
 		"sql-formatter": "^4.0.2",
+		"tslog": "^4.9.1",
 		"uuid": "^8.3.2",
 		"uuid-by-string": "^3.0.4",
 		"validator": "^13.7.0",

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

@@ -65,6 +65,7 @@
         gap: @spacing / 2;
         min-width: 4em;
         font-size: 1rem;
+        z-index: 1; // Make the label on top of ::before for example
 
         li > & {
             flex: 1;
@@ -111,7 +112,7 @@
         }
 
         > i {
-            color: inherit !important;
+            color: inherit;
         }
 
     }

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

@@ -19,7 +19,7 @@ export const Link = ({ to, ...props }: {
 } & React.HTMLProps<HTMLAnchorElement>) => {
 
     // External = open in new tab by default
-    if (to[0] !== '/' || to.startsWith('//'))
+    if (to && (to[0] !== '/' || to.startsWith('//')))
         props.target = '_blank';
     // Otherwise, propagate to the router
     else 

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

@@ -22,6 +22,7 @@ export default ({ page, isCurrent }: { page: Page, isCurrent?: boolean }) => {
         page.loading  ? null : page.data 
     );
     page.setAllData = setApiData;
+    context.data = apiData;
  
     React.useEffect(() => {
 
@@ -47,10 +48,11 @@ export default ({ page, isCurrent }: { page: Page, isCurrent?: boolean }) => {
         <page.renderer 
             // Services
             {...context} 
-            // URL params
-            {...context.request.data} 
-            // API data
-            {...apiData} 
+            // API data & URL params
+            data={{
+                ...apiData,
+                ...context.request.data
+            }}
         />
         
     ) : null

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

@@ -20,7 +20,7 @@ import BaseRouter, {
 import { getLayout } from '@common/router/layouts';
 import { getRegisterPageArgs, buildRegex } from '@common/router/register';
 import { TFetcherList } from '@common/router/request/api';
-import type { TFrontRenderer, TDataProvider } from '@common/router/response/page';
+import type { TFrontRenderer } from '@common/router/response/page';
 
 import App from '@client/app/component';
 import type ClientApplication from '@client/app';
@@ -61,21 +61,18 @@ export type Response = ClientResponse<ClientRouter> | ServerResponse<ServerRoute
 - TYPES: ROUTES LOADING
 ----------------------------------*/
 
-// WARN: To be updated with the mplemenations list of Router.page
+// WARN: To be updated with the mplemenations list of Router.page AND the routes babel plugin
 //      (both server and client side)
-export type TRegisterPageArgs<TProvidedData extends TFetcherList = {}, TRouter extends Router = Router> = ([
+export type TRegisterPageArgs<
+    TProvidedData extends TFetcherList = TFetcherList, 
+    TRouter extends Router = Router
+> = ([
     path: string,
-    controller: TDataProvider<TProvidedData> | null,
     renderer: TFrontRenderer<TProvidedData>
 ] | [
     path: string,
     options: Partial<TRoute["options"]>,
     renderer: TFrontRenderer<TProvidedData>
-] | [
-    path: string,
-    options: Partial<TRoute["options"]>,
-    controller: TDataProvider<TProvidedData> | null,
-    renderer: TFrontRenderer<TProvidedData>
 ])
 
 // Route definition passed by the server
@@ -221,28 +218,20 @@ export default class ClientRouter<
         return currentRoute;
     }
 
-    public page(
+    public page<TProvidedData extends TFetcherList = TFetcherList>(
         path: string,
-        controller: TDataProvider<{}> | null,
-        renderer: TFrontRenderer<{}>
+        renderer: TFrontRenderer<TProvidedData>
     ): TRoute;
 
-    public page(
+    public page<TProvidedData extends TFetcherList = TFetcherList>(
         path: string,
         options: Partial<TRoute["options"]>,
-        renderer: TFrontRenderer<{}>
-    ): TRoute;
-
-    public page(
-        path: string,
-        options: Partial<TRoute["options"]>,
-        controller: TDataProvider<{}> | null,
-        renderer: TFrontRenderer<{}>
+        renderer: TFrontRenderer<TProvidedData>
     ): TRoute;
 
     public page(...args: TRegisterPageArgs): TRoute {
 
-        const { path, options, controller, renderer, layout } = getRegisterPageArgs(...args);
+        const { path, options, renderer, layout } = getRegisterPageArgs(...args);
 
         // S'il s'agit d'une page, son id doit avoir été injecté via le plugin babel
         const id = options["id"];
@@ -260,7 +249,7 @@ export default class ClientRouter<
                 ...defaultOptions,
                 ...options
             },
-            controller: (context: TClientOrServerContext) => new ClientPage(controller, renderer, context, layout)
+            controller: (context: TClientOrServerContext) => new ClientPage(route, renderer, context, layout)
         };
 
         this.routes.push(route);
@@ -275,7 +264,7 @@ export default class ClientRouter<
 
         const route: TErrorRoute = {
             code,
-            controller: (context: TClientOrServerContext) => new ClientPage(null, renderer, context, layout),
+            controller: (context: TClientOrServerContext) => new ClientPage(route, renderer, context, layout),
             options
         };
 
@@ -391,7 +380,9 @@ export default class ClientRouter<
 
         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`);
 
@@ -404,7 +395,7 @@ export default class ClientRouter<
         pageData: {} = {}
     ): Promise<ClientPage> {
 
-        // Load if not done before
+        // Load the route if not done before
         if ('load' in route)
             route = this.routes[route.index] = await this.load(route);
 

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

@@ -9,7 +9,8 @@ import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
 import type { TApiResponseData } from '@server/services/router';
 import ApiClientService, { 
     TPostData,
-    TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher 
+    TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher,
+    TDataReturnedByFetchers
 } from '@common/router/request/api';
 import { instancierViaCode, NetworkError } from '@common/errors';
 import type ClientApplication from '@client/app';
@@ -46,6 +47,13 @@ export default class ApiClient implements ApiClientService {
     /*----------------------------------
     - HIGH LEVEL
     ----------------------------------*/
+
+    public fetch<TProvidedData extends TFetcherList = TFetcherList>( 
+        fetchers: TFetcherList 
+    ): TDataReturnedByFetchers<TProvidedData> {
+        throw new Error("api.fetch shouldn't be called here.");
+    }
+
     public get = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
         this.createFetcher<TData>('GET', path, data, opts);
 
@@ -120,7 +128,7 @@ export default class ApiClient implements ApiClientService {
         /*if (options?.captcha !== undefined)
             await this.gui.captcha.check(options?.captcha);*/
 
-        return await this.fetch<TData>(method, path, data, options).catch((e) => {
+        return await this.execute<TData>(method, path, data, options).catch((e) => {
             this.app.handleError(e);
             throw e; // Throw to break the loop
         })
@@ -141,7 +149,7 @@ export default class ApiClient implements ApiClientService {
         // Fetch all the api data thanks to one http request
         const fetchedData = fetchersCount === 0
             ? 0
-            : await this.fetch("POST", "/api", { 
+            : await this.execute("POST", "/api", { 
                 fetchers: fetchersToRun 
             }).then((res) => {
 
@@ -201,7 +209,7 @@ export default class ApiClient implements ApiClientService {
         return config;
     }
     
-    public fetch<TData = unknown>(...args: TFetcherArgs): Promise<TData> {
+    public execute<TData = unknown>(...args: TFetcherArgs): Promise<TData> {
     
         const config = this.configure(...args);
         

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

@@ -6,8 +6,8 @@
 import type { ComponentChild } from 'preact';
 
 // Core
-import type { TClientOrServerContext, Layout } from '@common/router';
-import PageResponse, { TDataProvider, TFrontRenderer } from "@common/router/response/page";
+import type { TClientOrServerContext, Layout, TRoute, TErrorRoute } from '@common/router';
+import PageResponse, { TFrontRenderer } from "@common/router/response/page";
 
 // Specific
 import type ClientRouter from '..';
@@ -29,15 +29,13 @@ export default class ClientPage<TRouter = ClientRouter> extends PageResponse<TRo
     public scrollToId: string;
 
     public constructor(
-        public dataProvider: TDataProvider | null,
+        public route: TRoute | TErrorRoute,
         public component: TFrontRenderer,
         public context: TClientOrServerContext,
-        public layout?: Layout,
-
-        public route = context.route
+        public layout?: Layout
     ) {
 
-        super(dataProvider, component, context);
+        super(route, component, context);
 
         this.bodyId = context.route.options.bodyId;
         this.scrollToId = context.request.hash;

package/src/common/router/index.ts

@@ -20,7 +20,7 @@ import type { TUserRole } from '@server/services/users';
 import type { TAppArrowFunction } from '@common/app';
 
 // Specfic
-import type { default as Page, TFrontRenderer } from './response/page';
+import type { default as Page, TFrontRenderer, TDataProvider } from './response/page';
 
 /*----------------------------------
 - TYPES: ROUTES
@@ -81,6 +81,7 @@ export type TRouteOptions = {
 
     // Injected by the page plugin
     filepath?: string,
+    data?: TDataProvider
 
     // Indexing
     bodyId?: string,

package/src/common/router/register.ts

@@ -10,7 +10,7 @@ import { getLayout } from './layouts';
 
 // types
 import type { TRouteOptions } from '.';
-import type { TDataProvider, TFrontRenderer } from './response/page';
+import type { TFrontRenderer } from './response/page';
 import type { TRegisterPageArgs } from '@client/services/router';
 
 /*----------------------------------
@@ -21,20 +21,17 @@ export const getRegisterPageArgs = (...args: TRegisterPageArgs) => {
 
     let path: string;
     let options: Partial<TRouteOptions> = {};
-    let controller: TDataProvider|null;
     let renderer: TFrontRenderer;
 
-    if (args.length === 4)
-        ([path, options, controller, renderer] = args)
-    else if (typeof args[1] === 'object')
-        ([path, options, renderer] = args)
+    if (args.length === 2)
+        ([path, renderer] = args)
     else
-        ([path, controller, renderer] = args)
+        ([path, options, renderer] = args)
 
     // Automatic layout form the nearest _layout folder
     const layout = getLayout(path, options);
 
-    return { path, options, controller, renderer, layout }
+    return { path, options, renderer, layout }
 
 }
 

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

@@ -2,10 +2,11 @@
 - DEPENDANCES
 ----------------------------------*/
 
-import type { ComponentChild, FunctionComponent } from 'preact';
+// Npm
+import type { VNode } from 'preact';
 
 // Core libs
-import { ClientOrServerRouter, TClientOrServerContext } from '@common/router';
+import { ClientOrServerRouter, TClientOrServerContext, TRoute, TErrorRoute } from '@common/router';
 import { TFetcherList, TDataReturnedByFetchers } from '@common/router/request/api';
 import { history } from '@client/services/router/request/history';
 
@@ -14,21 +15,30 @@ import { history } from '@client/services/router/request/history';
 ----------------------------------*/
 
 // The function that fetch data from the api before to pass them as context to the renderer
-export type TDataProvider<TProvidedData extends TFetcherList = {}> = 
-    (context: TClientOrServerContext/* & TUrlData */) => TProvidedData
+export type TDataProvider<TProvidedData extends TFetcherList = TFetcherList> = (
+    context: TClientOrServerContext & {
+        // URL query parameters
+        // TODO: typings
+        data: {[key: string]: string | number}
+    }
+) => TProvidedData
 
 // The function that renders routes
 export type TFrontRenderer<
-    TProvidedData extends TFetcherList = {}, 
-    TAdditionnalData = {},
+    TProvidedData extends TFetcherList = TFetcherList, 
+    TAdditionnalData extends {} = {},
     TRouter = ClientOrServerRouter,
-> = FunctionComponent<(
-    TClientOrServerContext 
-    & 
-    TDataReturnedByFetchers<TProvidedData>
-    &
-    TAdditionnalData
-)>;
+> = ( 
+    context: (
+        TClientOrServerContext 
+        &
+        TAdditionnalData
+        &
+        {
+            data: TDataReturnedByFetchers<TProvidedData>
+        }
+    )
+) => VNode<any> | null
 
 // Script or CSS resource
 export type TPageResource = {
@@ -46,7 +56,7 @@ const debug = false;
 /*----------------------------------
 - CLASS
 ----------------------------------*/
-export default class PageResponse<TRouter extends ClientOrServerRouter = ClientOrServerRouter> {
+export default abstract class PageResponse<TRouter extends ClientOrServerRouter = ClientOrServerRouter> {
 
     // Metadata
     public chunkId: string;
@@ -65,7 +75,7 @@ export default class PageResponse<TRouter extends ClientOrServerRouter = ClientO
     public data: TObjetDonnees = {};
 
     public constructor(
-        public dataProvider: TDataProvider | null,
+        public route: TRoute | TErrorRoute,
         public renderer: TFrontRenderer,
         public context: TClientOrServerContext
     ) {
@@ -77,8 +87,12 @@ export default class PageResponse<TRouter extends ClientOrServerRouter = ClientO
     public async fetchData() {
 
         // Load the fetchers list to load data if needed
-        if (this.dataProvider)
-            this.fetchers = this.dataProvider({ ...this.context, ...this.context.request.data });
+        const dataFetcher = this.route.options.data;
+        if (dataFetcher)
+            this.fetchers = dataFetcher({
+                ...this.context,
+                data: this.context.request.data
+            });
 
         // Execute the fetchers for missing data
         debug && console.log(`[router][page] Fetching api data:` + Object.keys(this.fetchers));

package/src/server/app/index.ts

@@ -4,9 +4,13 @@
 
 // Core
 import AppContainer from './container';
-import ApplicationService, { AnyService } from './service';
+import ApplicationService, { StartedServicesIndex } from './service';
 import CommandsManager from './commands';
-import ServicesContainer, { TRegisteredService, TServiceMetas } from './service/container';
+import ServicesContainer, { 
+    ServicesContainer as ServicesContainerClass, 
+    TRegisteredService, 
+    TServiceMetas 
+} from './service/container';
 import type { ServerBug } from '../services/console';
 
 // Built-in
@@ -49,7 +53,12 @@ export const Service = ServicesContainer;
 /*----------------------------------
 - FUNCTIONS
 ----------------------------------*/
-export class Application extends ApplicationService<Config, Hooks, /* TODO: this ? */Application, {}> {
+export class Application<
+    TServicesContainer extends ServicesContainerClass = ServicesContainerClass
+> extends ApplicationService<Config, Hooks, /* TODO: this ? */Application, {}> {
+
+    public app!: this;
+    public servicesContainer!: TServicesContainer;
 
     /*----------------------------------
     - PROPERTIES

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

@@ -53,7 +53,7 @@ export class ServicesContainer<
     public registered: TRegisteredServicesIndex = {}
 
     // All service instances by service id
-    public allServices: {[serviceId: string]: AnyService} = {}
+    public allServices: TServicesIndex = {} as TServicesIndex
 
     public setup<TServiceId extends keyof TServicesIndex>( 
         serviceId: keyof TServicesIndex, 
@@ -106,7 +106,8 @@ export class ServicesContainer<
             ...Object.getOwnPropertyNames( Object.getPrototypeOf( instance )),
             ...Object.getOwnPropertyNames( instance ),
             // service.launch() isn't included, maybe because parent abstract class
-            'launch'
+            'launch',
+            'bindServices'
         ];
 
         for (const method of methods)

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

@@ -12,7 +12,8 @@ import ServicesContainer from './container';
 - TYPES: OPTIONS
 ----------------------------------*/
 
-export type AnyService = Service<{}, {}, Application, {}>
+export type AnyService<TSubServices extends StartedServicesIndex = StartedServicesIndex> = 
+    Service<{}, {}, Application, TSubServices>
 
 type TServiceConfig = {
     debug?: boolean
@@ -82,8 +83,7 @@ export default abstract class Service<
             : app
 
         // Instanciate subservices
-        for (const localName in services)
-            this.bindService( localName, services[localName] as unknown as TRegisteredService );
+        this.bindServices( services );
         
     }
 
@@ -140,10 +140,26 @@ export default abstract class Service<
     // this.use immediatly instanciate the subservice for few reasons:
     // - The subservice instance can be accesses from another service in the constructor, no matter the order of loading of the services
     // - Consistency: the subserviuce proprties shouldn't be assogned to two different values according depending on the app lifecycle
-    public use<TServiceId extends keyof TServicesIndex>( 
+    public use<
+        TInstalledServices extends this["app"]["servicesContainer"]["allServices"],
+        TServiceId extends keyof TInstalledServices,
+        TServiceClass extends TInstalledServices[TServiceId],
+        TSubServices extends TServiceClass["services"],
+    >( 
         serviceId: TServiceId, 
-        // TODO: Only subservices types supported by the parent service
-        subServices: TServicesIndex[TServiceId]["services"] = {}
+        subServices?: TSubServices
+    ): (
+        // We can't pass the services types as a generic to TServiceClass
+        // So we overwrite the services property
+        ReturnType< TServiceClass["getServiceInstance"] >
+        &
+        {
+            new (...args: any[]): TServiceClass["getServiceInstance"] & { services: TSubServices },
+            services: TSubServices
+        }
+        /*Omit<TServiceClass, 'services'> & {
+            services: TSubServices
+        }*/
     ) {
 
         // Check of the service has been configurated
@@ -152,12 +168,17 @@ export default abstract class Service<
             throw new Error(`Unable to use service "${serviceId}": This one hasn't been setup.`);
 
         // Bind subservices
-        registered.subServices = subServices;
+        if (subServices !== undefined)
+            registered.subServices = {
+                ...registered.subServices,
+                ...subServices
+            };
 
         // Check if not already instanciated
         const existing = ServicesContainer.allServices[ serviceId ];
         if (existing !== undefined) {
             console.info("Service", serviceId, "already instanciated through another service.");
+            existing.bindServices( registered.subServices );
             return existing;
         }
 
@@ -166,17 +187,28 @@ export default abstract class Service<
         const ServiceClass = registered.metas.class().default;
 
         // Create class instance
-        const service = new ServiceClass(this, registered.config, registered.subServices, this.app || this)
-            .getServiceInstance()
+        const service = new ServiceClass(
+            this, 
+            registered.config, 
+            registered.subServices, 
+            this.app || this
+        )
+        const serviceInstance = service.getServiceInstance();
 
         // Bind his own metas
         service.metas = registered.metas;
-        ServicesContainer.allServices[ registered.metas.id ] = service;
+        ServicesContainer.allServices[ registered.metas.id ] = serviceInstance;
+
+        return serviceInstance;
+    }
+
+    public bindServices( services: TServicesIndex ) {
 
-        return service;
+        for (const localName in services)
+            this.bindService( localName, services[localName] as unknown as TRegisteredService );
     }
 
-    protected bindService( localName: string, service: AnyService ) {
+    public bindService( localName: string, service: AnyService ) {
 
         const serviceScope = this.constructor.name + '.' + localName;
 
@@ -196,7 +228,7 @@ export default abstract class Service<
         
     }
 
-    protected async startService( localName: string, service: AnyService ) {
+    public async startService( localName: string, service: AnyService ) {
         // Service already started
         if (!service.started) {
 

package/src/server/app.tsconfig.json

@@ -5,7 +5,7 @@
         "baseUrl": "..",
         "paths": {
 
-            "@/server/models": ["./server/.generated/models"],
+            "@/server/models": ["./server/.generated/models.d.ts"],
 
             "@client/*": ["../node_modules/5htp-core/src/client/*"],
             "@common/*": ["../node_modules/5htp-core/src/common/*"],

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

@@ -3,8 +3,8 @@
 ----------------------------------*/
 // Npm
 import Ansi2Html from 'ansi-to-html';
-import { Logger, ILogObject } from "tslog"
-import type { Console } from '.';;
+import { formatWithOptions } from 'util';
+import type { default as Console, TJsonLog } from '.';;
 
 var ansi2Html = new Ansi2Html({
     newline: true,
@@ -35,30 +35,31 @@ var ansi2Html = new Ansi2Html({
 /*----------------------------------
 - METHOD
 ----------------------------------*/
-export default (log: ILogObject, c: Console) => {
+export default (log: TJsonLog, c: Console) => {
 
-    if (log.logLevel === 'error') {
+    // Print metas as ANSI
+    const logMetaMarkup = c.logger._prettyFormatLogObjMeta({
+        date: log.time,
+        logLevelId: c.getLogLevelId( log.level ),
+        logLevelName: log.level,
+        // We consider that having the path is useless in this case
+        path: undefined,
+    });
 
-        // Enrichissement erreurs
-        for (const arg of log.argumentsArray) {
-
-            // Chemin complet pour pouvoir l'ouvrir dans un éditeyr via un clic
-            if (typeof arg === 'object' && arg.stack !== undefined) for (const stack of arg.stack)
-                stack.filePath = stack.fullFilePath;
-
-        }
-    }
-
-    // BUG: log.date pas pris encompte, affiche la date actuelle
-    //  https://github.com/fullstack-build/tslog/blob/master/src/LoggerWithoutCallSite.ts#L509
-
-    let ansi: string = '';
-    const myStd = { write: (message: string) => ansi += message }
-    c.logger.printPrettyLog(myStd, log);
+    // Print args as ANSI
+    const logArgsAndErrorsMarkup =  c.logger.runtime.prettyFormatLogObj( log.args, c.logger.settings);
+    const logErrors = logArgsAndErrorsMarkup.errors;
+    const logArgs = logArgsAndErrorsMarkup.args;
+    const logErrorsStr = (logErrors.length > 0 && logArgs.length > 0 ? "\n" : "") + logErrors.join("\n");
+    c.logger.settings.prettyInspectOptions.colors = c.logger.settings.stylePrettyLogs;
+    let ansi = logMetaMarkup + formatWithOptions(c.logger.settings.prettyInspectOptions, ...logArgs) + logErrorsStr;
 
+    // Use HTML spaces
     ansi = ansi.replace(/ {2}/g, ' ');
     ansi = ansi.replace(/\t/g, ' '.repeat(8));
+    ansi = ansi.replace(/\n/g, '<br/>');
 
+    // Convert ANSI to HTML
     const html = ansi2Html.toHtml(ansi)
 
     return html;