feat: pass pathname to replaceRenderer and onPreRenderHTML SSR APIs

[jafaircl]

For some situations (e.g. implementing AMP pages), a user may need to conditionally remove or add elements in the head or body of a page. Normally, this could be done when the page or node is created. But, styles and scripts may be added later in the lifecycle. The onRenderBody SSR API provides a pathname argument that could be used but does not allow the removal of existing elements. Using replaceHeadComponents or replaceBodyComponents in onPreRenderHTML would seem to be ideal. But, this API doesn't expose the pathname argument.

The following example for combining inline style elements in the head of the document is not currently possible but would be if pathname were exposed.

import React from 'react'
import Helmet from 'react-helmet'

export const onPreRenderHTML = (
  { getHeadComponents, replaceHeadComponents, pathname },
  pluginOptions
) => {
  const headComponents = getHeadComponents()
  const styles = headComponents.reduce((str, x) => {
    if (x.type === 'style') {
      str += x.props.dangerouslySetInnerHTML.__html
    }
    return str
  }, '')
  const regex = new RegExp(pluginOptions.pathRegex || '\/amp\/')
  if (regex.test(pathname)) {
    replaceHeadComponents([
      <Helmet>
        <style id="amp-custom">
          {styles}
        </style>
      </Helmet>,
      ...headComponents.filter(x => x.type !== 'style'),
    ])
  }
}

I'm not sure if this needs to be submitted as an RFC or not. It does slightly modify an API but it seems very minor.

[pieh]

I think it's perfectly reasonable thing to do

[pieh]

Thanks @jafaircl

[gatsbot]

Holy buckets, @jafaircl — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!