Svelte: Call tick() after mount
#31476
Conversation
…ories for async components
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
5 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
| $effect(() => { | ||
| onEffect?.(); | ||
| shown = true; | ||
| }); |
There was a problem hiding this comment.
logic: The sync and async versions have different timing characteristics which could cause inconsistent behavior when switching between them
| $effect(() => { | ||
| onEffect?.(); | ||
| shown = true; | ||
| }); |
There was a problem hiding this comment.
style: The effect runs synchronously and modifies state. Consider if this could cause issues with test timing or race conditions when testing async behavior.
| await expect(args.onEffect).not.toHaveBeenCalled(); | ||
| await expect(canvas.getElementById('sb-pending-async-component-notice')).toBeInTheDocument(); |
There was a problem hiding this comment.
style: getElementById is less reliable than getByTestId for testing. Consider using data-testid here for consistency with other tests.
|
View your CI Pipeline Execution ↗ for commit c997203.
☁️ Nx Cloud last updated this comment at |
JReinhold
changed the title
tick() after mounttick() after mount
…rybookjs/storybook into jeppe/svelte-async-component-support
Closes #
What I did
tick()after mounting and re-rendering Svelte components, to ensure that any effects are completed before calling the render phase complete.@testing-library/svelteusesflushSync, but because we're in an async context we canawait tick()instead, which is supposedly better.Originally I did this to test out the
await settled()call, but concluded that we should not be calling that automatically similar totick(). The reason being that it would block users from testing their components in the pending state, as it would causeplayto wait for all promises to settled, not allowing users to make assertions before so. If users want to, they can callsettled()in theirplay-function for maximum flexibility.<svelte:boundary>, so that if users try to render async components without wrapping them in a boundary, it won't crash, it will just use our top-level boundary instead. Users can add their own lower-level boundaries if they want to. This is a no-op in current Svelte versions so it should be safe to add now.Checklist for Contributors
Testing
You can test out the async stuff (but you don't have to right now) by creating a Svelte sandbox and then:
yarn add svelte@https://pkg.pr.new/svelte@15844compilerOptions: { experimental: { async: true } }to thesvelte.config.jsof the sandboxsettled.stories.tsfile, as well as the async logic in theAsyncComponent.sveltefile.The new uncommented story should work properly.
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Greptile Summary
Added support for Svelte async components by ensuring effects complete before rendering, with proper handling of component mounting and state transitions.
await svelte.tick()calls after mounting/re-rendering incode/renderers/svelte/src/render.tsto ensure effects complete<svelte:boundary>incode/renderers/svelte/src/components/PreviewRender.svelteto safely handle async componentscode/renderers/svelte/template/stories/settled.stories.tswith sync component tests and commented async testssettled()to allow testing pending component statesAsyncComponent.svelteandSyncComponent.sveltetest components demonstrating effect handling