5htp-core 0.4.4-1 → 0.4.4-3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.4-1",
+	"version": "0.4.4-3",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

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

@@ -66,11 +66,8 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
     if (clientRouter !== undefined) 
         clientRouter.context = context;
 
-    const [pages, setPages] = React.useState<{
-        current: undefined | Page
-    }>({
-        current: context.page
-    });
+    const [currentPage, setCurrentPage] = React.useState<undefined | Page>(context.page);
+
     
     /*----------------------------------
     - ACTIONS
@@ -85,12 +82,19 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         // WARNING: Don"t try to play with pages here, since the object will not be updated
         //  If needed to play with pages, do it in the setPages callback below
         // Unchanged path
-        if (request.path === currentRequest.path && request.hash !== currentRequest.hash && request.hash !== undefined) {
+        if (
+            request.path === currentRequest.path 
+            && 
+            request.hash !== currentRequest.hash
+            && 
+            request.hash !== undefined
+        ) {
             scrollToElement(request.hash);
             return;
         }
         
         // Set loading state
+        clientRouter.runHook('page.change', request);
         clientRouter.setLoading(true);
         const newpage = context.page = await clientRouter.resolve(request);
 
@@ -114,13 +118,13 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         }
 
         // Add page container
-        setPages( pages => {
+        setCurrentPage( page => {
 
             // WARN: Don't cancel navigation if same page as before, as we already instanciated the new page and bound the context with it
             //  Otherwise it would cause reference issues (ex: page.setAllData makes ref to the new context)
 
             // If if the layout changed
-            const curLayout = pages.current?.layout;
+            const curLayout = currentPage?.layout;
             const newLayout = newpage?.layout;
             if (newLayout && curLayout && newLayout.path !== curLayout.path) {
 
@@ -130,12 +134,12 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
                 //  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.url);
-                return { ...pages }
+                return { ...page }
 
                 context.app.setLayout(newLayout);
             }
 
-            return { current: newpage }
+            return newpage;
         });
     }
 
@@ -169,25 +173,25 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
         // Reset scroll
         window.scrollTo(0, 0);
         // Should be called AFTER rendering the page (so after the state change)
-        pages.current?.updateClient();
+        currentPage?.updateClient();
         // Scroll to the selected content via url hash
-        restoreScroll(pages.current);
+        restoreScroll(currentPage);
 
         // Hooks
-        clientRouter.runHook('page.changed', pages.current)
+        clientRouter.runHook('page.changed', currentPage)
         
-    }, [pages.current]);
+    }, [currentPage]);
 
     /*----------------------------------
     - RENDER
     ----------------------------------*/
     // Render the page component
     return <>
