From 148201554f513800f35cb8b5aecac9ede8c9ea69 Mon Sep 17 00:00:00 2001
From: xeho91 <xeho91@pm.me>
Date: Fri, 24 May 2024 16:59:48 +0800
Subject: [PATCH] refactor & cleanup

---
 src/components/StoriesExtractor.svelte |   3 +-
 src/components/StoryRenderer.svelte    |   1 +
 src/components/context.svelte.ts       |   6 +-
 src/parser/ast.ts                      |   7 ++
 src/parser/collect-stories.ts          |  20 +--
 src/parser/extract-ast-nodes.ts        |  15 +++
 src/parser/extract-stories.ts          |  30 +++--
 src/parser/types.ts                    |  64 +++++++---
 src/parser/walkers/define-meta.ts      | 114 +++++++++++++++++
 src/parser/walkers/fragment.ts         |  22 ++--
 src/parser/walkers/module.ts           | 167 +++++--------------------
 src/preset.ts                          |  23 ++--
 src/presets/vite.ts                    |  10 +-
 src/presets/vite/post-transform.ts     |  13 +-
 src/presets/vite/pre-transform.ts      |  25 ++--
 src/transformer/create-appendix.ts     |  31 ++++-
 src/transformer/define-meta.ts         |  24 ++--
 17 files changed, 329 insertions(+), 246 deletions(-)
 create mode 100644 src/parser/ast.ts
 create mode 100644 src/parser/extract-ast-nodes.ts
 create mode 100644 src/parser/walkers/define-meta.ts

diff --git a/src/components/StoriesExtractor.svelte b/src/components/StoriesExtractor.svelte
index 8153aef..bae3a7f 100644
--- a/src/components/StoriesExtractor.svelte
+++ b/src/components/StoriesExtractor.svelte
@@ -1,11 +1,12 @@
 <script lang="ts" generics="Component extends SvelteComponent">
+  import type { Meta } from '@storybook/svelte';
   import type { ComponentType, SvelteComponent } from 'svelte';
 
   import { type StoriesRepository, createStoriesExtractorContext } from './context.svelte.js';
 
   interface Props {
     Stories: Component extends SvelteComponent ? ComponentType<Component> : never;
-    repository: () => StoriesRepository<Component>;
+    repository: () => StoriesRepository<Meta<Component>>;
   }
 
   const { Stories, repository }: Props = $props();
diff --git a/src/components/StoryRenderer.svelte b/src/components/StoryRenderer.svelte
index 526e108..bd8eb07 100644
--- a/src/components/StoryRenderer.svelte
+++ b/src/components/StoryRenderer.svelte
@@ -13,6 +13,7 @@
   };
 
   let { Stories, storyName, args, storyContext }: Props = $props();
