Spike: Rendering mobile-apps content with DCR

dotcom-rendering/package.json

@@ -63,6 +63,7 @@
 		"@babel/preset-typescript": "^7.12.7",
 		"@babel/runtime": "^7.12.5",
 		"@braze/web-sdk-core": "3.5.1",
+		"@creditkarma/thrift-server-core": "^1.0.4",
 		"@cypress/skip-test": "^2.6.0",
 		"@emotion/babel-plugin": "^11.3.0",
 		"@emotion/cache": "^11.4.0",
@@ -71,6 +72,7 @@
 		"@guardian/ab-core": "^2.0.0",
 		"@guardian/atoms-rendering": "^24.0.0",
 		"@guardian/braze-components": "^8.1.3",
+		"@guardian/bridget": "^2.0.0",
 		"@guardian/browserslist-config": "^2.0.3",
 		"@guardian/commercial-core": "^5.0.0",
 		"@guardian/consent-management-platform": "11.0.0",
@@ -151,6 +153,7 @@
 		"babel-plugin-polyfill-corejs3": "^0.6.0",
 		"babel-plugin-px-to-rem": "https://github.com/guardian/babel-plugin-px-to-rem#v0.1.0",
 		"babel-plugin-transform-runtime": "^6.23.0",
+		"buffer": "^6.0.3",
 		"browserslist": "^4.21.4",
 		"bundlesize": "^0.18.1",
 		"chalk": "^4.1.0",

dotcom-rendering/scripts/webpack/webpack.config.browser.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const swcConfig = require('./.swcrc.json');
 const { getBrowserTargets } = require('./browser-targets');
@@ -15,7 +16,7 @@ const generateName = (bundle) => {
 };
 
 /**
- * @param {'legacy' | 'modern' | 'variant'} bundle
+ * @param {'legacy' | 'modern' | 'variant' | 'apps'} bundle
  * @returns {string}
  */
 const getLoaders = (bundle) => {
@@ -48,6 +49,32 @@ const getLoaders = (bundle) => {
 					},
 				},
 			];
