proteum 1.0.0-1

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

@@ -0,0 +1,267 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Core
+import type ClientApplication from '@client/app';
+import { fromJson as errorFromJson, NetworkError } from '@common/errors';
+import ApiClientService, { 
+    TPostData, TPostDataWithoutFile,
+    TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher,
+    TDataReturnedByFetchers
+} from '@common/router/request/api';
+
+
+// Specific
+import type { default as Router, Request } from '..';
+import { toMultipart } from './multipart';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+const debug = false;
+
+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,
+        public router = request.router,
+    ) {
+
+    }
+
+    /*----------------------------------
+    - HIGH LEVEL
+    ----------------------------------*/
+
+    public fetch<FetchersList extends TFetcherList = TFetcherList>( 
+        fetchers: FetchersList 
+    ): TDataReturnedByFetchers<FetchersList> {
+        throw new Error("api.fetch shouldn't be called here.");
+    }
+
+    public post = <TData extends unknown = unknown>(path: string, data?: TPostData, opts?: TApiFetchOptions) => 
+        this.createFetcher<TData>('POST', path, data, opts);
+
+    public set( newData: TObjetDonnees ) {
+
+        if (!('context' in this.router))
+            throw new Error("api.set is not available on server side.");
+
+        if (this.router.context.page)
+            this.router.context.page.setAllData(curData => ({ ...curData, ...newData }));
+        else
+            throw new Error(`[api] this.router.context.page undefined`)
+    }
+
+    public reload( ids?: string | string[], params?: TObjetDonnees ) {
+
+        if (!('context' in this.router))
+            throw new Error("api.reload is not available on server side.");
+        
+        const page = this.router.context.page;
+
+        if (ids === undefined)
+            ids = Object.keys(page.fetchers);
+        else if (typeof ids === 'string')   
+            ids = [ids];
+
+        debug && console.log("[api] Reload data", ids, params, page.fetchers);
+
+        for (const id of ids) {
+
+            const fetcher = 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 };
+
+            debug && console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
+
+            this.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
+
+                this.set({ [id]: data });
+
+            })
+        }
+    }
+
+    /*----------------------------------
+    - LOW LEVEL
+    ----------------------------------*/
+    public createFetcher<TData extends unknown = unknown>(...args: TFetcherArgs): TFetcher<TData> {
+        const [method, path, data, options] = args;
+
+        // Lazily create (and cache) the underlying promise so the fetcher behaves like a real promise instance.
+        let promise: Promise<TData> | undefined;
+
+        const fetcher = {
+            method, path, data, options,
+        } as TFetcher<TData>;
+
+        const getPromise = () => {
+            if (!promise)
+                promise = this.fetchAsync<TData>(fetcher.method, fetcher.path, fetcher.data, fetcher.options);
+
+            return promise;
+        };
+
+        // For async calls: api.post(...).then((data) => ...)
+        fetcher.then = (onfulfilled?: any, onrejected?: any) =>
+            getPromise().then(onfulfilled, onrejected) as any;
+
+        fetcher.catch = (onrejected?: any) =>
+            getPromise().catch(onrejected) as any;
+
+        fetcher.finally = (onfinally?: any) =>
+            getPromise().finally(onfinally) as any;
+
+        fetcher.run = () => getPromise();
+
+        return fetcher;
+    }
+
+    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.execute<TData>(method, path, data, options);
+    }
+
+    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) 
+            // The fetcher can be undefined
+            if (!( fetcherId in alreadyLoadedData ) && fetchers[ fetcherId ]) {
+                fetchersToRun[ fetcherId ] = fetchers[ fetcherId ]
+                fetchersCount++;
+            }
+
+        // Fetch all the api data thanks to one http request
+        const fetchedData = fetchersCount === 0
+            ? 0
+            : await this.execute("POST", "/api", { 
+                fetchers: fetchersToRun 
+            }).then((res) => {
+
+                const data: TObjetDonnees = {};
+                for (const id in res) 
+                    data[id] = res[id];
+
+                return data;
+
+            }).catch(e => {
+
+                // API Error hook
+                this.app.handleError(e);
+
+                throw e;
+            })
+
+        // Errors will be catched in the caller
+
+        return { ...alreadyLoadedData, ...fetchedData }
+    }
+
+    public configure = (...[method, path, data, options = {}]: TFetcherArgs) => {
+    
+        let url = this.router.url(path, {}, false);
+    
+        debug && console.log(`[api] Sending request`, method, url, data);
+    
+        // Create Fetch config
+        const config: With<RequestInit, 'headers'> = {
+            method: method,
+            headers: {
+                'Accept': "application/json",
+            }
+        };
+    
+        // Update options depending on data
+        if (data) {
+
+            // If file included in data, need to use multipart
+            // TODO: deep check
+            const hasFile = Object.values(data).some((value) => value instanceof File);
+            if (hasFile) {
+                // GET request = Can't send files
+                if (method === "GET")
+                    throw new Error("Cannot send file in GET request");
+                // Auto switch to multiplart
+                else if (options.encoding === undefined)
+                    options.encoding = 'multipart';
+                else if (options.encoding !== 'multipart')
+                // Encoding set to JSON = Can't send files
+                    throw new Error("Cannot send file in non-multipart request");
+            }
+
+            // Data encoding
+            if (method === "GET") {
+
+                const params = new URLSearchParams( data as unknown as TPostDataWithoutFile ).toString();
+                url = `${url}?${params}`;
+
+            } else if (options.encoding === 'multipart') {
+
+                debug && console.log("[api] Multipart request", data);
+                // Browser will automatically choose the right headers
+                config.body = toMultipart(data);
+
+            } else {
+                config.headers["Content-Type"] = "application/json";
+                config.body = JSON.stringify(data);
+            }
+        }
+    
+        return { url, config };
+    }
+    
+    public execute<TData = unknown>(...args: TFetcherArgs): Promise<TData> {
+        const { url, config } = this.configure(...args);
+
+        console.log(`[api] Fetching`, url, config);
+    
+        return fetch(url, config)
+            .then(async (response) => {
+                if (!response.ok) {
+
+                    const errorData = await response.json();
+                    console.warn(`[api] Failure:`, response.status, errorData);
+                    const error = errorFromJson(errorData);
+                    throw error;
+                }
+                const json = await response.json() as TData;
+                debug && console.log(`[api] Success:`, json);
+                return json;
+            })
+            .catch((error) => {
+                if (error instanceof TypeError) {
+                    // Network error
+                    console.warn(`[api] Network Failure:`, error);
+                    const networkError = new NetworkError(error.message);
+                    this.app.handleError(networkError);
+                    throw networkError;
+                } else {
+                    throw error;
+                }
+            });
+    }
+    
+}

