{"id":551,"date":"2023-10-20T13:45:27","date_gmt":"2023-10-20T13:45:27","guid":{"rendered":"https:\/\/byte-bucket.com\/2023\/10\/20\/storybook-7-5-vite-5-integration-lit-3-0-support-und-mehr\/"},"modified":"2023-10-20T13:45:27","modified_gmt":"2023-10-20T13:45:27","slug":"storybook-7-5-vite-5-integration-lit-3-0-support-und-mehr","status":"publish","type":"post","link":"https:\/\/byte-bucket.com\/?p=551","title":{"rendered":"Storybook 7.5: Vite 5 Integration, Lit 3.0 Support und mehr"},"content":{"rendered":"<p>K\u00fcrzlich haben Open-Source-Entwickler die Version 7.5 des Frontend-Tools Storybook ver\u00f6ffentlicht. Dieses beliebte Tool hat auf GitHub mehr als 80.000 Sterne gesammelt und wird verwendet, um User-Interface-Komponenten und Seiten in einer isolierten Umgebung zu erstellen. Das klingt ziemlich cool, oder?<\/p>\n<p>Die neueste Version von Storybook bereitet sich darauf vor, das Build-Tool Vite 5 zu integrieren. Vite 5 ist derzeit noch als Beta-Version verf\u00fcgbar, aber es hat bereits einige Aufmerksamkeit auf sich gezogen. In der vorherigen Version von Storybook, 7.0, wurde bereits der konfigurationsfreie Support f\u00fcr Vite eingef\u00fchrt. Vite ist bekannt f\u00fcr seine hohe Geschwindigkeit, daher ist es keine \u00dcberraschung, dass es hier Einzug h\u00e4lt.<\/p>\n<p>Aber das ist noch nicht alles! Storybook 7.5 unterst\u00fctzt auch die brandneue Version 3.0 der JavaScript-Bibliothek Lit. Lit wird verwendet, um Web Components zu entwickeln und hat vor kurzem seine dritte Hauptversion erreicht. Diese Version von Storybook ist auch in der Lage, die Standard Decorators der TC39-Spezifikation zu verarbeiten. Das klingt nach einer ziemlich fancy Funktion, oder?<\/p>\n<p>Aber es gibt noch mehr! Storybook 7.5 verbessert auch die Performance und aktualisiert react-docgen auf Version 6. Das ist Teil der Vorbereitung f\u00fcr Storybook 8, wo react-docgen als Standard f\u00fcr das automatische Generieren von Komponentensteuerelementen dienen soll. Das Team von Storybook hat berichtet, dass diese Verbesserungen die Startzeiten f\u00fcr gr\u00f6\u00dfere React-Storybooks erheblich verk\u00fcrzen. Sie haben sogar ein Beispiel gegeben, wo die Startup-Zeit von 8,9 auf 4 Sekunden reduziert wurde. Das ist doch mal eine deutliche Verbesserung!<\/p>\n<p>Aber Moment mal, es gibt noch eine weitere tolle Neuerung in Storybook 7.5! Es wurde ein neues Feature f\u00fcr die Integration mit Angular hinzugef\u00fcgt, namens &#8222;argsToTemplate&#8220;. Dieses Feature soll das Erstellen von Templates f\u00fcr Angular-Komponenten vereinfachen und die Kompatibilit\u00e4t mit dem Standardverhalten von Angular verbessern. Das klingt nach einer praktischen Funktion f\u00fcr alle Angular-Entwickler da drau\u00dfen.<\/p>\n<p>Nat\u00fcrlich gibt es auch noch einige weitere Verbesserungen in dieser Version von Storybook, wie erweiterte Funktionen f\u00fcr die Verwendung von Next.js und die Markierung einiger Funktionen als veraltet. Wenn du bereits Storybook verwendest und auf dem neuesten Stand sein m\u00f6chtest, kannst du das npm-Package-Runner npx verwenden, um das Upgrade durchzuf\u00fchren. Und wenn du eine \u00e4ltere Version von Storybook verwendest, steht ein Migrationsguide zur Verf\u00fcgung, um dir den Umstieg zu erleichtern.<\/p>\n<p>Das Team von Storybook hat alle H\u00f6hepunkte dieser neuen Version in einem Blogeintrag zusammengefasst, der weitere Informationen zu den einzelnen Verbesserungen und Funktionen bietet. Wenn du also tiefer in die Materie eintauchen m\u00f6chtest, solltest du dort vorbeischauen. Viel Spa\u00df beim Ausprobieren der neuen Funktionen!<\/p>\n<p>Schlagw\u00f6rter: Storybook + Version 75 + PerformanceVerbesserungen<\/p>\n","protected":false},"excerpt":{"rendered":"<p>K\u00fcrzlich haben Open-Source-Entwickler die Version 7.5 des Frontend-Tools Storybook ver\u00f6ffentlicht. Dieses beliebte Tool hat auf GitHub mehr als 80.000 Sterne gesammelt und wird verwendet, um User-Interface-Komponenten und Seiten in einer isolierten Umgebung zu erstellen. Das klingt ziemlich cool, oder? Die neueste Version von Storybook bereitet sich darauf vor, das Build-Tool&#46;&#46;&#46;<\/p>\n","protected":false},"author":4,"featured_media":550,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/byte-bucket.com\/index.php?rest_route=\/wp\/v2\/posts\/551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/byte-bucket.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/byte-bucket.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/byte-bucket.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/byte-bucket.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=551"}],"version-history":[{"count":0,"href":"https:\/\/byte-bucket.com\/index.php?rest_route=\/wp\/v2\/posts\/551\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/byte-bucket.com\/index.php?rest_route=\/wp\/v2\/media\/550"}],"wp:attachment":[{"href":"https:\/\/byte-bucket.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/byte-bucket.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/byte-bucket.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}