feat(integration): Added hydration-overlay integration for nextjs projects

.changeset/mean-dolls-greet.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+Added a hydration-overlay extension for Nextjs projects

packages/overlay/package.json

@@ -57,7 +57,10 @@
     "sql-formatter": "^12.2.4",
     "tailwindcss": "^3.3.3",
     "usehooks-ts": "^2.9.1",
-    "magic-string": "^0.30.5"
+    "magic-string": "^0.30.5",
+    "beautify": "^0.0.8",
+    "react-diff-viewer-continued": "^3.4.0",
+    "@types/beautify": "^0.0.3"
   },
   "volta": {
     "extends": "../../package.json"

packages/overlay/src/index.css

@@ -94,3 +94,11 @@ ul.tree li:last-child:before {
 .table-values tbody td {
   @apply border-primary-950 border-y px-2 py-1;
 }
+
+.hydration-error-wrapper pre {
+  @apply !text-primary-300;
+}
+
+.hydration-error-wrapper td[class^='react-diff'][class$='title-block'] {
+  @apply !bg-primary-900;
+}

packages/overlay/src/index.tsx

@@ -13,6 +13,7 @@ import { SpotlightContextProvider } from './lib/useSpotlightContext.tsx';
 import { SpotlightOverlayOptions, WindowWithSpotlight } from './types.ts';
 
 export { default as console } from './integrations/console/index.ts';
+export { default as hydrationError } from './integrations/hydration-error/index.ts';
 export { default as sentry } from './integrations/sentry/index.ts';
 export { default as viteInspect } from './integrations/vite-inspect/index.ts';
 

packages/overlay/src/integrations/hydration-error/HydrationErrorDisplay.tsx

@@ -0,0 +1,117 @@
+import beautify from 'beautify';
+import { useEffect, useState } from 'react';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
+import { log } from '~/lib/logger';
+
+type WindowWithHydrationOverlay = Window & {
+  BUILDER_HYDRATION_OVERLAY: {
+    SSR_HTML: string | undefined;
+    CSR_HTML: string | undefined;
+    ERROR: boolean | undefined;
+    APP_ROOT_SELECTOR: string;
+  };
+};
+const isBrowser = typeof window !== 'undefined';
+const _window = isBrowser ? (window as unknown as WindowWithHydrationOverlay) : null;
+
+export default function HydrationErrorDisplay() {
+  const [SSRHtml, setSSRHtml] = useState('');
+  const [CSRHtml, setCSRHtml] = useState('');
+  const [isStyleSheetAdded, setIsStyleSheetAdded] = useState(false);
+  const isHydrationError = _window?.BUILDER_HYDRATION_OVERLAY.ERROR;
+  const ssrHtml = _window?.BUILDER_HYDRATION_OVERLAY.SSR_HTML;
+  const newCSRHtml = _window?.BUILDER_HYDRATION_OVERLAY.CSR_HTML;
+
+  useEffect(() => {
+    if (isBrowser) {
+      if (!_window?.BUILDER_HYDRATION_OVERLAY) {
+        log('No hydration error found. Make sure you are using @builder.io/react-hydration-overlay');
+        return;
+      }
+
+      const shadowRoot = document.getElementById('sentry-spotlight-root')?.shadowRoot;
+
+      const checkAndAddStyleSheet = () => {
+        if (isStyleSheetAdded) {
+          return true;
+        }
+        const head = document.head;
+        const styleTags = head.querySelectorAll('style');
+        const emotionDiffStyleTags = Array.from(styleTags).filter(styleTag => {
+          return styleTag.getAttribute('data-emotion');
+        });
+
+        const newStylesheet = new CSSStyleSheet();
+        const stylesheetContent = Array.from(emotionDiffStyleTags)
+          .map(styleTag => styleTag.innerHTML)
+          .join('\n');
+
+        newStylesheet.replaceSync(stylesheetContent);
+
+        if (
+          shadowRoot &&
+          shadowRoot.adoptedStyleSheets &&
+          !(shadowRoot.adoptedStyleSheets.indexOf(newStylesheet) >= 0) &&
+          emotionDiffStyleTags.length > 0
+        ) {
+          shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, newStylesheet];
+          setIsStyleSheetAdded(true);
+          return true;
+        }
+        return false;
+      };
+      if (!ssrHtml || !newCSRHtml || !checkAndAddStyleSheet()) return;
+
+      const newSSR = beautify(ssrHtml, { format: 'html' });
+      setSSRHtml(newSSR);
+      const newCSR = beautify(newCSRHtml, { format: 'html' });
+      setCSRHtml(newCSR);
+    }
+  }, [ssrHtml, newCSRHtml, isHydrationError]);
+
+  const newStyles = {
+    variables: {
+      dark: {
+        diffViewerBackground: 'transparent',
+        addedBackground: 'transparent',
+        removedBackground: 'transparent',
+        wordAddedBackground: '#055d67',
+        wordRemovedBackground: '#7d383f',
+        addedGutterBackground: 'transparent',
+        removedGutterBackground: 'transparent',
+        gutterBackground: 'transparent',
+        codeFoldBackground: 'transparent',
+        emptyLineBackground: 'transparent',
+        diffViewerTitleBorderColor: 'transparent',
+        highlightBackground: 'transparent',
+        highlightGutterBackground: 'transparent',
+        codeFoldGutterBackground: 'transparent',
+        gutterBackgroundDark: 'transparent',
+      },
+    },
+  };
+
+  if (!_window?.BUILDER_HYDRATION_OVERLAY) {
+    return (
+      <div className="text-primary-300 px-6 py-4">
+        No hydration error found. Make sure you are using @builder.io/react-hydration-overlay
+      </div>
+    );
+  }
+  if (isHydrationError) {
+    return (
+      <div className="hydration-error-wrapper relative w-full overflow-x-auto">
+        <ReactDiffViewer
+          styles={newStyles}
+          oldValue={SSRHtml}
+          newValue={CSRHtml}
+          leftTitle={isStyleSheetAdded ? 'Server-Side Render' : ''}
+          rightTitle={isStyleSheetAdded ? 'Client-Side Render' : ''}
+          compareMethod={DiffMethod.WORDS}
+          useDarkTheme
+        />
+      </div>
+    );
+  }
+  return <div className="text-primary-300 px-6 py-4">No Hydration error found.</div>;
+}

packages/overlay/src/integrations/hydration-error/index.ts

@@ -0,0 +1,15 @@
+import type { Integration } from '../integration';
+import HydrationErrorDisplay from './HydrationErrorDisplay';
+
+export default function hydrationErrorIntegration() {
+  return {
+    name: 'hydration-error',
+    tabs: () => [
+      {
+        id: 'hydration-error',
+        title: 'Hydration Error',
+        content: HydrationErrorDisplay,
+      },
+    ],
+  } satisfies Integration;
+}