Bootstrap 5 + stimulus

assets/app.js

@@ -0,0 +1,24 @@
+import $ from 'jquery';
+global.$ = $;
+
+import './styles/app.scss';
+import 'bootstrap';
+import './bootstrap';
+import 'font-awesome/css/font-awesome.css';
+import 'jquery-ui/themes/base/all.css';
+import 'jquery-ui/ui/widgets/autocomplete';
+import 'bootstrap-star-rating';
+import 'bootstrap-star-rating/css/star-rating.css';
+import 'bootstrap-star-rating/themes/krajee-fa/theme';
+import 'bootstrap-star-rating/themes/krajee-fa/theme.css';
+import './js/suivifilms2';
+import './js/addCollectionWidget';
+import './js/filtre';
+
+jQuery(function() {
+    $('.add-another-collection-widget').addCollection();
+
+    $('[data-fonction="switch"]').switchEtat();
+
+    $('[data-toggle="star-filter"]').filtreParNote();
+})

assets/bootstrap.js

@@ -0,0 +1,11 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.(j|t)sx?$/
+));
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/hello_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from 'stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}

assets/controllers/toast_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "stimulus";
+import { Toast } from 'bootstrap';
+
+export default class extends Controller {
+    connect() {
+        const toast = new Toast(this.element);
+        toast.show();
+    }
+}

assets/css/app.scss

@@ -1,5 +0,0 @@
-body {
-    background-color: darkgray;
-}
-
-@import "~bootstrap/scss/bootstrap";

assets/js/addCollectionWidget.js

@@ -31,7 +31,7 @@
             $prototype.find(":input").after($deleteLink);
     
             // Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
