docs(README): Update installation guide and roadmap

Author: aidenybai

README.md

@@ -14,15 +14,13 @@ It's also just JavaScript, so you drop it in anywhere – script tag, npm, you n
 
 ## Install
 
-The simplest way to use it is to add this script to your app:
+Get started in 5 seconds, add this script to your app:
 
 ```html
 <!-- import this BEFORE any scripts -->
 <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
 ```
 
-Or, if you prefer, install via npm:
-
 ```bash
 npm install react-scan
 ```
@@ -35,24 +33,24 @@ import React from 'react';
 
 scan({
   enabled: true,
-  log: true, // logs render info to console
+  log: true, // logs render info to console (default: false)
+  clearLog: false, // clears the console per group of renders (default: false)
 });
 ```
 
+And voilà! You're ready to go.
+
 > Looking for a more advanced version? Check out [Million Lint](https://million.dev)!
 
 ## How does it work?
 
-## Future work
-
-- [ ] problem finder
-- [ ] FPS counter
-- [ ] combobox ("total blocking time")
-- [ ] vercel toolbar comment
-- [ ] select open certain components
-- [ ] only show the renders that matter
-- [ ] wrap scan programmatically
-- [ ] scan auto mode
-- [ ] only show when there's main thread blocking
-- [ ] add the stop im changing dude
-- [ ] list of components and props
+## Future roadmap
+
+- [ ] Chrome extension
+- [ ] Cleanup config options
+- [ ] Name / explain the actual problem
+- [ ] Add more problem detections other than props
+- [ ] Simple FPS counter
+- [ ] Drag and select areas of the screen to scan
+- [ ] Mode to only show on main thread blocking
+- [ ] Add a funny mascot, like the ["Stop I'm Changing" dude](https://www.youtube.com/shorts/FwOZdX7bDKI?app=desktop)

src/index.ts

@@ -11,7 +11,7 @@ import {
 import { MONO_FONT } from './constants';
 import { traverseFiber, registerDevtoolsHook, getType } from './fiber';
 import type { Outline, ScanOptions, WithScanOptions } from './types';
-import { isInIframe } from './utils';
+import { isInIframe, isProd } from './utils';
 
 const DEFAULT_OPTIONS: ScanOptions & WithScanOptions = {
   enabled: true,
@@ -53,7 +53,9 @@ export const scan = (
 ) => {
   currentOptions = options ?? currentOptions;
 
-  if (inited || isInIframe() || currentOptions.enabled === false) return;
+  if (inited || isInIframe() || currentOptions.enabled === false || isProd()) {
+    return;
+  }
   inited = true;
 
   // eslint-disable-next-line no-console
@@ -63,7 +65,7 @@ export const scan = (
   );
 
   const ctx = createFullscreenCanvas();
-  const indicator = createStatus();
+  const status = createStatus();
 
   const handleCommitFiberRoot = (_rendererID: number, root: FiberRoot) => {
     const outlines: Outline[] = [];
@@ -116,7 +118,7 @@ export const scan = (
       }
       let text = `×${totalCount}`;
       if (totalSelfTime > 0) text += ` (${totalSelfTime.toFixed(2)}ms)`;
-      indicator.textContent = text;
+      status.textContent = `${text} · react-scan`;
       flushOutlines(ctx);
     }
   };

src/overlay.ts

@@ -401,6 +401,10 @@ export const createFullscreenCanvas = () => {
   });
 
   onIdle(() => {
+    const prevCanvas = document.getElementById('react-scan-canvas');
+    if (prevCanvas) {
+      prevCanvas.remove();
+    }
     document.documentElement.appendChild(canvas);
   });
 
@@ -409,30 +413,44 @@ export const createFullscreenCanvas = () => {
 
 export const createStatus = () => {
   const status = createElement(
-    `<div id="react-scan-indicator" style="position:fixed;bottom:3px;right:3px;background:rgba(0,0,0,0.5);padding:4px 8px;border-radius:4px;color:white;z-index:2147483647;font-family:${MONO_FONT}" aria-hidden="true">hide scanner</div>`,
+    `<div id="react-scan-status" title="Number of unnecessary renders and time elapsed" style="position:fixed;bottom:3px;right:3px;background:rgba(0,0,0,0.5);padding:4px 8px;border-radius:4px;color:white;z-index:2147483647;font-family:${MONO_FONT}" aria-hidden="true">hide scanner</div>`,
   ) as HTMLDivElement;
 
-  let isHidden = false;
-  status.addEventListener('click', () => {
+  let isHidden = localStorage.getItem('react-scan-hidden') === 'true';
+
+  const updateVisibility = () => {
     const canvas = document.getElementById('react-scan-canvas');
     if (!canvas) return;
-    isHidden = !isHidden;
     canvas.style.display = isHidden ? 'none' : 'block';
-    status.textContent = `${isHidden ? 'Start' : 'Stop'} scanning`;
+    status.textContent = isHidden ? 'start ►' : 'stop ⏹';
     isPaused = isHidden;
     if (isPaused) {
       activeOutlines = [];
       pendingOutlines = [];
     }
+    localStorage.setItem('react-scan-hidden', isHidden.toString());
+  };
+
+  updateVisibility();
+
+  status.addEventListener('click', () => {
+    isHidden = !isHidden;
+    updateVisibility();
   });
+
   status.addEventListener('mouseenter', () => {
-    status.textContent = `${isHidden ? 'Start' : 'Stop'} scanning`;
+    status.textContent = isHidden ? 'start ►' : 'stop ⏹';
     status.style.backgroundColor = 'rgba(0,0,0,1)';
   });
+
   status.addEventListener('mouseleave', () => {
     status.style.backgroundColor = 'rgba(0,0,0,0.5)';
   });
 
+  const prevElement = document.getElementById('react-scan-status');
+  if (prevElement) {
+    prevElement.remove();
+  }
   document.documentElement.appendChild(status);
 
   return status;

src/utils.ts

@@ -72,6 +72,11 @@ export const isInIframe = () => {
   }
 };
 
+const tempDivElement = React.createElement('div');
+export const isProd = () => {
+  return '_self' in tempDivElement;
+};
+
 export const NO_OP = () => {
   /**/
 };

test/index.html

@@ -3,14 +3,54 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>React Scan</title>
+    <meta name="title" content="React Scan" />
+    <meta
+      name="description"
+      content="React Scan automatically detects and highlights components that cause performance issues in your React app. Drop it in anywhere – script tag, npm, you name it!"
+    />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://react-scan.million.dev" />
+    <meta property="og:title" content="React Scan" />
+    <meta
+      property="og:description"
+      content="React Scan automatically detects and highlights components that cause performance issues in your React app. Drop it in anywhere – script tag, npm, you name it!"
+    />
+    <meta
+      property="og:image"
+      content="https://react-scan.million.dev/banner.png"
+    />
+
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://react-scan.million.dev" />
+    <meta property="twitter:title" content="React Scan" />
+    <meta
+      property="twitter:description"
+      content="React Scan automatically detects and highlights components that cause performance issues in your React app. Drop it in anywhere – script tag, npm, you name it!"
+    />
+    <meta
+      property="twitter:image"
+      content="https://react-scan.million.dev/banner.png"
+    />
+
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Geist+Mono:[email protected]&family=Geist:[email protected]&display=swap"
       rel="stylesheet"
     />
+
     <link rel="icon" href="/logo.svg" type="image/svg+xml" />
-    <title>react-scan</title>
+
+    <meta
+      name="keywords"
+      content="react, performance, debugging, developer tools, web development, javascript"
+    />
+    <meta name="author" content="Aiden Bai" />
+    <meta name="theme-color" content="#8b5cf6" />
+    <link rel="canonical" href="https://react-scan.million.dev" />
   </head>
   <body>
     <div id="root"></div>