diff --git a/ERRORS.md b/ERRORS.md index e0a7e023..dce1966e 100644 --- a/ERRORS.md +++ b/ERRORS.md @@ -341,3 +341,21 @@ It cannot be a shorthand or a dynamic value. + template="custom-template" /> ``` + +### `SB_SVELTE_CSF_CODEMOD_0002` + +You are using legacy template API, with deprecated components.\ +To enable support for legacy API, tweak this addon options in your _(`./.storybook/main.(j|t)s`)_ file: + +```diff +addons: [ + // ... other addons +- '@storybook/addon-svelte-csf', ++ { ++ name: '@storybook/addon-svelte-csf', ++ options: { ++ legacyTemplate: true, ++ }, ++ }, +], +``` diff --git a/src/runtime/LegacyMeta.svelte b/src/runtime/LegacyMeta.svelte index 643dddff..9dc77a22 100644 --- a/src/runtime/LegacyMeta.svelte +++ b/src/runtime/LegacyMeta.svelte @@ -8,7 +8,11 @@ */ import type { Meta } from '@storybook/svelte'; + import { LegacyTemplateNotEnabledError } from '#utils/error/codemod/index'; + interface Props extends Meta {} let {}: Props = $props(); + + throw new LegacyTemplateNotEnabledError('Meta'); diff --git a/src/runtime/LegacyStory.svelte b/src/runtime/LegacyStory.svelte index 37dd5291..a1ef6619 100644 --- a/src/runtime/LegacyStory.svelte +++ b/src/runtime/LegacyStory.svelte @@ -12,6 +12,7 @@ import { type StoryRendererContext } from '#runtime/contexts/renderer.svelte'; import type { Meta } from '#types'; + import { LegacyTemplateNotEnabledError } from '#utils/error/codemod/index'; type Props = ComponentProps>> & { /** @@ -23,6 +24,8 @@ let { args }: Props = $props(); let context: StoryRendererContext['storyContext']; + + throw new LegacyTemplateNotEnabledError('Story'); diff --git a/src/runtime/LegacyTemplate.svelte b/src/runtime/LegacyTemplate.svelte index aef7c539..86df95cb 100644 --- a/src/runtime/LegacyTemplate.svelte +++ b/src/runtime/LegacyTemplate.svelte @@ -5,12 +5,15 @@ * E.g. to allow user still have typing experience. * Vite pre-transform hook does codemod where this component gets transformed into Svelte v5 SnippetBlock. */ + import { LegacyTemplateNotEnabledError } from '#utils/error/codemod/index'; import { type StoryRendererContext } from './contexts/renderer.svelte'; - let id: string = 'default'; - let args: StoryRendererContext['storyContext']; - let context: StoryRendererContext['args']; + export let id: string = 'default'; + export let args: StoryRendererContext['storyContext']; + export let context: StoryRendererContext['args']; + + throw new LegacyTemplateNotEnabledError('Template'); diff --git a/src/utils/error/codemod/index.ts b/src/utils/error/codemod/index.ts index 405b23f3..ed8ccd84 100644 --- a/src/utils/error/codemod/index.ts +++ b/src/utils/error/codemod/index.ts @@ -1,3 +1,4 @@ +import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' }; import { StorybookSvelteCSFError } from '#utils/error'; import dedent from 'dedent'; import type { Attribute } from 'svelte/compiler'; @@ -28,3 +29,23 @@ export class InvalidTemplateAttribute extends StorybookSvelteCSFError { `; } } + +export class LegacyTemplateNotEnabledError extends StorybookSvelteCSFError { + readonly category = StorybookSvelteCSFError.CATEGORY.codemod; + readonly code = 2; + public documentation = true; + + public componentName: string; + + constructor(componentName: string) { + super({ filename: undefined }); + this.componentName = componentName; + } + + template(): string { + return dedent` + One of your stories file is using legacy API component - '<${this.componentName}>'. + To enable support for it, enable 'legacyTemplate' in "${pkg.name}" option. + `; + } +}