Fix OpenStreetMap PoiCollection crash and migrate build to esbuild

Documentation/ChangeLog/Index.rst

@@ -7,6 +7,36 @@
 ChangeLog
 =========
 
+Version 13.0.1
+==============
+
+*   BUGFIX: Fix TypeError in OpenStreetMap2 JS when no PoiCollection is assigned
+*   BUGFIX: Fix XSS via category title/uid in OpenStreetMap2 and GoogleMaps2 category checkboxes
+*   TASK: Replace gulp with esbuild for building the JavaScript assets
+
+Version 13.0.0
+==============
+
+*   Compatibility fixes for TYPO3 14 LTS
+*   Remove TYPO3 13 compatibility
+*   Introduce Environment configuration state and EnvironmentFactory, replacing SettingsHelper
+*   Add MapProviderEnum and MapperFactory to streamline Google Maps / OpenStreetMap handling
+*   Refactor Google Maps initialization to use the async Google Maps JavaScript API
+*   Add support for Google Maps Map ID configuration
+*   Fix OpenStreetMap backend map rendering when switching FormEngine tabs
+*   Replace QueryBuilder injection with ConnectionPool throughout the extension
+*   Migrate sys_category TCA overrides to the current TYPO3 14 API
+*   Add ColumnRegistration to make Maps2Registry storage configuration type-safe
+*   Migrate Maps2Registry from a JSON-file-based Singleton registry to a
+    TcaSchemaFactory-driven, cached, event-listener-based column detection
+*   Replace useNonce with csp in asset definitions for Content Security Policy compliance
+*   Remove deprecated MapProviderRequestService, GetExtConfTrait and GetTypo3RequestTrait
+*   Replace Extbase @validate annotations with PHP attributes
+*   Declare service, mapper and helper classes as readonly and/or final wherever possible
+*   Rename Fluid templates to use the .fluid.html extension
+*   Introduce Rector configuration under Build/rector for automated code modernization
+*   Update testing-framework dependency to ^9.5.0 and refactor test suite accordingly
+
 Version 12.1.1
 ===============
 

Documentation/guides.xml

@@ -9,5 +9,5 @@
                project-issues="https://github.com/jweiland-net/maps2/issues"
                edit-on-github-branch="main"
                edit-on-github="jweiland/maps2" typo3-core-preferred="stable"/>
-    <project title="maps2 (Maps2)" release="12.1.1" version="12.1" copyright="since 2013 by jweiland.net"/>
+    <project title="maps2 (Maps2)" release="13.0.1" version="13.0" copyright="since 2013 by jweiland.net"/>
 </guides>

Resources/Private/Build/JavaScript/GoogleMaps2.js

