Swap from React Helmet to Unhead (#38896)

app/javascript/mastodon/components/account_header/index.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+
+import { Helmet } from '@unhead/react/helmet';
 
 import { openModal } from '@/mastodon/actions/modal';
 import FollowRequestNoteContainer from '@/mastodon/features/account/containers/follow_request_note_container';

app/javascript/mastodon/components/error_boundary.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import StackTrace from 'stacktrace-js';
 

app/javascript/mastodon/containers/mastodon.jsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { Route } from 'react-router-dom';
 
 import { Provider as ReduxProvider } from 'react-redux';

app/javascript/mastodon/features/about/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';

app/javascript/mastodon/features/account_edit/components/column.tsx

@@ -2,9 +2,10 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { Column } from '@/mastodon/components/column';
 import { ColumnHeader } from '@/mastodon/components/column_header';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';

app/javascript/mastodon/features/bookmarked_statuses/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
 import {

app/javascript/mastodon/features/collections/detail/index.tsx

@@ -2,10 +2,11 @@ import { useCallback, useEffect } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { useHistory, useLocation, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import HelpIcon from '@/material-icons/400-24px/help.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import ShareIcon from '@/material-icons/400-24px/share.svg?react';

app/javascript/mastodon/features/collections/editor/index.tsx

@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import {
   Switch,
   Route,
@@ -12,6 +11,8 @@ import {
   useLocation,
 } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { Callout } from '@/mastodon/components/callout';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
 import { initialState } from '@/mastodon/initial_state';

app/javascript/mastodon/features/collections/index.tsx

@@ -1,8 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { TabLink, TabList } from '@/mastodon/components/tab_list';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';

app/javascript/mastodon/features/community_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/compose/index.tsx

@@ -2,11 +2,12 @@ import { useEffect, useCallback } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import elephantUIPlane from '@/images/elephant_ui_plane.svg';
 import EditIcon from '@/material-icons/400-24px/edit_square.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';

app/javascript/mastodon/features/direct_timeline/index.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { useDispatch } from 'react-redux';
 

app/javascript/mastodon/features/directory/index.tsx

@@ -3,10 +3,10 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
 import { List as ImmutableList } from 'immutable';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import {
   addColumn,

app/javascript/mastodon/features/domain_blocks/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback, useState } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
 import { apiGetDomainBlocks } from 'mastodon/api/domain_blocks';

app/javascript/mastodon/features/explore/index.tsx

@@ -2,9 +2,10 @@ import { useCallback, useRef } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { NavLink, Switch, Route } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
 import { Column } from 'mastodon/components/column';
 import type { ColumnRef } from 'mastodon/components/column';

app/javascript/mastodon/features/favourited_statuses/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';

app/javascript/mastodon/features/favourites/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/firehose/index.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
 
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { NavLink } from 'react-router-dom';
 
 import { useIdentity } from '@/mastodon/identity_context';

app/javascript/mastodon/features/follow_requests/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/followed_tags/index.tsx

@@ -2,10 +2,10 @@ import { useEffect, useCallback, useRef } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
 import { isFulfilled } from '@reduxjs/toolkit';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import {
   fetchFollowedHashtags,

app/javascript/mastodon/features/getting_started/index.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { Column } from 'mastodon/components/column';
 

app/javascript/mastodon/features/hashtag_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/home_timeline/index.jsx

@@ -4,7 +4,7 @@ import { PureComponent } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/keyboard_shortcuts/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 

app/javascript/mastodon/features/link_timeline/index.tsx

@@ -1,8 +1,9 @@
 import { useRef, useEffect, useCallback } from 'react';
 
-import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
 import { expandLinkTimeline } from 'mastodon/actions/timelines';
 import { Column } from 'mastodon/components/column';

app/javascript/mastodon/features/list_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { Link, withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';

app/javascript/mastodon/features/lists/index.tsx

@@ -2,9 +2,10 @@ import { useEffect, useMemo, useCallback } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';

app/javascript/mastodon/features/lists/members.tsx

@@ -2,9 +2,10 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { useParams, Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
 import { fetchRelationships } from 'mastodon/actions/accounts';

app/javascript/mastodon/features/lists/new.tsx

@@ -2,11 +2,12 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { useParams, useHistory, Link } from 'react-router-dom';
 
 import { isFulfilled } from '@reduxjs/toolkit';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { fetchList } from 'mastodon/actions/lists';

app/javascript/mastodon/features/mutes/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/notifications/request.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { useSelector, useDispatch } from 'react-redux';
 

app/javascript/mastodon/features/notifications/requests.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect, useState } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { useSelector, useDispatch } from 'react-redux';
 

app/javascript/mastodon/features/notifications_v2/index.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
+import { Helmet } from '@unhead/react/helmet';
 import { isEqual } from 'lodash';
 import { useDebouncedCallback } from 'use-debounce';
 

app/javascript/mastodon/features/onboarding/follows.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
 import { useDebouncedCallback } from 'use-debounce';
 
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';

app/javascript/mastodon/features/onboarding/profile.tsx

@@ -3,9 +3,10 @@ import { useState, useMemo, useCallback, createRef } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import AddPhotoAlternateIcon from '@/material-icons/400-24px/add_photo_alternate.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';

app/javascript/mastodon/features/pinned_statuses/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/privacy_policy/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { apiGetPrivacyPolicy } from 'mastodon/api/instance';
 import type { ApiPrivacyPolicyJSON } from 'mastodon/api_types/instance';

app/javascript/mastodon/features/public_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/quotes/index.tsx

@@ -2,10 +2,10 @@ import { useCallback, useEffect } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
 import { List as ImmutableList } from 'immutable';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
 import { fetchQuotes } from 'mastodon/actions/interactions_typed';
 import { ColumnHeader } from 'mastodon/components/column_header';

app/javascript/mastodon/features/reblogs/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/search/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';

app/javascript/mastodon/features/status/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { withRouter } from 'react-router-dom';
 import { difference } from 'lodash';
 

app/javascript/mastodon/features/terms_of_service/index.tsx

@@ -7,9 +7,10 @@ import {
   defineMessages,
 } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link, useParams } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { apiGetTermsOfService } from 'mastodon/api/instance';
 import type { ApiTermsOfServiceJSON } from 'mastodon/api_types/instance';
 import { Column } from 'mastodon/components/column';

app/javascript/mastodon/features/ui/components/bundle_column_error.jsx

@@ -4,7 +4,7 @@ import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { Link } from 'react-router-dom';
 
 import { Button } from 'mastodon/components/button';

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import Base from 'mastodon/components/modal_root';
 import { AltTextModal } from 'mastodon/features/alt_text_modal';

package.json

@@ -53,6 +53,7 @@
     "@react-spring/web": "^9.7.5",
     "@reduxjs/toolkit": "^2.0.1",
     "@rolldown/plugin-babel": "^0.2.2",
+    "@unhead/react": "^3.1.0",
     "@use-gesture/react": "^10.3.1",
     "@vitejs/plugin-legacy": "^8.0.0",
     "@vitejs/plugin-react": "^6.0.0",
@@ -93,7 +94,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-easy-crop": "^5.5.6",
-    "react-helmet": "^6.1.0",
     "react-immutable-proptypes": "^2.2.0",
     "react-immutable-pure-component": "^2.2.2",
     "react-intl": "^10.0.0",
@@ -151,7 +151,6 @@
     "@types/punycode": "^2.1.0",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
-    "@types/react-helmet": "^6.1.6",
     "@types/react-immutable-proptypes": "^2.1.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",