fix(styled-components): fix race condition

gregberge · gregberge · commit 9a30989d1ff5 · 2019-08-30T16:05:43.000+02:00
diff --git a/packages/smooth-plugin-styled-components/src/smooth-node.js b/packages/smooth-plugin-styled-components/src/smooth-node.js
@@ -19,20 +19,34 @@ export function onCreateBabelConfig({ actions }, pluginOptions) {
   })
 }
 
-const sheetByPathname = new Map()
+const sheetConfigByRequestId = new Map()
 
 // eslint-disable-next-line react/prop-types,react/display-name
-export function wrapRootElement({ element, pathname }) {
+export function wrapRootElement({ element, requestId }) {
   const sheet = new ServerStyleSheet()
-  sheetByPathname.set(pathname, sheet)
+
+  // Sheet is automatically disposed after 2min to prevent memory leaks
+  const disposeTimeout = setTimeout(() => {
+    // eslint-disable-next-line no-use-before-define
+    dispose()
+  }, 120000)
+
+  function dispose() {
+    sheetConfigByRequestId.delete(requestId)
+    clearTimeout(disposeTimeout)
+  }
+
+  const sheetConfig = { sheet, dispose }
+  sheetConfigByRequestId.set(requestId, sheetConfig)
   return <StyleSheetManager sheet={sheet.instance}>{element}</StyleSheetManager>
 }
 
-export function onRenderBody({ setHeadComponents, pathname }) {
-  const sheet = sheetByPathname.get(pathname)
-  if (sheet) {
+export function onRenderBody({ setHeadComponents, requestId }) {
+  const sheetConfig = sheetConfigByRequestId.get(requestId)
+  if (sheetConfig) {
+    const { sheet, dispose } = sheetConfig
     setHeadComponents([sheet.getStyleElement()])
-    sheetByPathname.delete(pathname)
+    dispose()
 
     // Prevent cache bugs
     if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/smooth/src/plugin/nodeHooks/onRenderBody.js b/packages/smooth/src/plugin/nodeHooks/onRenderBody.js
@@ -8,6 +8,7 @@ export const onRenderBody = config => ({
   postBodyComponents = [],
   bodyProps = {},
   pathname,
+  requestId,
 }) => {
   function setHeadComponents(components) {
     headComponents = [...headComponents, ...components]
@@ -35,6 +36,7 @@ export const onRenderBody = config => ({
 
   applyHook(config, 'onRenderBody', {
     pathname,
+    requestId,
     setHeadComponents,
     setHtmlAttributes,
     setBodyAttributes,
diff --git a/packages/smooth/src/plugin/nodeHooks/wrapRootElement.js b/packages/smooth/src/plugin/nodeHooks/wrapRootElement.js
@@ -1,4 +1,9 @@
 import { applyHook } from '../node'
 
-export const wrapRootElement = config => ({ element, pathname }) =>
-  applyHook(config, 'wrapRootElement', { element, pathname }, 'element')
+export const wrapRootElement = config => ({ element, pathname, requestId }) =>
+  applyHook(
+    config,
+    'wrapRootElement',
+    { element, pathname, requestId },
+    'element',
+  )
diff --git a/packages/smooth/src/server/ssr.js b/packages/smooth/src/server/ssr.js
@@ -57,9 +57,15 @@ export default function ssrMiddleware({
       </ErrorContextProvider>
     )
 
+    // Generate unique request id
+    const requestId = Math.random()
+      .toString(36)
+      .substring(7)
+
     const rootElement = wrapRootElement(config)({
       element: jsx,
       pathname: req.url,
+      requestId,
     })
 
     // Loadable components
@@ -95,6 +101,7 @@ export default function ssrMiddleware({
       headComponents,
       postBodyComponents,
       pathname: req.url,
+      requestId,
     })
 
     const html = renderToString(<Html {...pluginProps} body={appHtml} />)