-        {pages.current && (
-            <PageComponent page={pages.current} 
+        {currentPage && (
+            <PageComponent page={currentPage} 
                 /* Create a new instance of the Page component every time the page change 
                 Otherwise the page will memorise the data of the previous page */
-                key={pages.current.chunkId === undefined ? undefined : 'page_' + pages.current.chunkId} 
+                key={currentPage.chunkId === undefined ? undefined : 'page_' + currentPage.chunkId} 
             />
         )}
 

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

@@ -17,7 +17,7 @@ import type { TBasicSSrData } from '@server/services/router/response';
 import BaseRouter, {
     defaultOptions, TRoute, TErrorRoute, 
     TClientOrServerContext, TRouteModule,
-    buildUrl, TDomainsList
+    matchRoute, buildUrl, TDomainsList
 } from '@common/router'
 import { getLayout } from '@common/router/layouts';
 import { getRegisterPageArgs, buildRegex } from '@common/router/register';
@@ -123,7 +123,7 @@ export type TRoutesLoaders = {
 
 export type THookCallback<TRouter extends ClientRouter> = (request: ClientRequest<TRouter>) => void;
 
-type THookName = 'location.change' | 'page.changed'
+type THookName = 'page.change' | 'page.changed'
 
 type Config<TAdditionnalContext extends {} = {}> = {
     preload: string[], // List of globs
@@ -307,7 +307,6 @@ export default class ClientRouter<
     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++) {
 
@@ -315,17 +314,10 @@ export default class ClientRouter<
             if (!('regex' in route))
                 continue;
 
-            const match = route.regex.exec(request.path);
-            if (!match)
+            const isMatching = matchRoute(route, request);
+            if (!isMatching)
                 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);

package/src/common/router/index.ts

@@ -15,6 +15,8 @@ import type {
     TRouteHttpMethod 
 } from '@server/services/router';
 
+import type RouterRequest from './request';
+
 import type { TUserRole } from '@server/services/auth';
 
 import type { TAppArrowFunction } from '@common/app';
@@ -173,6 +175,24 @@ export const buildUrl = (
     return prefix + path + (searchParams.toString() ? '?' + searchParams.toString() : '');
 }
 
+export const matchRoute = (route: TRoute, request: RouterRequest) => {
+
+    // Match Path
+    const match = route.regex.exec(request.path);
+    if (!match)
+        return false;
+
+    // Extract URL params
+    for (let iKey = 0; iKey < route.keys.length; iKey++) {
+        const key = route.keys[iKey];
+        const value =  match[iKey + 1];
+        if (typeof key === 'string' && value) // number = sans nom
+            request.data[key] = decodeURIComponent( value.replaceAll('+', '%20') );
+    }
+
+    return true;
+}
+
 /*----------------------------------
 - BASE ROUTER
 ----------------------------------*/

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

@@ -67,7 +67,6 @@ export default abstract class PageResponse<TRouter extends ClientOrServerRouter
     public bodyId?: string;
 
     // Resources
-    public amp?: boolean;
     public scripts: TPageResource[] = [];
     public style: TPageResource[] = [];
 

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

@@ -25,7 +25,7 @@ import { CoreError, NotFound } from '@common/errors';
 import BaseRouter, {
     TRoute, TErrorRoute, TRouteModule,
     TRouteOptions, defaultOptions,
-    buildUrl, TDomainsList
+    matchRoute, buildUrl, TDomainsList
 } from '@common/router';
 import { buildRegex, getRegisterPageArgs } from '@common/router/register';
 import { layoutsList, getLayout } from '@common/router/layouts';
@@ -523,19 +523,10 @@ declare type Routes = {
                 if (!request.accepts(route.options.accept))
                     continue;
 
-                // Match Path
-                const match = route.regex.exec(request.path);
-                if (!match)
+                const isMatching = matchRoute(route, request);
+                if (!isMatching)
                     continue;
 
-                // Extract URL params
-                for (let iKey = 0; iKey < route.keys.length; iKey++) {
-                    const key = route.keys[iKey];
-                    const value =  match[iKey + 1];
-                    if (typeof key === 'string' && value) // number = sans nom
-                        request.data[key] = decodeURIComponent(value);
-                }
-
                 // Run on resolution hooks. Ex: authentication check
                 await this.runHook('resolved', route);
 

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

@@ -57,31 +57,26 @@ export default class DocumentRenderer<TRouter extends Router> {
 
     public async page( html: string, page: Page, response: ServerResponse<TRouter> ) {
 
-        const fullUrl = this.router.http.publicUrl + response.request.path;
+        // TODO: can be customized via page / route config
+        const canonicalUrl = response.request.req.url;
 
         let attrsBody = {
             className: [...page.bodyClass].join(' '),
         };
 
         return '<!doctype html>' + renderToString(
-            <html lang="en" {...(page.amp ? { amp: "true" } : {})}>
+            <html lang="en">
                 <head>
                     {/* Format */}
                     <meta charSet="utf-8" />
-                    {page.amp && ( // As a best practice, you should include the script as early as possible in the <head>.
-                        <script async={true} src="https://cdn.ampproject.org/v0.js"></script>
-                    )}
                     <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
                     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
-                    {!page.amp && page.amp && (
-                        <link rel="amphtml" href={fullUrl + '/amp'} />
-                    )}
 
                     {/* Basique*/}
                     <meta content={this.app.identity.web.title} name="apple-mobile-web-app-title" />
                     <title>{page.title}</title>
                     <meta content={page.description} name="description" />
-                    <link rel="canonical" href={fullUrl} />
+                    <link rel="canonical" href={canonicalUrl} />
 
                     {this.metas( page )}
 
@@ -147,9 +142,6 @@ export default class DocumentRenderer<TRouter extends Router> {
             </> : <>
                 <style id={style.id} dangerouslySetInnerHTML={{ __html: style.inline }} />
             </>)}
-
-            {/* Sera remplacé par la chaine exacte après renderToStaticMarkup */}
-            {page.amp && (<style amp-boilerplate=""></style>)}
         </>
     }
 
@@ -161,13 +153,11 @@ export default class DocumentRenderer<TRouter extends Router> {
 
         return <>
             {/* JS */}
-            {!page.amp && (
-                <script type="text/javascript" dangerouslySetInnerHTML={{ 
-                    __html: `window.ssr=${context}; window.routes=${routesForClient};` + (
-                        this.app.env.profile === 'dev' ? 'window.dev = true;' : ''
-                    )
-                }} />
-            )}
+            <script type="text/javascript" dangerouslySetInnerHTML={{ 
+                __html: `window.ssr=${context}; window.routes=${routesForClient};` + (
+                    this.app.env.profile === 'dev' ? 'window.dev = true;' : ''
+                )
+            }} />
 
             <link rel="preload" href={"/public/client.js?v=" + BUILD_ID} as="script" />
             <script defer type="text/javascript" src={"/public/client.js?v=" + BUILD_ID} />

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

@@ -83,11 +83,7 @@ export default class Page<TRouter extends Router = Router> extends PageResponse<
             attrsBody.className += ' ' + page.classeBody.join(' ');
 
         if (page.theme)
-            attrsBody.className += ' ' + page.theme;
-
-        // L'url canonique doit pointer vers la version html
-        if (page.amp && fullUrl.endsWith('/amp'))
-            fullUrl = fullUrl.substring(0, fullUrl.length - 4);*/
+            attrsBody.className += ' ' + page.theme;*/
 
         return this.router.render.page(html, this, this.context.response);
     }
@@ -113,9 +109,7 @@ export default class Page<TRouter extends Router = Router> extends PageResponse<
                         id: chunk,
                         url: '/public/' + asset
                     })
-                // Si mode amp, on ne charge pas le JS react (rendu serveur uniquement)
-                // Sauf si mode dev, car le hot reload est quand même bien pratique ...
-                else if (!this.amp)
+                else
                     this.scripts.push({
                         id: chunk,
                         url: '/public/' + asset