UI-Tool: Storybook 7.5 führt ein neues Feature für Angular ein

Das Team hinter dem quelloffenen Frontend-Tool Storybook hat Version 7.5 veröffentlicht. Storybook weist auf GitHub derzeit über 80.000 Sterne auf und dient dazu, User-Interface-Komponenten und Seiten in Isolation zu erstellen. Im neuen Release bereitet es sich auf das Build-Tool Vite 5 vor, das derzeit noch als Beta vorliegt, und kann mit der kürzlich erschienenen Version 3.0 der JavaScript-Library Lit umgehen. Für die Angular-Anbindung gibt es ein neues Feature.

Vite, Lit und ein Performance-Boost

Eines der wichtigsten Features in Storybook 7.0 war der konfigurationsfreie Support für Vite, ein durch hohe Geschwindigkeit hervorstechendes Build-Tool. Derzeit liegt Vite in der stabilen Version 4.5 vor, doch Version 5 steht als Beta schon in den Startlöchern. Storybook 7.5 enthält Vite 5 als Peer Dependency und importiert dynamisch alle Vite-Funktionen, um den Einsatz von ECMAScript-Modulen zu erzwingen, da Vite 5 CommonJS-Methoden als deprecated (veraltet) markiert.

Zudem bringt Storybook 7.5 Support für Lit 3.0. Die JavaScript-Library Lit dient der Entwicklung von Web Components und hat kürzlich die dritte Hauptversion erreicht. Darin kann sie erstmals mit der TC39-Spezifikation Standard Decorators umgehen. Diese haben nun die dritte TC39-Stufe erreicht und halten derzeit Einzug in Browsern und Compilern.

Neben diesen Updates schraubt Storybook 7.5 auch an der Performance und aktualisiert react-docgen auf Version 6. Das geschieht im Hinblick auf Storybook 8, wenn react-docgen zum Standard für das automatische Generieren von Steuerelementen werden soll. Die aktuelle Neuerung soll den Umgang mit TypeScript-Typen deutlich verbessern und die Startup-Zeiten für größere React-Storybooks stark verkürzen. Als Beispiel führt das Storybook-Team die Startup-Zeit der Anwendung Mealdrop an, die sich von 8,9 auf 4 Sekunden reduziert habe.

Neues Feature für Angular: argsToTemplate

Storybook 7.5 führt das argsToTemplate-Feature für Angular ein. Es zielt darauf ab, das Erstellen von Angular-Komponenten-Templates zu vereinfachen. Unter anderem soll es dafür sorgen, dass Storybook-Steuerelemente besser mit Angulars Standardverhalten kompatibel sind. In einer Story lässt sich das neue Feature wie folgt implementieren:

import { argsToTemplate } from '@storybook/angular';

export const Default: Story = {
  render: (args) => ({
    props: args,
    template: `<app-template ${argsToTemplate(args)}></app-template>`,
  }),
};

Durch dieses Codebeispiel sollen die Argumente korrekt zu Property und Event Bindings gemappt werden.

Heise-Konferenz: Advanced Angular Day

Am 30. November 2023 richten iX und dpunkt.verlag den Advanced Angular Day aus. Die Online-Konferenz wirft einen tieferen Blick auf das Webframework – von Performance über Accessibility und Testing bis hin zu den neuen Angular Signals. Das Programm bietet sechs Vorträge sowie drei Ganztages-Workshops am 20. November, 1. und 4. Dezember.

Zu den weiteren Upgrades zählen zusätzliche Möglichkeiten im Umgang mit Next.js und das Markieren von storiesOf und storyStoreV6 als veraltet.

Storybook lässt sich mit dem npm-Package-Runner npx aktualisieren (npx storybook@latest upgrade). Wer eine frühere Version als Storybook 7 verwendet, kann den Migrationsguide zu Rate ziehen.

Die Highlights des neuen Release hebt das Storybook-Team in einem Blogeintrag hervor.

(mai)