From 70fc7966b5591543fdde4ee6008b794b0a1f529d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 19 Aug 2024 11:28:34 +0200 Subject: [PATCH 1/4] add vite plugin to sveltekit --- code/frameworks/sveltekit/package.json | 12 +++++++++--- code/frameworks/sveltekit/src/vite.ts | 5 +++++ 2 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 code/frameworks/sveltekit/src/vite.ts diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 69a1986efac3..a4eb985b7543 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -25,8 +25,8 @@ "exports": { ".": { "types": "./dist/index.d.ts", - "node": "./dist/index.js", "import": "./dist/index.mjs", + "node": "./dist/index.js", "require": "./dist/index.js" }, "./dist/preview.mjs": { @@ -36,6 +36,11 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, + "./vite": { + "types": "./dist/vite.d.ts", + "require": "./dist/vite.js", + "import": "./dist/vite.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -78,9 +83,10 @@ "entries": [ "./src/index.ts", "./src/preview.ts", - "./src/preset.ts" + "./src/preset.ts", + "./src/vite.ts" ], "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" -} +} \ No newline at end of file diff --git a/code/frameworks/sveltekit/src/vite.ts b/code/frameworks/sveltekit/src/vite.ts new file mode 100644 index 000000000000..8c59bade8e82 --- /dev/null +++ b/code/frameworks/sveltekit/src/vite.ts @@ -0,0 +1,5 @@ +import { mockSveltekitStores } from './plugins/mock-sveltekit-stores' + +export const storybookSveltekitPlugin = () => { + return [mockSveltekitStores()] +} \ No newline at end of file From 46844555bb67c74228670b67234ebbb1e8e571c4 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 19 Aug 2024 11:44:18 +0200 Subject: [PATCH 2/4] 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 81ea1ffde026..3e5c0b499cc6 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 3bd7dc9b3624..1efffdb68593 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: From d8ee6ed018ad5953155399e1e9be3fba4e97dbec Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 19 Aug 2024 11:51:49 +0200 Subject: [PATCH 3/4] fix formatting --- code/frameworks/sveltekit/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index a4eb985b7543..8b000ac64d7e 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -89,4 +89,4 @@ "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" -} \ No newline at end of file +} From 16b4f11acec6be053bb711bac8e69def6ee3949d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 19 Aug 2024 12:09:01 +0200 Subject: [PATCH 4/4] fix lint --- code/frameworks/sveltekit/src/portable-stories.ts | 1 + code/frameworks/sveltekit/src/vite.ts | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/code/frameworks/sveltekit/src/portable-stories.ts b/code/frameworks/sveltekit/src/portable-stories.ts index 3264d09db9cf..9edaaf8ac55b 100644 --- a/code/frameworks/sveltekit/src/portable-stories.ts +++ b/code/frameworks/sveltekit/src/portable-stories.ts @@ -11,6 +11,7 @@ import type { import type { SvelteRenderer } from '@storybook/svelte'; import { INTERNAL_DEFAULT_PROJECT_ANNOTATIONS as svelteAnnotations } from '@storybook/svelte'; + import * as svelteKitAnnotations from './preview'; /** diff --git a/code/frameworks/sveltekit/src/vite.ts b/code/frameworks/sveltekit/src/vite.ts index 8c59bade8e82..b3fd4f3e6dbe 100644 --- a/code/frameworks/sveltekit/src/vite.ts +++ b/code/frameworks/sveltekit/src/vite.ts @@ -1,5 +1,5 @@ -import { mockSveltekitStores } from './plugins/mock-sveltekit-stores' +import { mockSveltekitStores } from './plugins/mock-sveltekit-stores'; export const storybookSveltekitPlugin = () => { - return [mockSveltekitStores()] -} \ No newline at end of file + return [mockSveltekitStores()]; +};