chore: move react-scan to peerDeps and make optional so cli install i…

…s faster

apps/onestack.dev/data/docs/configuration.mdx

@@ -83,7 +83,7 @@ export default {
         // enable the new react compiler
         compiler: true,
 
-        // react-scan support
+        // react-scan support, must add the react-scan package to your package.json
         // native is experimental, web is better supported
         scan: true | 'web' | 'native',
       },
@@ -205,7 +205,15 @@ Enables the new [React Compiler](https://react.dev/learn/react-compiler) for bot
 
 ### scan: boolean
 
-Enables [React Scan](https://react-scan.com). Helps you re-rendering and other performance issues. We disabled native support for now as it was running too slow, [follow this PR](https://github.com/aidenybai/react-scan/pull/23) for their status on getting native to stability (if you override the react-scan version with one from that PR, it should work on native).
+Enables [React Scan](https://react-scan.com). Helps you re-rendering and other performance issues.
+
+You'll need to install react-scan first:
+
+```sh
+npm install react-scan
+```
+
+We've disabled native support until [this PR](https://github.com/aidenybai/react-scan/pull/23) is released.
 
 ## deps
 

examples/one-zero/README.md

@@ -3,7 +3,7 @@
 Install packages with yarn:
 
 ```sh
-yarn
+npm install react react-dom
 ```
 
 For login, we have set up Github auth with [Better Auth](https://www.better-auth.com/) as an example.

packages/one/package.json

@@ -123,7 +123,6 @@
     "react-native-reanimated": "~3.16.5",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "4.4.0",
-    "react-scan": "^0.1.3",
     "ts-pattern": "^5.6.2",
     "use-latest-callback": "^0.2.3",
     "vite": "^6.1.0",
@@ -144,7 +143,16 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "react-native": "*"
+    "react-native": "*",
+    "react-scan": "^0.1.3"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-scan": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"

packages/one/src/createApp.native.tsx

@@ -1,8 +1,7 @@
 import { AppRegistry, LogBox } from 'react-native' // This should be the first import as it might set up global variables that are needed for the other imports
 import './polyfills-mobile'
-import './setup'
 import { Root } from './Root'
-// import { ReactScan } from 'react-scan/native'
+import './setup'
 
 export type CreateAppProps = { routes: Record<string, () => Promise<unknown>> }
 
@@ -13,13 +12,6 @@ export function createApp(options: CreateAppProps): void {
   const App = () => {
     let contents = <Root isClient routes={options.routes} path="/" />
 
-    // if (process.env.ONE_ENABLE_REACT_SCAN) {
-    //   console.warn(`React Scan enabled with options: ${process.env.ONE_ENABLE_REACT_SCAN}`)
-    //   contents = (
-    //     <ReactScan options={JSON.parse(process.env.ONE_ENABLE_REACT_SCAN)}>{contents}</ReactScan>
-    //   )
-    // }
-
     return contents
   }
 

packages/one/src/setup.ts

@@ -1,4 +1,5 @@
 if (process.env.ONE_ENABLE_REACT_SCAN) {
+  // @ts-expect-error
   import('react-scan').then(({ scan }) => {
     scan(JSON.parse(`${process.env.ONE_ENABLE_REACT_SCAN}`))
   })

packages/one/src/vite/types.ts

@@ -1,5 +1,4 @@
 import type { GetTransform } from '@vxrn/compiler'
-import type { Options as ReactScanOptions } from 'react-scan'
 import type { PluginOptions as TSConfigPluginOptions } from 'vite-tsconfig-paths'
 import type {
   AutoDepOptimizationOptions,
@@ -23,6 +22,15 @@ export type RouteInfo<TRegex = string> = {
   isNotFound?: boolean
 }
 
+interface ReactScanOptions {
+  log?: boolean
+  showToolbar?: boolean
+  animationSpeed?: 'slow' | 'fast' | 'off'
+  trackUnnecessaryRenders?: boolean
+  showFPS?: boolean
+  _debug?: 'verbose' | false
+}
+
 export namespace One {
   export type Options = Omit<VXRNOptions, keyof PluginOptions> & PluginOptions
 
@@ -104,6 +112,11 @@ export namespace One {
 
     react?: {
       compiler?: boolean | PluginPlatformTarget
+
+      /**
+       * Enable react-scan, we've given a minimal subset of options here
+       * So long as the options can be serialized they should work here
+       */
       scan?:
         | boolean
         | PluginPlatformTarget

packages/one/types/vite/types.d.ts

@@ -1,5 +1,4 @@
 import type { GetTransform } from '@vxrn/compiler';
-import type { Options as ReactScanOptions } from 'react-scan';
 import type { PluginOptions as TSConfigPluginOptions } from 'vite-tsconfig-paths';
 import type { AutoDepOptimizationOptions, DepOptimize, DepPatch, AfterBuildProps as VXRNAfterBuildProps, VXRNBuildOptions, VXRNOptions } from 'vxrn';
 import type { RouteNode } from '../router/Route';
@@ -14,6 +13,14 @@ export type RouteInfo<TRegex = string> = {
     type: One.RouteType;
     isNotFound?: boolean;
 };
+interface ReactScanOptions {
+    log?: boolean;
+    showToolbar?: boolean;
+    animationSpeed?: 'slow' | 'fast' | 'off';
+    trackUnnecessaryRenders?: boolean;
+    showFPS?: boolean;
+    _debug?: 'verbose' | false;
+}
 export declare namespace One {
     export type Options = Omit<VXRNOptions, keyof PluginOptions> & PluginOptions;
     export type RouteRenderMode = 'ssg' | 'spa' | 'ssr';
@@ -84,6 +91,10 @@ export declare namespace One {
         transform?: GetTransform;
         react?: {
             compiler?: boolean | PluginPlatformTarget;
+            /**
+             * Enable react-scan, we've given a minimal subset of options here
+             * So long as the options can be serialized they should work here
+             */
             scan?: boolean | PluginPlatformTarget | (Record<PluginPlatformTarget, ReactScanOptions> & {
                 options?: ReactScanOptions;
             });
@@ -253,4 +264,5 @@ export declare namespace One {
     };
     export {};
 }
+export {};
 //# sourceMappingURL=types.d.ts.map