Can you access body html elements before its written to files?

sources we’ve used:

• https://www.gatsbyjs.org/docs/page-creation/
• https://www.gatsbyjs.org/docs/creating-and-modifying-pages/
• https://www.gatsbyjs.org/docs/ssr-apis/
• https://www.gatsbyjs.org/docs/node-apis/

Summary

We are trying to create a gatsby theme that programmatically searches the DOM for certain html elements (‘h1’ tags, etc…), so we can decorate (add attributes to) the elements before they are written to disk. We have looked into certain ssr hooks such as onPreRenderHTML and onCreatePage (gatsby-node.js) but neither one seems to give us access to the page contents.

Environment (if relevant)

System:
  OS: macOS 10.14.6
  CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 12.8.0 - ~/.nvm/versions/node/v12.8.0/bin/node
  Yarn: 1.17.3 - ~/.yarn/bin/yarn
  npm: 6.10.3 - ~/.nvm/versions/node/v12.8.0/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Chrome: 81.0.4044.113
  Safari: 13.1
npmPackages:
  gatsby: 2.20.8 => 2.20.8 
  gatsby-plugin-react-helmet: ^3.1.22 => 3.1.22 
  gatsby-plugin-sass: ^2.1.29 => 2.1.29 
  gatsby-source-contentful: ^2.1.89 => 2.1.89 
  gatsby-transformer-remark: ^2.6.53 => 2.6.53 
npmGlobalPackages:
  gatsby-cli: 2.7.58
  gatsby-core-utils: 1.0.13
  gatsby-dev-cli: 2.5.35
  gatsby-theme-minimal: 1.0.0
  gatsby: 2.8.8

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js:

exports.createPages = ({ page }) => {
...
          console.log(page)
          //logging undefined

gatsby-browser.js: N/A gatsby-ssr.js:

exports.onPreRenderHTML = ({ getPreBodyComponents }) => {
  let preBodyComponents = getPreBodyComponents()
  console.log(JSON.stringify(preBodyComponents, null, 2))
  //logging empty []
}

[wardpeet]

@abmagil, this could slowdown the process by a ton and seems like a niche use case. Thanks for the feedback, I’ll share it with the team!

[wardpeet]

You can use pageContext to inject variables in your page but you still have to wire them correctly. See https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#pass-context-to-pages

I don’t have the full use case but I feel like the onPostBuild is your best bet. You can still use https://github.com/facebook/jest/tree/master/packages/jest-worker to distribute the work over cores. Also Gatsby only does a part distributed, we’ll work more on this.