perf: improve Storybook performance

.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