chore(website): fix ssr warning in dev (#99)

nihgwu · web-flow · commit 39bb3dc2a0c5 · 2022-03-01T16:17:05.000Z
diff --git a/website/next.config.js b/website/next.config.js
@@ -9,7 +9,8 @@ module.exports = {
   compiler: {
     styledComponents: true,
   },
-  reactStrictMode: true,
+  // ensure counter won't be incremented twice
+  reactStrictMode: false,
   webpack: (config, options) => {
     config.resolve.alias = {
       ...config.resolve.alias,
diff --git a/website/src/constants.ts b/website/src/constants.ts
@@ -5,15 +5,42 @@ import { codeBlock } from 'common-tags'
 // @ts-ignore
 import hn from '!!raw-loader!./pages/examples/hacker-news.tsx'
 
+// mimic babel plugin's behaviour to support SSR
+let counter = 0
+function hijackedStyled(...args: any[]) {
+  // @ts-ignore
+  return styled(...args)
+}
+const hash = 'runner'
+const ignoredProps = Object.getOwnPropertyNames(Function)
+Object.getOwnPropertyNames(styled).forEach((tag) => {
+  if (ignoredProps.includes(tag)) return
+  Object.defineProperty(hijackedStyled, tag, {
+    get() {
+      return styled[tag].withConfig({
+        componentId: `sc-${hash}-${counter++}`,
+      })
+    },
+  })
+})
+
+export const resetCounter = () => {
+  counter = 0
+}
+
 export const scope = {
   ...React,
-  styled,
+  styled: hijackedStyled,
   css,
   keyframes,
   createGlobalStyle,
   import: {
     react: React,
-    'styled-components': Styled,
+    'styled-components': {
+      ...Styled,
+      default: hijackedStyled,
+      __esModule: true,
+    },
   },
 }
 
diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx
@@ -7,6 +7,8 @@ import Document, {
 } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
+import { resetCounter } from '../constants'
+
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet()
@@ -35,6 +37,8 @@ export default class MyDocument extends Document {
   }
 
   render() {
+    // reset counter for SSR
+    resetCounter()
     return (
       <Html lang="en" data-theme="system">
         <Head />
