From 50188ad211ec184d5af5a8dc5d64de3b20e35e9a Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 15 Jan 2024 12:16:05 +0100 Subject: [PATCH] [Glitch] Use helpers to check environment in frontend (#2571) Port 277e6968f564ba24f59f9b2b370928c679e509cc to glitch-soc Signed-off-by: Claire Co-authored-by: Renaud Chaput --- app/javascript/flavours/glitch/components/icon.tsx | 4 +++- app/javascript/flavours/glitch/components/router.tsx | 3 ++- app/javascript/flavours/glitch/containers/mastodon.jsx | 3 ++- app/javascript/flavours/glitch/locales/global_locale.ts | 4 +++- app/javascript/flavours/glitch/locales/intl_provider.tsx | 4 +++- app/javascript/flavours/glitch/main.jsx | 4 +++- app/javascript/flavours/glitch/performance.js | 8 +++++--- app/javascript/flavours/glitch/utils/environment.ts | 7 +++++++ 8 files changed, 28 insertions(+), 9 deletions(-) create mode 100644 app/javascript/flavours/glitch/utils/environment.ts diff --git a/app/javascript/flavours/glitch/components/icon.tsx b/app/javascript/flavours/glitch/components/icon.tsx index dbf5839606..1784eaf38f 100644 --- a/app/javascript/flavours/glitch/components/icon.tsx +++ b/app/javascript/flavours/glitch/components/icon.tsx @@ -2,6 +2,8 @@ import classNames from 'classnames'; import { ReactComponent as CheckBoxOutlineBlankIcon } from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg'; +import { isProduction } from 'flavours/glitch/utils/environment'; + interface SVGPropsWithTitle extends React.SVGProps { title?: string; } @@ -24,7 +26,7 @@ export const Icon: React.FC = ({ }) => { // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (!IconComponent) { - if (process.env.NODE_ENV !== 'production') { + if (!isProduction()) { throw new Error( ` is missing an "icon" prop.`, ); diff --git a/app/javascript/flavours/glitch/components/router.tsx b/app/javascript/flavours/glitch/components/router.tsx index 22f22c65cc..0637c35ada 100644 --- a/app/javascript/flavours/glitch/components/router.tsx +++ b/app/javascript/flavours/glitch/components/router.tsx @@ -11,6 +11,7 @@ import type { import { createBrowserHistory } from 'history'; import { layoutFromWindow } from 'flavours/glitch/is_mobile'; +import { isDevelopment } from 'flavours/glitch/utils/environment'; interface MastodonLocationState { fromMastodon?: boolean; @@ -40,7 +41,7 @@ function normalizePath( } else if ( location.state !== undefined && state !== undefined && - process.env.NODE_ENV === 'development' + isDevelopment() ) { // eslint-disable-next-line no-console console.log( diff --git a/app/javascript/flavours/glitch/containers/mastodon.jsx b/app/javascript/flavours/glitch/containers/mastodon.jsx index 070e94fe8f..1704336f2c 100644 --- a/app/javascript/flavours/glitch/containers/mastodon.jsx +++ b/app/javascript/flavours/glitch/containers/mastodon.jsx @@ -18,8 +18,9 @@ import UI from 'flavours/glitch/features/ui'; import initialState, { title as siteTitle } from 'flavours/glitch/initial_state'; import { IntlProvider } from 'flavours/glitch/locales'; import { store } from 'flavours/glitch/store'; +import { isProduction } from 'flavours/glitch/utils/environment'; -const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`; +const title = isProduction() ? siteTitle : `${siteTitle} (Dev)`; const hydrateAction = hydrateStore(initialState); diff --git a/app/javascript/flavours/glitch/locales/global_locale.ts b/app/javascript/flavours/glitch/locales/global_locale.ts index 2d4329c764..67e4dd9218 100644 --- a/app/javascript/flavours/glitch/locales/global_locale.ts +++ b/app/javascript/flavours/glitch/locales/global_locale.ts @@ -1,3 +1,5 @@ +import { isDevelopment } from 'flavours/glitch/utils/environment'; + export interface LocaleData { locale: string; messages: Record; @@ -11,7 +13,7 @@ export function setLocale(locale: LocaleData) { export function getLocale(): LocaleData { if (!loadedLocale) { - if (process.env.NODE_ENV === 'development') { + if (isDevelopment()) { throw new Error('getLocale() called before any locale has been set'); } else { return { locale: 'unknown', messages: {} }; diff --git a/app/javascript/flavours/glitch/locales/intl_provider.tsx b/app/javascript/flavours/glitch/locales/intl_provider.tsx index 4fa8b2247c..f508a26be7 100644 --- a/app/javascript/flavours/glitch/locales/intl_provider.tsx +++ b/app/javascript/flavours/glitch/locales/intl_provider.tsx @@ -2,12 +2,14 @@ import { useEffect, useState } from 'react'; import { IntlProvider as BaseIntlProvider } from 'react-intl'; +import { isProduction } from 'flavours/glitch/utils/environment'; + import { getLocale, isLocaleLoaded } from './global_locale'; import { loadLocale } from './load_locale'; function onProviderError(error: unknown) { // Silent the error, like upstream does - if (process.env.NODE_ENV === 'production') return; + if (isProduction()) return; // This browser does not advertise Intl support for this locale, we only print a warning // As-per the spec, the browser should select the best matching locale diff --git a/app/javascript/flavours/glitch/main.jsx b/app/javascript/flavours/glitch/main.jsx index 2aef67fa3a..f76d40713d 100644 --- a/app/javascript/flavours/glitch/main.jsx +++ b/app/javascript/flavours/glitch/main.jsx @@ -7,6 +7,8 @@ import * as perf from 'flavours/glitch/performance'; import ready from 'flavours/glitch/ready'; import { store } from 'flavours/glitch/store'; +import { isProduction } from './utils/environment'; + /** * @returns {Promise} */ @@ -21,7 +23,7 @@ function main() { root.render(); store.dispatch(setupBrowserNotifications()); - if (process.env.NODE_ENV === 'production' && me && 'serviceWorker' in navigator) { + if (isProduction() && me && 'serviceWorker' in navigator) { const { Workbox } = await import('workbox-window'); const wb = new Workbox('/sw.js'); /** @type {ServiceWorkerRegistration} */ diff --git a/app/javascript/flavours/glitch/performance.js b/app/javascript/flavours/glitch/performance.js index 42849c82b1..3bca95e85e 100644 --- a/app/javascript/flavours/glitch/performance.js +++ b/app/javascript/flavours/glitch/performance.js @@ -5,7 +5,9 @@ import * as marky from 'marky'; -if (process.env.NODE_ENV === 'development') { +import { isDevelopment } from './utils/environment'; + +if (isDevelopment()) { if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) { // Increase Firefox's performance entry limit; otherwise it's capped to 150. // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1331135 @@ -18,13 +20,13 @@ if (process.env.NODE_ENV === 'development') { } export function start(name) { - if (process.env.NODE_ENV === 'development') { + if (isDevelopment()) { marky.mark(name); } } export function stop(name) { - if (process.env.NODE_ENV === 'development') { + if (isDevelopment()) { marky.stop(name); } } diff --git a/app/javascript/flavours/glitch/utils/environment.ts b/app/javascript/flavours/glitch/utils/environment.ts new file mode 100644 index 0000000000..b6371499f6 --- /dev/null +++ b/app/javascript/flavours/glitch/utils/environment.ts @@ -0,0 +1,7 @@ +export function isDevelopment() { + return process.env.NODE_ENV === 'development'; +} + +export function isProduction() { + return process.env.NODE_ENV === 'production'; +}