HTML-tillägg: Varför kopiering av grundläggande webbläsarfunktioner var perfekt meningsfullt

(10 dec 2020)

The HTML-tillägg för Storybook gör vad moderna webbläsare har gjort i flera år. Ändå är det förvånansvärt användbart och närmar sig 100 000 nedladdningar. Whitespaces ledande utvecklare Fredrik Johansson förklarar varför.

Animerad förhandsvisning av HTML-tillägget i aktion

Idén har sitt ursprung i ett kundprojekt som vi gjorde för den svenska webbplattformsleverantören Episerver. Vårt team byggde ett komponentbibliotek som deras inhemska team av .Net devs skulle implementera på episerver.com. De skulle skriva komponenterna i ett mallspråk som är specifikt för Episerver och ville ha lättare tillgång till HTML-koden – utan att brottas med React.

Att skriva ett tillägg till Storybook visade sig vara ganska enkelt, och det finns en kort guide om hur du gör det. På mindre än en dag var den första versionen av HTML-tillägget klar. På ett infall lade jag till det i Whitespaces Github om det inte var möjligt att andra också kunde hitta det användbart. Och hittills under 2020 har vi haft nästan 100 000 nedladdningar.

Vad gör HTML Addon?

Det lägger till en panel som visar HTML-koden för den komponent som du tittar på i Storybook. Det är så enkelt som det.

Tekniskt använder tillägget webbläsar-API: et (särskilt innerHTML) för att hämta den resulterande HTML-filen för komponenter skrivna i olika ramar. Detta görs automatiskt när DOM uppdateras, antingen när du växlar mellan berättelser eller ändrar utgången för den aktuella genom kontroller eller rattar. Markeringen bearbetas sedan genom Prettier för att göra den läsbar.

Skärmdump av HTML-tilläggspanelen

Varför använder vi tillägget?

Först såg jag inte fördelen med att skapa ett tillägg som bara visar HTML. I flera år har markering för enskilda komponenter varit synlig via dev-verktygen i moderna webbläsare, så varför uppfinna hjulet på nytt? För att vara ärlig, att bygga tillägget var mer en fråga om att sköta vårt kontoutförande.

Tiden har dock (för en gångs skull) visat mig fel.

Tillägget förenklar tre vanliga uppgifter på Whitespace:

  1. Handovers. Vi arbetar ofta för teknikföretag med egen backend-utveckling. Att få direkt tillgång till HTML utan att behöva ställa in projektet sparar tid. Dessutom gör det vår leverans helt oberoende av våra kunders val av mallspråk.
  2. Kvalitetsrevisioner. När vi gör tillgänglighetsprovningar får våra tillgänglighetsspecialister direkt åtkomst till HTML-markeringen.
  3. Felsökning. Omedelbar åtkomst till HTML gör bugjakt så mycket lättare. Att inte behöva öppna webbläsarens dev-verktyg tar bort lite friktion. Och om du kodar för en försörjning är det definitivt en bra sak att ha mindre friktion.

Det handlar om att fler UI-utvecklare på Whitespace (och på andra håll) känner till HTML än React. Och även för en ivrig React-utvecklare som jag är HTML ofta enklare. HTML-tillägget destillerar koden till kärnan och underlättar arbetet för en mängd människor.

Hur installerar jag den?

Lägg till HTML-tillägget i din Storybook med npm :

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

Registrera tillägget i .storybook / main.js :

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

Det finns mer information i readme over på GitHub .

Vad planen går framåt?

Jag är förvånad och glad över det positiva mottagandet av tillägget. Jag får regelbunden feedback via Github och spenderar några timmar varje månad på att fixa buggar. Vi har också sett bidrag från andra människor som har varit till stor hjälp för att hålla den uppdaterad med nya versioner av Storybook-kärnan.

Om du vill lägga till funktioner, tveka inte att göra ett drag begär – eller slå mig upp på Github eller via Whitespaces Twitter .

Bli involverad

Kolla in Addon Catalog för fler sätt att anpassa din Storybook. För att få de senaste tilläggen och Storybook-nyheterna kan du registrera dig i Storybook-e-postlistan. Kolla in Storybook på GitHub och gå med i Discord chatten.

Ursprungligen publicerad på https : //whitespace.se den 10 december 2020.