+
   const context = useStoryRenderer<M>();
 
   $effect(() => {
diff --git a/src/components/context.svelte.ts b/src/components/context.svelte.ts
index ee3e9f7..a56ea00 100644
--- a/src/components/context.svelte.ts
+++ b/src/components/context.svelte.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj, StoryContext } from '@storybook/svelte';
 import type { StoryName } from '@storybook/types';
 import { getContext, hasContext, setContext, type Snippet } from 'svelte';
 
-import type { Args, Story } from '../index.js';
+import type { Story } from '../index.js';
 
 const KEYS = {
   extractor: 'storybook-stories-extractor-context',
@@ -145,9 +145,9 @@ export function useStoriesTemplate<M extends Meta>() {
   return getContext<StoriesTemplateContext<M>>(KEYS.renderSnippet).template;
 }
 
-type InferMeta<S extends Story> = S extends Story<infer M extends Meta> ? M : never;
+type InferMeta<S extends Story<Meta>> = S extends Story<infer M extends Meta> ? M : never;
 
-export function setTemplate<S extends Story>(
+export function setTemplate<S extends Story<Meta>>(
   snippet?: StoriesTemplateContext<InferMeta<S>>['template']
 ): void {
   if (!hasContext(KEYS.renderSnippet)) {
diff --git a/src/parser/ast.ts b/src/parser/ast.ts
new file mode 100644
index 0000000..bc028a9
--- /dev/null
+++ b/src/parser/ast.ts
@@ -0,0 +1,7 @@
+import { compile, type Root } from 'svelte/compiler';
+
+export function getAST(source: string) {
+  const { ast }: { ast: Root } = compile(source, { modernAst: true });
+
+  return ast;
+}
diff --git a/src/parser/collect-stories.ts b/src/parser/collect-stories.ts
index 80d59f1..7398c61 100644
--- a/src/parser/collect-stories.ts
+++ b/src/parser/collect-stories.ts
@@ -3,11 +3,11 @@ import { combineTags } from '@storybook/csf';
 import { logger } from '@storybook/client-logger';
 import { combineArgs, combineParameters } from '@storybook/preview-api';
 import type { Meta, StoryFn } from '@storybook/svelte';
-import { type SvelteComponent, mount, unmount } from 'svelte';
+import { type SvelteComponent, mount, unmount, type ComponentType } from 'svelte';
 
 import type { StoriesFileMeta } from './types.js';
-import type { StoriesRepository } from '../components/context.svelte.js';
 
+import type { StoriesRepository } from '../components/context.svelte.js';
 import StoriesExtractor from '../components/StoriesExtractor.svelte';
 import StoryRenderer from '../components/StoryRenderer.svelte';
 
@@ -28,15 +28,15 @@ const createFragment = document.createDocumentFragment
  * the one selected is disabled.
  */
 export default <M extends Meta>(
-  Stories: SvelteComponent,
+  Stories: ComponentType,
   storiesFileMeta: StoriesFileMeta,
   meta: M
 ) => {
-  if (!meta.parameters?.docs?.description?.component && storiesFileMeta.module.description) {
+  if (!meta.parameters?.docs?.description?.component && storiesFileMeta.defineMeta.description) {
     meta.parameters = combineParameters(meta.parameters, {
       docs: {
         description: {
-          component: storiesFileMeta.module.description,
+          component: storiesFileMeta.defineMeta.description,
         },
       },
     });
@@ -60,17 +60,17 @@ export default <M extends Meta>(
     logger.error(`Error in mounting stories ${e.toString()}`, e);
   }
 
-  const stories: Record<string, StoryFn<StoryRenderer>> = {};
+  const stories: Record<string, StoryFn<StoryRenderer<M>>> = {};
 
   for (const [name, story] of repository.stories) {
-    const storyMeta = storiesFileMeta.fragment.stories[name];
+    const storyMeta = storiesFileMeta.stories[name];
 
     // NOTE: We can't use StoryObj, because `@storybook/svelte` accepts `StoryFn` for now
-    const storyFn: StoryFn<StoryRenderer> = (args, storyContext) => {
+    const storyFn: StoryFn<StoryRenderer<M>> = (args, storyContext) => {
       return {
-        Component: StoryRenderer,
+        Component: StoryRenderer<M>,
         props: {
-          storyName: story.name,
+          storyName: story.name ?? 'Default',
           Stories,
           storyContext,
           args,
diff --git a/src/parser/extract-ast-nodes.ts b/src/parser/extract-ast-nodes.ts
new file mode 100644
index 0000000..9052c8f
--- /dev/null
+++ b/src/parser/extract-ast-nodes.ts
@@ -0,0 +1,15 @@
+import type { Script } from 'svelte/compiler';
+
+import type { AddonASTNodes } from './types.js';
+import { walkOnModule } from './walkers/module.js';
+
+/**
+ * Pick only required AST nodes for further usage in this addon.
+ */
+export function extractASTNodes(module: Script | null): AddonASTNodes {
+  if (!module) {
+    throw new Error(`The stories file must have a module tag ('<script context="module">').`);
+  }
+
+  return walkOnModule(module);
+}
diff --git a/src/parser/extract-stories.ts b/src/parser/extract-stories.ts
index 0f660c4..f019786 100644
--- a/src/parser/extract-stories.ts
+++ b/src/parser/extract-stories.ts
@@ -1,27 +1,31 @@
-import { compile, type Root } from 'svelte/compiler';
+import type { Fragment } from 'svelte/compiler';
 
-import type { StoriesFileMeta } from './types.js';
-import { walkOnModule } from './walkers/module.js';
+import type { AddonASTNodes, StoriesFileMeta } from './types.js';
 import { walkOnFragment } from './walkers/fragment.js';
+import { walkOnDefineMeta } from './walkers/define-meta.js';
 
 /**
  * Parse raw stories file component in Svelte format,
  * and extract the most stories file meta,
  * which are required to generate `StoryFn's` for `@storybook/svelte` components.
  */
-export function extractStories(rawSource: string): StoriesFileMeta {
-  const { ast }: { ast: Root } = compile(rawSource, { modernAst: true });
-  const { module, fragment } = ast;
-
-  const moduleMeta = walkOnModule(module);
-  const fragmentMeta = walkOnFragment({
+export function extractStories({
+  nodes,
+  fragment,
+  source,
+}: {
+  nodes: AddonASTNodes;
+  fragment: Fragment;
+  source: string;
+}): StoriesFileMeta {
+  const { stories } = walkOnFragment({
     fragment,
-    rawSource,
-    addonComponentName: moduleMeta.addonComponentName,
+    source: source,
+    nodes,
   });
 
   return {
-    module: moduleMeta,
-    fragment: fragmentMeta,
+    defineMeta: walkOnDefineMeta(nodes),
+    stories,
   };
 }
diff --git a/src/parser/types.ts b/src/parser/types.ts
index dd00da6..49303cb 100644
--- a/src/parser/types.ts
+++ b/src/parser/types.ts
@@ -1,18 +1,37 @@
 import type { Meta } from '@storybook/svelte';
-import type { VariableDeclarator } from 'estree';
-
-import type { defineMeta } from '../index.js';
-
-export const ADDON_FN_NAME = 'defineMeta';
-export const ADDON_COMPONENT_NAME = 'Story';
-export const ADDON_META_VAR_NAME = 'meta';
+import type { Identifier, ImportSpecifier, VariableDeclaration } from 'estree';
 
 /**
  * Data extracted from the static analytic of a single stories file - `*.stories.svelte`.
  */
 export interface StoriesFileMeta {
-  module: ModuleMeta;
-  fragment: FragmentMeta;
+  defineMeta: DefineMeta;
+  stories: Record<StoryMeta['id'], StoryMeta>;
+}
+
+export const ADDON_AST_NODES = {
+  defineMeta: 'defineMeta',
+  Story: 'Story',
+} as const;
+
+/**
+ * AST nodes extracted from the AST compile `(svelte.compile)` needed for further code transformation.
+ */
+export interface AddonASTNodes {
+  /**
+   * Import specifier for `defineMeta` imported from this addon package.
+   * Could be renamed - e.g. `import { defineMeta } from "@storybook/addon-svelte-csf"`
+   */
+  defineMetaImport: ImportSpecifier;
+  /**
+   * Variable declarator called by `defineMeta({})` function call.
+   * Could be destructured with rename - e.g. `const { Story: S} = defineMeta({ ... })`
+   */
+  defineMetaVar: VariableDeclaration;
+  /**
+   * A `<Story />` component, could be destructured with rename - e.g. `const { Story: S} = defineMeta({ ... })`
+   */
+  Story: Identifier;
 }
 
 /**
@@ -20,14 +39,10 @@ export interface StoriesFileMeta {
  * from the single stories file - `*.stories.svelte`.
  */
 export interface ModuleMeta extends Pick<Meta, 'tags'> {
+  /**
+   * Description for the stories file, extracted from above `defineMeta` function call.
+   */
   description?: string;
-  // NOTE: Why? It could be overriden with `import { defineMeta as d } ...`
-  addonFnName: typeof defineMeta.name | (string & {});
-  // NOTE: Why? It could be overriden with `const { Story: S } ...`
-  addonComponentName: typeof ADDON_COMPONENT_NAME | (string & {});
-  // NOTE: Why? It could be optionally used, and overriden with `const { meta: m } ...`
-  addonMetaVarName?: typeof ADDON_META_VAR_NAME | (string & {}) | undefined;
-  defineMetaVariableDeclarator: VariableDeclarator;
 }
 
 /**
@@ -39,7 +54,20 @@ export interface FragmentMeta {
 }
 
 /**
- * Meta extracted from static analysis of the single <Story /> component
+ * Meta extracted from static analysis of the `defineMeta` function call
+ * inside the module tag _(`script context="module">`)_ in the stories file - `*.stories.svelte`.
+ * NOTE: Properties from Meta are needed for `StoriesIndexer`
+ */
+export interface DefineMeta extends Pick<Meta, 'id' | 'title' | 'tags'> {
+  /**
+   * Description for the stories file.
+   * Extracted from the leading comment above `defineMeta` function call.
+   */
+  description?: string;
+}
+
+/**
+ * Meta extracted from static analysis of the single `<Story />` component
  * in the stories file - `*.stories.svelte`.
  */
 export interface StoryMeta {
@@ -56,6 +84,6 @@ export interface StoryMeta {
    * Description of the story, will display above the sample in docs mode.
    */
   description?: string;
-  /** Raw source for children _(what is inside the <Story>...</Story> tags)_ */
+  /** Raw source for children _(what is inside the `<Story>...</Story>` tags)_ */
   rawSource?: string;
 }
diff --git a/src/parser/walkers/define-meta.ts b/src/parser/walkers/define-meta.ts
new file mode 100644
index 0000000..7dc1938
--- /dev/null
+++ b/src/parser/walkers/define-meta.ts
@@ -0,0 +1,114 @@
+import { logger } from '@storybook/client-logger';
+import dedent from 'dedent';
+import type { SvelteNode } from 'svelte/compiler';
+import type { ObjectExpression, Property } from 'estree';
+import { walk, type Visitors } from 'zimmerframe';
+
+import type { AddonASTNodes, DefineMeta } from '../types.js';
+
+export function walkOnDefineMeta(nodes: AddonASTNodes): DefineMeta {
+  const state: Partial<DefineMeta> = {};
+  const visitors: Visitors<SvelteNode, typeof state> = {
+    // Walk on `const { ... } = defineMeta()`
+    VariableDeclaration(node, { state, visit }) {
+      const { declarations, leadingComments } = node;
+
+      if (leadingComments) {
+        state.description = dedent(leadingComments[0].value.replaceAll(/^ *\*/gm, ''));
+      }
+
+      const declaration = declarations[0];
+      const { id, init } = declaration;
+
+      if (
+        id.type === 'ObjectPattern' &&
+        init?.type === 'CallExpression' &&
+        init.callee.type === 'Identifier'
+      ) {
+        visit(init, state);
+      }
+    },
+
+    // Walk on `defineMeta` function call - called by `visit()` from `VariableDeclarator`
+    CallExpression(node, { state, stop }) {
+      if (node.arguments.length !== 1) {
+        throw new Error(
+          `Function '${nodes.defineMetaImport.local.name}({ ... })' takes 1 argument only`
+        );
+      }
+
+      if (node.arguments[0].type !== 'ObjectExpression') {
+        throw new Error(
+          `Function '${nodes.defineMetaImport?.local.name}({ ... })' takes an object literal which satisfies Meta`
+        );
+      }
+
+      const { properties } = node.arguments[0];
+
+      state.id = getString('id', properties);
+      state.title = getString('title', properties);
+      state.tags = getTags(properties);
+
+      stop();
+    },
+  };
+
+  walk(nodes.defineMetaVar, state, visitors);
+
+  return state;
+}
+
+function getString(propertyName: string, properties: ObjectExpression['properties']) {
+  const property = lookupProperty(propertyName, properties);
+
+  if (property && property.value.type === 'Literal') {
+    const { value } = property.value;
+
+    if (value) {
+      if (typeof value === 'string') {
+        return value;
+      }
+
+      throw new Error(`'meta.${propertyName}' should be a string, found ${typeof value}`);
+    }
+  }
+}
+
+function getTags(properties: ObjectExpression['properties']) {
+  const tags = lookupProperty('tags', properties);
+
+  if (tags) {
+    const { value } = tags;
+
+    if (value.type === 'ArrayExpression') {
+      return value.elements.map((item) => {
+        if (item?.type === 'Literal') {
+          if (typeof item.value !== 'string') {
+            throw Error(`'meta.tags' should be an array of strings.`);
+          }
+
+          return item.value;
+        }
+
+        throw Error(`'meta.tags' should be an array of strings.`);
+      });
+    }
+  }
+}
+
+/**
+ * WARN: Potential issue, some of the properites might be extended by `SpreadElement`.
+ * I couldn't think of the case how it could be ever reached, if the code was already "compiled"(?).
+ * I'll leave a warning, to avoid confusion during usage, and in case it actually happens.
+ */
+function lookupProperty(name: string, properties: ObjectExpression['properties']) {
+  return properties.find((p) => {
+    if (p.type === 'SpreadElement') {
+      logger.warn(
+        `Spread operator is not supported in the 'defineMeta' literal object. Please file an issue with an use case.`
+      );
+    }
+
+    return p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === name;
+  }) as Property | undefined;
+}
diff --git a/src/parser/walkers/fragment.ts b/src/parser/walkers/fragment.ts
index 31b42b4..35eb9b6 100644
--- a/src/parser/walkers/fragment.ts
+++ b/src/parser/walkers/fragment.ts
@@ -3,17 +3,19 @@ import { type Comment, type Root, type SvelteNode } from 'svelte/compiler';
 import { walk, type Visitors } from 'zimmerframe';
 
 import { getChildrenRawSource, getStoryId, getStoryName } from './component.js';
-import { type FragmentMeta, type InstanceMeta, type StoryMeta } from '../types.js';
+import { type AddonASTNodes, type FragmentMeta, type StoryMeta } from '../types.js';
 
-/** NOTE: Fragment is the 'html' code - not the one innside `<script>` nor `<style>` */
+/**
+ * NOTE: Fragment is the 'html' code - not the one innside `<script>` nor `<style>`
+ */
 export function walkOnFragment({
   fragment,
-  rawSource,
-  addonComponentName,
+  source,
+  nodes,
 }: {
   fragment: Root['fragment'];
-  rawSource: string;
-  addonComponentName: InstanceMeta['addonComponentName'];
+  source: string;
+  nodes: AddonASTNodes;
 }): FragmentMeta {
   const state: FragmentMeta = {
     stories: {},
@@ -26,13 +28,14 @@ export function walkOnFragment({
       latestComment = node;
       next();
     },
-    Component(node, { state, next }) {
-      if (node.name === addonComponentName) {
+
+    Component(node, { state }) {
+      if (node.name === nodes.Story.name) {
         const { attributes } = node;
         const name = getStoryName(attributes);
         const childrenRawSource = getChildrenRawSource({
           node,
-          rawSource,
+          rawSource: source,
         });
         const id = getStoryId({ attributes, name, storiesIds: storiesIds });
         const description =
@@ -51,7 +54,6 @@ export function walkOnFragment({
       }
 
       latestComment = undefined;
-      next();
     },
   };
 
diff --git a/src/parser/walkers/module.ts b/src/parser/walkers/module.ts
index fc10a88..e47c3a7 100644
--- a/src/parser/walkers/module.ts
+++ b/src/parser/walkers/module.ts
@@ -1,24 +1,12 @@
-import { logger } from '@storybook/client-logger';
-import dedent from 'dedent';
-import type { ObjectExpression, Property } from 'estree';
-import type { Root, SvelteNode } from 'svelte/compiler';
+import type { Script, SvelteNode } from 'svelte/compiler';
 import { type Visitors, walk } from 'zimmerframe';
 
 import pkg from '../../../package.json' with { type: 'json' };
 
-import {
-  ADDON_COMPONENT_NAME,
-  ADDON_FN_NAME,
-  ADDON_META_VAR_NAME,
-  type ModuleMeta,
-} from '../types.js';
+import { ADDON_AST_NODES, type AddonASTNodes } from '../types.js';
 
-export function walkOnModule(module: Root['module']): ModuleMeta {
-  if (!module) {
-    throw new Error(`The story file must have a module tag ('<script context="module">').`);
-  }
-
-  const state: Partial<ModuleMeta> = {};
+export function walkOnModule(module: Script): AddonASTNodes {
+  const state: Partial<AddonASTNodes> = {};
   const visitors: Visitors<SvelteNode, typeof state> = {
     ImportDeclaration(node, { state }) {
       const { source, specifiers } = node;
@@ -35,17 +23,21 @@ export function walkOnModule(module: Root['module']): ModuleMeta {
             throw new Error(`Don't use the default/namespace import from "${pkg.name}"`);
           }
 
-          const { imported, local } = specifier;
-
-          if (imported.name === ADDON_FN_NAME) {
-            state.addonFnName = local.name;
+          if (specifier.imported.name === ADDON_AST_NODES.defineMeta) {
+            state.defineMetaImport = specifier;
           }
         }
+
+        if (!state.defineMetaImport) {
+          throw new Error(
+            `Could not find '${ADDON_AST_NODES.defineMeta}' imported from the "${pkg.name}" in the Stories file`
+          );
+        }
       }
     },
 
-    VariableDeclaration(node, { state, visit }) {
-      const { declarations, leadingComments } = node;
+    VariableDeclaration(node, { state }) {
+      const { declarations } = node;
       const declaration = declarations[0];
       const { id, init } = declaration;
 
@@ -53,140 +45,47 @@ export function walkOnModule(module: Root['module']): ModuleMeta {
         id.type === 'ObjectPattern' &&
         init?.type === 'CallExpression' &&
         init.callee.type === 'Identifier' &&
-        init.callee.name === state.addonFnName
+        init.callee.name === state.defineMetaImport?.local.name
       ) {
-        state.defineMetaVariableDeclarator = declaration;
-        visit(init, state);
-
-        if (leadingComments) {
-          state.description = dedent(leadingComments[0].value.replaceAll(/^ *\*/gm, ''));
-        }
+        state.defineMetaVar = node;
 
         for (const property of id.properties) {
           if (
             property.type === 'Property' &&
             property.key.type === 'Identifier' &&
-            property.key.name === ADDON_COMPONENT_NAME &&
+            property.key.name === ADDON_AST_NODES.Story &&
             property.value.type === 'Identifier'
           ) {
-            state.addonComponentName = property.value.name;
-          }
-
-          if (
-            property.type === 'Property' &&
-            property.key.type === 'Identifier' &&
-            property.key.name === ADDON_META_VAR_NAME &&
-            property.value.type === 'Identifier'
-          ) {
-            state.addonMetaVarName = property.value.name;
+            state.Story = property.value;
           }
         }
-      }
-    },
 
-    // Walk on `defineMeta` call called by `visit` from `VariableDeclarator`
-    CallExpression(node, { state, stop }) {
-      if (node.arguments.length !== 1) {
-        throw new Error('defineMeta takes 1 argument only');
+        if (!state.Story) {
+          throw new Error(
+            `Component 'Story' was not destructured from the '${state.defineMetaImport.local.name}({ ... })' function call`
+          );
+        }
       }
 
-      const objectExpression = node.arguments[0];
-
-      if (objectExpression.type !== 'ObjectExpression') {
-        throw new Error('defineMeta takes an object literal which satisfies Meta');
+      if (!state.defineMetaVar) {
+        throw new Error(
+          `Couldn't find the variable declarator with function call of '${state.defineMetaImport?.local.name}({ ... })' inside the module tag ('<script context="module">')`
+        );
       }
-
-      const { properties } = objectExpression;
-
-      // FIXME: Why we need them during parsing time?
-      // state.id = getStringFromMeta("id", properties);
-      // state.title = getStringFromMeta("title", properties);
-      state.tags = getTagsFromMeta(properties);
-
-      stop();
     },
   };
 
   walk(module.content, state, visitors);
 
-  if (!state.addonFnName) {
-    throw new Error(
-      `Could not find the 'import { defineComponent } from "${pkg.name}";' in the module tag ('<script context="module">')`
-    );
-  }
-
-  if (!state.addonComponentName) {
-    throw new Error(
-      `Could not find the destructured 'Story' component from ${state.addonFnName}({ ... })')`
-    );
-  }
+  const { defineMetaImport, defineMetaVar, Story } = state;
 
-  if (!state.defineMetaVariableDeclarator) {
-    throw new Error(
-      `Could not find the 'defineMeta({ ... }) call in the module tag ('<script context="module">)`
-    );
+  if (!defineMetaImport || !defineMetaVar || !Story) {
+    throw new Error('Could not extract Story or defineMeta from walking on the module tag');
   }
 
   return {
-    ...state,
-    addonFnName: state.addonFnName,
-    addonComponentName: state.addonComponentName,
-    addonMetaVarName: state.addonMetaVarName,
-    defineMetaVariableDeclarator: state.defineMetaVariableDeclarator,
+    defineMetaImport,
+    defineMetaVar,
+    Story,
   };
 }
-
-function getStringFromMeta(propertyName: string, properties: ObjectExpression['properties']) {
-  const property = lookupMetaProperty(propertyName, properties);
-
-  if (property && property.value.type === 'Literal') {
-    const { value } = property.value;
-
-    if (value) {
-      if (typeof value === 'string') {
-        return value;
-      } else {
-        throw new Error(`'meta.${propertyName}' should be a string, found ${typeof value}`);
-      }
-    }
-  }
-}
-
-/**
- * WARN: Potential issue, some of the properites might be extended by `SpreadElement`.
- * I couldn't think of the case how it could be ever reached, if the code was already "compiled"(?).
- * I'll leave a warning, to avoid confusion during usage, and in case it actually happens.
- */
-function lookupMetaProperty(name: string, properties: ObjectExpression['properties']) {
-  return properties.find((p) => {
-    if (p.type === 'SpreadElement') {
-      logger.warn(
-        `Spread operator is not supported in the 'defineMeta' literal object. Please file an issue with an use case.`
-      );
-    }
-
-    return p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === name;
-  }) as Property | undefined;
-}
-
-function getTagsFromMeta(properties: ObjectExpression['properties']) {
-  const tags = lookupMetaProperty('tags', properties);
-
-  if (tags) {
-    const { value } = tags;
-
-    if (value.type === 'ArrayExpression') {
-      return value.elements.map((item) => {
-        if (item?.type === 'Literal') {
-          if (typeof item.value !== 'string') {
-            throw Error(`meta.tags should be an array of strings.`);
-          }
-
-          return item.value;
-        } else {
-          throw Error(`'meta.tags' should be an array of strings.`);
-        }
-      });
-    }
-  }
-}
diff --git a/src/preset.ts b/src/preset.ts
index 0a08b34..8a16ed6 100644
--- a/src/preset.ts
+++ b/src/preset.ts
@@ -5,7 +5,9 @@ import type { IndexInput, IndexerOptions } from '@storybook/types';
 import { preprocess } from 'svelte/compiler';
 
 import type { StoriesFileMeta } from './parser/types.js';
+import { getAST } from './parser/ast.js';
 import { extractStories } from './parser/extract-stories.js';
+import { extractASTNodes } from './parser/extract-ast-nodes.js';
 import { loadSvelteConfig } from './presets/svelte/config-loader.js';
 
 export { viteFinal } from './presets/vite.js';
@@ -23,8 +25,7 @@ export const experimental_indexers: StorybookConfig['experimental_indexers'] = (
 
 async function createIndex(fileName: string, { makeTitle }: IndexerOptions): Promise<IndexInput[]> {
   const storiesFileMeta = await readStories(fileName);
-  const { fragment, module } = storiesFileMeta;
-  const { stories } = fragment;
+  const { defineMeta, stories } = storiesFileMeta;
 
   return Object.entries(stories).map(([storyId, storyMeta]) => {
     return {
@@ -32,25 +33,27 @@ async function createIndex(fileName: string, { makeTitle }: IndexerOptions): Pro
       importPath: fileName,
       exportName: storyId,
       name: storyMeta.name,
-      title: makeTitle(module.title),
-      tags: module.tags,
-      metaTags: module.tags,
-    };
+      title: makeTitle(defineMeta.title),
+      tags: defineMeta.tags,
+    } satisfies IndexInput;
   });
 }
 
 export async function readStories(fileName: string): Promise<StoriesFileMeta> {
-  let code = (await fs.readFile(fileName, { encoding: 'utf8' })).toString();
+  let source = (await fs.readFile(fileName, { encoding: 'utf8' })).toString();
 
   const svelteOptions = await loadSvelteConfig();
 
   if (svelteOptions && svelteOptions.preprocess) {
-    code = (
-      await preprocess(code, svelteOptions.preprocess, {
+    source = (
+      await preprocess(source, svelteOptions.preprocess, {
         filename: fileName,
       })
     ).code;
   }
 
-  return extractStories(code);
+  const { module, fragment } = getAST(source);
+  const nodes = extractASTNodes(module);
+
+  return extractStories({ nodes, fragment, source });
 }
diff --git a/src/presets/vite.ts b/src/presets/vite.ts
index 92f0850..b1e7ef5 100644
--- a/src/presets/vite.ts
+++ b/src/presets/vite.ts
@@ -1,6 +1,9 @@
 import type { StorybookConfig } from '@storybook/svelte-vite';
 import type { SvelteConfig } from '@sveltejs/vite-plugin-svelte';
 
+import preTransform from './vite/pre-transform.js';
+import postTransform from './vite/post-transform.js';
+
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
   const { plugins = [] } = config;
   const { presets } = options;
@@ -29,11 +32,8 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
     }
   }
 
-  const addonPluginPre = (await import('./vite/pre-transform.js')).default;
-  const addonPluginPost = (await import('./vite/post-transform.js')).default;
-
-  plugins.unshift(addonPluginPre(addonPluginConfig));
-  plugins.push(addonPluginPost(addonPluginConfig));
+  plugins.unshift(preTransform(addonPluginConfig));
+  plugins.push(postTransform(addonPluginConfig));
 
   return {
     ...config,
diff --git a/src/presets/vite/post-transform.ts b/src/presets/vite/post-transform.ts
index 83075c6..f93df2e 100644
--- a/src/presets/vite/post-transform.ts
+++ b/src/presets/vite/post-transform.ts
@@ -6,7 +6,9 @@ import { preprocess } from 'svelte/compiler';
 import { createFilter, type Plugin } from 'vite';
 
 import { getNameFromFilename } from '../svelte/component-name.js';
+import { getAST } from '../../parser/ast.js';
 import { extractStories } from '../../parser/extract-stories.js';
+import { extractASTNodes } from '../../parser/extract-ast-nodes.js';
 import { createAppendix } from '../../transformer/create-appendix.js';
 
 export default function plugin(svelteOptions: SvelteConfig): Plugin {
@@ -29,7 +31,6 @@ export default function plugin(svelteOptions: SvelteConfig): Plugin {
 
       let source = fs.readFileSync(id).toString();
 
-      // FIXME: Do we have to do it twice?
       if (svelteOptions && svelteOptions.preprocess) {
         const processed = await preprocess(source.toString(), svelteOptions.preprocess, {
           filename: id,
@@ -38,9 +39,15 @@ export default function plugin(svelteOptions: SvelteConfig): Plugin {
         source = processed.code;
       }
 
-      const storiesFileMeta = extractStories(source.toString());
+      const { module, fragment } = getAST(source);
+      const nodes = extractASTNodes(module);
+      const storiesFileMeta = extractStories({
+        nodes,
+        source,
+        fragment,
+      });
 
-      createAppendix({ code, storiesFileMeta, componentName });
+      createAppendix({ componentName, code, storiesFileMeta, nodes });
 
       return {
         code: code.toString(),
diff --git a/src/presets/vite/pre-transform.ts b/src/presets/vite/pre-transform.ts
index 59bb345..4f42d79 100644
--- a/src/presets/vite/pre-transform.ts
+++ b/src/presets/vite/pre-transform.ts
@@ -1,14 +1,12 @@
-import fs from 'node:fs';
-
 import type { SvelteConfig } from '@sveltejs/vite-plugin-svelte';
 import MagicString from 'magic-string';
 import { createFilter, type Plugin } from 'vite';
 
-import { extractStories } from '../../parser/extract-stories.js';
+import { extractASTNodes } from '../../parser/extract-ast-nodes.js';
+import { getAST } from '../../parser/ast.js';
 import { transformDefineMeta } from '../../transformer/define-meta.js';
-import { preprocess } from 'svelte/compiler';
 
-export default function plugin(svelteOptions: SvelteConfig): Plugin {
+export default function plugin(_svelteOptions: SvelteConfig): Plugin {
   const include = /\.stories\.svelte$/;
   const filter = createFilter(include);
 
@@ -16,22 +14,13 @@ export default function plugin(svelteOptions: SvelteConfig): Plugin {
     name: 'storybook:addon-svelte-csf-plugin-pre',
     enforce: 'pre',
     async transform(code_, id) {
-      if (!filter(id)) return undefined;
-
-      let source = fs.readFileSync(id).toString();
-
-      // FIXME: Do we have to do it twice?
-      if (svelteOptions && svelteOptions.preprocess) {
-        const processed = await preprocess(source.toString(), svelteOptions.preprocess, {
-          filename: id,
-        });
+      if (!filter(id)) return;
 
-        source = processed.code;
-      }
-      const storiesFileMeta = extractStories(source);
+      const { module } = getAST(code_);
+      const nodes = extractASTNodes(module);
       const code = new MagicString(code_);
 
-      transformDefineMeta({ code, storiesFileMeta });
+      transformDefineMeta({ code, nodes });
 
       return {
         code: code.toString(),
diff --git a/src/transformer/create-appendix.ts b/src/transformer/create-appendix.ts
index 0c923f5..231c381 100644
--- a/src/transformer/create-appendix.ts
+++ b/src/transformer/create-appendix.ts
@@ -2,23 +2,25 @@ import url from 'node:url';
 
 import MagicString from 'magic-string';
 
-import type { StoriesFileMeta } from 'src/parser/types.js';
+import type { AddonASTNodes, StoriesFileMeta } from 'src/parser/types.js';
 
 const parserModulePath = url
   .fileURLToPath(new URL('../../dist/parser/collect-stories.js', import.meta.url))
   .replace(/\\/g, '\\\\'); // For Windows paths
 
 export function createAppendix({
-  code,
   componentName,
+  code,
   storiesFileMeta,
+  nodes,
 }: {
-  code: MagicString;
   componentName: string;
+  code: MagicString;
   storiesFileMeta: StoriesFileMeta;
+  nodes: AddonASTNodes;
 }) {
-  const { module, fragment } = storiesFileMeta;
-  const { stories } = fragment;
+  const { stories } = storiesFileMeta;
+  const { defineMetaVar } = nodes;
   const parsedStoriesVariable = '__parsed';
   const exportsOrderVariable = '__exports';
 
@@ -41,7 +43,7 @@ export function createAppendix({
   const appendix = [
     "", // NOTE: Adds a new line at the end of the code
     `import parser from '${parserModulePath}';`,
-    `const ${parsedStoriesVariable} = parser(${componentName}, ${JSON.stringify(storiesFileMeta)}, ${module.addonMetaVarName ?? "meta"});`,
+    `const ${parsedStoriesVariable} = parser(${componentName}, ${JSON.stringify(storiesFileMeta)}, ${findMetaPropertyName(defineMetaVar) ?? "meta"});`,
     `export default ${parsedStoriesVariable}.meta;`,
     `export const ${exportsOrderVariable} = ${JSON.stringify(exportsOrder)};`,
     storiesExports,
@@ -56,3 +58,20 @@ export function createAppendix({
 function sanitizeStoryId(id: string) {
   return id.replace(/\s|-/g, '_');
 }
+
+function findMetaPropertyName(defineMetaVar: AddonASTNodes['defineMetaVar']) {
+  const { declarations } = defineMetaVar;
+  const { id } = declarations[0];
+
+  if (id.type === 'ObjectPattern') {
+    const { properties } = id;
+
+    const property = properties.find(
+      (p) => p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === 'meta'
+    );
+
+    if (property && property.type === 'Property' && property.value.type === 'Identifier') {
+      return property.value.name;
+    }
+  }
+}
diff --git a/src/transformer/define-meta.ts b/src/transformer/define-meta.ts
index c8b55a8..25c50fe 100644
--- a/src/transformer/define-meta.ts
+++ b/src/transformer/define-meta.ts
@@ -1,20 +1,14 @@
-import type MagicString from 'magic-string';
 import type { AssignmentProperty, Program } from 'estree';
 import { toJs } from 'estree-util-to-js';
-
-import { type StoriesFileMeta } from '../parser/types.js';
+import type MagicString from 'magic-string';
 import type { BaseNode } from 'svelte/compiler';
 
-export function transformDefineMeta({
-  code,
-  storiesFileMeta,
-}: {
-  code: MagicString;
-  storiesFileMeta: StoriesFileMeta;
-}) {
-  const { module } = storiesFileMeta;
-  const { defineMetaVariableDeclarator } = module;
-  const { id } = defineMetaVariableDeclarator;
+import { type AddonASTNodes } from '../parser/types.js';
+
+export function transformDefineMeta({ code, nodes }: { code: MagicString; nodes: AddonASTNodes }) {
+  const { defineMetaVar } = nodes;
+  const { declarations } = defineMetaVar;
+  const { id } = declarations[0];
 
   if (id.type !== 'ObjectPattern') {
     throw new Error(
@@ -45,9 +39,9 @@ export function transformDefineMeta({
 
     id.properties.push(metaProperty);
 
-    const { start, end } = defineMetaVariableDeclarator as unknown as BaseNode;
+    const { start, end } = defineMetaVar as unknown as BaseNode;
 
-    code.update(start, end, toJs(defineMetaVariableDeclarator as unknown as Program).value);
+    code.update(start, end, toJs(defineMetaVar as unknown as Program).value);
   }
 
   return code;