Merge pull request #29766 from storybookjs/version-patch-from-8.4.6

Release: Patch 8.4.7

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.4.7
+
+- Telemetry: Improve anonymous id calculation - [#29736](https://github.com/storybookjs/storybook/pull/29736), thanks @tmeasday!
+- Vue: Properly resolve Vite plugin - [#29795](https://github.com/storybookjs/storybook/pull/29795), thanks @tobiasdiez!
+
 ## 8.4.6
 
 - Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!

code/core/src/telemetry/anonymous-id.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { normalizeGitUrl } from './anonymous-id';
+import { normalizeGitUrl, unhashedProjectId } from './anonymous-id';
 
 describe('normalizeGitUrl', () => {
   it('trims off https://', () => {
@@ -69,6 +69,12 @@ describe('normalizeGitUrl', () => {
     );
   });
 
+  it('adds .git if missing', () => {
+    expect(normalizeGitUrl('https://github.com/storybookjs/storybook')).toEqual(
+      'github.com/storybookjs/storybook.git'
+    );
+  });
+
   it('trims off #hash', () => {
     expect(normalizeGitUrl('https://github.com/storybookjs/storybook.git#next')).toEqual(
       'github.com/storybookjs/storybook.git'
@@ -85,3 +91,17 @@ describe('normalizeGitUrl', () => {
     );
   });
 });
+
+describe('unhashedProjectId', () => {
+  it('does not touch unix paths', () => {
+    expect(
+      unhashedProjectId('https://github.com/storybookjs/storybook.git\n', 'path/to/storybook')
+    ).toBe('github.com/storybookjs/storybook.gitpath/to/storybook');
+  });
+
+  it('normalizes windows paths', () => {
+    expect(
+      unhashedProjectId('https://github.com/storybookjs/storybook.git\n', 'path\\to\\storybook')
+    ).toBe('github.com/storybookjs/storybook.gitpath/to/storybook');
+  });
+});

code/core/src/telemetry/anonymous-id.ts

@@ -3,6 +3,7 @@ import { relative } from 'node:path';
 import { getProjectRoot } from '@storybook/core/common';
 
 import { execSync } from 'child_process';
+import slash from 'slash';
 
 import { oneWayHash } from './one-way-hash';
 
@@ -16,7 +17,18 @@ export function normalizeGitUrl(rawUrl: string) {
   // Now strip off scheme
   const urlWithoutScheme = urlWithoutUser.replace(/^.*\/\//, '');
 
-  return urlWithoutScheme.replace(':', '/');
+  // Ensure the URL ends in `.git`
+  const urlWithExtension = urlWithoutScheme.endsWith('.git')
+    ? urlWithoutScheme
+    : `${urlWithoutScheme}.git`;
+
+  return urlWithExtension.replace(':', '/');
+}
+
+// we use a combination of remoteUrl and working directory
+// to separate multiple storybooks from the same project (e.g. monorepo)
+export function unhashedProjectId(remoteUrl: string, projectRootPath: string) {
+  return `${normalizeGitUrl(remoteUrl)}${slash(projectRootPath)}`;
 }
 
 let anonymousProjectId: string;
@@ -25,7 +37,6 @@ export const getAnonymousProjectId = () => {
     return anonymousProjectId;
   }
 
-  let unhashedProjectId;
   try {
     const projectRoot = getProjectRoot();
 
@@ -36,11 +47,7 @@ export const getAnonymousProjectId = () => {
       stdio: `pipe`,
     });
 
-    // we use a combination of remoteUrl and working directory
-    // to separate multiple storybooks from the same project (e.g. monorepo)
-    unhashedProjectId = `${normalizeGitUrl(String(originBuffer))}${projectRootPath}`;
-
-    anonymousProjectId = oneWayHash(unhashedProjectId);
+    anonymousProjectId = oneWayHash(unhashedProjectId(String(originBuffer), projectRootPath));
   } catch (_) {
     //
   }

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

@@ -3,7 +3,7 @@ import { dirname, join, parse, relative, resolve } from 'node:path';
 
 import findPackageJson from 'find-package-json';
 import MagicString from 'magic-string';
-import type { PluginOption } from 'vite';
+import type { Plugin } from 'vite';
 import {
   type ComponentMeta,
   type MetaCheckerOptions,
@@ -21,7 +21,7 @@ type MetaSource = {
 } & ComponentMeta &
   MetaCheckerOptions['schema'];
 
-export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<PluginOption> {
+export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
   // exclude stories, virtual modules and storybook internals

code/frameworks/vue3-vite/src/plugins/vue-docgen.ts

@@ -1,8 +1,8 @@
 import MagicString from 'magic-string';
-import type { PluginOption } from 'vite';
+import type { Plugin } from 'vite';
 import { parse } from 'vue-docgen-api';
 
-export async function vueDocgen(): Promise<PluginOption> {
+export async function vueDocgen(): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
   const include = /\.(vue)$/;

code/frameworks/vue3-vite/src/plugins/vue-template.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from 'vite';
 
-export async function templateCompilation() {
+export async function templateCompilation(): Promise<Plugin> {
   return {
     name: 'storybook:vue-template-compilation',
     config: () => ({

code/frameworks/vue3-vite/src/preset.ts

@@ -2,7 +2,7 @@ import { dirname, join } from 'node:path';
 
 import type { PresetProperty } from 'storybook/internal/types';
 
-import type { PluginOption } from 'vite';
+import type { Plugin } from 'vite';
 
 import { vueComponentMeta } from './plugins/vue-component-meta';
 import { vueDocgen } from './plugins/vue-docgen';
@@ -18,7 +18,7 @@ export const core: PresetProperty<'core'> = {
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
-  const plugins: PluginOption[] = [templateCompilation()];
+  const plugins: Plugin[] = [await templateCompilation()];
 
   const framework = await options.presets.apply('framework');
   const frameworkOptions: FrameworkOptions =

code/frameworks/vue3-vite/src/vite-plugin.ts

@@ -1,5 +1,7 @@
+import type { Plugin } from 'vite';
+
 import { templateCompilation } from './plugins/vue-template';
 
-export const storybookVuePlugin = () => {
+export const storybookVuePlugin = (): Promise<Plugin>[] => {
   return [templateCompilation()];
 };

code/package.json

@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.4.7"
 }

docs/_snippets/angular-add-framework.md

@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-

docs/_snippets/angular-project-compodoc-config.md

@@ -21,10 +21,10 @@
               "-e",
               "json",
               "-d",
-              "." // Add this line to introspect the relevant files starting from the root directory of your project.
+              ".", // Add this line to introspect the relevant files starting from the root directory of your project.
             ],
-            "port": 6006
-          }
+            "port": 6006,
+          },
         },
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
@@ -36,13 +36,13 @@
               "-e",
               "json",
               "-d",
-              "." // Add this line to introspect the relevant files starting from the root directory of your project.
+              ".", // Add this line to introspect the relevant files starting from the root directory of your project.
             ],
-            "outputDir": "storybook-static"
-          }
-        }
-      }
-    }
-  }
+            "outputDir": "storybook-static",
+          },
+        },
+      },
+    },
+  },
 }
 ```

docs/_snippets/before-each-in-meta-mock-date.md

@@ -173,4 +173,3 @@ export const Default: Story = {
   },
 };
 ```
