From 595a08c44141eeadf4768ae7b54a68cd1e56c304 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 27 May 2024 12:02:49 +0200 Subject: [PATCH 1/6] Svelte: Support latest prerelease --- .../svelte-webpack5/templates/SlotDecorator.svelte | 3 ++- code/renderers/svelte/src/components/PreviewRender.svelte | 3 ++- code/renderers/svelte/src/components/SlotDecorator.svelte | 7 ++++--- code/renderers/svelte/src/render.ts | 2 ++ 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte b/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte index bd51e06f4271..ba40b6d039fb 100644 --- a/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte +++ b/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte @@ -1,5 +1,6 @@ - + diff --git a/code/renderers/svelte/src/components/SlotDecorator.svelte b/code/renderers/svelte/src/components/SlotDecorator.svelte index 9de64db04c3d..59b624e0d991 100644 --- a/code/renderers/svelte/src/components/SlotDecorator.svelte +++ b/code/renderers/svelte/src/components/SlotDecorator.svelte @@ -1,6 +1,7 @@ diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts index 2219e21b3760..0ea4a86e9800 100644 --- a/code/renderers/svelte/src/render.ts +++ b/code/renderers/svelte/src/render.ts @@ -77,6 +77,7 @@ function renderToCanvasV4( const mountedComponent = new PreviewRender({ target: canvasElement, props: { + svelteVersion: 4, storyFn, storyContext, name, @@ -148,6 +149,7 @@ function renderToCanvasV5( name, title, showError, + svelteVersion: 5, }); const mountedComponent = svelte.mount(PreviewRender, { target: canvasElement, From ca8a0d115597e9d97015712814a6d50a857100ac Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 27 May 2024 12:31:55 +0200 Subject: [PATCH 2/6] Fix Corepack issue --- scripts/utils/yarn.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index 90a6fb44b0df..7f98611f163c 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -39,6 +39,7 @@ export const installYarn2 = async ({ cwd, dryRun, debug }: YarnOptions) => { const command = [ touch('yarn.lock'), touch('.yarnrc.yml'), + `corepack enable`, `yarn set version berry`, // Use the global cache so we aren't re-caching dependencies each time we run sandbox `yarn config set enableGlobalCache true`, From 4ac11acaeee817cc2d26dc47da824a28169d172b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 27 May 2024 12:59:38 +0200 Subject: [PATCH 3/6] Enable Corepack for sandbox builds --- .circleci/config.yml | 33 ++++++++++++++++++--------------- scripts/utils/yarn.ts | 1 - 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c71bbbbae66b..72adc93ef564 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -8,7 +8,7 @@ parameters: default: "skipped" executors: - sb_node_16_classic: + sb_node_18_classic: parameters: class: description: The Resource class @@ -21,7 +21,7 @@ executors: environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> - sb_node_16_browsers: + sb_node_18_browsers: parameters: class: description: The Resource class @@ -99,7 +99,7 @@ jobs: pretty-docs: executor: class: medium - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -125,7 +125,7 @@ jobs: build: executor: class: xlarge - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -169,7 +169,7 @@ jobs: lint: executor: class: large - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -185,7 +185,7 @@ jobs: check: executor: class: xlarge - name: sb_node_16_classic + name: sb_node_18_classic steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -202,7 +202,7 @@ jobs: - report-workflow-on-failure - cancel-workflow-on-failure script-checks: - executor: sb_node_16_browsers + executor: sb_node_18_browsers steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -230,7 +230,7 @@ jobs: unit-tests: executor: class: xlarge - name: sb_node_16_browsers + name: sb_node_18_browsers steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -252,7 +252,7 @@ jobs: coverage: executor: class: small - name: sb_node_16_browsers + name: sb_node_18_browsers steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" @@ -263,7 +263,7 @@ jobs: chromatic-internal-storybooks: executor: class: medium+ - name: sb_node_16_browsers + name: sb_node_18_browsers environment: NODE_OPTIONS: --max_old_space_size=6144 steps: @@ -287,13 +287,16 @@ jobs: type: integer executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: clone_options: "--depth 1 --verbose" - attach_workspace: at: . + - run: + name: Enable Corepack + command: sudo corepack enable yarn - run: name: Creating Sandboxes command: yarn task --task sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) --no-link --start-from=never --junit @@ -311,7 +314,7 @@ jobs: type: integer executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: @@ -331,7 +334,7 @@ jobs: type: integer executor: class: large - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: @@ -410,7 +413,7 @@ jobs: type: integer executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parallelism: << parameters.parallelism >> steps: - checkout @@ -493,7 +496,7 @@ jobs: test-empty-init: executor: class: medium - name: sb_node_16_browsers + name: sb_node_18_browsers parameters: packageManager: type: string diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index 7f98611f163c..90a6fb44b0df 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -39,7 +39,6 @@ export const installYarn2 = async ({ cwd, dryRun, debug }: YarnOptions) => { const command = [ touch('yarn.lock'), touch('.yarnrc.yml'), - `corepack enable`, `yarn set version berry`, // Use the global cache so we aren't re-caching dependencies each time we run sandbox `yarn config set enableGlobalCache true`, From 921b56906e576de28803e86aededc64d0a03b302 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 27 May 2024 13:30:14 +0200 Subject: [PATCH 4/6] Fix Svelte stories --- code/renderers/svelte/template/cli/js/Page.stories.js | 4 ++-- code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts | 4 ++-- code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/renderers/svelte/template/cli/js/Page.stories.js b/code/renderers/svelte/template/cli/js/Page.stories.js index b46831695fb9..986d5e3e6ce8 100644 --- a/code/renderers/svelte/template/cli/js/Page.stories.js +++ b/code/renderers/svelte/template/cli/js/Page.stories.js @@ -1,4 +1,4 @@ -import { within, userEvent, expect } from '@storybook/test'; +import { within, userEvent, expect, waitFor } from '@storybook/test'; import Page from './Page.svelte'; @@ -20,7 +20,7 @@ export const LoggedIn = { const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts index 2283c6c74abe..38fc3bdc735e 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/svelte'; -import { within, userEvent, expect } from '@storybook/test'; +import { within, userEvent, expect, waitFor } from '@storybook/test'; import Page from './Page.svelte'; @@ -24,7 +24,7 @@ export const LoggedIn: Story = { const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts index ace35ddb275d..6778ef2ef2b5 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts +++ b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/svelte'; -import { within, userEvent, expect } from '@storybook/test'; +import { within, userEvent, expect, waitFor } from '@storybook/test'; import Page from './Page.svelte'; @@ -24,7 +24,7 @@ export const LoggedIn: Story = { const loginButton = canvas.getByRole('button', { name: /Log in/i }); await expect(loginButton).toBeInTheDocument(); await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); + await waitFor(() => expect(loginButton).not.toBeInTheDocument()); const logoutButton = canvas.getByRole('button', { name: /Log out/i }); await expect(logoutButton).toBeInTheDocument(); From 9e85db1ab68f177c8282809da2ee281c87901c6a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 27 May 2024 13:53:38 +0200 Subject: [PATCH 5/6] Fix play function for Svelte Story --- code/renderers/svelte/template/stories/args.stories.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/renderers/svelte/template/stories/args.stories.js b/code/renderers/svelte/template/stories/args.stories.js index 71544066ecd1..c272310cb131 100644 --- a/code/renderers/svelte/template/stories/args.stories.js +++ b/code/renderers/svelte/template/stories/args.stories.js @@ -23,7 +23,10 @@ export const RemountOnResetStoryArgs = { await expect(button).toHaveTextContent('You clicked: 0'); await userEvent.click(button); - await expect(button).toHaveTextContent('You clicked: 1'); + + await waitFor(async () => { + await expect(button).toHaveTextContent('You clicked: 1'); + }); await step("Update story args with { text: 'Changed' }", async () => { await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { text: 'Changed' } }); From 21f09644917ad1cfd003e56768265176cd7e4bdc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 27 May 2024 14:52:59 +0200 Subject: [PATCH 6/6] Linting --- code/renderers/svelte/src/components/SlotDecorator.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/renderers/svelte/src/components/SlotDecorator.svelte b/code/renderers/svelte/src/components/SlotDecorator.svelte index 59b624e0d991..cf5849113a25 100644 --- a/code/renderers/svelte/src/components/SlotDecorator.svelte +++ b/code/renderers/svelte/src/components/SlotDecorator.svelte @@ -13,13 +13,13 @@ if (on && svelteVersion < 5) { // Attach Svelte event listeners in Svelte v4 // In Svelte v5 this is not possible anymore as instances are no longer classes with $on() properties, so it will be a no-op - onMount(() => { + onMount(() => { Object.entries(on).forEach(([eventName, eventCallback]) => { // instance can be undefined if a decorator doesn't have const inst = instance ?? decoratorInstance; inst?.$on?.(eventName, eventCallback) }); - }); + }); }