Desenvolvimento local de widgets

Este guia cobre o fluxo para autores usando um projeto Vite (Vue, React ou vanilla).

vite-plugin-doohnut-widget

O pacote de workspace vite-plugin-doohnut-widget melhora o dia a dia:

1. Overlay de desenvolvimento — com o servidor em /, você obtém um host simulado (INIT, FRAME_ENTER, CONFIG_UPDATE, TIME_TICK, STATE_*) e um iframe que carrega seu app em /__widget-app__/ para o HMR do Vite funcionar dentro do iframe.
2. Validação — em pnpm dev e vite build, verifica se o package.json tem um bloco doohnut válido com width e height em faixas razoáveis.
3. Empacotamento opcional — com DOOHNUT_PACK=1 ou pack: true, após o build gera um .tgz com o conteúdo de dist/ mais package.json na raiz do arquivo (pronto para upload como asset de widget).

Consulte o README do plugin (inglês): vite-plugin-doohnut-widget no GitHub.

Convenções do manifesto package.json

• aspectRatioPolicy: Use optional quando o widget deve tolerar seções com proporção diferente de doohnut.width × doohnut.height. Use mandatory ou omita (padrão) para exigir correspondência estrita. No dev, use o painel Viewport do overlay ou doohnut.devOverlay.viewportPresets para testar geometrias diferentes.

Exemplos

• dx-walkthrough-vue — exemplo mínimo; aspectRatioPolicy: optional e layout responsivo no canvas de design; veja o tutorial DX.
• footer-clock-weather-vue — faixa de referência 1920×200, aspectRatioPolicy: optional, empilhamento em viewports estreitos; DOOHNUT_PACK=1 para empacotar.

Protocolo

Referência completa das mensagens: Protocolo de runtime (resumo) ou versão em inglês para o documento integral.