You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by su...@apache.org on 2021/08/27 18:57:04 UTC
[superset] 01/01: remove jquery from react bundle
This is an automated email from the ASF dual-hosted git repository.
suddjian pushed a commit to branch remove-jquery
in repository https://gitbox.apache.org/repos/asf/superset.git
commit f42a0141f14250d1690a278d1af83f27ade1a1ac
Author: David Aaron Suddjian <aa...@gmail.com>
AuthorDate: Fri Aug 27 11:55:19 2021 -0700
remove jquery from react bundle
---
superset-frontend/package-lock.json | 32 -------------
superset-frontend/package.json | 2 -
superset-frontend/spec/helpers/shim.ts | 3 --
superset-frontend/src/setup/setupApp.ts | 80 +++++++++++++--------------------
superset-frontend/webpack.config.js | 1 -
5 files changed, 32 insertions(+), 86 deletions(-)
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 7b2cb12..e127548 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -68,7 +68,6 @@
"immer": "^8.0.1",
"immutable": "^4.0.0-rc.12",
"interweave": "^11.2.0",
- "jquery": "^3.5.1",
"js-levenshtein": "^1.1.6",
"js-yaml-loader": "^1.2.2",
"json-bigint": "^1.0.0",
@@ -168,7 +167,6 @@
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/fetch-mock": "^7.3.2",
"@types/jest": "^26.0.3",
- "@types/jquery": "^3.3.32",
"@types/js-levenshtein": "^1.1.0",
"@types/json-bigint": "^1.0.0",
"@types/react": "^16.9.43",
@@ -13770,15 +13768,6 @@
"pretty-format": "^26.0.0"
}
},
- "node_modules/@types/jquery": {
- "version": "3.3.32",
- "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.32.tgz",
- "integrity": "sha512-UKoof2mnV/X1/Ix2g+V2Ny5sgHjV8nK/UJbiYxuo4zPwzGyFlZ/mp4KaePb2VqQrqJctmcDQNA57buU84/2uIw==",
- "dev": true,
- "dependencies": {
- "@types/sizzle": "*"
- }
- },
"node_modules/@types/js-levenshtein": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.0.tgz",
@@ -14238,12 +14227,6 @@
"integrity": "sha512-yYezQwGWty8ziyYLdZjwxyMb0CZR49h8JALHGrxjQHWlqGgc8kLdHEgWrgL0uZ29DMvEVBDnHU2Wg36zKSIUtA==",
"dev": true
},
- "node_modules/@types/sizzle": {
- "version": "2.3.2",
- "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
- "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
- "dev": true
- },
"node_modules/@types/sortablejs": {
"version": "1.10.7",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.7.tgz",
@@ -63065,15 +63048,6 @@
"pretty-format": "^26.0.0"
}
},
- "@types/jquery": {
- "version": "3.3.32",
- "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.32.tgz",
- "integrity": "sha512-UKoof2mnV/X1/Ix2g+V2Ny5sgHjV8nK/UJbiYxuo4zPwzGyFlZ/mp4KaePb2VqQrqJctmcDQNA57buU84/2uIw==",
- "dev": true,
- "requires": {
- "@types/sizzle": "*"
- }
- },
"@types/js-levenshtein": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.0.tgz",
@@ -63535,12 +63509,6 @@
"integrity": "sha512-yYezQwGWty8ziyYLdZjwxyMb0CZR49h8JALHGrxjQHWlqGgc8kLdHEgWrgL0uZ29DMvEVBDnHU2Wg36zKSIUtA==",
"dev": true
},
- "@types/sizzle": {
- "version": "2.3.2",
- "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
- "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
- "dev": true
- },
"@types/sortablejs": {
"version": "1.10.7",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.7.tgz",
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index 4911500..18dacce 100644
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -120,7 +120,6 @@
"immer": "^8.0.1",
"immutable": "^4.0.0-rc.12",
"interweave": "^11.2.0",
- "jquery": "^3.5.1",
"js-levenshtein": "^1.1.6",
"js-yaml-loader": "^1.2.2",
"json-bigint": "^1.0.0",
@@ -220,7 +219,6 @@
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/fetch-mock": "^7.3.2",
"@types/jest": "^26.0.3",
- "@types/jquery": "^3.3.32",
"@types/js-levenshtein": "^1.1.0",
"@types/json-bigint": "^1.0.0",
"@types/react": "^16.9.43",
diff --git a/superset-frontend/spec/helpers/shim.ts b/superset-frontend/spec/helpers/shim.ts
index e2cef96..978f774 100644
--- a/superset-frontend/spec/helpers/shim.ts
+++ b/superset-frontend/spec/helpers/shim.ts
@@ -20,7 +20,6 @@ import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import 'jest-enzyme';
-import jQuery from 'jquery';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { configure as configureTranslation } from '@superset-ui/core';
@@ -64,7 +63,5 @@ Object.defineProperty(window, 'matchMedia', {
})),
});
-g.$ = jQuery(g.window);
-
configureTranslation();
setupSupersetClient();
diff --git a/superset-frontend/src/setup/setupApp.ts b/superset-frontend/src/setup/setupApp.ts
index ba3b9ac..4957a49 100644
--- a/superset-frontend/src/setup/setupApp.ts
+++ b/superset-frontend/src/setup/setupApp.ts
@@ -17,7 +17,6 @@
* under the License.
*/
/* eslint global-require: 0 */
-import $ from 'jquery';
import { SupersetClient } from '@superset-ui/core';
import {
getClientErrorObject,
@@ -25,29 +24,22 @@ import {
} from 'src/utils/getClientErrorObject';
import setupErrorMessages from 'src/setup/setupErrorMessages';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-declare global {
- interface Window {
- $: any;
- jQuery: any;
- }
-}
-
function showApiMessage(resp: ClientErrorObject) {
- const template =
- '<div class="alert"> ' +
- '<button type="button" class="close" ' +
- 'data-dismiss="alert">\xD7</button> </div>';
+ const alertEl = document.createElement('div');
+ alertEl.innerHTML = `
+ <button type="button" class="close" data-dismiss="alert">\xD7</button>
+ ${resp.message || ''}
+ `;
const severity = resp.severity || 'info';
- $(template)
- .addClass(`alert-${severity}`)
- .append(resp.message || '')
- .appendTo($('#alert-container'));
+ alertEl.classList.add('alert', `alert-${severity}`);
+ document.getElementById('alert-container')?.appendChild(alertEl);
}
function toggleCheckbox(apiUrlPrefix: string, selector: string) {
SupersetClient.get({
- endpoint: apiUrlPrefix + ($(selector)[0] as HTMLInputElement).checked,
+ endpoint:
+ apiUrlPrefix +
+ (document.querySelector(selector) as HTMLInputElement).checked,
})
.then(() => undefined)
.catch(response =>
@@ -60,41 +52,33 @@ function toggleCheckbox(apiUrlPrefix: string, selector: string) {
}
export default function setupApp() {
- $(document).ready(function () {
- $(':checkbox[data-checkbox-api-prefix]').change(function (
- this: HTMLElement,
- ) {
- const $this = $(this);
- const prefix = $this.data('checkbox-api-prefix');
- const id = $this.attr('id');
- toggleCheckbox(prefix, `#${id}`);
- });
+ document.addEventListener('DOMContentLoaded', function () {
+ const checkbox = document.querySelector<HTMLElement>(
+ ':checkbox[data-checkbox-api-prefix]',
+ );
+ if (checkbox) {
+ checkbox.addEventListener('change', function () {
+ const prefix = checkbox.dataset['checkbox-api-prefix'];
+ const id = checkbox.getAttribute('id');
+ if (prefix && id) toggleCheckbox(prefix, `#${id}`);
+ });
+ }
// for language picker dropdown
- $('#language-picker a').click(function (
- ev: JQuery.ClickEvent<
- HTMLLinkElement,
- null,
- HTMLLinkElement,
- HTMLLinkElement
- >,
- ) {
- ev.preventDefault();
- SupersetClient.get({
- url: ev.currentTarget.href,
- parseMethod: null,
- }).then(() => {
- window.location.reload();
+ const languagePicker = document.querySelector('#language-picker a');
+ if (languagePicker) {
+ languagePicker.addEventListener('click', function (ev) {
+ ev.preventDefault();
+ SupersetClient.get({
+ url: (ev.currentTarget as HTMLAnchorElement).href,
+ parseMethod: null,
+ }).then(() => {
+ window.location.reload();
+ });
});
- });
+ }
});
- // A set of hacks to allow apps to run within a FAB template
- // this allows for the server side generated menus to function
- window.$ = $;
- window.jQuery = $;
- require('bootstrap');
-
// setup appwide custom error messages
setupErrorMessages();
}
diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js
index 327f6ac..8ad1f63 100644
--- a/superset-frontend/webpack.config.js
+++ b/superset-frontend/webpack.config.js
@@ -260,7 +260,6 @@ const config = {
'@ant-design.*',
'.*bootstrap',
'moment',
- 'jquery',
'core-js.*',
'@emotion.*',
'd3',