5htp-core 0.1.2 → 0.2.1

package/src/client/{router/component.tsx → services/router/components/router.tsx}

@@ -4,21 +4,21 @@
 // Npm
 import React from 'react';
 
-// Libs
-import useContext from '@client/context';
-import ClientRequest from './request';
+// Core
+import useContext from '@/client/context';
+
+// Specific
+import type Router from '..';
+import PageComponent from './Page';
+import ClientRequest from '../request';
+import { history, location, Update } from '../request/history';
 //import initTooltips from '@client/components/Donnees/Tooltip';
-
-// Navigation
-import router from '.';
-import { history, location, Update } from './request/history';
+import type Page from '../response/page';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-import type PageResponse from '../../common/router/response/page';
-
 export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & {
     data: {[cle: string]: unknown}
 }
@@ -27,52 +27,20 @@ export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & {
 - PAGE STATE
 ----------------------------------*/
 
-const Page = ({ page, isCurrent }: { page: PageResponse, isCurrent?: boolean }) => {
-
-    const gui = useContext();
-
-    const [data, setData] = React.useState<{[k: string]: any} | null>( page.loading ? null : page.data );
-    page.setAllData = setData;
- 
-    React.useEffect(() => {
-
-        if (data === null && isCurrent)
-            page.fetchData().then( loadedData => {
-                page.loading = false;
-                setData(loadedData);
-            })
-
-    }, []);
-
-    return (
-        <div 
-            class={"page" + (isCurrent ? ' current' : '')} 
-            id={page.id === undefined ? undefined : 'page_' + page.id}
-        >
-
-            {/* Make request parameters and api data accessible from the page component */}
-            {page.component ? (
-
-                <page.component {...gui.request.data} {...data} />
-                
-            ) : null}
-
-        </div>
-    )
-}
+const LogPrefix = `[router][component]`
 
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default () => {
+export default ({ service: router }: { service: Router }) => {
 
-    const gui = useContext();
+    const context = useContext();
 
     const [pages, setPages] = React.useState<{
-        current: undefined | PageResponse,
-        //previous: undefined | PageResponse
+        current: undefined | Page,
+        //previous: undefined | Page
     }>({
-        current: gui.page,
+        current: context.page,
         //previous: undefined
     });
     
@@ -82,8 +50,8 @@ export default () => {
         //  If needed to play with pages, do it in the setPages callback below
 
         // Load the route chunks
-        gui.request = request;
-        const newpage = gui.page = await router.resolve(request, gui);
+        context.request = request;
+        const newpage = context.page = await router.resolve(request);
 
         // Page not found: Directly load with the browser
         if (newpage === undefined) {
@@ -94,22 +62,34 @@ export default () => {
             return;
         }
 
-        // Set loading state
-        newpage.loading = <i src="spin" />
+        // Set.loading  state
+        newpage.isLoading = true;
+        newpage.loading  = <i src="spin" />
         // Add page container
         setPages( pages => {
 
-            // Page unchanges
-            if (pages.current?.route.path === request.path)  {
-                console.warn("Canceling navigation to the same page:", {...request});
+            const currentRoute = pages.current?.route;
+
+            // Check if the page changed
+            if (currentRoute?.path === request.path)  {
+                console.warn(LogPrefix, "Canceling navigation to the same page:", {...request});
                 return pages;
             }
 
-            //  Layout change
-            const curLayout = pages.current?.route.options.layout;
-            const newlayout = newpage?.route.options.layout;
-            if (newlayout && curLayout && newlayout.path !== curLayout.path) {
-                gui.setLayout(newlayout);
+            // If if the layout changed
+            const curLayout = currentRoute?.options.layout;
+            const newLayout = newpage?.route.options.layout;
+            if (newLayout && curLayout && newLayout.path !== curLayout.path) {
+
+                // TEMPORARY FIX: reload everything when we change layout
+                //  Because layout can have a different theme
+                //  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);
+                return pages;
+
+                context.app.setLayout(newLayout);
             }
 
             // Remove old page after the aff-page css transition
@@ -128,8 +108,8 @@ export default () => {
         });
     }
 
-    const restoreScroll = (currentPage?: PageResponse) => currentPage?.hash 
-        && document.getElementById( currentPage.hash.substring(1) )?.scrollIntoView({
+    const restoreScroll = (currentPage?: Page) => currentPage?.scrollToId 
+        && document.getElementById( currentPage.scrollToId.substring(1) )?.scrollIntoView({
             behavior: "smooth", 
             block: "start", 
             inline: "nearest"
@@ -138,19 +118,15 @@ export default () => {
     // First load
     React.useEffect(() => {
 
-        /*gui.api.set = (newData: TObjetDonnees) =>  {
-            setPage(a => ({ ...a, data: { ...a.data, ...newData } }));
-        }*/
-
         // Resolve page if it wasn't done via SSR
-        if (gui.page === undefined)
-            resolvePage(gui.request);
+        if (context.page === undefined)
+            resolvePage(context.request);
 
         // Foreach URL change (Ex: bowser' back buttton)
         return history?.listen(async (locationUpdate) => {
 
             // Load the concerned route
-            const request = new ClientRequest(locationUpdate.location, gui);
+            const request = new ClientRequest(locationUpdate.location, context);
             await resolvePage(request);
             
             // Scroll to the selected content via url hash
@@ -161,16 +137,15 @@ export default () => {
     // On every page change
     React.useEffect(() => {
 
-        // Tracking
-        gui.event('pageview');
         // Reset scroll
         window.scrollTo(0, 0);
         // Should be called AFTER rendering the page (so after the state change)
-        gui.page?.updateClient();
-
+        pages.current?.updateClient();
         // Scroll to the selected content via url hash
         restoreScroll(pages.current);
-            
+
+        // Hooks
+        router.runHook('page.changed', pages.current)
         
     }, [pages.current]);
     
@@ -181,7 +156,10 @@ export default () => {
         )*/}
 
         {pages.current && (
-            <Page page={pages.current} isCurrent key={pages.current.id === undefined ? undefined : 'page_' + pages.current.id} />
+            <PageComponent page={pages.current} 
+                isCurrent 
+                key={pages.current.id === undefined ? undefined : 'page_' + pages.current.id} 
+            />
         )}
     </>
 }

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

@@ -0,0 +1,453 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// Core
+import type {
+    default as ServerRouter,
+    Request as ServerRequest,
+    Response as ServerResponse
+} from '@server/services/router';
+import type { TBasicSSrData } from '@server/services/router/response';
+
+import { Erreur } from '@common/errors';
+import BaseRouter, {
+    defaultOptions, TRoute, TErrorRoute, TClientOrServerContext, TRouteModule
+} from '@common/router'
+import { getRegisterPageArgs, buildRegex } from '@common/router/register';
+import { TFetcherList } from '@common/router/request/api';
+import type { TFrontRenderer, TDataProvider } from '@common/router/response/page';
+
+import App from '@client/app/component';
+import type ClientApplication from '@client/app';
+import Service from '@client/app/service';
+
+// Specific
+import ClientRequest from './request';
+import { location, history } from './request/history';
+import ClientResponse from './response';
+import ClientPage from './response/page';
+
+// Routes (import __register)
+import * as coreRoutes from '@client/pages/**/*.tsx';
+import * as appRoutes from '@/client/pages/**/*.tsx';
+
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+
+const debug = true;
+const LogPrefix = '[router]'
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+// Client router can handle Client requests AND Server requests (for pages only)
+export type { default as ClientResponse, TRouterContext } from "./response";
+export { Link } from './components/Link';
+
+export type Router = ClientRouter | ServerRouter;
+
+export type Request = ClientRequest<ClientRouter> | ServerRequest<ServerRouter>;
+
+export type Response = ClientResponse<ClientRouter> | ServerResponse<ServerRouter>;
+
+/*----------------------------------
+- TYPES: ROUTES LOADING
+----------------------------------*/
+
+export type TRegisterPageArgs<TProvidedData extends TFetcherList = {}, TRouter extends Router = Router> = ([
+    path: string,
+    controller: TDataProvider<TProvidedData> | null,
+    renderer: TFrontRenderer<TProvidedData>
+] | [
+    path: string,
+    options: Partial<TRoute["options"]>,
+    controller: TDataProvider<TProvidedData> | null,
+    renderer: TFrontRenderer<TProvidedData>
+])
+
+// Route definition passed by the server
+export type TSsrUnresolvedRoute = {
+    chunk: string,
+} & ({
+    // Normal route
+    regex: string,
+    keys: TRoute["keys"]
+} | {
+    // Error
+    code: number
+})
+
+// Route definition without having loaded the controller
+type TUnresolvedRoute = TUnresolvedErrorRoute | TUnresolvedNormalRoute;
+
+export type TUnresolvedErrorRoute = {
+    index: number,
+    chunk: string,
+    code: number,
+    load: TRouteLoader<TErrorRoute>,
+}
+
+export type TUnresolvedNormalRoute = {
+    index: number,
+    chunk: string,
+    code: number,
+    load: TRouteLoader<TErrorRoute>,
+}
+
+type TRouteLoader<Route extends TRoute | TErrorRoute = TRoute | TErrorRoute> = () => Promise<TRouteModule<Route>>;
+
+export type TFetchedRoute = Pick<TRoute, 'path' | 'options' | 'controller' | 'method'>
+
+export type TRoutesLoaders = {
+    [chunkId: string]: () => Promise</* Preloaded via require() */TFetchedRoute | /* Loader via import() */TRouteLoader/* | undefined*/>
+}
+
+/*----------------------------------
+- SERVICE TYPES
+----------------------------------*/
+
+export type THookCallback<TRouter extends ClientRouter> = (request: ClientRequest<TRouter>) => void;
+
+type THookName = 'location.change' | 'page.changed'
+
+type Config = {
+    preload: string[], // List of globs
+}
+
+/*----------------------------------
+- ROUTER
+----------------------------------*/
+export default class ClientRouter<
+    TApplication extends ClientApplication = ClientApplication
+> extends Service<Config, ClientApplication> implements BaseRouter {
+
+    public ssrData = window["ssr"] as (TBasicSSrData | undefined);
+    public ssrRoutes = window["routes"] as TSsrUnresolvedRoute[];
+
+    public constructor(app: TApplication, config: Config) {
+
+        super(app, config);
+    }
+
+    public async start() {
+
+        const currentRoute = await this.registerRoutes();
+
+        this.initialRender(currentRoute);
+    }
+
+    public go( url: string ) {
+        history?.replace(url);
+    }
+
+    /*----------------------------------
+    - REGISTRATION
+    ----------------------------------*/
+
+    public routes: (TRoute | TUnresolvedNormalRoute)[] = [];
+    public errors: { [code: number]: TErrorRoute | TUnresolvedErrorRoute } = {};
+
+    public async registerRoutes() {
+
+        const loaders: TRoutesLoaders = { ...coreRoutes, ...appRoutes }
+        let currentRoute: TUnresolvedRoute | undefined;
+        debug && console.log(LogPrefix, `Indexing routes and finding the current route from ssr data:`, this.ssrData);
+
+        // Associe la liste des routes (obtenue via ssr) à leur loader
+        for (let routeIndex = 0; routeIndex < this.ssrRoutes.length; routeIndex++) {
+
+            const ssrRoute = this.ssrRoutes[routeIndex];
+
+            if (loaders[ssrRoute.chunk] === undefined) {
+                console.error("Chunk id not found for ssr route:", ssrRoute, "Searched in:", loaders);
+                throw new Error(`Loader not found for chunk id ${ssrRoute.chunk}`);
+            }
+
+            // TODO: Fix types
+            const loader = loaders[ssrRoute.chunk];
+
+            // Register the route
+            let route: TUnresolvedRoute;
+            if ('code' in ssrRoute)
+                route = this.errors[ssrRoute.code] = {
+                    code: ssrRoute.code,
+                    chunk: ssrRoute.chunk,
+                    load: loader,
+                }
+            else
+                route = this.routes[routeIndex] = {
+                    index: routeIndex,
+                    chunk: ssrRoute.chunk,
+                    regex: new RegExp(ssrRoute.regex),
+                    keys: ssrRoute.keys,
+                    load: loader,
+                }
+
+            debug && console.log(LogPrefix, `${route.chunk}`, route);
+
+            // Detect if it's the current route
+            if (currentRoute === undefined) {
+
+                const isCurrentRoute = (
+                    this.ssrData !== undefined
+                    &&
+                    route.chunk === this.ssrData.page.chunkId
+                );
+
+                if (isCurrentRoute) {
+                    currentRoute = route;
+                    continue;
+                }
+            }
+        }
+
+        return currentRoute;
+    }
+
+    public page(...args: TRegisterPageArgs): TRoute {
+
+        const { path, options, controller, renderer } = getRegisterPageArgs(...args);
+
+        // S'il s'agit d'une page, son id doit avoir été injecté via le plugin babel
+        const id = options["id"];
+        if (id === undefined)
+            throw new Error(`ID had not been injected into page options via the routes babel plugin for route ${path}.`);
+
+        const { regex, keys } = buildRegex(path);
+
+        const route: TRoute = {
+            method: 'GET',
+            path,
+            regex,
+            keys,
+            options: {
+                ...defaultOptions,
+                ...options
+            },
+            controller: (context: TClientOrServerContext) => new ClientPage(controller, renderer, context)
+        };
+
+        this.routes.push(route);
+
+        return route;
+    }
+
+    public error(code: number, options: TRoute["options"], renderer: TFrontRenderer<{}, { message: string }>) {
+
+        const route: TErrorRoute = {
+            code,
+            controller: (context: TClientOrServerContext) => new ClientPage(null, renderer, context),
+            options
+        };
+
+        this.errors[code] = route;
+
+        return route;
+    }
+
+
+    /*----------------------------------
+    - RESOLUTION
+    ----------------------------------*/
+    public async resolve(request: ClientRequest<this>): Promise<ClientPage | undefined | null> {
+
+        debug && console.log(LogPrefix, 'Resolving request', request.path, Object.keys(request.data));
+        this.runHook('location.change', request);
+
+        for (let iRoute = 0; iRoute < this.routes.length; iRoute++) {
+
+            let route = this.routes[iRoute];
+            if (!('regex' in route))
+                continue;
+
+            const match = route.regex.exec(request.path);
+            if (!match)
+                continue;
+
+            // URL data
+            for (let iKey = 0; iKey < route.keys.length; iKey++) {
+                const nomParam = route.keys[iKey];
+                if (typeof nomParam === 'string') // number = sans nom
+                    request.data[nomParam] = match[iKey + 1]
+            }
+
+            // Create response
+            debug && console.log(LogPrefix, 'Resolved request', request.path, '| Route:', route);
+            const page = await this.createResponse(route, request);
+
+            return page;
+
+        };
+
+        return undefined;
+    }
+
+    private async load(route: TUnresolvedNormalRoute): Promise<TRoute>;
+    private async load(route: TUnresolvedErrorRoute): Promise<TErrorRoute>;
+    private async load(route: TUnresolvedNormalRoute | TUnresolvedErrorRoute): Promise<TRoute | TErrorRoute> {
+
+        //throw new Error(`Failed to load route: ${route.chunk}`);
+
+        let fetched: TFetchedRoute;
+        if (typeof route.load === 'function') {
+
+            debug && console.log(`Fetching route ${route.chunk} ...`, route);
+            try {
+
+                const loaded = await route.load();
+
+                fetched = loaded.__register(this.app);
+
+            } catch (e) {
+                console.error(`Failed to fetch the route ${route.chunk}`, e);
+                this.app.handleError(new Error("Failed to load content. Please make sure you're connected to Internet."));
+                throw e;
+            }
+
+        } else {
+
+            debug && console.log(`Route already fetched: ${route.chunk}`, route.load);
+            fetched = route.load;
+
+        }
+
+        debug && console.log(`Route fetched: ${route.chunk}`, fetched);
+        return {
+            ...fetched,
+            regex: route.regex,
+            keys: route.keys
+        }
+    }
+
+    public set(data: TObjetDonnees) {
+        throw new Error(`router.set was not attached to the router component.`);
+    }
+
+    private async initialRender(route: TUnresolvedRoute | undefined) {
+
+        debug && console.log(LogPrefix, `Initial render route`, route);
+
+        if (!location)
+            throw new Error(`Unable to retrieve current location.`);
+
+        if (!route)
+            throw new Error(`Unable to resolve route.`);
+
+        const request = new ClientRequest(location, this);
+
+        // Restituate SSR response
+        let apiData: {} = {}
+        if (this.ssrData) {
+
+            console.log("SSR Response restitution ...");
+
+            request.user = this.ssrData.user || null;
+
+            request.data = this.ssrData.request.data;
+
+            apiData = this.ssrData.page.data || {};
+        }
+
+        // Replacer api data par ssr data
+
+        const response = await this.createResponse(route, request, apiData)
+
+        ReactDOM.hydrate( <App context={response.context} />, document.body, () => {
+
+            console.log(`Render complete`);
+
+        });
+    }
+
+    private async createResponse(
+        route: TUnresolvedRoute | TRoute,
+        request: ClientRequest<this>,
+        pageData: {} = {}
+    ): Promise<ClientPage> {
+
+        // Load if not done before
+        if ('load' in route)
+            route = this.routes[route.index] = await this.load(route);
+
+        // Run controller
+        // TODO: tell that ruController on the client side always returns pages
+        try {
+
+            const response = new ClientResponse<this, ClientPage>(request, route);
+            return await response.runController(pageData);
+
+        } catch (error) {
+
+            return await this.createErrorResponse(error, request);
+        }
+    }
+
+    private async createErrorResponse(
+        e: any,
+        request: ClientRequest<this>,
+        pageData: {} = {}
+    ): Promise<ClientPage> {
+
+        const code = 'http' in e ? e.http : 500;
+        console.log(`Loading error page ` + code);
+        let route = this.errors[code];
+
+        // Nor page configurated for this error
+        if (route === undefined) {
+            console.error(`Error page for http error code ${code} not found.`, this.errors, this.routes);
+            this.app.handleError(e, 404);
+            throw new Error(`Error page for http error code ${code} not found.`);
+        }
+
+        // Load if not done before
+        if ('load' in route)
+            route = this.errors[code] = await this.load(route);
+
+        const response = new ClientResponse<this, ClientPage>(request, route);
+        return await response.runController(pageData);
+    }
+
+    /*----------------------------------
+    - HOOKS
+    ----------------------------------*/
+    private hooks: {
+        [hookname in THookName]?: (THookCallback<this> | null)[]
+    } = {}
+
+    public on(hookName: THookName, callback: THookCallback<this>) {
+
+        debug && console.info(LogPrefix, `Register hook ${hookName}`);
+
+        let cbIndex: number;
+        let callbacks = this.hooks[hookName];
+        if (!callbacks) {
+            cbIndex = 0;
+            callbacks = this.hooks[hookName] = [callback]
+        } else {
+            cbIndex = callbacks.length;
+            callbacks.push(callback);
+        }
+
+        // Listener remover
+        return () => {
+            debug && console.info(LogPrefix, `De-register hook ${hookName} (index ${cbIndex})`);
+            delete (callbacks as THookCallback<this>[])[cbIndex];
+        }
+
+    }
+
+    public runHook(hookName: THookName, request: ClientRequest<this>) {
+        const callbacks = this.hooks[hookName];
+        if (callbacks)
+            for (const callback of callbacks)
+                // callback can be null since we use delete to unregister
+                callback && callback(request);
+    }
+}