package/client/services/router/request/history.ts

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+export type { Update } from 'history';
+
+export const history = (typeof window !== 'undefined') ? createBrowserHistory() : undefined;
+export const location = history?.location;

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

@@ -0,0 +1,53 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import { Location } from 'history'; 
+
+// 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.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/client/services/router/request/multipart.ts

@@ -0,0 +1,147 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Core
+import { TPostData } from '@common/router/request/api';
+
+/*----------------------------------
+- 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: TOptions, 
+    formData: FormData, 
+    parentKey: string
+) {
+
+    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 + '[]';
+                }
+            }
+
+            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
+----------------------------------*/
+/* Based on https://github.com/hyperatom/json-form-data
+    Changes:
+    - Add support for FileToUpload
+*/
+
+// options type
+type TOptions = {
+    initialFormData: FormData,
+    showLeafArrayIndexes: boolean,
+    includeNullValues: boolean,
+    mapping: (value: any) => any
+}
+
+export const toMultipart = (jsonObject: TPostData, options?: TOptions) => {
+
+    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.';
+    }
+
+    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/client/services/router/response/index.tsx

@@ -0,0 +1,128 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Libs 
+import type ServerRouter from '@server/services/router';
+import type ServerResponse from '@server/services/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'
+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';
+
+/*----------------------------------
+- 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,
+        request: ClientRequest<TRouter>,
+        route: TAnyRoute<TRouterContext>,
+        api: ClientRequest<TRouter>["api"],
+        page: ClientPage<TRouter>,
+        data: TObjetDonnees
+    }
+    // Expose client application services (api, socket, ...)
+    //TRouter["app"] 
+    & TApplication
+    & ReturnType<TRouter["config"]["context"]>
+)
+
+/*----------------------------------
+- 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: TAnyRoute | 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 basicContext: TRouterContext<TRouter, TRouter["app"]> = {
+
+            // App services (TODO: expose only services)
+            ...this.request.app,
+
+            // Router context
+            app: this.app,
+            request: this.request,
+            route: this.route,
+            api: this.request.api,
+            // Will be assigned when the controller will be runned
+            page: undefined as unknown as ClientPage<TRouter>, 
+            data: {},
+        }
+
+        const newContext: TRouterContext<TRouter, TRouter["app"]> = {
+            ...basicContext,
+            // Custom context
+            ...this.request.router.config.context( basicContext, this.request.router )
+        }
+
+        newContext.context = newContext;
+
+        // 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 newContext
+    }
+
+    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/client/services/router/response/page.ts

@@ -0,0 +1,86 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import type { ComponentChild } from 'preact';
+
+// Core
+import type { TClientOrServerContextForPage, Layout, TRoute, TErrorRoute } from '@common/router';
+import PageResponse, { TFrontRenderer } from "@common/router/response/page";
+
+// Specific
+import type ClientRouter from '..';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
+
+export default class ClientPage<TRouter = ClientRouter> extends PageResponse<TRouter> {
+
+    public scrollToId: string;
+
+    public constructor(
+        public route: TRoute | TErrorRoute,
+        public component: TFrontRenderer,
+        public context: TClientOrServerContextForPage,
+        public layout?: Layout
+    ) {
+
+        super(route, 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;
+
+        // Data succesfully loaded
+        this.context.data = this.data = data || await this.fetchData();
+
+        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");
+        }
+
+    }
+}