proteum 1.0.2 → 2.0.0-1

package/server/services/router/response/mask/index.ts

@@ -3,7 +3,7 @@
 ----------------------------------*/
 
 // Libs
-import compilerSelecteurs, { TObjetSelecteurs } from './selecteurs';
+import compilerSelecteurs, { TObjetSelecteurs, TSelecteur } from './selecteurs';
 import Filter from './Filter';
 
 // Filtres spécifiques métier
@@ -24,24 +24,18 @@ const debug = false;
 ----------------------------------*/
 
 // proprieteModele = Si l'objet actuellement traité fait partie des valeurs d'un modèle
-export default (
-    donnee: any,
-    selecteurs?: string | TObjetSelecteurs
-) => {
-
+export default (donnee: any, selecteurs?: string | TObjetSelecteurs) => {
     // Pas besoin de filtrer
-    if (donnee === null || typeof donnee !== 'object'/*  || donnee._filtered === true */) {
+    if (donnee === null || typeof donnee !== 'object' /*  || donnee._filtered === true */) {
         return donnee;
     }
 
     // Correction sélecteurs
-    let selecteursCompiles: TObjetSelecteurs | undefined;
-    if (selecteurs === undefined)
-        selecteursCompiles = undefined;
+    let selecteursCompiles: TSelecteur | undefined;
+    if (selecteurs === undefined) selecteursCompiles = undefined;
     else if (typeof selecteurs === 'string')
-        selecteursCompiles = compilerSelecteurs(selecteurs);
-    else // Déjà un objet, pas besoin de compiler
-        selecteursCompiles = selecteurs;
+        selecteursCompiles = compilerSelecteurs(selecteurs); // Déjà un objet, pas besoin de compiler
+    else selecteursCompiles = selecteurs;
 
     debug && console.log('Avant filtrage', donnee);
 
@@ -56,5 +50,4 @@ export default (
     debug && console.log('Apres filtrage', retour);
 
     return retour;
-
-}
+};

package/server/services/router/response/mask/selecteurs.ts

@@ -5,10 +5,10 @@
 /*----------------------------------
 - TYPES
 ----------------------------------*/
-export type TSelecteur = true | "*" | TObjetSelecteurs
+export type TSelecteur = true | '*' | TObjetSelecteurs;
 // Wildcard en clé = selectionner toutes les clés
 // Wildcard en valeur = sélectionner absolument toutes les valeur descendantes
-export type TObjetSelecteurs = {[cle: string]: TSelecteur}
+export type TObjetSelecteurs = { [cle: string]: TSelecteur };
 
 /*----------------------------------
 - CONSTANTES
@@ -21,66 +21,53 @@ const cache: TObjetSelecteurs = {};
 - FONCTION
 ----------------------------------*/
 export default (selecteurs: string) => {
-
-    if (cache[selecteurs] === undefined)
-        cache[selecteurs] = compiler(selecteurs);
+    if (cache[selecteurs] === undefined) cache[selecteurs] = compiler(selecteurs);
 
     return cache[selecteurs];
-
-}
+};
 
 const compiler = (selecteurs: string): TObjetSelecteurs => {
-
     let chemins: TObjetSelecteurs = {};
     let cheminA: string[] = []; // Chemin en construction
 
     let branche;
-    while (branche = reSelecteurs.exec(selecteurs)) {
-
-        if (branche[0] === ')') { // fermeture
+    while ((branche = reSelecteurs.exec(selecteurs))) {
+        if (branche[0] === ')') {
+            // fermeture
 
             // Niveau précédent: docs.titre => docs
             cheminA.pop();
-
         } else {
-
             const nomBranche = branche[2];
             const ouverture = branche[5] === '(';
 
             // Ligne débutant par un # = commentaire
-            if (nomBranche.startsWith("#"))
-                continue;
+            if (nomBranche.startsWith('#')) continue;
 
             if (ouverture)
                 // Ouverture de la branche: docs => docs.titre
                 cheminA.push(nomBranche);
             else {
-
                 const chemin = [...cheminA, nomBranche];
 
                 // Construction du chemin
                 let brancheA = chemins;
                 const nbBranches = chemin.length;
                 for (let iBranche = 0; iBranche < nbBranches; iBranche++) {
-
                     const nomBranche = chemin[iBranche];
 
-                    const extremite = iBranche === nbBranches - 1
+                    const extremite = iBranche === nbBranches - 1;
                     if (extremite) {
-
                         // Dernière branche = extremité = true
                         brancheA[nomBranche] = true;
-
                     } else {
-
                         // Pas encore définie
                         if (brancheA[nomBranche] === undefined)
                             // Sinon, initialisation
                             brancheA[nomBranche] = {};
 
                         // Rférnce pour la prochaine itération
-                        brancheA = brancheA[nomBranche];
-
+                        brancheA = brancheA[nomBranche] as TObjetSelecteurs;
                     }
                 }
             }
@@ -88,5 +75,4 @@ const compiler = (selecteurs: string): TObjetSelecteurs => {
     }
 
     return chemins;
-
-}
+};

package/server/services/router/response/page/clientManifest.ts

@@ -0,0 +1,25 @@
+import fs from 'fs-extra';
+import path from 'path';
+
+type TClientManifestAssets = { assets?: string[]; css?: string[]; js?: string[] };
+
+export type TClientBuildManifest = {
+    publicPath?: string;
+    entries?: Record<string, TClientManifestAssets>;
+    chunks?: Record<string, TClientManifestAssets>;
+};
+
+const manifestPath = path.join(__dirname, 'client-manifest.json');
+let cachedManifest: TClientBuildManifest | undefined;
+
+export const getClientBuildManifest = (): TClientBuildManifest => {
+    if (!__DEV__) {
+        if (!cachedManifest) {
+            cachedManifest = fs.existsSync(manifestPath) ? fs.readJSONSync(manifestPath) : {};
+        }
+
+        return cachedManifest ?? {};
+    }
+
+    return fs.existsSync(manifestPath) ? fs.readJSONSync(manifestPath) : {};
+};

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

@@ -4,157 +4,229 @@
 
 // Npm
 import React from 'react';
-import renderToString from "preact-render-to-string";
+import renderToString from 'preact-render-to-string';
 const safeStringify = require('fast-safe-stringify'); // remplace les références circulairs par un [Circular]
 
 // Core
-import type { default as Router, Response as ServerResponse } from "@server/services/router";
+import type { TServerRouter, Response as ServerResponse } from '@server/services/router';
 import type Page from '.';
+import { getClientBuildManifest } from './clientManifest';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-
 /*----------------------------------
 - SERVICE
 ----------------------------------*/
-export default class DocumentRenderer<TRouter extends Router> {
-
+export default class DocumentRenderer<TRouter extends TServerRouter> {
     public constructor(
         public router: TRouter,
-        public app = router.app
-    ) {
+        public app = router.app,
+    ) {}
 
+    public staticDocument() {
+        const routesForClient = JSON.stringify(this.router.ssrRoutes);
+        return (
+            '<!doctype html>' +
+            renderToString(
+                <html lang="en">
+                    <head>
+                        {/* Format */}
+                        <meta charSet="utf-8" />
+                        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+
+                        {/* CSS */}
+                        {this.clientStyles()}
+                        <link rel="preload" as="font" href={'/public/icons.woff2?v=' + BUILD_ID} type="font/woff2" />
+                        <link rel="stylesheet" type="text/css" href="/public/icons.css" />
+
+                        {/* JS */}
+                        <script
+                            type="text/javascript"
+                            dangerouslySetInnerHTML={{
+                                __html:
+                                    `window.routes=${routesForClient};` +
+                                    (this.app.env.profile === 'dev' ? 'window.dev = true;' : ''),
+                            }}
+                        />
+                        {this.clientScripts()}
+                    </head>
+                    <body></body>
+                </html>,
+            )
+        );
     }
 
-    public staticDocument() {
-        const routesForClient = JSON.stringify( this.router.ssrRoutes );
-        return '<!doctype html>' + renderToString(
-            <html lang="en">
-                <head>
-                    {/* Format */}
-                    <meta charSet="utf-8" />
-                    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
-
-                    {/* CSS */}
-                    <link rel="preload" href="/public/client.css" as="style" />
-                    <link rel="preload" as="font" href={"/public/icons.woff2?v=" + BUILD_ID} type="font/woff2" />
-                    <link rel="stylesheet" type="text/css" href="/public/icons.css" />
-                    <link rel="stylesheet" type="text/css" href="/public/client.css" />
-
-                    {/* JS */}
-                    <script type="text/javascript" dangerouslySetInnerHTML={{
-                        __html: `window.routes=${routesForClient};` + (this.app.env.profile === 'dev' ? 'window.dev = true;' : '')
-                    }} />
-                    <link rel="preload" href="/public/client.js" as="script" />
-                    <script defer type="text/javascript" src="/public/client.js" />
-
-                </head>
-                <body></body>
-            </html>
+    public async page(html: string, page: Page<TRouter>, response: ServerResponse<TRouter>) {
+        let attrsBody = { className: [...page.bodyClass].join(' ') };
+
+        return (
+            '<!doctype html>' +
+            renderToString(
+                <html lang="en">
+                    <head>
+                        {/* Format */}
+                        <meta charSet="utf-8" />
+                        <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
+                        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+
+                        {/* Mobile */}
+                        <meta name="application-name" content={this.app.identity.web.title} />
+                        <meta name="apple-mobile-web-app-title" content={this.app.identity.web.title} />
+                        <meta name="apple-mobile-web-app-title" content={this.app.identity.web.title} />
+                        <meta content={this.app.identity.author.name} name="author" />
+                        <meta name="theme-color" content={this.app.identity.maincolor} />
+                        <meta name="msapplication-TileColor" content={this.app.identity.maincolor} />
+                        <meta name="apple-mobile-web-app-capable" content="yes" />
+                        <meta name="mobile-web-app-capable" content="yes" />
+                        <meta
+                            name="viewport"
+                            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+                        />
+
+                        {/* https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions */}
+                        {/*<link rel="manifest" href={RES['manifest.json']} />*/}
+                        <link rel="shortcut icon" href="/public/app/favicon.ico" />
+                        <link rel="icon" type="image/png" sizes="16x16" href="/public/app/favicon-16x16.png" />
+                        <link rel="icon" type="image/png" sizes="32x32" href="/public/app/favicon-32x32.png" />
+                        <link rel="apple-touch-icon" sizes="180x180" href="/public/app/apple-touch-icon-180x180.png" />
+                        <meta name="msapplication-config" content="/public/app/browserconfig.xml" />
+
+                        {/* Page */}
+                        <title>{page.title}</title>
+                        <meta content={page.description} name="description" />
+                        <link rel="canonical" href={String(response.canonicalUrl)} />
+
+                        {/* SEO, social medias, OG tags, ...  */}
+                        {page.head.map(({ $, ...attrs }) => React.createElement($, attrs))}
+
+                        {this.styles(page)}
+
+                        {await this.scripts(response, page)}
+
+                        {/* Rich Snippets: https://schema.org/docs/full.html + https://jsonld.com/ */}
+                        <script
+                            type="application/ld+json"
+                            dangerouslySetInnerHTML={{
+                                __html: JSON.stringify({ '@context': 'http://schema.org', '@graph': page.jsonld }),
+                            }}
+                        />
+                    </head>
+                    <body {...attrsBody} dangerouslySetInnerHTML={{ __html: html }}></body>
+                </html>,
+            )
         );
     }
 
-    public async page( html: string, page: Page, response: ServerResponse<TRouter> ) {
-
-        let attrsBody = {
-            className: [...page.bodyClass].join(' '),
-        };
-
-        return '<!doctype html>' + renderToString(
-            <html lang="en">
-                <head>
-                    {/* Format */}
-                    <meta charSet="utf-8" />
-                    <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
-                    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
-
-                    {/* Mobile */}
-                    <meta name="application-name" content={this.app.identity.web.title} />
-                    <meta name="apple-mobile-web-app-title" content={this.app.identity.web.title} />
-                    <meta name="apple-mobile-web-app-title" content={this.app.identity.web.title} />
-                    <meta content={this.app.identity.author.name} name="author" />
-                    <meta name="theme-color" content={this.app.identity.maincolor} />
-                    <meta name="msapplication-TileColor" content={this.app.identity.maincolor} />
-                    <meta name="apple-mobile-web-app-capable" content="yes" />
-                    <meta name="mobile-web-app-capable" content="yes" />
-                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-
-                    {/* https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions */}
-                    {/*<link rel="manifest" href={RES['manifest.json']} />*/}
-                    <link rel="shortcut icon" href="/public/app/favicon.ico" />
-                    <link rel="icon" type="image/png" sizes="16x16" href="/public/app/favicon-16x16.png" />
-                    <link rel="icon" type="image/png" sizes="32x32" href="/public/app/favicon-32x32.png" />
-                    <link rel="apple-touch-icon" sizes="180x180" href="/public/app/apple-touch-icon-180x180.png" />
-                    <meta name="msapplication-config" content="/public/app/browserconfig.xml" />
-
-                    {/* Page */}
-                    <title>{page.title}</title>
-                    <meta content={page.description} name="description" />
-                    <link rel="canonical" href={response.canonicalUrl} />
-
-                    {/* SEO, social medias, OG tags, ...  */}
-                    {page.head.map(({ $, ...attrs }) => (
-                        React.createElement($, attrs)
-                    ))}
-
-                    {this.styles( page )}
-
-                    {await this.scripts( response, page )}
-
-                    {/* Rich Snippets: https://schema.org/docs/full.html + https://jsonld.com/ */}
-                    <script type="application/ld+json" dangerouslySetInnerHTML={{
-                        __html: JSON.stringify({
-                            '@context': 'http://schema.org',
-                            '@graph': page.jsonld
-                        })
-                    }}/>
-
-                </head>
-                <body {...attrsBody} dangerouslySetInnerHTML={{ __html: html }}></body>
-            </html>
-        )
+    private styles(page: Page<TRouter>) {
+        return (
+            <>
+                {this.clientStyles()}
+
+                {page.style.map((style) =>
+                    'url' in style ? (
+                        <>
+                            <link rel="preload" href={style.url} as="style" />
+                            <link rel="stylesheet" type="text/css" href={style.url} />
+                        </>
+                    ) : (
+                        <>
+                            <style id={style.id} dangerouslySetInnerHTML={{ __html: style.inline }} />
+                        </>
+                    ),
+                )}
+            </>
+        );
     }
 
-    private styles( page: Page ) {
-        return <>
-            <link rel="preload" href="/public/client.css" as="style" />
-            <link rel="stylesheet" type="text/css" href="/public/client.css" />
-
-            {page.style.map( style => 'url' in style ? <>
-                <link rel="preload" href={style.url} as="style" />
-                <link rel="stylesheet" type="text/css" href={style.url} />
-            </> : <>
-                <style id={style.id} dangerouslySetInnerHTML={{ __html: style.inline }} />
-            </>)}
-        </>
+    private clientStyles() {
+        const styles = this.clientEntryAssets('css');
+
+        return (
+            <>
+                {styles.map((style) => {
+                    const href = this.clientAssetUrl(style);
+
+                    return (
+                        <React.Fragment key={style}>
+                            <link rel="preload" href={href} as="style" />
+                            <link rel="stylesheet" type="text/css" href={href} />
+                        </React.Fragment>
+                    );
+                })}
+            </>
+        );
     }
 
-    private async scripts( response: ServerResponse<TRouter>, page: Page ) {
+    private clientScripts() {
+        const scripts = this.clientEntryAssets('js');
+
+        return (
+            <>
+                {scripts.map((script) => {
+                    const src = this.clientAssetUrl(script, true);
+
+                    return (
+                        <React.Fragment key={script}>
+                            <link rel="preload" href={src} as="script" />
+                            <script defer type="text/javascript" src={src} />
+                        </React.Fragment>
+                    );
+                })}
+            </>
+        );
+    }
 
+    private async scripts(response: ServerResponse<TRouter>, page: Page<TRouter>) {
         const ssrData = response.forSsr(page);
-        const context = safeStringify( ssrData );
-        const routesForClient = JSON.stringify( this.router.ssrRoutes );
-
-        return <>
-            {/* JS */}
-            <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} />
-
-            {page.scripts.map( script => 'url' in script ? <>
-                <link rel="preload" href={script.url} as="script" />
-                <script type="text/javascript" src={script.url} {...script.attrs || {}} />
-            </> : <>
-                <script type="text/javascript" {...script.attrs || {}} id={script.id} 
-                    dangerouslySetInnerHTML={{ __html: script.inline }} />
-            </>)}
-        </>
+        const context = safeStringify(ssrData);
+        const routesForClient = JSON.stringify(this.router.ssrRoutes);
+
+        return (
+            <>
+                {/* JS */}
+                <script
+                    type="text/javascript"
+                    dangerouslySetInnerHTML={{
+                        __html:
+                            `window.ssr=${context}; window.routes=${routesForClient};` +
+                            (this.app.env.profile === 'dev' ? 'window.dev = true;' : ''),
+                    }}
+                />
+
+                {this.clientScripts()}
+
+                {page.scripts.map((script) =>
+                    'url' in script ? (
+                        <>
+                            <link rel="preload" href={script.url} as="script" />
+                            <script type="text/javascript" src={script.url} {...(script.attrs || {})} />
+                        </>
+                    ) : (
+                        <>
+                            <script
+                                type="text/javascript"
+                                {...(script.attrs || {})}
+                                id={script.id}
+                                dangerouslySetInnerHTML={{ __html: script.inline }}
+                            />
+                        </>
+                    ),
+                )}
+            </>
+        );
+    }
+
+    private clientEntryAssets(kind: 'assets' | 'css' | 'js' = 'assets'): string[] {
+        const manifest = getClientBuildManifest();
+        const entry = manifest.entries?.client;
+        const assets = entry?.[kind];
+
+        return Array.isArray(assets) ? assets : [];
+    }
+
+    private clientAssetUrl(asset: string, withBuildId = false) {
+        return `/public/${asset}${withBuildId ? `?v=${BUILD_ID}` : ''}`;
     }
-}
+}