sendReact takes node not component (#14292)

The current definition prevents any props being passed to the component.

Author: JamieB-gu

dotcom-rendering/src/devServer/routers/amp.ts renamed to dotcom-rendering/src/devServer/routers/amp.tsx

@@ -6,8 +6,8 @@ import { sendReact } from '../send';
 
 const amp = express.Router();
 
-amp.get('/', sendReact('AMP', Amp));
-amp.get('/article', sendReact('Article', Article));
-amp.get('/interactive', sendReact('Interactive', Interactive));
+amp.get('/', sendReact('AMP', <Amp />));
+amp.get('/article', sendReact('Article', <Article />));
+amp.get('/interactive', sendReact('Interactive', <Interactive />));
 
 export { amp };

dotcom-rendering/src/devServer/routers/dotcom.ts renamed to dotcom-rendering/src/devServer/routers/dotcom.tsx

@@ -15,26 +15,32 @@ import { sendReact } from '../send';
 
 const dotcom = Router();
 
-dotcom.get('/', sendReact('Dotcom', Dotcom));
-dotcom.get('/article', sendReact('Article', Article));
-dotcom.get('/front', sendReact('Front', Front));
-dotcom.get('/tag-page', sendReact('Tag Page', TagPage));
-dotcom.get('/interactive', sendReact('Interactive', Interactive));
-dotcom.get('/newsletters', sendReact('All Newsletters', Newsletters));
-dotcom.get('/football-live', sendReact('Football Live', FootballLive));
+dotcom.get('/', sendReact('Dotcom', <Dotcom />));
+dotcom.get('/article', sendReact('Article', <Article />));
+dotcom.get('/front', sendReact('Front', <Front />));
+dotcom.get('/tag-page', sendReact('Tag Page', <TagPage />));
+dotcom.get('/interactive', sendReact('Interactive', <Interactive />));
+dotcom.get('/newsletters', sendReact('All Newsletters', <Newsletters />));
+dotcom.get('/football-live', sendReact('Football Live', <FootballLive />));
 dotcom.get(
 	'/football-fixtures',
-	sendReact('Football Fixtures', FootballFixtures),
+	sendReact('Football Fixtures', <FootballFixtures />),
+);
+dotcom.get(
+	'/football-results',
+	sendReact('Football Results', <FootballResults />),
+);
+dotcom.get(
+	'/football-tables',
+	sendReact('Football Tables', <FootballTables />),
 );
-dotcom.get('/football-results', sendReact('Football Results', FootballResults));
-dotcom.get('/football-tables', sendReact('Football Tables', FootballTables));
 dotcom.get(
 	'/football-match-summary',
-	sendReact('Football Match Summary', FootballMatchSummary),
+	sendReact('Football Match Summary', <FootballMatchSummary />),
 );
 dotcom.get(
 	'/cricket-scorecard',
-	sendReact('Cricket Scorecard', CricketScorecard),
+	sendReact('Cricket Scorecard', <CricketScorecard />),
 );
 
 export { dotcom };

dotcom-rendering/src/devServer/routers/editionsApp.ts renamed to dotcom-rendering/src/devServer/routers/editionsApp.tsx

@@ -5,10 +5,10 @@ import { sendReact } from '../send';
 
 const editionsApp = express.Router();
 
-editionsApp.get('/', sendReact('Editions App', EditionsApp));
+editionsApp.get('/', sendReact('Editions App', <EditionsApp />));
 editionsApp.get(
 	'/crosswords',
-	sendReact('Editions Crosswords', EditionsCrosswords),
+	sendReact('Editions Crosswords', <EditionsCrosswords />),
 );
 
 export { editionsApp };

dotcom-rendering/src/devServer/routers/liveApps.ts renamed to dotcom-rendering/src/devServer/routers/liveApps.tsx

@@ -6,8 +6,8 @@ import { sendReact } from '../send';
 
 const liveApps = express.Router();
 
-liveApps.get('/', sendReact('Live Apps', LiveApps));
-liveApps.get('/article', sendReact('Article', Article));
-liveApps.get('/interactive', sendReact('Interactive', Interactive));
+liveApps.get('/', sendReact('Live Apps', <LiveApps />));
+liveApps.get('/article', sendReact('Article', <Article />));
+liveApps.get('/interactive', sendReact('Interactive', <Interactive />));
 
 export { liveApps };

dotcom-rendering/src/devServer/routers/pages.ts renamed to dotcom-rendering/src/devServer/routers/pages.tsx

@@ -16,30 +16,33 @@ import { sendReact } from '../send';
 
 const pages = Router();
 
-pages.get('/', sendReact('Pages', Pages));
-pages.get('/article', sendReact('Article', Article));
-pages.get('/front', sendReact('Front', Front));
-pages.get('/tag-page', sendReact('Tag Page', TagPage));
-pages.get('/interactive', sendReact('Interactive', Interactive));
-pages.get('/newsletters', sendReact('All Newsletters', Newsletters));
+pages.get('/', sendReact('Pages', <Pages />));
+pages.get('/article', sendReact('Article', <Article />));
+pages.get('/front', sendReact('Front', <Front />));
+pages.get('/tag-page', sendReact('Tag Page', <TagPage />));
+pages.get('/interactive', sendReact('Interactive', <Interactive />));
+pages.get('/newsletters', sendReact('All Newsletters', <Newsletters />));
 pages.get(
 	'/editions-crosswords',
-	sendReact('Editions Crosswords', EditionsCrosswords),
+	sendReact('Editions Crosswords', <EditionsCrosswords />),
 );
-pages.get('/football-live', sendReact('Football Live', FootballLive));
+pages.get('/football-live', sendReact('Football Live', <FootballLive />));
 pages.get(
 	'/football-fixtures',
-	sendReact('Football Fixtures', FootballFixtures),
+	sendReact('Football Fixtures', <FootballFixtures />),
 );
-pages.get('/football-results', sendReact('Football Results', FootballResults));
-pages.get('/football-tables', sendReact('Football Tables', FootballTables));
+pages.get(
+	'/football-results',
+	sendReact('Football Results', <FootballResults />),
+);
+pages.get('/football-tables', sendReact('Football Tables', <FootballTables />));
 pages.get(
 	'/football-match-summary',
-	sendReact('Football Match Summary', FootballMatchSummary),
+	sendReact('Football Match Summary', <FootballMatchSummary />),
 );
 pages.get(
 	'/cricket-scorecard',
-	sendReact('Cricket Scorecard', CricketScorecard),
+	sendReact('Cricket Scorecard', <CricketScorecard />),
 );
 
 export { pages };

dotcom-rendering/src/devServer/routers/targets.ts renamed to dotcom-rendering/src/devServer/routers/targets.tsx

@@ -8,7 +8,7 @@ import { liveApps } from './liveApps';
 
 const targets = Router();
 
-targets.get('/', sendReact('Targets', Targets));
+targets.get('/', sendReact('Targets', <Targets />));
 targets.use('/dotcom', dotcom);
 targets.use('/live-apps', liveApps);
 targets.use('/editions-app', editionsApp);

dotcom-rendering/src/devServer/send.tsx

@@ -1,15 +1,14 @@
 import path from 'node:path';
 import type { RequestHandler } from 'express';
-import type { FunctionComponent } from 'react';
+import type { ReactNode } from 'react';
 import { renderToPipeableStream } from 'react-dom/server';
 import { Doc } from './docs/doc';
 
-export const sendReact =
-	(title: string, Component: FunctionComponent): RequestHandler =>
-	(req, res) => {
+export function sendReact(title: string, node: ReactNode): RequestHandler {
+	return (req, res) => {
 		const element = (
 			<Doc title={title} path={path.join(req.baseUrl, req.path, '/')}>
-				<Component />
+				{node}
 			</Doc>
 		);
 
@@ -20,3 +19,4 @@ export const sendReact =
 			},
 		});
 	};
+}