5htp-core 0.1.2 → 0.2.1

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

@@ -0,0 +1,227 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
+
+// Core
+import type { TApiResponseData } from '@server/services/router';
+import ApiClientService, { 
+    TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher 
+} from '@common/router/request/api';
+import { instancierViaCode, NetworkError } from '@common/errors';
+import type ClientApplication from '@client/app';
+
+// Specific
+import type { default as Router, Request } from '..';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+const debug = true;
+
+export type Config = {
+
+}
+
+/*----------------------------------
+- FUNCTION
+----------------------------------*/
+export default class ApiClient implements ApiClientService {
+
+    // APO Client needs to know the current request so we can monitor which api request is made from which page
+    public constructor( 
+        public app: ClientApplication, 
+        public request: Request<Router> 
+    ) {
+
+    }
+
+    /*----------------------------------
+    - HIGH LEVEL
+    ----------------------------------*/
+    public get = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+        this.createFetcher<TData>('GET', path, data, opts);
+
+    public post = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+        this.createFetcher<TData>('POST', path, data, opts);
+
+    public put = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+        this.createFetcher<TData>('PUT', path, data, opts);
+
+    public delete = <TData extends unknown = unknown>(path: string, data?: TObjetDonnees, opts?: TApiFetchOptions) => 
+        this.createFetcher<TData>('DELETE', path, data, opts);
+
+    
+    public set( newData: TObjetDonnees ) {
+
+        console.log("[api] Update page data", newData);
+        if (this.app.page)
+            this.app.page.setAllData(curData => ({ ...curData, ...newData }));
+        
+    }
+
+    public reload( ids?: string | string[], params?: TObjetDonnees ) {
+        
+        if (this.app.page === undefined)
+            throw new Error("context.page is missing");
+
+        if (ids === undefined)
+            ids = Object.keys(this.app.page.fetchers);
+        else if (typeof ids === 'string')   
+            ids = [ids];
+
+        console.log("[api] Reload data", ids, params, this.app.page.fetchers);
+
+        for (const id of ids) {
+
+            const fetcher = this.app.page.fetchers[id];
+            if (fetcher === undefined)
+                return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
+
+            if (params !== undefined)
+                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);
+
+            })
+        }
+    }
+
+    /*----------------------------------
+    - LOW LEVEL
+    ----------------------------------*/
+    public createFetcher<TData extends unknown = unknown>(...args: TFetcherArgs): TFetcher<TData> {
+        const [method, path, data, options] = args;
+        return {
+            method, path, data, options,
+            // For async calls: api.post(...).then((data) => ...)
+            then: (callback: (data: any) => void) => this.fetchAsync<TData>(...args).then(callback),
+            catch: (callback: (data: any) => void) => this.fetchAsync(...args).catch(callback),
+            finally: (callback: () => void) => this.fetchAsync(...args).finally(callback),
+            run: () => this.fetchAsync(...args)
+        };
+    }
+
+    public async fetchAsync<TData extends unknown = unknown>(...[
+        method, path, data, options
+    ]: TFetcherArgs): Promise<TData> {
+
+        /*if (options?.captcha !== undefined)
+            await this.gui.captcha.check(options?.captcha);*/
+
+        return await this.fetch<TData>(method, path, data, options).catch((e) => {
+            this.app.handleError(e);
+            throw e;
+        })
+    }
+
+    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++;
+            }
+
+        // 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];
+
+                return data;
+
+            });
+
+        return { ...alreadyLoadedData, ...fetchedData }
+    }
+
+    public configure = (...[method, path, data, options]: TFetcherArgs): AxiosRequestConfig => {
+
+        const { onProgress, captcha } = options || {};
+    
+        debug && console.log(`[api] Sending request`, method, path, data);
+    
+        const config: AxiosRequestConfig = {
+    
+            url: path,
+            method: method,
+            headers: {
+                'Content-Type': "application/json",
+                'Accept': "application/json",
+            },
+    
+            validateStatus: function (status: number) {
+                return status === 200;
+            },
+    
+            onUploadProgress: onProgress === undefined ? undefined : (e) => {
+                const percentCompleted = Math.round((e.loaded * 100) / e.total);
+                onProgress(percentCompleted);
+            }
+    
+        };
+    
+        if (data) {
+            if (method === "GET")
+                config.params = data;
+            else {
+                config.data = data;
+                if (data instanceof FormData)
+                    config.headers["Content-Type"] = 'multipart/form-data';
+            }
+        }
+    
+        return config;
+    }
+    
+    public fetch<TData = unknown>(...args: TFetcherArgs): Promise<TData> {
+    
+        const config = this.configure(...args);
+        
+        return axios.request(config)
+            .then((res: AxiosResponse<TApiResponseData>) => {
+    
+                debug && console.log(`[api] Success:`, res);
+                return res.data as TData;
+    
+            })
+            .catch((e: AxiosError) => {
+    
+                if (e.response !== undefined) {
+    
+                    console.warn(`[api] Failure:`, e);
+                    throw instancierViaCode(
+                        e.response.status || 500,
+                        e.response.data
+                    );
+    
+                // Erreur réseau: l'utilisateur n'ets probablement plus connecté à internet
+                } else {
+                    const error = new NetworkError(e.message);
+                    this.app.handleError(error);
+                    throw error;
+                }
+            });
+    }
+}

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

