Research Storybook alternatives esp. KitBook

[myieye]

Storybook has been disappointing:

• It's currently simply too slow. This is presumably a combination of:
  • Lots of Shadcn components in our code base
  • An expensive set of Storybook decorators (maybe it's worth seeing what happens if these are gone)
  • Svelte in general?
• It seems to break (due to HMR or similar) more often than a real svelte app

Original PR (no issue).
We documented in our team meeting doc:

careful it might be more effort than it’s worth for replacing a basic sandbox approach and component tests

Yeah...I probably wasn't careful enough.

Is there a tantalizing alternative? We are trying to cover 2 things:

1) A sandbox for (primarily?) manually testing components and their states

It would be pretty easy and cheap to just extend our rudimentary sandbox page with more routes for individual components.
Than would save us the headache off introducing and learning a new dependency.

But, are there any killer features something like KitBook would get us?

The value of Storybook's e.g. viewport emulation tools are seemingly negligeable for us.

2) A component testing strategy

Does KitBook cover this?
Or do we just use raw vitest with its Playwright support?

[myieye]

KitBook

Svelte 5 support seems to be somewhat stalled: issue, PR.

Apparently, it's waiting on sveltejs/svelte#11389.
Part of which was merged about a month ago: sveltejs/svelte#16255
So, things are moving, but not especially quickly.

Component testing via Playwright

https://kitbook.vercel.app/docs/7a-additional-component-tests

Bookit

Is unmaintained: https://github.com/leveluptuts/bookit

Histoire

Seems largely unmaintained: https://github.com/histoire-dev/histoire

OcularBook

Is unmaintained: https://github.com/imadx/ocularbook

SvelteScape

Is unmaintained: https://github.com/AlessioGr/sveltescape

GardenJS

Appears to be maintained: https://github.com/gardenjs/gardenjs
It actually uses Svelte 5, sounds solid (while minimal) and emphasizes performance.
But, it's still very obscure, so would be a risky pick.

[hahn-kev]

Garden Js looks cool, might not be much of an investment and if it goes away what we have would still be useful, but without type safety I don't think it's worth it over just doing it ourselves.

[hahn-kev]

Had a chat with the author about kitbook and he says Svelte 5 support for what we want isn't too far off. So we'll see how that goes

[JReinhold]

👋 Storybook maintainer here with responsibility of the Svelte integration. Sounds like you're having some problems that I'd like to help out with if I can.

It's currently simply too slow.

I'd love to hear more about this, as potentially you're running into some bugs that we could fix? It would be great if you could elaborate where and when it is slow? From #1747 I'm seeing "It actually takes quite a while to load the first time you try to access it (like up to 1m)" - does that describe the perf problem you're running into, or is there more to it?

Its story indexer can get into a bad state pretty easily (e.g. by adding duplicate story IDs) and the only way I've figure out how to fix it is a full restart. #1747 (comment)

This is annoying, I'll dig into this and open an issue on our side. If you have more context to share about this, I would appreciate it.

---

If you can share a bit about what your needs are I'd be happy to guide your usage of Storybook if you want me to. What are you hoping to get out of your sandbox? Are you looking to automate tests of your components, or is it more for development in isolation or documentation? Do you want behavioral tests, a11y tests, and/or visual tests?

Of course feel free to ignore me if you're certain Storybook just isn't for you 🙂

[hahn-kev]

Thanks @JReinhold for reaching out.

We have a couple of use cases.

• functional tests
• isolated development space

We're just building an app, not a design system or anything like that so no interest in documentation, other than just code using our components in different ways for ourselves.

Yes my main issue is first startup performance.
Digging through the storybook code it seems like it's parsing all the Svelte files in order to determine component props, since we're not making docs that's much less useful for us, so if all that parsing could be avoided I wonder if we could get significantly better performance.

Feel free to check out our code. We use pnpm, you want the project in /frontend/viewer
We're using Bits UI, and Shadcn Svelte, we did a little investigation to replicate the slow performance but couldn't replicate it outside our repo.

[myieye]

@JReinhold Really appreciate you reaching out. Very kind of you!
I've no idea how you found this issue 😆.

