Saltar al contenido

Crear paneles

Pruebas y depuración

Tres formas de correr un panel mientras lo construyes: una carpeta cargada en Deska, un servidor de desarrollo en localhost y la herramienta de vista previa del repositorio de ejemplos. Además, las revisiones, las herramientas del navegador y las fallas más comunes.

Cargar una carpeta en Deska

Abre la Biblioteca de paneles (Cmd/CtrlShiftE), ve a Comunidad, luego a Crear un panel, y elige Cargar una carpeta. Selecciona la carpeta donde está panel.json. Este es el entorno donde va a correr tu panel, así que todo panel debería pasar aquí antes de publicarse.

  • Deska revisa la carpeta con las mismas reglas que usa deska.dev, y lista cada problema en la página de la carpeta, bajo Qué corregir.
  • Sirve la carpeta con la misma política que un paquete instalado y recarga el panel cada vez que cambia un archivo, un instante después de guardar.
  • El panel tiene exactamente los permisos que pide su panel.json, como los tendrá cuando la gente los permita. La página de la carpeta muestra qué se les va a preguntar.
  • Tiene su propio almacenamiento y sus propios archivos, separados de cualquier versión instalada del mismo panel, e init.panel.dev es true.
  • Carga la carpeta donde está panel.json. Una carpeta de 5,000 archivos o más, como la raíz de un proyecto con su node_modules, se rechaza y nunca se vigila.
  • Una carpeta cargada nunca se fija, no se sincroniza con tu cuenta y no se publica tal cual.

Un servidor de desarrollo en localhost

¿Usas Vite u otro servidor de desarrollo con recarga en caliente? En Crear un panel, bajo Una página en localhost, escribe su dirección, como http://localhost:5173. Solo se aceptan localhost y 127.0.0.1, por http o https.

AtenciónUna página en localhost corre con reglas más flexibles que las que tendrá tu panel. Deska no la sirve, así que su política y su protección no aplican: puede conectarse a cualquier host y cargar scripts y estilos remotos. Además tiene todos los permisos, no tiene panel.json y no recibe fila en Extras. Algo que funciona ahí puede fallar una vez empaquetado. Arma la carpeta y cárgala con Cargar una carpeta antes de publicar.

El marco sigue aislado: sin localStorage, con las mismas reglas de foco, y los enlaces por deska.openUrl. Sirve /__deska/sdk.js desde tu propio servidor de desarrollo: copia el tools/preview/sdk.js de la herramienta de vista previa a tu carpeta pública; es una copia del SDK que sirve Deska.

La herramienta de vista previa

El repositorio de ejemplos trae un host de vista previa que corre un panel en tu propio navegador, junto a tu editor. Necesita Node 20 o posterior.

sh
git clone https://github.com/0xPasho/deska-panels-examples.git
cd deska-panels-examples
npm install
npm run preview -- path/to/my-panel

