Force modern emoji experimental to be dev mode only (#35505)

app/javascript/mastodon/components/account_bio.tsx

@@ -3,8 +3,8 @@ import { useCallback } from 'react';
 import { useLinks } from 'mastodon/hooks/useLinks';
 
 import { EmojiHTML } from '../features/emoji/emoji_html';
-import { isFeatureEnabled } from '../initial_state';
 import { useAppSelector } from '../store';
+import { isModernEmojiEnabled } from '../utils/environment';
 
 interface AccountBioProps {
   className: string;
@@ -32,9 +32,7 @@ export const AccountBio: React.FC<AccountBioProps> = ({
     if (!account) {
       return '';
     }
-    return isFeatureEnabled('modern_emojis')
+    return isModernEmojiEnabled() ? account.note : account.note_emojified;
-      ? account.note
-      : account.note_emojified;
   });
   const extraEmojis = useAppSelector((state) => {
     const account = state.accounts.get(accountId);

app/javascript/mastodon/components/status_content.jsx

@@ -13,8 +13,9 @@ import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react'
 import { Icon }  from 'mastodon/components/icon';
 import { Poll } from 'mastodon/components/poll';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { autoPlayGif, isFeatureEnabled, languages as preloadedLanguages } from 'mastodon/initial_state';
+import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
 import { EmojiHTML } from '../features/emoji/emoji_html';
+import { isModernEmojiEnabled } from '../utils/environment';
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
 
@@ -24,7 +25,7 @@ const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
  * @returns {string}
  */
 export function getStatusContent(status) {
-  if (isFeatureEnabled('modern_emojis')) {
+  if (isModernEmojiEnabled()) {
     return status.getIn(['translation', 'content']) || status.get('content');
   }
   return status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');

app/javascript/mastodon/features/emoji/emoji_html.tsx

@@ -5,8 +5,8 @@ import type { List as ImmutableList } from 'immutable';
 import { isList } from 'immutable';
 
 import type { ApiCustomEmojiJSON } from '@/mastodon/api_types/custom_emoji';
-import { isFeatureEnabled } from '@/mastodon/initial_state';
 import type { CustomEmoji } from '@/mastodon/models/custom_emoji';
+import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
 
 import { useEmojiAppState } from './hooks';
 import { emojifyElement } from './render';
@@ -25,7 +25,7 @@ export const EmojiHTML: React.FC<EmojiHTMLProps> = ({
   extraEmojis,
   ...props
 }) => {
-  if (isFeatureEnabled('modern_emojis')) {
+  if (isModernEmojiEnabled()) {
     return (
       <ModernEmojiHTML
         htmlString={htmlString}

app/javascript/mastodon/initial_state.js

@@ -142,12 +142,4 @@ export function getAccessToken() {
   return getMeta('access_token');
 }
 
-/**
- * @param {string} feature
- * @returns {boolean}
- */
-export function isFeatureEnabled(feature) {
-  return initialState?.features?.includes(feature) || false;
-}
-
 export default initialState;

app/javascript/mastodon/main.tsx

@@ -4,12 +4,16 @@ import { Globals } from '@react-spring/web';
 
 import { setupBrowserNotifications } from 'mastodon/actions/notifications';
 import Mastodon from 'mastodon/containers/mastodon';
-import { isFeatureEnabled, me, reduceMotion } from 'mastodon/initial_state';
+import { me, reduceMotion } from 'mastodon/initial_state';
 import * as perf from 'mastodon/performance';
 import ready from 'mastodon/ready';
 import { store } from 'mastodon/store';
 
-import { isProduction, isDevelopment } from './utils/environment';
+import {
+  isProduction,
+  isDevelopment,
+  isModernEmojiEnabled,
+} from './utils/environment';
 
 function main() {
   perf.start('main()');
@@ -29,7 +33,7 @@ function main() {
       });
     }
 
-    if (isFeatureEnabled('modern_emojis')) {
+    if (isModernEmojiEnabled()) {
       const { initializeEmoji } = await import('@/mastodon/features/emoji');
       await initializeEmoji();
     }

app/javascript/mastodon/utils/environment.ts

@@ -1,3 +1,5 @@
+import initialState from '../initial_state';
+
 export function isDevelopment() {
   if (typeof process !== 'undefined')
     return process.env.NODE_ENV === 'development';
@@ -9,3 +11,13 @@ export function isProduction() {
     return process.env.NODE_ENV === 'production';
   else return import.meta.env.PROD;
 }
+
+export type Features = 'modern_emojis';
+
+export function isFeatureEnabled(feature: Features) {
+  return initialState?.features.includes(feature) ?? false;
+}
+
+export function isModernEmojiEnabled() {
+  return isFeatureEnabled('modern_emojis') && isDevelopment();
+}