UI-Tool: Storybook 7.0 erweitert den Support für Vite, Next.js und SvelteKit

Inhaltsverzeichnis

Mit Storybook 7.0 hat das Entwicklungsteam die erste Hauptversion seit über zwei Jahren veröffentlicht. Das quelloffene Frontend-Tool zum Entwickeln und Testen von UI-Komponenten sowie dem Erstellen von Dokumentationen kann nun per Zero-Configuration-Ansatz mit dem Build-Tool Vite, dem React-Framework Next.js und dem auf Svelte aufsetzenden UI-Framework SvelteKit umgehen. Zudem bietet es ein überarbeitetes User Interface.

Erweiterter Support für Vite, Next.js und SvelteKit

Die neue Version führt Zero-Configuration-Support für Vite, Next.js und SvelteKit ein. So ist Vite nun für schnellere Start-up- und Build-Zeiten als Pre-Bundled-Anwendung verfügbar. Durch das Pre-Bundling mithilfe von esbuild – das in Vite ohnehin zum Einsatz kommt – entfällt die Notwendigkeit, Webpack zu installieren.

Storybook-Nutzerinnen und -Nutzer können zwischen zwei Built-in-Optionen zum Bundling von Komponentencode wählen, denn neben Vite ist auch das Verwenden von Webpack 5 möglich. Ein ausführlicher Blogeintrag, der bereits im vergangenen Herbst einen Ausblick bot, beschreibt die Neuerungen hinsichtlich Vite.

Heise-Konferenz: enterJS 2023

Am 21. und 22. Juni 2023 richten die Veranstalter dpunkt.verlag, heise Developer und iX die Enterprise-JavaScript-Konferenz enterJS in Darmstadt aus. In über 35 Vorträgen kommen JavaScript- und TypeScript-Sprachneuerungen, neue und etablierte Tools und Frameworks – darunter React, SvelteKit und Astro – sowie Barrierefreiheit und Softwarearchitektur zur Sprache.

Ganztägige Workshops stehen sowohl vor Ort als auch online bereit.

Auszug aus dem Programm:

• Living on the Edge – Web-Apps mit SvelteKit und Cloudflare Pages
• React 2023 – Beginn einer neuen Ära?
• Web-Apps mit Svelte: Ein praktischer Einstieg (Workshop, 20. Juni, Darmstadt)
• Web Component Design Patterns mit Lit (Workshop, 29. Juni, online)

Die Änderungen für Next.js umfassen ein automatisches Mocking des Routers durch Storybook sowie integrierten Support für Verwaltungswerkzeuge wie next/font und next/image. In SvelteKit erfolgt nun die automatische Konfiguration Framework-spezifischer Einstellungen, darunter der Umgang mit $app/stores.

Mehr Raum im User Interface

Um der Entwicklung von Komponenten mehr Raum zu bieten, finden Storybook-User im neuen Release eine vergrößerte Leinwandfläche vor. Die Seitenleiste weist ein verändertes Menü auf und über 200 benutzerdefinierte Icons haben eine optische Überarbeitung erfahren. Diese soll sowohl einer schärferen Darstellung als auch schnelleren Ladezeiten dienen. Ein automatischer Dark Mode steht ebenfalls neu zur Verfügung.

Zu den weiteren Neuerungen zählt eine grundlegende Überarbeitung des Add-ons Storybook Docs zum Erstellen von Dokumentationen, das mit dem Markdown-Superset MDX 2 umzugehen gelernt hat. Docs lassen sich in Storybook 7 direkt an Komponenten anhängen und automatisch generierte Dokumentationsseiten für eine Komponente lassen sich mittels autodocs-Tag aktivieren.

UI-Entwicklung mit Pages und Stories

Im Jahr 2016 entstanden, weist Storybook inzwischen über drei Millionen wöchentliche Downloads auf npm auf. Es ist darauf ausgelegt, UI-Komponenten und Seiten (Pages) – die laut dem Entwicklungsteam im Grunde Komponenten mit zusätzlichen Datenanforderungen sind – in Isolation zu erstellen. Die namensgebende Story hält den gerenderten State einer UI-Komponente fest.

Neben den genannten lässt sich Storybook mit weiteren Tools und Frameworks nutzen, darunter React, Angular, Web Components und Qwik. Mit den mobilen Betriebssystemen Android und iOS sowie dem Cross-Plattform-Framework Flutter lässt sich Storybook ebenfalls verwenden.

Alle Highlights im neuen Release stellt ein Blogeintrag vor. Für den Umstieg von Version 6.x können Entwicklerinnen und Entwickler einen Migrationsguide zu Rate ziehen.

(mai)