@devlens/react 1.0.0 → 2.0.0
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 +79 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# @devlens/react
|
|
2
|
+
|
|
3
|
+
DevLens React integration -- automatic runtime error detection for React applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @devlens/core @devlens/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Peer dependencies:** React >= 17.0.0
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { DevLensProvider, DevLensErrorBoundary } from '@devlens/react';
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<DevLensProvider>
|
|
21
|
+
<DevLensErrorBoundary>
|
|
22
|
+
<YourApp />
|
|
23
|
+
</DevLensErrorBoundary>
|
|
24
|
+
</DevLensProvider>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Guarded State
|
|
30
|
+
|
|
31
|
+
Automatically detect null/undefined access on state objects:
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
import { useGuardedState } from '@devlens/react';
|
|
35
|
+
|
|
36
|
+
function UserProfile() {
|
|
37
|
+
const [user, setUser] = useGuardedState(initialUser, 'UserProfile');
|
|
38
|
+
|
|
39
|
+
// If user.profile.avatar is null, DevLens auto-logs:
|
|
40
|
+
// [NULL] DevLens [WARN] null-access: Property "avatar" is null at path "user.profile.avatar"
|
|
41
|
+
return <img src={user.profile.avatar} />;
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Watch Render Data
|
|
46
|
+
|
|
47
|
+
Monitor multiple values for null/undefined:
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { useGuardedEffect } from '@devlens/react';
|
|
51
|
+
|
|
52
|
+
function Dashboard({ user, posts, settings }) {
|
|
53
|
+
useGuardedEffect({ user, posts, settings }, 'Dashboard');
|
|
54
|
+
|
|
55
|
+
// [RENDER] DevLens [WARN] render-data: "posts" is undefined in Dashboard
|
|
56
|
+
return <div>...</div>;
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## API Reference
|
|
61
|
+
|
|
62
|
+
| Export | Description |
|
|
63
|
+
|--------|-------------|
|
|
64
|
+
| `DevLensProvider` | Wrapper component, initializes DevLens |
|
|
65
|
+
| `DevLensErrorBoundary` | Error boundary with DevLens reporting |
|
|
66
|
+
| `useDevLens()` | Access the engine instance |
|
|
67
|
+
| `useGuardedState(initial, label?)` | useState with null/undefined detection |
|
|
68
|
+
| `useGuardedEffect(data, label?)` | Watch data for null/undefined |
|
|
69
|
+
|
|
70
|
+
## Details
|
|
71
|
+
|
|
72
|
+
- ~5KB ESM bundle
|
|
73
|
+
- Dual ESM + CJS output
|
|
74
|
+
- Full TypeScript declarations
|
|
75
|
+
- Production-safe -- auto-disabled in production
|
|
76
|
+
|
|
77
|
+
## License
|
|
78
|
+
|
|
79
|
+
MIT -- [github.com/crashsense/devlens](https://github.com/crashsense/devlens)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devlens/react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "DevLens React integration - automatic error detection for React apps",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"react-dom": ">=17.0.0"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@devlens/core": "
|
|
60
|
+
"@devlens/core": "2.0.0"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@types/node": "^25.3.0",
|