I just tried hard to reproduce the indexer trouble I was having and wasn't able to, so I guess it's not that straight forward. 😕

Regarding performance:
I've been using this repo to try to reproduce the issues we've been having and I think I have a good example.
The repo is basically an empty SvelteKit project with a dump of all the shadcn components.
I have a simple shadcn button story.

I've been measuring performance on my machine as the time between running npm run storybook and the time the story completes loading in my browser.

Here's what I've noticed:
When I add additional shadcn component imports to the story (or to the shadcn button component, which the story is using), simply having those imports significantly impacts performance. The shadcn components mostly just wrap components in node_modules. If I import the components in node_modules directly instead of using them via shadcn, there's very minimal impact on the performance. I.e. see these imports in the story:

	// Simply importing these significantly increases the start time even though they're
	// basically just wrappers...
	import * as Drawer from '$lib/components/ui/drawer';
	import * as ContextMenu from '$lib/components/ui/context-menu';
	// ...around these. Importing these instead is much faster.
	// import * as DrawerPrimitive from "vaul-svelte";
	// import * as ContextMenuPrimitive from "bits-ui";

Here are the times I measured:
14s - no imports
17s - node_module imports
40s - shadcn imports

So, I think the performance goes downhill pretty fast as we reference more shadcn components in our real project, whether directly or indirectly.

---

It's maybe worth noting that there's not as significant a difference in the bundle-size of the story between the node_module import and shadcn import versions. (non-gzipped sizes):
72kb - no imports
76kb - node_module imports
111kb - node_module imports + 1 imported component used in code
76kb - shadcn imports
118kb - shadcn imports + 1 imported component used in code

I was pretty convinced that the bundle size reflected the performance issue, because Shadcn components expose all the potential attributes of the underlying html element as component props, which seem to get documented in the generated stories and create a decent amount of bulk.

Also, our code-base includes a union TypeScript type of all possible MDI icons. That also adds a lot of bulk to the bundle that we don't need. By default I think it was also creating a radio button group (with 1000+ items) in the controls UI. We're patching that globally, but the entire union type still lands in the bundle.

But, all-in-all it could be that the bundle-size bulk doesn't really reflect the performance issues, which is what we actually care about.

[JReinhold]

Thank you for the detailed explanation @myieye and @hahn-kev

Digging through the storybook code it seems like it's parsing all the Svelte files in order to determine component props

You are right @hahn-kev, and my gut feeling tells me that this is also the root cause of your perf issues. I've filed the problem at storybookjs/storybook#32233, but in essence Storybook analyses component props for all Svelte components outside of node_modules, even though it is only useful for the subset of components that are ever referenced in story metas. This analysis can be time-consuming when dealing with complex/deep prop types of components.

we're not making docs that's much less useful for us, so if all that parsing could be avoided I wonder if we could get significantly better performance.

There is no built-in way to disable this, because it's not just used for docs, it's also used for autogenerating the controls in the Controls addon-panel. That is a feature that >90 % of Storybook users use, so there has been little need to disable this, but we'll discuss this internally. Do you use the Controls panel at all, or can you live without that too? You can always manually define argTypes when you want to.

However we can hack with the internals to see if it makes a difference for you:

1. Find the file node_modules/@storybook/svelte-vite/dist/preset.js
2. Search for await svelteDocgen()
3. Delete that specific text

In this repo I've used pnpm patch to make this change in a persisted way. If you take the git diff below, save it to a disable-sb-docgen.patch file and run git apply disable-sb-docgen.patch, you should get the same patch which should disable Svelte docgen for you. Then you can see what impact it has on performance and UX, and persist the modification if you want to.

git diff

diff --git a/frontend/package.json b/frontend/package.json
index c7a97972..708921e9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -115,6 +115,9 @@
       "protobufjs",
       "sharp",
       "svelte-preprocess"
-    ]
+    ],
+    "patchedDependencies": {
+      "@storybook/svelte-vite": "patches/@storybook__svelte-vite.patch"
+    }
   }
 }
