feat: allow comments before main <Stories> tag

examples/vite/src/writing-stories/1.default-export.stories.ts

@@ -0,0 +1,12 @@
+import Button from '../components/Button.vue'
+
+import type { Meta } from '@storybook/vue3'
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as Meta<typeof Button>

examples/vite/src/writing-stories/1.default-export.stories.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Button from '../components/Button.vue'
+</script>
+<template>
+  <!--
+        👇 The title prop is optional.
+        See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+        to learn how to generate automatic titles
+    -->
+  <Stories title="Button"> </Stories>
+</template>

examples/vite/src/writing-stories/README.md

@@ -0,0 +1 @@
+Contains the stories of https://storybook.js.org/docs/vue/writing-stories/introduction in both the classical `vue-ts` and the new `vue-native` format.

src/core/transform.ts

@@ -93,9 +93,13 @@ function transformTemplate(content: string, resolvedScript?: SFCScriptBlock) {
     }, */
   })
 
-  const roots = template.ast?.children ?? []
-  if (roots.length !== 1)
+  const roots =
+    template.ast?.children.filter(
+      (node) => node.type === 1 /* NodeTypes.ELEMENT */
+    ) ?? []
+  if (roots.length !== 1) {
     throw new Error('Expected exactly one <Stories> element as root.')
+  }
 
   const root = roots[0]
   if (root.type !== 1 || root.tag !== 'Stories')

test/index.test.ts

@@ -48,6 +48,26 @@ describe('transform', () => {
       '"Story is missing a title"'
     )
   })
+  it('handles comment before stories tag', () => {
+    const code =
+      '<template><!-- comment --><Stories><Story title="Primary">hello</Story></Stories></template>'
+    const result = transform(code)
+    expect(result).toMatchInlineSnapshot(`
+      "const _sfc_main = {}
+      export default {
+          
+          //component: MyComponent,
+          //decorators: [ ... ],
+          //parameters: { ... }
+          }
+          
+          
+      function renderPrimary(_ctx, _cache) {
+        return \\"hello\\"
+      }
+          export const Primary = () => Object.assign({render: renderPrimary}, _sfc_main)"
+    `)
+  })
   it('handles multiple stories', () => {
     const code = `
       <template>