+		case 'apps':
+			return [
+				{
+					loader: 'babel-loader',
+					options: {
+						presets: [
+							'@babel/preset-react',
+							[
+								'@babel/preset-env',
+								{
+									bugfixes: true,
+									targets: ['android >= 5', 'ios >= 12'],
+								},
+							],
+						],
+						compact: true,
+					},
+				},
+				{
+					loader: 'ts-loader',
+					options: {
+						configFile: 'tsconfig.build.json',
+						transpileOnly: true,
+					},
+				},
+			];
 		case 'variant':
 			return [
 				{
@@ -93,25 +120,28 @@ const getLoaders = (bundle) => {
 };
 
 /**
- * @param {{ bundle: 'legacy' | 'modern'  | 'variant', sessionId: string }} options
+ * @param {{ bundle: 'legacy' | 'modern' | 'apps' | 'variant', sessionId: string }} options
  * @returns {import('webpack').Configuration}
  */
 module.exports = ({ bundle, sessionId }) => ({
-	entry: {
-		sentryLoader: './src/web/browser/sentryLoader/init.ts',
-		bootCmp: './src/web/browser/bootCmp/init.ts',
-		ga: './src/web/browser/ga/init.ts',
-		ophan: './src/web/browser/ophan/init.ts',
-		islands: './src/web/browser/islands/init.ts',
-		dynamicImport: './src/web/browser/dynamicImport/init.ts',
-		atomIframe: './src/web/browser/atomIframe/init.ts',
-		embedIframe: './src/web/browser/embedIframe/init.ts',
-		newsletterEmbedIframe:
-			'./src/web/browser/newsletterEmbedIframe/init.ts',
-		relativeTime: './src/web/browser/relativeTime/init.ts',
-		initDiscussion: './src/web/browser/initDiscussion/init.ts',
-		debug: './src/web/browser/debug/init.ts',
-	},
+	entry:
+		bundle === 'apps'
+			? './src/app/client/init.ts'
+			: {
+					sentryLoader: './src/web/browser/sentryLoader/init.ts',
+					bootCmp: './src/web/browser/bootCmp/init.ts',
+					ga: './src/web/browser/ga/init.ts',
+					ophan: './src/web/browser/ophan/init.ts',
+					islands: './src/web/browser/islands/init.ts',
+					dynamicImport: './src/web/browser/dynamicImport/init.ts',
+					atomIframe: './src/web/browser/atomIframe/init.ts',
+					embedIframe: './src/web/browser/embedIframe/init.ts',
+					newsletterEmbedIframe:
+						'./src/web/browser/newsletterEmbedIframe/init.ts',
+					relativeTime: './src/web/browser/relativeTime/init.ts',
+					initDiscussion: './src/web/browser/initDiscussion/init.ts',
+					debug: './src/web/browser/debug/init.ts',
+			  },
 	output: {
 		filename: (data) => {
 			// We don't want to hash the debug script so it can be used in bookmarklets
@@ -121,10 +151,28 @@ module.exports = ({ bundle, sessionId }) => ({
 		chunkFilename: generateName(bundle),
 		publicPath: '',
 	},
+	resolve:
+		bundle === 'apps'
+			? {
+					fallback: {
+						buffer: require.resolve('buffer/'),
+					},
+			  }
+			: undefined,
 	plugins: [
 		new WebpackManifestPlugin({
 			fileName: `manifest.${bundle}.json`,
 		}),
+		...(bundle === 'apps'
+			? [
+					new webpack.optimize.LimitChunkCountPlugin({
+						maxChunks: 1,
+					}),
+					new webpack.ProvidePlugin({
+						Buffer: ['buffer', 'Buffer'],
+					}),
+			  ]
+			: []),
 		...(DEV
 			? [
 					new GuStatsReportPlugin({

dotcom-rendering/scripts/webpack/webpack.config.js

@@ -19,7 +19,7 @@ const sessionId = uuidv4();
 let builds = 0;
 
 /**
- * @param {{ platform: 'server' | 'browser.legacy' | 'browser.modern' | 'browser.variant'}} options
+ * @param {{ platform: 'server' | 'browser.legacy' | 'browser.modern' | 'browser.apps' | 'browser.variant'}} options
  * @returns {import('webpack').Configuration}
  */
 const commonConfigs = ({ platform }) => ({
@@ -131,6 +131,15 @@ module.exports = [
 			sessionId,
 		}),
 	),
+	merge(
+		commonConfigs({
+			platform: 'browser.apps',
+		}),
+		require(`./webpack.config.browser`)({
+			bundle: 'apps',
+			sessionId,
+		}),
+	),
 	...(BUILD_VARIANT
 		? [
 				merge(

dotcom-rendering/src/app/client/init.ts

@@ -0,0 +1,7 @@
+import '../../web/browser/dynamicImport/init.ts';
+import '../../web/browser/islands/init.ts';
+import '../../web/browser/atomIframe/init.ts';
+import '../../web/browser/embedIframe/init.ts';
+import '../../web/browser/newsletterEmbedIframe/init.ts';
+import '../../web/browser/relativeTime/init.ts';
+// import '../../web/browser/initDiscussion/init.ts';

dotcom-rendering/src/app/components/ArticlePage.tsx

@@ -0,0 +1,70 @@
+import { css, Global } from '@emotion/react';
+import { ArticleDesign } from '@guardian/libs';
+import { brandAlt, focusHalo, neutral } from '@guardian/source-foundations';
+import { StrictMode } from 'react';
+// import { filterABTestSwitches } from '../../model/enhance-switches';
+import type { FEArticleType } from '../../types/frontend';
+import { FetchCommentCounts } from '../../web/components/FetchCommentCounts.importable';
+import { FocusStyles } from '../../web/components/FocusStyles.importable';
+import { Island } from '../../web/components/Island';
+// import { SetABTests } from './SetABTests.importable';
+import { SkipTo } from '../../web/components/SkipTo';
+import { DecideLayout } from '../layouts/DecideLayout';
+
+type Props = {
+	CAPIArticle: FEArticleType;
+	format: ArticleFormat;
+};
+
+/**
+ * @description
+ * Article is a high level wrapper for article pages on Dotcom. Sets strict mode and some globals
+ *
+ * @param {Props} props
+ * @param {FEArticleType} props.CAPIArticle - The article JSON data
+ * @param {NAVType} props.NAV - The article JSON data
+ * @param {ArticleFormat} props.format - The format model for the article
+ * */
+export const ArticlePage = ({ CAPIArticle, format }: Props) => {
+	return (
+		<StrictMode>
+			<Global
+				styles={css`
+					/* Crude but effective mechanism. Specific components may need to improve on this behaviour. */
+					/* The not(.src...) selector is to work with Source's FocusStyleManager. */
+					*:focus {
+						${focusHalo}
+					}
+					::selection {
+						background: ${brandAlt[400]};
+						color: ${neutral[7]};
+					}
+				`}
+			/>
+			<SkipTo id="maincontent" label="Skip to main content" />
+			{(format.design === ArticleDesign.LiveBlog ||
+				format.design === ArticleDesign.DeadBlog) && (
+				<SkipTo id={'key-events-carousel'} label="Skip to key events" />
+			)}
+			<Island clientOnly={true} deferUntil="idle">
+				<FocusStyles />
+			</Island>
+			{/* <Island clientOnly={true} deferUntil="idle">
+				<CoreVitals />
+			</Island> */}
+			<Island clientOnly={true} deferUntil="idle">
+				<FetchCommentCounts repeat={true} />
+			</Island>
+			{/* <Island clientOnly={true}>
+				<SetABTests
+					abTestSwitches={filterABTestSwitches(
+						CAPIArticle.config.switches,
+					)}
+					pageIsSensitive={CAPIArticle.config.isSensitive}
+					isDev={!!CAPIArticle.config.isDev}
+				/>
+			</Island> */}
+			<DecideLayout CAPIArticle={CAPIArticle} format={format} />
+		</StrictMode>
+	);
+};

dotcom-rendering/src/app/layouts/DecideLayout.tsx

@@ -0,0 +1,64 @@
+import { ArticleDesign, ArticleDisplay } from '@guardian/libs';
+import type { ArticleFormat } from '@guardian/libs';
+import type { FEArticleType } from '../../types/frontend';
+import { StandardLayout } from './StandardLayout';
+
+type Props = {
+	CAPIArticle: FEArticleType;
+	format: ArticleFormat;
+};
+
+export const DecideLayout = ({ CAPIArticle, format }: Props) => {
+	switch (format.display) {
+		case ArticleDisplay.Immersive: {
+			switch (format.design) {
+				case ArticleDesign.Interactive: {
+					return <div>Not Supported</div>;
+				}
+				default: {
+					return <div>Not Supported</div>;
+				}
+			}
+		}
+		case ArticleDisplay.NumberedList:
+		case ArticleDisplay.Showcase: {
+			switch (format.design) {
+				case ArticleDesign.LiveBlog:
+				case ArticleDesign.DeadBlog:
+					return <div>Not Supported</div>;
+				case ArticleDesign.Comment:
+				case ArticleDesign.Editorial:
+				case ArticleDesign.Letter:
+					return <div>Not Supported</div>;
+				default:
+					return <div>Not Supported</div>;
+			}
+		}
+		case ArticleDisplay.Standard:
+		default: {
+			switch (format.design) {
+				case ArticleDesign.Interactive:
+					return <div>Not Supported</div>;
+				case ArticleDesign.FullPageInteractive: {
+					return <div>Not Supported</div>;
+				}
+				case ArticleDesign.LiveBlog:
+				case ArticleDesign.DeadBlog:
+					return <div>Not Supported</div>;
+				case ArticleDesign.Comment:
+				case ArticleDesign.Editorial:
+				case ArticleDesign.Letter:
+					return <div>Not Supported</div>;
+				case ArticleDesign.NewsletterSignup:
+					return <div>Not Supported</div>;
+				default:
+					return (
+						<StandardLayout
+							CAPIArticle={CAPIArticle}
+							format={format}
+						/>
+					);
+			}
+		}
+	}
+};