diff --git a/frontend/patches/@storybook__svelte-vite.patch b/frontend/patches/@storybook__svelte-vite.patch
new file mode 100644
index 00000000..9181ac53
--- /dev/null
+++ b/frontend/patches/@storybook__svelte-vite.patch
@@ -0,0 +1,9 @@
+diff --git a/dist/preset.js b/dist/preset.js
+index c860d4b568021fd5b3545b0af1c8c0ae2267e178..f4d3119e6f6b481707978c22c7244a50ccf54efb 100644
+--- a/dist/preset.js
++++ b/dist/preset.js
+@@ -1,3 +1,3 @@
+ "use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_node_path3=require("path");var import_node_path2=require("path"),import_magic_string=__toESM(require("magic-string"));var import_node_path=__toESM(require("path")),import_svelte2tsx=__toESM(require("svelte2tsx")),import_compiler=require("svelte/compiler"),import_typescript=__toESM(require("typescript"));function convertType(type,checker){if(type.flags&import_typescript.default.TypeFlags.Any)return{type:"any"};if(type.flags&import_typescript.default.TypeFlags.Number)return{type:"number"};if(type.flags&import_typescript.default.TypeFlags.String)return{type:"string"};if(type.flags&import_typescript.default.TypeFlags.Boolean)return{type:"boolean"};if(type.flags&import_typescript.default.TypeFlags.ESSymbol)return{type:"symbol"};if(type.flags&import_typescript.default.TypeFlags.Null)return{type:"null"};if(type.flags&import_typescript.default.TypeFlags.Undefined)return{type:"undefined"};if(type.flags&import_typescript.default.TypeFlags.Void)return{type:"void"};if(type.getCallSignatures().length>0)return{type:"function",text:checker.typeToString(type)};if(type.flags&import_typescript.default.TypeFlags.Object)return checker.getIndexTypeOfType(type,import_typescript.default.IndexKind.Number)?{type:"array",text:checker.typeToString(type)}:{type:"object",text:checker.typeToString(type)};if(type.isNumberLiteral()||type.isStringLiteral())return{type:"literal",value:type.value,text:type.flags&import_typescript.default.TypeFlags.EnumLiteral?checker.typeToString(type):JSON.stringify(type.value)};if(type.flags&import_typescript.default.TypeFlags.BooleanLiteral){let text=checker.typeToString(type);return{type:"literal",value:text==="true",text}}if(type.isUnion()){let types=type.types.map(t=>convertType(t,checker)).filter(t=>t!==void 0&&t.type!=="undefined"),idxTrue=types.findIndex(t=>t.type==="literal"&&t.value===!0),idxFalse=types.findIndex(t=>t.type==="literal"&&t.value===!1);return idxTrue!==-1&&idxFalse!==-1&&(types.splice(Math.max(idxTrue,idxFalse),1),types.splice(Math.min(idxTrue,idxFalse),1,{type:"boolean"})),types.length>1?{type:"union",types}:types[0]}if(type.isIntersection())return{type:"intersection",types:type.types.map(t=>convertType(t,checker)).filter(t=>t!==void 0)}}function initializerToDefaultValue(expr,checker){if(import_typescript.default.isNumericLiteral(expr))return{text:expr.text};if(import_typescript.default.isStringLiteral(expr))return{text:JSON.stringify(expr.text)};if(import_typescript.default.isIdentifier(expr)||import_typescript.default.isPropertyAccessExpression(expr)){let symbol=checker.getSymbolAtLocation(expr);if(symbol&&checker.isUndefinedSymbol(symbol))return;let type=checker.getTypeAtLocation(expr);if(type.flags&import_typescript.default.TypeFlags.EnumLiteral)return{text:checker.typeToString(type)};if(type.isLiteral())return{text:JSON.stringify(type.value)};if(type.flags&import_typescript.default.TypeFlags.Null)return{text:"null"};if(type.flags&import_typescript.default.TypeFlags.BooleanLiteral)return{text:checker.typeToString(type)};if(type.getCallSignatures().length>0)return{text:"function"}}else{if(import_typescript.default.isArrayLiteralExpression(expr)||import_typescript.default.isObjectLiteralExpression(expr)||import_typescript.default.isNewExpression(expr))return{text:expr.getText()};if(import_typescript.default.isArrowFunction(expr))return{text:"function"}}switch(expr.kind){case import_typescript.default.SyntaxKind.TrueKeyword:return{text:"true"};case import_typescript.default.SyntaxKind.FalseKeyword:return{text:"false"};case import_typescript.default.SyntaxKind.NullKeyword:return{text:"null"}}return{text:"..."}}function loadConfig(basepath){let configPath=import_typescript.default.findConfigFile(basepath,import_typescript.default.sys.fileExists)||import_typescript.default.findConfigFile(basepath,import_typescript.default.sys.fileExists,"jsconfig.json"),forcedOptions={sourceMap:!1,noEmit:!0,strict:!0,allowJs:!0,checkJs:!0,skipLibCheck:!0,skipDefaultLibCheck:!0};if(!configPath)return[forcedOptions,new Set];let configFile=import_typescript.default.readConfigFile(configPath,import_typescript.default.sys.readFile),config=import_typescript.default.parseJsonConfigFileContent(configFile.config,import_typescript.default.sys,import_node_path.default.dirname(configPath),void 0,configPath,void 0,[{extension:"svelte",isMixedContent:!0,scriptKind:import_typescript.default.ScriptKind.Deferred}]),fileNames=new Set(config.fileNames.filter(fileName=>fileName.endsWith(".svelte")).map(fileName=>fileName+".tsx"));return[{...config.options,...forcedOptions},fileNames]}function createDocgenCache(){return{filenameToModifiedTime:{},filenameToSourceFile:{},fileCache:{}}}function generateDocgen(targetFileName,cache){if(targetFileName.endsWith(".svelte")&&(targetFileName=targetFileName+".tsx"),cache.options===void 0||!cache.rootNames?.has(targetFileName)){[cache.options,cache.rootNames]=loadConfig(targetFileName);let shimFilename=require.resolve("svelte2tsx/svelte-shims-v4.d.ts");cache.rootNames.add(shimFilename),cache.rootNames.add(targetFileName)}let originalHost=import_typescript.default.createCompilerHost(cache.options),host={...originalHost,readFile(fileName){let isCacheTarget=fileName.endsWith(import_node_path.default.sep+"package.json");if(isCacheTarget&&cache.fileCache[fileName])return cache.fileCache[fileName];let content=originalHost.readFile(fileName);return content&&isCacheTarget&&(cache.fileCache[fileName]=content),content},fileExists(fileName){if(fileName.endsWith(import_node_path.default.sep+"package.json")&&cache.fileCache[fileName])return!0;let exists=originalHost.fileExists(fileName);return exists||(fileName.endsWith(".svelte.tsx")||fileName.endsWith(".svelte.jsx")?(fileName=fileName.slice(0,-4),exists=originalHost.fileExists(fileName),exists):!1)},getSourceFile(fileName,languageVersion,onError){if(fileName.endsWith(".svelte.tsx")||fileName.endsWith(".svelte.jsx")){let realFileName=fileName.slice(0,-4),modifiedTime=import_typescript.default.sys.getModifiedTime?import_typescript.default.sys.getModifiedTime(realFileName):void 0;if(modifiedTime&&cache.filenameToModifiedTime[fileName]?.getTime()===modifiedTime.getTime())return cache.filenameToSourceFile[fileName];let content=originalHost.readFile(realFileName);if(content===void 0)return;let isTsFile=/<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(content),tsx=import_svelte2tsx.default.svelte2tsx(content,{version:import_compiler.VERSION,isTsFile,mode:"dts"}),sourceFile2=import_typescript.default.createSourceFile(fileName,tsx.code,languageVersion,!0,isTsFile?import_typescript.default.ScriptKind.TS:import_typescript.default.ScriptKind.JS);return cache.filenameToSourceFile[fileName]=sourceFile2,cache.filenameToModifiedTime[fileName]=modifiedTime,sourceFile2}else{let staticCaching=!1;staticCaching||=fileName.split(import_node_path.default.sep).some(part=>part.toLowerCase()==="node_modules");let cachedSourceFile=cache.filenameToSourceFile[fileName];if(cachedSourceFile&&staticCaching)return cachedSourceFile;let modifiedTime=import_typescript.default.sys.getModifiedTime?import_typescript.default.sys.getModifiedTime(fileName):void 0;if(modifiedTime&&cache.filenameToModifiedTime[fileName]?.getTime()===modifiedTime.getTime())return cache.filenameToSourceFile[fileName];let content=originalHost.readFile(fileName);if(content===void 0)return;let sourceFile2=import_typescript.default.createSourceFile(fileName,content,languageVersion,!0);return cache.filenameToSourceFile[fileName]=sourceFile2,cache.filenameToModifiedTime[fileName]=modifiedTime,sourceFile2}},writeFile(){}},program=import_typescript.default.createProgram({rootNames:Array.from(cache.rootNames),options:cache.options,host,oldProgram:cache.oldProgram});cache.oldProgram=program;let checker=program.getTypeChecker(),sourceFile=program.getSourceFile(targetFileName);if(sourceFile===void 0)return{props:[]};let propMap=new Map,renderFunction=sourceFile.statements.find(statement=>import_typescript.default.isFunctionDeclaration(statement)&&statement.name?.text===import_svelte2tsx.internalHelpers.renderName);if(renderFunction===void 0)return{props:[]};let propsType,signature=checker.getSignatureFromDeclaration(renderFunction);return signature&&signature.declaration&&checker.getReturnTypeOfSignature(signature).getProperties().forEach(retObjProp=>{if(retObjProp.name==="props"){let decl=signature.getDeclaration();propsType=checker.getTypeOfSymbolAtLocation(retObjProp,decl),propsType.getProperties().forEach(prop=>{let name=prop.getName(),description=import_typescript.default.displayPartsToString(prop.getDocumentationComment(checker))||void 0,propType=checker.getTypeOfSymbolAtLocation(prop,decl);if(prop.valueDeclaration){let typeTag=import_typescript.default.getJSDocTypeTag(prop.valueDeclaration);typeTag?.comment&&(description=((description||"")+`
+ `+typeTag.comment).trim())}if(prop.valueDeclaration?.getSourceFile().fileName.includes("node_modules/svelte/elements.d.ts"))return;let optional=(prop.flags&import_typescript.default.SymbolFlags.Optional)!==0;propMap.set(name,{name,optional,description,type:convertType(propType,checker)})})}}),renderFunction.body?.forEachChild(node=>{import_typescript.default.isVariableStatement(node)&&node.declarationList.declarations.forEach(declaration=>{if(import_typescript.default.isObjectBindingPattern(declaration.name)){let isPropsRune=declaration.initializer&&import_typescript.default.isCallExpression(declaration.initializer)&&import_typescript.default.isIdentifier(declaration.initializer.expression)&&declaration.initializer.expression.text==="$props",isPropsType=declaration.type&&propsType===checker.getTypeFromTypeNode(declaration.type);(isPropsRune||isPropsType)&&declaration.name.elements.forEach(element=>{let name=element.name.getText(),prop=propMap.get(name);if(prop&&element.initializer){let defaultValue=initializerToDefaultValue(element.initializer,checker);defaultValue&&(prop.defaultValue=defaultValue)}})}if(import_typescript.default.isVariableDeclaration(declaration)&&import_typescript.default.isIdentifier(declaration.name)&&propMap.has(declaration.name.text)){let prop=propMap.get(declaration.name.text);if(prop&&declaration.initializer){prop.optional=!0;let defaultValue=initializerToDefaultValue(declaration.initializer,checker);defaultValue&&(prop.defaultValue=defaultValue)}}})}),{props:Array.from(propMap.values())}}function getComponentName(ast){let exportDefaultDeclaration=ast.body.find(n=>n.type==="ExportDefaultDeclaration");if(!exportDefaultDeclaration)throw new Error("Unreachable - no default export found");if(exportDefaultDeclaration.declaration.type==="Identifier")return exportDefaultDeclaration.declaration.name;if(exportDefaultDeclaration.declaration.type!=="ClassDeclaration"&&exportDefaultDeclaration.declaration.type!=="FunctionDeclaration")throw new Error("Unreachable - not a class or a function");if(!exportDefaultDeclaration.declaration.id)throw new Error("Unreachable - unnamed class/function");return exportDefaultDeclaration.declaration.id.name}function transformToSvelteDocParserType(type){switch(type.type){case"string":return{kind:"type",type:"string",text:"string"};case"number":return{kind:"type",type:"number",text:"number"};case"boolean":return{kind:"type",type:"boolean",text:"boolean"};case"symbol":return{kind:"type",type:"other",text:"symbol"};case"null":return{kind:"type",type:"other",text:"null"};case"undefined":return{kind:"type",type:"other",text:"undefined"};case"void":return{kind:"type",type:"other",text:"void"};case"any":return{kind:"type",type:"any",text:"any"};case"object":return{kind:"type",type:"object",text:type.text};case"array":return{kind:"type",type:"array",text:type.text};case"function":return{kind:"function",text:type.text};case"literal":return{kind:"const",type:typeof type.value,value:type.value,text:type.text};case"union":{let nonNull=type.types.filter(t=>t.type!=="null"),text=nonNull.map(t=>transformToSvelteDocParserType(t).text).join(" | "),types=nonNull.map(t=>transformToSvelteDocParserType(t));return types.length===1?types[0]:{kind:"union",type:types,text}}case"intersection":return{kind:"type",type:"intersection",text:type.types.map(t=>transformToSvelteDocParserType(t).text).join(" & ")}}}function transformToSvelteDocParserDataItems(docgen){return docgen.props.map(p=>{let required=p.optional===!1&&p.defaultValue===void 0;return{name:p.name,visibility:"public",description:p.description,keywords:required?[{name:"required",description:""}]:[],kind:"let",type:p.type?transformToSvelteDocParserType(p.type):void 0,static:!1,readonly:!1,importPath:void 0,originalName:void 0,localName:void 0,defaultValue:p.defaultValue?p.defaultValue.text:void 0}})}async function svelteDocgen(){let cwd=process.cwd(),include=/\.svelte$/,exclude=/node_modules\/.*/,{createFilter}=await import("vite"),filter=createFilter(include,exclude),sourceFileCache=createDocgenCache();return{name:"storybook:svelte-docgen-plugin",async transform(src,id){if(id.startsWith("\0")||!filter(id))return;let resource=(0,import_node_path2.relative)(cwd,id),docgen=generateDocgen(resource,sourceFileCache),componentDoc={data:transformToSvelteDocParserDataItems(docgen),name:(0,import_node_path2.basename)(resource)},s=new import_magic_string.default(src),outputAst=this.parse(src),componentName=getComponentName(outputAst);return s.append(`
+-;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`),{code:s.toString(),map:s.generateMap({hires:!0,source:id})}}}}var import_server_errors=require("storybook/internal/server-errors"),import_builder_vite=require("@storybook/builder-vite");async function handleSvelteKit(plugins,options){let frameworkPreset=await options.presets.apply("framework",{},options),framework=typeof frameworkPreset=="string"?frameworkPreset:frameworkPreset.name;if(await(0,import_builder_vite.hasVitePlugins)(plugins,["vite-plugin-svelte-kit","vite-plugin-sveltekit-setup","vite-plugin-sveltekit-compile"])&&!framework.includes("@storybook/sveltekit"))throw new import_server_errors.SvelteViteWithSvelteKitError}var getAbsolutePath=input=>(0,import_node_path3.dirname)(require.resolve((0,import_node_path3.join)(input,"package.json"))),core={builder:getAbsolutePath("@storybook/builder-vite"),renderer:getAbsolutePath("@storybook/svelte")},viteFinal=async(config,options)=>{let{plugins=[]}=config;return plugins.push(await svelteDocgen()),await handleSvelteKit(plugins,options),{...config,plugins}};0&&(module.exports={core,viteFinal});
++;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`),{code:s.toString(),map:s.generateMap({hires:!0,source:id})}}}}var import_server_errors=require("storybook/internal/server-errors"),import_builder_vite=require("@storybook/builder-vite");async function handleSvelteKit(plugins,options){let frameworkPreset=await options.presets.apply("framework",{},options),framework=typeof frameworkPreset=="string"?frameworkPreset:frameworkPreset.name;if(await(0,import_builder_vite.hasVitePlugins)(plugins,["vite-plugin-svelte-kit","vite-plugin-sveltekit-setup","vite-plugin-sveltekit-compile"])&&!framework.includes("@storybook/sveltekit"))throw new import_server_errors.SvelteViteWithSvelteKitError}var getAbsolutePath=input=>(0,import_node_path3.dirname)(require.resolve((0,import_node_path3.join)(input,"package.json"))),core={builder:getAbsolutePath("@storybook/builder-vite"),renderer:getAbsolutePath("@storybook/svelte")},viteFinal=async(config,options)=>{let{plugins=[]}=config;return plugins.push(),await handleSvelteKit(plugins,options),{...config,plugins}};0&&(module.exports={core,viteFinal});
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 442ca53c..a76d89d1 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -79,6 +79,11 @@ catalogs:
       specifier: ^3.2.4
       version: 3.2.4
 
