histoire
histoire copied to clipboard
histoire-dev
Very slow in development
Describe the bug
The dev server starts very slow. When updating a component Histoire updates very slow. Basically everything is slow. It can take anywhere from a couple of seconds to minutes.
The main things I use are sveltekit and tailwindwindcss. Here is the console log, with runtime per component:
silveltman@Sils-MacBook-Pro fulldev-ui % yarn story:dev
yarn run v1.22.19
warning package.json: No license field
$ histoire dev
(x2)
(x3)
(x4)
Port 6006 is in use, trying another one...
Using 4 threads for story collection
Collect stories start all
➜ Local: http://localhost:6007/
➜ Network: use --host to expose
10:21:52 AM [vite-plugin-svelte] ssr compile in progress ...
src/lib/slot/SlotCardGrid.story.svelte 49902ms (setup:40ms, execute:15ms, run:49846ms)
src/lib/slot/SlotCardMasonry.story.svelte 49906ms (setup:38ms, execute:16ms, run:49852ms)
src/lib/slot/SlotCardCarousel.story.svelte 49924ms (setup:34ms, execute:11ms, run:49879ms)
10:22:02 AM [vite-plugin-svelte] ssr compile done.
package files time avg
@tabler/icons-svelte 4063 2.58s 0.6ms
src/lib/slot/SlotCardSplit.story.svelte 221ms (setup:10ms, execute:0ms, run:211ms)
src/lib/slot/SlotGalleryMasonry.story.svelte 121ms (setup:6ms, execute:0ms, run:115ms)
src/lib/slot/SlotHighlight.story.svelte 183ms (setup:5ms, execute:0ms, run:178ms)
src/lib/slot/SlotNewsletter.story.svelte 181ms (setup:4ms, execute:0ms, run:176ms)
src/lib/slot/SlotRichtext.story.svelte 132ms (setup:6ms, execute:0ms, run:126ms)
src/lib/slot/SlotStats.story.svelte 120ms (setup:5ms, execute:0ms, run:115ms)
src/lib/base/Button.story.svelte 79ms (setup:5ms, execute:0ms, run:73ms)
src/lib/base/Card.story.svelte 146ms (setup:13ms, execute:1ms, run:132ms)
src/lib/base/Checkbox.story.svelte 122ms (setup:5ms, execute:0ms, run:117ms)
src/lib/slot/SlotAccordion.story.svelte 79004ms (setup:36ms, execute:14ms, run:78954ms)
src/lib/base/Eyebrow.story.svelte 121ms (setup:27ms, execute:0ms, run:93ms)
src/lib/slot/SlotChecklist.story.svelte 29281ms (setup:8ms, execute:0ms, run:29273ms)
src/lib/base/Form.story.svelte 65ms (setup:6ms, execute:0ms, run:58ms)
src/lib/slot/SlotGallery.story.svelte 29291ms (setup:8ms, execute:0ms, run:29282ms)
src/lib/base/Image.story.svelte 64ms (setup:27ms, execute:1ms, run:37ms)
src/lib/base/Logo.story.svelte 89ms (setup:5ms, execute:0ms, run:83ms)
src/lib/base/Select.story.svelte 82ms (setup:5ms, execute:0ms, run:77ms)
src/lib/base/Radio.story.svelte 129ms (setup:26ms, execute:0ms, run:102ms)
src/lib/base/Social.story.svelte 100ms (setup:5ms, execute:0ms, run:94ms)
src/lib/base/Textfield.story.svelte 90ms (setup:7ms, execute:0ms, run:83ms)
src/lib/base/Textarea.story.svelte 108ms (setup:7ms, execute:0ms, run:101ms)
src/lib/base/Whatsapp.story.svelte 60ms (setup:6ms, execute:0ms, run:55ms)
/Users/silveltman/Documents/GitHub/sveltekit/fulldev-ui/node_modules/.histoire/plugins/builtin_tailwind-tokens/Tailwind.story.js 944ms (setup:5ms, execute:0ms, run:939ms)
src/lib/base/Collapse.story.svelte 29332ms (setup:7ms, execute:0ms, run:29325ms)
Collect stories end 80979ms
Here is the repo: https://github.com/silveltman/fulldev-ui
I think providing this repo is better than a minimal reproductions, since this allows to take a look at all the component and hopefully find the cause of some of them taking a long time to load. I haven't found the reason why unfortunately.
If a more minimal reproduction helps, please let me know and I'm happy to provide it.
I'm not able to find how to run in debug or verbose mode, so i that's possible it would for sure be helpfull.
Thanks! :)
Reproduction
https://github.com/silveltman/fulldev-ui
System Info
Mac, Brave browser
Used Package Manager
yarn
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- [X] The provided reproduction is a minimal reproducible example of the bug.
To give a more minimal example, I have the following simple component and story, where the 'run' takes 101436ms
component:
<script lang="ts">
let className = '';
export { className as class };
export let text: string;
</script>
<span
class="inline-block font-eyebrow text-base-11 text-1 {className}"
{...$$restProps}
>
{text}
</span>
story:
<script lang="ts">
import type { Hst } from '$lib/types';
import Eyebrow from '../lib/base/Eyebrow.svelte';
export let Hst: Hst;
let size: 'sm' | 'md' | 'lg' = 'md';
</script>
<Hst.Story>
<svelte:fragment slot="controls">
<Hst.Select
bind:value={size}
title="Size"
options={['sm', 'md', 'lg']}
/>
</svelte:fragment>
<Eyebrow
text="Lorem ipsum"
class="size-{size}"
variant="primary"
/>
</Hst.Story>
I also encountered the same problem. In development mode, the component update was very slow, so I had to develop outside the document. This bothers me very much.
