refactor: one context to rule them all

dotcom-rendering/.storybook/decorators/renderingContextDecorator.js

@@ -0,0 +1,19 @@
+import { RenderingContext } from '../../src/components/RenderingContext';
+
+const defaultContext = { target: 'Web' };
+
+export const RenderingContextDecorator = (
+	Story,
+	{ args: { renderingContext } },
+) => {
+	const context = { ...defaultContext, ...renderingContext };
+
+	// For easy debugging
+	console.log('Storybook rendering context: \n', context);
+
+	return (
+		<RenderingContext.Provider value={context}>
+			<Story />
+		</RenderingContext.Provider>
+	);
+};

dotcom-rendering/.storybook/preview.js

@@ -12,6 +12,7 @@ import { Lazy } from '../src/components/Lazy';
 import { Picture } from '../src/components/Picture';
 import { mockRESTCalls } from '../src/lib/mockRESTCalls';
 import { setABTests } from '../src/lib/useAB';
+import { RenderingContextDecorator } from './decorators/renderingContextDecorator';
 
 // Prevent components being lazy rendered when we're taking Chromatic snapshots
 Lazy.disabled = isChromatic();
@@ -139,10 +140,17 @@ const guardianViewports = {
 /** @type {import('@storybook/react').Preview} */
 export default {
 	decorators: [
-		(Story) => {
-			storage.local.clear();
-			return Story();
-		},
+		RenderingContextDecorator,
+		// (Story) => {
+		// 	<>
+		// 		<h1>HELLO!</h1>
+		// 		<Story />
+		// 	</>;
+		// },
+		// (Story) => {
+		// 	storage.local.clear();
+		// 	return Story();
+		// },
 	],
 };
 

dotcom-rendering/src/components/ArticleMeta.stories.tsx

@@ -90,6 +90,32 @@ export const ArticleStory = () => {
 	);
 };
 
