react-reinspect 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -101,9 +101,13 @@ You are a senior React code agent, your task is to integrate react-reinspect to
|
|
|
101
101
|
Do all of the following in one pass:
|
|
102
102
|
1) Install `react-reinspect` using this repo's package manager.
|
|
103
103
|
2) Turn it on in dev mode ONLY by wiring `ReinspectProvider` at app root.
|
|
104
|
+
- Vite: use `enabled: import.meta.env.DEV`
|
|
105
|
+
- Next.js: use `enabled: process.env.NODE_ENV !== 'production'`
|
|
106
|
+
- Next App Router: mount a client `Providers` component from `app/layout.tsx`
|
|
107
|
+
- Next Pages Router: mount `ReinspectProvider` in `pages/_app.tsx`
|
|
104
108
|
3) If this app uses Vite, add `reinspectAutoDiscoverPlugin` from `react-reinspect/vite-plugin` in `vite.config.*`.
|
|
105
109
|
4) If this app uses Next.js (webpack mode), wrap the Next config with `withReinspectAutoDiscover` from `react-reinspect/next-plugin`.
|
|
106
|
-
5) If Next.js is running with Turbopack, either switch dev to webpack for auto-discovery transforms or fall back to manual wrapping (`withReinspect`).
|
|
110
|
+
5) If Next.js is running with Turbopack, either switch dev to webpack for auto-discovery transforms (`next dev --webpack`) or fall back to manual wrapping (`withReinspect`).
|
|
107
111
|
6) Keep production safe (e.g.: `enabled: import.meta.env.DEV` or however we manage dev/prod in this repo.).
|
|
108
112
|
7) Run validation (build/tests if available) and fix any issues.
|
|
109
113
|
8) Output a concise summary with changed files and how to use it.
|
|
@@ -124,6 +128,40 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
|
124
128
|
return <ReinspectProvider config={reinspectConfig}>{children}</ReinspectProvider>
|
|
125
129
|
}
|
|
126
130
|
|
|
131
|
+
// Next.js App Router (app/providers.tsx)
|
|
132
|
+
'use client'
|
|
133
|
+
import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
|
|
134
|
+
import 'react-reinspect/style.css'
|
|
135
|
+
|
|
136
|
+
const nextReinspectConfig: ReinspectConfig = {
|
|
137
|
+
enabled: process.env.NODE_ENV !== 'production',
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
141
|
+
return (
|
|
142
|
+
<ReinspectProvider config={nextReinspectConfig}>
|
|
143
|
+
{children}
|
|
144
|
+
</ReinspectProvider>
|
|
145
|
+
)
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Next.js App Router mount (app/layout.tsx)
|
|
149
|
+
import { Providers } from './providers'
|
|
150
|
+
|
|
151
|
+
export default function RootLayout({
|
|
152
|
+
children,
|
|
153
|
+
}: {
|
|
154
|
+
children: React.ReactNode
|
|
155
|
+
}) {
|
|
156
|
+
return (
|
|
157
|
+
<html lang="en">
|
|
158
|
+
<body>
|
|
159
|
+
<Providers>{children}</Providers>
|
|
160
|
+
</body>
|
|
161
|
+
</html>
|
|
162
|
+
)
|
|
163
|
+
}
|
|
164
|
+
|
|
127
165
|
For auto-discovery setup, apply one of these depending on framework:
|
|
128
166
|
|
|
129
167
|
// Vite
|
|
@@ -141,6 +179,9 @@ import { withReinspectAutoDiscover } from 'react-reinspect/next-plugin'
|
|
|
141
179
|
const nextConfig = {}
|
|
142
180
|
export default withReinspectAutoDiscover(nextConfig)
|
|
143
181
|
|
|
182
|
+
// Next.js dev script for auto-discovery:
|
|
183
|
+
// package.json -> "dev": "next dev --webpack"
|
|
184
|
+
|
|
144
185
|
Output format I want from you:
|
|
145
186
|
- What changed (bullet list)
|
|
146
187
|
- Why this is safe in production
|
|
@@ -151,6 +192,8 @@ Output format I want from you:
|
|
|
151
192
|
## Manual Quick Start
|
|
152
193
|
### 1) Wrap your app with `ReinspectProvider`
|
|
153
194
|
|
|
195
|
+
Vite:
|
|
196
|
+
|
|
154
197
|
```tsx
|
|
155
198
|
import {
|
|
156
199
|
ReinspectProvider,
|
|
@@ -170,6 +213,67 @@ export function AppProviders({ children }: { children: React.ReactNode }) {
|
|
|
170
213
|
}
|
|
171
214
|
```
|
|
172
215
|
|
|
216
|
+
Next.js App Router:
|
|
217
|
+
|
|
218
|
+
```tsx
|
|
219
|
+
// app/providers.tsx
|
|
220
|
+
'use client'
|
|
221
|
+
|
|
222
|
+
import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
|
|
223
|
+
import 'react-reinspect/style.css'
|
|
224
|
+
|
|
225
|
+
const reinspectConfig: ReinspectConfig = {
|
|
226
|
+
enabled: process.env.NODE_ENV !== 'production',
|
|
227
|
+
// startActive: true,
|
|
228
|
+
// showFloatingToggle: true,
|
|
229
|
+
// inspectMode: 'first-party',
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
233
|
+
return <ReinspectProvider config={reinspectConfig}>{children}</ReinspectProvider>
|
|
234
|
+
}
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
```tsx
|
|
238
|
+
// app/layout.tsx
|
|
239
|
+
import { Providers } from './providers'
|
|
240
|
+
|
|
241
|
+
export default function RootLayout({
|
|
242
|
+
children,
|
|
243
|
+
}: {
|
|
244
|
+
children: React.ReactNode
|
|
245
|
+
}) {
|
|
246
|
+
return (
|
|
247
|
+
<html lang="en">
|
|
248
|
+
<body>
|
|
249
|
+
<Providers>{children}</Providers>
|
|
250
|
+
</body>
|
|
251
|
+
</html>
|
|
252
|
+
)
|
|
253
|
+
}
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
Next.js Pages Router:
|
|
257
|
+
|
|
258
|
+
```tsx
|
|
259
|
+
// pages/_app.tsx
|
|
260
|
+
import type { AppProps } from 'next/app'
|
|
261
|
+
import { ReinspectProvider, type ReinspectConfig } from 'react-reinspect'
|
|
262
|
+
import 'react-reinspect/style.css'
|
|
263
|
+
|
|
264
|
+
const reinspectConfig: ReinspectConfig = {
|
|
265
|
+
enabled: process.env.NODE_ENV !== 'production',
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
export default function App({ Component, pageProps }: AppProps) {
|
|
269
|
+
return (
|
|
270
|
+
<ReinspectProvider config={reinspectConfig}>
|
|
271
|
+
<Component {...pageProps} />
|
|
272
|
+
</ReinspectProvider>
|
|
273
|
+
)
|
|
274
|
+
}
|
|
275
|
+
```
|
|
276
|
+
|
|
173
277
|
### 2) Enable auto-discovery transforms (pick your framework)
|
|
174
278
|
|
|
175
279
|
Vite:
|
|
@@ -196,6 +300,17 @@ export default withReinspectAutoDiscover(nextConfig)
|
|
|
196
300
|
```
|
|
197
301
|
|
|
198
302
|
If your Next dev server runs with Turbopack, switch to webpack mode for auto-discovery transforms.
|
|
303
|
+
If you keep Turbopack enabled, skip the Next transform plugin and use manual wrapping (`withReinspect`) instead.
|
|
304
|
+
|
|
305
|
+
Next.js webpack dev script example:
|
|
306
|
+
|
|
307
|
+
```json
|
|
308
|
+
{
|
|
309
|
+
"scripts": {
|
|
310
|
+
"dev": "next dev --webpack"
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
```
|
|
199
314
|
|
|
200
315
|
### 3) Use it in the browser
|
|
201
316
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reinspectAutoDiscoverPlugin.d.ts","sourceRoot":"","sources":["../../reinspectAutoDiscoverPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAElC,KAAK,iBAAiB,GAAG,aAAa,GAAG,aAAa,CAAA;AAgBtD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB;AAmQD,wBAAgB,0BAA0B,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAE9D;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,iBAAiB,GACvB,2BAA2B,CAwP7B;AAED,wBAAgB,2BAA2B,IAAI,MAAM,CA2CpD"}
|
|
1
|
+
{"version":3,"file":"reinspectAutoDiscoverPlugin.d.ts","sourceRoot":"","sources":["../../src/plugin/reinspectAutoDiscoverPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAElC,KAAK,iBAAiB,GAAG,aAAa,GAAG,aAAa,CAAA;AAgBtD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB;AAmQD,wBAAgB,0BAA0B,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAE9D;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,iBAAiB,GACvB,2BAA2B,CAwP7B;AAED,wBAAgB,2BAA2B,IAAI,MAAM,CA2CpD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reinspectNextAutoDiscoverLoader.d.ts","sourceRoot":"","sources":["../../reinspectNextAutoDiscoverLoader.ts"],"names":[],"mappings":"AAQA,UAAU,0BAA0B;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,UAAU,iBAAiB;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,0BAA0B,CAAA;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACzE;AA4DD,MAAM,CAAC,OAAO,UAAU,+BAA+B,CACrD,IAAI,EAAE,iBAAiB,EACvB,UAAU,EAAE,MAAM,GACjB,MAAM,GAAG,IAAI,CAyBf"}
|
|
1
|
+
{"version":3,"file":"reinspectNextAutoDiscoverLoader.d.ts","sourceRoot":"","sources":["../../src/plugin/reinspectNextAutoDiscoverLoader.ts"],"names":[],"mappings":"AAQA,UAAU,0BAA0B;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,UAAU,iBAAiB;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,0BAA0B,CAAA;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACzE;AA4DD,MAAM,CAAC,OAAO,UAAU,+BAA+B,CACrD,IAAI,EAAE,iBAAiB,EACvB,UAAU,EAAE,MAAM,GACjB,MAAM,GAAG,IAAI,CAyBf"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import path from 'node:path';
|
|
2
|
-
import { shouldSkipThirdPartyModule, transformModuleForAutoDiscover, } from './reinspectAutoDiscoverPlugin';
|
|
2
|
+
import { shouldSkipThirdPartyModule, transformModuleForAutoDiscover, } from './reinspectAutoDiscoverPlugin.js';
|
|
3
3
|
const SUPPORTED_FILE_PATTERN = /\.[cm]?[jt]sx?$/;
|
|
4
4
|
function normalizeModuleId(id) {
|
|
5
5
|
return id.split(path.sep).join('/');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reinspectNextPlugin.d.ts","sourceRoot":"","sources":["../../reinspectNextPlugin.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,UAAU,kBAAkB;IAC1B,GAAG,EAAE,OAAO,CAAA;CACb;AAED,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE;QACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAC5B,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAA;CAClD;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;CAC1B;AAED,UAAU,iBAAiB;IACzB,MAAM,CAAC,EAAE,uBAAuB,CAAA;CACjC;AAED,KAAK,mBAAmB,GAAG,CACzB,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,kBAAkB,KACxB,iBAAiB,CAAA;AAEtB,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAA;CAC9B;AAqED,wBAAgB,yBAAyB,CACvC,UAAU,GAAE,cAAmB,EAC/B,aAAa,GAAE,0BAA+B,GAC7C,cAAc,CAqBhB"}
|
|
1
|
+
{"version":3,"file":"reinspectNextPlugin.d.ts","sourceRoot":"","sources":["../../src/plugin/reinspectNextPlugin.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,UAAU,kBAAkB;IAC1B,GAAG,EAAE,OAAO,CAAA;CACb;AAED,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE;QACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAC5B,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAA;CAClD;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;CAC1B;AAED,UAAU,iBAAiB;IACzB,MAAM,CAAC,EAAE,uBAAuB,CAAA;CACjC;AAED,KAAK,mBAAmB,GAAG,CACzB,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,kBAAkB,KACxB,iBAAiB,CAAA;AAEtB,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAA;CAC9B;AAqED,wBAAgB,yBAAyB,CACvC,UAAU,GAAE,cAAmB,EAC/B,aAAa,GAAE,0BAA+B,GAC7C,cAAc,CAqBhB"}
|