@@ -335,10 +335,11 @@ class GoogleMaps2 {
     for (let categoryUid in categories) {
       if (categories.hasOwnProperty(categoryUid)) {
         form.appendChild(this.getCheckbox(categories[categoryUid]));
-        form.querySelector("#checkCategory_" + categoryUid)?.insertAdjacentHTML(
-          "afterend",
-          `<span class="map-category">${categories[categoryUid].title}</span>`
-        );
+
+        const categoryLabel = document.createElement("span");
+        categoryLabel.classList.add("map-category");
+        categoryLabel.textContent = categories[categoryUid].title;
+        form.querySelector("#checkCategory_" + categoryUid)?.insertAdjacentElement("afterend", categoryLabel);
       }
     }
 
@@ -369,14 +370,24 @@ class GoogleMaps2 {
    * @param category
    */
   getCheckbox(category) {
-    let div = document.createElement("div");
+    const div = document.createElement("div");
     div.classList.add("form-group");
-    div.innerHTML = `
-      <div class="checkbox">
-          <label>
-              <input type="checkbox" class="checkCategory" id="checkCategory_${category.uid}" checked="checked" value="${category.uid}">
-          </label>
-      </div>`;
+
+    const checkboxDiv = document.createElement("div");
+    checkboxDiv.classList.add("checkbox");
+
+    const label = document.createElement("label");
+
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.classList.add("checkCategory");
+    input.id = "checkCategory_" + category.uid;
+    input.checked = true;
+    input.value = category.uid;
+
+    label.appendChild(input);
+    checkboxDiv.appendChild(label);
+    div.appendChild(checkboxDiv);
 
     return div;
   }

Resources/Private/Build/JavaScript/OpenStreetMap2.js

@@ -22,7 +22,7 @@ class OpenStreetMap2 {
   }
 
   preparePoiCollection() {
-    this.poiCollections = JSON.parse(this.element.getAttribute("data-pois") || '[]');
+    this.poiCollections = JSON.parse(this.element.getAttribute("data-pois")) ?? [];
   }
 
   setMarkersOnMap() {
@@ -229,10 +229,11 @@ class OpenStreetMap2 {
     for (let categoryUid in categories) {
       if (categories.hasOwnProperty(categoryUid)) {
         form.appendChild(this.getCheckbox(categories[categoryUid]));
-        form.querySelector("#checkCategory_" + categoryUid)?.insertAdjacentHTML(
-          "afterend",
-          `<span class="map-category">${categories[categoryUid].title}</span>`
-        );
+
+        const categoryLabel = document.createElement("span");
+        categoryLabel.classList.add("map-category");
+        categoryLabel.textContent = categories[categoryUid].title;
+        form.querySelector("#checkCategory_" + categoryUid)?.insertAdjacentElement("afterend", categoryLabel);
       }
     }
 
@@ -261,14 +262,24 @@ class OpenStreetMap2 {
    * @returns {HTMLElement}
    */
   getCheckbox(category) {
-    let div = document.createElement("div");
+    const div = document.createElement("div");
     div.classList.add("form-group");
-    div.innerHTML = `
-      <div class="checkbox">
-          <label>
-              <input type="checkbox" class="checkCategory" id="checkCategory_${category.uid}" checked="checked" value="${category.uid}">
-          </label>
-      </div>`;
+
+    const checkboxDiv = document.createElement("div");
+    checkboxDiv.classList.add("checkbox");
+
+    const label = document.createElement("label");
+
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.classList.add("checkCategory");
+    input.id = "checkCategory_" + category.uid;
+    input.checked = true;
+    input.value = category.uid;
+
+    label.appendChild(input);
+    checkboxDiv.appendChild(label);
+    div.appendChild(checkboxDiv);
 
     return div;
   }

Resources/Private/Build/README.md

@@ -22,18 +22,17 @@ Follow these steps to build fresh JS files:
 
 - *Step 3: Install Necessary Tools*
 
-  Execute the following command to install necessary tools like `gulp`
-  and `typescript`:
+  Execute the following command to install necessary tools like `esbuild`:
 
   ```
   npm install
   ```
 
 - *Step 4: Build/Compile JS Files & Move them to the appropriate Directory*
 
-  Use the 'gulp' command to build/compile and move the resulting JS files into
+  Use the 'build' script to minify and move the resulting JS files into
   the `Resources/Public/JavaScript` folder:
 
   ```
-  ./node_modules/.bin/gulp
+  npm run build
   ```

Resources/Private/Build/build.mjs

@@ -0,0 +1,48 @@
+import { build, transform } from 'esbuild';
+import { mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+const outDir = '../../Public/JavaScript';
+
+mkdirSync(outDir, { recursive: true });
+
+// Plain global scripts, minified in place. No bundling since none of them use import/require.
+async function minifySingleFile(entry, outName) {
+  await build({
+    entryPoints: [entry],
+    outfile: join(outDir, outName),
+    minify: true,
+    sourcemap: true,
+    logLevel: 'info',
+  });
+}
+
+// Vendor scripts are concatenated as plain text first (same behaviour as the former
+// gulp-concat step) because they rely on sequential global execution, not ESM.
+async function concatAndMinify(entries, outName) {
+  const combined = entries.map((entry) => readFileSync(entry, 'utf8')).join('\n');
+  const result = await transform(combined, {
+    minify: true,
+    sourcemap: true,
+    sourcefile: outName,
+  });
+
+  writeFileSync(join(outDir, outName), `${result.code}//# sourceMappingURL=${outName}.map\n`);
+  writeFileSync(join(outDir, `${outName}.map`), result.map);
+  console.log(`  ${outDir}/${outName}`);
+}
+
+await concatAndMinify(
+  [
+    'node_modules/leaflet/dist/leaflet.js',
+    'node_modules/leaflet.path.drag/src/Path.Drag.js',
+    'node_modules/leaflet-editable/src/Leaflet.Editable.js',
+  ],
+  'leaflet.min.js',
+);
+
+await minifySingleFile('JavaScript/Classes.js', 'Classes.js');
+await minifySingleFile('JavaScript/GoogleMapsModule.js', 'GoogleMapsModule.min.js');
+await minifySingleFile('JavaScript/OpenStreetMapModule.js', 'OpenStreetMapModule.min.js');
+await minifySingleFile('JavaScript/GoogleMaps2.js', 'GoogleMaps2.min.js');
+await minifySingleFile('JavaScript/OpenStreetMap2.js', 'OpenStreetMap2.min.js');