Studio dei widget

Lo Studio dei widget è dove scrivi, provi in anteprima e pubblichi un widget. Per aprirlo, apri uno dei tuoi widget dalla pagina Il mio profilo e fai clic su Modifica. Richiede un browser per computer.

Disposizione

Area	A cosa serve
Scheda IA	Descrivi ciò che vuoi e lascia che l’IA scriva o modifichi il codice. Sperimentale. Con il piano Gratuito ha una quota mensile di IA.
Scheda Codice	L’editor di codice, con il completamento automatico per React, la libreria Blotch, i tuoi input e le tue immagini, e le sottolineature rosse per gli errori di tipo.
Risultato	Sotto l’editor. Vedi Risultato.
Anteprima	A destra. Mostra il tuo widget, ridisegnato un paio di secondi dopo che smetti di digitare. Scegli una Dimensione anteprima, o trascina i bordi dell’anteprima per provare qualsiasi dimensione. Il menu Bordo ti fa provare i bordi che le persone possono mettere intorno al widget.

La barra degli strumenti mostra l’ultima versione che hai pubblicato, Modifiche non pubblicate se da allora hai salvato, e Pubblica. Un indicatore mostra quanta parte del limite di lunghezza del codice di un widget hai usato.

Menu

Menu	Voce	A cosa serve
File	Salva	Salva il tuo codice e gli input pubblici. Ctrl+S (⌘S su Mac).
	Pubblica…	Rilascia il tuo ultimo salvataggio. Vedi Pubblicare e rilasciare versioni.
	Cronologia delle versioni…	Ogni salvataggio, con ciò che è cambiato. Ripristina ne carica uno nell’editor.
	Configurazione widget	Nome, descrizione, icona, categoria e visibilità. Vedi Impostazioni del widget.
	Input	Input pubblici, input privati e integrazioni. Vedi Tipi di input.
	Risorse	Le immagini che hai caricato. Vedi Aggiungere le proprie immagini.
	Elimina	Elimina il widget. Compare solo finché nessuno lo ha installato.
Modifica	Inserisci icona…	Trova un’icona e aggiunge il codice per disegnarla. Ctrl+Shift+. (⌘⇧. su Mac).
	Cambia tema dell’anteprima	Passa l’anteprima dal tema chiaro a quello scuro, e viceversa.
	Formatta	Riordina la disposizione del tuo codice.
	Cancella modifiche	Scarta tutto ciò che non hai salvato.

Risultato

Il pannello sotto l’editor ha tre schede:

• Risultato mostra ciò che il tuo widget registra con console.log, console.warn e console.error, e l’eventuale errore su cui si blocca. Fai clic su Correggi con l’IA accanto a un errore per ricevere una correzione suggerita. Gli altri metodi di console, come console.table, non sono disponibili.
• Definizioni di tipo mostra le definizioni di tipo che l’editor sta caricando per i pacchetti che importi.
• Rete mostra ogni richiesta del tuo widget e la sua risposta. Fai clic su Crea definizioni di tipo accanto a una risposta per copiare un tipo TypeScript che la descrive.

Cancella log svuota la scheda corrente. Il lucchetto attiva e disattiva lo scorrimento automatico.

Il tuo codice

• Il tuo widget è il componente chiamato Widget, oppure l’esportazione predefinita del file:

  export const Widget = () => {
    // ...
  };

• Scrivi in TypeScript o JavaScript. Gli errori di tipo vengono sottolineati, ma non impediscono al tuo widget di essere disegnato o pubblicato.

• Definisci lo stile con Tailwind CSS. Gli unici colori sono foreground e background. Vedi Come funzionano i widget.

• Importa dalla libreria Blotch con ~lib/, e da npm con una versione fissata. Vedi Usare pacchetti npm.