+patchedDependencies:
+  '@storybook/svelte-vite':
+    hash: b58c023ca6050d3b26984ee2656d2ab57ce23d8257fb9f9fc2e3205c3cf8950b
+    path: patches/@storybook__svelte-vite.patch
+
 importers:
 
   .:
@@ -453,7 +458,7 @@ importers:
         version: 9.0.18(@vitest/browser@3.2.4)(@vitest/runner@3.2.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0))(vitest@3.2.4)
       '@storybook/svelte-vite':
         specifier: ^9.0.18
-        version: 9.0.18(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1)))(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0))(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1))
+        version: 9.0.18(patch_hash=b58c023ca6050d3b26984ee2656d2ab57ce23d8257fb9f9fc2e3205c3cf8950b)(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1)))(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0))(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1))
       '@stylistic/eslint-plugin':
         specifier: 'catalog:'
         version: 2.13.0(eslint@9.32.0(jiti@2.4.2))(typescript@5.8.3)
@@ -9080,7 +9085,7 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       storybook: 9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0)
 
-  '@storybook/svelte-vite@9.0.18(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1)))(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0))(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1))':
+  '@storybook/svelte-vite@9.0.18(patch_hash=b58c023ca6050d3b26984ee2656d2ab57ce23d8257fb9f9fc2e3205c3cf8950b)(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1)))(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0))(svelte@5.37.2)(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1))':
     dependencies:
       '@storybook/builder-vite': 9.0.18(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0))(vite@6.3.5(@types/node@20.19.9)(jiti@2.4.2)(yaml@2.7.1))
       '@storybook/svelte': 9.0.18(storybook@9.0.18(@testing-library/dom@10.4.0)(prettier@3.5.0))(svelte@5.37.2)

