Mini Widgets
Custom Dev Tools
DevTools en React
Muestra un panel de diagnóstico posicionable libremente. Recopila las marcas de error existentes del editor y muestra valores de debug propios; no es un React Error Boundary.
Referencia para @arcrider/arcwidgets-react@0.1.0-alpha.5. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.
Ejemplo completo
import { ArcWidgetDevTools } from '@arcrider/arcwidgets-react';
import { useState } from 'react';
const lang = document.documentElement.lang.startsWith('en') ? 'en' : document.documentElement.lang.startsWith('es') ? 'es' : 'de'; const t = (de: string, en: string, es: string) => lang === 'en' ? en : lang === 'es' ? es : de;
export default function Example() { const [enabled, setEnabled] = useState(true); return ( <> <label> <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} /> {t('Debug anzeigen', 'Show debug', 'Mostrar depuración')} </label> {enabled && ( <ArcWidgetDevTools data={{ errorPanel: { visible: true, maxErrors: 20, debug: { activeView: 'orders', }, footerButtons: [ { title: t('Panel schließen', 'Close panel', 'Cerrar panel'), clickable: true, }, ], }, }} onFooterClick={() => setEnabled(false)} /> )} </> ); }</code></pre>
Props del componente
id
ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.
data
Configuración de tipo ArcWidgetDevToolsData. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.
onAction
Fallback opcional (type: string, ...args: unknown[]) => unknown. El callback concreto tiene prioridad. Detalles: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
onFooterClick
Índice de base cero del botón del footer.
onFooterClick?: (index: number) => void;
Configuración
Los siguientes campos pertenecen a data. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.
errorPanel
Textos de mensaje y botones de footer opcionales.
Tipo: ArcWidgetDevToolsErrorPanel.
Comportamiento y límites
- El panel se adjunta al cuerpo del documento. El escaneo de errores necesita un editor CodeMirror correspondiente en el documento. Sin editor no muestra errores de aplicación;
debug muestra los valores que le pases. Para cerrarlo, el ejemplo elimina el componente del árbol de React.
- Configura
errorPanel con mensajes y botones de footer opcionales. Solo los botones marcados como clickable disparan onFooterClick.
- Muestra solo datos de diagnóstico destinados a los usuarios correspondientes. El cierre se implementa en el ejemplo mediante el estado de React.
Los campos ArcWidgetSlot admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
Tipos de datos
Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como ArcWidgetSlot, ArcWidgetStyles y ArcReactWidgetProps. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.
export interface ArcWidgetDevToolsErrorPanel {
visible?: boolean;
maxErrors?: number;
debug?: Record<string, unknown>;
footerButtons?: Array<{ title?: string; clickable?: boolean; [key: string]: unknown }>;
[key: string]: unknown;
}
export interface ArcWidgetDevToolsData extends ArcWidgetBaseData { errorPanel?: ArcWidgetDevToolsErrorPanel; }
export interface ArcWidgetDevToolsProps extends ArcReactWidgetProps<ArcWidgetDevToolsData> { onFooterClick?: (index: number) => void; }</code></pre>