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