[TASK] Add support for TYPO3 v12 ES6 modules (#2168)

RequireJS has been deprecated in TYPO3 v12. [1]

Migrate existing backend javascript modules
to ECMAScript6 and configure a respective
import map. [2]

TYPO3 v11 compatibility is preserved by keep
using RequireJS.

[1] https://docs.typo3.org/c/typo3/cms-core/12.4/en-us/Changelog/12.0/Deprecation-97057-DeprecateRequireJSSupport.html
[2] https://docs.typo3.org/c/typo3/cms-core/12.4/en-us/Changelog/12.0/Feature-96510-InfrastructureForJavaScriptModulesAndImportmaps.html

Classes/Hooks/PluginPreviewRenderer.php

@@ -18,6 +18,7 @@
 use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
 use TYPO3\CMS\Core\Imaging\Icon;
 use TYPO3\CMS\Core\Imaging\IconFactory;
+use TYPO3\CMS\Core\Information\Typo3Version;
 use TYPO3\CMS\Core\Page\PageRenderer;
 use TYPO3\CMS\Core\Type\Bitmask\Permission;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
@@ -521,7 +522,11 @@ protected function generateCallout(string $text): string
     protected function renderSettingsAsTable(string $header = '', int $recordUid = 0): string
     {
         $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
-        $pageRenderer->loadRequireJsModule('TYPO3/CMS/News/PageLayout');
+        if ((new Typo3Version())->getMajorVersion() >= 12) {
+            $pageRenderer->loadJavaScriptModule('@georgringer/news/page-layout.js');
+        } else {
+            $pageRenderer->loadRequireJsModule('TYPO3/CMS/News/PageLayout');
+        }
         $pageRenderer->addCssFile('EXT:news/Resources/Public/Css/Backend/PageLayoutView.css');
 
         $view = GeneralUtility::makeInstance(StandaloneView::class);

Configuration/JavaScriptModules.php

@@ -0,0 +1,11 @@
+<?php
+
+return [
+    'dependencies' => [
+        'core',
+        'backend',
+    ],
+    'imports' => [
+        '@georgringer/news/' => 'EXT:news/Resources/Public/ESM/',
+    ],
+];

Resources/Public/ESM/import.js

@@ -0,0 +1,124 @@
+import $ from 'jquery';
+import DocumentService from '@typo3/core/document-service.js';
+import Notification from '@typo3/backend/notification.js';
+
+var NewsImport = function () {
+    var me = this;
+    var extKey = 'news';
+    var runCounter = 0;
+    var jobInfo = {};
+
+    me.init = function () {
+        $('#jobSelector').on('change', function () {
+            var jobClassName = $(this).val();
+            // alert(jobClassName);
+            if (jobClassName != '0') {
+                me.loadJobInfo(jobClassName);
+            } else {
+                $('#job').hide();
+            }
+        })
+    };
+
+    me.loadJobInfo = function (jobClassName) {
+        var params = me.getBackendRequest('system', 'tx_news_m1', 'Import', 'jobInfo', {jobClassName: jobClassName});
+        $.ajax({
+            url: moduleUrl,
+            data: params,
+            success: function (response) {
+                var r = $.parseJSON(response);
+                if (r.totalRecordCount == 0) {
+                    Notification.info('There are no records to be imported!');
+                } else {
+                    jobInfo = r;
+                    me.initJob(jobClassName);
+                }
+            },
+            error: function (response) {
+                var r = $.parseJSON(response.responseText);
+                Notification.error(r.message);
+            }
+        });
+    };
+
+    me.initJob = function (jobClassName) {
+        jobInfo['jobClassName'] = jobClassName;
+        $('#job').show();
+        $('#progressBar').width('0%').text('fo');
+        $('#startButton').on('click', function () {
+            runCounter = 0;
+            me.run();
+        });
+    };
+
+    me.run = function () {
+        var params = me.getBackendRequest('system', 'tx_news_m1', 'Import', 'runJob', {
+            jobClassName: jobInfo.jobClassName,
+            offset: runCounter * jobInfo.increaseOffsetPerRunBy
+        });
+        $.ajax({
+            url: moduleUrl,
+            data: params,
+            success: function (response) {
+                var progress = runCounter / jobInfo.runsToComplete;
+                var progressValue = Math.round(100 * progress) + '%';
+                $('#progressBar').width(progressValue).text(progressValue);
+                runCounter++;
+
+                if (runCounter <= jobInfo.runsToComplete) {
+                    me.run();
+                } else {
+                    $('#progressBar').text('Done!');
+                    $('#news-import-form').hide();
+                    $('#job').hide();
+                    $('#news-import-done').show();
+                    console.log('done');
+                    runCounter = 1;
+                }
+
+            },
+            error: function (response) {
+                var r = $.parseJSON(response.responseText);
+                Notification.error(r.message);
+            },
+            done: function () {
+                console.log('d1');
+            }
+        });
+    };
+
+    me.getBackendRequest = function (mainModuleName, subModuleName, controller, action, parameters) {
+        var parameterPrefix = me.getParameterPrefix(mainModuleName, subModuleName);
+        var params = {};
+
+        parameters['controller'] = controller;
+        parameters['action'] = action;
+
+        $.each(parameters, function (name, value) {
+            params[parameterPrefix + '[' + name + ']'] = value;
+        });
+
+        return params;
+    };
+
+    me.underscoreToUpperCamelCase = function (subject) {
+        var matches = subject.match(/(_\w)/g);
+        if (matches) {
+            matches.each(function (m) {
+                subject = subject.replace(m, m.charAt(1).toUpperCase());
+            });
+        }
+        return subject.charAt(0).toUpperCase() + subject.substr(1);
+    };
+
+    me.getParameterPrefix = function (mainModuleName, subModuleName) {
+        return 'tx_' + extKey + '_' + mainModuleName + '_' + extKey + subModuleName.replace(/_/g, '');
+    };
+
+};
+
+(async () => {
+    await DocumentService.ready();
+    const importer = new NewsImport();
+    importer.init();
+})();

Resources/Public/ESM/page-layout.js

@@ -0,0 +1,15 @@
+import $ from 'jquery';
+
+var table = $('.news-table');
+
+$(table).each(function() {
+    if ($(this).width() < 350) {
+        $(this).addClass('news-table-small');
+    }
+});
+
+$('.news-table tfoot a').click(function (e, element) {
+    $(this).toggleClass('open');
+    $('#' + $(this).data('identifier')).toggleClass('hidden');
+    e.preventDefault();
+});