Docs: Vitest plugin adjustments

docs/_snippets/addon-vitest-set-project-annotations-simple.md

@@ -1,22 +1,29 @@
-```tsx filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
+```ts filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import { setProjectAnnotations } from '@storybook/your-framework';
 import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 ```
 
-```tsx filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
+```ts filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import { setProjectAnnotations } from '@storybook/your-framework';
 import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 ```
 
-```tsx filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
+```ts filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
 import { setProjectAnnotations } from '@storybook/vue3-vite';
 import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 ```
+
+```ts filename=".storybook/vitest.setup.ts" renderer="web-components" language="ts"
+import { setProjectAnnotations } from '@storybook/web-components-vite';
+import * as previewAnnotations from './preview';
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+```

docs/_snippets/tags-remove-in-story.md

@@ -50,21 +50,6 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
-import { Button } from './Button';
-
-export default {
-  component: Button,
-  // 👇 Applies to all stories in this file
-  tags: ['stable'],
-};
-
-export const ExperimentalFeatureStory = {
-  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
-  tags: ['!stable', 'experimental'],
-};
-```
-
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -103,27 +88,6 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  // 👇 Applies to all stories in this file
-  tags: ['stable'],
-} satisfies Meta<typeof Button>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ExperimentalFeatureStory: Story = {
-  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
-  tags: ['!stable', 'experimental'],
-};
-```
-
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
@@ -157,6 +121,27 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, etc.
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+};
+```
+
 ```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
@@ -174,10 +159,24 @@ export const ExperimentalFeatureStory = meta.story({
 });
 ```
 
-<!-- JS snippets still needed while providing both CSF 3 & Next -->
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export const ExperimentalFeatureStory = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+};
+```
 
 ```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
@@ -191,3 +190,38 @@ export const ExperimentalFeatureStory = meta.story({
   tags: ['!stable', 'experimental'],
 });
 ```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import Button from './Button.vue';
+
+const meta = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+};
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export const ExperimentalFeatureStory = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+};
+```

docs/_snippets/vite-includeStorybookNextjsPlugin.md

@@ -1,6 +1,6 @@
 ```ts filename="vitest.config.ts" renderer="react" language="ts"
-import { defineConfig } from "vite";
-import { storybookNextJsPlugin } from '@storybook/nextjs-vite/vite-plugin'
+import { defineConfig } from 'vite';
+import { storybookNextJsPlugin } from '@storybook/nextjs-vite/vite-plugin';
 
 export default defineConfig({
   // only necessary when not using @storybook/addon-vitest, otherwise the plugin is loaded automatically