Gatsby: [v2] गैट्सबी-प्लगइन-जेएसएस के साथ संभावित बग: शीट्स रजिस्ट्री को साफ करने की जरूरत है

विवरण

शैलियों के कुछ संयोजनों के साथ, शीट्स रजिस्ट्री को रेंडर किए गए पृष्ठों के बीच साफ़ किया जाना चाहिए।

प्रजनन करने कि प्रक्रिया

इस रेपो में एक सरलीकृत प्रजनन है और इसके लिए मेरा फिक्स ट्रैक करता है:
https://github.com/cpboyd/gatsby-layout-mui-bug

नोट: मुझे यकीन नहीं है कि SheetsRegistry को रीसेट करना कहां होना चाहिए। मैंने इसे ToString() कॉल के बाद ही रखा था क्योंकि इसे लगाने के लिए यह सबसे आसान जगह थी।

अपेक्षित परिणाम

जावास्क्रिप्ट प्रतिपादन और स्थिर प्रतिपादन के बीच पृष्ठों को लगातार प्रस्तुत करना चाहिए।

वास्तविक परिणाम

शैलियों को गड़बड़ कर दिया गया था।

वातावरण

प्रणाली:
ओएस: मैकोज़ हाई सिएरा 10.13.6
सीपीयू: x64 इंटेल (आर) कोर (टीएम) i7-8750H सीपीयू @ 2.20GHz
शैल: 3.2.57 - /बिन/बैश
बायनेरिज़:
नोड: 10.9.0 - /usr/स्थानीय/बिन/नोड
सूत: 1.9.4 - /usr/स्थानीय/बिन/यार्न
एनपीएम: 6.4.0 - /usr/लोकल/बिन/एनपीएम
ब्राउज़र:
क्रोम: 68.0.3440.106
सफारी: 11.1.2
एनपीएमपैकेज:
गैट्सबी: ^2.0.0-rc.0 => 2.0.0-rc.0
गैट्सबी-इमेज: ^2.0.0-rc.0 => 2.0.0-rc.0
गैट्सबी-प्लगइन-गूगल-एनालिटिक्स: ^2.0.0-rc.0 => 2.0.0-rc.0
गैट्सबी-प्लगइन-जेएसएस: ^2.0.2-आरसी.0 => 2.0.2-आरसी.0
गैट्सबी-प्लगइन-लेआउट: अगला => 1.0.0-आरसी.0
गैट्सबी-प्लगइन-मैनिफेस्ट: ^2.0.2-आरसी.0 => 2.0.2-आरसी.0
गैट्सबी-प्लगइन-ऑफ़लाइन: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-react-helmet: ^3.0.0-rc.0 => 3.0.0-rc.0
गैट्सबी-प्लगइन-शार्प: ^2.0.0-rc.0 => 2.0.0-rc.0
गैट्सबी-प्लगइन-टाइपस्क्रिप्ट: ^2.0.0-rc.0 => 2.0.0-rc.1
गैट्सबी-प्लगइन-टाइपोग्राफी: ^2.2.0-rc.0 => 2.2.0-rc.0
गैट्सबी-रिमार्क-एक्सटर्नल-लिंक्स: ^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
गैट्सबी-ट्रांसफॉर्मर-जेसन: ^2.1.1-rc.0 => 2.1.1-rc.0
गैट्सबी-ट्रांसफार्मर-टिप्पणी: ^2.1.1-rc.0 => 2.1.1-rc.0
गैट्सबी-ट्रांसफॉर्मर-शार्प: ^2.1.1-rc.0 => 2.1.1-rc.0
एनपीएम ग्लोबल पैकेज:
गैट्सबी-क्ली: 1.1.58

फ़ाइल सामग्री (यदि परिवर्तित हो)

gatsby-config.js : लागू नहीं
package.json : लागू नहीं
gatsby-node.js : लागू नहीं
gatsby-browser.js : लागू नहीं

मूल gatsby-ssr.js API हर बार पेज को रेंडर करने पर एक नए SheetsRegistry साथ शुरू हुआ:

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() }}
    />,
  ])
}

अब वेरिएबल फाइल स्कोप्ड है और रेंडरिंग के दौरान बनी रहती है:

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() }}
    />,
  ])