Use JS module to import jQuery

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

.eslintignore

@@ -2,4 +2,4 @@ js/vendor/
 js/dist/
 tmp/
 vendor/
-webpack.config.js
+webpack.config.cjs

.eslintrc.json

@@ -11,8 +11,7 @@
     },
     "env": {
         "browser": true,
-        "es6": true,
-        "jquery": true
+        "es6": true
     },
     "globals": {
         "Functions": "readonly"

jest.config.cjs

@@ -6,16 +6,13 @@ module.exports = {
     projects: [
         {
             verbose: true,
-            setupFiles: ['<rootDir>/test/jest/test-env.js'],
             coveragePathIgnorePatterns: [
                 '<rootDir>/node_modules/',
                 '<rootDir>/js/vendor/',
             ],
             displayName: 'phpMyAdmin',
             testMatch: ['<rootDir>/test/javascript/**/*.js'],
-            transform: {
-                '^.+\\.js$': '<rootDir>/test/jest/file-transformer.js'
-            },
+            transform: {},
             moduleNameMapper: {
                 '^phpmyadmin/(.*)$': '<rootDir>/js/src/$1',
                 '^@vendor/(.*)$': '<rootDir>/js/vendor/$1',

js/src/ajax.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
@@ -196,7 +198,7 @@ window.AJAX = {
         }
         // Show lock icon if locked targets is not empty.
         // otherwise remove lock icon
-        if (!jQuery.isEmptyObject(window.AJAX.lockedTargets)) {
+        if (! $.isEmptyObject(window.AJAX.lockedTargets)) {
             $('#lock_page_icon').html(Functions.getImage('s_lock', window.Messages.strLockToolTip).toString());
         } else {
             $('#lock_page_icon').html('');
@@ -261,7 +263,7 @@ window.AJAX = {
         // the click event is not triggered by script
         if (typeof event !== 'undefined' && event.type === 'click' &&
             event.isTrigger !== true &&
-            !jQuery.isEmptyObject(window.AJAX.lockedTargets) &&
+            ! $.isEmptyObject(window.AJAX.lockedTargets) &&
             confirm(window.Messages.strConfirmNavigation) === false
         ) {
             return false;

js/src/chart.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Chart type enumerations
  */

js/src/codemirror/addon/lint/sql-lint.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 window.CodeMirror.sqlLint = function (text, updateLinting, options, cm) {
     // Skipping check if text box is empty.
     if (text.trim() === '') {

js/src/common.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**

js/src/config.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in configuration forms and on user preferences pages
  */

js/src/database/central_columns.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview   events handling from central columns page
  * @name            Central columns

js/src/database/events.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 window.AJAX.registerTeardown('database/events.js', function () {

js/src/database/multi_table_query.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in QBE for DB
  * @name            Database Operations

js/src/database/operations.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**

js/src/database/qbe.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in QBE for DB
  * @name            Database Operations

js/src/database/query_generator.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in QBE for DB
  * @name            Database Operations

js/src/database/routines.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 window.AJAX.registerTeardown('database/routines.js', function () {

js/src/database/search.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * JavaScript functions used on Database Search page
  *

js/src/database/structure.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**

js/src/database/tracking.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Unbind all event handlers before tearing down the page
  */

js/src/database/triggers.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 window.AJAX.registerTeardown('database/triggers.js', function () {

js/src/datetimepicker.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 function registerDatePickerTranslations () {
     'use strict';
 

js/src/designer/history.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in this file builds history tab and generates query.
  *

js/src/designer/init.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Initializes the data required to run Designer, then fires it up.
  */

js/src/designer/move.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @package PhpMyAdmin-Designer
  */

js/src/designer/page.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global DesignerOfflineDB */ // js/designer/database.js
 /* global DesignerMove */ // js/designer/move.js
 /* global DesignerObjects */ // js/designer/objects.js

js/src/drag_drop_import.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 
 /* This script handles PMA Drag Drop Import, loaded only when configuration is enabled.*/
 
@@ -38,13 +39,13 @@ var DragDropImport = {
         var ext = arr[arr.length - 1];
 
         // check if compressed
-        if (jQuery.inArray(ext.toLowerCase(),
+        if ($.inArray(ext.toLowerCase(),
             DragDropImport.allowedCompressedExtensions) !== -1) {
             ext = arr[arr.length - 2];
         }
 
         // Now check for extension
-        if (jQuery.inArray(ext.toLowerCase(),
+        if ($.inArray(ext.toLowerCase(),
             DragDropImport.allowedExtensions) !== -1) {
             return ext;
         }

js/src/error_report.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * general function, usually for data manipulation pages
  *
@@ -249,7 +251,7 @@ var ErrorReport = {
             newFunc.wrapped = true;
             // Set guid of wrapped function same as original function, so it can be removed
             // See bug#4146 (problem with jquery draggable and sortable)
-            newFunc.guid = func.guid = func.guid || newFunc.guid || jQuery.guid++;
+            newFunc.guid = func.guid = func.guid || newFunc.guid || $.guid++;
             return newFunc;
         } else {
             return func;

js/src/export.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in the export tab
  *

js/src/export_output.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 window.AJAX.registerOnload('export_output.js', function () {
     $(document).on('keydown', function (e) {
         if ((e.which || e.keyCode) === 116) {

js/src/functions.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 /* global ChartType, ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js
 /* global DatabaseStructure */ // js/database/structure.js
@@ -1704,7 +1706,7 @@ Functions.ajaxShowMessage = function (message = null, timeout = null, type = nul
  * @return {void}
  */
 Functions.ajaxRemoveMessage = function ($thisMessageBox) {
-    if ($thisMessageBox !== undefined && $thisMessageBox instanceof jQuery) {
+    if ($thisMessageBox !== undefined && $thisMessageBox instanceof $) {
         $thisMessageBox
             .stop(true, true)
             .fadeOut('medium');
@@ -2196,7 +2198,7 @@ Functions.confirm = function (question, url, callbackFn, openCallback) {
         openCallback();
     }
 };
-jQuery.fn.confirm = Functions.confirm;
+$.fn.confirm = Functions.confirm;
 
 /**
  * jQuery function to sort a table's body after a new row has been appended to it.
@@ -2239,7 +2241,7 @@ Functions.sortTable = function (textSelector) {
         });
     });
 };
-jQuery.fn.sortTable = Functions.sortTable;
+$.fn.sortTable = Functions.sortTable;
 
 /**
  * @return {void}
@@ -3287,7 +3289,7 @@ Functions.showIndexEditDialog = function ($outer) {
  **/
 Functions.showHints = function ($div) {
     var $newDiv = $div;
-    if ($newDiv === undefined || ! ($newDiv instanceof jQuery) || $newDiv.length === 0) {
+    if ($newDiv === undefined || ! ($newDiv instanceof $) || $newDiv.length === 0) {
         $newDiv = $('body');
     }
     $newDiv.find('.pma_hint').each(function () {
@@ -3549,7 +3551,7 @@ Functions.slidingMessage = function (msg, $object) {
         // Don't show an empty message
         return false;
     }
-    if ($obj === undefined || ! ($obj instanceof jQuery) || $obj.length === 0) {
+    if ($obj === undefined || ! ($obj instanceof $) || $obj.length === 0) {
         // If the second argument was not supplied,
         // we might have to create a new DOM node.
         if ($('#PMA_slidingMessage').length === 0) {
@@ -3688,7 +3690,7 @@ Functions.onloadLockPage = function () {
             return $(this).val() === value;
         });
     };
-}(jQuery));
+}($));
 
 /**
  * Return value of a cell in a table.
@@ -4358,7 +4360,7 @@ Functions.getPostData = function () {
     }
     return dataPost;
 };
-jQuery.fn.getPostData = Functions.getPostData;
+$.fn.getPostData = Functions.getPostData;
 
 /**
  * @return {function}

js/src/gis_data_editor.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used in GIS data editor
  *

js/src/home.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 const GitInfo = {
     /**
      * Version string to integer conversion.

js/src/import.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in the import tab
  *

js/src/indexes.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**

js/src/jqplot/plugins/jqplot.byteFormatter.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * jqplot formatter for byte values
  *
@@ -49,4 +51,4 @@
             }
         };
     };
-}(jQuery));
+}($));

js/src/jquery.sortable-table.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * This file is internal to phpMyAdmin.
  * @license see the main phpMyAdmin license.
@@ -39,7 +41,7 @@
  * which is the actually draggable element.
  */
 (function ($) {
-    jQuery.fn.sortableTable = function (method) {
+    $.fn.sortableTable = function (method) {
         var methods = {
             init: function (options) {
                 var tb = new SortableTableInstance(this, options);
@@ -290,4 +292,4 @@
             }
         }
     };
-}(jQuery));
+}($));

js/src/keyhandler.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 
 // var that holds: 0- if ctrl key is not pressed 1- if ctrl key is pressed
 let ctrlKeyHistory = 0;

js/src/main.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Indexes */
 /* global Navigation */
 

js/src/makegrid.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Sql */
 /* global firstDayOfCalendar */ // templates/javascript/variables.twig
 
@@ -2318,4 +2320,4 @@ window.makeGrid = function (t, enableResize, enableReorder, enableVisib, enableG
             });
         }
     }; // end noSelect
-}(jQuery));
+}($));

js/src/menu_resizer.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Handles the resizing of a menu according to the available screen width
  *
@@ -184,4 +186,4 @@
             $.error('Method ' +  method + ' does not exist on jQuery.menuResizer');
         }
     };
-}(jQuery));
+}($));

js/src/multi_column_sort.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Implements the shiftkey + click remove column
  *                  from order by clause functionality

js/src/name-conflict-fixes.js

@@ -1 +1,3 @@
+import $ from 'jquery';
+
 $.widget.bridge('uiTooltip', $.ui.tooltip);

js/src/navigation.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * function used in or for navigation panel
  *

js/src/normalization.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview   events handling from normalization page
  * @name            normalization

js/src/page_settings.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used for page-related settings
  * @name            Page-related settings

js/src/replication.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server replication page
  * @name            Server Replication

js/src/server/databases.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**

js/src/server/plugins.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Make columns sortable, but only for tables with more than 1 data row.
  */

js/src/server/privileges.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**

js/src/server/status/monitor.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server status monitor page
  * @name            Server Status Monitor

js/src/server/status/processes.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Server Status Processes
  *

js/src/server/status/queries.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server status query page
  * @name            Server Status Query

js/src/server/status/sorter.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 // TODO: tablesorter shouldn't sort already sorted columns
 // eslint-disable-next-line no-unused-vars
 function initTableSorter (tabid) {
@@ -28,7 +30,7 @@ $(function () {
             return (/^[0-9]?[0-9,\\.]*\s?(k|M|G|T|%)?$/).test(s);
         },
         format: function (s) {
-            var num = jQuery.tablesorter.formatFloat(
+            var num = $.tablesorter.formatFloat(
                 s.replace(window.Messages.strThousandsSeparator, '')
                     .replace(window.Messages.strDecimalSeparator, '.')
             );

js/src/server/status/variables.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  *
  *

js/src/server/user_groups.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server user groups page
  * @name            Server User Groups

js/src/server/variables.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server variables page
  * @name            Server Replication

js/src/setup/ajax.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* eslint-disable no-unused-vars */
 /**
  * Dummy implementation of the ajax page loader

js/src/setup/scripts.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in Setup configuration forms
  */

js/src/shortcuts_handler.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Handle shortcuts in various pages
  * @name            Shortcuts handler

js/src/sql.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used wherever an sql query form is used
  *

js/src/table/change.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in table data manipulation pages
  *
@@ -175,7 +177,7 @@ function verifyAfterSearchFieldChange (index, searchFormId) {
             });
             // validator method for IN(...), NOT IN(...)
             // BETWEEN and NOT BETWEEN
-            jQuery.validator.addMethod('validationFunctionForMultipleInt', function (value) {
+            $.validator.addMethod('validationFunctionForMultipleInt', function (value) {
                 return value.match(/^(?:(?:\d\s*)|\s*)+(?:,\s*\d+)*$/i) !== null;
             },
             window.Messages.strEnterValidNumber
@@ -432,17 +434,17 @@ window.AJAX.registerOnload('table/change.js', function () {
     if ($('#insertForm').length) {
         // validate the comment form when it is submitted
         $('#insertForm').validate();
-        jQuery.validator.addMethod('validationFunctionForHex', function (value) {
+        $.validator.addMethod('validationFunctionForHex', function (value) {
             return value.match(/^[a-f0-9]*$/i) !== null;
         });
 
-        jQuery.validator.addMethod('validationFunctionForMd5', function (value, element, options) {
+        $.validator.addMethod('validationFunctionForMd5', function (value, element, options) {
             return !(value.startsWith('MD5') &&
                 typeof options.data('maxlength') !== 'undefined' &&
                 options.data('maxlength') < 32);
         });
 
-        jQuery.validator.addMethod('validationFunctionForAesDesEncrypt', function (value, element, options) {
+        $.validator.addMethod('validationFunctionForAesDesEncrypt', function (value, element, options) {
             var funType = value.substring(0, 3);
             if (funType !== 'AES' && funType !== 'DES') {
                 return false;
@@ -457,7 +459,7 @@ window.AJAX.registerOnload('table/change.js', function () {
             return false;
         });
 
-        jQuery.validator.addMethod('validationFunctionForDateTime', function (value, element, options) {
+        $.validator.addMethod('validationFunctionForDateTime', function (value, element, options) {
             var dtValue = value;
             var theType = options;
             if (theType === 'date') {
@@ -828,7 +830,7 @@ function addNewContinueInsertionFields (event) {
          * Displays alert if data loss possible on decrease
          * of rows.
          */
-        var checkLock = jQuery.isEmptyObject(window.AJAX.lockedTargets);
+        var checkLock = $.isEmptyObject(window.AJAX.lockedTargets);
         if (checkLock || confirm(window.Messages.strConfirmRowChange) === true) {
             while (currRows > targetRows) {
                 $('input[id^=insert_ignore]').last()

js/src/table/chart.js

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 
 /* global ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js
 

js/src/table/find_replace.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Unbind all event handlers before tearing down a page
  */

js/src/table/gis_visualization.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used for visualizing GIS data
  *

js/src/table/operations.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**

js/src/table/relation.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * for table relation
  */

js/src/table/select.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview JavaScript functions used on /table/search
  *

js/src/table/structure.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used on the table structure page
  * @name            Table Structure

js/src/table/tracking.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Unbind all event handlers before tearing down the page
  */

js/src/table/zoom_plot_jqplot.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 // TODO: change the axis
 /**
  * @fileoverview JavaScript functions used on /table/search

js/src/transformations/image_upload.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Image upload transformations plugin js
  *

js/src/transformations/json.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * JSON syntax highlighting transformation plugin
  */

js/src/transformations/json_editor.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * JSON syntax highlighting transformation plugin
  *

js/src/transformations/sql_editor.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * SQL syntax highlighting transformation plugin js
  *

js/src/transformations/xml.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * XML syntax highlighting transformation plugin
  */

js/src/transformations/xml_editor.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * XML editor plugin
  *

js/src/u2f.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 window.AJAX.registerOnload('u2f.js', function () {
     var $inputReg = $('#u2f_registration_response');
     if ($inputReg.length > 0) {

js/src/validator-messages.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 function extendingValidatorMessages () {
     $.extend($.validator.messages, {
         required: window.Messages.strValidatorRequired,

package.json

@@ -9,6 +9,7 @@
   "engines": {
     "node": ">=10"
   },
+  "type": "module",
   "dependencies": {
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.17.10",
@@ -68,7 +69,7 @@
     "postinstall": "yarn run build",
     "build": "webpack",
     "css-lint": "stylelint -s scss \"themes/**/scss/*.scss\" \"setup/scss/*.scss\"",
-    "js-lint": "eslint js/src test/javascript test/jest jest.config.js",
-    "test": "jest"
+    "js-lint": "eslint js/src test/javascript jest.config.cjs",
+    "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
   }
 }

test/javascript/sql.test.js

@@ -1,6 +1,8 @@
 /* eslint-env node, jest */
+/* global Sql */
 
-const Sql = require('phpmyadmin/sql');
+import 'phpmyadmin/ajax';
+import 'phpmyadmin/sql';
 
 describe('SQL', () => {
     test('test URL encode', () => {

test/jest/file-transformer.js

@@ -1,17 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-    process (sourceContents, filename) {
-        // The file is a source file and can contain @test-module annotations
-        if (filename.indexOf('js/src') !== -1) {
-            if (sourceContents.includes('@test-module')) {
-                // Annotation detected, add some code to the source file
-                const moduleName = sourceContents.match(/@test-module (.*)/)[1];
-                // eslint-disable-next-line no-param-reassign
-                sourceContents += '\r\nmodule.exports = ' + moduleName + ';\r\n';
-            }
-            return sourceContents;
-        }
-        return sourceContents;
-    },
-};

test/jest/test-env.js

@@ -1,8 +0,0 @@
-/* eslint-env node */
-
-const $ = require('jquery');
-global.$ = $;
-global.jQuery = $;
-global.CommonParams = require('phpmyadmin/common');
-global.AJAX = require('phpmyadmin/ajax');
-global.Functions = require('phpmyadmin/functions');