Merge branch 'next' into storybook-env-vars-in-vitest

storybookjs · Dec 4, 2024 · 4baa486 · 4baa486
2 parents 79a1a2f + 30ca1f4
commit 4baa486
Show file tree

Hide file tree

Showing 157 changed files with 826 additions and 439 deletions.
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,10 @@
+## 8.5.0-alpha.16
+
+- Core: Avoid getting stuck in locked state - [#29768](https://github.com/storybookjs/storybook/pull/29768), thanks @ghengeveld!
+- Core: Evaluate main config when checking 'whats new' notifications - [#29622](https://github.com/storybookjs/storybook/pull/29622), thanks @yannbf!
+- Vite: Don't prefix story import with `@fs` - [#28941](https://github.com/storybookjs/storybook/pull/28941), thanks @tobiasdiez!
+- Vite: Import preview runtime as ordinary module - [#29172](https://github.com/storybookjs/storybook/pull/29172), thanks @tobiasdiez!
+
 ## 8.5.0-alpha.15
 
 - Addon Test: Context menu UI - [#29727](https://github.com/storybookjs/storybook/pull/29727), thanks @ghengeveld!

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

diff --git a/code/addons/test/package.json b/code/addons/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html
@@ -64,7 +64,6 @@
     <!-- [BODY HTML SNIPPET HERE] -->
     <div id="storybook-root"></div>
     <div id="storybook-docs"></div>
-    <script type="module" src="./sb-preview/runtime.js"></script>
     <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
   </body>
 </html>
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts
@@ -24,11 +24,7 @@ export async function build(options: Options) {
       outDir: options.outputDir,
       emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
       rollupOptions: {
-        external: [
-          // Do not try to bundle the Storybook runtime, it is copied into the output dir after the build.
-          './sb-preview/runtime.js',
-          /\.\/sb-common-assets\/.*\.woff2/,
-        ],
+        external: [/\.\/sb-common-assets\/.*\.woff2/],
       },
       ...(options.test
         ? {

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -67,10 +67,15 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
    * @todo Inline variable and remove `noinspection`
    */
   const code = `
-  import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
+  import { setup } from '@storybook/core/preview/runtime';
   import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
+
+  setup();
+ 
+  import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
   import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';
   
+  
     ${getPreviewAnnotationsFunction}
 
     window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);

diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts
@@ -1,6 +1,5 @@
 // noinspection JSUnusedGlobalSymbols
-import { cp, readFile } from 'node:fs/promises';
-import { join, parse } from 'node:path';
+import { readFile } from 'node:fs/promises';
 
 import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
 import type { Middleware, Options } from 'storybook/internal/types';
@@ -61,15 +60,6 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  const previewResolvedDir = join(corePath, 'dist/preview');
-  router.use(
-    '/sb-preview',
-    sirv(previewResolvedDir, {
-      maxAge: 300000,
-      dev: true,
-      immutable: true,
-    })
-  );
   router.use(iframeMiddleware(options as Options, server));
   router.use(server.middlewares);
 
@@ -85,22 +75,5 @@ export const start: ViteBuilder['start'] = async ({
 };
 
 export const build: ViteBuilder['build'] = async ({ options }) => {
-  const viteCompilation = viteBuild(options as Options);
-
-  const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
-  const previewFiles = cp(previewResolvedDir, previewDirTarget, {
-    filter: (src) => {
-      const { ext } = parse(src);
-      if (ext) {
-        return ext === '.js';
-      }
-      return true;
-    },
-    recursive: true,
-  });
-
-  const [out] = await Promise.all([viteCompilation, previewFiles]);
-
-  return out;
+  return viteBuild(options as Options);
 };
diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts
@@ -14,8 +14,6 @@ export async function createViteServer(options: Options, devServer: Server) {
 
   const config = {
     ...commonCfg,
-    // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256
-    assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']),
     // Set up dev server
     server: {
       middlewareMode: true,

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

diff --git a/code/core/package.json b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.5.0-alpha.15",
+  "version": "8.5.0-alpha.16",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -167,6 +167,12 @@
       "import": "./dist/cli/bin/index.js",
       "require": "./dist/cli/bin/index.cjs"
     },
+    "./preview/runtime": {
+      "import": "./dist/preview/runtime.js"
+    },
+    "./manager/globals-runtime": {
+      "import": "./dist/manager/globals-runtime.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.cjs",
@@ -192,15 +198,6 @@
       "core-server": [
         "./dist/core-server/index.d.ts"
       ],
-      "core-server/presets/common-preset": [
-        "./dist/core-server/presets/common-preset.d.ts"
-      ],
-      "core-server/presets/common-manager": [
-        "./dist/core-server/presets/common-manager.d.ts"
-      ],
-      "core-server/presets/common-override-preset": [
-        "./dist/core-server/presets/common-override-preset.d.ts"
-      ],
       "core-events": [
         "./dist/core-events/index.d.ts"
       ],

diff --git a/code/core/scripts/helpers/generatePackageJsonFile.ts b/code/core/scripts/helpers/generatePackageJsonFile.ts
@@ -58,6 +58,10 @@ export async function generatePackageJsonFile(entries: ReturnType<typeof getEntr
     '*': {
       '*': ['./dist/index.d.ts'],
       ...entries.reduce<Record<string, string[]>>((acc, entry) => {
+        if (!entry.dts) {
+          return acc;
+        }
+
         let main = slash(relative(cwd, entry.file).replace('src', 'dist'));
         if (main === './dist/index.ts' || main === './dist/index.tsx') {
           main = '.';

diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts
@@ -59,7 +59,7 @@ async function run() {
   console.log(isWatch ? 'Watching...' : 'Bundling...');
 
   const files = measure(generateSourceFiles);
-  const packageJson = measure(() => generatePackageJsonFile(entries));
+  const packageJson = measure(() => generatePackageJsonFile(entries.concat(bundles)));
   const dist = files.then(() => measure(generateDistFiles));
   const types = files.then(() =>
     measure(async () => {