let users control replacements / page body

A "replacer" is a reducer which is called with the page content and
returns the page content. A replacer can:

- alter the base href for certain user-agents
- replace text in the body template
- omitting script when a header is set
- etc.

For example, omitting javascript for Internet Explorer:

```js
// handler before sapper middleware
(req, res, next) => {
        if (req.get('user-agent').toLowerCase().includes("msie")) {
                res.replacers = res.replacers || []
                res.replacers.push((ctx) => (ctx.script = "", ctx))
        }
        next()
}
```

or inserting a footer notice on unsupported browsers:

```js
(req, res, next) => {
        // matchesUA: https://github.com/browserslist/browserslist-useragent
        if (!matchesUA(req.get('user-agent'))) {
                res.replacers = res.replacers || []
                res.replacers.push((ctx) => (ctx.body.replace(/<\/body>/, `${unsupportedBrowserNotice}</body>`), ctx))
        }
        next()
}
```

Replacers are run in the order they are defined. System replacers will
run last in order:

→ base href
→ head
→ styles
→ html
→ script.

Author: arve0

runtime/src/server/middleware/get_page_handler.ts

@@ -5,7 +5,7 @@ import cookie from 'cookie';
 import devalue from 'devalue';
 import fetch from 'node-fetch';
 import URL from 'url';
-import { Manifest, Page, Req, Res } from './types';
+import { Manifest, Page, Req, Res, PageContentReducer, PageContent } from './types';
 import { build_dir, dev, src_dir } from '@sapper/internal/manifest-server';
 import App from '@sapper/internal/App.svelte';
 
@@ -320,15 +320,29 @@ export function get_page_handler(
 			// users can set a CSP nonce using res.locals.nonce
 			const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
 
-			const body = template()
-				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
-				.replace('%sapper.scripts%', () => `<script${nonce_attr}>${script}</script>`)
-				.replace('%sapper.html%', () => html)
-				.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
-				.replace('%sapper.styles%', () => styles);
+			let replacers: PageContentReducer[] = res.replacers || [];
+			replacers = replacers.concat([
+				(ctx) => (ctx.body = ctx.body.replace('%sapper.base%', `<base href="${ctx.baseUrl}/">`), ctx),
+				(ctx) => (ctx.body = ctx.body.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${ctx.head}<noscript id='sapper-head-end'></noscript>`), ctx),
+				(ctx) => (ctx.body = ctx.body.replace('%sapper.styles%', ctx.styles), ctx),
+				(ctx) => (ctx.body = ctx.body.replace('%sapper.html%', ctx.html), ctx),
+				(ctx) => (ctx.body = ctx.body.replace('%sapper.scripts%', `<script${ctx.nonce_attr}>${ctx.script}</script>`), ctx),
+			]);
+
+			const pageContent = replacers.reduce((ctx: PageContent, replace: PageContentReducer) => replace(ctx),
+				{
+					body: template(),
+					baseUrl: req.baseUrl,
+					head,
+					html,
+					nonce_attr,
+					script,
+					styles
+				}
+			)
 
 			res.statusCode = status;
-			res.end(body);
+			res.end(pageContent.body);
 		} catch(err) {
 			if (error) {
 				bail(req, res, err)

runtime/src/server/middleware/types.ts

@@ -60,4 +60,16 @@ interface Component {
 		css: { code: string, map: any };
 		html: string
 	}
-}
+}
+
+export interface PageContent {
+	body: string,
+	baseUrl: string,
+	head: string,
+	styles: string,
+	html: string,
+	nonce_attr: string,
+	script: string,
+}
+
+export type PageContentReducer = (context: PageContent) => PageContent;