Abre la dirección que imprime (http://127.0.0.1:5170/ por defecto). La vista previa:

  • sirve cada panel en un origen propio con la misma Content-Security-Policy y el mismo sandbox que Deska, y el SDK en /__deska/sdk.js;
  • hace la parte de Deska en el puente: tema, visibilidad, almacenamiento, archivos, avisos, enlaces, portapapeles y la fila de Extras, con los límites de Deska, así que una llamada que Deska rechazaría también se rechaza aquí;
  • te deja cambiar el tema (oscuro o claro), el lugar (escritorio o Extras), la visibilidad y la inactividad, recargar el panel y borrar su almacenamiento;
  • registra cada llamada y su respuesta en un registro del puente junto al panel.
NotaLa vista previa es un sustituto para construir rápido. No ejecuta la protección de página de Deska ni sus reglas de foco, y sus valores de tema son propios. Carga la carpeta en Deska antes de publicar.

Revisiones desde la terminal

sh
npm run preview -- panels/team-clocks   # un panel, varios, o ninguno para todos
npm run preview -- panels/net-radio --port 5300
npm run validate                        # las revisiones de paquete de Deska en cada carpeta de panels/
npm run check                           # las revisiones, y luego una carga sin ventana en oscuro y claro
npm run check -- team-clocks            # un solo panel de panels/
  • validate ejecuta las revisiones de paquete de Deska en cada carpeta de panels/, sin navegador, imprime los problemas de cada carpeta y falla si alguna se rechaza.
  • check ejecuta las revisiones y luego carga cada panel sin ventana en la vista previa, en oscuro y en claro (y en Extras si tiene fila). Falla con un error de consola, una violación de la política, una página que nunca llama a deska.ready() o una llamada rechazada, y guarda capturas en docs/screenshots/preview/.
  • Los dos buscan en panels/. Para revisar tu propio panel con ellos, pon su carpeta ahí en tu copia del repositorio; preview acepta cualquier ruta.

La consola y las herramientas del navegador

En la vista previa, abre las herramientas de desarrollo de tu navegador. Ahí el panel es un marco normal: elígelo en el menú de contexto de la consola para ejecutar código en él, mira sus solicitudes en la pestaña de red y lee las violaciones de la política, que nombran la directiva que rechazó algo (connect-src para un host que no declaraste, script-src para un script remoto o eval).

  • Registra los rechazos por código: console.warn(err.code) en cada catch convierte una falla silenciosa en una línea que puedes leer.
  • Ten SDK Playground cargado junto a tu panel para probar una llamada a mano y ver exactamente qué responde Deska.
  • Prueba los estados que va a encontrar la gente: sin conexión, un host lento, el primer uso vacío, el almacenamiento lleno, el panel oculto y vuelto a mostrar, una recarga a mitad de una tarea, los dos temas, y la página de Extras si tienes una.

Fallas comunes

Lo que vesPor quéSolución
deska is not definedTu script corrió antes que el SDK.Carga primero /__deska/sdk.js como script clásico, y tu código como módulo o después.
ready() nunca se resuelveLa página está abierta fuera de Deska y de la vista previa, o la etiqueta del SDK apunta a otro lado.Córrela en Deska o en la vista previa; la ruta es exactamente /__deska/sdk.js.
Failed to fetchEl host no está en network, la dirección es http, o la API no acepta cualquier origen.Declara el host exacto, usa https y elige una API que responda Access-Control-Allow-Origin: *.
Una imagen, fuente o video no apareceSu host no está declarado, o es una hoja de estilo remota.Declara el host; incluye las fuentes como woff2 en el paquete.
SecurityError en localStorageEl sandbox tiene un origen opaco.deska.storage
Una librería falla con un error de política sobre evalSe rechaza el código armado desde texto en tiempo de ejecución.Usa la versión precompilada de la librería.
El panel dice que se desconectóUn enlace, un formulario o un cambio de location hizo navegar al marco.deska.openUrl para los enlaces, preventDefault() al enviar, y luego Recargar.
not_focused de openUrl o clipboard.writeSe llamó desde un temporizador o después de un await lento.Llámalo en el manejador del clic, primero.
Un enlace de descarga (<a download>) no hace nadaEl sandbox rechaza las descargas.Guarda el archivo con deska.files.save desde el clic.
El primer clic no hace nadaEn el lienzo, el primer clic le da el foco al panel.Es lo esperado. El siguiente clic llega a la página.
invalid_args de setTitlenull, un texto vacío o más de 60 caracteres.Acórtalo, o pon init.panel.name para quitarlo.
permission_denied de extras.setpanel.json no tiene contributes.extras.Decláralo y vuelve a cargar la carpeta.
El estado se pierde al mover el panelMover, pasar a un dock y actualizar recargan la página.Guarda el estado en deska.storage y reconstruye desde ahí.
El sonido no arranca después de una recargaEl audio necesita un clic en el panel primero.Muestra un botón de reproducir cuando play() se rechaza.
Funciona en localhost y falla como carpetaLas páginas en localhost se saltan la política.Corrige lo que nombran los errores de política de la carpeta.
La carpeta se rechaza por grandeTiene 5,000 archivos o más, como node_modules.Carga la carpeta con panel.json, solo con lo que el panel incluye.

Siguiente paso

Cuando la carpeta pase en Deska y se vea bien en los dos temas, lee Publicar.