trial using context for renderingTarget (#8704)

Author: cemms1

dotcom-rendering/.eslintrc.js

@@ -108,6 +108,8 @@ module.exports = {
 				ignoreNonDOM: true,
 			},
 		],
+		// We want to be careful with context and certainly avoid unnecessary re-renders
+		'react/jsx-no-constructed-context-values': 'error',
 
 		'@typescript-eslint/switch-exhaustiveness-check': 'error',
 		'array-callback-return': 'error',
@@ -171,6 +173,10 @@ module.exports = {
 	},
 	settings: {
 		'import/resolver': 'typescript',
+		react: {
+			// Tells eslint-plugin-react to automatically detect the version of React to use
+			version: 'detect',
+		},
 	},
 	overrides: [
 		{

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

@@ -0,0 +1,16 @@
+import { ConfigProvider } from '../../src/components/ConfigContext';
+
+const defaultConfig = { renderingTarget: 'Web' };
+
+export const ConfigContextDecorator = (Story, { args: { config } }) => {
+	const context = { ...defaultConfig, ...config };
+
+	// For easy debugging
+	console.log('Storybook application config: \n', context);
+
+	return (
+		<ConfigProvider value={context}>
+			<Story />
+		</ConfigProvider>
+	);
+};

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 { ConfigContextDecorator } from './decorators/configContextDecorator';
 
 // Prevent components being lazy rendered when we're taking Chromatic snapshots
 Lazy.disabled = isChromatic();
@@ -139,6 +140,7 @@ const guardianViewports = {
 /** @type {import('@storybook/react').Preview} */
 export default {
 	decorators: [
+		ConfigContextDecorator,
 		(Story) => {
 			storage.local.clear();
 			return Story();

dotcom-rendering/docs/architecture/028-react-context-api.md

@@ -0,0 +1,24 @@
+# React Context API
+
+## Context
+
+[A decision](dotcom-rendering/docs/architecture/016-react-context-api.md) was made in 2019 to avoid use of the React context API, preferring prop-drilling and avoiding global state.
+
+[This decision was revisited in 2023](https://github.com/guardian/dotcom-rendering/discussions/8696) due to [the introduction of rendering target as a prop](dotcom-rendering/docs/architecture/proposed-adrs/rendering-type.md) which represents a global state, resulting in very heavy prop-drilling throughout the app. This began to complicate pull requests due to so many unrelated changes appearing in the diff since the props needed to be provided at every layer of the app, as well as tightly coupling components unnecessarily.
+
+An RFC was put together [here](https://github.com/guardian/dotcom-rendering/pull/8704) to trial using the React context API for this specific type of global state, which doesn't change throughout the component lifecycle ie. immutable application configuration.
+
+## Decision
+
+The decision to allow use of context more generally rests on the following _"lines in the sand"_:
+
+-   Context should be considered **global, static, and immutable** for rendered components in dotcom-rendering.
+    -   It can be thought of as a type of configuration for our application.
+-   Context should **not be used for values that change between re-renders**, since this adds unnecessary complexity and there are alternative solutions for these cases.
+    -   There is a eslint rule to attempt to prevent this (`react/jsx-no-constructed-context-values`)
+-   Context should **only be used for React components** (ie. not for JSON responses or non-JSX helper code)
+    -   This is because the React context API will not work outside of React
+
+## Status
+
+Approved

…l review/000-technical-review-records.md …l-review/000-technical-review-records.mddotcom-rendering/docs/architecture/3rd party technical review/000-technical-review-records.md renamed to dotcom-rendering/docs/architecture/3rd-party-technical-review/000-technical-review-records.md dotcom-rendering/docs/architecture/3rd party technical review/000-technical-review-records.md renamed to dotcom-rendering/docs/architecture/3rd-party-technical-review/000-technical-review-records.md

@@ -15,4 +15,4 @@ the react context api to extract the `edition` property to prevent this.
 
 ## Status
 
-Approved
+Superseded by 028-react-context-api.md