humalis 1.3.1 → 1.4.0

package/dist/cibles/commun/colorerCode.js

@@ -19,16 +19,9 @@ export function colorerCodeHumalis(code, langage) {
                 continue;
             const debut = debuts[token.ligne - 1] + token.colonne - 1;
             let fin = debut + (token.original ?? token.valeur).length;
-            if (token.type === 'CHAINE') {
-                fin = debut + 1;
-                while (fin < code.length) {
-                    if (code[fin] === '"' && code[fin - 1] !== '\\') {
-                        fin++;
-                        break;
-                    }
-                    fin++;
-                }
-            }
+            // Un texte s'arrête où le lexer l'a fermé (le code entre accents graves et {code "…"} compris).
+            if (token.type === 'CHAINE' && token.longueur !== undefined)
+                fin = debut + token.longueur;
             plages.push({ debut, fin, classe: token.type === 'MOT_CLE' ? 'mot' : token.type === 'CHAINE' ? 'texte' : 'nombre' });
         }
         for (let index = 0; index < lignes.length; index++) {

package/dist/cibles/commun/mouvement.js

@@ -286,6 +286,13 @@ export const ENTETE_WEB = `// Produit par Humalis : la hauteur de l'en-tête, po
 ${SUIVI_ENTETE.replace('function suivreLaHauteurDeLEntete() {', 'export function suivreLaHauteurDeLEntete(): void {').replace("const entete = () => document.querySelector(", "const entete = () => document.querySelector<HTMLElement>(")}
 `;
 /** Le prérendu capture la page après le script : il retire les marques du mouvement (rien de caché sans JavaScript). */
-export const NETTOYAGE_PRERENDU = `  // Le script du mouvement marque la page (humalis-js, data-humalis-vu) : le HTML prérendu ne garde aucune de ces marques.
-  transformHtml: (html) => html.replace(/(<html[^>]*class="[^"]*)\\bhumalis-js\\b/, '$1').replace(/ data-humalis-vu=""/g, '').replace(/ data-humalis-tape="[a-z-]*"/g, '').replace(/<code class="humalis-frappe-copie"[\\s\\S]*?<\\/code>/g, ''),
+/**
+ * Le nettoyage du HTML prérendu. Les préchargements que Vite ajoute en chargeant une page
+ * (« modulepreload » avec as="script", adresse complète) ne servent à rien dans la photo : le
+ * script principal les redemande. Avec le mouvement, le script marque aussi la page
+ * (humalis-js, data-humalis-vu) : le HTML prérendu ne garde aucune de ces marques.
+ */
+export const nettoyagePrerendu = (mouvement) => `  // La photo de chaque page ne garde que ce que le navigateur doit lire au départ.
+  transformHtml: (html) => html.replace(/<link rel="modulepreload" as="script"[^>]*>/g, '')${mouvement ? NETTOYAGE_MOUVEMENT : ''},
 `;
+const NETTOYAGE_MOUVEMENT = `.replace(/(<html[^>]*class="[^"]*)\\bhumalis-js\\b/, '$1').replace(/ data-humalis-vu=""/g, '').replace(/ data-humalis-tape="[a-z-]*"/g, '').replace(/<code class="humalis-frappe-copie"[\\s\\S]*?<\\/code>/g, '')`;

package/dist/cibles/web/css-ecran.js

@@ -142,10 +142,11 @@ export function cssEcran(codes) {
                 break;
             case 'fixe':
                 // « entete avec fixe » : l'en-tête ne bouge pas ; sur le web, la racine devient la zone qui
-                // défile, sous l'en-tête ; sur le statique, la page laisse la place de l'en-tête.
+                // défile, sous l'en-tête (sans glisser de côté : un décor qui dépasse ne la déplace pas) ;
+                // sur le statique, la page laisse la place de l'en-tête.
                 regles.push(`header${classe} { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--humalis-page); }`);
                 regles.push('html:has(#racine > .humalis-fixe-oui), html:has(#racine > .humalis-fixe-oui) body { height: 100%; overflow: hidden; }');
-                regles.push('#racine:has(> .humalis-fixe-oui) { position: fixed; top: var(--humalis-hauteur-entete, 0px); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; }');
+                regles.push('#racine:has(> .humalis-fixe-oui) { position: fixed; top: var(--humalis-hauteur-entete, 0px); left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }');
                 regles.push('body:has(header.humalis-fixe-oui) { padding-top: var(--humalis-hauteur-entete, 0px); }');
                 break;
         }

package/dist/cibles/web/projet.js

@@ -3,7 +3,7 @@ import { robotsTxt, manifeste, fichiersDuSite, balisesIcone, estExterne } from '
 import { sousActions } from '../../ri/actions.js';
 import { cssEcran } from './css-ecran.js';
 import { cssElements } from './css-elements.js';
-import { cssMouvement, animeAuDefilement, MOUVEMENT_WEB, NETTOYAGE_PRERENDU, ENTETE_WEB, suitLEntete } from '../commun/mouvement.js';
+import { cssMouvement, animeAuDefilement, MOUVEMENT_WEB, nettoyagePrerendu, ENTETE_WEB, suitLEntete } from '../commun/mouvement.js';
 import { fichiersDesElements, dependancesDesElements, dependancesDeDeveloppement } from './widgets.js';
 import { fichiersGraphique, cssGraphique } from './graphique.js';
 import { cssTheme, changeLeTheme, modeParDefaut, themeTs, SCRIPT_THEME } from './theme.js';
@@ -437,7 +437,7 @@ ${lignesRoutes}
   waitFor: 'meta[name="description"]',
   // Les adresses des « envoyer requete » du programme, neutralisées pendant le prérendu.
   apiPatterns: [${motifs}],
-${mouvement ? NETTOYAGE_PRERENDU : ''}};
+${nettoyagePrerendu(mouvement)}};
 `;
 }
 /** Disposition.tsx : l'en-tête et le pied communs autour des pages, qui restent montés quand on change de page. */
