Gatsby: [v2] potenzieller Fehler mit gatsby-plugin-jss: SheetsRegistry muss gelöscht werden

Beschreibung

Bei bestimmten Kombinationen von Stilen sollte die SheetsRegistry zwischen gerenderten Seiten gelöscht werden.

Schritte zum Reproduzieren

Dieses Repo hat eine vereinfachte Reproduktion und verfolgt meinen Fix dafür:
https://github.com/cpboyd/gatsby-layout-mui-bug

Hinweis: Ich bin mir nicht sicher, wo das Zurücksetzen von SheetsRegistry soll. Ich habe es einfach nach dem ToString() Aufruf platziert, weil dies der einfachste Ort schien, um es zu platzieren.

Erwartetes Ergebnis

Die Seiten sollten konsistent zwischen dem Javascript-Rendering und dem statischen Rendering gerendert werden.

Tatsächliche Ergebnis

Die Stile waren durcheinander.

Umgebung

System:
Betriebssystem: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2,20GHz
Shell: 3.2.57 - /bin/bash
Binärdateien:
Knoten: 10.9.0 - /usr/local/bin/node
Garn: 1.9.4 - /usr/local/bin/garn
npm: 6.4.0 - /usr/local/bin/npm
Browser:
Chrom: 68.0.3440.106
Safari: 11.1.2
npmPakete:
gatsby: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-image: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-google-analytics: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-jss: ^2.0.2-rc.0 => 2.0.2-rc.0
gatsby-plugin-layout: weiter => 1.0.0-rc.0
gatsby-plugin-manifest: ^2.0.2-rc.0 => 2.0.2-rc.0
gatsby-plugin-offline: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-react-helm: ^3.0.0-rc.0 => 3.0.0-rc.0
gatsby-plugin-sharp: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-typescript: ^2.0.0-rc.0 => 2.0.0-rc.1
gatsby-plugin-typography: ^2.2.0-rc.0 => 2.2.0-rc.0
gatsby-remark-external-links: ^0.0.4 => 0.0.4
gatsby-remark-images: ^2.0.1-rc.0 => 2.0.1-rc.0
gatsby-remark-responsive-iframe: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-source-filesystem: ^2.0.1-rc.0 => 2.0.1-rc.0
gatsby-transformer-json: ^2.1.1-rc.0 => 2.1.1-rc.0
Gatsby-Transformator-Anmerkung: ^2.1.1-rc.0 => 2.1.1-rc.0
gatsby-transformator-scharf: ^2.1.1-rc.0 => 2.1.1-rc.0
npmGlobalPackages:
gatsby-cli: 1.1.58

Dateiinhalt (falls geändert)

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

Die ursprüngliche gatsby-ssr.js API begann jedes Mal mit einem neuen SheetsRegistry wenn die Seite gerendert wurde:

exports.replaceRenderer = (
  { bodyComponent, replaceBodyHTMLString, setHeadComponents },
  { theme = {} }
) => {
  const sheets = new SheetsRegistry()

  const bodyHTML = renderToString(
    <JssProvider registry={sheets}>
      <ThemeProvider theme={theme}>{bodyComponent}</ThemeProvider>
    </JssProvider>
  )

  replaceBodyHTMLString(bodyHTML)
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])
}

Jetzt ist die Variable dateibezogen und scheint über Renderings hinweg bestehen zu bleiben:

import React from "react"
import { JssProvider, SheetsRegistry, ThemeProvider } from "react-jss"

const sheets = new SheetsRegistry()

// eslint-disable-next-line react/prop-types,react/display-name
exports.wrapRootElement = ({ element }, { theme = {} }) => (
  <JssProvider registry={sheets}>
    <ThemeProvider theme={theme}>{element}</ThemeProvider>
  </JssProvider>
)

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <style
      type="text/css"
      id="server-side-jss"
      key="server-side-jss"
      dangerouslySetInnerHTML={{ __html: sheets.toString() }}
    />,
  ])