~cytrogen/masto-fe

955179fc55f2db2694ab2d1e98d5ae82af430571 — Renaud Chaput 2 years ago 89269e4
Dont use CommonJS (`require`, `module.exports`) anywhere (#24913)

M .eslintrc.js => .eslintrc.js +17 -0
@@ 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',
      },
    },
  ],
};

M app/javascript/mastodon/common.js => app/javascript/mastodon/common.js +1 -1
@@ 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 {

M app/javascript/mastodon/features/emoji/emoji_compressed.js => app/javascript/mastodon/features/emoji/emoji_compressed.js +2 -0
@@ 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

M app/javascript/mastodon/features/emoji/emoji_mart_data_light.js => app/javascript/mastodon/features/emoji/emoji_mart_data_light.js +5 -3
@@ 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,

M app/javascript/mastodon/features/emoji/emoji_mart_search_light.js => app/javascript/mastodon/features/emoji/emoji_mart_search_light.js +1 -1
@@ 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 = {};

M app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js => app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js +9 -6
@@ 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;

M app/javascript/mastodon/features/emoji/emoji_utils.js => app/javascript/mastodon/features/emoji/emoji_utils.js +1 -1
@@ 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 = [];

M app/javascript/mastodon/features/emoji/unicode_to_filename.js => app/javascript/mastodon/features/emoji/unicode_to_filename.js +3 -0
@@ 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) => {

M app/javascript/mastodon/features/emoji/unicode_to_unified_name.js => app/javascript/mastodon/features/emoji/unicode_to_unified_name.js +3 -0
@@ 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;

M app/javascript/mastodon/main.jsx => app/javascript/mastodon/main.jsx +1 -2
@@ 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<void>}

M app/javascript/mastodon/performance.js => app/javascript/mastodon/performance.js +1 -3
@@ 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();

M app/javascript/mastodon/service_worker/web_push_locales.js => app/javascript/mastodon/service_worker/web_push_locales.js +3 -0
@@ 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');

M app/javascript/packs/admin.jsx => app/javascript/packs/admin.jsx +2 -3
@@ 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'));

M app/javascript/packs/mailer.js => app/javascript/packs/mailer.js +1 -1
@@ 1,3 1,3 @@
require('../styles/mailer.scss');
import '../styles/mailer.scss';

require.context('../icons');

M app/javascript/packs/public.jsx => app/javascript/packs/public.jsx +19 -13
@@ 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)

M app/javascript/packs/share.jsx => app/javascript/packs/share.jsx +9 -6
@@ 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(<ComposeContainer {...props} />, mountNode);
  }
}

function main() {
  const ready = require('../mastodon/ready').default;
  ready(loaded);
}


M package.json => package.json +1 -1
@@ 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",