feat: Spotlight integration with hydration-overlay (#41)

Feature Addition: Spotlight Integration in Hydration-Overlay This pull request introduces an integration of Spotlight into the hydration-overlay module. Key Highlights: - Addressed all necessary conditions outlined in the discussion [here](#40 (comment)). - Note: Current integration and tests may not function as expected due to pending integration support in Spotlight. The implementation is primed for action once the necessary changes are merged. Next Steps: - Track the progress of Hydration-overlay integration in Spotlight [here](getsentry/spotlight#343). - Upon completion of Spotlight integration, a simple version update for the Spotlight package in this repository is all that's needed.
BuilderIO · Jul 30, 2024 · 1075a84 · 1075a84
1 parent 1077eb4
commit 1075a84
Show file tree

Hide file tree

Showing 24 changed files with 1,255 additions and 89 deletions.
diff --git a/.changeset/slow-camels-scream.md b/.changeset/slow-camels-scream.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/react-hydration-overlay": minor
+---
+
+Added a Spotlight integration in hydration-overlay
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -42,7 +42,8 @@
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16",
-    "webpack": ">=4"
+    "webpack": ">=4",
+    "@spotlightjs/spotlight": "^1.2.11"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.13.3",

diff --git a/packages/lib/src/Overlay.tsx b/packages/lib/src/Overlay.tsx
@@ -4,6 +4,7 @@ import beautify from "beautify";
 import { createPortal } from "react-dom";
 import React, { useEffect, useState } from "react";
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
+import { OverlayProps } from "./types";
 
 // Remove emotion-inserted style tags from the HTML string from the server
 // as they get removed before hydration, so they shouldn't show in the diff
@@ -17,7 +18,7 @@ const DiffViewer: typeof ReactDiffViewer = (ReactDiffViewer as any).default
   ? (ReactDiffViewer as any).default
   : ReactDiffViewer;
 
-export function Overlay() {
+export function Overlay({ integrations }: OverlayProps) {
   const [SSRHtml, setSSRHtml] = useState("");
   const [CSRHtml, setCSRHtml] = useState("");
 
@@ -60,84 +61,102 @@ export function Overlay() {
     return null;
   }
 
-  return createPortal(
-    <div
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 999998,
-        background: "rgba(0,0,0,0.5)",
-        cursor: "pointer",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: "monospace",
-        direction: "ltr",
-      }}
-      onClick={hideModal}
-    >
+  const renderOverlay = () => {
+    return (
       <div
         style={{
-          zIndex: 999999,
-          margin: "4rem 6rem",
-          backgroundColor: "white",
-          borderRadius: "0.5rem",
-          overflow: "auto",
-          cursor: "auto",
-          color: "#212529",
-        }}
-        onClick={(e) => {
-          e.stopPropagation();
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 999998,
+          background: "rgba(0,0,0,0.5)",
+          cursor: "pointer",
+          display: "flex",
+          flexDirection: "column",
+          fontFamily: "monospace",
+          direction: "ltr",
         }}
+        onClick={hideModal}
       >
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              borderBottom: "1px solid black",
-              alignItems: "center",
-            }}
-          >
+        <div
+          style={{
+            zIndex: 999999,
+            margin: "4rem 6rem",
+            backgroundColor: "white",
+            borderRadius: "0.5rem",
+            overflow: "auto",
+            cursor: "auto",
+            color: "#212529",
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <div style={{ display: "flex", flexDirection: "column" }}>
             <div
               style={{
-                fontSize: "2rem",
-                fontWeight: "bold",
-                padding: "1rem",
+                display: "flex",
+                justifyContent: "space-between",
+                borderBottom: "1px solid black",
+                alignItems: "center",
               }}
             >
-              Hydration Mismatch Occured
-            </div>
+              <div
+                style={{
+                  fontSize: "2rem",
+                  fontWeight: "bold",
+                  padding: "1rem",
+                }}
+              >
+                Hydration Mismatch Occurred
+              </div>
 
-            <button
-              style={{
-                all: "unset",
-                cursor: "pointer",
-                padding: "0.5rem",
-                marginRight: "1rem",
-                backgroundColor: "#212529",
-                borderRadius: "0.25rem",
-                color: "white",
-              }}
-              onClick={hideModal}
-            >
-              CLOSE
-            </button>
-          </div>
-          <div style={{ position: "relative", width: "100%" }}>
-            <DiffViewer
-              oldValue={SSRHtml}
-              newValue={CSRHtml}
-              leftTitle={"Server-Side Render"}
-              rightTitle={"Client-Side Render"}
-              compareMethod={DiffMethod.WORDS}
-            />
+              <button
+                style={{
+                  all: "unset",
+                  cursor: "pointer",
+                  padding: "0.5rem",
+                  marginRight: "1rem",
+                  backgroundColor: "#212529",
+                  borderRadius: "0.25rem",
+                  color: "white",
+                }}
+                onClick={hideModal}
+              >
+                CLOSE
+              </button>
+            </div>
+            <div style={{ position: "relative", width: "100%" }}>
+              <DiffViewer
+                oldValue={SSRHtml}
+                newValue={CSRHtml}
+                leftTitle={"Server-Side Render"}
+                rightTitle={"Client-Side Render"}
+                compareMethod={DiffMethod.WORDS}
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>,
-    document.body
-  );
+    );
+  };
+
+  if (integrations?.spotlight) {
+    // Spotlight Integration
+    import("@spotlightjs/spotlight")
+    .then((Spotlight) => {
+      if (Spotlight && Spotlight.openSpotlight) {
+        Spotlight.openSpotlight("/hydration-error");
+      } else {
+        console.error("[ReactHydrationOverlay]: Spotlight package is not available.");
+      }
+    })
+    .catch((error) => {
+      console.error("[ReactHydrationOverlay]: Error importing spotlight package:", error);
+    });
+  } else {
+    return createPortal(renderOverlay(), document.body);
+  }
 }
diff --git a/packages/lib/src/index.tsx b/packages/lib/src/index.tsx
@@ -1,11 +1,16 @@
-import React, { type PropsWithChildren } from "react";
+import React from "react";
 import { Overlay } from "./Overlay.js";
+import { HydrationOverlayProps } from "./types.js";
 
-export function HydrationOverlay(props: PropsWithChildren) {
+export function HydrationOverlay(
+  {children, ...rest}: HydrationOverlayProps
+) {
   return (
     <>
-      {props.children}
-      <Overlay />
+      {children}
+      <Overlay {...rest} />
     </>
   );
 }
+
+export * from "./Overlay";
diff --git a/packages/lib/src/types.ts b/packages/lib/src/types.ts
@@ -0,0 +1,14 @@
+import { type PropsWithChildren } from "react";
+
+export type OverlayIntegrationsProps = {
+  spotlight?: boolean
+}
+
+export type HydrationOverlayProps = PropsWithChildren & {
+  integrations?: OverlayIntegrationsProps
+};
+
+export type OverlayProps = {
+  integrations?: OverlayIntegrationsProps
+}
+