Utilise swc au lieu de Babel pour la transpilation

Par contre, l’utilisation des tagged template litterals conduit à la génération de code qui déclenche une erreur dans terser (le minifieur) : parcel-bundler/parcel#7101 On peut contourner le problème en écrivant différemment notre code pour échapper le nom du profil dans le HTML généré dynamiquement.
Delegation-numerique-en-sante · Apr 12, 2022 · 75a23bd · 75a23bd
1 parent f40bae2
commit 75a23bd
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 42 deletions.
diff --git a/.parcelrc b/.parcelrc
@@ -8,6 +8,11 @@
         "parcel-resolver-ignore",
         "..."
     ],
+    "transformers": {
+        "*.{js,ts}": [
+            "@parcel/transformer-js"
+        ]
+    },
     "optimizers": {
         "*.html": [
             "parcel-optimizer-ogimage",

diff --git a/serve.py b/serve.py
@@ -20,7 +20,7 @@
 import build
 
 PARCEL_CLI = "./node_modules/.bin/parcel"
-BUNDLER_COMMAND = f"{PARCEL_CLI} watch --no-hmr src/*.html"
+BUNDLER_COMMAND = f"{PARCEL_CLI} watch --target default --no-hmr src/*.html"
 
 LIVERELOAD_DELAY = 0.1
 

diff --git a/src/scripts/affichage.js b/src/scripts/affichage.js
@@ -76,15 +76,3 @@ export function escapeHtml(str) {
         .replace(/'/g, '&#x27;')
         .replace(/`/g, '&#x60;')
 }
-
-export function safeHtml(literals, ...substitutions) {
-    let result = ''
-
-    for (let i = 0; i < substitutions.length; i++) {
-        result += literals[i]
-        result += escapeHtml(substitutions[i])
-    }
-    // add the last literal.
-    result += literals[literals.length - 1]
-    return result
-}
diff --git a/src/scripts/profil.js b/src/scripts/profil.js
@@ -1,5 +1,5 @@
 import { differenceEnJours, joursAvant } from './utils'
-import { createElementFromHTML, safeHtml } from './affichage'
+import { createElementFromHTML, escapeHtml } from './affichage'
 
 const JOURS_DE_VALIDITE_DEPISTAGE_NEGATIF = 7
 const JOURS_DE_VALIDITE_DEPISTAGE_POSITIF = 30
@@ -759,10 +759,12 @@ export default class Profil {
     }
 
     renderNom() {
-        return safeHtml`<h3><span class="profil">${this.affichageNom()}</span></h3>`
+        const nomEchappe = escapeHtml(this.affichageNom())
+        return `<h3><span class="profil">${nomEchappe}</span></h3>`
     }
 
     renderButtons(questionnaire) {
+        const nomEchappe = escapeHtml(this.nom)
         const possessifMasculinSingulier = this.estMonProfil() ? 'mon' : 'son'
         const possessifPluriel = this.estMonProfil() ? 'mes' : 'ses'
         var mainButton = ''
@@ -772,33 +774,33 @@ export default class Profil {
                     this.hasSuiviStartDate() && this.hasHistorique()
                         ? 'Continuer'
                         : 'Démarrer'
-                mainButton += safeHtml`
+                mainButton += `
                     <a class="button button-outline suivi-link"
-                        data-set-profil="${this.nom}" href="#suiviintroduction"
+                        data-set-profil="${nomEchappe}" href="#suiviintroduction"
                         >${verbe} ${possessifMasculinSingulier} suivi</a>
                 `
             }
-            mainButton += safeHtml`
+            mainButton += `
                 <a class="button button-outline conseils-link"
-                    data-set-profil="${this.nom}" href="#conseils"
+                    data-set-profil="${nomEchappe}" href="#conseils"
                     >Retrouver ${possessifPluriel} conseils</a>
             `
         } else {
             const label = this.isEmpty() ? 'Démarrer' : 'Continuer'
-            mainButton = safeHtml`
+            mainButton = `
                 <a class="button button-outline button-full-width conseils-link"
-                    data-set-profil="${this.nom}" href="#${questionnaire.firstPage}"
+                    data-set-profil="${nomEchappe}" href="#${questionnaire.firstPage}"
                     >${label} ${possessifMasculinSingulier} questionnaire</a>
             `
         }
         const continueButton = this.isEmpty()
             ? ''
-            : safeHtml`
-        <a data-set-profil="${this.nom}" href="#${questionnaire.firstPage}"
+            : `
+        <a data-set-profil="${nomEchappe}" href="#${questionnaire.firstPage}"
             >Modifier ${possessifPluriel} réponses</a>
         `
-        const deleteButton = safeHtml`
-            <a data-delete-profil="${this.nom}" href="" role="button"
+        const deleteButton = `
+            <a data-delete-profil="${nomEchappe}" href="" role="button"
                 >Supprimer ${possessifPluriel} réponses</a>
             `
         return mainButton + continueButton + deleteButton

diff --git a/src/scripts/suivi.js b/src/scripts/suivi.js
@@ -1,5 +1,5 @@
 import { format } from 'timeago.js'
-import { createElementFromHTML, safeHtml } from './affichage'
+import { createElementFromHTML, escapeHtml } from './affichage'
 
 import AlgorithmeSuivi from './algorithme/suivi'
 import { titleCase } from './utils'
@@ -11,6 +11,7 @@ export default class SuiviView {
     }
 
     renderButtonSuivi() {
+        const nomEchappe = escapeHtml(this.profil.nom)
         const possessifMasculinSingulier = this.profil.estMonProfil() ? 'mon' : 'son'
         const possessifPluriel = this.profil.estMonProfil() ? 'mes' : 'ses'
         const label =
@@ -20,20 +21,20 @@ export default class SuiviView {
         const nextPage = this.profil.hasSymptomesStartDate()
             ? 'suivisymptomes'
             : 'symptomes'
-        const suiviButton = safeHtml`
+        const suiviButton = `
             <a class="button button-full-width conseils-link"
-                data-set-profil="${this.profil.nom}" href="#${nextPage}"
+                data-set-profil="${nomEchappe}" href="#${nextPage}"
                 >${label} ${possessifMasculinSingulier} suivi</a>
         `
-        const conseilsButton = safeHtml`
+        const conseilsButton = `
             <a class="button button-outline button-full-width conseils-link"
-                data-set-profil="${this.profil.nom}" href="#conseils"
+                data-set-profil="${nomEchappe}" href="#conseils"
                 >Retrouver ${possessifPluriel} conseils</a>
         `
         let deleteLink = ''
         if (this.profil.hasSuiviStartDate()) {
-            deleteLink = safeHtml`
-                <a data-delete-suivi="${this.profil.nom}" href="" role="button"
+            deleteLink = `
+                <a data-delete-suivi="${nomEchappe}" href="" role="button"
                     >Supprimer ${possessifMasculinSingulier} suivi</a>
             `
         }

diff --git a/src/scripts/tests/test.affichage.js b/src/scripts/tests/test.affichage.js
@@ -25,14 +25,4 @@ describe('Affichage', function () {
         assert.strictEqual(element.firstElementChild.className, 'visible')
         assert.isFalse(element.firstElementChild.hasAttribute('hidden'))
     })
-
-    it('On peut échapper du HTML depuis un tag pour template literal', function () {
-        var bar = 'baz'
-        assert.strictEqual(affichage.safeHtml`foo ${bar}`, 'foo baz')
-        var evil = '<script>alert("something evil")</script>'
-        assert.strictEqual(
-            affichage.safeHtml`foo ${evil}`,
-            'foo &lt;script&gt;alert(&quot;something evil&quot;)&lt;/script&gt;'
-        )
-    })
 })