From 108720d7b090e91d3e792b5164cc2a53e03d00cb Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Tue, 9 May 2023 03:08:47 +0200 Subject: [PATCH] [Glitch] Dont use CommonJS (`require`, `module.exports`) anywhere Port 955179fc55f2db2694ab2d1e98d5ae82af430571 to glitch-soc Signed-off-by: Claire --- app/javascript/core/public.js | 2 +- app/javascript/core/settings.js | 2 +- .../glitch/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 +++++++++------ .../glitch/features/emoji/emoji_utils.js | 2 +- .../glitch/features/emoji/unicode_to_filename.js | 3 +++ .../features/emoji/unicode_to_unified_name.js | 3 +++ app/javascript/flavours/glitch/main.jsx | 2 +- app/javascript/flavours/glitch/packs/admin.jsx | 5 ++--- app/javascript/flavours/glitch/packs/public.jsx | 16 ++++++++-------- app/javascript/flavours/glitch/packs/settings.js | 3 +-- app/javascript/flavours/glitch/packs/share.jsx | 15 +++++++++------ app/javascript/flavours/glitch/performance.js | 6 ++---- 15 files changed, 49 insertions(+), 37 deletions(-) diff --git a/app/javascript/core/public.js b/app/javascript/core/public.js index 4fdda5c3e6..01b4157f8c 100644 --- a/app/javascript/core/public.js +++ b/app/javascript/core/public.js @@ -2,7 +2,7 @@ import 'packs/public-path'; -const { delegate } = require('@rails/ujs'); +import { delegate } from '@rails/ujs'; const getProfileAvatarAnimationHandler = (swapTo) => { //animate avatar gifs on the profile page when moused over diff --git a/app/javascript/core/settings.js b/app/javascript/core/settings.js index d578463a33..c6cf6704c3 100644 --- a/app/javascript/core/settings.js +++ b/app/javascript/core/settings.js @@ -3,7 +3,7 @@ import 'packs/public-path'; import escapeTextContentForBrowser from 'escape-html'; -const { delegate } = require('@rails/ujs'); +import { delegate } from '@rails/ujs'; import emojify from '../mastodon/features/emoji/emoji'; diff --git a/app/javascript/flavours/glitch/features/emoji/emoji_compressed.js b/app/javascript/flavours/glitch/features/emoji/emoji_compressed.js index 74b53ce5c8..0ed18b6a44 100644 --- a/app/javascript/flavours/glitch/features/emoji/emoji_compressed.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/emoji/emoji_mart_data_light.js b/app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.js index 49813537d7..000aeb0de4 100644 --- a/app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/emoji/emoji_mart_search_light.js b/app/javascript/flavours/glitch/features/emoji/emoji_mart_search_light.js index 70694ab6dd..83e154b0b2 100644 --- a/app/javascript/flavours/glitch/features/emoji/emoji_mart_search_light.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js b/app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js index 1a38fde234..30fbd9e349 100644 --- a/app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/emoji/emoji_utils.js b/app/javascript/flavours/glitch/features/emoji/emoji_utils.js index be793526d0..83bcc9d82f 100644 --- a/app/javascript/flavours/glitch/features/emoji/emoji_utils.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/emoji/unicode_to_filename.js b/app/javascript/flavours/glitch/features/emoji/unicode_to_filename.js index c75c4cd7d0..3395c77174 100644 --- a/app/javascript/flavours/glitch/features/emoji/unicode_to_filename.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/emoji/unicode_to_unified_name.js b/app/javascript/flavours/glitch/features/emoji/unicode_to_unified_name.js index d29550f122..108b911222 100644 --- a/app/javascript/flavours/glitch/features/emoji/unicode_to_unified_name.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/main.jsx b/app/javascript/flavours/glitch/main.jsx index e3a98b4843..fa8ba47d49 100644 --- a/app/javascript/flavours/glitch/main.jsx +++ b/app/javascript/flavours/glitch/main.jsx @@ -6,7 +6,7 @@ import { store } from 'flavours/glitch/store/configureStore'; import { me } from 'flavours/glitch/initial_state'; import ready from 'flavours/glitch/ready'; -const perf = require('flavours/glitch/performance'); +import * as perf from 'flavours/glitch/performance'; /** * @returns {Promise} diff --git a/app/javascript/flavours/glitch/packs/admin.jsx b/app/javascript/flavours/glitch/packs/admin.jsx index 56cdfc30a3..7544ae4e97 100644 --- a/app/javascript/flavours/glitch/packs/admin.jsx +++ b/app/javascript/flavours/glitch/packs/admin.jsx @@ -1,10 +1,9 @@ import 'packs/public-path'; import ready from 'flavours/glitch/ready'; +import React from 'react'; +import ReactDOM from 'react-dom'; ready(() => { - 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/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx index 93b249bb41..f77d6d3242 100644 --- a/app/javascript/flavours/glitch/packs/public.jsx +++ b/app/javascript/flavours/glitch/packs/public.jsx @@ -5,6 +5,14 @@ import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; import axios from 'axios'; import { throttle } from 'lodash'; import { defineMessages } from 'react-intl'; +import * as IntlMessageFormat from 'intl-messageformat'; +import { timeAgoString } from 'flavours/glitch/components/relative_timestamp'; +import { delegate } from '@rails/ujs'; +import emojify from 'flavours/glitch/features/emoji/emoji'; +import { getLocale } from 'locales'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import { createBrowserHistory } from 'history'; const messages = defineMessages({ usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' }, @@ -13,15 +21,7 @@ const messages = defineMessages({ }); function main() { - const IntlMessageFormat = require('intl-messageformat').default; - const { timeAgoString } = require('flavours/glitch/components/relative_timestamp'); - const { delegate } = require('@rails/ujs'); - const emojify = require('flavours/glitch/features/emoji/emoji').default; - const { getLocale } = require('locales'); const { localeData } = getLocale(); - const React = require('react'); - const ReactDOM = require('react-dom'); - const { createBrowserHistory } = require('history'); const scrollToDetailedStatus = () => { const history = createBrowserHistory(); diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js index 55a8ae1c65..cca71dae14 100644 --- a/app/javascript/flavours/glitch/packs/settings.js +++ b/app/javascript/flavours/glitch/packs/settings.js @@ -1,11 +1,10 @@ import 'packs/public-path'; import loadPolyfills from 'flavours/glitch/load_polyfills'; import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions'; +import { delegate } from '@rails/ujs'; import 'cocoon-js-vanilla'; function main() { - const { delegate } = require('@rails/ujs'); - const toggleSidebar = () => { const sidebar = document.querySelector('.sidebar ul'); const toggleButton = document.querySelector('.sidebar__toggle__icon'); diff --git a/app/javascript/flavours/glitch/packs/share.jsx b/app/javascript/flavours/glitch/packs/share.jsx index e5a79849aa..26228e448a 100644 --- a/app/javascript/flavours/glitch/packs/share.jsx +++ b/app/javascript/flavours/glitch/packs/share.jsx @@ -1,20 +1,23 @@ import 'packs/public-path'; import loadPolyfills from 'flavours/glitch/load_polyfills'; +import ComposeContainer from 'flavours/glitch/containers/compose_container'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import ready from 'flavours/glitch/ready'; function loaded() { - const ComposeContainer = require('flavours/glitch/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('flavours/glitch/ready').default; ready(loaded); } diff --git a/app/javascript/flavours/glitch/performance.js b/app/javascript/flavours/glitch/performance.js index 2b7e1bda84..42849c82b1 100644 --- a/app/javascript/flavours/glitch/performance.js +++ b/app/javascript/flavours/glitch/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) { @@ -12,8 +11,7 @@ if (process.env.NODE_ENV === 'development') { // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1331135 performance.setResourceTimingBufferSize(Infinity); } - // eslint-disable-next-line import/no-extraneous-dependencies - marky = require('marky'); + // allows us to easily do e.g. ReactPerf.printWasted() while debugging //window.ReactPerf = require('react-addons-perf'); //window.ReactPerf.start();