Add @react-scan/component

packages/component/README.md

@@ -0,0 +1,25 @@
+# `@react-scan/component`
+
+## Install
+
+```bash
+npm i react-scan @react-scan/component
+```
+
+```bash
+pnpm add react-scan @react-scan/component
+```
+
+## Usage
+
+```jsx
+import { ReactScan } from "@react-scan/component";
+
+export default function App() {
+  return (
+    <>
+      <ReactScan enabled />
+    </>
+  );
+}
+```

packages/component/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@react-scan/component",
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "react": ">=16.9",
+    "react-scan": "^0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-scan": "^0.1.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "exports": {
+    "types": "./dist/react-scan-component.d.ts",
+    "import": "./dist/react-scan-component.js",
+    "require": "./dist/react-scan-component.cjs",
+    "default": "./dist/react-scan-component.cjs"
+  }
+}

packages/component/src/index.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { type Options, Store, scan } from 'react-scan';
+import { type JSX, useEffect } from 'react';
+
+export interface ReactScanProps extends Options {
+  isInIFrame?: boolean;
+}
+
+export function ReactScan({
+  isInIFrame,
+  enabled,
+  dangerouslyForceRunInProduction,
+  log,
+  showToolbar,
+  animationSpeed,
+  trackUnnecessaryRenders,
+  onCommitFinish,
+  onCommitStart,
+  onPaintFinish,
+  onPaintStart,
+  onRender,
+}: ReactScanProps): JSX.Element {
+  useEffect(() => {
+    Store.isInIframe.value = !!isInIFrame;
+  }, [isInIFrame]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    scan({
+      enabled,
+      dangerouslyForceRunInProduction,
+      log,
+      showToolbar,
+      animationSpeed,
+      trackUnnecessaryRenders,
+      onCommitFinish,
+      onCommitStart,
+      onPaintFinish,
+      onPaintStart,
+      onRender,
+    });
+    return () => {
+      scan({ enabled: false });
+    };
+  }, [
+    enabled,
+    dangerouslyForceRunInProduction,
+    log,
+    showToolbar,
+    animationSpeed,
+    trackUnnecessaryRenders,
+    onCommitFinish,
+    onCommitStart,
+    onPaintFinish,
+    onPaintStart,
+    onRender,
+  ]);
+  return <></>;
+}

packages/component/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src", "types", "test"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "types": ["vite/client"],
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "esModuleInterop": true,
+    "target": "ESNext",
+    "useDefineForClassFields": false,
+    "declarationMap": true
+  }
+}

packages/component/vite.config.ts

@@ -0,0 +1,30 @@
+import react from '@vitejs/plugin-react';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import preserveDirectives from 'rollup-preserve-directives';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ReactScan',
+      // the proper extensions will be added
+      fileName: 'react-scan-component',
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-scan', 'react/jsx-runtime'],
+    },
+  },
+  plugins: [
+    preserveDirectives(),
+    react(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+});