Legacy browser support

Prior to this change, the js + css would target modern browsers.

This change adds autoprefixer to output css for older browsers and babel
for the js.

Realistically, ie6 support is not possible. This change ensures the
modern features of css and js are kept back as much as possible.
As the templates function without javascript, really old browsers should
click perform the redirect automatically. Apart from autosubmit, no js
is used.

Author: johanib

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 6.0.0
 - Upgrade from Symfony 6.4 to Symfony 7.3
 - Maintenance release, Update tooling, packages
+- Update npm packages and frontend tooling.
 
 Upgrade instructions:
  - Ensure the `database_server_version` setting in parameters.yaml is up-to-date with the production db server version. e.g. `10.6.23-MariaDB`

package.json

@@ -1,24 +1,29 @@
 {
-    "browserslist": "last 2 versions, ie 11, > 1%",
+    "browserslist": [
+        "last 2 versions",
+        "ie 11",
+        "> 1%"
+    ],
     "devDependencies": {
         "@babel/core": "^7.26.9",
         "@babel/preset-env": "^7.26.9",
         "@eslint/eslintrc": "^3.3.1",
         "@eslint/js": "^9.39.1",
-        "@popperjs/core": "^2.11.8",
         "@symfony/webpack-encore": "^5.3.1",
         "@types/bootstrap": "^5.0.0",
         "@types/jquery": "^3.5.32",
         "@types/node": "^20.0.0",
         "@typescript-eslint/eslint-plugin": "^8.47.0",
         "@typescript-eslint/parser": "^8.47.0",
+        "autoprefixer": "^10.4.20",
         "css-loader": "^7.1.2",
         "eslint": "^9.39.1",
         "eslint-webpack-plugin": "^5.0.2",
         "less": "^4.4.2",
         "less-loader": "^12.3.0",
         "loader-utils": "^3.3",
         "postcss": ">=8.4.31",
+        "postcss-loader": "^8.1.1",
         "sass": "^1.94.1",
         "sass-loader": "^16.0.6",
         "ts-loader": "^9",
@@ -33,11 +38,10 @@
     "dependencies": {
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
+        "core-js": "^3.37.0",
         "jquery": "^3.7.1",
+        "regenerator-runtime": "^0.14.1",
         "select2": "^4.0.3",
         "yargs-parser": ">=18.1.2"
-    },
-    "resolutions": {
-        "json5": ">=2.2.2"
     }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')()
+    ]
+};
+

public/typescript/app.ts

@@ -16,6 +16,9 @@
 import jQuery from 'jquery';
 import 'bootstrap';
 
+// Ensure module context for Babel
+export {};
+
 declare global {
     interface Window {
         jQuery: typeof jQuery;

tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         /* Basic Options */
-        "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+        "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
         "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
         "lib": [
             "esnext",
@@ -20,7 +20,7 @@
         // "removeComments": true,                /* Do not emit comments to output. */
         // "noEmit": true,                        /* Do not emit outputs. */
         // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-        // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+        "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
         // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
         /* Strict Type-Checking Options */
@@ -43,7 +43,7 @@
         ],
 
         /* Module Resolution Options */
-        // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+        "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
         "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
         // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
         // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */

webpack.config.js

@@ -2,6 +2,16 @@ const Encore = require('@symfony/webpack-encore');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const path = require('path');
 
+if (!Encore.isRuntimeEnvironmentConfigured()) {
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'development');
+}
+
+Encore.configureBabelPresetEnv(config => {
+    config.useBuiltIns = 'usage';
+    config.corejs = 3;
+    config.targets = { ie: '11' };
+});
+
 Encore
     .setOutputPath('public/build/')
     .setPublicPath('/build')
@@ -17,6 +27,7 @@ Encore
         };
         options.webpackImporter = false;
     })
+    .enablePostCssLoader()
 
     .addStyleEntry('global', [
         './public/scss/application.scss',
@@ -32,8 +43,7 @@ Encore
         files: 'public/typescript',
         emitWarning: true,
         failOnError: Encore.isProduction(),
-        context: path.resolve(__dirname),
-        overrideConfigFile: path.resolve(__dirname, 'eslint.json'),
+        context: path.resolve(__dirname)
     }))
 
     .enableSingleRuntimeChunk()