fixdog 0.0.1 → 0.0.2
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/LICENSE +21 -0
- package/README.md +80 -433
- package/dist/api/client.d.ts +74 -0
- package/dist/components/ConversationalInputReact.d.ts +26 -0
- package/dist/components/ElementInfoDisplayReact.d.ts +9 -0
- package/dist/components/FixdogSidebarReact.d.ts +29 -0
- package/dist/fiber.d.ts +9 -0
- package/dist/index.cjs.js +33 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +6 -158
- package/dist/index.esm.js +29 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/inspector-B4F5CBT7.cjs.js +1159 -0
- package/dist/inspector-B4F5CBT7.cjs.js.map +1 -0
- package/dist/inspector-BL2pNjn-.cjs.js +1173 -0
- package/dist/inspector-BL2pNjn-.cjs.js.map +1 -0
- package/dist/inspector-Bg6uSvk0.esm.js +1273 -0
- package/dist/inspector-Bg6uSvk0.esm.js.map +1 -0
- package/dist/inspector-BuOffbVc.cjs.js +1280 -0
- package/dist/inspector-BuOffbVc.cjs.js.map +1 -0
- package/dist/inspector-CNgFkZOU.esm.js +1185 -0
- package/dist/inspector-CNgFkZOU.esm.js.map +1 -0
- package/dist/inspector-CPF1N9dL.esm.js +1185 -0
- package/dist/inspector-CPF1N9dL.esm.js.map +1 -0
- package/dist/inspector-CPGK5Lg7.esm.js +1155 -0
- package/dist/inspector-CPGK5Lg7.esm.js.map +1 -0
- package/dist/inspector-CWcTSREy.cjs.js +1174 -0
- package/dist/inspector-CWcTSREy.cjs.js.map +1 -0
- package/dist/inspector-Cn_bl9Io.cjs.js +1189 -0
- package/dist/inspector-Cn_bl9Io.cjs.js.map +1 -0
- package/dist/inspector-D9DuXirp.cjs.js +1189 -0
- package/dist/inspector-D9DuXirp.cjs.js.map +1 -0
- package/dist/inspector-DQEtAjyM.esm.js +1129 -0
- package/dist/inspector-DQEtAjyM.esm.js.map +1 -0
- package/dist/inspector-DVlU9p44.cjs.js +1189 -0
- package/dist/inspector-DVlU9p44.cjs.js.map +1 -0
- package/dist/inspector-DaRVppX9.cjs.js +1134 -0
- package/dist/inspector-DaRVppX9.cjs.js.map +1 -0
- package/dist/inspector-huqtI2MD.esm.js +1170 -0
- package/dist/inspector-huqtI2MD.esm.js.map +1 -0
- package/dist/inspector-spoCY1tf.esm.js +1169 -0
- package/dist/inspector-spoCY1tf.esm.js.map +1 -0
- package/dist/inspector-tY1kJK5_.esm.js +1185 -0
- package/dist/inspector-tY1kJK5_.esm.js.map +1 -0
- package/dist/inspector.d.ts +43 -0
- package/dist/keyboard.d.ts +10 -0
- package/dist/overlay.d.ts +31 -0
- package/dist/react/InspectorProvider.d.ts +6 -0
- package/dist/react/index.cjs.js +32 -0
- package/dist/react/index.cjs.js.map +1 -0
- package/dist/react/index.esm.js +30 -0
- package/dist/react/index.esm.js.map +1 -0
- package/dist/sidebar/SidebarRuntime.d.ts +8 -0
- package/dist/sidebar-runtime.esm.js +2122 -0
- package/dist/sidebar-runtime.esm.js.map +1 -0
- package/dist/sidebar-runtime.iife.js +2991 -0
- package/dist/styles/sidebarStyles.d.ts +2 -0
- package/dist/styles.d.ts +8 -0
- package/dist/types/sidebar.d.ts +62 -0
- package/dist/types.d.ts +47 -0
- package/dist/utils/cookies.d.ts +10 -0
- package/dist/utils/devMode.d.ts +17 -0
- package/dist/utils/sessionStorage.d.ts +19 -0
- package/package.json +57 -40
- package/USAGE.md +0 -77
- package/dist/client/index.d.mts +0 -110
- package/dist/client/index.d.ts +0 -110
- package/dist/client/index.js +0 -1601
- package/dist/client/index.mjs +0 -1582
- package/dist/client/init.d.mts +0 -67
- package/dist/client/init.d.ts +0 -67
- package/dist/client/init.js +0 -1609
- package/dist/client/init.mjs +0 -1593
- package/dist/index.d.mts +0 -158
- package/dist/index.js +0 -1635
- package/dist/index.mjs +0 -1606
- package/src/api/client.ts +0 -141
- package/src/client/index.ts +0 -75
- package/src/client/init.tsx +0 -78
- package/src/components/ConversationalInputReact.tsx +0 -406
- package/src/components/ElementInfoDisplayReact.tsx +0 -84
- package/src/components/UiDogSidebarReact.tsx +0 -49
- package/src/element-detector.ts +0 -186
- package/src/index.ts +0 -228
- package/src/instrument.ts +0 -171
- package/src/sidebar-initializer.ts +0 -171
- package/src/source-resolver.ts +0 -121
- package/src/styles/sidebarStyles.ts +0 -597
- package/src/types/css.d.ts +0 -9
- package/src/types/sidebar.ts +0 -56
- package/src/types.ts +0 -119
- package/tsconfig.json +0 -23
- package/tsup.config.ts +0 -40
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 fixdog
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,478 +1,125 @@
|
|
|
1
|
-
#
|
|
1
|
+
# fixdog-sdk
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Option+Click any React component to instantly see its source location.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](#)
|
|
6
|
+
_GIF demo placeholder goes here_
|
|
6
7
|
|
|
7
|
-
##
|
|
8
|
+
## Quick start (3 steps)
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
## Requirements
|
|
17
|
-
|
|
18
|
-
- Next.js 14.0.0 or higher
|
|
19
|
-
- React 17.0.0 or higher
|
|
20
|
-
- Development mode only (`_debugSource` is stripped in production)
|
|
10
|
+
1. `npm install fixdog-sdk`
|
|
11
|
+
2. In your app entry, import and init:
|
|
12
|
+
```ts
|
|
13
|
+
import { init } from "fixdog-sdk";
|
|
14
|
+
init();
|
|
15
|
+
```
|
|
16
|
+
3. Option/Alt + click a component in the browser to log its source.
|
|
21
17
|
|
|
22
18
|
## Installation
|
|
23
19
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
# or
|
|
27
|
-
yarn add uidog-sdk-next
|
|
28
|
-
# or
|
|
29
|
-
pnpm add uidog-sdk-next
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Quick Start
|
|
33
|
-
|
|
34
|
-
### Step 1: Create the instrumentation file
|
|
35
|
-
|
|
36
|
-
Bippy must load **before React** to properly hook into React's internals. The setup differs based on your Next.js version.
|
|
37
|
-
|
|
38
|
-
#### Next.js 15.3+ (Recommended)
|
|
39
|
-
|
|
40
|
-
Create `instrumentation-client.ts` in your project root (same level as `package.json`):
|
|
41
|
-
|
|
42
|
-
```typescript
|
|
43
|
-
// instrumentation-client.ts
|
|
44
|
-
import "uidog-sdk-next/client";
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
That's it! The package will auto-initialize with default settings.
|
|
48
|
-
|
|
49
|
-
#### Next.js 14.x - 15.2
|
|
50
|
-
|
|
51
|
-
For older Next.js versions, add the import at the very top of your `_app.tsx` or root layout:
|
|
52
|
-
|
|
53
|
-
**Pages Router (`pages/_app.tsx`):**
|
|
54
|
-
|
|
55
|
-
```typescript
|
|
56
|
-
// pages/_app.tsx
|
|
57
|
-
import "uidog-sdk-next/client"; // MUST be the first import!
|
|
58
|
-
|
|
59
|
-
import type { AppProps } from "next/app";
|
|
60
|
-
|
|
61
|
-
export default function App({ Component, pageProps }: AppProps) {
|
|
62
|
-
return <Component {...pageProps} />;
|
|
63
|
-
}
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
**App Router (`app/layout.tsx`):**
|
|
67
|
-
|
|
68
|
-
```typescript
|
|
69
|
-
// app/layout.tsx
|
|
70
|
-
import "uidog-sdk-next/client"; // MUST be the first import!
|
|
71
|
-
|
|
72
|
-
export default function RootLayout({
|
|
73
|
-
children,
|
|
74
|
-
}: {
|
|
75
|
-
children: React.ReactNode;
|
|
76
|
-
}) {
|
|
77
|
-
return (
|
|
78
|
-
<html lang="en">
|
|
79
|
-
<body>{children}</body>
|
|
80
|
-
</html>
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### Step 2: Start your development server
|
|
86
|
-
|
|
87
|
-
```bash
|
|
88
|
-
npm run dev
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
### Step 3: Use it!
|
|
92
|
-
|
|
93
|
-
1. Hold **Alt** (Option on Mac) and hover over elements - you'll see a blue highlight
|
|
94
|
-
2. **Alt+click** on any element to open the sidebar
|
|
95
|
-
3. The sidebar shows the element's source location (file, line, column)
|
|
96
|
-
4. Type a message describing changes you want to make
|
|
97
|
-
|
|
98
|
-
## Configuration
|
|
99
|
-
|
|
100
|
-
### Using UiDogProvider (Optional)
|
|
101
|
-
|
|
102
|
-
For more control over configuration, wrap your app with `UiDogProvider`:
|
|
103
|
-
|
|
104
|
-
```tsx
|
|
105
|
-
// app/layout.tsx (App Router)
|
|
106
|
-
import "uidog-sdk-next/client"; // Still need this first!
|
|
107
|
-
import { UiDogProvider } from "uidog-sdk-next/init";
|
|
108
|
-
|
|
109
|
-
export default function RootLayout({
|
|
110
|
-
children,
|
|
111
|
-
}: {
|
|
112
|
-
children: React.ReactNode;
|
|
113
|
-
}) {
|
|
114
|
-
return (
|
|
115
|
-
<html lang="en">
|
|
116
|
-
<body>
|
|
117
|
-
<UiDogProvider
|
|
118
|
-
editor="cursor" // Editor to open: 'vscode' | 'cursor' | 'webstorm' | 'atom' | 'sublime'
|
|
119
|
-
modifier="alt" // Key modifier: 'alt' | 'ctrl' | 'meta' | 'shift'
|
|
120
|
-
enableSidebar={true} // Show sidebar UI (set to false for console-only mode)
|
|
121
|
-
apiEndpoint="https://api.ui.dog" // API endpoint for edit requests
|
|
122
|
-
>
|
|
123
|
-
{children}
|
|
124
|
-
</UiDogProvider>
|
|
125
|
-
</body>
|
|
126
|
-
</html>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
### Configuration Options
|
|
132
|
-
|
|
133
|
-
| Option | Type | Default | Description |
|
|
134
|
-
| --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
|
|
135
|
-
| `editor` | `string` | `'cursor'` | Editor to open. Options: `'vscode'`, `'vscode-insiders'`, `'cursor'`, `'webstorm'`, `'atom'`, `'sublime'` |
|
|
136
|
-
| `modifier` | `string` | `'alt'` | Key to hold for element selection. Options: `'alt'`, `'ctrl'`, `'meta'`, `'shift'` |
|
|
137
|
-
| `enableSidebar` | `boolean` | `true` | Show the sidebar UI. If `false`, logs to console instead |
|
|
138
|
-
| `apiEndpoint` | `string` | `'https://api.ui.dog'` | API endpoint for edit session requests |
|
|
139
|
-
| `projectPath` | `string` | `''` | Project root path for resolving relative file paths |
|
|
140
|
-
|
|
141
|
-
### Programmatic Configuration
|
|
142
|
-
|
|
143
|
-
You can also configure before auto-initialization:
|
|
144
|
-
|
|
145
|
-
```typescript
|
|
146
|
-
// instrumentation-client.ts
|
|
147
|
-
import { configureUiDogNext } from "uidog-sdk-next/client";
|
|
20
|
+
- **Next.js / Vite / CRA**: `npm install fixdog-sdk` (or `yarn add`, `pnpm add`)
|
|
21
|
+
- Works in React 16.8+ through React 19. No runtime deps.
|
|
148
22
|
|
|
149
|
-
|
|
150
|
-
editor: "vscode",
|
|
151
|
-
modifier: "alt",
|
|
152
|
-
enableSidebar: true,
|
|
153
|
-
});
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Manual Initialization
|
|
23
|
+
## Usage
|
|
157
24
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
```typescript
|
|
161
|
-
// instrumentation-client.ts
|
|
162
|
-
import { disableAutoInit } from "uidog-sdk-next/client";
|
|
163
|
-
disableAutoInit();
|
|
25
|
+
```ts
|
|
26
|
+
import { init, Inspector } from "fixdog-sdk";
|
|
164
27
|
|
|
165
|
-
//
|
|
166
|
-
|
|
28
|
+
// simple
|
|
29
|
+
init();
|
|
167
30
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
31
|
+
// with options
|
|
32
|
+
init({
|
|
33
|
+
borderColor: "#ff6b6b",
|
|
34
|
+
onClick: (info) => console.log("clicked", info),
|
|
171
35
|
});
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
## Complete Example: Next.js 15 App Router
|
|
175
|
-
|
|
176
|
-
### Project Structure
|
|
177
|
-
|
|
178
|
-
```
|
|
179
|
-
my-next-app/
|
|
180
|
-
├── instrumentation-client.ts # UiDog initialization
|
|
181
|
-
├── app/
|
|
182
|
-
│ ├── layout.tsx # Root layout with UiDogProvider
|
|
183
|
-
│ ├── page.tsx # Home page
|
|
184
|
-
│ └── components/
|
|
185
|
-
│ └── Button.tsx # Example component
|
|
186
|
-
├── package.json
|
|
187
|
-
└── next.config.js
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
### Step-by-Step Setup
|
|
191
|
-
|
|
192
|
-
**1. Install the package:**
|
|
193
|
-
|
|
194
|
-
```bash
|
|
195
|
-
npm install uidog-sdk-next
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
**2. Create `instrumentation-client.ts` in project root:**
|
|
199
|
-
|
|
200
|
-
```typescript
|
|
201
|
-
// instrumentation-client.ts
|
|
202
|
-
import "uidog-sdk-next/client";
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
**3. Update `app/layout.tsx`:**
|
|
206
|
-
|
|
207
|
-
```tsx
|
|
208
|
-
// app/layout.tsx
|
|
209
|
-
import { UiDogProvider } from "uidog-sdk-next/init";
|
|
210
|
-
import "./globals.css";
|
|
211
|
-
|
|
212
|
-
export const metadata = {
|
|
213
|
-
title: "My App",
|
|
214
|
-
};
|
|
215
|
-
|
|
216
|
-
export default function RootLayout({
|
|
217
|
-
children,
|
|
218
|
-
}: {
|
|
219
|
-
children: React.ReactNode;
|
|
220
|
-
}) {
|
|
221
|
-
return (
|
|
222
|
-
<html lang="en">
|
|
223
|
-
<body>
|
|
224
|
-
<UiDogProvider editor="cursor">{children}</UiDogProvider>
|
|
225
|
-
</body>
|
|
226
|
-
</html>
|
|
227
|
-
);
|
|
228
|
-
}
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
**4. Create a component to test (`app/components/Button.tsx`):**
|
|
232
|
-
|
|
233
|
-
```tsx
|
|
234
|
-
// app/components/Button.tsx
|
|
235
|
-
"use client";
|
|
236
|
-
|
|
237
|
-
interface ButtonProps {
|
|
238
|
-
children: React.ReactNode;
|
|
239
|
-
onClick?: () => void;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
export function Button({ children, onClick }: ButtonProps) {
|
|
243
|
-
return (
|
|
244
|
-
<button
|
|
245
|
-
onClick={onClick}
|
|
246
|
-
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
|
247
|
-
>
|
|
248
|
-
{children}
|
|
249
|
-
</button>
|
|
250
|
-
);
|
|
251
|
-
}
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
**5. Use the component (`app/page.tsx`):**
|
|
255
|
-
|
|
256
|
-
```tsx
|
|
257
|
-
// app/page.tsx
|
|
258
|
-
import { Button } from "./components/Button";
|
|
259
|
-
|
|
260
|
-
export default function Home() {
|
|
261
|
-
return (
|
|
262
|
-
<main className="p-8">
|
|
263
|
-
<h1 className="text-2xl font-bold mb-4">My App</h1>
|
|
264
|
-
<Button>Click me</Button>
|
|
265
|
-
</main>
|
|
266
|
-
);
|
|
267
|
-
}
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
**6. Start the dev server:**
|
|
271
|
-
|
|
272
|
-
```bash
|
|
273
|
-
npm run dev
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
**7. Test it:**
|
|
277
|
-
|
|
278
|
-
- Open http://localhost:3000
|
|
279
|
-
- Hold **Alt** and hover over the button - you'll see a blue highlight
|
|
280
|
-
- **Alt+click** on the button
|
|
281
|
-
- The sidebar opens showing `Button.tsx` with line and column numbers
|
|
282
|
-
|
|
283
|
-
## Complete Example: Next.js 14 Pages Router
|
|
284
|
-
|
|
285
|
-
### Project Structure
|
|
286
|
-
|
|
287
|
-
```
|
|
288
|
-
my-next-app/
|
|
289
|
-
├── pages/
|
|
290
|
-
│ ├── _app.tsx # App wrapper with UiDog
|
|
291
|
-
│ ├── index.tsx # Home page
|
|
292
|
-
│ └── components/
|
|
293
|
-
│ └── Card.tsx # Example component
|
|
294
|
-
├── package.json
|
|
295
|
-
└── next.config.js
|
|
296
|
-
```
|
|
297
|
-
|
|
298
|
-
### Step-by-Step Setup
|
|
299
36
|
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
**2. Update `pages/_app.tsx`:**
|
|
307
|
-
|
|
308
|
-
```tsx
|
|
309
|
-
// pages/_app.tsx
|
|
310
|
-
import "uidog-sdk-next/client"; // MUST be first!
|
|
311
|
-
|
|
312
|
-
import type { AppProps } from "next/app";
|
|
313
|
-
import { UiDogProvider } from "uidog-sdk-next/init";
|
|
314
|
-
import "../styles/globals.css";
|
|
315
|
-
|
|
316
|
-
export default function App({ Component, pageProps }: AppProps) {
|
|
317
|
-
return (
|
|
318
|
-
<UiDogProvider editor="vscode">
|
|
319
|
-
<Component {...pageProps} />
|
|
320
|
-
</UiDogProvider>
|
|
321
|
-
);
|
|
322
|
-
}
|
|
37
|
+
// manual control
|
|
38
|
+
const inspector = new Inspector({ enabled: true });
|
|
39
|
+
inspector.activate();
|
|
40
|
+
inspector.deactivate();
|
|
41
|
+
inspector.destroy();
|
|
323
42
|
```
|
|
324
43
|
|
|
325
|
-
|
|
44
|
+
### React provider (optional)
|
|
326
45
|
|
|
327
46
|
```tsx
|
|
328
|
-
|
|
329
|
-
interface CardProps {
|
|
330
|
-
title: string;
|
|
331
|
-
description: string;
|
|
332
|
-
}
|
|
47
|
+
import { InspectorProvider } from "fixdog-sdk/react";
|
|
333
48
|
|
|
334
|
-
export function
|
|
49
|
+
export function App() {
|
|
335
50
|
return (
|
|
336
|
-
<
|
|
337
|
-
<
|
|
338
|
-
|
|
339
|
-
</div>
|
|
51
|
+
<InspectorProvider options={{}}>
|
|
52
|
+
<YourApp />
|
|
53
|
+
</InspectorProvider>
|
|
340
54
|
);
|
|
341
55
|
}
|
|
342
56
|
```
|
|
343
57
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
```tsx
|
|
347
|
-
// pages/index.tsx
|
|
348
|
-
import { Card } from "./components/Card";
|
|
349
|
-
|
|
350
|
-
export default function Home() {
|
|
351
|
-
return (
|
|
352
|
-
<div className="p-8">
|
|
353
|
-
<h1 className="text-2xl font-bold mb-4">My App</h1>
|
|
354
|
-
<Card
|
|
355
|
-
title="Welcome"
|
|
356
|
-
description="Alt+click on this card to see its source location!"
|
|
357
|
-
/>
|
|
358
|
-
</div>
|
|
359
|
-
);
|
|
360
|
-
}
|
|
361
|
-
```
|
|
58
|
+
## Options
|
|
362
59
|
|
|
363
|
-
|
|
60
|
+
| option | type | default | description |
|
|
61
|
+
| ----------------- | ----------------------------- | -------------- | ---------------------------------------- |
|
|
62
|
+
| `onClick` | `(info) => void` | `undefined` | Called on click with source info |
|
|
63
|
+
| `onHover` | `(info \| null) => void` | `undefined` | Called when hover target changes |
|
|
64
|
+
| `shortcut` | `string` | `ctrl+shift+x` | Toggle persistent inspect mode |
|
|
65
|
+
| `useOptionClick` | `boolean` | `true` | Enable Option/Alt + click activation |
|
|
66
|
+
| `enabled` | `boolean` | `!production` | Auto-disabled in prod unless forced true |
|
|
67
|
+
| `zIndex` | `number` | `999999` | Overlay/tooltip stacking |
|
|
68
|
+
| `borderColor` | `string` | `#61dafb` | Highlight + tooltip border color |
|
|
69
|
+
| `tooltipPosition` | `'auto' \| 'top' \| 'bottom'` | `auto` | Tooltip placement preference |
|
|
364
70
|
|
|
365
|
-
|
|
366
|
-
npm run dev
|
|
367
|
-
```
|
|
71
|
+
## API
|
|
368
72
|
|
|
369
|
-
|
|
73
|
+
- `init(options?)` → `Inspector` singleton (auto-activates)
|
|
74
|
+
- `new Inspector(options?)` → manual instance
|
|
75
|
+
- `.activate()` enable listeners and overlay
|
|
76
|
+
- `.deactivate()` remove listeners and hide overlay
|
|
77
|
+
- `.destroy()` cleanup overlay
|
|
78
|
+
- `InspectorProvider` React wrapper (optional)
|
|
370
79
|
|
|
371
|
-
|
|
372
|
-
- Add at the very top of your entry (e.g., `src/main.tsx`):
|
|
80
|
+
### SourceInfo
|
|
373
81
|
|
|
374
82
|
```ts
|
|
375
|
-
|
|
376
|
-
|
|
83
|
+
interface SourceInfo {
|
|
84
|
+
componentName: string;
|
|
85
|
+
fileName: string;
|
|
86
|
+
lineNumber: number;
|
|
87
|
+
columnNumber: number;
|
|
88
|
+
fiber?: any; // raw React fiber
|
|
89
|
+
element?: Element; // DOM element
|
|
377
90
|
}
|
|
378
91
|
```
|
|
379
92
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
## API Reference
|
|
383
|
-
|
|
384
|
-
### Main Exports (`uidog-sdk-next`)
|
|
385
|
-
|
|
386
|
-
```typescript
|
|
387
|
-
import {
|
|
388
|
-
initializeUiDogNext, // Initialize UiDog manually
|
|
389
|
-
cleanupUiDogNext, // Cleanup all listeners and UI
|
|
390
|
-
isUiDogNextInitialized, // Check if initialized
|
|
391
|
-
openSidebar, // Programmatically open sidebar
|
|
392
|
-
closeSidebar, // Programmatically close sidebar
|
|
393
|
-
buildEditorUrl, // Build editor URL from source location
|
|
394
|
-
} from "uidog-sdk-next";
|
|
395
|
-
```
|
|
396
|
-
|
|
397
|
-
### Client Exports (`uidog-sdk-next/client`)
|
|
398
|
-
|
|
399
|
-
```typescript
|
|
400
|
-
import {
|
|
401
|
-
configureUiDogNext, // Configure options before auto-init
|
|
402
|
-
disableAutoInit, // Disable auto-initialization
|
|
403
|
-
initializeUiDogNext, // Manual initialization
|
|
404
|
-
} from "uidog-sdk-next/client";
|
|
405
|
-
```
|
|
406
|
-
|
|
407
|
-
### Provider Export (`uidog-sdk-next/init`)
|
|
93
|
+
## How it works
|
|
408
94
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
95
|
+
- Grabs the nearest React fiber on Option/Alt click (or persistent mode).
|
|
96
|
+
- Walks up the fiber tree to `_debugSource` for `fileName:line:column`.
|
|
97
|
+
- Shows an overlay + tooltip; logs formatted message and passes full info to callbacks.
|
|
412
98
|
|
|
413
99
|
## Troubleshooting
|
|
414
100
|
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
1. **Production mode**: Source info (`_debugSource`) is stripped in production builds. Make sure you're running in development mode (`npm run dev`).
|
|
420
|
-
|
|
421
|
-
2. **Server Components**: React Server Components render on the server and don't have fibers on the client. Only client components can be inspected.
|
|
422
|
-
|
|
423
|
-
3. **Library components**: Components from `node_modules` are filtered out. You can only inspect your own source code.
|
|
424
|
-
|
|
425
|
-
When source isn't available (e.g., server-rendered DOM), the sidebar will show a **DOM snapshot** instead: trimmed `outerHTML`, text content, attributes, and bounding box. This gives you “something to grab,” but still no file/line info without a client boundary.
|
|
426
|
-
|
|
427
|
-
### Sidebar doesn't appear
|
|
428
|
-
|
|
429
|
-
1. Make sure you imported `'uidog-sdk-next/client'` **before** any React imports
|
|
430
|
-
2. Check the browser console for `[UiDog Next] Initialized` message
|
|
431
|
-
3. Verify you're holding the correct modifier key (Alt by default)
|
|
432
|
-
|
|
433
|
-
### Element highlighting doesn't work
|
|
101
|
+
- **Source not available**: Ensure dev/build has `_debugSource` (development or React Refresh). Production builds often strip it.
|
|
102
|
+
- **Next.js / RSC**: Server Components don’t have client-side fibers; ensure the inspected component is a client component.
|
|
103
|
+
- **Plain HTML element**: No React fiber → nothing to log.
|
|
104
|
+
- **Iframes / shadow DOM**: Inspector stays within the current document; shadow hosts are walked, but cross-iframe is skipped.
|
|
434
105
|
|
|
435
|
-
|
|
436
|
-
2. Try a different modifier key: `modifier="ctrl"` or `modifier="meta"`
|
|
437
|
-
3. Some browser extensions may intercept Alt+click - try disabling them
|
|
106
|
+
## Testing locally
|
|
438
107
|
|
|
439
|
-
|
|
108
|
+
1. `npm install`
|
|
109
|
+
2. `npm link`
|
|
110
|
+
3. Create a test app (e.g., `npm create vite@latest test-app -- --template react-ts`)
|
|
111
|
+
4. In that app: `npm link fixdog-sdk`
|
|
112
|
+
5. Import and run `init()` in `main.tsx`, then Option/Alt+click in the browser.
|
|
440
113
|
|
|
441
|
-
|
|
114
|
+
## Build
|
|
442
115
|
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
import "uidog-sdk-next/client";
|
|
446
|
-
import { useState } from "react";
|
|
116
|
+
- `npm run build` (Rollup → ESM + CJS + types)
|
|
117
|
+
- `npm run dev` (watch)
|
|
447
118
|
|
|
448
|
-
|
|
449
|
-
import { useState } from "react";
|
|
450
|
-
import "uidog-sdk-next/client";
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
## How It Works
|
|
454
|
-
|
|
455
|
-
1. **Bippy hooks into React**: When you import `'uidog-sdk-next/client'`, Bippy installs a hook at `window.__REACT_DEVTOOLS_GLOBAL_HOOK__` before React loads.
|
|
456
|
-
|
|
457
|
-
2. **React reports fiber info**: As React renders, it reports fiber tree data to the hook, including `_debugSource` metadata.
|
|
458
|
-
|
|
459
|
-
3. **Alt+click detection**: When you Alt+click an element, we find its React fiber and extract the source location.
|
|
119
|
+
## Contributing
|
|
460
120
|
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
## Limitations
|
|
464
|
-
|
|
465
|
-
- **Development only**: `_debugSource` is stripped in production React builds
|
|
466
|
-
- **Client components only**: Server Components don't have client-side fibers
|
|
467
|
-
- **React 17-19**: Bippy supports these React versions
|
|
468
|
-
- **Next.js 14+**: Older versions may work but are not tested
|
|
121
|
+
PRs welcome. Please keep the bundle lean and TypeScript strict.
|
|
469
122
|
|
|
470
123
|
## License
|
|
471
124
|
|
|
472
|
-
MIT
|
|
473
|
-
|
|
474
|
-
## Related
|
|
475
|
-
|
|
476
|
-
- [uidog-sdk](https://github.com/your-org/uidog-sdk) - Original SDK for Vite/Webpack apps
|
|
477
|
-
- [Bippy](https://github.com/aidenybai/bippy) - React fiber inspection toolkit
|
|
478
|
-
- [LocatorJS](https://github.com/nicepkg/locatorjs) - Alternative approach using Babel transforms
|
|
125
|
+
MIT © fixdog
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
export interface EditRequest {
|
|
2
|
+
editorUrl: string;
|
|
3
|
+
userInput: string;
|
|
4
|
+
}
|
|
5
|
+
export interface EditResponse {
|
|
6
|
+
sessionId: string;
|
|
7
|
+
message: string;
|
|
8
|
+
status: "success" | "error";
|
|
9
|
+
error?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface ChatRequest {
|
|
12
|
+
prompt: string;
|
|
13
|
+
projectId: string;
|
|
14
|
+
secret: string;
|
|
15
|
+
modelId: string;
|
|
16
|
+
sessionId?: string;
|
|
17
|
+
}
|
|
18
|
+
export interface ChatResponse {
|
|
19
|
+
ok: boolean;
|
|
20
|
+
message: string;
|
|
21
|
+
sessionId?: string;
|
|
22
|
+
error?: string;
|
|
23
|
+
code?: string;
|
|
24
|
+
}
|
|
25
|
+
export interface SendToDevRequest {
|
|
26
|
+
projectId: string;
|
|
27
|
+
secret: string;
|
|
28
|
+
sessionId: string;
|
|
29
|
+
}
|
|
30
|
+
export interface SendToDevResponse {
|
|
31
|
+
ok: boolean;
|
|
32
|
+
prUrl?: string;
|
|
33
|
+
prNumber?: number;
|
|
34
|
+
branchName?: string;
|
|
35
|
+
error?: string;
|
|
36
|
+
}
|
|
37
|
+
export interface SessionRequest {
|
|
38
|
+
projectId: string;
|
|
39
|
+
secret: string;
|
|
40
|
+
}
|
|
41
|
+
export interface SessionInfo {
|
|
42
|
+
id: string;
|
|
43
|
+
createdAt: string;
|
|
44
|
+
lastActivity?: string;
|
|
45
|
+
}
|
|
46
|
+
export interface GetSessionResponse {
|
|
47
|
+
ok: boolean;
|
|
48
|
+
session: SessionInfo | null;
|
|
49
|
+
error?: string;
|
|
50
|
+
}
|
|
51
|
+
export interface CreateSessionResponse {
|
|
52
|
+
ok: boolean;
|
|
53
|
+
session?: SessionInfo;
|
|
54
|
+
error?: string;
|
|
55
|
+
}
|
|
56
|
+
export interface DeleteSessionResponse {
|
|
57
|
+
ok: boolean;
|
|
58
|
+
error?: string;
|
|
59
|
+
}
|
|
60
|
+
export declare function createEditSession(request: EditRequest, apiEndpoint?: string): Promise<EditResponse>;
|
|
61
|
+
export declare function sendChatPrompt(request: ChatRequest, apiEndpoint?: string): Promise<ChatResponse>;
|
|
62
|
+
export declare function sendToDeveloper(request: SendToDevRequest, apiEndpoint?: string): Promise<SendToDevResponse>;
|
|
63
|
+
/**
|
|
64
|
+
* Get current active session for a project
|
|
65
|
+
*/
|
|
66
|
+
export declare function getSession(request: SessionRequest, apiEndpoint?: string): Promise<GetSessionResponse>;
|
|
67
|
+
/**
|
|
68
|
+
* Create a new session (disposes existing sessions and resets repo)
|
|
69
|
+
*/
|
|
70
|
+
export declare function createSession(request: SessionRequest, apiEndpoint?: string): Promise<CreateSessionResponse>;
|
|
71
|
+
/**
|
|
72
|
+
* Delete/dispose current session and reset repo
|
|
73
|
+
*/
|
|
74
|
+
export declare function deleteSession(request: SessionRequest, apiEndpoint?: string): Promise<DeleteSessionResponse>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { SelectedComponent } from "../types/sidebar";
|
|
2
|
+
interface ConversationalInputProps {
|
|
3
|
+
selectedComponents: SelectedComponent[];
|
|
4
|
+
apiEndpoint: string;
|
|
5
|
+
projectId: string;
|
|
6
|
+
modelId: string;
|
|
7
|
+
sessionId?: string;
|
|
8
|
+
onSessionUpdated?: (sessionId: string | undefined) => void;
|
|
9
|
+
onPrRecorded?: (pr: {
|
|
10
|
+
prUrl: string;
|
|
11
|
+
branchName?: string;
|
|
12
|
+
savedAt: number;
|
|
13
|
+
} | null) => void;
|
|
14
|
+
onSendToDevConfirm?: () => Promise<boolean> | boolean;
|
|
15
|
+
onStartNewSession?: () => void;
|
|
16
|
+
lastPr?: {
|
|
17
|
+
prUrl: string;
|
|
18
|
+
branchName?: string;
|
|
19
|
+
savedAt: number;
|
|
20
|
+
} | null;
|
|
21
|
+
insertChipId: number | null;
|
|
22
|
+
onChipInserted: () => void;
|
|
23
|
+
onChipDeleted?: (componentId: number) => void;
|
|
24
|
+
}
|
|
25
|
+
export declare function ConversationalInputReact(props: ConversationalInputProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { SelectedComponent } from "../types/sidebar";
|
|
2
|
+
interface ElementInfoDisplayProps {
|
|
3
|
+
selectedComponents: SelectedComponent[];
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
onRemoveComponent: (componentId: number) => void;
|
|
6
|
+
onInsertChip: (componentId: number) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare function ElementInfoDisplayReact(props: ElementInfoDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|