@yoltra/devtools-ui 0.5.0 → 0.7.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.es.md +75 -73
- package/dist/devtools-ui.cjs +2 -18
- package/dist/devtools-ui.cjs.map +1 -1
- package/dist/devtools-ui.mjs +454 -461
- package/dist/devtools-ui.mjs.map +1 -1
- package/dist/types/context/HubProvider.d.ts +13 -7
- package/dist/types/hooks/useStoreMetrics.d.ts +2 -3
- package/dist/types/hooks/useStoreSubscriptions.d.ts +2 -3
- package/dist/types/index.d.ts +3 -1
- package/package.json +7 -7
package/README.es.md
CHANGED
|
@@ -2,30 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
# @yoltra/devtools-ui
|
|
4
4
|
|
|
5
|
-
> 👉 🇲🇽 Versión en Español | [🇺🇸 English Version](./README.md)
|
|
5
|
+
> 👉 🇲🇽 Versión en Español | [ 🇺🇸 English Version](./README.md)
|
|
6
6
|
|
|
7
|
-
**
|
|
7
|
+
**Hooks de React y lógica de negocio compartidos por las UIs de Yoltra DevTools.**
|
|
8
8
|
|
|
9
|
-
`@yoltra/devtools-ui`
|
|
10
|
-
|
|
11
|
-
**
|
|
12
|
-
`@yoltra/devtools-storeview` (React DOM)
|
|
9
|
+
`@yoltra/devtools-ui` es una capa de lógica sin interfaz que ofrece hooks de React para conectarse
|
|
10
|
+
al hub de DevTools, seguir el estado de un store, explorar eventos y controlar el viaje en el
|
|
11
|
+
tiempo. **No contiene componentes de UI**: el renderizado corre a cargo de paquetes posteriores
|
|
12
|
+
como `@yoltra/devtools-storeview` (React DOM) y `@yoltra/devtools-cli` (Ink).
|
|
13
13
|
|
|
14
14
|
---
|
|
15
15
|
|
|
16
|
-
##
|
|
16
|
+
## Instalación
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
19
|
npm install @yoltra/devtools-ui
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
**
|
|
22
|
+
**Dependencia peer:** `react` ^18
|
|
23
23
|
|
|
24
24
|
---
|
|
25
25
|
|
|
26
|
-
##
|
|
26
|
+
## Inicio rápido
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
Envuelve tu UI de DevTools en un `HubProvider` y usa los hooks:
|
|
29
29
|
|
|
30
30
|
```tsx
|
|
31
31
|
import {
|
|
@@ -52,14 +52,14 @@ function Dashboard() {
|
|
|
52
52
|
const { entries } = useEventLog(storeId);
|
|
53
53
|
const { state, loading, refresh } = useStoreState(storeId);
|
|
54
54
|
|
|
55
|
-
if (status !== "connected") return <p>
|
|
56
|
-
if (!storeId) return <p>
|
|
55
|
+
if (status !== "connected") return <p>Conectando...</p>;
|
|
56
|
+
if (!storeId) return <p>Esperando stores...</p>;
|
|
57
57
|
|
|
58
58
|
return (
|
|
59
59
|
<div>
|
|
60
|
-
<h2>
|
|
60
|
+
<h2>Eventos: {entries.length}</h2>
|
|
61
61
|
<pre>{JSON.stringify(state, null, 2)}</pre>
|
|
62
|
-
<button onClick={refresh}>
|
|
62
|
+
<button onClick={refresh}>Refrescar estado</button>
|
|
63
63
|
</div>
|
|
64
64
|
);
|
|
65
65
|
}
|
|
@@ -69,37 +69,37 @@ function Dashboard() {
|
|
|
69
69
|
|
|
70
70
|
## Hooks
|
|
71
71
|
|
|
72
|
-
###
|
|
72
|
+
### Conexión y registro
|
|
73
73
|
|
|
74
|
-
| Hook |
|
|
74
|
+
| Hook | Descripción |
|
|
75
75
|
| -------------------- | ------------------------------------------------------------------------- |
|
|
76
|
-
| `useHubConnection()` |
|
|
77
|
-
| `useStoreRegistry()` |
|
|
76
|
+
| `useHubConnection()` | Estado de conexión, `send()`, `subscribe()`, `disconnect()`, `reconnect()` |
|
|
77
|
+
| `useStoreRegistry()` | Lista en vivo de los stores conectados, con sus capacidades |
|
|
78
78
|
|
|
79
|
-
###
|
|
79
|
+
### Datos
|
|
80
80
|
|
|
81
|
-
| Hook |
|
|
82
|
-
| -------------------------------- |
|
|
83
|
-
| `useEventLog(storeId)` |
|
|
84
|
-
| `useStoreState(storeId)` |
|
|
85
|
-
| `useStoreSubscriptions(storeId)` |
|
|
86
|
-
| `useStoreMetrics(storeId)` |
|
|
81
|
+
| Hook | Descripción |
|
|
82
|
+
| -------------------------------- | ---------------------------------------------------------------------- |
|
|
83
|
+
| `useEventLog(storeId)` | Registro cronológico de eventos, con `clear()` |
|
|
84
|
+
| `useStoreState(storeId)` | Árbol de estado en vivo, parcheado de forma incremental con JSON Patch |
|
|
85
|
+
| `useStoreSubscriptions(storeId)` | Inventario de reducers, efectos y middleware |
|
|
86
|
+
| `useStoreMetrics(storeId)` | Contadores de rendimiento (tasa de eventos, tiempo de proceso, cola) |
|
|
87
87
|
|
|
88
|
-
###
|
|
88
|
+
### Acciones
|
|
89
89
|
|
|
90
|
-
| Hook |
|
|
91
|
-
| --------------------------------- |
|
|
92
|
-
| `useTimeTravel(storeId, entries)` |
|
|
93
|
-
| `useEventReplay(storeId)` |
|
|
94
|
-
| `useEventEmitter(storeId)` |
|
|
90
|
+
| Hook | Descripción |
|
|
91
|
+
| --------------------------------- | ----------------------------------------------------------------- |
|
|
92
|
+
| `useTimeTravel(storeId, entries)` | Salta a cualquier índice de evento, avanza o retrocede, y reanuda |
|
|
93
|
+
| `useEventReplay(storeId)` | Reproduce eventos por los reducers, sin efectos secundarios |
|
|
94
|
+
| `useEventEmitter(storeId)` | Emite eventos sintéticos a un store |
|
|
95
95
|
|
|
96
96
|
---
|
|
97
97
|
|
|
98
|
-
##
|
|
98
|
+
## Contexto
|
|
99
99
|
|
|
100
100
|
### `HubProvider`
|
|
101
101
|
|
|
102
|
-
|
|
102
|
+
Envuelve los componentes hijos en un contexto de conexión WebSocket:
|
|
103
103
|
|
|
104
104
|
```tsx
|
|
105
105
|
<HubProvider
|
|
@@ -120,29 +120,30 @@ Wraps child components in a WebSocket connection context:
|
|
|
120
120
|
```typescript
|
|
121
121
|
interface HubConnectionConfig {
|
|
122
122
|
port: number;
|
|
123
|
-
host?: string; //
|
|
124
|
-
extensionName?: string; //
|
|
125
|
-
autoReconnect?: boolean; //
|
|
126
|
-
maxReconnectAttempts?: number; //
|
|
123
|
+
host?: string; // por defecto: "localhost"
|
|
124
|
+
extensionName?: string; // nombre visible de esta extensión
|
|
125
|
+
autoReconnect?: boolean; // por defecto: true
|
|
126
|
+
maxReconnectAttempts?: number; // por defecto: Infinity
|
|
127
127
|
}
|
|
128
128
|
```
|
|
129
129
|
|
|
130
130
|
---
|
|
131
131
|
|
|
132
|
-
##
|
|
132
|
+
## Sincronización del estado
|
|
133
133
|
|
|
134
|
-
`useStoreState`
|
|
134
|
+
`useStoreState` usa una estrategia de parcheo incremental eficiente:
|
|
135
135
|
|
|
136
|
-
1.
|
|
137
|
-
2.
|
|
138
|
-
3.
|
|
139
|
-
4.
|
|
136
|
+
1. Pide un `STATE_SNAPSHOT` completo al montarse
|
|
137
|
+
2. Guarda en un búfer los parches `STORE_EVENT` que lleguen antes de la instantánea
|
|
138
|
+
3. Reproduce los parches del búfer por orden de versión en cuanto llega la instantánea
|
|
139
|
+
4. Aplica los parches posteriores de forma incremental con `applyPatches`
|
|
140
140
|
|
|
141
|
-
|
|
141
|
+
Así la UI siempre refleja el estado más reciente del store sin pedir instantáneas completas una y
|
|
142
|
+
otra vez.
|
|
142
143
|
|
|
143
144
|
---
|
|
144
145
|
|
|
145
|
-
##
|
|
146
|
+
## Viaje en el tiempo
|
|
146
147
|
|
|
147
148
|
```tsx
|
|
148
149
|
function TimeTravelControls({ storeId, entries }) {
|
|
@@ -152,15 +153,15 @@ function TimeTravelControls({ storeId, entries }) {
|
|
|
152
153
|
return (
|
|
153
154
|
<div>
|
|
154
155
|
<button onClick={stepBack} disabled={currentIndex <= 0}>
|
|
155
|
-
|
|
156
|
+
Atrás
|
|
156
157
|
</button>
|
|
157
158
|
<span>
|
|
158
159
|
{currentIndex + 1} / {entries.length}
|
|
159
160
|
</span>
|
|
160
161
|
<button onClick={stepForward} disabled={currentIndex >= entries.length - 1}>
|
|
161
|
-
|
|
162
|
+
Adelante
|
|
162
163
|
</button>
|
|
163
|
-
{isTimeTraveling && <button onClick={resume}>
|
|
164
|
+
{isTimeTraveling && <button onClick={resume}>Reanudar</button>}
|
|
164
165
|
</div>
|
|
165
166
|
);
|
|
166
167
|
}
|
|
@@ -168,18 +169,18 @@ function TimeTravelControls({ storeId, entries }) {
|
|
|
168
169
|
|
|
169
170
|
---
|
|
170
171
|
|
|
171
|
-
## API
|
|
172
|
+
## Referencia de la API
|
|
172
173
|
|
|
173
|
-
###
|
|
174
|
+
### Contexto
|
|
174
175
|
|
|
175
|
-
| Export |
|
|
176
|
-
| ------------- |
|
|
177
|
-
| `HubProvider` | React
|
|
178
|
-
| `HubContext` |
|
|
176
|
+
| Export | Descripción |
|
|
177
|
+
| ------------- | ------------------------------------------------------------ |
|
|
178
|
+
| `HubProvider` | Provider de contexto de React que envuelve una conexión al hub |
|
|
179
|
+
| `HubContext` | El contexto de React en crudo (para uso avanzado) |
|
|
179
180
|
|
|
180
181
|
### Hooks
|
|
181
182
|
|
|
182
|
-
| Export |
|
|
183
|
+
| Export | Devuelve |
|
|
183
184
|
| --------------------------------- | -------------------------------------------------------------------------- |
|
|
184
185
|
| `useHubConnection()` | `{ status, send, subscribe, disconnect, reconnect }` |
|
|
185
186
|
| `useStoreRegistry()` | `RegisteredStore[]` |
|
|
@@ -191,34 +192,35 @@ function TimeTravelControls({ storeId, entries }) {
|
|
|
191
192
|
| `useEventReplay(storeId)` | `{ replay }` |
|
|
192
193
|
| `useEventEmitter(storeId)` | `{ emit }` |
|
|
193
194
|
|
|
194
|
-
###
|
|
195
|
+
### Utilidades
|
|
195
196
|
|
|
196
|
-
| Export |
|
|
197
|
-
| ------------------------------ |
|
|
198
|
-
| `applyPatches(state, patches)` |
|
|
197
|
+
| Export | Descripción |
|
|
198
|
+
| ------------------------------ | -------------------------------------------------------- |
|
|
199
|
+
| `applyPatches(state, patches)` | Aplica JSON Patches RFC 6902 a un árbol de estado |
|
|
199
200
|
|
|
200
|
-
###
|
|
201
|
+
### Tipos
|
|
201
202
|
|
|
202
|
-
| Export |
|
|
203
|
+
| Export | Descripción |
|
|
203
204
|
| --------------------- | ----------------------------------------------- |
|
|
204
|
-
| `HubConnectionConfig` |
|
|
205
|
+
| `HubConnectionConfig` | Configuración del provider |
|
|
205
206
|
| `HubConnectionStatus` | `"disconnected" \| "connecting" \| "connected"` |
|
|
206
|
-
| `HubContextValue` |
|
|
207
|
-
| `RegisteredStore` |
|
|
208
|
-
| `EventLogEntry` |
|
|
207
|
+
| `HubContextValue` | Forma completa del valor de contexto |
|
|
208
|
+
| `RegisteredStore` | Entrada de store en el registro |
|
|
209
|
+
| `EventLogEntry` | Un único evento del registro |
|
|
209
210
|
|
|
210
211
|
---
|
|
211
212
|
|
|
212
|
-
##
|
|
213
|
+
## Paquetes relacionados
|
|
213
214
|
|
|
214
|
-
- **[@yoltra/devtools-protocol](../devtools-protocol/README.md)** —
|
|
215
|
-
|
|
216
|
-
- **[@yoltra/devtools-storeview](../devtools-storeview/README.md)** — React DOM
|
|
217
|
-
|
|
218
|
-
- **[@yoltra/devtools-server](../devtools-server/README.md)** —
|
|
215
|
+
- **[@yoltra/devtools-protocol](../devtools-protocol/README.md)** — Formato de cable que consumen
|
|
216
|
+
estos hooks
|
|
217
|
+
- **[@yoltra/devtools-storeview](../devtools-storeview/README.md)** — UI de React DOM construida
|
|
218
|
+
sobre estos hooks
|
|
219
|
+
- **[@yoltra/devtools-server](../devtools-server/README.md)** — El hub al que se conectan estos
|
|
220
|
+
hooks
|
|
219
221
|
|
|
220
222
|
---
|
|
221
223
|
|
|
222
|
-
##
|
|
224
|
+
## Licencia
|
|
223
225
|
|
|
224
|
-
**MIT** —
|
|
226
|
+
**MIT** — De uso libre en proyectos comerciales y de código abierto.
|
package/dist/devtools-ui.cjs
CHANGED
|
@@ -1,23 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),
|
|
2
|
-
* @license React
|
|
3
|
-
* react-jsx-runtime.production.js
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var se;function pe(){if(se)return M;se=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function r(o,t,c){var a=null;if(c!==void 0&&(a=""+c),t.key!==void 0&&(a=""+t.key),"key"in t){c={};for(var i in t)i!=="key"&&(c[i]=t[i])}else c=t;return t=c.ref,{$$typeof:e,type:o,key:a,ref:t!==void 0?t:null,props:c}}return M.Fragment=s,M.jsx=r,M.jsxs=r,M}var V={};/**
|
|
10
|
-
* @license React
|
|
11
|
-
* react-jsx-runtime.development.js
|
|
12
|
-
*
|
|
13
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
14
|
-
*
|
|
15
|
-
* This source code is licensed under the MIT license found in the
|
|
16
|
-
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var oe;function Re(){return oe||(oe=1,process.env.NODE_ENV!=="production"&&(function(){function e(n){if(n==null)return null;if(typeof n=="function")return n.$$typeof===de?null:n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case N:return"Fragment";case m:return"Profiler";case S:return"StrictMode";case E:return"Suspense";case C:return"SuspenseList";case fe:return"Activity"}if(typeof n=="object")switch(typeof n.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case T:return"Portal";case x:return(n.displayName||"Context")+".Provider";case I:return(n._context.displayName||"Context")+".Consumer";case k:var d=n.render;return n=n.displayName,n||(n=d.displayName||d.name||"",n=n!==""?"ForwardRef("+n+")":"ForwardRef"),n;case A:return d=n.displayName||null,d!==null?d:e(n.type)||"Memo";case D:d=n._payload,n=n._init;try{return e(n(d))}catch{}}return null}function s(n){return""+n}function r(n){try{s(n);var d=!1}catch{d=!0}if(d){d=console;var p=d.error,y=typeof Symbol=="function"&&Symbol.toStringTag&&n[Symbol.toStringTag]||n.constructor.name||"Object";return p.call(d,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",y),s(n)}}function o(n){if(n===N)return"<>";if(typeof n=="object"&&n!==null&&n.$$typeof===D)return"<...>";try{var d=e(n);return d?"<"+d+">":"<...>"}catch{return"<...>"}}function t(){var n=q.A;return n===null?null:n.getOwner()}function c(){return Error("react-stack-top-frame")}function a(n){if(K.call(n,"key")){var d=Object.getOwnPropertyDescriptor(n,"key").get;if(d&&d.isReactWarning)return!1}return n.key!==void 0}function i(n,d){function p(){Z||(Z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",d))}p.isReactWarning=!0,Object.defineProperty(n,"key",{get:p,configurable:!0})}function l(){var n=e(this.type);return ee[n]||(ee[n]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),n=this.props.ref,n!==void 0?n:null}function R(n,d,p,y,P,w,$,J){return p=w.ref,n={$$typeof:O,type:n,key:d,props:w,_owner:P},(p!==void 0?p:null)!==null?Object.defineProperty(n,"ref",{enumerable:!1,get:l}):Object.defineProperty(n,"ref",{enumerable:!1,value:null}),n._store={},Object.defineProperty(n._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(n,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(n,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:$}),Object.defineProperty(n,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(n.props),Object.freeze(n)),n}function f(n,d,p,y,P,w,$,J){var _=d.children;if(_!==void 0)if(y)if(Ee(_)){for(y=0;y<_.length;y++)v(_[y]);Object.freeze&&Object.freeze(_)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v(_);if(K.call(d,"key")){_=e(n);var j=Object.keys(d).filter(function(Se){return Se!=="key"});y=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ne[_+y]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),T=require("@yoltra/devtools-protocol"),Y=()=>{},Q=u.createContext({status:"disconnected",extensionId:"",send:Y,subscribe:()=>Y,disconnect:Y,reconnect:Y});var U={exports:{}},M={};var se;function pe(){if(se)return M;se=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function n(o,e,c){var a=null;if(c!==void 0&&(a=""+c),e.key!==void 0&&(a=""+e.key),"key"in e){c={};for(var i in e)i!=="key"&&(c[i]=e[i])}else c=e;return e=c.ref,{$$typeof:t,type:o,key:a,ref:e!==void 0?e:null,props:c}}return M.Fragment=s,M.jsx=n,M.jsxs=n,M}var L={};var oe;function Re(){return oe||(oe=1,process.env.NODE_ENV!=="production"&&(function(){function t(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===de?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case k:return"Fragment";case m:return"Profiler";case S:return"StrictMode";case E:return"Suspense";case C:return"SuspenseList";case fe:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case v:return"Portal";case x:return(r.displayName||"Context")+".Provider";case I:return(r._context.displayName||"Context")+".Consumer";case N:var d=r.render;return r=r.displayName,r||(r=d.displayName||d.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case A:return d=r.displayName||null,d!==null?d:t(r.type)||"Memo";case D:d=r._payload,r=r._init;try{return t(r(d))}catch{}}return null}function s(r){return""+r}function n(r){try{s(r);var d=!1}catch{d=!0}if(d){d=console;var p=d.error,_=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return p.call(d,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",_),s(r)}}function o(r){if(r===k)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===D)return"<...>";try{var d=t(r);return d?"<"+d+">":"<...>"}catch{return"<...>"}}function e(){var r=W.A;return r===null?null:r.getOwner()}function c(){return Error("react-stack-top-frame")}function a(r){if(K.call(r,"key")){var d=Object.getOwnPropertyDescriptor(r,"key").get;if(d&&d.isReactWarning)return!1}return r.key!==void 0}function i(r,d){function p(){Z||(Z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",d))}p.isReactWarning=!0,Object.defineProperty(r,"key",{get:p,configurable:!0})}function f(){var r=t(this.type);return ee[r]||(ee[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function R(r,d,p,_,P,w,X,$){return p=w.ref,r={$$typeof:O,type:r,key:d,props:w,_owner:P},(p!==void 0?p:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:f}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:$}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function l(r,d,p,_,P,w,X,$){var y=d.children;if(y!==void 0)if(_)if(Ee(y)){for(_=0;_<y.length;_++)b(y[_]);Object.freeze&&Object.freeze(y)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else b(y);if(K.call(d,"key")){y=t(r);var j=Object.keys(d).filter(function(Se){return Se!=="key"});_=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ne[y+_]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
2
|
let props = %s;
|
|
19
3
|
<%s {...props} />
|
|
20
4
|
React keys must be passed directly to JSX without using spread:
|
|
21
5
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,y,_,j,_),ne[_+y]=!0)}if(_=null,p!==void 0&&(r(p),_=""+p),a(d)&&(r(d.key),_=""+d.key),"key"in d){p={};for(var W in d)W!=="key"&&(p[W]=d[W])}else p=d;return _&&i(p,typeof n=="function"?n.displayName||n.name||"Unknown":n),R(n,_,w,P,t(),p,$,J)}function v(n){typeof n=="object"&&n!==null&&n.$$typeof===O&&n._store&&(n._store.validated=1)}var b=u,O=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),x=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),E=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),A=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),de=Symbol.for("react.client.reference"),q=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,Ee=Array.isArray,X=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(n){return n()}};var Z,ee={},te=b.react_stack_bottom_frame.bind(b,c)(),re=X(o(c)),ne={};V.Fragment=N,V.jsx=function(n,d,p,y,P){var w=1e4>q.recentlyCreatedOwnerStacks++;return f(n,d,p,!1,y,P,w?Error("react-stack-top-frame"):te,w?X(o(n)):re)},V.jsxs=function(n,d,p,y,P){var w=1e4>q.recentlyCreatedOwnerStacks++;return f(n,d,p,!0,y,P,w?Error("react-stack-top-frame"):te,w?X(o(n)):re)}})()),V}var ce;function ve(){return ce||(ce=1,process.env.NODE_ENV==="production"?U.exports=pe():U.exports=Re()),U.exports}var Te=ve();const he={timeTravel:!0,eventReplay:!0,stateExplorer:!0,eventEmit:!0,performanceMetrics:!0},be=750,me=3e4;function Oe({config:e,children:s}){const[r,o]=u.useState("disconnected"),t=u.useRef(null),c=u.useRef(new Set),a=u.useRef(0),i=u.useRef(null),l=u.useRef(crypto.randomUUID()),R=u.useRef(e);R.current=e;const f=u.useCallback(()=>{const S=R.current,I=`ws://${S.host??"localhost"}:${S.port}`,x=S.WebSocket??(typeof globalThis.WebSocket<"u"?globalThis.WebSocket:void 0);if(!x){console.error("[Yoltra DevTools] No WebSocket implementation available. In Node.js, pass { WebSocket } from 'ws' via config.WebSocket.");return}o("connecting");try{const k=new x(I);t.current=k,k.onopen=()=>{a.current=0;const E=JSON.stringify({type:"HANDSHAKE_REQUEST",protocolVersion:h.PROTOCOL_VERSION,role:h.DevtoolsRole.EXTENSION,extension:{id:l.current,name:S.extensionName??"DevTools UI",capabilities:he}});k.send(E)},k.onmessage=E=>{try{const C=typeof E.data=="string"?E.data:String(E.data),A=JSON.parse(C);if(A.type==="HANDSHAKE_RESPONSE"){A.success?o("connected"):k.close();return}c.current.forEach(D=>D(A))}catch{}},k.onclose=()=>{t.current=null,o("disconnected");const E=S.autoReconnect??!0,C=S.maxReconnectAttempts??1/0;if(E&&a.current<C){const A=a.current++,D=Math.min(be*Math.pow(2,A)+Math.random()*500,me);i.current=setTimeout(f,D)}},k.onerror=()=>{}}catch{o("disconnected")}},[]),v=u.useCallback(()=>{i.current&&(clearTimeout(i.current),i.current=null),a.current=1/0,t.current?.close(),t.current=null,o("disconnected")},[]),b=u.useCallback(()=>{a.current=0,t.current?.close(),t.current=null,f()},[f]),O=u.useCallback(S=>{const m=t.current;m&&m.readyState===1&&m.send(JSON.stringify(S))},[]),T=u.useCallback(S=>(c.current.add(S),()=>{c.current.delete(S)}),[]);u.useEffect(()=>(f(),()=>{i.current&&clearTimeout(i.current),a.current=1/0,t.current?.close()}),[f]);const N={status:r,extensionId:l.current,send:O,subscribe:T,disconnect:v,reconnect:b};return Te.jsx(Q.Provider,{value:N,children:s})}function g(){return u.useContext(Q)}function ye(e){const{send:s,extensionId:r}=g();return{emit:u.useCallback((t,c,a)=>{e&&s({type:"EMIT_TO_STORE",storeId:e,event:{channel:t,type:c,payload:a},timestamp:new Date().toISOString(),sourceId:r,sourceRole:h.DevtoolsRole.EXTENSION})},[e,s,r])}}const _e=2e3;function Ne(e,s){const{subscribe:r}=g(),o=s?.maxEntries??_e,t=u.useRef(new Map),c=u.useRef(o);c.current=o;const[,a]=u.useState(0);u.useEffect(()=>r(f=>{if(f.type!=="STORE_EVENT")return;const v=f.storeId,b={event:f.event,storeId:v,patches:f.patches,snapshotVersion:f.snapshotVersion,committed:f.committed,timestamp:f.timestamp},T=[...t.current.get(v)??[],b];t.current.set(v,T.length>c.current?T.slice(T.length-c.current):T),a(N=>N+1)}),[r]);const i=u.useCallback(()=>{e&&(t.current.delete(e),a(R=>R+1))},[e]);return{entries:e?t.current.get(e)??[]:[],clear:i}}function ke(e){const{send:s,extensionId:r}=g();return{replay:u.useCallback((t,c)=>{e&&s({type:"EVENT_REPLAY",storeId:e,snapshot:t,events:c.map(a=>({id:a.event.id,channel:a.event.channel,type:a.event.type,payload:a.event.payload})),timestamp:new Date().toISOString(),sourceId:r,sourceRole:h.DevtoolsRole.EXTENSION})},[e,s,r])}}function Ie(e,s){const{send:r,subscribe:o,extensionId:t}=g(),[c,a]=u.useState(null),[i,l]=u.useState(!1),R=s?.refreshIntervalMs??2e3,f=u.useRef(null),v=u.useCallback(()=>{e&&(l(!0),r({type:"REQUEST_METRICS",storeId:e,timestamp:new Date().toISOString(),sourceId:t,sourceRole:h.DevtoolsRole.EXTENSION}))},[e,r,t]);return u.useEffect(()=>{if(!e){a(null);return}v();const b=o(O=>{O.type==="STORE_METRICS"&&O.storeId===e&&(a(O.metrics),l(!1))});return R>0&&(f.current=setInterval(v,R)),()=>{b(),f.current&&(clearInterval(f.current),f.current=null)}},[e,o,v,R]),{metrics:c,loading:i,refresh:v}}function Ce(){const{subscribe:e}=g(),[s,r]=u.useState([]);return u.useEffect(()=>e(t=>{switch(t.type){case"STORE_REGISTRY":r(t.stores);break;case"STORE_CONNECTED":r(c=>c.some(i=>i.id===t.store.id)?c.map(i=>i.id===t.store.id?{...i,status:"connected"}:i):[...c,{id:t.store.id,name:t.store.name,status:"connected",capabilities:t.store.capabilities,connectedAt:t.timestamp}]);break;case"STORE_DISCONNECTED":r(c=>c.map(a=>a.id===t.storeId?{...a,status:"disconnected"}:a));break}}),[e]),s}function F(e,s){let r=e;for(const o of s){const t=Ae(o.path);switch(o.op){case"add":r=z(r,t,o.value,!0);break;case"replace":r=z(r,t,o.value,!1);break;case"remove":r=le(r,t);break}}return r}function Ae(e){return e===""||e==="/"?[]:e.slice(1).split("/").map(s=>s.replace(/~1/g,"/").replace(/~0/g,"~"))}const ie=new Set(["__proto__","constructor","prototype"]);function z(e,s,r,o){if(s.length===0)return r;const t=Array.isArray(e)?[...e]:{...e},[c,...a]=s;if(ie.has(c))return t;if(a.length===0)if(o&&Array.isArray(t)){const i=c==="-"?t.length:Number(c);Number.isInteger(i)&&i>=0&&i<=t.length?t.splice(i,0,r):t[c]=r}else t[c]=r;else t[c]=z(t[c]??{},a,r,o);return t}function le(e,s){if(s.length===0)return;const r=Array.isArray(e)?[...e]:{...e},[o,...t]=s;return ie.has(o)||(t.length===0?Array.isArray(r)?r.splice(Number(o),1):delete r[o]:r[o]=le(r[o],t)),r}function xe(e){const s=e.scheduler??{setInterval:(t,c)=>setInterval(t,c),clearInterval:t=>clearInterval(t)};let r=s.setInterval(()=>{if(e.isSettled()){o();return}e.request()},e.intervalMs);function o(){r!==null&&(s.clearInterval(r),r=null)}return o}const we=1500;function ge(e){const{send:s,subscribe:r,extensionId:o}=g(),[t,c]=u.useState(null),[a,i]=u.useState(0),[l,R]=u.useState(!1),f=u.useRef(0),v=u.useRef([]),b=u.useRef(null),O=u.useCallback(()=>{b.current?.(),b.current=null},[]),T=u.useCallback(()=>{e&&(R(!0),s({type:"REQUEST_STATE",storeId:e,timestamp:new Date().toISOString(),sourceId:o,sourceRole:h.DevtoolsRole.EXTENSION}))},[e,s,o]);return u.useEffect(()=>{if(!e){c(null),i(0),f.current=0;return}T(),b.current=xe({request:T,isSettled:()=>f.current!==0,intervalMs:we});const N=r(S=>{if(S.type==="STATE_SNAPSHOT"&&S.storeId===e){O(),c(S.state),i(S.version),f.current=S.version,R(!1);const m=v.current.filter(I=>I.version>S.version).sort((I,x)=>I.version-x.version);if(v.current=[],m.length>0){c(x=>{let k=x;for(const E of m)k=F(k,E.patches);return k});const I=m[m.length-1].version;i(I),f.current=I}return}if(S.type==="STORE_EVENT"&&S.storeId===e&&S.committed){if(f.current===0){v.current.push({patches:S.patches,version:S.snapshotVersion});return}if(S.snapshotVersion<=f.current)return;c(m=>F(m,S.patches)),i(S.snapshotVersion),f.current=S.snapshotVersion}});return()=>{N(),O(),v.current=[]}},[e,r,T,O]),{state:t,version:a,loading:l,refresh:T}}function Pe(e){const{send:s,subscribe:r,extensionId:o}=g(),[t,c]=u.useState(null),[a,i]=u.useState(!1),l=u.useCallback(()=>{e&&(i(!0),s({type:"REQUEST_SUBSCRIPTIONS",storeId:e,timestamp:new Date().toISOString(),sourceId:o,sourceRole:h.DevtoolsRole.EXTENSION}))},[e,s,o]);return u.useEffect(()=>{if(!e){c(null);return}return l(),r(f=>{f.type==="STORE_SUBSCRIPTIONS"&&f.storeId===e&&(c({atomic:f.atomic,event:f.event,coarse:f.coarse,effects:f.effects,middleware:f.middleware,reducers:f.reducers}),i(!1))})},[e,r,l]),{data:t,loading:a,refresh:l}}function ae(e,s){const{isTimeTraveling:r,currentIndex:o,entryCount:t}=s,c=t-1;if(e==="back"){const l=(r?o:c)-1;return l>=0?{kind:"jump",index:l}:{kind:"none"}}if(!r)return{kind:"none"};const a=o+1;return a>c?{kind:"resume"}:{kind:"jump",index:a}}function De(e){const{baseline:s,entries:r,index:o,cache:t}=e;if(s===null)return{state:null,cache:null};let c=0,a=s.state;t!==null&&t.index<=o&&r[t.index]===t.marker&&(c=t.index+1,a=t.state);for(let l=c;l<=o;l++){const R=r[l];if(R===void 0)break;R.snapshotVersion<=s.version||(a=F(a,R.patches))}const i=r[o];return{state:a,cache:o>=0&&i!==void 0?{index:o,state:a,marker:i}:null}}function je(e,s,r=!0){const{send:o,subscribe:t,extensionId:c}=g(),[a,i]=u.useState(-1),[l,R]=u.useState(!1),[f,v]=u.useState(null),b=u.useRef(null),O=u.useRef(null);u.useEffect(()=>{if(b.current=null,O.current=null,v(null),!!e)return t(E=>{E.type==="STATE_SNAPSHOT"&&E.storeId===e&&b.current===null&&(b.current={state:E.state,version:E.version})})},[e,t]);const T=u.useCallback(E=>{const{state:C,cache:A}=De({baseline:b.current,entries:s,index:E,cache:O.current});return O.current=A,C},[s]),N=u.useCallback(E=>{if(!e||!r||E<0||E>=s.length)return;v(A=>A??s.length),i(E),R(!0);const C=s[E];o({type:"TIME_TRAVEL",storeId:e,state:T(E),snapshotVersion:C.snapshotVersion,timestamp:new Date().toISOString(),sourceId:c,sourceRole:h.DevtoolsRole.EXTENSION})},[e,s,o,T,r,c]),S=u.useCallback(()=>{if(R(!1),i(-1),v(null),r&&e&&s.length>0){const E=s.length-1,C=s[E];o({type:"TIME_TRAVEL",storeId:e,state:T(E),snapshotVersion:C.snapshotVersion,timestamp:new Date().toISOString(),sourceId:c,sourceRole:h.DevtoolsRole.EXTENSION})}},[e,s,o,T,r,c]),m=f??s.length,I=u.useCallback(()=>{const E=ae("back",{isTimeTraveling:l,currentIndex:a,entryCount:m});E.kind==="jump"&&N(E.index)},[l,a,m,N]),x=u.useCallback(()=>{const E=ae("forward",{isTimeTraveling:l,currentIndex:a,entryCount:m});E.kind==="jump"?N(E.index):E.kind==="resume"&&S()},[l,a,m,N,S]),k=u.useMemo(()=>T(l?a:s.length-1),[T,l,a,s.length]);return{currentIndex:a,isTimeTraveling:l,previewState:k,frameCount:f,jumpTo:N,stepBack:I,stepForward:x,resume:S}}const G=0,B=1,Me=2,L=3;function H(){return{timestamp:new Date().toISOString(),sourceId:"loopback-hub",sourceRole:h.DevtoolsRole.HUB}}function ue(e){return e.split(".")[0]??"0"}class Ve{constructor(){this.peers=new Set}add(s){const r={role:null,id:null,deliver:s,closed:!1};return this.peers.add(r),r}remove(s){if(this.peers.delete(s)&&(s.closed=!0,s.role===h.DevtoolsRole.STORE&&s.id)){const r=JSON.stringify({type:"STORE_DISCONNECTED",storeId:s.id,reason:"disconnected",...H()});this.eachExtension(o=>o.deliver(r))}}receive(s,r){if(s.closed)return;let o;try{o=JSON.parse(r)}catch{return}if(!(o===null||typeof o!="object"||typeof o.type!="string")){if(s.role===null){this.handshake(s,o);return}if(s.role===h.DevtoolsRole.STORE)this.eachExtension(t=>t.deliver(r));else if(typeof o.storeId=="string")for(const t of this.peers)t.role===h.DevtoolsRole.STORE&&t.id===o.storeId&&t.deliver(r)}}handshake(s,r){if(r.type!=="HANDSHAKE_REQUEST")return;const o=r.role,t=o===h.DevtoolsRole.STORE?r.store?.id:o===h.DevtoolsRole.EXTENSION?r.extension?.id:void 0,a=ue(String(r.protocolVersion??""))===ue(h.PROTOCOL_VERSION)&&typeof t=="string";if(s.deliver(JSON.stringify({type:"HANDSHAKE_RESPONSE",success:a,negotiatedVersion:h.PROTOCOL_VERSION,...H(),...a?{}:{error:"Loopback handshake rejected (version or id mismatch)"}})),!!a)if(s.role=o,s.id=t,o===h.DevtoolsRole.STORE){s.storeInfo={name:r.store?.name??t,capabilities:r.store?.capabilities};const i=JSON.stringify({type:"STORE_CONNECTED",store:{id:t,name:s.storeInfo.name,capabilities:s.storeInfo.capabilities},...H()});this.eachExtension(l=>l.deliver(i))}else{const i=[...this.peers].filter(l=>l.role===h.DevtoolsRole.STORE&&l.storeInfo).map(l=>({id:l.id,name:l.storeInfo.name,status:"connected",capabilities:l.storeInfo.capabilities,connectedAt:new Date().toISOString()}));s.deliver(JSON.stringify({type:"STORE_REGISTRY",stores:i,...H()}))}}eachExtension(s){for(const r of this.peers)r.role===h.DevtoolsRole.EXTENSION&&s(r)}}function Le(){const e=new Ve,s=(t,c)=>{let a=G;const i=e.add(l=>c.onMessage(l));return queueMicrotask(()=>{a=B,c.onOpen()}),{get readyState(){return a},send:l=>e.receive(i,l),close:()=>{a!==L&&(a=L,e.remove(i),c.onClose())},dispose:()=>{i.closed=!0}}},o=class o{constructor(c){this.onopen=null,this.onmessage=null,this.onclose=null,this.onerror=null,this.readyState=G,this.peer=e.add(a=>this.onmessage?.({data:a})),queueMicrotask(()=>{this.readyState=B,this.onopen?.()})}send(c){e.receive(this.peer,c)}close(){this.readyState!==L&&(this.readyState=L,e.remove(this.peer),this.onclose?.())}};o.CONNECTING=G,o.OPEN=B,o.CLOSING=Me,o.CLOSED=L;let r=o;return{agentSocketFactory:s,WebSocket:r}}exports.HubContext=Q;exports.HubProvider=Oe;exports.applyPatches=F;exports.createLoopbackHub=Le;exports.useEventEmitter=ye;exports.useEventLog=Ne;exports.useEventReplay=ke;exports.useHubConnection=g;exports.useStoreMetrics=Ie;exports.useStoreRegistry=Ce;exports.useStoreState=ge;exports.useStoreSubscriptions=Pe;exports.useTimeTravel=je;
|
|
6
|
+
<%s key={someKey} {...props} />`,_,y,j,y),ne[y+_]=!0)}if(y=null,p!==void 0&&(n(p),y=""+p),a(d)&&(n(d.key),y=""+d.key),"key"in d){p={};for(var J in d)J!=="key"&&(p[J]=d[J])}else p=d;return y&&i(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),R(r,y,w,P,e(),p,X,$)}function b(r){typeof r=="object"&&r!==null&&r.$$typeof===O&&r._store&&(r._store.validated=1)}var h=u,O=Symbol.for("react.transitional.element"),v=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),x=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),E=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),A=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),de=Symbol.for("react.client.reference"),W=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,Ee=Array.isArray,q=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(r){return r()}};var Z,ee={},te=h.react_stack_bottom_frame.bind(h,c)(),re=q(o(c)),ne={};L.Fragment=k,L.jsx=function(r,d,p,_,P){var w=1e4>W.recentlyCreatedOwnerStacks++;return l(r,d,p,!1,_,P,w?Error("react-stack-top-frame"):te,w?q(o(r)):re)},L.jsxs=function(r,d,p,_,P){var w=1e4>W.recentlyCreatedOwnerStacks++;return l(r,d,p,!0,_,P,w?Error("react-stack-top-frame"):te,w?q(o(r)):re)}})()),L}var ce;function be(){return ce||(ce=1,process.env.NODE_ENV==="production"?U.exports=pe():U.exports=Re()),U.exports}var ve=be();const Te={timeTravel:!0,eventReplay:!0,stateExplorer:!0,eventEmit:!0,performanceMetrics:!0},he=750,me=3e4;function Oe({config:t,children:s}){const[n,o]=u.useState("disconnected"),e=u.useRef(null),c=u.useRef(new Set),a=u.useRef(0),i=u.useRef(null),f=u.useRef(crypto.randomUUID()),R=u.useRef(t);R.current=t;const l=u.useCallback(()=>{const S=R.current,I=`ws://${S.host??"localhost"}:${S.port}`,x=S.WebSocket??(typeof globalThis.WebSocket<"u"?globalThis.WebSocket:void 0);if(!x){console.error("[Yoltra DevTools] No WebSocket implementation available. In Node.js, pass { WebSocket } from 'ws' via config.WebSocket.");return}o("connecting");try{const N=new x(I);e.current=N,N.onopen=()=>{a.current=0;const E=JSON.stringify({type:"HANDSHAKE_REQUEST",protocolVersion:T.PROTOCOL_VERSION,role:T.DevtoolsRole.EXTENSION,extension:{id:f.current,name:S.extensionName??"DevTools UI",capabilities:Te}});N.send(E)},N.onmessage=E=>{try{const C=typeof E.data=="string"?E.data:String(E.data),A=JSON.parse(C);if(A.type==="HANDSHAKE_RESPONSE"){A.success?o("connected"):N.close();return}c.current.forEach(D=>D(A))}catch{}},N.onclose=()=>{e.current=null,o("disconnected");const E=S.autoReconnect??!0,C=S.maxReconnectAttempts??1/0;if(E&&a.current<C){const A=a.current++,D=Math.min(he*Math.pow(2,A)+Math.random()*500,me);i.current=setTimeout(l,D)}},N.onerror=()=>{}}catch{o("disconnected")}},[]),b=u.useCallback(()=>{i.current&&(clearTimeout(i.current),i.current=null),a.current=1/0,e.current?.close(),e.current=null,o("disconnected")},[]),h=u.useCallback(()=>{a.current=0,e.current?.close(),e.current=null,l()},[l]),O=u.useCallback(S=>{const m=e.current;m&&m.readyState===1&&m.send(JSON.stringify(S))},[]),v=u.useCallback(S=>(c.current.add(S),()=>{c.current.delete(S)}),[]);u.useEffect(()=>(l(),()=>{i.current&&clearTimeout(i.current),a.current=1/0,e.current?.close()}),[l]);const k={status:n,extensionId:f.current,send:O,subscribe:v,disconnect:b,reconnect:h};return ve.jsx(Q.Provider,{value:k,children:s})}function g(){return u.useContext(Q)}function _e(t){const{send:s,extensionId:n}=g();return{emit:u.useCallback((e,c,a)=>{t&&s({type:"EMIT_TO_STORE",storeId:t,event:{channel:e,type:c,payload:a},timestamp:new Date().toISOString(),sourceId:n,sourceRole:T.DevtoolsRole.EXTENSION})},[t,s,n])}}const ye=2e3;function ke(t,s){const{subscribe:n}=g(),o=s?.maxEntries??ye,e=u.useRef(new Map),c=u.useRef(o);c.current=o;const[,a]=u.useState(0);u.useEffect(()=>n(l=>{if(l.type!=="STORE_EVENT")return;const b=l.storeId,h={event:l.event,storeId:b,patches:l.patches,snapshotVersion:l.snapshotVersion,committed:l.committed,timestamp:l.timestamp},v=[...e.current.get(b)??[],h];e.current.set(b,v.length>c.current?v.slice(v.length-c.current):v),a(k=>k+1)}),[n]);const i=u.useCallback(()=>{t&&(e.current.delete(t),a(R=>R+1))},[t]);return{entries:t?e.current.get(t)??[]:[],clear:i}}function Ne(t){const{send:s,extensionId:n}=g();return{replay:u.useCallback((e,c)=>{t&&s({type:"EVENT_REPLAY",storeId:t,snapshot:e,events:c.map(a=>({id:a.event.id,channel:a.event.channel,type:a.event.type,payload:a.event.payload})),timestamp:new Date().toISOString(),sourceId:n,sourceRole:T.DevtoolsRole.EXTENSION})},[t,s,n])}}function Ie(t,s){const{send:n,subscribe:o,extensionId:e}=g(),[c,a]=u.useState(null),[i,f]=u.useState(!1),R=s?.refreshIntervalMs??2e3,l=u.useRef(null),b=u.useCallback(()=>{t&&(f(!0),n({type:"REQUEST_METRICS",storeId:t,timestamp:new Date().toISOString(),sourceId:e,sourceRole:T.DevtoolsRole.EXTENSION}))},[t,n,e]);return u.useEffect(()=>{if(!t){a(null);return}b();const h=o(O=>{O.type==="STORE_METRICS"&&O.storeId===t&&(a(O.metrics),f(!1))});return R>0&&(l.current=setInterval(b,R)),()=>{h(),l.current&&(clearInterval(l.current),l.current=null)}},[t,o,b,R]),{metrics:c,loading:i,refresh:b}}function Ce(){const{subscribe:t}=g(),[s,n]=u.useState([]);return u.useEffect(()=>t(e=>{switch(e.type){case"STORE_REGISTRY":n(e.stores);break;case"STORE_CONNECTED":n(c=>c.some(i=>i.id===e.store.id)?c.map(i=>i.id===e.store.id?{...i,status:"connected"}:i):[...c,{id:e.store.id,name:e.store.name,status:"connected",capabilities:e.store.capabilities,connectedAt:e.timestamp}]);break;case"STORE_DISCONNECTED":n(c=>c.map(a=>a.id===e.storeId?{...a,status:"disconnected"}:a));break}}),[t]),s}function F(t,s){let n=t;for(const o of s){const e=Ae(o.path);switch(o.op){case"add":n=z(n,e,o.value,!0);break;case"replace":n=z(n,e,o.value,!1);break;case"remove":n=le(n,e);break}}return n}function Ae(t){return t===""||t==="/"?[]:t.slice(1).split("/").map(s=>s.replace(/~1/g,"/").replace(/~0/g,"~"))}const ie=new Set(["__proto__","constructor","prototype"]);function z(t,s,n,o){if(s.length===0)return n;const e=Array.isArray(t)?[...t]:{...t},[c,...a]=s;if(ie.has(c))return e;if(a.length===0)if(o&&Array.isArray(e)){const i=c==="-"?e.length:Number(c);Number.isInteger(i)&&i>=0&&i<=e.length?e.splice(i,0,n):e[c]=n}else e[c]=n;else e[c]=z(e[c]??{},a,n,o);return e}function le(t,s){if(s.length===0)return;const n=Array.isArray(t)?[...t]:{...t},[o,...e]=s;return ie.has(o)||(e.length===0?Array.isArray(n)?n.splice(Number(o),1):delete n[o]:n[o]=le(n[o],e)),n}function xe(t){const s=t.scheduler??{setInterval:(e,c)=>setInterval(e,c),clearInterval:e=>clearInterval(e)};let n=s.setInterval(()=>{if(t.isSettled()){o();return}t.request()},t.intervalMs);function o(){n!==null&&(s.clearInterval(n),n=null)}return o}const we=1500;function ge(t){const{send:s,subscribe:n,extensionId:o}=g(),[e,c]=u.useState(null),[a,i]=u.useState(0),[f,R]=u.useState(!1),l=u.useRef(0),b=u.useRef([]),h=u.useRef(null),O=u.useCallback(()=>{h.current?.(),h.current=null},[]),v=u.useCallback(()=>{t&&(R(!0),s({type:"REQUEST_STATE",storeId:t,timestamp:new Date().toISOString(),sourceId:o,sourceRole:T.DevtoolsRole.EXTENSION}))},[t,s,o]);return u.useEffect(()=>{if(!t){c(null),i(0),l.current=0;return}v(),h.current=xe({request:v,isSettled:()=>l.current!==0,intervalMs:we});const k=n(S=>{if(S.type==="STATE_SNAPSHOT"&&S.storeId===t){O(),c(S.state),i(S.version),l.current=S.version,R(!1);const m=b.current.filter(I=>I.version>S.version).sort((I,x)=>I.version-x.version);if(b.current=[],m.length>0){c(x=>{let N=x;for(const E of m)N=F(N,E.patches);return N});const I=m[m.length-1].version;i(I),l.current=I}return}if(S.type==="STORE_EVENT"&&S.storeId===t&&S.committed){if(l.current===0){b.current.push({patches:S.patches,version:S.snapshotVersion});return}if(S.snapshotVersion<=l.current)return;c(m=>F(m,S.patches)),i(S.snapshotVersion),l.current=S.snapshotVersion}});return()=>{k(),O(),b.current=[]}},[t,n,v,O]),{state:e,version:a,loading:f,refresh:v}}function Pe(t){const{send:s,subscribe:n,extensionId:o}=g(),[e,c]=u.useState(null),[a,i]=u.useState(!1),f=u.useCallback(()=>{t&&(i(!0),s({type:"REQUEST_SUBSCRIPTIONS",storeId:t,timestamp:new Date().toISOString(),sourceId:o,sourceRole:T.DevtoolsRole.EXTENSION}))},[t,s,o]);return u.useEffect(()=>{if(!t){c(null);return}return f(),n(l=>{l.type==="STORE_SUBSCRIPTIONS"&&l.storeId===t&&(c({atomic:l.atomic,event:l.event,coarse:l.coarse,effects:l.effects,middleware:l.middleware,reducers:l.reducers}),i(!1))})},[t,n,f]),{data:e,loading:a,refresh:f}}function ae(t,s){const{isTimeTraveling:n,currentIndex:o,entryCount:e}=s,c=e-1;if(t==="back"){const f=(n?o:c)-1;return f>=0?{kind:"jump",index:f}:{kind:"none"}}if(!n)return{kind:"none"};const a=o+1;return a>c?{kind:"resume"}:{kind:"jump",index:a}}function De(t){const{baseline:s,entries:n,index:o,cache:e}=t;if(s===null)return{state:null,cache:null};let c=0,a=s.state;e!==null&&e.index<=o&&n[e.index]===e.marker&&(c=e.index+1,a=e.state);for(let f=c;f<=o;f++){const R=n[f];if(R===void 0)break;R.snapshotVersion<=s.version||(a=F(a,R.patches))}const i=n[o];return{state:a,cache:o>=0&&i!==void 0?{index:o,state:a,marker:i}:null}}function je(t,s,n=!0){const{send:o,subscribe:e,extensionId:c}=g(),[a,i]=u.useState(-1),[f,R]=u.useState(!1),[l,b]=u.useState(null),h=u.useRef(null),O=u.useRef(null);u.useEffect(()=>{if(h.current=null,O.current=null,b(null),!!t)return e(E=>{E.type==="STATE_SNAPSHOT"&&E.storeId===t&&h.current===null&&(h.current={state:E.state,version:E.version})})},[t,e]);const v=u.useCallback(E=>{const{state:C,cache:A}=De({baseline:h.current,entries:s,index:E,cache:O.current});return O.current=A,C},[s]),k=u.useCallback(E=>{if(!t||!n||E<0||E>=s.length)return;b(A=>A??s.length),i(E),R(!0);const C=s[E];o({type:"TIME_TRAVEL",storeId:t,state:v(E),snapshotVersion:C.snapshotVersion,timestamp:new Date().toISOString(),sourceId:c,sourceRole:T.DevtoolsRole.EXTENSION})},[t,s,o,v,n,c]),S=u.useCallback(()=>{if(R(!1),i(-1),b(null),n&&t&&s.length>0){const E=s.length-1,C=s[E];o({type:"TIME_TRAVEL",storeId:t,state:v(E),snapshotVersion:C.snapshotVersion,timestamp:new Date().toISOString(),sourceId:c,sourceRole:T.DevtoolsRole.EXTENSION})}},[t,s,o,v,n,c]),m=l??s.length,I=u.useCallback(()=>{const E=ae("back",{isTimeTraveling:f,currentIndex:a,entryCount:m});E.kind==="jump"&&k(E.index)},[f,a,m,k]),x=u.useCallback(()=>{const E=ae("forward",{isTimeTraveling:f,currentIndex:a,entryCount:m});E.kind==="jump"?k(E.index):E.kind==="resume"&&S()},[f,a,m,k,S]),N=u.useMemo(()=>v(f?a:s.length-1),[v,f,a,s.length]);return{currentIndex:a,isTimeTraveling:f,previewState:N,frameCount:l,jumpTo:k,stepBack:I,stepForward:x,resume:S}}const G=0,B=1,Me=2,V=3;function H(){return{timestamp:new Date().toISOString(),sourceId:"loopback-hub",sourceRole:T.DevtoolsRole.HUB}}function ue(t){return t.split(".")[0]??"0"}class Le{constructor(){this.peers=new Set}add(s){const n={role:null,id:null,deliver:s,closed:!1};return this.peers.add(n),n}remove(s){if(this.peers.delete(s)&&(s.closed=!0,s.role===T.DevtoolsRole.STORE&&s.id)){const n=JSON.stringify({type:"STORE_DISCONNECTED",storeId:s.id,reason:"disconnected",...H()});this.eachExtension(o=>o.deliver(n))}}receive(s,n){if(s.closed)return;let o;try{o=JSON.parse(n)}catch{return}if(!(o===null||typeof o!="object"||typeof o.type!="string")){if(s.role===null){this.handshake(s,o);return}if(s.role===T.DevtoolsRole.STORE)this.eachExtension(e=>e.deliver(n));else if(typeof o.storeId=="string")for(const e of this.peers)e.role===T.DevtoolsRole.STORE&&e.id===o.storeId&&e.deliver(n)}}handshake(s,n){if(n.type!=="HANDSHAKE_REQUEST")return;const o=n.role,e=o===T.DevtoolsRole.STORE?n.store?.id:o===T.DevtoolsRole.EXTENSION?n.extension?.id:void 0,a=ue(String(n.protocolVersion??""))===ue(T.PROTOCOL_VERSION)&&typeof e=="string";if(s.deliver(JSON.stringify({type:"HANDSHAKE_RESPONSE",success:a,negotiatedVersion:T.PROTOCOL_VERSION,...H(),...a?{}:{error:"Loopback handshake rejected (version or id mismatch)"}})),!!a)if(s.role=o,s.id=e,o===T.DevtoolsRole.STORE){s.storeInfo={name:n.store?.name??e,capabilities:n.store?.capabilities};const i=JSON.stringify({type:"STORE_CONNECTED",store:{id:e,name:s.storeInfo.name,capabilities:s.storeInfo.capabilities},...H()});this.eachExtension(f=>f.deliver(i))}else{const i=[...this.peers].filter(f=>f.role===T.DevtoolsRole.STORE&&f.storeInfo).map(f=>({id:f.id,name:f.storeInfo.name,status:"connected",capabilities:f.storeInfo.capabilities,connectedAt:new Date().toISOString()}));s.deliver(JSON.stringify({type:"STORE_REGISTRY",stores:i,...H()}))}}eachExtension(s){for(const n of this.peers)n.role===T.DevtoolsRole.EXTENSION&&s(n)}}function Ve(){const t=new Le,s=(o,e)=>{let c=G;const a=t.add(i=>e.onMessage(i));return queueMicrotask(()=>{c=B,e.onOpen()}),{get readyState(){return c},send:i=>t.receive(a,i),close:()=>{c!==V&&(c=V,t.remove(a),e.onClose())},dispose:()=>{a.closed=!0}}};class n{constructor(e){this.onopen=null,this.onmessage=null,this.onclose=null,this.onerror=null,this.readyState=G,this.peer=t.add(c=>this.onmessage?.({data:c})),queueMicrotask(()=>{this.readyState=B,this.onopen?.()})}static{this.CONNECTING=G}static{this.OPEN=B}static{this.CLOSING=Me}static{this.CLOSED=V}send(e){t.receive(this.peer,e)}close(){this.readyState!==V&&(this.readyState=V,t.remove(this.peer),this.onclose?.())}}return{agentSocketFactory:s,WebSocket:n}}exports.HubContext=Q;exports.HubProvider=Oe;exports.applyPatches=F;exports.createLoopbackHub=Ve;exports.useEventEmitter=_e;exports.useEventLog=ke;exports.useEventReplay=Ne;exports.useHubConnection=g;exports.useStoreMetrics=Ie;exports.useStoreRegistry=Ce;exports.useStoreState=ge;exports.useStoreSubscriptions=Pe;exports.useTimeTravel=je;
|
|
23
7
|
//# sourceMappingURL=devtools-ui.cjs.map
|