docs: Improve error messages related to parser/extract/svelte

storybookjs · Jun 12, 2024 · 3f35763 · 3f35763
1 parent 2f0a74f
commit 3f35763
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 43 deletions.
diff --git a/ERRORS.md b/ERRORS.md
@@ -6,35 +6,121 @@ List of errors that can be thrown by this addon.
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_1`
 
-<!-- TODO:  -->
+Parser couldn't find the Svelte component **[module tag]**.
+
+Ensure the stories file which caused this error has the following initial code:
+
+```svelte
+<script context="module">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    // define your stories meta here
+  });
+</script>
+```
+
+[module tag]: https://svelte.dev/docs/svelte-components#script-context-module
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_2`
 
-<!-- TODO:  -->
+You have used **default or namespace import** from this addon package.
+Our parser doesn't support it.
+
+Change in your stories file which caused this error:
+
+```diff
+- import svelteCsf from "@storybook/addon-svelte-csf";
++ import { defineMeta } from "@storybook/addon-svelte-csf";
+```
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_3`
 
-<!-- TODO:  -->
+Parser couldn't find `defineMeta` import specifier from this addon package import inside the Svelte component **[module tag]**.
+
+You might have forgotten to import it:
+
+```diff
+<script context="module">
+- import { } from "@storybook/addon-svelte-csf";
++ import { defineMeta } from "@storybook/addon-svelte-csf";
+</script>
+```
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_4`
 
-<!-- TODO:  -->
+Parser couldn't find variable declaration with `defineMeta()` call inside the Svelte component **[module tag]**.
+
+You might have forgotten to declare it:
+
+```diff
+<script context="module">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
++ const { Story } = defineMeta({
++    // define your stories meta here
++ });
+</script>
+```
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_5`
 
-<!-- TODO:  -->
+Parser couldn't find a component `Story` **destructured** from the variable declaration with `defineMeta()` call.
+
+You might have used it incorrectly like this:
+
+```diff
+<script context="module">
+- const Story = defineMeta({
++ const { Story } = defineMeta({
+    // define your stories meta here
+  });
+</script>
+```
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_6`
 
-<!-- TODO:  -->
+Parser couldn't find or recognize the **first argument** of the `defineMeta()` call.
+Make sure it is a valid **object expression** which follows an interface [`Meta` from `@storybook/svelte`](https://github.com/storybookjs/storybook/blob/a496ec48c708eed753a5251d55fa07947a869e62/code/renderers/svelte/src/public-types.ts#L21-L28).
+
+You might have used code incorrectly like this:
+
+```diff
+<script context="module">
+- const Story = defineMeta();
++ const { Story } = defineMeta({
++    // define your stories meta here
++ });
+</script>
+```
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_7`
 
-<!-- TODO:  -->
+Parser couldn't find the snippet passed down to `<Story />` attribute _(prop)_ - `children` - at the root of HTML fragment in the stories file which caused this error.
+
+Its trying to extract the snippet body as a stringified raw code for the Story source code.
+
+<!-- TODO: Link to the docs might need updating once Svelte 5 is released -->
+
+Ensure you're using [Svelte `v5` feature **snippet** correctly](https://svelte-5-preview.vercel.app/docs/snippets).
 
 ### `SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_8`
 
-<!-- TODO:  -->
+Parser doesn't recognize or cannot find the snippet identifier passed as an first argument to this addon's feature `setTemplate()` function.
+
+Below is a demonstration of correct usage:
+
+```svelte
+<script>
+  setTemplate(template);
+</script>
+
+{#snippet template()}
+  <!-- ... -->
+{/snippet}
+```
+
+Perhaps you've made a typo?
 
 ## `PARSER_EXTRACT_COMPILED`
 

diff --git a/src/utils/error/parser/extract/svelte.ts b/src/utils/error/parser/extract/svelte.ts
@@ -44,10 +44,7 @@ export class DefaultOrNamespaceImportUsedError extends StorybookSvelteCSFError {
     return dedent`
       Stories file: ${this.filepathURL}
       is using the default/namespace import from "${StorybookSvelteCSFError.packageName}".
-      Please change it to named imports.
-      Take a look at the below snippet for an example usage on how to start writing stories file:
-
-      ${BASE_INITIAL_SNIPPET}
+      Please change it to a named import.
     `;
   }
 }
@@ -65,10 +62,6 @@ export class MissingDefineMetaImportError extends StorybookSvelteCSFError {
       Stories file: ${this.filepathURL}
       doesn't have a 'defineMeta' imported from the "${StorybookSvelteCSFError.packageName}" package inside the module tag.
       ('<script context="module"> <!-- ... --> </script>').
-
-      Make sure this stories file has initial code snippet in order for this addon to work correctly:
-
-      ${BASE_INITIAL_SNIPPET}
     `;
   }
 }
@@ -85,10 +78,6 @@ export class MissingDefineMetaVariableDeclarationError extends StorybookSvelteCS
     return dedent`
       Stories file: ${this.filepathURL}
       doesn't have 'defineMeta' call used for variable declaration inside the module tag ('<script context="module"> <!-- ... --> </script>').
-
-      Make sure this stories file has initial code snippet in order for this addon to work correctly:
-
-      ${BASE_INITIAL_SNIPPET}
     `;
   }
 }
@@ -114,10 +103,6 @@ export class NoStoryComponentDestructuredError extends StorybookSvelteCSFError {
     return dedent`
       Stories file: ${this.filepathURL}
       has no component 'Story' destructured from the '${this.defineMetaImport.local.name}({ ... })' function call.
-
-      Make sure this stories file has initial code snippet in order for this addon to work correctly:
-
-      ${BASE_INITIAL_SNIPPET}
     `;
   }
 }
@@ -141,13 +126,7 @@ export class GetDefineMetaFirstArgumentError extends StorybookSvelteCSFError {
 
   template() {
     return dedent`
-      Addon's parser had a problem extracting the first argument from the 'defineMeta' call
-      in the stories file: ${this.filepathURL}
-
-      Make sure it is a valid object expression which follows the 'Meta' interface from '@storybook/svelte'.
-
-      If you verified that this is valid object, please report it using the link below:
-      https://github.com/storybookjs/addon-svelte-csf/issues/new
+      Failed to extract the first argument from the 'defineMeta' call as object expression in the stories file: ${this.filepathURL}
     `;
   }
 }
@@ -208,18 +187,8 @@ export class InvalidSetTemplateFirstArgumentError extends StorybookSvelteCSFErro
 
   template() {
     return dedent`
-      In the stories file: ${this.filepathURL}
-      'setTemplate()' first argument should be a valid identifier with a reference to a Svelte snippet existing at the roof of fragment.
-
-      Below is a demonstration of correct usage:
-
-      <script>
-        setTemplate(template);
-      </script>
-
-      {#snippet template()}
-        <!-- ... -->
-      {/snippet}
+      'setTemplate()' first argument should be a valid identifier with a reference to a Svelte snippet existing at the root of fragment.
+      This issue happened in the stories file: ${this.filepathURL}
     `;
   }
 }