From 955179fc55f2db2694ab2d1e98d5ae82af430571 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Tue, 9 May 2023 03:08:47 +0200 Subject: [PATCH] Dont use CommonJS (`require`, `module.exports`) anywhere (#24913) --- .eslintrc.js | 17 ++++++++++ app/javascript/mastodon/common.js | 2 +- .../features/emoji/emoji_compressed.js | 2 ++ .../features/emoji/emoji_mart_data_light.js | 8 +++-- .../features/emoji/emoji_mart_search_light.js | 2 +- .../emoji/emoji_unicode_mapping_light.js | 15 +++++---- .../mastodon/features/emoji/emoji_utils.js | 2 +- .../features/emoji/unicode_to_filename.js | 3 ++ .../features/emoji/unicode_to_unified_name.js | 3 ++ app/javascript/mastodon/main.jsx | 3 +- app/javascript/mastodon/performance.js | 4 +-- .../service_worker/web_push_locales.js | 3 ++ app/javascript/packs/admin.jsx | 5 ++- app/javascript/packs/mailer.js | 2 +- app/javascript/packs/public.jsx | 32 +++++++++++-------- app/javascript/packs/share.jsx | 15 +++++---- package.json | 2 +- 17 files changed, 79 insertions(+), 41 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 8394d98b9c..c888671ceb 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -102,6 +102,7 @@ module.exports = { { vars: 'all', args: 'after-used', + destructuredArrayIgnorePattern: '^_', ignoreRestSiblings: true, }, ], @@ -208,6 +209,9 @@ module.exports = { ], }, ], + 'import/no-amd': 'error', + 'import/no-commonjs': 'error', + 'import/no-import-module-exports': 'error', 'import/no-webpack-loader-syntax': 'error', 'promise/always-return': 'off', @@ -255,6 +259,7 @@ module.exports = { '*.config.js', '.*rc.js', 'ide-helper.js', + 'config/webpack/**/*', ], env: { @@ -264,6 +269,10 @@ module.exports = { parserOptions: { sourceType: 'script', }, + + rules: { + 'import/no-commonjs': 'off', + }, }, { files: [ @@ -298,5 +307,13 @@ module.exports = { jest: true, }, }, + { + files: [ + 'streaming/**/*', + ], + rules: { + 'import/no-commonjs': 'off', + }, + }, ], }; diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.js index 8f35053036..0ec8449343 100644 --- a/app/javascript/mastodon/common.js +++ b/app/javascript/mastodon/common.js @@ -1,7 +1,7 @@ import Rails from '@rails/ujs'; +import 'font-awesome/css/font-awesome.css'; export function start() { - require('font-awesome/css/font-awesome.css'); require.context('../images/', true); try { diff --git a/app/javascript/mastodon/features/emoji/emoji_compressed.js b/app/javascript/mastodon/features/emoji/emoji_compressed.js index 6a402f2d4b..e1bee1655d 100644 --- a/app/javascript/mastodon/features/emoji/emoji_compressed.js +++ b/app/javascript/mastodon/features/emoji/emoji_compressed.js @@ -1,3 +1,5 @@ +/* eslint-disable import/no-commonjs -- + We need to use CommonJS here due to preval */ // @preval // http://www.unicode.org/Public/emoji/5.0/emoji-test.txt // This file contains the compressed version of the emoji data from diff --git a/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js b/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js index 49813537d7..000aeb0de4 100644 --- a/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js +++ b/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js @@ -1,8 +1,10 @@ // The output of this module is designed to mimic emoji-mart's // "data" object, such that we can use it for a light version of emoji-mart's // emojiIndex.search functionality. -const { unicodeToUnifiedName } = require('./unicode_to_unified_name'); -const [ shortCodesToEmojiData, skins, categories, short_names ] = require('./emoji_compressed'); +import { unicodeToUnifiedName } from './unicode_to_unified_name'; +import emojiCompressed from './emoji_compressed'; + +const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed; const emojis = {}; @@ -33,7 +35,7 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => { }; }); -module.exports = { +export { emojis, skins, categories, diff --git a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js index 70694ab6dd..83e154b0b2 100644 --- a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js +++ b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js @@ -1,7 +1,7 @@ // This code is largely borrowed from: // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js -import data from './emoji_mart_data_light'; +import * as data from './emoji_mart_data_light'; import { getData, getSanitizedData, uniq, intersect } from './emoji_utils'; let originalPool = {}; diff --git a/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js b/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js index 1a38fde234..30fbd9e349 100644 --- a/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js +++ b/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js @@ -2,14 +2,17 @@ // (i.e. the svg filename) and a shortCode intended to be shown // as a "title" attribute in an HTML element (aka tooltip). +import emojiCompressed from './emoji_compressed'; + +import { unicodeToFilename } from './unicode_to_filename'; + const [ shortCodesToEmojiData, - skins, // eslint-disable-line @typescript-eslint/no-unused-vars - categories, // eslint-disable-line @typescript-eslint/no-unused-vars - short_names, // eslint-disable-line @typescript-eslint/no-unused-vars + _skins, + _categories, + _short_names, emojisWithoutShortCodes, -] = require('./emoji_compressed'); -const { unicodeToFilename } = require('./unicode_to_filename'); +] = emojiCompressed; // decompress const unicodeMapping = {}; @@ -32,4 +35,4 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => { }); emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData)); -module.exports = unicodeMapping; +export default unicodeMapping; diff --git a/app/javascript/mastodon/features/emoji/emoji_utils.js b/app/javascript/mastodon/features/emoji/emoji_utils.js index be793526d0..83bcc9d82f 100644 --- a/app/javascript/mastodon/features/emoji/emoji_utils.js +++ b/app/javascript/mastodon/features/emoji/emoji_utils.js @@ -1,7 +1,7 @@ // This code is largely borrowed from: // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js -import data from './emoji_mart_data_light'; +import * as data from './emoji_mart_data_light'; const buildSearch = (data) => { const search = []; diff --git a/app/javascript/mastodon/features/emoji/unicode_to_filename.js b/app/javascript/mastodon/features/emoji/unicode_to_filename.js index c75c4cd7d0..3395c77174 100644 --- a/app/javascript/mastodon/features/emoji/unicode_to_filename.js +++ b/app/javascript/mastodon/features/emoji/unicode_to_filename.js @@ -1,3 +1,6 @@ +/* eslint-disable import/no-commonjs -- + We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */ + // taken from: // https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866 exports.unicodeToFilename = (str) => { diff --git a/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js b/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js index d29550f122..108b911222 100644 --- a/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js +++ b/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js @@ -1,3 +1,6 @@ +/* eslint-disable import/no-commonjs -- + We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */ + function padLeft(str, num) { while (str.length < num) { str = '0' + str; diff --git a/app/javascript/mastodon/main.jsx b/app/javascript/mastodon/main.jsx index 88a205dd24..d8654adedb 100644 --- a/app/javascript/mastodon/main.jsx +++ b/app/javascript/mastodon/main.jsx @@ -5,8 +5,7 @@ import Mastodon from 'mastodon/containers/mastodon'; import { store } from 'mastodon/store/configureStore'; import { me } from 'mastodon/initial_state'; import ready from 'mastodon/ready'; - -const perf = require('mastodon/performance'); +import * as perf from 'mastodon/performance'; /** * @returns {Promise} diff --git a/app/javascript/mastodon/performance.js b/app/javascript/mastodon/performance.js index 95cf962d6b..42849c82b1 100644 --- a/app/javascript/mastodon/performance.js +++ b/app/javascript/mastodon/performance.js @@ -2,9 +2,8 @@ // Tools for performance debugging, only enabled in development mode. // Open up Chrome Dev Tools, then Timeline, then User Timing to see output. // Also see config/webpack/loaders/mark.js for the webpack loader marks. -// -let marky; +import * as marky from 'marky'; if (process.env.NODE_ENV === 'development') { if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) { @@ -13,7 +12,6 @@ if (process.env.NODE_ENV === 'development') { performance.setResourceTimingBufferSize(Infinity); } - marky = require('marky'); // allows us to easily do e.g. ReactPerf.printWasted() while debugging //window.ReactPerf = require('react-addons-perf'); //window.ReactPerf.start(); diff --git a/app/javascript/mastodon/service_worker/web_push_locales.js b/app/javascript/mastodon/service_worker/web_push_locales.js index 7d713cd378..3912f75c7d 100644 --- a/app/javascript/mastodon/service_worker/web_push_locales.js +++ b/app/javascript/mastodon/service_worker/web_push_locales.js @@ -1,3 +1,6 @@ +/* eslint-disable import/no-commonjs -- + We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */ + /* @preval */ const fs = require('fs'); diff --git a/app/javascript/packs/admin.jsx b/app/javascript/packs/admin.jsx index 038e9b4347..99e903eef3 100644 --- a/app/javascript/packs/admin.jsx +++ b/app/javascript/packs/admin.jsx @@ -1,6 +1,8 @@ import './public-path'; import { delegate } from '@rails/ujs'; import ready from '../mastodon/ready'; +import React from 'react'; +import ReactDOM from 'react-dom'; const setAnnouncementEndsAttributes = (target) => { const valid = target?.value && target?.validity?.valid; @@ -223,9 +225,6 @@ ready(() => { setAnnouncementEndsAttributes(announcementStartsAt); } - const React = require('react'); - const ReactDOM = require('react-dom'); - [].forEach.call(document.querySelectorAll('[data-admin-component]'), element => { const componentName = element.getAttribute('data-admin-component'); const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props')); diff --git a/app/javascript/packs/mailer.js b/app/javascript/packs/mailer.js index a4b6d54464..a2ad5e73ac 100644 --- a/app/javascript/packs/mailer.js +++ b/app/javascript/packs/mailer.js @@ -1,3 +1,3 @@ -require('../styles/mailer.scss'); +import '../styles/mailer.scss'; require.context('../icons'); diff --git a/app/javascript/packs/public.jsx b/app/javascript/packs/public.jsx index 3e832c509e..21c52fc12a 100644 --- a/app/javascript/packs/public.jsx +++ b/app/javascript/packs/public.jsx @@ -1,13 +1,24 @@ import './public-path'; -import escapeTextContentForBrowser from 'escape-html'; import loadPolyfills from '../mastodon/load_polyfills'; -import ready from '../mastodon/ready'; import { start } from '../mastodon/common'; + +import escapeTextContentForBrowser from 'escape-html'; +import ready from '../mastodon/ready'; import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions'; import 'cocoon-js-vanilla'; import axios from 'axios'; import { throttle } from 'lodash'; import { defineMessages } from 'react-intl'; +import * as IntlMessageFormat from 'intl-messageformat'; +import { timeAgoString } from '../mastodon/components/relative_timestamp'; +import { delegate } from '@rails/ujs'; +import * as emojify from '../mastodon/features/emoji/emoji'; +import { getLocale } from '../mastodon/locales'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import { createBrowserHistory } from 'history'; + +start(); const messages = defineMessages({ usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' }, @@ -15,8 +26,6 @@ const messages = defineMessages({ passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' }, }); -start(); - window.addEventListener('message', e => { const data = e.data || {}; @@ -33,16 +42,8 @@ window.addEventListener('message', e => { }); }); -function main() { - const IntlMessageFormat = require('intl-messageformat').default; - const { timeAgoString } = require('../mastodon/components/relative_timestamp'); - const { delegate } = require('@rails/ujs'); - const emojify = require('../mastodon/features/emoji/emoji').default; - const { getLocale } = require('../mastodon/locales'); +function loaded() { const { localeData } = getLocale(); - const React = require('react'); - const ReactDOM = require('react-dom'); - const { createBrowserHistory } = require('history'); const scrollToDetailedStatus = () => { const history = createBrowserHistory(); @@ -341,6 +342,11 @@ function main() { }); } + +function main() { + ready(loaded); +} + loadPolyfills() .then(main) .then(loadKeyboardExtensions) diff --git a/app/javascript/packs/share.jsx b/app/javascript/packs/share.jsx index 1225d7b529..97c3c7b0e5 100644 --- a/app/javascript/packs/share.jsx +++ b/app/javascript/packs/share.jsx @@ -1,23 +1,26 @@ import './public-path'; import loadPolyfills from '../mastodon/load_polyfills'; import { start } from '../mastodon/common'; +import ready from '../mastodon/ready'; +import ComposeContainer from '../mastodon/containers/compose_container'; +import React from 'react'; +import ReactDOM from 'react-dom'; start(); function loaded() { - const ComposeContainer = require('../mastodon/containers/compose_container').default; - const React = require('react'); - const ReactDOM = require('react-dom'); const mountNode = document.getElementById('mastodon-compose'); - if (mountNode !== null) { - const props = JSON.parse(mountNode.getAttribute('data-props')); + if (mountNode) { + const attr = mountNode.getAttribute('data-props'); + if(!attr) return; + + const props = JSON.parse(attr); ReactDOM.render(, mountNode); } } function main() { - const ready = require('../mastodon/ready').default; ready(loaded); } diff --git a/package.json b/package.json index 199c956695..f5d7dd09f4 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "jsdom": "^21.1.2", "lodash": "^4.17.21", "mark-loader": "^0.1.6", + "marky": "^1.2.5", "mini-css-extract-plugin": "^1.6.2", "mkdirp": "^2.1.6", "npmlog": "^7.0.1", @@ -192,7 +193,6 @@ "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "lint-staged": "^13.2.2", - "marky": "^1.2.5", "prettier": "^2.8.8", "raf": "^3.4.1", "react-intl-translations-manager": "^5.0.3",