@dwntgrnd/devlens 0.1.0 → 0.1.1
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 +29 -16
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ If your project already runs with `npm run dev`, you're ready.
|
|
|
39
39
|
### Install the package
|
|
40
40
|
|
|
41
41
|
```bash
|
|
42
|
-
npm install devlens
|
|
42
|
+
npm install @dwntgrnd/devlens
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
DevLens expects these packages in your project. If you're using Next.js with Tailwind, you almost certainly have them already:
|
|
@@ -57,18 +57,32 @@ npm install lucide-react
|
|
|
57
57
|
|
|
58
58
|
### Add DevLens to your layout
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
DevLens is a client component that needs a small wrapper to work with Next.js App Router layouts. Create a providers file and update your layout to use it:
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
// app/providers.tsx
|
|
64
|
+
'use client';
|
|
65
|
+
import { DevLens } from '@dwntgrnd/devlens';
|
|
66
|
+
|
|
67
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
68
|
+
return (
|
|
69
|
+
<>
|
|
70
|
+
{children}
|
|
71
|
+
{process.env.NODE_ENV === 'development' && <DevLens />}
|
|
72
|
+
</>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
61
76
|
|
|
62
77
|
```tsx
|
|
63
78
|
// app/layout.tsx
|
|
64
|
-
import {
|
|
79
|
+
import { Providers } from './providers';
|
|
65
80
|
|
|
66
81
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
67
82
|
return (
|
|
68
83
|
<html lang="en">
|
|
69
84
|
<body>
|
|
70
|
-
{children}
|
|
71
|
-
{process.env.NODE_ENV === 'development' && <DevLens />}
|
|
85
|
+
<Providers>{children}</Providers>
|
|
72
86
|
</body>
|
|
73
87
|
</html>
|
|
74
88
|
);
|
|
@@ -113,7 +127,7 @@ If you want human-readable names for your tokens or want to organize them into c
|
|
|
113
127
|
|
|
114
128
|
```tsx
|
|
115
129
|
// devlens.config.ts
|
|
116
|
-
import type { DevLensConfig } from 'devlens';
|
|
130
|
+
import type { DevLensConfig } from '@dwntgrnd/devlens';
|
|
117
131
|
|
|
118
132
|
export const devlensConfig: DevLensConfig = {
|
|
119
133
|
tokenOverrides: {
|
|
@@ -138,18 +152,17 @@ export const devlensConfig: DevLensConfig = {
|
|
|
138
152
|
Then pass the config to DevLens in your layout:
|
|
139
153
|
|
|
140
154
|
```tsx
|
|
141
|
-
// app/
|
|
142
|
-
|
|
155
|
+
// app/providers.tsx
|
|
156
|
+
'use client';
|
|
157
|
+
import { DevLens } from '@dwntgrnd/devlens';
|
|
143
158
|
import { devlensConfig } from '../devlens.config';
|
|
144
159
|
|
|
145
|
-
export
|
|
160
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
146
161
|
return (
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
</body>
|
|
152
|
-
</html>
|
|
162
|
+
<>
|
|
163
|
+
{children}
|
|
164
|
+
{process.env.NODE_ENV === 'development' && <DevLens {...devlensConfig} />}
|
|
165
|
+
</>
|
|
153
166
|
);
|
|
154
167
|
}
|
|
155
168
|
```
|
|
@@ -266,7 +279,7 @@ To enable this, add a page route for the detached window:
|
|
|
266
279
|
|
|
267
280
|
```tsx
|
|
268
281
|
// app/dev/devlens-detached/page.tsx
|
|
269
|
-
import { DevLens } from 'devlens';
|
|
282
|
+
import { DevLens } from '@dwntgrnd/devlens';
|
|
270
283
|
import { devlensConfig } from '../../../devlens.config';
|
|
271
284
|
|
|
272
285
|
export default function DevLensDetachedPage() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dwntgrnd/devlens",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Live design token editor and element inspector for Next.js + Tailwind CSS projects",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"license": "MIT",
|
|
46
46
|
"repository": {
|
|
47
47
|
"type": "git",
|
|
48
|
-
"url": ""
|
|
48
|
+
"url": "https://github.com/dwntgrnd/devlens.git"
|
|
49
49
|
},
|
|
50
50
|
"keywords": [
|
|
51
51
|
"design-tokens",
|