Le bloc-notes professionnel d'un développeur front-end senior
Source: Set twig variable to json file as an include.
Fichier _data/test.json:
|
1 |
{ "name":"John", "age":30, "car":null } |
Fichier template.twig:
|
1 2 3 4 5 6 7 |
{% set json %} {% include "_data/test.json" %} {% endset %} [...] <h1>{{ json }}</h1> |
Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).
Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).
Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:
|
1 2 3 |
yarn add twig-html-loader --save yarn add html-webpack-plugin --save yarn add fs --save |
webpack.config.js:
|
1 2 3 4 |
const Encore = require('@symfony/webpack-encore'); [...] const HtmlWebpackPlugin = require('html-webpack-plugin'); const fs = require('fs'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// create a list of twig files to generate // filter out anything that starts with an underscore or is not a twig file function walk(dir) { let results = []; const list = fs.readdirSync(dir); list.forEach(file => { file = `${dir}/${file}`; const stat = fs.statSync(file); if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) { /* Recurse into a subdirectory */ results = results.concat(walk(file)); } else if ( stat && !stat.isDirectory() && path.extname(file) === '.twig' && path.basename(file).indexOf('_') !== 0 ) { /* Is a file */ results.push(file); } }); return results; } //start looking in the main twig folder const files = walk('./assets/twig'); // generate html plugins to export const htmlPlugins = files.map( file => // Create new HTMLWebpackPlugin with options Encore.addPlugin(new HtmlWebpackPlugin({ filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'), template: path.resolve(__dirname, file), publicPath: '../build/', hash: true, })) ); |
|
1 2 3 4 5 6 7 8 |
Encore [...] .addLoader({ test: /\.twig$/, type: 'asset/source', loader: 'twig-html-loader' }) ; |
Résultat:
Fichiers source:
Fichiers destination:
Mise à jour: 09/12/2021
Un autre moyen suggéré dans le chapitre 15 Handling Events du livre Eloquent Javascript.
|
1 2 3 4 5 6 7 8 9 |
<button>Act-once button</button> <script> let button = document.querySelector("button"); function once() { console.log("Done."); button.removeEventListener("click", once); } button.addEventListener("click", once); </script> |
js/utils.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const executeOnlyOnce = ( function( callbackFunction ) { let alreadyExecuted = false; return function( callbackFunction ) { if ( !alreadyExecuted ) { alreadyExecuted = true; // Execute only once! callbackFunction(); } }; })(); export { executeOnlyOnce } |
|
1 2 3 4 5 6 7 8 |
import { executeOnlyOnce } from './js/utils'; let hadPreviousBreakpointChanges = false; console.log( hadPreviousBreakpointChanges ); // "false" const onBreakpointChange = function(){ hadPreviousBreakpointChanges = true; }; |
|
1 2 |
executeOnlyOnce(onBreakpointChange); console.log(hadPreviousBreakpointChanges); // "true" |
Testé fonctionnel UIkit v3.6.19. Documentation officielle.
L’astuce consiste à initialiser le composant toggle d’UIkit sur une classe (.is-toggle dans mon exemple) relative à un ID (#filter---CustomizationTechniques dans mon exemple) placé dans le DOM sur un élément parent/englobant:
|
1 2 3 4 5 6 7 8 9 10 |
<div id="filter---CustomizationTechniques" class="uk-form-controls"> [...] <div class="is-toggle" hidden> [...] </div> <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle"> <span class="is-toggle">Voir plus</span> <span class="is-toggle" hidden>Voir moins</span> </a> </div> |
Code complet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="uk-margin"> <div class="uk-form-label">Technique de personnalisation</div> <div id="filter---CustomizationTechniques" class="uk-form-controls"> <label><input class="uk-checkbox" type="checkbox"> Tampographie</label><br> <label><input class="uk-checkbox" type="checkbox"> Sérigraphie</label><br> <label><input class="uk-checkbox" type="checkbox"> Transfert sérigraphique</label><br> <label><input class="uk-checkbox" type="checkbox"> Transfert numérique</label><br> <label><input class="uk-checkbox" type="checkbox"> Impression numérique directe</label><br> <div class="is-toggle" hidden> <label><input class="uk-checkbox" type="checkbox"> Broderie</label><br> <label><input class="uk-checkbox" type="checkbox"> Ecussons brodés</label><br> <label><input class="uk-checkbox" type="checkbox"> Sublimation</label><br> <label><input class="uk-checkbox" type="checkbox"> Gravure laser</label><br> <label><input class="uk-checkbox" type="checkbox"> Doming</label><br> <label><input class="uk-checkbox" type="checkbox"> Autocollants</label><br> <label><input class="uk-checkbox" type="checkbox"> Laser sur polaire et microfibre</label> </div> <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle"> <span class="is-toggle">Voir plus</span> <span class="is-toggle" hidden>Voir moins</span> </a> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import bph from 'breakpoint-helper'; // UIkit v3.6.19 CSS breakpoints // $breakpoint-small: 640px !default; // $breakpoint-medium: 960px !default; // $breakpoint-large: 1200px !default; // $breakpoint-xlarge: 1600px !default; const instance = bph({ small: '640px', medium: '960px', large: '1200px', xlarge: '1600px', }); |
listen() avec un breakpoint unique(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.
La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const { listen } = instance; const currentBreakpoint = listen( { name: 'large', useMax: true, }, ({ matches }) => { if (matches) { // Execute code for Mobile devices console.log('Current breakpoint is: (max-width: 1199px)'); } else { // Execute code for Desktop devices console.log('Current breakpoint is: (min-width: 1200px)'); } } ); |
Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const bpMobile = listen( { name: 'large', useMax: true, }, ({ matches }) => { if (matches) { // Initialiser console.log('EXECUTE code for: Mobile!'); } else { // Nettoyer console.log('DESTROY code for: Mobile!'); } } ); const bpDesktop = listen('large', ({ matches }) => { if (matches) { // Initialiser console.log('EXECUTE code for: Desktop!'); } else { // Nettoyer console.log('DESTROY code for: Desktop!'); } }); |
Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).
Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).
Quelques ressources en ligne:
Oui, le tree shaking est activé par défaut en mode « production » dans Webpack Encore. C’est juste que la documentation officielle sur symfony.com oublie de le mentionner (grrr…)!
Vous pouvez effectuer le test qui est décrit ici (aka « le tree shaking dans Webpack Encore expliqué en 30 secondes ») pour vous en assurer.
Pour exemple, si vous avez les deux fichiers suivants:
|
1 2 3 4 5 6 7 8 |
// src/imports.js export function testA() { console.log('Test A'); } export function testB() { console.log('Test B'); } |
|
1 2 3 4 |
// src/index.js (entry point) import { testA } from './imports'; testA(); |
Exécuter la commande yarn encore dev devrait générer quelque chose de similaire à ceci:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/***/ "./src/imports.js": /*!************************!*\ !*** ./src/imports.js ***! \************************/ /*! exports provided: testA, testB */ /*! exports used: testA */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = testA; /* unused harmony export testB */ function testA() { console.log('Test A'); } function testB() { console.log('Test B'); } /***/ }), |
Cependant, en exécutant la commande yarn encore production le commentaire /* unused harmony export testB */ présent avec la précédente commande sera pris en compte par UglifyJs qui va en conséquence supprimer l’export en relation lors de la phase de minification. Dans ce cas, on ne devrait pas retrouver la chaîne de caractère « Test B » dans le fichier généré:
|
1 |
!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s="lVK7")}({dxJD:function(e,t,n){"use strict";function r(){console.log("Test A")}t.a=r},lVK7:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("dxJD");Object(r.a)()}}); |
/* unused harmony export */ en développement avec le paramètre config.optimization.usedExports = true;Ceci vous permettra de vérifier avec du code humainement lisible quels sont les parties de votre code qui ne sont pas exploitées et qui seront supprimées dans le bundle minifié de production.
Tout à la fin de votre fichier webpack.config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[...] ; // fetch the config, then modify it! const config = Encore.getWebpackConfig(); config.optimization.usedExports = true; // export the final config module.exports = config; // was: // module.exports = Encore.getWebpackConfig(); |
Vous pouvez tout-à-fait laisser cette config activée. Elle ne portera pas préjudice au poids final de votre build de production.