-

docs/_snippets/button-story-argtypes-with-subcategories.md

@@ -275,4 +275,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-

docs/_snippets/checkbox-story-grouped.md

@@ -81,4 +81,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-

docs/_snippets/checkbox-story.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas, Meta } from '@storybook/blocks';
 
@@ -14,6 +15,7 @@ Use checkboxes to select one or more options from a list of choices.
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 
@@ -30,6 +32,7 @@ Use checkboxes to select one or more options from a list of choices.
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 

docs/_snippets/chromatic-install.md

@@ -9,4 +9,3 @@ pnpm add --save-dev chromatic
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev chromatic
 ```
-

docs/_snippets/component-story-custom-args-icons.md

@@ -34,4 +34,3 @@ const Template: Story = (args) => {
   };
 };
 ```
-

docs/_snippets/csf-3-example-title.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
 import { Meta, Story } from '@storybook/blocks';
 

docs/_snippets/custom-docs-page.md

@@ -14,9 +14,8 @@ export function CustomDocumentationComponent() {
 }
 ```
 
-```md renderer="common" language="mdx"
-{/* Custom-MDX-Documentation.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Custom-MDX-Documentation.mdx" renderer="common" language="mdx"
 # Replacing DocsPage with custom `MDX` content
 
 This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/writing-docs/docs-page#replacing-docspage).
@@ -76,6 +75,7 @@ If you didn't include the title in the story's default export, use this approach
 
 <Story id="your-directory-button--small" />
 ```
+
 ```ts filename="CustomDocumentationComponent.ts|tsx" renderer="common" language="ts" tabTitle="ts-component"
 export const CustomDocumentationComponent: React.FC = () => {
   return (
@@ -89,4 +89,3 @@ export const CustomDocumentationComponent: React.FC = () => {
   );
 };
 ```
-

docs/_snippets/decorator-parameterized-in-preview.md

@@ -38,11 +38,15 @@ export default {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -68,11 +72,15 @@ const preview: Preview = {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -96,11 +104,15 @@ export default {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -124,11 +136,15 @@ const preview: Preview = {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -188,4 +204,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-