Adding bottleneck vanilla test sites: number of elements, middleware,…

… and number of data requests. This includes visual functionality as elements are rendered and requests are fulfilled.

packages/react-server-test-pages/entrypoints.js

@@ -49,4 +49,16 @@ module.exports = {
 		entry: "/error/logs",
 		description: "Generate errors in the logs",
 	},
+	BottleneckElements: {
+		entry: "/bottleneck/elements",
+		description: "Test if number of elements on a page is a bottleneck",
+	},
+	BottleneckDataRequests: {
+		entry: "/bottleneck/dataRequests",
+		description: "Test if number of data requests on a page is a bottleneck",
+	},
+	BottleneckMiddleware: {
+		entry: "/bottleneck/middleware",
+		description: "Test if amount of middleware on a page is a bottleneck",
+	},
 }

packages/react-server-test-pages/pages/bottleneck/colors/blue.scss

@@ -0,0 +1,5 @@
+$blueish: blue;
+
+.blue-thing {
+	background-color: $blueish;
+}

packages/react-server-test-pages/pages/bottleneck/colors/green.scss

@@ -0,0 +1,5 @@
+$greenish: green;
+
+.green-thing {
+	background-color: $greenish;
+}

packages/react-server-test-pages/pages/bottleneck/colors/indigo.scss

@@ -0,0 +1,5 @@
+$indigoish: indigo;
+
+.indigo-thing {
+	background-color: $indigoish;
+}

packages/react-server-test-pages/pages/bottleneck/colors/orange.scss

@@ -0,0 +1,5 @@
+$orangeish: orange;
+
+.orange-thing {
+	background-color: $orangeish;
+}

packages/react-server-test-pages/pages/bottleneck/colors/purple.scss

@@ -0,0 +1,5 @@
+$purpleish: purple;
+
+.purple-thing {
+	background-color: $purpleish;
+}

packages/react-server-test-pages/pages/bottleneck/colors/red.scss

@@ -0,0 +1,5 @@
+$reddish: red;
+
+.red-thing {
+	background-color: $reddish;
+}

packages/react-server-test-pages/pages/bottleneck/colors/yellow.scss

@@ -0,0 +1,5 @@
+$yellowish: yellow;
+
+.yellow-thing {
+	background-color: $yellowish;
+}

packages/react-server-test-pages/pages/bottleneck/dataRequests.js

@@ -0,0 +1,35 @@
+import {ReactServerAgent, RootContainer, RootElement} from "react-server";
+import "./colors/red.scss";
+import "./colors/green.scss";
+
+const elements = [];
+/**
+* This page is a smoke test to determine whether or not the number of data requests in
+* a page is a performance bottleneck for react-server. It performs a thousand data
+* requests before returning a simple message. Metrics are created in the browser's console
+* related to performance metrics (see react-server.core.ClientController).
+*/
+export default class DataRequestsPage {
+
+	handleRoute() {
+		//Reset elements, then perform one thousand local data requests before returning
+		elements.length = 0;
+		for (var i = 1; i <= 1000; i++) {
+			let current = i;
+			let promise = ReactServerAgent.get('/data/delay')
+				.then(response => response.body);
+			elements.push(<RootElement when={promise}><div>Data request {current} complete.</div></RootElement>);
+		}
+		return { code: 200 };
+	}
+
+	getElements() {
+		return [
+			<div className="red-thing">Data requests starting...</div>,
+			<RootContainer>
+				{elements}
+			</RootContainer>,
+			<div className="green-thing">Content should be above me.</div>,
+		];
+	}
+}

packages/react-server-test-pages/pages/bottleneck/elements.js

@@ -0,0 +1,39 @@
+import "./colors/red.scss";
+import "./colors/blue.scss";
+import "./colors/purple.scss";
+import "./colors/green.scss";
+import "./colors/orange.scss";
+import "./colors/indigo.scss";
+import "./colors/yellow.scss";
+
+const RedThing = () => <div className="red-thing">This should be red</div>;
+const BlueThing = () => <div className="blue-thing">This should be blue</div>;
+const PurpleThing = () => <div className="purple-thing">This should be purple</div>;
+const GreenThing = () => <div className="green-thing">This should be green</div>;
+const OrangeThing = () => <div className="orange-thing">This should be orange</div>;
+const IndigoThing = () => <div className="indigo-thing">This should be indigo</div>;
+const YellowThing = () => <div className="yellow-thing">This should be yellow</div>;
+const ColorWheel = [RedThing(), BlueThing(), PurpleThing(), GreenThing(),
+	OrangeThing(), IndigoThing(), YellowThing()];
+const ColorSize = ColorWheel.length;
+
+/**
+* This page is a smoke test to determine whether or not the number of elements in
+* a page is a performance bottleneck for react-server. It returns a huge assortment of
+* randomly generated color-coded elements. Metrics are created in the browser's console
+* related to performance metrics (see react-server.core.ClientController).
+*/
+export default class ElementsPage {
+
+	getElements() {
+
+		const colorThings = [];
+		for (var i = 0; i < 10000; i++) {
+			// Select a random element from the colors of the rainbow
+			let selection = Math.floor(Math.random() * ColorSize);
+			colorThings.push(ColorWheel[selection]);
+		};
+
+		return (colorThings);
+	}
+}

packages/react-server-test-pages/pages/bottleneck/middleware.js

@@ -0,0 +1,20 @@
+import TestMiddleware from './test-middleware/TestMiddleware'
+import _ from "lodash";
+
+/**
+* This page is a smoke test to determine whether or not the amount of middleware in
+* a page is a performance bottleneck for react-server. It has a middleware chain of
+* 1k copies of TestMiddleware, and the response is returned after this chain.
+* Note that all that is done within the middleware itself is a small string being appended
+* to the response. After the response is generated, the page is complete.
+*/
+export default class MiddlewarePage {
+
+	static middleware() {
+		return _.range(1000).map(() => TestMiddleware);
+	}
+
+	getResponseData() {
+		return "";
+	}
+}

packages/react-server-test-pages/pages/bottleneck/test-middleware/TestMiddleware.js

@@ -0,0 +1,18 @@
+export default class TestMiddleware {
+
+	setConfigValues() {
+		return { isRawResponse: true };
+	}
+
+	getContentType() {
+		return 'text/plain';
+	}
+
+	handleRoute(next) {
+		return next();
+	}
+
+	getResponseData(next) {
+		return next().then(data => data + "Middleware iteration succeeded.\r\n");
+	}
+}