@@ -0,0 +1,52 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import { Location } from 'history'; 
+import type Bowser from 'bowser';
+
+// Core 
+import BaseRequest from '@common/router/request';
+
+// Specific
+import type ClientRouter from '..';
+import ApiClient from './api';
+import type ClientResponse from '../response';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+/*----------------------------------
+- ROUTER
+----------------------------------*/
+// Since we do SSR, the server router can also be passed here
+export default class ClientRequest<TRouter extends ClientRouter = ClientRouter> extends BaseRequest {
+
+    public api: ApiClient;
+    public response?: ClientResponse<TRouter>;
+    public hash?: string;
+
+    public constructor( 
+        location: Location, 
+        public router: TRouter,
+        public app = router.app
+    ) {
+
+        super(location.pathname);
+
+        this.host = window.location.host;
+        this.hash = location.hash;
+
+        this.api = new ApiClient(this.app, this);
+    }
+
+    // To move to a service
+    public device(): Bowser.Parser.ParsedResult | undefined {
+        // We load bowser only when required
+        const Bowser = require("bowser");
+        return Bowser.parse(window.navigator.userAgent);
+    }
+}

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

@@ -0,0 +1,107 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Libs 
+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 ClientApplication from '@client/app';
+import type { default as ClientRouter } from '@client/services/router'
+import type ClientResponse from '@client/services/router/response'
+import ClientRequest from '@client/services/router/request'
+import ClientPage from '@client/services/router/response/page'
+import { history } from '@client/services/router/request/history';
+import CommonPage from '@common/router/response/page';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type TPageResponse<TRouter extends ClientRouter> = (
+    ClientResponse<TRouter, ClientPage>
+    |
+    ServerResponse<ServerRouter, ClientPage>
+);
+
+export type TRouterContext<TRouter extends ClientRouter = ClientRouter, TApplication extends ClientApplication = ClientApplication> = (
+    // ClientPage context
+    {
+        app: TApplication,
+        context: TRouterContext<TRouter, TApplication>,
+        request: ClientRequest<TRouter>,
+        route: TRoute<TRouter>,
+        api: ClientRequest<TRouter>["api"],
+        page: ClientPage<TRouter>,
+        user: User
+    }
+    &
+    // Expose client application services (api, socket, ...)
+    //TRouter["app"] 
+    TApplication
+)
+
+/*----------------------------------
+- ROUTER
+----------------------------------*/
+export default class ClientPageResponse<
+    TRouter extends ClientRouter,
+    TData extends TResponseData = TResponseData
+> extends BaseResponse<TData> {
+
+    public context: TRouterContext<TRouter, TRouter["app"]>;
+
+    public constructor(
+        public request: ClientRequest<TRouter>,
+        public route: TRoute | TErrorRoute,
+
+        public app = request.app,
+    ) {
+
+        super(request);
+
+        request.response = this;
+
+        // Create response context for controllers
+        this.context = this.createContext();
+    }
+
+    private createContext(): TRouterContext<TRouter, TRouter["app"]> {
+
+        const context: TRouterContext<TRouter, TRouter["app"]> = {
+            // App services (TODO: expose only services)
+            ...this.request.app,
+            // Router context
+            app: this.app,
+            context: undefined as unknown as TRouterContext<TRouter, TRouter["app"]>,
+            request: this.request,
+            route: this.route,
+            api: this.request.api,
+        }
+
+        context.context = context;
+
+        return context;
+    }
+
+    public async runController( additionnalData: {} = {} ): Promise<ClientPage> {
+
+        // Run contoller
+        const result = this.route.controller(this.context);
+
+        // Default data type for `return <raw data>`
+        if (result instanceof ClientPage)
+            await result.preRender(additionnalData);
+        else
+            throw new Error(`Unsupported response format: ${result.constructor?.name}`);
+
+        return result;
+    }
+
+    public redirect(url: string) {
+        history?.replace(url);
+    }
+}

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

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

