feat(overlay): Allow to skip sidecar

Author: mydea

.changeset/bright-experts-learn.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+feat(overlay): Allow to skipSidecar to avoid connecting to sidecar

packages/overlay/src/App.tsx

@@ -20,6 +20,7 @@ export default function App({
   anchor,
   fullPage = false,
   showClearEventsButton = true,
+  skipSidecar = false,
 }: AppProps) {
   const [integrationData, setIntegrationData] = useState<IntegrationData<unknown>>({});
   const [isOnline, setOnline] = useState(false);
@@ -46,8 +47,11 @@ export default function App({
   }, [integrations]);
 
   useEffect(
-    () => connectToSidecar(sidecarUrl, contentTypeToIntegrations, setIntegrationData, setOnline) as () => undefined,
-    [sidecarUrl, contentTypeToIntegrations],
+    () =>
+      skipSidecar
+        ? () => {}
+        : (connectToSidecar(sidecarUrl, contentTypeToIntegrations, setIntegrationData, setOnline) as () => undefined),
+    [sidecarUrl, contentTypeToIntegrations, skipSidecar],
   );
 
   const spotlightEventTarget = useMemo(() => getSpotlightEventTarget(), []);
@@ -62,6 +66,10 @@ export default function App({
   const eventHandlers = useMemo(() => {
     log('useMemo: initializing event handlers');
     const clearEvents = async () => {
+      if (skipSidecar) {
+        return;
+      }
+
       const { origin } = new URL(sidecarUrl);
       const clearEventsUrl: string = `${origin}/clear`;
 
@@ -72,7 +80,7 @@ export default function App({
         });
       } catch (err) {
         console.error(
-          `Spotlight can't connect to Sidecar is it running? See: https://spotlightjs.com/sidecar/npx/`,
+          `Spotlight can't connect to Sidecar - is it running? See: https://spotlightjs.com/sidecar/npx/`,
           err,
         );
         return;
@@ -110,7 +118,7 @@ export default function App({
     };
 
     return { clearEvents, onOpen, onClose, onNavigate, onToggle };
-  }, [integrations, navigate, sidecarUrl]);
+  }, [integrations, navigate, sidecarUrl, skipSidecar]);
 
   useKeyPress(['ctrlKey', 'F12'], eventHandlers.onToggle);
 
@@ -161,6 +169,7 @@ export default function App({
         integrationData={integrationData}
         setTriggerButtonCount={setTriggerButtonCount}
         fullPage={fullPage}
+        skipSidecar={skipSidecar}
         showClearEventsButton={showClearEventsButton}
       />
     </>

packages/overlay/src/components/Debugger.tsx

@@ -43,6 +43,7 @@ export default function Debugger({
   setTriggerButtonCount: setNotificationCount,
   fullPage,
   showClearEventsButton,
+  skipSidecar,
 }: {
   integrations: Integration[];
   isOpen: boolean;
@@ -52,6 +53,7 @@ export default function Debugger({
   setTriggerButtonCount: (count: NotificationCount) => void;
   fullPage: boolean;
   showClearEventsButton: boolean;
+  skipSidecar: boolean;
 }) {
   return (
     <FullscreenBlur isOpen={isOpen} setOpen={setOpen} fullPage={fullPage}>
@@ -80,17 +82,19 @@ export default function Debugger({
                   <path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"></path>
                 </svg>
               </a>
-              <div
-                className={classNames('ml-2 flex items-center gap-x-2 pl-2 text-xs', isOnline ? '' : 'text-red-400')}
-              >
+              {!skipSidecar && (
                 <div
-                  className={classNames(
-                    ' block h-2 w-2 rounded-full',
-                    isOnline ? 'bg-green-400' : 'animate-pulse bg-red-400',
-                  )}
-                />
-                {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'}
-              </div>
+                  className={classNames('ml-2 flex items-center gap-x-2 pl-2 text-xs', isOnline ? '' : 'text-red-400')}
+                >
+                  <div
+                    className={classNames(
+                      ' block h-2 w-2 rounded-full',
+                      isOnline ? 'bg-green-400' : 'animate-pulse bg-red-400',
+                    )}
+                  />
+                  {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'}
+                </div>
+              )}
             </div>
           </h1>
           {showClearEventsButton && (

packages/overlay/src/index.tsx

@@ -94,6 +94,7 @@ export async function init({
   experiments = DEFAULT_EXPERIMENTS,
   fullPage = false,
   showClearEventsButton = true,
+  skipSidecar = false,
 }: SpotlightOverlayOptions = {}) {
   // The undefined document guard is to avoid being initialized in a Worker
   // @see https://github.com/vitejs/vite/discussions/17644#discussioncomment-10026390
@@ -168,6 +169,7 @@ export async function init({
           anchor={anchor}
           fullPage={fullPage}
           showClearEventsButton={showClearEventsButton}
+          skipSidecar={skipSidecar}
         />
       </SpotlightContextProvider>
     </MemoryRouter>,

packages/overlay/src/types.ts

@@ -97,6 +97,14 @@ export type SpotlightOverlayOptions = {
    * @default true
    */
   showClearEventsButton?: boolean;
+
+  /**
+   * If set to `true`, the Spotlight overlay will not connect to the sidecar.
+   * This is useful if you want to add data manually to Spotlight.
+   *
+   * @default false
+   */
+  skipSidecar?: boolean;
 };
 
 export type NotificationCount = {