---

Thank you for the reproduction @myieye. The behavior aligns with the problem, because components within node_modules are ignored by docgen, it has little to no impact to import them directly. however when using a wrapper component, docgen runs on those wrapper components, which causes the perf issue.

Here are the times I measured:
14s - no imports
17s - node_module imports
40s - shadcn imports

That's pretty severe, and I don't see the same difference on my machine, but I wonder if it's because our specs are different, or our environment?

I'm seeing:

• 7s - no imports and node_modules imports
• 9s - shadcn imports

I'm on a MacBook Pro M1 Pro, 32 GB, what are your specs?

My expectation is that your computer is just slower/less optimized for an operation like this, which is why you're impacted harder, which is still a problem of course!

A more "accurate" measurement would be to run build-storybook instead, as it reports the exact time Vite spent building at the end. In your reproduction I see:

• 4.90s, no import
• 6.49s, node_modules imports
• 7.75s, shadcn imports

[myieye]

@JReinhold I tested storybookjs/storybook#32289 and it feels like magic.

When I have storybook running the first page/story load takes about 10s for me. After that it takes more like 2-3s.
I'd love to be able to warm up the app without having to access the page, but that's not so critical.

[JReinhold]

@JReinhold I tested storybookjs/storybook#32289 and it feels like magic.

When I have storybook running the first page/story load takes about 10s for me. After that it takes more like 2-3s.

That's great to hear, we'll move forward with that PR then, somehow.

I'd love to be able to warm up the app without having to access the page, but that's not so critical.

I think that's doable. If my assumption is correct, those 10s are spent on analysing stories files, and we can move that up so it happens at server startup instead of when the Vite build starts (which is triggered by the first page visit).