package/src/client/{context/socket.ts → services/socket/index.ts}

@@ -2,7 +2,7 @@
 - DEPENDANCES
 ----------------------------------*/
 
-import type { ClientContext } from '.';
+import type { ClientContext } from '../../context';
 
 import type { TDialogControls } from '@client/components/Dialog/Manager';
 
@@ -131,7 +131,7 @@ export default class SocketClient {
 
     public scopes: { [name: string]: SocketScope } = {}
 
-    public constructor(public context: ClientContext ) {
+    public constructor( public context: ClientContext ) {
 
         
     }

package/src/client/utils/dom.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'preact';
-import { history } from '@client/router/request/history';
+import { history } from '@client/services/router/request/history';
 
 type ElementOrSelector = HTMLElement | string;
 export const deepContains = (

package/src/common/app/index.ts

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

package/src/common/data/chaines/index.ts

@@ -11,6 +11,11 @@ export const nameToID = (name: string) => name.toLowerCase().replace(/[^a-z1-9]/
 
 export const ucfirst = (chaine: string): string => {
     return chaine.charAt(0).toUpperCase() + chaine.slice(1);
+} 
+
+export const linkify = (texte: string): string => {
+    const regex = /((http|https)\:\/\/([a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?))/gi;
+    return texte.replace(regex, '<a href="$1" target="_blank">$3</a>');
 }
 
 export const trim = (s: string, c: string) => {
@@ -19,12 +24,7 @@ export const trim = (s: string, c: string) => {
     return s.replace(new RegExp(
         "^[" + c + "]+|[" + c + "]+$", "g"
     ), "");
-}   
-
-export const linkify = (texte: string): string => {
-    const regex = /((http|https)\:\/\/([a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?))/gi;
-    return texte.replace(regex, '<a href="$1" target="_blank">$3</a>');
-}
+}  
 
 export const trimLeft = (chaine: string, toTrim: string) => chaine.startsWith(toTrim)
     ? chaine.substring(toTrim.length) : chaine;
@@ -32,6 +32,9 @@ export const trimLeft = (chaine: string, toTrim: string) => chaine.startsWith(to
 export const trimRight = (chaine: string, toTrim: string) => chaine.endsWith(toTrim)
     ? chaine.substring(0, -toTrim.length) : chaine;
 
+export const escapeRegExp = (string: string) =>
+    string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+
 /*----------------------------------
 - EXTRACT
 ----------------------------------*/