user template replaces proposal

[arve0]

This PR gives the user control after page render, but before res.end, so that the HTML output can be altered. This can be handy to:

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

Multiple issues falls into this category, "let user control HTML output", like #657, #984, #1034, #1036, #1066, etc.

Today this is possible to some degree, by monkey-patching res.end(body), which is the last call in handle_page:

function (req, res, next) {
    if (req.get('user-agent').toLowerCase().includes("msie")) {
        let resEnd = res.end;

        res.end = function () {
            let body = arguments[0]
            if (typeof body === "string") {
                // absolute base href
                let base = `<base href="${req.protocol}://${req.get('host')}${req.baseUrl}/">`
                body = body.replace(/<base href="[^"]+">/, base)
                // do not send scripts
                body = body.replace(/<script.*\/script>/g, '')

                arguments[0] = body
            }

            resEnd.call(this, ...arguments)
        }
    }

    next()
},

Though, that may get clunky depending on your middleware call order.

This proposal spins of @vilarfg's #1037, but also lets the user:

• replace anything (replacing is not bound to %sapper.key%)
• override system replacers (by replacing %sapper.key% first)

Implementation
Before responding with the page, replace text in the page body with "replacers". A "replacer" is a reducer (TemplateReducer) which is called with the template body and returns the body back.

Replacers are run in the order they are defined and system replacers will
run last: base href → head → styles → html → script.

Examples

Omit javascript for Internet Explorer:

// handler before sapper middleware
(req, res, next) => {
	if (req.get('user-agent').toLowerCase().includes("msie")) {
		res.replacers = res.replacers || []
		// remove script from page content, return content back
		res.replacers.push((body) => body.replace("%sapper.scripts%", ""))
	}
	next()
}

Insert footer notice when unsupported browser:

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

[arve0]

Forgot to run the tests...

[arve0]

Not sure why the redirect tests fails on appveyor:

     Error: net::ERR_UNSAFE_PORT at http://localhost:2049/redirect-from

1830b31 was ok, and test/apps/redirects/ is not touched.

[benmccann]

@arve0 would the approach @antony mentioned of using regexp-replace work for you?

[arve0]

I believe that does not work when running in dev- or live-mode, right?

[benmccann]

yeah, you're right. he said he did it in a script after build

[happycollision]

Man. There are at least 3 PRs open that try to accomplish this problem in different ways. I wish I had realized that before I started on mine! FWIW, you can have a look at #1642 and see what the pros and cons between the two different approaches might be. 😅

[benmccann]

Thanks for putting together this PR! Sapper never had a good method of handling configuration, which made it difficult to know how to integrate this feature. However, that's been addressed in SvelteKit by adding a svelte.config.cjs file and adapters. I'm going to go ahead and close this PR since we won't be adding the feature to Sapper. You might like to check out SvelteKit instead. Someone's sent a PR for this feature already actually sveltejs/kit#641