From 705967e7b2ae2da2082d1907315682ed340acc63 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 19 Aug 2024 11:44:18 +0200 Subject: [PATCH] SvelteKit: Add portable stories vite plugin --- .circleci/config.yml | 6 +-- .../Forms.svelte | 2 +- .../cli-storybook/src/sandbox-templates.ts | 8 ++-- scripts/tasks/sandbox-parts.ts | 37 +++++++++++++------ 4 files changed, 33 insertions(+), 20 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index cd966b042091..b57d81fc206e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -723,7 +723,7 @@ workflows: requires: - build-sandboxes - vitest-integration: - parallelism: 4 + parallelism: 5 requires: - create-sandboxes - bench: @@ -789,7 +789,7 @@ workflows: requires: - build-sandboxes - vitest-integration: - parallelism: 4 + parallelism: 5 requires: - create-sandboxes - test-portable-stories: @@ -856,7 +856,7 @@ workflows: requires: - build-sandboxes - vitest-integration: - parallelism: 8 + parallelism: 11 requires: - create-sandboxes - test-portable-stories: diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte index 371a17656bea..8513ae2a7064 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte @@ -2,6 +2,6 @@ import { enhance } from '$app/forms'; -
+
\ No newline at end of file diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index bad1d34ba51b..ffdbccdd5e4d 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -449,8 +449,7 @@ const baseTemplates = { renderer: '@storybook/svelte', builder: '@storybook/builder-vite', }, - // TODO: remove vitest-integration filter once project annotations exist for sveltekit - skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], + skipTasks: ['e2e-tests-dev', 'bench'], }, 'svelte-kit/skeleton-ts': { name: 'SvelteKit Latest (Vite | TypeScript)', @@ -461,8 +460,7 @@ const baseTemplates = { renderer: '@storybook/svelte', builder: '@storybook/builder-vite', }, - // TODO: remove vitest-integration filter once project annotations exist for sveltekit - skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], + skipTasks: ['e2e-tests-dev', 'bench'], }, 'svelte-kit/prerelease-ts': { name: 'SvelteKit Prerelease (Vite | TypeScript)', @@ -473,7 +471,7 @@ const baseTemplates = { renderer: '@storybook/svelte', builder: '@storybook/builder-vite', }, - skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], + skipTasks: ['e2e-tests-dev', 'bench'], }, 'lit-vite/default-js': { name: 'Lit Latest (Vite | JavaScript)', diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index a0b24c7b4e26..7d751f5ebbb0 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -360,17 +360,40 @@ async function linkPackageStories( ); } +const getVitestPluginInfo = (details: TemplateDetails) => { + let frameworkPluginImport = ''; + let frameworkPluginCall = ''; + + const framework = details.template.expected.framework; + const isNextjs = framework.includes('nextjs'); + const isSveltekit = framework.includes('sveltekit'); + + if (isNextjs) { + frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'"; + frameworkPluginCall = 'vitePluginNext()'; + } + + if (isSveltekit) { + frameworkPluginImport = "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite'"; + frameworkPluginCall = 'storybookSveltekitPlugin()'; + } + + return { frameworkPluginImport, frameworkPluginCall }; +}; + export async function setupVitest(details: TemplateDetails, options: PassedOptionValues) { const { sandboxDir, template } = details; const isVue = template.expected.renderer === '@storybook/vue3'; const isNextjs = template.expected.framework.includes('nextjs'); + const { frameworkPluginCall, frameworkPluginImport } = getVitestPluginInfo(details); // const isAngular = template.expected.framework === '@storybook/angular'; const portableStoriesFrameworks = [ '@storybook/nextjs', '@storybook/experimental-nextjs-vite', - // TODO: add sveltekit and angular once we enable their sandboxes + '@storybook/sveltekit', + // TODO: add angular once we enable their sandboxes ]; const storybookPackage = portableStoriesFrameworks.includes(template.expected.framework) ? template.expected.framework @@ -409,7 +432,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio dedent` import { defineWorkspace, defaultExclude } from "vitest/config"; import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; - ${isNextjs ? "import vitePluginNext from 'vite-plugin-storybook-nextjs'" : ''} + ${frameworkPluginImport} export default defineWorkspace([ { @@ -421,7 +444,7 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio include: ["vitest"], }, }), - ${isNextjs ? 'vitePluginNext(),' : ''} + ${frameworkPluginCall} ], ${ isNextjs @@ -452,14 +475,6 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio ...defaultExclude, // TODO: investigate TypeError: Cannot read properties of null (reading 'useContext') "**/*argtypes*", - // TODO (SVELTEKIT): Failures related to missing framework annotations - "**/frameworks/sveltekit_svelte-kit-skeleton-ts/navigation.stories*", - "**/frameworks/sveltekit_svelte-kit-skeleton-ts/hrefs.stories*", - // TODO (SVELTEKIT): Investigate Error: use:enhance can only be used on
fields with method="POST" - "**/frameworks/sveltekit_svelte-kit-skeleton-ts/forms.stories*", - // TODO (SVELTE|SVELTEKIT): Typescript preprocessor issue - "**/frameworks/svelte-vite_svelte-vite-default-ts/ts-docs.stories.*", - "**/frameworks/sveltekit_svelte-kit-skeleton-ts/ts-docs.stories.*", ], /** * TODO: Either fix or acknowledge limitation of: