Componente aggiuntivo HTML: perché copiare le funzioni di base del browser aveva perfettamente senso

(10 dicembre 2020)

Componente aggiuntivo HTML per Storybook fa quello che i browser moderni fanno da anni. Tuttavia, è sorprendentemente utile e si avvicina a 100.000 download. Lo sviluppatore capo di Whitespace Fredrik Johansson spiega perché.

Anteprima animata del componente aggiuntivo HTML in azione

Lidea è nata da un progetto cliente che stavamo realizzando per il fornitore svedese di piattaforme web Episerver. Il nostro team stava costruendo una libreria di componenti che il loro team interno di sviluppatori .Net avrebbe implementato su episerver.com. Avrebbero scritto i componenti in un linguaggio di modellazione specifico di Episerver e volevano un accesso più facile al codice HTML, senza dover lottare con React.

Scrivere un addon per Storybook si è rivelato abbastanza semplice, e cè un breve guida su come farlo. In meno di un giorno, la prima versione delladdon HTML era pronta. Per capriccio, lho aggiunto a GitHub di Whitespace nella remota possibilità che anche altri potessero trovarlo utile. E finora nel 2020, abbiamo avuto quasi 100.000 download.

Cosa fa il componente aggiuntivo HTML?

Aggiunge un pannello che mostra il codice HTML del componente che stai guardando in Storybook. È così semplice.

Tecnicamente, laddon utilizza lAPI del browser (in particolare innerHTML) per recuperare lHTML risultante dei componenti scritti in framework diversi. Questo viene fatto automaticamente quando il DOM viene aggiornato, sia quando si passa da una storia allaltra o si cambia loutput di quello corrente tramite controlli o manopole. Il markup viene quindi elaborato tramite Prettier per renderlo leggibile.

Screenshot del pannello dei componenti aggiuntivi HTML

Perché usiamo laddon?

Allinizio, non ho visto il vantaggio di creare un addon che mostra semplicemente HTML. Per anni, il markup per i singoli componenti è stato visibile tramite gli strumenti di sviluppo nei browser moderni, quindi perché reinventare la ruota? Ad essere onesti, la creazione delladdon è stata più una questione di umorismo per il nostro account executive.

Il tempo, tuttavia, (per una volta) mi ha smentito.

Laddon semplifica tre attività comuni nello spazio vuoto:

  1. Passaggio di consegne. Lavoriamo spesso per aziende tecnologiche con sviluppatori back-end interni. Ottenere laccesso diretto allHTML senza dover impostare il progetto, fa risparmiare tempo. Inoltre, rende la nostra consegna completamente indipendente dalla scelta del linguaggio dei modelli da parte dei nostri clienti.
  2. Controlli di qualità. Quando eseguiamo test di accessibilità, i nostri specialisti dellaccessibilità ottengono laccesso diretto al markup HTML.
  3. Risoluzione dei problemi. Laccesso istantaneo allHTML rende la ricerca di bug molto più semplice. Non dover aprire gli strumenti di sviluppo del browser rimuove un po di attrito. E se codifichi per vivere, avere meno attriti è sicuramente una buona cosa.

Si riduce al fatto che più sviluppatori UI di Whitespace (e altrove) conoscono lHTML di React. E anche per un appassionato sviluppatore di React come me, lHTML è spesso più semplice. Laddon HTML distilla il codice fino allessenza e rende il lavoro più facile per una varietà di persone.

Come lo installo?

Aggiungi laddon HTML al tuo Storybook con npm :

npm i --save-dev @whitespace/storybook-addon-html

Registra il componente aggiuntivo in .storybook / main.js :

module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};

Ci sono ulteriori informazioni nel readme su GitHub .

Qual è il piano in corso avanti?

Sono sorpreso e soddisfatto dellaccoglienza positiva delladdon. Ricevo feedback regolari tramite Github e dedico alcune ore al mese a correggere i bug. Abbiamo anche visto contributi di altre persone che sono stati di grande aiuto per mantenerlo aggiornato con le nuove versioni di Storybook core.

Se vuoi aggiungere funzionalità, non esitare a fare un richiesta o contattami su GitHub o tramite Twitter di Whitespace .

Partecipa

Dai unocchiata al Catalogo componenti aggiuntivi per ulteriori modi per personalizzare il tuo libro delle fiabe. Per ottenere gli ultimi componenti aggiuntivi e le notizie di Storybook iscriviti alla mailing list di Storybook. Dai unocchiata a Storybook su GitHub e unisciti alla chat di Discord .

Originariamente pubblicato su https : //whitespace.se il 10 dicembre 2020.