mountDevtoolsPanel

mountDevtoolsPanel añade a la página el panel de Meeko DevTools: un árbol con las instancias de componentes vivas, el detalle de sus props y señales (con un editor para cambiarlas), una línea de tiempo filtrable de lecturas y escrituras con su archivo y su línea, el resaltado del elemento de cada instancia en la página y un punto de parada por instancia. Vive en un Shadow DOM, así que no hereda ni altera los estilos de la aplicación.

Desde 1.8, en una aplicación de meeko dev basta con devtools: true en meeko.config.ts: el framework lo monta sin este código. mountDevtoolsPanel sigue sirviendo para un host de Vite propio o un contenedor propio.

Lee el hook window.__MEEKO_DEVTOOLS__, que instala el código de desarrollo de los componentes al hidratarse con Vite en desarrollo. Si todavía no existe, el panel lo dice y se conecta solo en cuanto aparece.

Uso#

// app/plugins/devtools.client.ts
import { definePlugin } from "@meekojs/meeko/framework";

export default definePlugin(async () => {
  if (!import.meta.env.DEV) return;
  const { mountDevtoolsPanel } = await import("@meekojs/meeko/devtools-ui");
  mountDevtoolsPanel();
});

El plugin .client.ts se ejecuta sólo en el navegador, antes de hidratar; el panel se conecta al hook cuando el primer componente se hidrata. Con import() dinámico dentro de import.meta.env.DEV, el panel no entra en el bundle de producción.

Tipo#

function mountDevtoolsPanel(options?: DevtoolsPanelOptions): DevtoolsPanel

interface DevtoolsPanelOptions {
	container?: Element
	position?: DevtoolsPanelPosition
}

interface DevtoolsPanel {
	refresh(): void
	unmount(): void
}

type DevtoolsPanelPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'

Opciones#

Desde 1.8, el panel se minimiza a una pastilla con el número de eventos nuevos (su botón o Alt+Mayús+M) y se lleva a otra esquina con su asa (arrastrando o con las flechas). Recuerda el estado plegado y la esquina en localStorage (meeko:devtools-panel); una position distinta en la llamada manda sobre la esquina recordada. Véase Aspecto, minimizar y mover.

Valor devuelto#

Un DevtoolsPanel:

Lanza Error: Meeko DevTools requires a browser document si el contenedor no pertenece a un documento con ventana, y TypeError: Meeko DevTools: position must be one of bottom-right, bottom-left, top-right, top-left con otra position.

Ejemplos#

En un host de Vite propio#

// src/entry-client.ts
import { hydrate } from "./App.meeko";

hydrate(document.getElementById("app")!, props, state);

if (import.meta.env.DEV) {
  const { mountDevtoolsPanel } = await import("@meekojs/meeko/devtools-ui");
  const panel = mountDevtoolsPanel();
  import.meta.hot?.dispose(() => panel.unmount());
}

import.meta.hot.dispose quita el panel antes de que HMR vuelva a ejecutar la entrada, para no acumular paneles.

En un contenedor propio#

const panel = mountDevtoolsPanel({ container: document.querySelector("#devtools") ?? document.body });

Mostrarlo con un atajo de teclado#

let panel: { unmount(): void } | undefined;
window.addEventListener("keydown", async (event) => {
  if (!(event.ctrlKey && event.shiftKey && event.key === "M")) return;
  if (panel) { panel.unmount(); panel = undefined; return; }
  const { mountDevtoolsPanel } = await import("@meekojs/meeko/devtools-ui");
  panel = mountDevtoolsPanel();
});

Errores comunes#

Montarlo en producción#

import { mountDevtoolsPanel } from "@meekojs/meeko/devtools-ui";
mountDevtoolsPanel();

En producción el compilador no instala el hook: el panel sólo muestra Hook no disponible. Abre una página Meeko con Vite en desarrollo y pulsa Actualizar., y el import estático mete su código en el bundle de producción.

if (import.meta.env.DEV) {
  const { mountDevtoolsPanel } = await import("@meekojs/meeko/devtools-ui");
  mountDevtoolsPanel();
}

Llamarlo en el servidor#

// app/plugins/devtools.ts (sin .client), que también se ejecuta en el SSR
export default definePlugin(async () => {
  const { mountDevtoolsPanel } = await import("@meekojs/meeko/devtools-ui");
  mountDevtoolsPanel();
});

En el servidor no hay document: la llamada lanza ReferenceError: document is not defined y la petición falla.

// app/plugins/devtools.client.ts
export default definePlugin(async () => {
  if (!import.meta.env.DEV) return;
  const { mountDevtoolsPanel } = await import("@meekojs/meeko/devtools-ui");
  mountDevtoolsPanel();
});

Montarlo dos veces con HMR#

// src/entry-client.ts
if (import.meta.env.DEV) mountDevtoolsPanel();

Cada vez que HMR vuelve a ejecutar la entrada se añade otro panel encima del anterior.

if (import.meta.env.DEV) {
  const panel = mountDevtoolsPanel();
  import.meta.hot?.dispose(() => panel.unmount());
}

Notas#

• Sólo en desarrollo. El hook existe sólo con los componentes compilados por Vite en modo desarrollo; meeko build no lo incluye.
• Versión. El panel comprueba la versión del protocolo del hook: con otro @meekojs/meeko en la página, muestra Versión de protocolo DevTools no compatible y pide usar el mismo paquete para el panel y la aplicación.
• Seguridad. El panel puede leer y cambiar las señales de la página: no lo montes donde lo vea un usuario final.
• Estilos. El panel está aislado en su Shadow DOM, con all: initial en su host y, desde 1.8, los colores de Meeko en claro u oscuro (el del sistema o el data-theme de <html>), y se dibuja por encima de todo (z-index máximo). Cada llamada crea un panel nuevo: no hay comprobación de uno ya montado (la opción devtools sí respeta un panel que la aplicación ya montó).
• Chrome. La extensión Meeko DevTools ofrece el mismo panel dentro de Chrome DevTools, sin tocar el código de la aplicación.

Relacionado#

• devtoolsMonta el panel de Meeko DevTools dentro de la página en meeko dev, sin código de la aplicación, en la esquina elegida.
• meeko (Vite)Plugin de Vite de Meeko, que compila los imports .meeko en cliente y SSR, añade HMR y CSS en desarrollo, aplica los autoimports y genera los módulos virtuales del framework.
• definePluginDeclara un plugin de aplicación de app/plugins, que se ejecuta al arrancar en el navegador, en el servidor o en ambos, y publica valores para todos los componentes.
• Panel dentro de la páginaMeeko DevTools
• Editar señalesMeeko DevTools
• Alcance y límitesMeeko DevTools