[bugfix] correct import of @rails/ujs / fix lint issues (#92)

Details: https://github.com/rails/rails/issues/49768
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/92
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>

.eslintrc.js

@@ -182,6 +182,7 @@ module.exports = {
         js: 'never',
         jsx: 'never',
         mjs: 'never',
+        mts: 'never',
         ts: 'never',
         tsx: 'never',
       },

app/javascript/core/admin.js

@@ -1,7 +1,7 @@
 //  This file will be loaded on admin pages, regardless of theme.
 
 import 'packs/public-path';
-import { delegate } from '@rails/ujs';
+import Rails from '@rails/ujs';
 
 import ready from '../mastodon/ready';
 
@@ -19,7 +19,7 @@ const setAnnouncementEndsAttributes = (target) => {
   }
 };
 
-delegate(document, 'input[type="datetime-local"]#announcement_starts_at', 'change', ({ target }) => {
+Rails.delegate(document, 'input[type="datetime-local"]#announcement_starts_at', 'change', ({ target }) => {
   setAnnouncementEndsAttributes(target);
 });
 
@@ -42,7 +42,7 @@ const hideSelectAll = () => {
   hiddenField.value = '0';
 };
 
-delegate(document, '#batch_checkbox_all', 'change', ({ target }) => {
+Rails.delegate(document, '#batch_checkbox_all', 'change', ({ target }) => {
   const selectAllMatchingElement = document.querySelector('.batch-table__select-all');
 
   [].forEach.call(document.querySelectorAll(batchCheckboxClassName), (content) => {
@@ -58,7 +58,7 @@ delegate(document, '#batch_checkbox_all', 'change', ({ target }) => {
   }
 });
 
-delegate(document, '.batch-table__select-all button', 'click', () => {
+Rails.delegate(document, '.batch-table__select-all button', 'click', () => {
   const hiddenField = document.querySelector('#select_all_matching');
   const active = hiddenField.value === '1';
   const selectedMsg = document.querySelector('.batch-table__select-all .selected');
@@ -75,7 +75,7 @@ delegate(document, '.batch-table__select-all button', 'click', () => {
   }
 });
 
-delegate(document, batchCheckboxClassName, 'change', () => {
+Rails.delegate(document, batchCheckboxClassName, 'change', () => {
   const checkAllElement = document.querySelector('#batch_checkbox_all');
   const selectAllMatchingElement = document.querySelector('.batch-table__select-all');
 
@@ -93,19 +93,19 @@ delegate(document, batchCheckboxClassName, 'change', () => {
   }
 });
 
-delegate(document, '.media-spoiler-show-button', 'click', () => {
+Rails.delegate(document, '.media-spoiler-show-button', 'click', () => {
   [].forEach.call(document.querySelectorAll('button.media-spoiler'), (element) => {
     element.click();
   });
 });
 
-delegate(document, '.media-spoiler-hide-button', 'click', () => {
+Rails.delegate(document, '.media-spoiler-hide-button', 'click', () => {
   [].forEach.call(document.querySelectorAll('.spoiler-button.spoiler-button--visible button'), (element) => {
     element.click();
   });
 });
 
-delegate(document, '.filter-subset--with-select select', 'change', ({ target }) => {
+Rails.delegate(document, '.filter-subset--with-select select', 'change', ({ target }) => {
   target.form.submit();
 });
 
@@ -122,7 +122,7 @@ const onDomainBlockSeverityChange = (target) => {
   }
 };
 
-delegate(document, '#domain_block_severity', 'change', ({ target }) => onDomainBlockSeverityChange(target));
+Rails.delegate(document, '#domain_block_severity', 'change', ({ target }) => onDomainBlockSeverityChange(target));
 
 const onEnableBootstrapTimelineAccountsChange = (target) => {
   const bootstrapTimelineAccountsField = document.querySelector('#form_admin_settings_bootstrap_timeline_accounts');
@@ -139,7 +139,7 @@ const onEnableBootstrapTimelineAccountsChange = (target) => {
   }
 };
 
-delegate(document, '#form_admin_settings_enable_bootstrap_timeline_accounts', 'change', ({ target }) => onEnableBootstrapTimelineAccountsChange(target));
+Rails.delegate(document, '#form_admin_settings_enable_bootstrap_timeline_accounts', 'change', ({ target }) => onEnableBootstrapTimelineAccountsChange(target));
 
 const onChangeRegistrationMode = (target) => {
   const enabled = target.value === 'approved';
@@ -176,7 +176,7 @@ const convertLocalDatetimeToUTC = (value) => {
   return fullISO8601.slice(0, fullISO8601.indexOf('T') + 6);
 };
 
-delegate(document, '#form_admin_settings_registrations_mode', 'change', ({ target }) => onChangeRegistrationMode(target));
+Rails.delegate(document, '#form_admin_settings_registrations_mode', 'change', ({ target }) => onChangeRegistrationMode(target));
 
 ready(() => {
   const domainBlockSeverityInput = document.getElementById('domain_block_severity');
@@ -213,7 +213,7 @@ ready(() => {
     }
   });
 
-  delegate(document, 'form', 'submit', ({ target }) => {
+  Rails.delegate(document, 'form', 'submit', ({ target }) => {
     [].forEach.call(target.querySelectorAll('input[type="datetime-local"]'), element => {
       if (element.value && element.validity.valid) {
         element.value = convertLocalDatetimeToUTC(element.value);

app/javascript/core/settings.js

@@ -1,9 +1,9 @@
 //  This file will be loaded on settings pages, regardless of theme.
 
 import 'packs/public-path';
-import { delegate } from '@rails/ujs';
+import Rails from '@rails/ujs';
 
-delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {
+Rails.delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {
   const avatar = document.getElementById(target.id + '-preview');
   const [file] = target.files || [];
   const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
@@ -11,13 +11,13 @@ delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {
   avatar.src = url;
 });
 
-delegate(document, '.input-copy input', 'click', ({ target }) => {
+Rails.delegate(document, '.input-copy input', 'click', ({ target }) => {
   target.focus();
   target.select();
   target.setSelectionRange(0, target.value.length);
 });
 
-delegate(document, '.input-copy button', 'click', ({ target }) => {
+Rails.delegate(document, '.input-copy button', 'click', ({ target }) => {
   const input = target.parentNode.querySelector('.input-copy__wrapper input');
 
   const oldReadOnly = input.readonly;

app/javascript/flavours/glitch/packs/common.js

@@ -1,8 +1,8 @@
 import 'packs/public-path';
-import { start } from '@rails/ujs';
+import Rails from '@rails/ujs';
 import 'flavours/glitch/styles/index.scss';
 
-start();
+Rails.start();
 
 //  This ensures that webpack compiles our images.
 require.context('../images', true);

app/javascript/flavours/glitch/packs/login.js

@@ -1,8 +1,8 @@
 import 'packs/public-path';
-import { start } from '@rails/ujs';
+import Rails from '@rails/ujs';
 import 'flavours/glitch/styles/login.scss';
 
-start();
+Rails.start();
 
 //  This ensures that webpack compiles our images.
 require.context('../images', true);

app/javascript/flavours/glitch/packs/public.jsx

@@ -4,7 +4,7 @@ import { createRoot }  from 'react-dom/client';
 import { IntlMessageFormat } from 'intl-messageformat';
 import { defineMessages } from 'react-intl';
 
-import { delegate }  from '@rails/ujs';
+import Rails  from '@rails/ujs';
 import axios from 'axios';
 import { createBrowserHistory }  from 'history';
 import { throttle } from 'lodash';
@@ -143,7 +143,7 @@ function main() {
     scrollToDetailedStatus();
   }
 
-  delegate(document, '#user_account_attributes_username', 'input', throttle(() => {
+  Rails.delegate(document, '#user_account_attributes_username', 'input', throttle(() => {
     const username = document.getElementById('user_account_attributes_username');
 
     if (username.value && username.value.length > 0) {
@@ -157,7 +157,7 @@ function main() {
     }
   }, 500, { leading: false, trailing: true }));
 
-  delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
+  Rails.delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
     const password = document.getElementById('user_password');
     const confirmation = document.getElementById('user_password_confirmation');
     if (!confirmation) return;
@@ -171,10 +171,10 @@ function main() {
     }
   });
 
-  delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
-  delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
+  Rails.delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original'));
+  Rails.delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static'));
 
-  delegate(document, '.status__content__spoiler-link', 'click', function() {
+  Rails.delegate(document, '.status__content__spoiler-link', 'click', function() {
     const statusEl = this.parentNode.parentNode;
 
     if (statusEl.dataset.spoiler === 'expanded') {
@@ -210,11 +210,11 @@ function main() {
     sidebar.classList.toggle('visible');
   };
 
-  delegate(document, '.sidebar__toggle__icon', 'click', () => {
+  Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
     toggleSidebar();
   });
 
-  delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+  Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       toggleSidebar();
@@ -223,7 +223,7 @@ function main() {
 
   // Empty the honeypot fields in JS in case something like an extension
   // automatically filled them.
-  delegate(document, '#registration_new_user,#new_user', 'submit', () => {
+  Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
     ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => {
       const field = document.getElementById(id);
       if (field) {

app/javascript/flavours/glitch/packs/settings.js

@@ -1,5 +1,5 @@
 import 'packs/public-path';
-import { delegate }  from '@rails/ujs';
+import Rails  from '@rails/ujs';
 
 import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
 import { loadPolyfills } from 'flavours/glitch/polyfills';
@@ -22,11 +22,11 @@ function main() {
     sidebar.classList.toggle('visible');
   };
 
-  delegate(document, '.sidebar__toggle__icon', 'click', () => {
+  Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
     toggleSidebar();
   });
 
-  delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+  Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       toggleSidebar();

app/javascript/mastodon/components/hashtag_bar.tsx

@@ -32,7 +32,7 @@ function isNodeLinkHashtag(element: Node): element is HTMLLinkElement {
   return (
     element instanceof HTMLAnchorElement &&
     // it may be a <a> starting with a hashtag
-    (element.textContent?.[0] === '#' ||
+    (element.textContent.startsWith('#') ||
       // or a #<a>
       element.previousSibling?.textContent?.[
         element.previousSibling.textContent.length - 1

app/javascript/packs/public.jsx

@@ -5,7 +5,7 @@ import { createRoot }  from 'react-dom/client';
 import { IntlMessageFormat }  from 'intl-messageformat';
 import { defineMessages } from 'react-intl';
 
-import { delegate }  from '@rails/ujs';
+import Rails  from '@rails/ujs';
 import axios from 'axios';
 import { throttle } from 'lodash';
 
@@ -129,7 +129,7 @@ function loaded() {
       });
   }
 
-  delegate(document, '#user_account_attributes_username', 'input', throttle(({ target }) => {
+  Rails.delegate(document, '#user_account_attributes_username', 'input', throttle(({ target }) => {
     if (target.value && target.value.length > 0) {
       axios.get('/api/v1/accounts/lookup', { params: { acct: target.value } }).then(() => {
         target.setCustomValidity(formatMessage(messages.usernameTaken));
@@ -141,7 +141,7 @@ function loaded() {
     }
   }, 500, { leading: false, trailing: true }));
 
-  delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
+  Rails.delegate(document, '#user_password,#user_password_confirmation', 'input', () => {
     const password = document.getElementById('user_password');
     const confirmation = document.getElementById('user_password_confirmation');
     if (!confirmation) return;
@@ -155,7 +155,7 @@ function loaded() {
     }
   });
 
-  delegate(document, '.status__content__spoiler-link', 'click', function() {
+  Rails.delegate(document, '.status__content__spoiler-link', 'click', function() {
     const statusEl = this.parentNode.parentNode;
 
     if (statusEl.dataset.spoiler === 'expanded') {
@@ -192,23 +192,23 @@ const toggleSidebar = () => {
   sidebar.classList.toggle('visible');
 };
 
-delegate(document, '.sidebar__toggle__icon', 'click', () => {
+Rails.delegate(document, '.sidebar__toggle__icon', 'click', () => {
   toggleSidebar();
 });
 
-delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+Rails.delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
   if (e.key === ' ' || e.key === 'Enter') {
     e.preventDefault();
     toggleSidebar();
   }
 });
 
-delegate(document, '.custom-emoji', 'mouseover', ({ target }) => target.src = target.getAttribute('data-original'));
-delegate(document, '.custom-emoji', 'mouseout', ({ target }) => target.src = target.getAttribute('data-static'));
+Rails.delegate(document, '.custom-emoji', 'mouseover', ({ target }) => target.src = target.getAttribute('data-original'));
+Rails.delegate(document, '.custom-emoji', 'mouseout', ({ target }) => target.src = target.getAttribute('data-static'));
 
 // Empty the honeypot fields in JS in case something like an extension
 // automatically filled them.
-delegate(document, '#registration_new_user,#new_user', 'submit', () => {
+Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
   ['user_website', 'user_confirm_password', 'registration_user_website', 'registration_user_confirm_password'].forEach(id => {
     const field = document.getElementById(id);
     if (field) {