-            $deleteLink.click(function(e) {
+            $deleteLink.on("click", function(e) {
                 $prototype.remove();
     
                 e.preventDefault(); // évite qu'un # apparaisse dans l'URL
@@ -51,7 +51,7 @@
                 addDeleteLink($(this));
             })
       
-            $(this).click(function(e) {
+            $(this).on("click", function(e) {
                 e.preventDefault();
                 var list = jQuery(jQuery(this).attr('data-list-selector'));
                 // Try to find the counter of the list or use the length of the list

assets/js/app.js

@@ -1,47 +0,0 @@
-import $ from 'jquery';
-global.$ = $;
-
-import '../css/app.scss';
-import 'bootstrap';
-import 'font-awesome/css/font-awesome.css';
-import 'jquery-ui/themes/base/all.css';
-import 'jquery-ui/ui/widgets/autocomplete';
-import 'bootstrap-notify/bootstrap-notify';
-import 'animate.css/animate.css';
-import 'bootstrap-star-rating';
-import 'bootstrap-star-rating/css/star-rating.css';
-import 'bootstrap-star-rating/themes/krajee-fa/theme';
-import 'bootstrap-star-rating/themes/krajee-fa/theme.css';
-import './suivifilms2';
-import './addCollectionWidget';
-import './filtre';
-
-$(document).ready(function() {
-    $(function() {
-
-        $('[data-toggle="tooltip"]').tooltip();
-
-        $('.add-another-collection-widget').addCollection();
-
-        $('[data-fonction="switch"]').switchEtat();
-
-        $('[data-toggle="star-filter"]').filtreParNote();
-
-        $('[data-toggle="notify"]').each(function() {
-            $.notify({
-                message: $(this).data('message')
-            },{
-                type: $(this).data('type'),
-                animate: {
-                    enter: 'animated fadeInRight',
-                    exit: 'animated fadeOutRight'
-                },
-                delay: 4000,
-                offset: {
-                    x: 15,
-                    y: 70
-                }
-            })
-        })
-    })
-})

assets/js/filtre.js

@@ -12,7 +12,7 @@
     $.fn.filtreParNote = function () {
         this.each(function() {
             $(this).val("0");
-            $(this).change(function(e) {
+            $(this).on("change", function(e) {
                 let value = $(this).val();
                 let target = $(this).data('path');
                 console.log(value);

assets/js/suivifilms2.js

@@ -1,7 +1,7 @@
 (function ($) {
     $.fn.switchEtat = function () {
         this.each(function() {
-            $(this).click(function(e) {
+            $(this).on("click", function(e) {
                 e.preventDefault();
                 let $icone = $(this).children('i');
                 let contenu = $(this).data('content');

assets/styles/app.scss

@@ -0,0 +1,4 @@
+@import "~bootstrap/scss/bootstrap";
+
+$enable-grid-classes: false;
+$enable-cssgrid: true;

config/packages/test/webpack_encore.yaml

@@ -0,0 +1,2 @@
+#webpack_encore:
+#    strict_mode: false

config/packages/twig.yaml

@@ -2,5 +2,5 @@ twig:
     default_path: '%kernel.project_dir%/templates'
     debug: '%kernel.debug%'
     strict_variables: '%kernel.debug%'
-    form_themes: ['bootstrap_4_layout.html.twig']
+    form_themes: ['bootstrap_5_layout.html.twig']
     exception_controller: null

config/packages/webpack_encore.yaml

@@ -1,13 +1,35 @@
 webpack_encore:
-    # The path where Encore is building the assets.
-    # This should match Encore.setOutputPath() in webpack.config.js.
+    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
     output_path: '%kernel.project_dir%/public/build'
     # If multiple builds are defined (as shown below), you can disable the default build:
     # output_path: false
 
-    # if using Encore.enableIntegrityHashes() specify the crossorigin attribute value (default: false, or use 'anonymous' or 'use-credentials')
+    # Set attributes that will be rendered on all script and link tags
+    script_attributes:
+        defer: true
+        # Uncomment (also under link_attributes) if using Turbo Drive
+        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
+        # 'data-turbo-track': reload
+    # link_attributes:
+        # Uncomment if using Turbo Drive
+        # 'data-turbo-track': reload
+
+    # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
     # crossorigin: 'anonymous'
-    
+
+    # Preload all rendered script and link tags automatically via the HTTP/2 Link header
+    # preload: true
+
+    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
+    # strict_mode: false
+
+    # If you have multiple builds:
+    # builds:
+        # pass "frontend" as the 3rg arg to the Twig functions
+        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}
+
+        # frontend: '%kernel.project_dir%/public/frontend/build'
+
     # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
-    # Available in version 1.2
-    #cache: '%kernel.debug%'
+    # Put in config/packages/prod/webpack_encore.yaml
+    # cache: true

package.json

@@ -1,17 +1,26 @@
 {
-  "devDependencies": {
-    "@symfony/webpack-encore": "^0.28.0",
-    "animate.css": "^3.7.2",
-    "bootstrap": "^4.3.1",
-    "bootstrap-notify": "^3.1.3",
-    "bootstrap-star-rating": "^4.0.6",
-    "core-js": "^3.6.2",
-    "font-awesome": "^4.7.0",
-    "jquery": "^3.4.1",
-    "jquery-ui": "^1.12.1",
-    "sass": "^1.32.8",
-    "popper.js": "^1.16.0",
-    "sass-loader": "^7.0.1",
-    "webpack-notifier": "1.8.0"
-  }
+    "devDependencies": {
+        "@popperjs/core": "^2.10.2",
+        "@symfony/stimulus-bridge": "^2.0.0",
+        "@symfony/webpack-encore": "^1.0.0",
+        "bootstrap": "^5.1.3",
+        "bootstrap-star-rating": "^4.1.2",
+        "core-js": "^3.0.0",
+        "font-awesome": "^4.7.0",
+        "jquery": "^3.6.0",
+        "jquery-ui": "^1.13.0",
+        "regenerator-runtime": "^0.13.2",
+        "sass": "^1.43.3",
+        "sass-loader": "^12.2.0",
+        "stimulus": "^2.0.0",
+        "webpack-notifier": "^1.6.0"
+    },
+    "license": "UNLICENSED",
+    "private": true,
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
+    }
 }

symfony.lock

@@ -631,18 +631,22 @@
         ]
     },
     "symfony/webpack-encore-bundle": {
-        "version": "1.0",
+        "version": "1.9",
         "recipe": {
             "repo": "github.com/symfony/recipes",
             "branch": "master",
-            "version": "1.0",
-            "ref": "7b6180725839c090cd8dbd069a3947b0dca1bae0"
+            "version": "1.9",
+            "ref": "0f274572ea315eb3b5884518a50ca43f211b4534"
         },
         "files": [
-            "assets/css/app.css",
-            "assets/js/app.js",
+            "assets/app.js",
+            "assets/bootstrap.js",
+            "assets/controllers.json",
+            "assets/controllers/hello_controller.js",
+            "assets/styles/app.css",
             "config/packages/assets.yaml",
             "config/packages/prod/webpack_encore.yaml",
+            "config/packages/test/webpack_encore.yaml",
             "config/packages/webpack_encore.yaml",
             "package.json",
             "webpack.config.js"

templates/base.html.twig

@@ -9,12 +9,28 @@
         <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
     </head>
     <body style="padding-top:7rem;padding-bottom:4rem;">
+		{% for type, messages in app.session.flashBag.all %}
+			{% for message in messages %}
+				{% if type == 'error' %}{% set type = 'danger' %} {% endif %}
+				<div class="position-fixed top-5 end-0 p-2" style="z-index: 11">
+					<div id="liveToast" class="toast bg-gradient bg-{{ type }} text-white" role="alert" aria-live="assertive" aria-atomic="true" {{ stimulus_controller('toast') }}>
+						<div class="toast-header">
+						<strong class="me-auto">Info</strong>
+						<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+						</div>
+						<div class="toast-body">
+							{{ message }}
+						</div>
+					</div>
+				</div>
+			{% endfor %}
+		{% endfor %}
 		<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
 			<a class="navbar-brand" href="{{ path('videotheque_liste') }}">Videothèque</a>
-			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="/" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-				<span class="navbar-toggler-icon"></span>
+		    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
 			</button>
-			<div class="collapse navbar-collapse" id="navbarsExampleDefault">
+			<div class="collapse navbar-collapse" id="navbarSupportedContent">
 				{% if not is_granted('IS_AUTHENTICATED_REMEMBERED') %}
 					<ul class="navbar-nav mr-auto">
 						<li class="nav-item
@@ -40,7 +56,7 @@
 					{%  if is_granted('ROLE_MODERATEUR') %}
 						<ul class="navbar-nav">
 							<li class="nav-item dropdown">
-								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAdmin" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAdmin" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 									Administration
 								</a>
 								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
@@ -67,7 +83,7 @@
                 {% else %}
 					<ul class="navbar-nav">
 						<li class="nav-item dropdown">
-							<a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 {{ app.user.nomComplet }}
 							</a>
 							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarUserDropdown">
@@ -80,12 +96,12 @@
                 {% endif %}
 				<ul class="navbar-nav">
 					<li class="nav-item">
-						<a href="#" class="nav-link" data-toggle="modal" data-target="#modalWindow"><i class="fa fa-info-circle fa-lg text-light nav-link" aria-hidden="true"></i></a>
+						<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#modalWindow"><i class="fa fa-info-circle fa-lg text-light nav-link" aria-hidden="true"></i></a>
 					<li>
 				</ul>
 				<ul class="navbar-nav">
 					<li class="nav-item dropdown">
-						<a class="nav-link dropdown-toggle" href="#" id="navbarBellDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						<a class="nav-link dropdown-toggle" href="#" id="navbarBellDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-bell fa-lg"></i>
 						</a>
 						<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarBellDropdown" style="width: 400px;">
@@ -106,7 +122,7 @@
 					<div class="col-4">
 						{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
 							<div class="text-right">
-							<a data-toggle="collapse" role="button" href="#collapseAide" aria-expanded="false" aria-controls="collapseAide">Aide <i class="fa fa-chevron-down"></i></a>
+							<a data-bs-toggle="collapse" role="button" href="#collapseAide" aria-expanded="false" aria-controls="collapseAide">Aide <i class="fa fa-chevron-down"></i></a>
 							</div>
 							<div class="card collapse" id="collapseAide">
 								<div class="card-body">
@@ -125,7 +141,7 @@
 						<div class="modal-content">
 						<div class="modal-header">
 							<h5 class="modal-title" id="information">Vidéothèque partagée</h5>
-							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
 							<span aria-hidden="true">&times;</span>
 							</button>
 						</div>
@@ -151,7 +167,7 @@
 							</p>
 						</div>
 						<div class="modal-footer">
-							<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
+							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
 						</div>
 						</div>
 					</div>
@@ -169,12 +185,7 @@
                 {% endblock %}
 			</footer>
 		</div>
-        {% for type, messages in app.session.flashBag.all %}
-            {% for message in messages %}
-                {% if type == 'error' %}{% set type = 'danger' %} {% endif %}
-				<div data-toggle="notify" data-message="{{ message }}" data-type="{{ type }}"></div>
-            {% endfor %}
-        {% endfor %}
+        
 		{{ encore_entry_script_tags('app') }}
 		{% block javascripts %}{% endblock %}
     </body>

templates/videotheque/form.html.twig

@@ -2,18 +2,18 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-3">
-                {% form_theme form 'bootstrap_4_horizontal_layout.html.twig' %}
+                {% form_theme form 'bootstrap_5_horizontal_layout.html.twig' %}
 
                 <div class="form-group row">
                     {{ form_row(form.titre) }}
                     {{ form_row(form.annee) }}
                     {{ form_row(form.lien) }}
-                    {% form_theme form 'bootstrap_4_layout.html.twig' %}
+                    {% form_theme form 'bootstrap_5_layout.html.twig' %}
                     {{ form_row(form.information) }}
 
                     {{ form_label(form.mediaVideo, 'Bande annonce') }}
-                    {{ form_errors(form.mediaVideo) }}
                     {{ form_widget(form.mediaVideo) }}
+                    {{ form_errors(form.mediaVideo) }}
                     
                 </div>
             </div>
@@ -30,12 +30,12 @@
                             data-widget-counter="{{ form.children|length }}">
                             {% for genreField in form.genres %}
                             <li class="list-group-item">
-                                {{ form_errors(genreField) }}
                                 {{ form_widget(genreField) }}
+                                {{ form_errors(genreField) }}
                             </li>
                             {% else %}
-                                {{ form_errors(form.genres) }}
                                 {{ form_widget(form.genres) }}
+                                {{ form_errors(form.genres) }}
                             {% endfor %}
                         </ul>
                     </div>
@@ -54,12 +54,12 @@
                             data-widget-counter="{{ form.children|length }}">
                             {% for realisateurField in form.realisateurs %}
                             <li class="list-group-item">
-                                {{ form_errors(realisateurField) }}
                                 {{ form_widget(realisateurField) }}
+                                {{ form_errors(realisateurField) }}
                             </li>
                             {% else %}
-                                {{ form_errors(form.realisateurs) }}
                                 {{ form_widget(form.realisateurs) }}
+                                {{ form_errors(form.realisateurs) }}
                             {% endfor %}
                         </ul>
                     </div>

templates/videotheque/liste.html.twig

@@ -30,7 +30,7 @@
 					data-show-clear="true"
 					data-show-caption="false"
 					data-theme="krajee-fa"
-					data-toggle="bookmark-filter"
+					data-toggle="star-filter"
 					data-path="#tableFilms"
 					min=0
 					max=5
@@ -73,7 +73,7 @@
 										data-icone-actif="fa fa-bookmark fa-lg"
 										data-icone-inactif="fa fa-bookmark-o text-secondary fa-lg"
 										data-path="{{ path('maliste_modifier_a_voir') }}"
-										data-toggle="tooltip"
+										data-bs-toggle="tooltip"
 										title="{{ follow_texte }}"
 										data-content="{{ film.id }}">
 								<i class="{{ follow_icone }}"></i>
@@ -96,31 +96,31 @@
 						<td>
 							{%  if film.authered is defined %}
 								{% if film.authered.activeNow %}
-									<i class="fa fa-user text-success" data-toggle="tooltip" title="En ligne"></i>
+									<i class="fa fa-user text-success" data-bs-toggle="tooltip" title="En ligne"></i>
 								{% else %}
-									<i class="fa fa-user-o text-secondary" data-toggle="tooltip" title="Hors ligne"></i>
+									<i class="fa fa-user-o text-secondary" data-bs-toggle="tooltip" title="Hors ligne"></i>
 								{% endif %}
 								{{ film.authered.username }}
 							{% endif %}
 						</td>
 					{% endif %}
 					<td>
-						<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
-						{% if film.new %}<span class="badge badge-light">New</span>{% endif %}
-						{% if film.nbComs %}<span class="badge badge-light" data-toggle="tooltip" data-original-title="{{ film.nbComs }} commentaire(s)">{{ film.nbComs }}</span>{% endif %}
+						<a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}"><span data-bs-toggle="tooltip" data-placement="right" title="{{ film.information }}">{{ film.titre }}</span></a>
+						{% if film.new %}<span class="badge bg-light text-dark">New</span>{% endif %}
+						{% if film.nbComs %}<span class="badge bg-light text-dark" data-bs-toggle="tooltip" data-original-title="{{ film.nbComs }} commentaire(s)">{{ film.nbComs }}</span>{% endif %}
 
 					</td>
 					<td>
 						{% if film.genres is defined %}
 							{% for genre in film.genres %}
-								<a href="{{ path("videotheque_listepargenre", {"id": genre.id}) }}"><span class="badge badge-secondary">{{ genre.name }}</span></a>
+								<a href="{{ path("videotheque_listepargenre", {"id": genre.id}) }}"><span class="badge bg-secondary">{{ genre.name }}</span></a>
 							{% endfor %}
 						{% endif %}
 					</td>
 					<td>
 					{% if film.realisateurs is defined %}
 						{%  for realisateur in film.realisateurs %}
-							<a href="{{ path('videotheque_listeparreal', {"id": realisateur.id}) }}"><span class="badge badge-info">{{ realisateur.nomComplet }}</span></a>
+							<a href="{{ path('videotheque_listeparreal', {"id": realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
 						{%  endfor %}
 					{% endif %}
 					</td>

templates/videotheque/voirfilm.html.twig

@@ -14,7 +14,7 @@
                     data-icone-actif="fa fa-bookmark"
                     data-icone-inactif="fa fa-bookmark-o text-secondary"
                     data-path="{{ path('maliste_modifier_a_voir') }}"
-                    data-toggle="tooltip"
+                    data-bs-toggle="tooltip"
                     title="{{ follow_texte }}"
                     data-content="{{ film.id }}">
             <i class="{{ follow_icone }}"></i></a>
@@ -59,7 +59,7 @@
                                 <h5 class="col-10">Fiche technique</h5>
                                 {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                                     <div class="col-2">
-                                        <a data-toggle="tooltip" title="Modifier la fiche du film" href="{{ path('videotheque_modifier', {'id': film.id}) }}"><i class="fa fa-edit fa-lg"></i></a>
+                                        <a data-bs-toggle="tooltip" title="Modifier la fiche du film" href="{{ path('videotheque_modifier', {'id': film.id}) }}"><i class="fa fa-edit fa-lg"></i></a>
                                         {% if is_granted('ROLE_ADMIN') %}<a href="{{ path('videotheque_supprimer', {'id': film.id})  }}"><i class="fa fa-trash fa-lg", style="color:Tomato;"></i></a>{% endif %}
 
                                     </div>
@@ -73,13 +73,13 @@
                                 <dt class="col-4">Réalisateur(s)</dt>
                                 <dd class="col-8">
                                 {% for realisateur in film.realisateurs %}
-                                    <a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge badge-info">{{ realisateur.nomComplet }}</span></a>
+                                    <a href="{{ path('videotheque_listeparreal', {'id': realisateur.id}) }}"><span class="badge bg-info">{{ realisateur.nomComplet }}</span></a>
                                 {% endfor %}
                                 </dd>
                                 <dt class="col-4">Genre</dt>
                                 <dd class="col-8">
                                 {% for genre in film.genres %}
-                                    <a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge badge-info">{{ genre.name }}</span></a>
+                                    <a href="{{ path('videotheque_listepargenre', {'id': genre.id}) }}"><span class="badge bg-info">{{ genre.name }}</span></a>
                                 {% endfor %}
                                 </dd>
                                 {% if film.lien is not null %}
@@ -148,7 +148,7 @@
                 <div class="card-body">
                     {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                             <p>
-                                <a data-toggle="collapse" role="button" href="#collapseCommentaire" aria-expanded="false" aria-controls="collapseCommentaire">Commenter <i class="fa fa-chevron-down"></i></a>
+                                <a data-bs-toggle="collapse" role="button" href="#collapseCommentaire" aria-expanded="false" aria-controls="collapseCommentaire">Commenter <i class="fa fa-chevron-down"></i></a>
                             </p>
                             <div class="collapse" id="collapseCommentaire">
                             {{ include('videotheque/form_commentaire.html.twig') }}

webpack.config.js

@@ -1,4 +1,10 @@
-var Encore = require('@symfony/webpack-encore');
+const Encore = require('@symfony/webpack-encore');
+
+// Manually configure the runtime environment if not already configured yet by the "encore" command.
+// It's useful when you use tools that rely on webpack.config.js file.
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+}
 
 Encore
     // directory where compiled assets will be stored
@@ -11,16 +17,13 @@ Encore
     /*
      * ENTRY CONFIG
      *
-     * Add 1 entry for each "page" of your app
-     * (including one that's included on every page - e.g. "app")
-     *
      * Each entry will result in one JavaScript file (e.g. app.js)
-     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
+     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
-    .addEntry('app', './assets/js/app.js')
-    //.addEntry('tags', './assets/js/tagSelect2.js')
-    //.addEntry('page1', './assets/js/page1.js')
-    //.addEntry('page2', './assets/js/page2.js')
+    .addEntry('app', './assets/app.js')
+
+    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
+    .enableStimulusBridge('./assets/controllers.json')
 
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()
@@ -42,31 +45,31 @@ Encore
     // enables hashed filenames (e.g. app.abc123.css)
     .enableVersioning(Encore.isProduction())
 
+    .configureBabel((config) => {
+        config.plugins.push('@babel/plugin-proposal-class-properties');
+    })
+
     // enables @babel/preset-env polyfills
-    .configureBabel(() => {}, {
-        useBuiltIns: 'usage',
-        corejs: 3
+    .configureBabelPresetEnv((config) => {
+        config.useBuiltIns = 'usage';
+        config.corejs = 3;
     })
 
     // enables Sass/SCSS support
     .enableSassLoader()
 
-    // enables vuejs
-    //.enableVueLoader()
-
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()
 
+    // uncomment if you use React
+    //.enableReactPreset()
+
     // uncomment to get integrity="..." attributes on your script & link tags
     // requires WebpackEncoreBundle 1.4 or higher
-    //.enableIntegrityHashes()
+    //.enableIntegrityHashes(Encore.isProduction())
 
     // uncomment if you're having problems with a jQuery plugin
     .autoProvidejQuery()
-
-    // uncomment if you use API Platform Admin (composer req api-admin)
-    //.enableReactPreset()
-    //.addEntry('admin', './assets/js/admin.js')
 ;
 
 module.exports = Encore.getWebpackConfig();