5htp-core 0.4.4 → 0.4.5

package/package.json

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

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

@@ -35,7 +35,6 @@
     // Hover
     //transition: all .5s linear;
     &:hover,
-    &.active,
     li:hover > & {
 
         color: var(--cTxtImportant);
@@ -46,6 +45,38 @@
         }
     }
 
+    &.active {
+        &::after {
+            content: ' ';
+            display: block;
+            position: absolute;
+
+            background: @c1;
+            height: @sizeActiveIndicator;
+            width: @sizeActiveIndicator;
+            border-radius: 50%;
+
+            // Default: bottom
+            left: 50%;
+            margin-left: -@sizeActiveIndicator / 2;
+            bottom: -@sizeActiveIndicator / 2;
+        }
+
+        .col > &::after,
+        .col > li > &::after {
+
+            // Reset potition
+            left: auto;
+            margin-left: auto;
+            bottom: auto;
+
+            // Position right
+            top: 50%;
+            margin-top: -@sizeActiveIndicator / 2;
+            right: -@sizeActiveIndicator / 2;
+        }
+    }
+
     // Click
     &.pressed {
         transform: scale(0.9);
@@ -129,29 +160,6 @@
         &.col {
             box-shadow: 0 0 0 0.2em @c2;
         }
-        
-        .menu &::after {
-            content: ' ';
-            display: block;
-            position: absolute;
-
-            background: @c1;
-            height: @sizeActiveIndicator;
-            width: @sizeActiveIndicator;
-            border-radius: 50%;
-        }
-
-        .menu.row &::after {
-            left: 50%;
-            margin-left: -@sizeActiveIndicator / 2;
-            bottom: -@sizeActiveIndicator / 2;
-        }
-
-        .menu.col &::after {
-            top: 50%;
-            margin-top: -@sizeActiveIndicator / 2;
-            right: -@sizeActiveIndicator / 2;
-        }
     }
 
     &[disabled] {

package/src/client/assets/css/text/text.less

@@ -150,11 +150,6 @@ pre {
 
     --cTxtBase: #555;
 
-    .card > & {
-
-        padding: 3vh 0 !important;
-    }
-
     display: flex;
     flex-direction: column;
     gap: 1em;

package/src/client/components/inputv3/index.tsx

@@ -74,7 +74,7 @@ export default ({
         if (refCommit.current !== null)
             clearTimeout(refCommit.current);
 
-        refCommit.current = setTimeout(commitValue, 500);
+        refCommit.current = setTimeout(commitValue, 100);
         
     }, [value]);
     

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

@@ -23,25 +23,34 @@ export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & {
     data: {[cle: string]: unknown}
 }
 
+export type TProps = {
+    service?: ClientRouter,
+    loaderComponent?: React.ComponentType<{ isLoading: boolean }>,
+}
+
 /*----------------------------------
 - PAGE STATE
 ----------------------------------*/
 
 const LogPrefix = `[router][component]`
 
-const PageLoading = ({ clientRouter }: { clientRouter?: ClientRouter }) => {
+const PageLoading = ({ clientRouter, loaderComponent: LoaderComponent }: { 
+    clientRouter?: ClientRouter,
+    loaderComponent?: React.ComponentType<{ isLoading: boolean }>,
+}) => {
 
     const [isLoading, setLoading] = React.useState(false);
 
     if (clientRouter)
         clientRouter.setLoading = setLoading;
 
-    return (
-        <div id="loading" class={isLoading ? 'display' : ''}>
-            <i src="spin" />
-        </div>
-    )
-
+    return LoaderComponent 
+        ? <LoaderComponent isLoading={isLoading} /> 
+        : (
+            <div id="loading" class={isLoading ? 'display' : ''}>
+                <i src="spin" />
+            </div>
+        )
 }
 
 const scrollToElement = (selector: string) => document.querySelector( selector )
@@ -54,7 +63,7 @@ const scrollToElement = (selector: string) => document.querySelector( selector )
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default ({ service: clientRouter }: { service?: ClientRouter }) => {
+export default ({ service: clientRouter, loaderComponent }: TProps) => {
 
     /*----------------------------------
     - INIT
@@ -62,20 +71,18 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
 
     const context = useContext();
 
+    const [currentPage, setCurrentPage] = React.useState<undefined | Page>(context.page);
+
     // Bind context object to client router
-    if (clientRouter !== undefined) 
+    if (clientRouter !== undefined) {
         clientRouter.context = context;
-
-    const [pages, setPages] = React.useState<{
-        current: undefined | Page
-    }>({
-        current: context.page
-    });
+        clientRouter.navigate = changePage;
+    }
     
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
-    const resolvePage = async (request: ClientRequest, locationUpdate?: Update) => {
+    const resolvePage = async (request: ClientRequest, data: {} = {}) => {
 
         if (!clientRouter) return;
 
@@ -85,42 +92,57 @@ 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);
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
         clientRouter.setLoading(true);
         const newpage = context.page = await clientRouter.resolve(request);
 
-        // Page not found: Directly load with the browser
-        if (newpage === undefined) {
-            window.location.replace(request.url);
-            console.error("not found");
-            return;
         // Unable to load (no connection, server error, ....)
-        } else if (newpage === null) {
+        if (newpage === null) {
             return;
         }
 
+        return await changePage(newpage, data, request);
+    }
+
+    async function changePage(newpage: Page, data?: {}, request?: ClientRequest) {
+
         // Fetch API data to hydrate the page
         try {
             await newpage.preRender();
         } catch (error) {
             console.error(LogPrefix, "Unable to fetch data:", error);
-            clientRouter.setLoading(false);
+            clientRouter?.setLoading(false);
             return;
         }
 
+        // Add additional data
+        if (data)
+            newpage.data = { ...newpage.data, ...data };
+
         // 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) {
 
@@ -129,13 +151,13 @@ export default ({ service: clientRouter }: { service?: ClientRouter }) => {
                 //  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.url);
-                return { ...pages }
+                window.location.replace( request ? request.url : location.href );
+                return { ...page }
 
                 context.app.setLayout(newLayout);
             }
 
-            return { current: newpage }
+            return newpage;
         });
     }
 
@@ -169,28 +191,28 @@ 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} 
             />
         )}
 
-        <PageLoading clientRouter={clientRouter} />
+        <PageLoading clientRouter={clientRouter} loaderComponent={loaderComponent} />
     </>
 }

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
@@ -145,6 +145,7 @@ export default class ClientRouter<
     public context!: ClientContext;
 
     public setLoading!: React.Dispatch< React.SetStateAction<boolean> >;
+    public navigate!: (page: ClientPage, data?: {}) => void;
 
     public constructor(app: TApplication, config: Config<TAdditionnalContext>) {
 
@@ -161,10 +162,18 @@ export default class ClientRouter<
     public url = (path: string, params: {} = {}, absolute: boolean = true) => 
         buildUrl(path, params, this.domains, absolute);
 
-    public go( url: string, data: {} = {}, opt: {
+    public go( url: string | number, data: {} = {}, opt: {
         newTab?: boolean
     } = {}) {
 
+        // Error code
+        if (typeof url === 'number') {
+            this.createResponse( this.errors[url], this.context.request ).then(( page ) => {
+                this.navigate(page, data);
+            })
+            return;
+        }
+
         url = this.url(url, data, false);
 
         if (opt.newTab)
@@ -304,10 +313,9 @@ export default class ClientRouter<
     /*----------------------------------
     - RESOLUTION
     ----------------------------------*/
-    public async resolve(request: ClientRequest<this>): Promise<ClientPage | undefined | null> {
+    public async resolve(request: ClientRequest<this>): Promise<ClientPage> {
 
         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 +323,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);
@@ -334,7 +335,10 @@ export default class ClientRouter<
 
         };
 
-        return undefined;
+        console.log("404 error page not found.", this.errors, this.routes);
+
+        const notFoundRoute = this.errors[404];
+        return await this.createResponse(notFoundRoute, request);
     }
 
     private async load(route: TUnresolvedNormalRoute): Promise<TRoute>;
@@ -415,7 +419,7 @@ export default class ClientRouter<
     }
 
     private async createResponse(
-        route: TUnresolvedRoute | TRoute,
+        route: TUnresolvedRoute | TErrorRoute | TRoute,
         request: ClientRequest<this>,
         pageData: {} = {}
     ): Promise<ClientPage> {

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

@@ -9,7 +9,7 @@ import ApiClientService, {
     TApiFetchOptions, TFetcherList, TFetcherArgs, TFetcher,
     TDataReturnedByFetchers
 } from '@common/router/request/api';
-import { viaHttpCode, NetworkError } from '@common/errors';
+import { fromJson as errorFromJson, NetworkError } from '@common/errors';
 import type ClientApplication from '@client/app';
 
 import { toMultipart } from './multipart';
@@ -232,9 +232,10 @@ export default class ApiClient implements ApiClientService {
         return fetch(url, config)
             .then(async (response) => {
                 if (!response.ok) {
+
                     const errorData = await response.json();
                     console.warn(`[api] Failure:`, response.status, errorData);
-                    const error = viaHttpCode(response.status || 500, errorData);
+                    const error = errorFromJson(errorData);
                     throw error;
                 }
                 debug && console.log(`[api] Success:`, response);

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

@@ -27,7 +27,6 @@ export default class ClientRequest<TRouter extends ClientRouter = ClientRouter>
     public api: ApiClient;
     public response?: ClientResponse<TRouter>;
 
-    public url: string;
     public hash?: string;
 
     public constructor( 

package/src/common/errors/index.tsx

@@ -7,16 +7,17 @@ import type { ComponentChild } from 'preact';
 
 export type TListeErreursSaisie<TClesDonnees extends string = string> = {[champ in TClesDonnees]: string[]}
 
-export type TReponseApi = {
+type TJsonError = {
     code: number,
-    idRapport?: string,
-    urlRequete?: string
-} & ({ message: string } | { errors: TListeErreursSaisie })
+    origin?: string,
+    message: string,
+    // Form fields
+    errors?: TListeErreursSaisie
+} & TDetailsErreur
 
 type TDetailsErreur = {
     stack?: string,
-    idRapport?: string,
-    urlRequete?: string,
+    origin?: string,
 }
 
 /*----------------------------------
@@ -49,9 +50,7 @@ export abstract class CoreError extends Error {
     public abstract http: number;
     public title: string = "Uh Oh ...";
     public message: string;
-
-    public urlRequete?: string;
-    public idRapport?: string;
+    public details: TDetailsErreur = {};
 
     // Note: On ne le redéfini pas ici, car déjà présent dans Error
     //      La redéfinition reset la valeur du stacktrace
@@ -62,25 +61,20 @@ export abstract class CoreError extends Error {
         super(message);
 
         this.message = message || (this.constructor as typeof CoreError).msgDefaut;
+        this.details = details || {}; 
 
-        if (details !== undefined) {
-            this.idRapport = details.idRapport;
+        // Inject stack
+        if (details !== undefined)
             this.stack = details.stack;
-            this.urlRequete = details.urlRequete;
-
-            if (this.urlRequete !== undefined)
-                this.message + '(' + this.urlRequete + ') ' + this.message;
-        }
 
     }
 
-    public json(): TReponseApi {
+    public json(): TJsonError {
 
         return {
             code: this.http,
             message: this.message,
-            idRapport: this.idRapport,
-            urlRequete: this.urlRequete,
+            ...this.details
         }
     }
 
@@ -116,7 +110,7 @@ export class InputErrorSchema extends CoreError {
 
     }
 
-    public json(): TReponseApi {
+    public json(): TJsonError {
         return {
             ...super.json(),
             errors: this.errors,
@@ -182,21 +176,46 @@ export class NetworkError extends Error {
 
 export const viaHttpCode = (
     code: number, 
-    message?: string | TListeErreursSaisie, 
+    message: string, 
     details?: TDetailsErreur
 ): CoreError => {
+    return fromJson({
+        code,
+        message,
+        ...details
+    });
+}
+
+export const toJson = (e: Error | CoreError): TJsonError => {
+
+    if (('json' in e) && typeof e.json === 'function')
+        return e.json();
+
+    const details = ('details' in e) 
+        ? e.details
+        : { stack: e.stack };
 
-    // TODO: more reliablme detection of form errors
-    if (typeof message === 'object')
-        return new InputErrorSchema(message, details);
+    return { code: 500, message: e.message, ...details }
+}
+
+export const fromJson = ({ code, message, ...details }: TJsonError) => {
 
     switch (code) {
-        case 400: return new InputError( message, details);
-        case 401: return new AuthRequired( message, details);
-        case 403: return new Forbidden( message, details);
-        case 404: return new NotFound( message, details);
-        default: return new Anomaly( message, details);
+        case 400: 
+            if (details.errors)
+                return new InputErrorSchema( details.errors, details );
+            else
+                return new InputError( message, details );
+
+        case 401: return new AuthRequired( message, details );
+
+        case 403: return new Forbidden( message, details );
+
+        case 404: return new NotFound( message, details );
+
+        default: return new Anomaly( message, details );
     }
+
 }
 
 export default CoreError;

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/request/index.ts

@@ -17,6 +17,7 @@ export default abstract class BaseRequest {
 
     // Permet d'accèder à l'instance complète via spread
     public request: this = this;
+    public url!: string;
     public host!: string;
 
     public data: TObjetDonnees = {};

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

@@ -21,11 +21,11 @@ import Service, { AnyService } from '@server/app/service';
 import type { TRegisteredServicesIndex } from '@server/app/service/container';
 import context from '@server/context';
 import type DisksManager from '@server/services/disks';
-import { CoreError, NotFound } from '@common/errors';
+import { CoreError, NotFound, toJson as errorToJson } 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);
 
@@ -552,7 +543,11 @@ declare type Routes = {
 
             if (this.app.env.profile === 'dev') {
                 console.log('API batch error:', request.method, request.path, error);
-                error.message = request.method + ' ' + request.path + ': ' + error.message;
+                const errOrigin = request.method + ' ' + request.path;
+                if (error.details === undefined)
+                    error.details = { origin: errOrigin }
+                else
+                    error.details.origin = errOrigin;
             }
 
             throw error;
@@ -609,14 +604,16 @@ declare type Routes = {
         } else if (code !== 404 && this.app.env.profile === "dev")
             console.warn(e);
 
-        if (request.accepts("html"))
+        // Return error based on the request format
+        if (request.accepts("html")) {
+            const jsonError = errorToJson(e);
             await response.runController(route, { 
-                message: e.message,
-                type: e.constructor.name
+                error: jsonError
             });
-        else if (request.accepts("json"))
-            await response.json(e.message);
-        else
+        } else if (request.accepts("json")) {
+            const jsonError = errorToJson(e);
+            await response.json(jsonError);
+        } else
             await response.text(e.message);
 
         return response;

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

@@ -89,8 +89,7 @@ export default class ApiClientRequest extends RequestService implements ApiClien
                 continue;
 
             // Create a children request to resolve the api data
-            const internalHeaders = { accept: 'application/json' }
-            const request = this.request.children(method, path, data, { ...internalHeaders/*, ...headers*/ });
+            const request = this.request.children(method, path, data);
             fetchedData[id] = await request.router.resolve(request).then(res => res.data);
         }
 

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

@@ -87,6 +87,7 @@ export default class ServerRequest<
         this.router = router;
         this.api = new ApiClient(this);
 
+        this.url = this.req.url;
         this.host = this.req.get('host') as string;
         this.method = method;
         this.headers = headers || {};
@@ -99,9 +100,9 @@ export default class ServerRequest<
         this.data = data || {};
     }
 
-    public children(method: HttpMethod, path: string, data: TObjetDonnees | undefined, headers?: HttpHeaders) {
+    public children(method: HttpMethod, path: string, data: TObjetDonnees | undefined) {
         const children = new ServerRequest( 
-            this.id, method, path, data, { ...(headers || {}), accept: 'application/json' },
+            this.id, method, path, data, { ...this.headers, accept: 'application/json' },
             this.res, this.router, true
         );
         children.user = this.user;

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