From fd80bf7d7b7d093acedc0cd6cb1607446b5de46d Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 7 Feb 2025 17:24:30 +0000 Subject: [PATCH] chore: handle jQuery via Rollup external --- .eslintrc.js | 4 -- gulp/build-javascript.js | 16 +++++--- gulp/docs.js | 10 ++++- gulp/jquery/scope.js | 3 -- jest.setup.js | 2 +- package-lock.json | 37 +++++++++++++++++++ package.json | 1 + src/moj/all.js | 2 + src/moj/components/add-another/add-another.js | 2 + .../filter-toggle-button.js | 2 + .../form-validator/form-validator.js | 2 + .../multi-file-upload/multi-file-upload.js | 2 + .../components/multi-select/multi-select.js | 2 + .../password-reveal/password-reveal.js | 2 + .../rich-text-editor/rich-text-editor.js | 2 + .../components/search-toggle/search-toggle.js | 2 + .../sortable-table/sortable-table.js | 2 + 17 files changed, 78 insertions(+), 15 deletions(-) delete mode 100644 gulp/jquery/scope.js diff --git a/.eslintrc.js b/.eslintrc.js index 55809b43a..ceecc1907 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,9 +1,5 @@ module.exports = { extends: ['standard', 'prettier'], - globals: { - $: 'readonly', - jQuery: 'readonly' - }, ignorePatterns: [ '**/vendor/**', 'package/**', diff --git a/gulp/build-javascript.js b/gulp/build-javascript.js index c9a0c77ab..db70a839e 100755 --- a/gulp/build-javascript.js +++ b/gulp/build-javascript.js @@ -8,6 +8,7 @@ const concat = require('gulp-concat') const rename = require('gulp-rename') const uglify = require('gulp-uglify') const { rollup } = require('rollup') +const externalGlobals = require('rollup-plugin-external-globals') gulp.task('build:javascript', async () => { const modulePaths = await glob('moj/**/*.{cjs,js,mjs}', { @@ -33,7 +34,14 @@ gulp.task('build:javascript', async () => { name: 'MOJFrontend' } ], - plugins: [nodeResolve(), commonjs()] + external: ['jquery'], + plugins: [ + externalGlobals({ + jquery: 'window.jQuery' + }), + nodeResolve(), + commonjs() + ] }) // Create bundle @@ -56,11 +64,7 @@ gulp.task('build:javascript-minified', () => { gulp.task('build:javascript-minified-with-jquery', () => { return gulp - .src([ - 'node_modules/jquery/dist/jquery.js', - 'gulp/jquery/scope.js', - 'package/moj/all.js' - ]) + .src(['node_modules/jquery/dist/jquery.js', 'package/moj/all.js']) .pipe(concat('all.jquery.min.js')) .pipe(uglify()) .pipe(gulp.dest('package/moj/')) diff --git a/gulp/docs.js b/gulp/docs.js index e89685c91..e4c3df87b 100644 --- a/gulp/docs.js +++ b/gulp/docs.js @@ -3,6 +3,7 @@ const nodeResolve = require('@rollup/plugin-node-resolve') const gulp = require('gulp') const gulpSass = require('gulp-sass') const { rollup } = require('rollup') +const externalGlobals = require('rollup-plugin-external-globals') const dartSass = require('sass-embedded') const sass = gulpSass(dartSass) @@ -69,7 +70,14 @@ gulp.task('docs:scripts', async () => { format: 'es', name: 'MOJFrontend' }, - plugins: [nodeResolve(), commonjs()] + external: ['jquery'], + plugins: [ + externalGlobals({ + jquery: 'window.jQuery' + }), + nodeResolve(), + commonjs() + ] }) const bundle = await rollup(options) diff --git a/gulp/jquery/scope.js b/gulp/jquery/scope.js deleted file mode 100644 index 60479ee60..000000000 --- a/gulp/jquery/scope.js +++ /dev/null @@ -1,3 +0,0 @@ -// Local-scope jQuery so it doens't overwrite or squat on window properties -// eslint-disable-next-line no-unused-vars -const $ = jQuery.noConflict(true) diff --git a/jest.setup.js b/jest.setup.js index cc032c478..bd011d450 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -1,6 +1,6 @@ require('@testing-library/jest-dom') -require('./src/moj/vendor/jquery') require('mock-match-media/jest-setup') + const { toHaveNoViolations } = require('jest-axe') expect.extend(toHaveNoViolations) diff --git a/package-lock.json b/package-lock.json index 5e2fa03cc..17e14c9cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -78,6 +78,7 @@ "prettier": "^3.4.2", "require-dir": "^1.2.0", "rollup": "^4.34.4", + "rollup-plugin-external-globals": "^0.13.0", "sass-embedded": "^1.83.4", "semantic-release": "^23.0.0", "semantic-release-plugin-update-version-in-files": "^1.1.0", @@ -28853,6 +28854,42 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-plugin-external-globals": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-external-globals/-/rollup-plugin-external-globals-0.13.0.tgz", + "integrity": "sha512-wBS3hmoF0OtEnA0lWsmTC6Nhnkk2zjZbfhaX2gLo8VnfNGFdGhiYKwMpIPQPrYbAw+mAYUYmoHYktAl1eZHgVw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/pluginutils": "^5.1.0", + "estree-walker": "^3.0.3", + "is-reference": "^3.0.2", + "magic-string": "^0.30.10" + }, + "peerDependencies": { + "rollup": "^2.25.0 || ^3.3.0 || ^4.1.4" + } + }, + "node_modules/rollup-plugin-external-globals/node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0" + } + }, + "node_modules/rollup-plugin-external-globals/node_modules/is-reference": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz", + "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.6" + } + }, "node_modules/run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", diff --git a/package.json b/package.json index 757a6a9d1..44770de4a 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "prettier": "^3.4.2", "require-dir": "^1.2.0", "rollup": "^4.34.4", + "rollup-plugin-external-globals": "^0.13.0", "sass-embedded": "^1.83.4", "semantic-release": "^23.0.0", "semantic-release-plugin-update-version-in-files": "^1.1.0", diff --git a/src/moj/all.js b/src/moj/all.js index 24d64429c..4bbc432d5 100644 --- a/src/moj/all.js +++ b/src/moj/all.js @@ -1,5 +1,7 @@ /* eslint-disable no-new */ +const $ = require('jquery') + const { AddAnother } = require('./components/add-another/add-another.js') const { ButtonMenu } = require('./components/button-menu/button-menu.js') const { DatePicker } = require('./components/date-picker/date-picker.js') diff --git a/src/moj/components/add-another/add-another.js b/src/moj/components/add-another/add-another.js index 5ac2ee9a0..56a0ed0c8 100755 --- a/src/moj/components/add-another/add-another.js +++ b/src/moj/components/add-another/add-another.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + function AddAnother(container) { this.container = $(container) diff --git a/src/moj/components/filter-toggle-button/filter-toggle-button.js b/src/moj/components/filter-toggle-button/filter-toggle-button.js index b6f0cbcb3..3a1a96d1b 100644 --- a/src/moj/components/filter-toggle-button/filter-toggle-button.js +++ b/src/moj/components/filter-toggle-button/filter-toggle-button.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + function FilterToggleButton(options) { this.options = options this.container = $(this.options.toggleButton.container) diff --git a/src/moj/components/form-validator/form-validator.js b/src/moj/components/form-validator/form-validator.js index 9c9c49604..84f8a29f8 100755 --- a/src/moj/components/form-validator/form-validator.js +++ b/src/moj/components/form-validator/form-validator.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + const { addAttributeValue, removeAttributeValue } = require('../../helpers.js') function FormValidator(form, options) { diff --git a/src/moj/components/multi-file-upload/multi-file-upload.js b/src/moj/components/multi-file-upload/multi-file-upload.js index 7d205411d..fa9d9093a 100644 --- a/src/moj/components/multi-file-upload/multi-file-upload.js +++ b/src/moj/components/multi-file-upload/multi-file-upload.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + const { dragAndDropSupported, fileApiSupported, diff --git a/src/moj/components/multi-select/multi-select.js b/src/moj/components/multi-select/multi-select.js index cb0b0c201..fb86c41cc 100644 --- a/src/moj/components/multi-select/multi-select.js +++ b/src/moj/components/multi-select/multi-select.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + function MultiSelect(options) { this.container = $(options.container) diff --git a/src/moj/components/password-reveal/password-reveal.js b/src/moj/components/password-reveal/password-reveal.js index d5d3f3d53..245438ce1 100644 --- a/src/moj/components/password-reveal/password-reveal.js +++ b/src/moj/components/password-reveal/password-reveal.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + function PasswordReveal(element) { this.el = element const $el = $(this.el) diff --git a/src/moj/components/rich-text-editor/rich-text-editor.js b/src/moj/components/rich-text-editor/rich-text-editor.js index ff5dd9c72..8c6f12563 100755 --- a/src/moj/components/rich-text-editor/rich-text-editor.js +++ b/src/moj/components/rich-text-editor/rich-text-editor.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + function RichTextEditor(options) { if (!('contentEditable' in document.documentElement)) { return diff --git a/src/moj/components/search-toggle/search-toggle.js b/src/moj/components/search-toggle/search-toggle.js index 6ffe32423..e218f9745 100644 --- a/src/moj/components/search-toggle/search-toggle.js +++ b/src/moj/components/search-toggle/search-toggle.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + function SearchToggle(options) { this.options = options this.container = $(this.options.search.container) diff --git a/src/moj/components/sortable-table/sortable-table.js b/src/moj/components/sortable-table/sortable-table.js index 9f7a3192c..35b891f08 100755 --- a/src/moj/components/sortable-table/sortable-table.js +++ b/src/moj/components/sortable-table/sortable-table.js @@ -1,3 +1,5 @@ +const $ = require('jquery') + function SortableTable(params) { this.table = $(params.table)