Merge branch 'next' into jsmike/angular-sourceDecorator

CHANGELOG.prerelease.md

@@ -1,3 +1,8 @@
+## 8.3.0-beta.4
+
+- Test: Rename vitest plugin entrypoint - [#29067](https://github.com/storybookjs/storybook/pull/29067), thanks @yannbf!
+- UI: Fix sidebar not wrapping - [#29055](https://github.com/storybookjs/storybook/pull/29055), thanks @JReinhold!
+
 ## 8.3.0-beta.3
 
 - Addon Test: Improve messages and post install script handling - [#29036](https://github.com/storybookjs/storybook/pull/29036), thanks @yannbf!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.3.0-beta.3",
+  "version": "8.3.0-beta.4",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -2,7 +2,7 @@ import { getFrameworkName, loadPreviewOrConfigFile } from 'storybook/internal/co
 import type { Options, PreviewAnnotation } from 'storybook/internal/types';
 
 import { processPreviewAnnotation } from './utils/process-preview-annotation';
-import { virtualAddonSetupFile, virtualStoriesFile } from './virtual-file-names';
+import { SB_VIRTUAL_FILES, getResolvedVirtualModuleId } from './virtual-file-names';
 
 export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
   const { presets, configDir } = options;
@@ -45,7 +45,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
 
     return `
     if (import.meta.hot) {
-      import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
+      import.meta.hot.accept('${getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)}', (newModule) => {
       // importFn has changed so we need to patch the new one in
       window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });
@@ -68,8 +68,8 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
    */
   const code = `
   import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
-  import '${virtualAddonSetupFile}';
-  import { importFn } from '${virtualStoriesFile}';
+  import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
+  import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';
   
     ${getPreviewAnnotationsFunction}
 

code/builders/builder-vite/src/plugins/code-generator-plugin.ts

@@ -8,12 +8,7 @@ import { generateImportFnScriptCode } from '../codegen-importfn-script';
 import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
 import { generateAddonSetupCode } from '../codegen-set-addon-channel';
 import { transformIframeHtml } from '../transform-iframe-html';
-import {
-  virtualAddonSetupFile,
-  virtualFileId,
-  virtualPreviewFile,
-  virtualStoriesFile,
-} from '../virtual-file-names';
+import { SB_VIRTUAL_FILES, getResolvedVirtualModuleId } from '../virtual-file-names';
 
 export function codeGeneratorPlugin(options: Options): Plugin {
   const iframePath = require.resolve('@storybook/builder-vite/input/iframe.html');
@@ -28,11 +23,15 @@ export function codeGeneratorPlugin(options: Options): Plugin {
       // invalidate the whole vite-app.js script on every file change.
       // (this might be a little too aggressive?)
       server.watcher.on('change', () => {
-        const appModule = server.moduleGraph.getModuleById(virtualFileId);
+        const appModule = server.moduleGraph.getModuleById(
+          getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_APP_FILE)
+        );
         if (appModule) {
           server.moduleGraph.invalidateModule(appModule);
         }
-        const storiesModule = server.moduleGraph.getModuleById(virtualStoriesFile);
+        const storiesModule = server.moduleGraph.getModuleById(
+          getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)
+        );
         if (storiesModule) {
           server.moduleGraph.invalidateModule(storiesModule);
         }
@@ -45,7 +44,7 @@ export function codeGeneratorPlugin(options: Options): Plugin {
         // TODO maybe use the stories declaration in main
         if (/\.stories\.([tj])sx?$/.test(path) || /\.mdx$/.test(path)) {
           // We need to emit a change event to trigger HMR
-          server.watcher.emit('change', virtualStoriesFile);
+          server.watcher.emit('change', SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE);
         }
       });
     },
@@ -69,34 +68,34 @@ export function codeGeneratorPlugin(options: Options): Plugin {
       iframeId = `${config.root}/iframe.html`;
     },
     resolveId(source) {
-      if (source === virtualFileId) {
-        return `${virtualFileId}`;
+      if (source === SB_VIRTUAL_FILES.VIRTUAL_APP_FILE) {
+        return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_APP_FILE);
       }
       if (source === iframePath) {
         return iframeId;
       }
-      if (source === virtualStoriesFile) {
-        return `${virtualStoriesFile}`;
+      if (source === SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE) {
+        return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE);
       }
-      if (source === virtualPreviewFile) {
-        return virtualPreviewFile;
+      if (source === SB_VIRTUAL_FILES.VIRTUAL_PREVIEW_FILE) {
+        return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_PREVIEW_FILE);
       }
-      if (source === virtualAddonSetupFile) {
-        return `${virtualAddonSetupFile}`;
+      if (source === SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE) {
+        return getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE);
       }
 
       return undefined;
     },
     async load(id, config) {
-      if (id === `${virtualStoriesFile}`) {
+      if (id === getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)) {
         return generateImportFnScriptCode(options);
       }
 
-      if (id === `${virtualAddonSetupFile}`) {
+      if (id === getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE)) {
         return generateAddonSetupCode();
       }
 
-      if (id === `${virtualFileId}`) {
+      if (id === getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_APP_FILE)) {
         return generateModernIframeScriptCode(options, projectRoot);
       }
 

code/builders/builder-vite/src/plugins/external-globals-plugin.test.ts

@@ -12,6 +12,22 @@ const cases = [
     input: `import { Rain, Jour as Day, Nuit as Night, Sun } from "${packageName}"`,
     output: `const { Rain, Jour: Day, Nuit: Night, Sun } = ${globals[packageName]}`,
   },
+  {
+    globals,
+    packageName,
+    input: `import {
+      Rain,
+      Jour as Day,
+      Nuit as Night,
+      Sun
+    } from "${packageName}"`,
+    output: `const {
+      Rain,
+      Jour: Day,
+      Nuit: Night,
+      Sun
+    } = ${globals[packageName]}`,
+  },
   {
     globals,
     packageName,

code/builders/builder-vite/src/plugins/external-globals-plugin.ts

@@ -91,10 +91,7 @@ export async function externalGlobalsPlugin(externals: Record<string, string>) {
 
       return {
         code: src.toString(),
-        map: src.generateMap({
-          source: id,
-          hires: true,
-        }),
+        map: null,
       };
     },
   } satisfies Plugin;