cleanup: remove old code/files, improve treeshaking

.npmrc

@@ -0,0 +1,2 @@
+prefer-workspace-packages=true
+link-workspace-packages=true

packages/scan/package.json

@@ -228,7 +228,7 @@
     "@preact/signals": "^1.3.1",
     "@rollup/pluginutils": "^5.1.3",
     "@types/node": "^20.17.9",
-    "bippy": "0.2.7",
+    "bippy": "^0.3.7",
     "esbuild": "^0.24.0",
     "estree-walker": "^3.0.3",
     "kleur": "^4.1.5",

packages/scan/src/auto.ts

@@ -1,9 +1,10 @@
-import { scan } from './index';
-import { init } from './install-hook';
+// Prioritize bippy side-effect
+import 'bippy';
 
-init();
+import { IS_CLIENT } from '~web/utils/constants';
+import { scan } from './index';
 
-if (typeof window !== 'undefined') {
+if (IS_CLIENT) {
   scan();
   window.reactScan = scan;
 }

packages/scan/src/core/index.ts

@@ -9,10 +9,10 @@ import {
 import type { ComponentType } from 'preact';
 import type { ReactNode } from 'preact/compat';
 import type { RenderData } from 'src/core/utils';
-// import { initReactScanOverlay } from '~web/overlay';
 import { initReactScanInstrumentation } from 'src/new-outlines';
 import styles from '~web/assets/css/styles.css';
 import { createToolbar } from '~web/toolbar';
+import { IS_CLIENT } from '~web/utils/constants';
 import { readLocalStorage, saveLocalStorage } from '~web/utils/helpers';
 import type { Outline } from '~web/utils/outline';
 import type { States } from '~web/views/inspector/utils';
@@ -272,9 +272,7 @@ export type ChangesListener = (changes: ChangesPayload) => void;
 
 export const Store: StoreType = {
   wasDetailsOpen: signal(true),
-  isInIframe: signal(
-    typeof window !== 'undefined' && window.self !== window.top,
-  ),
+  isInIframe: signal(IS_CLIENT && window.self !== window.top),
   inspectState: signal<States>({
     kind: 'uninitialized',
   }),
@@ -483,7 +481,7 @@ export const getIsProduction = () => {
 
 export const start = () => {
   try {
-    if (typeof window === 'undefined') {
+    if (!IS_CLIENT) {
       return;
     }
 
@@ -514,7 +512,7 @@ export const start = () => {
       initToolbar(!!options.value.showToolbar);
     });
 
-    const isUsedInBrowserExtension = typeof window !== 'undefined';
+    const isUsedInBrowserExtension = IS_CLIENT;
     if (!Store.monitor.value && !isUsedInBrowserExtension) {
       setTimeout(() => {
         if (isInstrumentationActive()) return;

packages/scan/src/core/monitor/constants.ts

@@ -13,21 +13,22 @@
  * From empirical ad-hoc testing, this breaks in certain scenarios.
  */
 import * as React from 'react';
+import { IS_CLIENT } from '~web/utils/constants';
 
 /**
  * useRef will be undefined in "use server"
  *
  * @see https://nextjs.org/docs/messages/react-client-hook-in-server-component
  */
-export const isRSC = () => !React.useRef;
-export const isSSR = () => typeof window === 'undefined' || isRSC();
+const isRSC = () => !React.useRef;
+export const isSSR = () => !IS_CLIENT || isRSC();
 
 interface WindowWithCypress extends Window {
   Cypress?: unknown;
 }
 
 export const isTest =
-  (typeof window !== 'undefined' &&
+  (IS_CLIENT &&
     /**
      * @see https://docs.cypress.io/faq/questions/using-cypress-faq#Is-there-any-way-to-detect-if-my-app-is-running-under-Cypress
      */

packages/scan/src/core/monitor/index.ts

@@ -6,6 +6,7 @@ import {
   isCompositeFiber,
 } from 'bippy';
 import { type FC, useEffect } from 'react';
+import { IS_CLIENT } from '~web/utils/constants';
 import {
   type MonitoringOptions,
   ReactScanInternals,
@@ -76,7 +77,7 @@ export const Monitoring: FC<MonitoringProps> = ({
   // When using Monitoring without framework, we need to compute the route from the path and params
   if (!route && path && params) {
     Store.monitor.value.route = computeRoute(path, params);
-  } else if (typeof window !== 'undefined') {
+  } else if (IS_CLIENT) {
     Store.monitor.value.route =
       route ?? path ?? new URL(window.location.toString()).pathname; // this is inaccurate on vanilla react if the path is not provided but used for session route
   }

packages/scan/src/core/monitor/utils.ts

@@ -1,3 +1,4 @@
+import { IS_CLIENT } from '~web/utils/constants';
 import { onIdle } from '~web/utils/helpers';
 import { isSSR } from './constants';
 import { Device, type Session } from './types';
@@ -132,10 +133,8 @@ export const getSession = async ({
   return session;
 };
 
-
-
 export const not_globally_unique_generateId = () => {
-  if (typeof window === 'undefined') {
+  if (!IS_CLIENT) {
     return '0';
   }
 
@@ -146,4 +145,4 @@ export const not_globally_unique_generateId = () => {
   }
   // @ts-expect-error
   return `${++window.reactScanIdCounter}`;
-};
+};

packages/scan/src/index.ts

@@ -1,5 +1,4 @@
-import { init } from './install-hook'; // Initialize RDT hook
-
-init();
+// Bippy has a side-effect that installs the hook.
+import 'bippy';
 
 export * from './core/index';

packages/scan/src/install-hook.ts

@@ -1,10 +1 @@
-import { installRDTHook } from 'bippy';
-
-// Initialize React DevTools hook
-const init = () => {
-  installRDTHook();
-};
-
-init();
-
-export { init };
+export { getRDTHook as init } from 'bippy';

packages/scan/src/web/components/copy-to-clipboard/index.tsx

@@ -14,7 +14,7 @@ interface CopyToClipboardProps {
   iconSize?: number;
 }
 
-export const CopyToClipboard = memo(
+export const CopyToClipboard = /* @__PURE__ */ memo(
   ({
     text,
     children,