Add error on legacy Stories to display when legacyTemplate was not …

…enabled

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,
++       },
++   },
+],
+```

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');
 </script>

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<Story<EmptyObject, Component, Meta<Component>>> & {
     /**
@@ -23,6 +24,8 @@
   let { args }: Props = $props();
 
   let context: StoryRendererContext['storyContext'];
+
+  throw new LegacyTemplateNotEnabledError('Story');
 </script>
 
 <slot {context} {args} />

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');
 </script>
 
 <slot {context} {args} />

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.
+    `;
+  }
+}