@concavejs/devtools 0.0.1-alpha.11 → 0.0.1-alpha.13

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.
Files changed (7) hide show
  1. package/dist/{client-CRYWrjNv.js → client-Bnix0wGg.js} +195 -192
  2. package/dist/client.js +1 -1
  3. package/dist/index.js +266 -268
  4. package/dist/interceptor/websocket-interceptor.d.ts +6 -4
  5. package/dist/store/event-store.d.ts +1 -0
  6. package/dist/vite-plugin.js +143 -98
  7. package/package.json +3 -3
package/dist/interceptor/websocket-interceptor.d.ts CHANGED
@@ -9,9 +9,11 @@ export declare class WebSocketInterceptor {
9
9
  private eventStore;
10
10
  private originalWebSocket;
11
11
  private pendingQueries;
12
+ private queryContexts;
12
13
  private pendingMutations;
13
14
  private pendingActions;
14
15
  private pendingAuthTokenType;
16
+ private eventSequence;
15
17
  /** Tracks the most recent mutation event ID for causality linking */
16
18
  private lastMutationEventId;
17
19
  private lastMutationTimestamp;
@@ -36,6 +38,7 @@ export declare class WebSocketInterceptor {
36
38
  * Handle query set modifications (subscriptions)
37
39
  */
38
40
  private handleModifyQuerySet;
41
+ private handleTransition;
39
42
  /**
40
43
  * Handle mutation requests
41
44
  */
@@ -46,10 +49,6 @@ export declare class WebSocketInterceptor {
46
49
  private handleActionRequest;
47
50
  private handleConnectMessage;
48
51
  private handleAuthenticateMessage;
49
- /**
50
- * Handle state transitions (query updates)
51
- */
52
- private handleTransition;
53
52
  /**
54
53
  * Handle mutation responses
55
54
  */
@@ -59,6 +58,9 @@ export declare class WebSocketInterceptor {
59
58
  */
60
59
  private handleActionResponse;
61
60
  private handleAuthErrorResponse;
61
+ private nextEventId;
62
+ private getQueryContext;
63
+ private emitSubscriptionEvent;
62
64
  private resolveOperationTimings;
63
65
  private emitAuthEvent;
64
66
  /**
package/dist/store/event-store.d.ts CHANGED
@@ -179,6 +179,7 @@ export declare class EventStore {
179
179
  * Update subscription tracking
180
180
  */
181
181
  private updateSubscription;
182
+ private clearPendingQueryEvents;
182
183
  private sanitizeEvents;
183
184
  private isEventLike;
184
185
  private normalizeMaxEvents;
package/dist/vite-plugin.js CHANGED
@@ -1,5 +1,5 @@
1
1
  function c(o = {}) {
2
- const { enabled: s = !0, position: a = "bottom-right" } = o;
2
+ const { enabled: s = !0, position: i = "bottom-right" } = o;
3
3
  let t = !1;
4
4
  return {
5
5
  name: "concave-devtools",
@@ -11,7 +11,7 @@ function c(o = {}) {
11
11
  handler(e) {
12
12
  if (!t || !s)
13
13
  return e;
14
- const i = `
14
+ const a = `
15
15
  <script>
16
16
  // Initialize event store immediately
17
17
  (function() {
@@ -22,9 +22,11 @@ function c(o = {}) {
22
22
  // Minimal event store for capturing events
23
23
  window.__concaveDevToolsEvents = [];
24
24
  window.__concaveDevToolsPendingQueries = new Map();
25
+ window.__concaveDevToolsQueryContexts = new Map();
25
26
  window.__concaveDevToolsPendingMutations = new Map();
26
27
  window.__concaveDevToolsPendingActions = new Map();
27
28
  window.__concaveDevToolsPendingAuthTokenType = null;
29
+ window.__concaveDevToolsEventSeq = 0;
28
30
 
29
31
  // Latency simulation config (mutated by devtools settings panel)
30
32
  if (!window.__concaveDevToolsLatencyConfig) {
@@ -123,6 +125,30 @@ function c(o = {}) {
123
125
  return null;
124
126
  }
125
127
  };
128
+
129
+ const nextEventId = (prefix, now) => {
130
+ window.__concaveDevToolsEventSeq = (window.__concaveDevToolsEventSeq + 1) % 1000000000;
131
+ return prefix + '-' + now + '-' + window.__concaveDevToolsEventSeq;
132
+ };
133
+
134
+ const getQueryContext = (queryId) => {
135
+ const pending = window.__concaveDevToolsPendingQueries.get(queryId);
136
+ if (pending) return pending;
137
+ return window.__concaveDevToolsQueryContexts.get(queryId) || null;
138
+ };
139
+
140
+ const emitSubscriptionEvent = (status, queryId, now, context) => {
141
+ window.__concaveDevToolsEvents.push({
142
+ id: nextEventId('sub-' + status + '-' + queryId, now),
143
+ timestamp: now,
144
+ type: 'subscription',
145
+ queryId: queryId,
146
+ udfPath: context ? context.udfPath : 'unknown',
147
+ args: context ? context.args : [],
148
+ componentPath: context ? context.componentPath : undefined,
149
+ status: status
150
+ });
151
+ };
126
152
 
127
153
  // Create intercepted WebSocket constructor
128
154
  window.WebSocket = function(url, protocols) {
@@ -165,27 +191,25 @@ function c(o = {}) {
165
191
  if (msg.type === 'ModifyQuerySet' && msg.modifications) {
166
192
  msg.modifications.forEach(mod => {
167
193
  if (mod.type === 'Add') {
168
- window.__concaveDevToolsPendingQueries.set(mod.queryId, {
194
+ window.__concaveDevToolsQueryContexts.set(mod.queryId, {
169
195
  queryId: mod.queryId,
170
196
  udfPath: mod.udfPath,
171
197
  args: mod.args,
172
- componentPath: mod.componentPath,
173
- startTime: now
198
+ componentPath: mod.componentPath
174
199
  });
175
-
176
- window.__concaveDevToolsEvents.push({
177
- id: 'sub-' + mod.queryId + '-' + now,
178
- timestamp: now,
179
- type: 'subscription',
200
+ window.__concaveDevToolsPendingQueries.set(mod.queryId, {
180
201
  queryId: mod.queryId,
181
202
  udfPath: mod.udfPath,
182
203
  args: mod.args,
183
204
  componentPath: mod.componentPath,
184
- status: 'added'
205
+ startTime: now,
206
+ subscriptionRemovedEmitted: false
185
207
  });
208
+
209
+ emitSubscriptionEvent('added', mod.queryId, now, mod);
186
210
 
187
211
  window.__concaveDevToolsEvents.push({
188
- id: 'query-pending-' + mod.queryId + '-' + now,
212
+ id: nextEventId('query-pending-' + mod.queryId, now),
189
213
  timestamp: now,
190
214
  type: 'query',
191
215
  queryId: mod.queryId,
@@ -196,18 +220,12 @@ function c(o = {}) {
196
220
  });
197
221
  } else if (mod.type === 'Remove') {
198
222
  const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
199
- window.__concaveDevToolsPendingQueries.delete(mod.queryId);
200
- // Emit removed subscription if we have context
201
- window.__concaveDevToolsEvents.push({
202
- id: 'sub-' + mod.queryId + '-' + now,
203
- timestamp: now,
204
- type: 'subscription',
205
- queryId: mod.queryId,
206
- udfPath: pending ? pending.udfPath : 'unknown',
207
- args: pending ? pending.args : [],
208
- componentPath: pending ? pending.componentPath : undefined,
209
- status: 'removed'
210
- });
223
+ if (pending) {
224
+ pending.subscriptionRemovedEmitted = true;
225
+ }
226
+ const context = getQueryContext(mod.queryId);
227
+ window.__concaveDevToolsQueryContexts.delete(mod.queryId);
228
+ emitSubscriptionEvent('removed', mod.queryId, now, context);
211
229
  }
212
230
  });
213
231
  }
@@ -223,7 +241,7 @@ function c(o = {}) {
223
241
  });
224
242
 
225
243
  window.__concaveDevToolsEvents.push({
226
- id: 'mutation-pending-' + msg.requestId + '-' + now,
244
+ id: nextEventId('mutation-pending-' + msg.requestId, now),
227
245
  timestamp: now,
228
246
  type: 'mutation',
229
247
  requestId: msg.requestId,
@@ -245,7 +263,7 @@ function c(o = {}) {
245
263
  });
246
264
 
247
265
  window.__concaveDevToolsEvents.push({
248
- id: 'action-pending-' + msg.requestId + '-' + now,
266
+ id: nextEventId('action-pending-' + msg.requestId, now),
249
267
  timestamp: now,
250
268
  type: 'action',
251
269
  requestId: msg.requestId,
@@ -300,42 +318,56 @@ function c(o = {}) {
300
318
  msg.modifications.forEach(mod => {
301
319
  if (mod.type === 'QueryUpdated' || mod.type === 'QueryFailed') {
302
320
  const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
321
+ const context = getQueryContext(mod.queryId);
322
+ if (!context) return;
323
+
324
+ const duration = pending ? now - pending.startTime : 0;
325
+ const queryEventId = nextEventId('query-' + mod.queryId, now);
326
+ window.__concaveDevToolsEvents.push({
327
+ id: queryEventId,
328
+ timestamp: now,
329
+ type: 'query',
330
+ queryId: mod.queryId,
331
+ udfPath: context.udfPath,
332
+ args: context.args,
333
+ componentPath: context.componentPath,
334
+ status: mod.type === 'QueryUpdated' ? 'success' : 'error',
335
+ result: mod.type === 'QueryUpdated' ? mod.value : undefined,
336
+ error: mod.type === 'QueryFailed' ? mod.errorMessage : undefined,
337
+ trace: mod.type === 'QueryUpdated' ? mod.trace : undefined,
338
+ logLines: mod.logLines,
339
+ duration: duration,
340
+ simulatedDelayMs: delayMs,
341
+ endToEndDurationMs: duration + delayMs
342
+ });
343
+
303
344
  if (pending) {
304
- const duration = now - pending.startTime;
305
- window.__concaveDevToolsEvents.push({
306
- id: 'query-' + mod.queryId + '-' + now,
307
- timestamp: now,
308
- type: 'query',
309
- queryId: mod.queryId,
310
- udfPath: pending.udfPath,
311
- args: pending.args,
312
- componentPath: pending.componentPath,
313
- status: mod.type === 'QueryUpdated' ? 'success' : 'error',
314
- result: mod.type === 'QueryUpdated' ? mod.value : undefined,
315
- error: mod.type === 'QueryFailed' ? mod.errorMessage : undefined,
316
- trace: mod.type === 'QueryUpdated' ? mod.trace : undefined,
317
- logLines: mod.logLines,
318
- duration: duration,
319
- simulatedDelayMs: delayMs,
320
- endToEndDurationMs: duration + delayMs
321
- });
322
-
323
- // Extract log events
324
- if (mod.logLines && mod.logLines.length > 0) {
325
- mod.logLines.forEach(logLine => {
326
- const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
327
- const level = match ? match[1].toLowerCase() : 'log';
328
- const message = match ? match[2] : logLine;
329
- window.__concaveDevToolsEvents.push({
330
- id: 'log-' + now + '-' + Math.random(),
331
- timestamp: now,
332
- type: 'log',
333
- level: level,
334
- message: message,
335
- relatedEventId: 'query-' + mod.queryId + '-' + now
336
- });
345
+ window.__concaveDevToolsPendingQueries.delete(mod.queryId);
346
+ }
347
+
348
+ // Extract log events
349
+ if (mod.logLines && mod.logLines.length > 0) {
350
+ mod.logLines.forEach(logLine => {
351
+ const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
352
+ const level = match ? match[1].toLowerCase() : 'log';
353
+ const message = match ? match[2] : logLine;
354
+ window.__concaveDevToolsEvents.push({
355
+ id: 'log-' + now + '-' + Math.random(),
356
+ timestamp: now,
357
+ type: 'log',
358
+ level: level,
359
+ message: message,
360
+ relatedEventId: queryEventId
337
361
  });
338
- }
362
+ });
363
+ }
364
+ } else if (mod.type === 'QueryRemoved') {
365
+ const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
366
+ const context = getQueryContext(mod.queryId);
367
+ window.__concaveDevToolsPendingQueries.delete(mod.queryId);
368
+ window.__concaveDevToolsQueryContexts.delete(mod.queryId);
369
+ if (context && !(pending && pending.subscriptionRemovedEmitted)) {
370
+ emitSubscriptionEvent('removed', mod.queryId, now, context);
339
371
  }
340
372
  }
341
373
  });
@@ -347,7 +379,7 @@ function c(o = {}) {
347
379
  if (pending) {
348
380
  const duration = now - pending.startTime;
349
381
  window.__concaveDevToolsEvents.push({
350
- id: 'mutation-' + msg.requestId + '-' + now,
382
+ id: nextEventId('mutation-' + msg.requestId, now),
351
383
  timestamp: now,
352
384
  type: 'mutation',
353
385
  requestId: msg.requestId,
@@ -391,7 +423,7 @@ function c(o = {}) {
391
423
  if (pending) {
392
424
  const duration = now - pending.startTime;
393
425
  window.__concaveDevToolsEvents.push({
394
- id: 'action-' + msg.requestId + '-' + now,
426
+ id: nextEventId('action-' + msg.requestId, now),
395
427
  timestamp: now,
396
428
  type: 'action',
397
429
  requestId: msg.requestId,
@@ -497,40 +529,53 @@ function c(o = {}) {
497
529
  msg.modifications.forEach(mod => {
498
530
  if (mod.type === 'QueryUpdated' || mod.type === 'QueryFailed') {
499
531
  const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
532
+ const context = getQueryContext(mod.queryId);
533
+ if (!context) return;
534
+
535
+ const duration = pending ? now - pending.startTime : 0;
536
+ const queryEventId = nextEventId('query-' + mod.queryId, now);
537
+ window.__concaveDevToolsEvents.push({
538
+ id: queryEventId,
539
+ timestamp: now,
540
+ type: 'query',
541
+ queryId: mod.queryId,
542
+ udfPath: context.udfPath,
543
+ args: context.args,
544
+ componentPath: context.componentPath,
545
+ status: mod.type === 'QueryUpdated' ? 'success' : 'error',
546
+ result: mod.type === 'QueryUpdated' ? mod.value : undefined,
547
+ error: mod.type === 'QueryFailed' ? mod.errorMessage : undefined,
548
+ trace: mod.type === 'QueryUpdated' ? mod.trace : undefined,
549
+ logLines: mod.logLines,
550
+ duration: duration,
551
+ simulatedDelayMs: delayMs,
552
+ endToEndDurationMs: duration + delayMs
553
+ });
500
554
  if (pending) {
501
- const duration = now - pending.startTime;
502
- window.__concaveDevToolsEvents.push({
503
- id: 'query-' + mod.queryId + '-' + now,
504
- timestamp: now,
505
- type: 'query',
506
- queryId: mod.queryId,
507
- udfPath: pending.udfPath,
508
- args: pending.args,
509
- componentPath: pending.componentPath,
510
- status: mod.type === 'QueryUpdated' ? 'success' : 'error',
511
- result: mod.type === 'QueryUpdated' ? mod.value : undefined,
512
- error: mod.type === 'QueryFailed' ? mod.errorMessage : undefined,
513
- trace: mod.type === 'QueryUpdated' ? mod.trace : undefined,
514
- logLines: mod.logLines,
515
- duration: duration,
516
- simulatedDelayMs: delayMs,
517
- endToEndDurationMs: duration + delayMs
518
- });
519
- if (mod.logLines && mod.logLines.length > 0) {
520
- mod.logLines.forEach(logLine => {
521
- const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
522
- const level = match ? match[1].toLowerCase() : 'log';
523
- const message = match ? match[2] : logLine;
524
- window.__concaveDevToolsEvents.push({
525
- id: 'log-' + now + '-' + Math.random(),
526
- timestamp: now,
527
- type: 'log',
528
- level: level,
529
- message: message,
530
- relatedEventId: 'query-' + mod.queryId + '-' + now
531
- });
555
+ window.__concaveDevToolsPendingQueries.delete(mod.queryId);
556
+ }
557
+ if (mod.logLines && mod.logLines.length > 0) {
558
+ mod.logLines.forEach(logLine => {
559
+ const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
560
+ const level = match ? match[1].toLowerCase() : 'log';
561
+ const message = match ? match[2] : logLine;
562
+ window.__concaveDevToolsEvents.push({
563
+ id: 'log-' + now + '-' + Math.random(),
564
+ timestamp: now,
565
+ type: 'log',
566
+ level: level,
567
+ message: message,
568
+ relatedEventId: queryEventId
532
569
  });
533
- }
570
+ });
571
+ }
572
+ } else if (mod.type === 'QueryRemoved') {
573
+ const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
574
+ const context = getQueryContext(mod.queryId);
575
+ window.__concaveDevToolsPendingQueries.delete(mod.queryId);
576
+ window.__concaveDevToolsQueryContexts.delete(mod.queryId);
577
+ if (context && !(pending && pending.subscriptionRemovedEmitted)) {
578
+ emitSubscriptionEvent('removed', mod.queryId, now, context);
534
579
  }
535
580
  }
536
581
  });
@@ -540,7 +585,7 @@ function c(o = {}) {
540
585
  if (pending) {
541
586
  const duration = now - pending.startTime;
542
587
  window.__concaveDevToolsEvents.push({
543
- id: 'mutation-' + msg.requestId + '-' + now,
588
+ id: nextEventId('mutation-' + msg.requestId, now),
544
589
  timestamp: now,
545
590
  type: 'mutation',
546
591
  requestId: msg.requestId,
@@ -579,7 +624,7 @@ function c(o = {}) {
579
624
  if (pending) {
580
625
  const duration = now - pending.startTime;
581
626
  window.__concaveDevToolsEvents.push({
582
- id: 'action-' + msg.requestId + '-' + now,
627
+ id: nextEventId('action-' + msg.requestId, now),
583
628
  timestamp: now,
584
629
  type: 'action',
585
630
  requestId: msg.requestId,
@@ -642,9 +687,9 @@ function c(o = {}) {
642
687
  <\/script>
643
688
  `, r = `
644
689
  <script>
645
- window.__concaveDevToolsConfig = ${JSON.stringify({ position: a, autoInit: !0 })};
690
+ window.__concaveDevToolsConfig = ${JSON.stringify({ position: i, autoInit: !0 })};
646
691
  <\/script>
647
- `, n = i + r + `
692
+ `, n = a + r + `
648
693
  <script type="module">
649
694
  import { initDevTools } from '@concavejs/devtools/client';
650
695
  <\/script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@concavejs/devtools",
3
- "version": "0.0.1-alpha.11",
3
+ "version": "0.0.1-alpha.13",
4
4
  "license": "FSL-1.1-Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -38,8 +38,8 @@
38
38
  "type-check": "tsc --noEmit"
39
39
  },
40
40
  "dependencies": {
41
- "@concavejs/brand": "0.0.1-alpha.11",
42
- "@concavejs/core": "0.0.1-alpha.11"
41
+ "@concavejs/brand": "0.0.1-alpha.13",
42
+ "@concavejs/core": "0.0.1-alpha.13"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "react": "^18.0.0",