Improve SSR performance

lerna.json

@@ -5,5 +5,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.0.2"
+  "version": "1.0.3-ssr-perf.1"
 }

packages/bumbag-addon-highlighted-code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bumbag-addon-highlighted-code",
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "description": "An accessible, composable, and friendly React UI Kit",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@testing-library/react": "8.0.7",
     "@testing-library/react-hooks": "1.1.0",
-    "bumbag": "^1.0.2",
+    "bumbag": "^1.0.3-ssr-perf.1",
     "react-test-renderer": "16.8.6"
   },
   "author": "Jake Moxey",

packages/bumbag-addon-markdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bumbag-addon-markdown",
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "description": "An accessible, composable, and friendly React UI Kit",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@testing-library/react": "8.0.7",
     "@testing-library/react-hooks": "1.1.0",
-    "bumbag": "^1.0.2",
+    "bumbag": "^1.0.3-ssr-perf.1",
     "react-test-renderer": "16.8.6"
   },
   "author": "Jake Moxey",

packages/bumbag-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bumbag-server",
-  "version": "1.0.0",
+  "version": "1.0.3-ssr-perf.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "ts/index.d.ts",

packages/bumbag-theme-medipass/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bumbag-theme-medipass",
-  "version": "1.0.0",
+  "version": "1.0.3-ssr-perf.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "ts/index.d.ts",

packages/bumbag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bumbag",
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "description": "An accessible, composable, and friendly React UI Kit",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/bumbag/src/ColorMode/ColorModeContext.tsx

@@ -9,10 +9,15 @@ export const ColorModeContext = React.createContext<any>({ setColorMode: () => {
 type Props = {
   children: React.ReactNode;
   mode: string;
+  isSSR?: boolean;
 };
 
+ColorModeProvider.defaultProps = {
+  isSSR: false
+}
+
 export function ColorModeProvider(props: Props) {
-  const { children, mode: _defaultMode } = props;
+  const { children, mode: _defaultMode, isSSR } = props;
 
   ////////////////////////////////////
 
@@ -62,16 +67,10 @@ export function ColorModeProvider(props: Props) {
 
   ////////////////////////////////////
 
-  if (!mounted) {
-    return (
-      <div style={{ visibility: 'hidden' }}>{children}</div>
-    )
+  if (isSSR && !mounted) {
+    return <div style={{ visibility: 'hidden' }}>{children}</div>;
   }
-  return (
-    <ColorModeContext.Provider value={value}>
-      {children}
-    </ColorModeContext.Provider>
-  );
+  return <ColorModeContext.Provider value={value}>{children}</ColorModeContext.Provider>;
 }
 
 export function useColorMode() {

packages/bumbag/src/Provider/Provider.tsx

@@ -17,6 +17,7 @@ export type ProviderProps = {
   isStandalone?: boolean;
   collapseBelow?: LayoutBreakpoint;
   colorMode?: string;
+  isSSR?: boolean;
   theme?: ThemeConfig;
 };
 
@@ -25,7 +26,7 @@ Provider.defaultProps = {
 };
 
 export function Provider(props: ProviderProps) {
-  const { children, colorMode, collapseBelow, isStandalone, theme: _theme } = props;
+  const { children, colorMode, collapseBelow, isSSR, isStandalone, theme: _theme } = props;
 
   ////////////////////////////////////////////////
 
@@ -52,7 +53,7 @@ export function Provider(props: ProviderProps) {
   return (
     <BumbagThemeContext.Provider value={themeContextValue}>
       <EmotionProvider theme={derivedTheme}>
-        <ColorModeProvider mode={colorMode}>
+        <ColorModeProvider isSSR={isSSR} mode={colorMode}>
           <IdProvider>
             <ToastProvider>
               <PageProvider collapseBelow={collapseBelow}>

packages/gatsby-plugin-bumbag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-bumbag",
-  "version": "1.0.0",
+  "version": "1.0.3-ssr-perf.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "ts/index.d.ts",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "10.0.27",
-    "bumbag-server": "^1.0.0"
+    "bumbag-server": "^1.0.3-ssr-perf.0"
   },
   "peerDependencies": {
     "@types/react": "16.x",

packages/website/package.json

@@ -1,23 +1,23 @@
 {
   "name": "bumbag-website",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.3-ssr-perf.1",
   "dependencies": {
     "@fortawesome/free-brands-svg-icons": "5.14.0",
     "@fortawesome/free-solid-svg-icons": "5.13.1",
     "@mdx-js/mdx": "1.1.0",
     "@mdx-js/react": "1.0.27",
     "base64-url": "2.3.2",
-    "bumbag": "^1.0.2",
-    "bumbag-addon-highlighted-code": "^1.0.2",
-    "bumbag-addon-markdown": "^1.0.2",
-    "bumbag-server": "^1.0.0",
-    "bumbag-theme-medipass": "^1.0.0",
+    "bumbag": "^1.0.3-ssr-perf.1",
+    "bumbag-addon-highlighted-code": "^1.0.3-ssr-perf.1",
+    "bumbag-addon-markdown": "^1.0.3-ssr-perf.1",
+    "bumbag-server": "^1.0.3-ssr-perf.0",
+    "bumbag-theme-medipass": "^1.0.3-ssr-perf.0",
     "change-case": "3.1.0",
     "classnames": "2.2.6",
     "gatsby": "^2.21.33",
     "gatsby-image": "^2.4.3",
-    "gatsby-plugin-bumbag": "^1.0.0",
+    "gatsby-plugin-bumbag": "^1.0.3-ssr-perf.0",
     "gatsby-plugin-google-analytics": "2.3.11",
     "gatsby-plugin-manifest": "^2.4.3",
     "gatsby-plugin-mdx": "1.2.7",

packages/website/src/docs/getting-started.mdx

@@ -132,6 +132,8 @@ export default class MyDocument extends Document {
 
 Then, open up your `_app.js` file, and add the `<BumbagProvider>`:
 
+**Make sure you add `isSSR` as a prop to `BumbagProvider`. This will help with color mode consistency.**
+
 
 ```jsx
 import NextApp from 'next/app';
@@ -141,7 +143,7 @@ export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props;
     return (
-      <BumbagProvider>
+      <BumbagProvider isSSR>
         <Component {...pageProps} />
       </BumbagProvider>
     );