diff --git a/.changeset/bright-experts-learn.md b/.changeset/bright-experts-learn.md new file mode 100644 index 00000000..297e8e84 --- /dev/null +++ b/.changeset/bright-experts-learn.md @@ -0,0 +1,5 @@ +--- +'@spotlightjs/overlay': minor +--- + +feat(overlay): Allow to skipSidecar to avoid connecting to sidecar diff --git a/packages/overlay/src/App.tsx b/packages/overlay/src/App.tsx index a7d11ce7..44d2f7b0 100644 --- a/packages/overlay/src/App.tsx +++ b/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>({}); 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} /> diff --git a/packages/overlay/src/components/Debugger.tsx b/packages/overlay/src/components/Debugger.tsx index 5d4e0d1e..6241b458 100644 --- a/packages/overlay/src/components/Debugger.tsx +++ b/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 ( @@ -80,17 +82,19 @@ export default function Debugger({ -
+ {!skipSidecar && (
- {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'} -
+ className={classNames('ml-2 flex items-center gap-x-2 pl-2 text-xs', isOnline ? '' : 'text-red-400')} + > +
+ {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'} +
+ )}
{showClearEventsButton && ( diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx index 5ad35a86..6e775b07 100644 --- a/packages/overlay/src/index.tsx +++ b/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} /> , diff --git a/packages/overlay/src/types.ts b/packages/overlay/src/types.ts index eff27182..bb84336c 100644 --- a/packages/overlay/src/types.ts +++ b/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 = {