Skip to content

Commit 18bdeaf

Browse files
nbudinnbudin
committed
Remove Helmet because React 19 does it automatically
1 parent dba4ec7 commit 18bdeaf

File tree

6 files changed

+46
-76
lines changed

6 files changed

+46
-76
lines changed

‎app/javascript/AppRootLayout.tsx‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import React, { useEffect, useMemo, useState } from 'react';
1+
import { useEffect, useMemo, useState } from 'react';
22
import { LoaderFunction, useLoaderData } from 'react-router';
33
import parseCmsContent, { CMS_COMPONENT_MAP } from './parseCmsContent';
44
import OutletWithLoading from './OutletWithLoading';
55
import NavigationBar from './NavigationBar';
6-
import { ScriptTag } from './parsePageContent';
76
import { PageLoadingIndicator } from '@neinteractiveliterature/litform';
8-
import { Helmet } from 'react-helmet-async';
97
import { client } from './useIntercodeApolloClient';
108
import { AppRootLayoutQueryData, AppRootLayoutQueryDocument } from './appRootQueries.generated';
119

@@ -48,25 +46,6 @@ function AppRootLayout() {
4846
});
4947
}, [data.cmsParentByRequestHost.effectiveCmsLayout.content_html]);
5048

51-
const [headComponentsWithoutScriptTags, headScriptTags] = useMemo(() => {
52-
if (parsedCmsContent?.headComponents == null) {
53-
return [[], []];
54-
}
55-
56-
const nonScriptTags: React.ReactNode[] = [];
57-
const scriptTags: React.ReactNode[] = [];
58-
59-
React.Children.forEach(parsedCmsContent.headComponents, (child) => {
60-
if (React.isValidElement(child) && child.type === ScriptTag) {
61-
scriptTags.push(child);
62-
} else {
63-
nonScriptTags.push(child);
64-
}
65-
});
66-
67-
return [nonScriptTags, scriptTags];
68-
}, [parsedCmsContent?.headComponents]);
69-
7049
useEffect(() => {
7150
if (cachedCmsLayoutId !== data.cmsParentByRequestHost.effectiveCmsLayout.id) {
7251
if (cachedCmsLayoutId) {
@@ -89,9 +68,8 @@ function AppRootLayout() {
8968

9069
return (
9170
<>
92-
<Helmet>{headComponentsWithoutScriptTags}</Helmet>
93-
{headScriptTags}
94-
{parsedCmsContent?.bodyComponents}
71+
{parsedCmsContent.headComponents}
72+
{parsedCmsContent.bodyComponents}
9573
</>
9674
);
9775
}

‎app/javascript/AppWrapper.tsx‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
ErrorDisplay,
1515
ToastProvider,
1616
} from '@neinteractiveliterature/litform';
17-
import { HelmetProvider } from 'react-helmet-async';
1817

1918
import AuthenticationModalContext, {
2019
useAuthenticationModalProvider,
@@ -79,35 +78,33 @@ function ProviderStack(props: AppWrapperProps) {
7978

8079
return (
8180
<ApolloProvider client={client}>
82-
<HelmetProvider>
83-
{/* TODO bring this back when we re-add prompting getUserConfirmation={getUserConfirmation}> */}
84-
<RailsDirectUploadsContext.Provider value={railsDirectUploadsContextValue}>
85-
<AuthenticationModalContext.Provider value={authenticationModalContextValue}>
86-
<>
87-
{!unauthenticatedError && (
88-
<Suspense fallback={<PageLoadingIndicator visible iconSet="bootstrap-icons" />}>
89-
<I18NextWrapper>
90-
{(i18nInstance) => (
91-
<AlertProvider okText={i18nInstance.t('buttons.ok', 'OK')}>
92-
<ToastProvider
93-
formatTimeAgo={(timeAgo) =>
94-
DateTime.now().minus(Duration.fromMillis(timeAgo.milliseconds)).toRelative()
95-
}
96-
>
97-
<ErrorBoundary placement="replace" errorType="plain">
98-
<Outlet />
99-
</ErrorBoundary>
100-
</ToastProvider>
101-
</AlertProvider>
102-
)}
103-
</I18NextWrapper>
104-
</Suspense>
105-
)}
106-
<AuthenticationModal />
107-
</>
108-
</AuthenticationModalContext.Provider>
109-
</RailsDirectUploadsContext.Provider>
110-
</HelmetProvider>
81+
{/* TODO bring this back when we re-add prompting getUserConfirmation={getUserConfirmation}> */}
82+
<RailsDirectUploadsContext.Provider value={railsDirectUploadsContextValue}>
83+
<AuthenticationModalContext.Provider value={authenticationModalContextValue}>
84+
<>
85+
{!unauthenticatedError && (
86+
<Suspense fallback={<PageLoadingIndicator visible iconSet="bootstrap-icons" />}>
87+
<I18NextWrapper>
88+
{(i18nInstance) => (
89+
<AlertProvider okText={i18nInstance.t('buttons.ok', 'OK')}>
90+
<ToastProvider
91+
formatTimeAgo={(timeAgo) =>
92+
DateTime.now().minus(Duration.fromMillis(timeAgo.milliseconds)).toRelative()
93+
}
94+
>
95+
<ErrorBoundary placement="replace" errorType="plain">
96+
<Outlet />
97+
</ErrorBoundary>
98+
</ToastProvider>
99+
</AlertProvider>
100+
)}
101+
</I18NextWrapper>
102+
</Suspense>
103+
)}
104+
<AuthenticationModal />
105+
</>
106+
</AuthenticationModalContext.Provider>
107+
</RailsDirectUploadsContext.Provider>
111108
</ApolloProvider>
112109
);
113110
}

‎app/javascript/BuiltInForms/FileUploadForm.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import FileInputWithPreview from '../CmsAdmin/CmsFilesAdmin/FileInputWithPreview
88
import { DirectUpload, DirectUploadDelegate, Blob } from '@rails/activestorage';
99
import RailsDirectUploadsContext from '../RailsDirectUploadsContext';
1010
import classNames from 'classnames';
11-
import { Helmet } from 'react-helmet-async';
1211
import AuthenticityTokensManager from '../AuthenticityTokensContext';
1312

1413
function uploadFile(file: File, directUploadURL: string, onProgress?: (event: ProgressEvent<XMLHttpRequest>) => void) {
@@ -72,10 +71,8 @@ function FileUploadForm({ onUpload }: FileUploadFormProps): React.JSX.Element {
7271
<div className="card">
7372
<div className="card-header">{t('cms.fileUploadForm.title')}</div>
7473
<div className="card-body">
75-
<Helmet>
76-
{/* ActiveStorage JS requires us to put the csrf token in the head */}
77-
<meta name="csrf-token" content={directUploadsAuthenticityToken} />
78-
</Helmet>
74+
{/* ActiveStorage JS requires us to put the csrf token in the head */}
75+
<meta name="csrf-token" content={directUploadsAuthenticityToken} />
7976
<FileInputWithPreview file={file} onChange={setFile} disabled={uploading} />
8077

8178
<ErrorDisplay graphQLError={error as ApolloError} />

‎app/javascript/parsePageContent.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,10 @@ function jsxAttributeKeyForHtmlKey(htmlKey: string) {
128128
return 'htmlFor';
129129
}
130130

131+
if (key === 'onload') {
132+
return 'onLoad';
133+
}
134+
131135
return key;
132136
}
133137

@@ -140,6 +144,15 @@ function jsxAttributesFromHTMLAttributes(node: Element, attributes: Attr[]) {
140144
return { ...result, [key]: createStyleJsonFromString(attribute.value) };
141145
}
142146

147+
if (key === 'onLoad') {
148+
return {
149+
...result,
150+
[key]: () => {
151+
eval(attribute.value);
152+
},
153+
};
154+
}
155+
143156
try {
144157
testingNode.setAttribute(key, attribute.value ?? attribute.name);
145158
} catch {

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@
132132
"react-cookie-consent": "9.0.0",
133133
"react-dom": "19.1.1",
134134
"react-google-recaptcha": "3.1.0",
135-
"react-helmet-async": "2.0.5",
136135
"react-html-id": "0.1.5",
137136
"react-i18next": "15.6.1",
138137
"react-onclickoutside": "6.13.2",

‎yarn.lock‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20527,7 +20527,7 @@ __metadata:
2052720527
languageName: node
2052820528
linkType: hard
2052920529

20530-
"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
20530+
"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.2.0":
2053120531
version: 3.2.2
2053220532
resolution: "react-fast-compare@npm:3.2.2"
2053320533
checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
@@ -20546,19 +20546,6 @@ __metadata:
2054620546
languageName: node
2054720547
linkType: hard
2054820548

20549-
"react-helmet-async@npm:2.0.5":
20550-
version: 2.0.5
20551-
resolution: "react-helmet-async@npm:2.0.5"
20552-
dependencies:
20553-
invariant: "npm:^2.2.4"
20554-
react-fast-compare: "npm:^3.2.2"
20555-
shallowequal: "npm:^1.1.0"
20556-
peerDependencies:
20557-
react: ^16.6.0 || ^17.0.0 || ^18.0.0
20558-
checksum: 10c0/f390ea8bf13c2681850e5f8eb5b73d8613f407c245a5fd23e9db9b2cc14a3700dd1ce992d3966632886d1d613083294c2aeee009193f49dfa7d145d9f13ea2b0
20559-
languageName: node
20560-
linkType: hard
20561-
2056220549
"react-helmet-async@npm:@slorber/[email protected]":
2056320550
version: 1.3.0
2056420551
resolution: "@slorber/react-helmet-async@npm:1.3.0"
@@ -21796,7 +21783,6 @@ __metadata:
2179621783
react-cookie-consent: "npm:9.0.0"
2179721784
react-dom: "npm:19.1.1"
2179821785
react-google-recaptcha: "npm:3.1.0"
21799-
react-helmet-async: "npm:2.0.5"
2180021786
react-html-id: "npm:0.1.5"
2180121787
react-i18next: "npm:15.6.1"
2180221788
react-onclickoutside: "npm:6.13.2"

0 commit comments

Comments
 (0)