From 24021fdde9f55724a1f13e7884331b4bd87232c6 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Wed, 14 May 2025 13:30:51 +0200
Subject: [PATCH 1/6] call tick() after every mount of Svelte components, add
(disabled) stories for async components
---
.../src/components/PreviewRender.svelte | 7 ++-
code/renderers/svelte/src/render.ts | 4 +-
.../template/stories/AsyncComponent.svelte | 24 +++++++++
.../template/stories/SyncComponent.svelte | 13 +++++
.../template/stories/settled.stories.ts | 51 +++++++++++++++++++
5 files changed, 97 insertions(+), 2 deletions(-)
create mode 100644 code/renderers/svelte/template/stories/AsyncComponent.svelte
create mode 100644 code/renderers/svelte/template/stories/SyncComponent.svelte
create mode 100644 code/renderers/svelte/template/stories/settled.stories.ts
diff --git a/code/renderers/svelte/src/components/PreviewRender.svelte b/code/renderers/svelte/src/components/PreviewRender.svelte
index 1a13253e6a49..8ebb7337a956 100644
--- a/code/renderers/svelte/src/components/PreviewRender.svelte
+++ b/code/renderers/svelte/src/components/PreviewRender.svelte
@@ -26,4 +26,9 @@
});
-
+
+ {#snippet pending()}
+ Pending async component...
+ {/snippet}
+
+
diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts
index 09648ca81be7..4fecc31d5a0f 100644
--- a/code/renderers/svelte/src/render.ts
+++ b/code/renderers/svelte/src/render.ts
@@ -35,7 +35,7 @@ const componentsByDomElement = new Map<
{ mountedComponent: ReturnType<(typeof svelte)['mount']>; props: RenderContext }
>();
-export function renderToCanvas(
+export async function renderToCanvas(
{
storyFn,
title,
@@ -80,6 +80,7 @@ export function renderToCanvas(
target: canvasElement,
props,
});
+ await svelte.tick();
componentsByDomElement.set(canvasElement, { mountedComponent, props });
} else {
// We need to mutate the existing props for Svelte reactivity to work, we can't just re-assign them
@@ -90,6 +91,7 @@ export function renderToCanvas(
title,
showError,
});
+ await svelte.tick();
}
showMain();
diff --git a/code/renderers/svelte/template/stories/AsyncComponent.svelte b/code/renderers/svelte/template/stories/AsyncComponent.svelte
new file mode 100644
index 000000000000..387f3dbb5a56
--- /dev/null
+++ b/code/renderers/svelte/template/stories/AsyncComponent.svelte
@@ -0,0 +1,24 @@
+
+
+{#if shown}
+ This element is shown after the component's effect runs
+{/if}
diff --git a/code/renderers/svelte/template/stories/SyncComponent.svelte b/code/renderers/svelte/template/stories/SyncComponent.svelte
new file mode 100644
index 000000000000..f34a905e9696
--- /dev/null
+++ b/code/renderers/svelte/template/stories/SyncComponent.svelte
@@ -0,0 +1,13 @@
+
+
+{#if shown}
+ This element is shown after the component's effect runs
+{/if}
diff --git a/code/renderers/svelte/template/stories/settled.stories.ts b/code/renderers/svelte/template/stories/settled.stories.ts
new file mode 100644
index 000000000000..fd7f9cbddde5
--- /dev/null
+++ b/code/renderers/svelte/template/stories/settled.stories.ts
@@ -0,0 +1,51 @@
+import type { StoryObj } from '@storybook/svelte';
+
+import { expect, fn, waitFor } from 'storybook/test';
+
+import AsyncComponent from './AsyncComponent.svelte';
+import SyncComponent from './SyncComponent.svelte';
+
+export default {
+ title: 'stories/renderers/svelte/settled',
+};
+
+export const Sync: StoryObj = {
+ render: (args) => ({
+ Component: SyncComponent,
+ props: args,
+ }),
+ args: {
+ onEffect: fn(),
+ },
+ play: async ({ canvas, args }) => {
+ await expect(args.onEffect).toHaveBeenCalledOnce();
+ await expect(canvas.getByTestId('after-effect')).toBeInTheDocument();
+ },
+};
+
+/*
+TODO: Enable this story once async components have been released in Svelte.
+https://github.com/sveltejs/svelte/discussions/15845
+
+export const Async: StoryObj = {
+ render: (args) => ({
+ Component: AsyncComponent,
+ props: args,
+ }),
+ args: {
+ onEffect: fn(),
+ },
+ play: async ({ canvas, args }) => {
+ await expect(args.onEffect).not.toHaveBeenCalled();
+ await expect(canvas.getElementById('sb-pending-async-component-notice')).toBeInTheDocument();
+
+ // TODO: Ideally we should be able to call await svelte.settled() here instead of waitFor, but currently there's a bug making it never resolve
+ // await svelte.settled();
+
+ await waitFor(() => {
+ expect(args.onEffect).toHaveBeenCalledOnce();
+ expect(canvas.getByTestId('after-effect')).toBeInTheDocument();
+ });
+ },
+};
+*/
From b091f3bbe4f87fbe5085863c8b89f419b9e3b6fb Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold
Date: Mon, 19 May 2025 10:42:51 +0200
Subject: [PATCH 2/6] update snapshots
---
.../portable-stories.test.ts.snap | 16 +
.../stories/__snapshots__/Button.test.ts.snap | 16 +
.../svelte/yarn.lock | 880 +-----------------
3 files changed, 46 insertions(+), 866 deletions(-)
diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
index 59f909462e19..0f4a31a53f79 100644
--- a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
@@ -3,6 +3,7 @@
exports[`Renders CSF2Secondary story 1`] = `
+
+
+
@@ -97,6 +104,7 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
+
+
+
+
@@ -157,6 +170,7 @@ exports[`Renders LoaderStory story 1`] = `
+