Elevating the DX of using Storybook for Svelte
summary
Integration hooks into the svelte/compiler AST to locate defineMeta calls and component-level story nodes, uses the simframe helper to traverse and extract names and attributes, and implements a Storybook plugin that rewrites the Svelte compile output to inject an exported meta and stories surface while leaving the original component function largely untouched. The transform lets Svelte single-file components show in the sidebar and render in Storybook, preserves legacy object stories, and ships in the next Storybook preview.
AI-written summary · about
chapters (7)
- 0:00Introduction to Storybook
- 1:16Regular CSF vs Svelte CSF
- 2:11Benefits of Svelte CSF
- 3:52Communication and AST analysis
- 6:11The SFC challenge
- 8:05Transforming compiled output
- 11:46Conclusion and takeaways
related talks
24mA Short Synopsis of Vue Storybook
52mStorybook: New and upcoming features
23mComponent Driven ClojureScript with Storybook
37mBridging the gap between UX and development – A Storybook
03mDocument your components with Storybook for Vue
27mThe story of storybook
27mDX is the new black. Learnings from using Nuxt and Storybook at scale
28mState of Storybook 7