@@ -512,7 +512,21 @@ function lignesDeRoute(r, toutes, niveau, cheminParent) {
     return lignes;
 }
 function mainTsx(routes, feuilles, partage, session, introuvable, dispositions = {}, defilement = false, mouvement = false, entete = false) {
-    const imports = routes.map((r) => `import ${r.composant} from './pages/${r.composant}';`).join('\n');
+    // Chaque page dans son propre fichier, chargé à sa première visite ; celle de l'adresse ouverte
+    // (et son parent, pour une sous-page) est chargée avant l'affichage, pour ne jamais montrer d'écran vide.
+    const aDesFils = (r) => routes.some((f) => f.parent === r.nom);
+    const imports = routes.length === 0 ? '' : `const chargeurs = {
+${routes.map((r) => `  ${r.composant}: () => import('./pages/${r.composant}'),`).join('\n')}
+};
+const adresses: [keyof typeof chargeurs, string, boolean][] = [
+${routes.map((r) => `  [${JSON.stringify(r.composant)}, ${JSON.stringify(r.chemin)}, ${aDesFils(r)}],`).join('\n')}
+];
+const ouvertes = new Map<string, ComponentType>();
+for (const [nom, chemin, parent] of adresses) {
+  if (matchPath({ path: chemin, end: !parent }, location.pathname)) ouvertes.set(nom, (await chargeurs[nom]()).default);
+}
+const page = (nom: keyof typeof chargeurs): ComponentType => ouvertes.get(nom) ?? lazy(chargeurs[nom]);
+${routes.map((r) => `const ${r.composant} = page(${JSON.stringify(r.composant)});`).join('\n')}`;
     // Les pages qui ont le même en-tête et le même pied partagent une disposition ; une sous-page suit son parent.
     const groupes = new Map();
     for (const r of routes.filter((r) => r.parent === undefined)) {
@@ -530,25 +544,26 @@ function mainTsx(routes, feuilles, partage, session, introuvable, dispositions =
     for (const nom of [...enveloppes].reverse())
         routesTsx = `<${nom}>\n${routesTsx.replace(/^/gm, '  ')}\n</${nom}>`;
     routesTsx = routesTsx.replace(/^/gm, '        ');
-    return `import { StrictMode } from 'react';
+    return `import { ${routes.length === 0 ? '' : 'lazy, '}StrictMode, Suspense${routes.length === 0 ? '' : ', type ComponentType'} } from 'react';
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter, Route, Routes } from 'react-router';
+import { BrowserRouter, Route, Routes${routes.length === 0 ? '' : ', matchPath'} } from 'react-router';
 import { Messages } from './humalis/messages';${defilement ? "\nimport { Defilement } from './humalis/navigation';" : ''}
 ${session ? "import { Session } from './humalis/session';\n" : ''}${partage ? "import { Partage } from './humalis/partage';\n" : ''}${routes.some((r) => r.reservee) ? "import { Reservee } from './humalis/reservee';\n" : ''}${introuvable ? `import ${introuvable} from './pages/${introuvable}';` : "import Introuvable from './Introuvable';"}
-${dispositions.entete || dispositions.pied ? "import Disposition from './Disposition';\n" : ''}${imports}
-import './humalis/styles.css';
+${dispositions.entete || dispositions.pied ? "import Disposition from './Disposition';\n" : ''}import './humalis/styles.css';
 ${mouvement ? "import { observerLeDefilement } from './humalis/mouvement';\n" : ''}${entete ? "import { suivreLaHauteurDeLEntete } from './humalis/entete';\n" : ''}${feuilles.map((f) => `import './styles/${f}';\n`).join('')}
 // Un hébergeur statique sert /documentation/index.html pour /documentation/ :
 // le routeur lit l'adresse sans « index.html », comme le dossier.
 if (/\\/index\\.html$/.test(location.pathname)) {
   history.replaceState(history.state, '', location.pathname.replace(/index\\.html$/, '') + location.search + location.hash);
 }
-
+${imports ? `\n${imports}\n` : ''}
 createRoot(document.getElementById('racine')!).render(
   <StrictMode>
     <BrowserRouter>
 ${defilement ? '      <Defilement />\n' : ''}      <Messages>
-${routesTsx}
+        <Suspense fallback={null}>
+${routesTsx.replace(/^/gm, '  ')}
+        </Suspense>
       </Messages>
     </BrowserRouter>
   </StrictMode>,

package/dist/lexer/lexer.js

@@ -30,6 +30,14 @@ function motColle(ligne, debut, premier) {
     }
     return null;
 }
+/**
+ * L'accent grave qui ferme un `code` commencé à `debut` (juste après le premier), sur la
+ * même ligne et après au moins un caractère ; -1 sinon : un accent grave seul reste un caractère.
+ */
+function finDuCode(texte, debut) {
+    const fin = texte.indexOf('`', debut);
+    return fin > debut ? fin : -1;
+}
 /**
  * Le guillemet qui ferme un {code "…"} ou un {accent "…"} commencé à `debut` : le premier « "} »
  * où les accolades du contenu sont équilibrées ({code "{accent "…"}"}), sinon le premier « "} »
@@ -52,6 +60,17 @@ function decouperChaine(valeur, ligne, colonne) {
     let tampon = '';
     let i = 0;
     while (i < valeur.length) {
+        // `titre "Bonjour"` : le code d'une phrase, recopié tel quel, comme {code "…"}.
+        const finCode = valeur[i] === '`' ? finDuCode(valeur, i + 1) : -1;
+        if (finCode >= 0) {
+            if (tampon !== '') {
+                parties.push({ type: 'texte', valeur: tampon });
+                tampon = '';
+            }
+            parties.push({ type: 'code', valeur: valeur.slice(i + 1, finCode) });
+            i = finCode + 1;
+            continue;
+        }
         if (valeur[i] === '{') {
             if (tampon !== '') {
                 parties.push({ type: 'texte', valeur: tampon });
@@ -223,6 +242,13 @@ export function analyser(source) {
                 let valeur = '';
                 let profondeur = 0;
                 while (i < ligne.length && (ligne[i] !== '"' || (profondeur > 0 && ligne.indexOf('}', i + 1) >= 0))) {
+                    // `…` : le code d'une phrase, recopié tel quel jusqu'à l'accent grave qui le ferme.
+                    const finCode = ligne[i] === '`' ? finDuCode(ligne, i + 1) : -1;
+                    if (finCode >= 0) {
+                        valeur += ligne.slice(i, finCode + 1);
+                        i = finCode + 1;
+                        continue;
+                    }
                     // {code "…"} et {accent "…"} : recopiés tels quels jusqu'au premier « "} »
                     // (accolades, guillemets et antislashs compris).
                     const morceau = /^\{(code|accent)\s*"/.exec(ligne.slice(i));
@@ -257,6 +283,7 @@ export function analyser(source) {
                     valeur,
                     ligne: numLigne + 1,
                     colonne: debut + 1,
+                    longueur: i - debut,
                     parties: decouperChaine(valeur, numLigne + 1, debut + 1),
                 });
                 continue;