perf: improve Storybook performance (#1853)

Update Storybook to version 8.3.0-alpha.5 which includes a bug fix which
reduced the bundle size of our build Storybook from 26MB to 6MB and
reduced build time from 37s to 10s.

This change also significantly improves the loading performance of the
onyx Storybook.

If you are interested, the bug was caused by the vue-component-meta
package which included ALL schema definitions for props, events, slots
and exposed so if e.g. HTMLElement was used, it included all nested
props, JSDocs etc. although they are not needed/used by Storybook, see
[Storybook PR](storybookjs/storybook#28589)

.changeset/little-moles-accept.md

@@ -0,0 +1,9 @@
+---
+"@sit-onyx/storybook-utils": major
+---
+
+bump minimum Storybook version to `8.3.0-alpha.5`
+
+Storybook version `8.3.0-alpha.5` now official supports the improved source code generation, see [changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.prerelease.md#830-alpha3) so we removed our temporarily forked source code generator from `@sit-onyx/storybook-utils`.
+
+Therefore, the minimum Storybook version was bumped to `8.3.0-alpha.5` which also includes a bug fix that significantly reduces the bundle size when building the Storybook.

package.json

@@ -27,10 +27,10 @@
     "@rushstack/eslint-patch": "^1.10.4",
     "@sit-onyx/eslint-plugin": "workspace:^",
     "@sit-onyx/storybook-utils": "workspace:^",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/vue3": "^8.2.9",
-    "@storybook/vue3-vite": "^8.2.9",
+    "@storybook/addon-essentials": "8.3.0-beta.5",
+    "@storybook/blocks": "8.3.0-beta.5",
+    "@storybook/vue3": "8.3.0-beta.5",
+    "@storybook/vue3-vite": "8.3.0-beta.5",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.16.5",
@@ -51,7 +51,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.78.0",
     "simple-git-hooks": "^2.11.1",
-    "storybook": "^8.2.9",
+    "storybook": "8.3.0-beta.5",
     "turbo": "^2.1.1",
     "typescript": "~5.5.4",
     "vite": "^5.4.3",

packages/storybook-utils/package.json

@@ -29,9 +29,9 @@
   },
   "peerDependencies": {
     "@sit-onyx/icons": "workspace:^",
-    "@storybook/vue3": ">= 8.2.0",
+    "@storybook/vue3": ">= 8.3.0-alpha.5",
     "sit-onyx": "workspace:^",
-    "storybook": ">= 8.2.0",
+    "storybook": ">= 8.3.0-alpha.5",
     "storybook-dark-mode": ">= 4"
   },
   "dependencies": {

packages/storybook-utils/src/preview.spec.ts

@@ -1,25 +1,19 @@
 import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
 import calendar from "@sit-onyx/icons/calendar.svg?raw";
 import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
-import { describe, expect, test, vi } from "vitest";
+import { describe, expect, test } from "vitest";
 import { replaceAll, sourceCodeTransformer } from "./preview";
-import * as sourceCodeGenerator from "./source-code-generator";
 
 describe("preview.ts", () => {
   test("should transform source code and add icon/onyx imports", () => {
-    // ARRANGE
-    const generatorSpy = vi.spyOn(sourceCodeGenerator, "generateSourceCode")
-      .mockReturnValue(`<template>
+    // ACT
+    const sourceCode = sourceCodeTransformer(`<template>
 <OnyxTest icon='${placeholder}' test='${bellRing}' :obj="{foo:'${replaceAll(calendar, '"', "\\'")}'}" />
 <OnyxOtherComponent />
 <OnyxComp>Test</OnyxComp>
 </template>`);
 
-    // ACT
-    const sourceCode = sourceCodeTransformer("", { title: "OnyxTest", args: {} });
-
     // ASSERT
-    expect(generatorSpy).toHaveBeenCalledOnce();
     expect(sourceCode).toBe(`<script lang="ts" setup>
 import { OnyxComp, OnyxOtherComponent, OnyxTest } from "sit-onyx";
 import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";

packages/storybook-utils/src/preview.ts

@@ -1,13 +1,12 @@
 import { getIconImportName } from "@sit-onyx/icons";
-import { type Preview, type StoryContext } from "@storybook/vue3";
+import type { Preview } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
 import { DOCS_RENDERED } from "storybook/internal/core-events";
 import { addons } from "storybook/internal/preview-api";
 import type { ThemeVars } from "storybook/internal/theming";
 import { enhanceEventArgTypes } from "./actions";
 import { requiredGlobalType, withRequired } from "./required";
-import { generateSourceCode } from "./source-code-generator";
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";
 
 const themes = {
@@ -126,16 +125,15 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
  *
  * @see https://storybook.js.org/docs/react/api/doc-block-source
  */
-export const sourceCodeTransformer = (
-  sourceCode: string,
-  ctx: Pick<StoryContext, "title" | "component" | "args">,
-): string => {
+export const sourceCodeTransformer = (originalSourceCode: string): string => {
   const RAW_ICONS = import.meta.glob("../node_modules/@sit-onyx/icons/src/assets/*.svg", {
     query: "?raw",
     import: "default",
     eager: true,
   });
 
+  let code = originalSourceCode;
+
   /**
    * Mapping between icon SVG content (key) and icon name (value).
    * Needed to display a labelled dropdown list of all available icons.
@@ -148,8 +146,6 @@ export const sourceCodeTransformer = (
     {},
   );
 
-  let code = generateSourceCode(ctx);
-
   const additionalImports: string[] = [];
 
   // add icon imports to the source code for all used onyx icons