+export const ArticleAppsStory = () => {
+	return (
+		<Wrapper>
+			<ArticleMeta
+				format={{
+					display: ArticleDisplay.Standard,
+					design: ArticleDesign.Standard,
+					theme: Pillar.News,
+				}}
+				pageId=""
+				webTitle=""
+				byline="Lanre Bakare"
+				tags={tagsWithLargeBylineImage}
+				primaryDateline="Sun 12 Jan 2020 18.00 GMT"
+				secondaryDateline="Last modified on Sun 12 Jan 2020 21.00 GMT"
+				isCommentable={false}
+				discussionApiUrl=""
+				shortUrlId=""
+				ajaxUrl=""
+				showShareCount={true}
+			/>
+		</Wrapper>
+	);
+};
+ArticleAppsStory.args = { renderingContext: { target: 'Apps' } };
+
 export const BrandingStory = () => {
 	return (
 		<Wrapper>

dotcom-rendering/src/components/BylineLink.tsx

@@ -8,7 +8,7 @@ import {
 import type { TagType } from '../types/tag';
 import { FollowWrapper } from './FollowWrapper.importable';
 import { Island } from './Island';
-import { RenderingTargetContext } from './RenderingTarget';
+import { RenderingContext } from './RenderingContext';
 
 type Props = {
 	byline: string;
@@ -132,13 +132,12 @@ export const BylineLink = ({ byline, tags, format }: Props) => {
 		);
 	});
 
-	const renderingTargetContext = useContext(RenderingTargetContext);
+	const { target } = useContext(RenderingContext);
 
 	return (
 		<>
 			{renderedTokens}
-			{renderingTargetContext === 'Apps' &&
-			soleContributor !== undefined ? (
+			{target === 'Apps' && soleContributor !== undefined ? (
 				<Island>
 					<FollowWrapper
 						displayName={soleContributor.title}

dotcom-rendering/src/components/RenderingContext.tsx

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import type { RenderingContextType } from '../types/renderingContext';
+
+/** Represents the initial or default value for the app context */
+const defaultContext: RenderingContextType = {
+	target: 'Web',
+};
+
+/**
+ * Context for global, static values (generic)
+ *
+ * This should not contain anything which will change between re-renders
+ */
+export const RenderingContext =
+	createContext<RenderingContextType>(defaultContext);

dotcom-rendering/src/lib/ArticleRenderer.tsx

@@ -3,7 +3,7 @@ import type { ArticleFormat } from '@guardian/libs';
 import { ArticleDesign } from '@guardian/libs';
 import { useContext } from 'react';
 import { adContainerStyles } from '../components/AdSlot';
-import { RenderingTargetContext } from '../components/RenderingTarget';
+import { RenderingContext } from '../components/RenderingContext';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import type { ServerSideTests, Switches } from '../types/config';
 import type { FEElement } from '../types/content';
@@ -85,7 +85,7 @@ export const ArticleRenderer = ({
 		);
 	});
 
-	const renderingTargetContext = useContext(RenderingTargetContext);
+	const { target } = useContext(RenderingContext);
 
 	// const cleanedElements = elements.map(element =>
 	//     'html' in element ? { ...element, html: clean(element.html) } : element,
@@ -106,7 +106,7 @@ export const ArticleRenderer = ({
 			].join(' ')}
 			css={[adStylesDynamic, commercialPosition]}
 		>
-			{renderingTargetContext === 'Apps'
+			{target === 'Apps'
 				? renderedElements
 				: /* Insert the placeholder for the sign in gate on the 2nd article element */
 				  withSignInGateSlot({

dotcom-rendering/src/server/render.article.apps.tsx

@@ -1,11 +1,12 @@
 import { isString } from '@guardian/libs';
 import { ArticlePage } from '../components/ArticlePage';
-import { RenderingTargetContext } from '../components/RenderingTarget';
+import { RenderingContext } from '../components/RenderingContext';
 import { generateScriptTags, getPathFromManifest } from '../lib/assets';
 import { decideFormat } from '../lib/decideFormat';
 import { renderToStringWithEmotion } from '../lib/emotion';
 import { createGuardian } from '../model/guardian';
 import type { FEArticleType } from '../types/frontend';
+import type { RenderingContextType } from '../types/renderingContext';
 import { htmlPageTemplate } from './htmlPageTemplate';
 
 export const renderArticle = (
@@ -16,14 +17,16 @@ export const renderArticle = (
 } => {
 	const format: ArticleFormat = decideFormat(article.format);
 
+	const renderingContext: RenderingContextType = { target: 'Apps' };
+
 	const { html, extractedCss } = renderToStringWithEmotion(
-		<RenderingTargetContext.Provider value="Apps">
+		<RenderingContext.Provider value={renderingContext}>
 			<ArticlePage
 				format={format}
 				article={article}
 				renderingTarget="Apps"
 			/>
-		</RenderingTargetContext.Provider>,
+		</RenderingContext.Provider>,
 	);
 
 	const clientScripts = [getPathFromManifest('apps', 'index.js')];

dotcom-rendering/src/server/render.article.web.tsx

@@ -2,7 +2,7 @@ import { ArticleDesign, isString, Pillar } from '@guardian/libs';
 import { ArticlePage } from '../components/ArticlePage';
 import { isAmpSupported } from '../components/Elements.amp';
 import { KeyEventsContainer } from '../components/KeyEventsContainer';
-import { RenderingTargetContext } from '../components/RenderingTarget';
+import { RenderingContext } from '../components/RenderingContext';
 import {
 	ASSET_ORIGIN,
 	generateScriptTags,
@@ -21,6 +21,7 @@ import { extractNAV } from '../model/extract-nav';
 import { createGuardian as createWindowGuardian } from '../model/guardian';
 import type { FEElement } from '../types/content';
 import type { FEArticleType, FEBlocksRequest } from '../types/frontend';
+import type { RenderingContextType } from '../types/renderingContext';
 import type { TagType } from '../types/tag';
 import { htmlPageTemplate } from './htmlPageTemplate';
 
@@ -48,15 +49,17 @@ export const renderHtml = ({
 
 	const format: ArticleFormat = decideFormat(article.format);
 
+	const renderingContext: RenderingContextType = { target: 'Web' };
+
 	const { html, extractedCss } = renderToStringWithEmotion(
-		<RenderingTargetContext.Provider value="Web">
+		<RenderingContext.Provider value={renderingContext}>
 			<ArticlePage
 				format={format}
 				article={article}
 				NAV={NAV}
 				renderingTarget="Web"
 			/>
-		</RenderingTargetContext.Provider>,
+		</RenderingContext.Provider>,
 	);
 
 	// We want to only insert script tags for the elements or main media elements on this page view

dotcom-rendering/src/types/renderingContext.ts

@@ -0,0 +1,10 @@
+import type { RenderingTarget } from './renderingTarget';
+
+/**
+ * Context for global values (generic)
+ *
+ * This should not contain any properties which are likely to change between re-renders
+ */
+export interface RenderingContextType {
+	target: RenderingTarget;
+}