Release: Prerelease 8.0.0-alpha.1

.circleci/config.yml

@@ -504,27 +504,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - build
       - build-sandboxes:
-          parallelism: 14
+          parallelism: 13
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 11
+          parallelism: 10
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - bench:
@@ -560,27 +560,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - bench:
@@ -614,30 +614,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 30
+          parallelism: 29
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 30
+          parallelism: 29
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

CHANGELOG.prerelease.md

@@ -1,3 +1,30 @@
+## 8.0.0-alpha.1
+
+- Angular: Drop v14.x support - [#25101](https://github.com/storybookjs/storybook/pull/25101), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Angular: Fix CSF Plugin - [#25098](https://github.com/storybookjs/storybook/pull/25098), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Build: Fix Angular sandbox - [#23896](https://github.com/storybookjs/storybook/pull/23896), thanks [@Marklb](https://github.com/Marklb)!
+- CLI: Improve dependency metadata detection in storybook doctor - [#25037](https://github.com/storybookjs/storybook/pull/25037), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Point the update-notice to the changelog in the suggested version - [#19911](https://github.com/storybookjs/storybook/pull/19911), thanks [@cprecioso](https://github.com/cprecioso)!
+- CLI: Typescript strict mode - [#22254](https://github.com/storybookjs/storybook/pull/22254), thanks [@0916dhkim](https://github.com/0916dhkim)!
+- CSF: Autotitle fix multiple dots and handle stories.js - [#21840](https://github.com/storybookjs/storybook/pull/21840), thanks [@agriffis](https://github.com/agriffis)!
+- Docs: Use encodeURIComponent to encode story name - [#25062](https://github.com/storybookjs/storybook/pull/25062), thanks [@xyy94813](https://github.com/xyy94813)!
+- Next.js: Add next/font/local declarations support - [#24983](https://github.com/storybookjs/storybook/pull/24983), thanks [@MauricioRobayo](https://github.com/MauricioRobayo)!
+- Next.js: Drop Next.js < v13.5 support - [#25104](https://github.com/storybookjs/storybook/pull/25104), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Fix AppRouterProvider usage - [#25032](https://github.com/storybookjs/storybook/pull/25032), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Fix next/font/local usage in babel mode - [#25045](https://github.com/storybookjs/storybook/pull/25045), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Update validateData function for next/font compatibility - [#25061](https://github.com/storybookjs/storybook/pull/25061), thanks [@kkirby](https://github.com/kkirby)!
+- NextJS: Add experimental RSC support - [#25091](https://github.com/storybookjs/storybook/pull/25091), thanks [@shilman](https://github.com/shilman)!
+- React-Docgen: Make error-handling more gentle - [#25055](https://github.com/storybookjs/storybook/pull/25055), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- React: Change `StoryFnReactReturnType` to `JSX.Element` - [#23204](https://github.com/storybookjs/storybook/pull/23204), thanks [@chakAs3](https://github.com/chakAs3)!
+- React: Set `react-docgen` to default TS docgen - [#24165](https://github.com/storybookjs/storybook/pull/24165), thanks [@shilman](https://github.com/shilman)!
+- Svelte: Support v5 prereleases - [#24889](https://github.com/storybookjs/storybook/pull/24889), thanks [@allozaur](https://github.com/allozaur)!
+- SvelteKit: Fix HMR not working - [#25031](https://github.com/storybookjs/storybook/pull/25031), thanks [@JReinhold](https://github.com/JReinhold)!
+- TypeScript: Migrate `@storybook/docs-tools` to strict TS - [#22567](https://github.com/storybookjs/storybook/pull/22567), thanks [@efrenaragon96](https://github.com/efrenaragon96)!
+- UI: Add stricter types to the language property of the SyntaxHighlighter - [#22790](https://github.com/storybookjs/storybook/pull/22790), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Viewport: Fix viewport dts files - [#25107](https://github.com/storybookjs/storybook/pull/25107), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Vue: Remove deprecated vue packages from next - [#25108](https://github.com/storybookjs/storybook/pull/25108), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Webpack: Fix exclude regex in react-docgen-loader - [#25030](https://github.com/storybookjs/storybook/pull/25030), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 8.0.0-alpha.0
 
 - Addon Viewport: Expose types for user parameter validation - [#24896](https://github.com/storybookjs/storybook/pull/24896), thanks [@piratetaco](https://github.com/piratetaco)!

README.md

@@ -131,21 +131,21 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [measure](code/addons/measure/)                                           | Visually inspect the layout and box model within the Storybook UI          |
 | [outline](code/addons/outline/)                                           | Visually debug the CSS layout and alignment within the Storybook UI        |
 | [query params](https://github.com/storybookjs/addon-queryparams)          | Mock query params                                                          |
-| [storyshots](code/addons/storyshots-core/)                                | Snapshot testing for components in Storybook                               |
 | [storysource](code/addons/storysource/)                                   | View the code of your stories within the Storybook UI                      |
 | [viewport](code/addons/viewport/)                                         | Change display sizes and layouts for responsive components using Storybook |
 
 See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
 ### Deprecated Addons
 
-| Addons                                                                             |                                                            |
-| ---------------------------------------------------------------------------------- | ---------------------------------------------------------- |
-| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/)             | Addon for driving your components under dynamic contexts   |
-| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info)   | Annotate stories with extra component usage information    |
-| [knobs](https://github.com/storybookjs/addon-knobs)                                | Interactively edit component prop data in the Storybook UI |
-| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes                      |
-| [options](https://www.npmjs.com/package/@storybook/addon-options)                  | Customize the Storybook UI in code                         |
+| Addons                                                                                       |                                                            |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/)                       | Addon for driving your components under dynamic contexts   |
+| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info)             | Annotate stories with extra component usage information    |
+| [knobs](https://github.com/storybookjs/addon-knobs)                                          | Interactively edit component prop data in the Storybook UI |
+| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes)           | Annotate Storybook stories with notes                      |
+| [options](https://www.npmjs.com/package/@storybook/addon-options)                            | Customize the Storybook UI in code                         |
+| [storyshots](https://github.com/storybookjs/storybook/tree/main/code/addons/storyshots-core) | Snapshot testing for components in Storybook               |
 
 To continue improving your experience, we have to eventually deprecate certain addons in favor of new and better tools.
 

code/addons/essentials/package.json

@@ -76,7 +76,6 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/vue": "workspace:*",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

code/e2e-tests/addon-actions.spec.ts

@@ -3,9 +3,16 @@ import process from 'process';
 import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-actions', () => {
   test('should trigger an action', async ({ page }) => {
+    // eslint-disable-next-line jest/no-disabled-tests
+    test.skip(
+      // eslint-disable-next-line jest/valid-title
+      templateName.includes('svelte') && templateName.includes('prerelease'),
+      'Svelte 5 prerelase does not support automatic actions with our current example components yet'
+    );
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page);
     sbPage.waitUntilLoaded();

code/e2e-tests/addon-docs.spec.ts

@@ -122,9 +122,6 @@ test.describe('addon-docs', () => {
       //   - template: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/addons-docs-docspage-basic--docs
       //   - real: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/example-button--docs
       'lit-vite',
-      // Vue doesn't update when you change args, apparently fixed by this:
-      //   https://github.com/storybookjs/storybook/pull/20995
-      'vue2-vite',
     ];
     test.skip(
       new RegExp(`^${skipped.join('|')}`, 'i').test(`${templateName}`),

code/frameworks/svelte-vite/package.json

@@ -52,18 +52,18 @@
     "@storybook/svelte": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "magic-string": "^0.30.0",
-    "svelte-preprocess": "^5.0.4",
+    "svelte-preprocess": "^5.1.1",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
-    "svelte": "^4.0.0",
+    "svelte": "^5.0.0-next.16",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.16",
     "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "engines": {

code/frameworks/svelte-webpack5/package.json

@@ -59,7 +59,7 @@
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "svelte": "^3.48.0 || ^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.16",
     "svelte-loader": "*"
   },
   "engines": {

code/frameworks/sveltekit/package.json

@@ -64,7 +64,7 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.16",
     "vite": "^4.0.0"
   },
   "engines": {

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ButtonTypeScript.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * @component Button TypeScript
+   * @wrapper
+   */
+  import { global as globalThis } from '@storybook/global';
+  // @ts-ignore
+  const Button = globalThis.Components?.Button;
+
+  /**
+   * Rounds the button
+   */
+  export let primary: boolean = false;
+
+  /**
+   * Displays the count
+   */
+  export let count: number = 0;
+
+  /**
+   * Button text
+   * @slot
+   */
+  export let text: string = 'You clicked';
+
+  function handleClick(_event: MouseEvent) {
+    count += 1;
+  }
+</script>
+
+<h1>Button TypeScript</h1>
+
+<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
+
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Forms.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { enhance } from '$app/forms';
+</script>
+
+<form use:enhance>
+	<button>enhance</button>
+</form>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Hrefs.svelte

@@ -0,0 +1,8 @@
+<ul>
+  <li><a href="/basic-href">Link to <code>/basic-href</code></a></li>
+  <li>
+    <a href="/deep/nested/link?with=true&multiple-params=200#and-an-id"
+      >Link to <code>/deep/nested/link?with=true&multiple-params=200#and-an-id</code></a
+    >
+  </li>
+</ul>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Navigation.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { goto, invalidate, invalidateAll, afterNavigate } from '$app/navigation';
+
+	export let afterNavigateFn;
+
+	afterNavigate(afterNavigateFn);
+</script>
+
+<button
+	on:click={() => {
+		goto('/storybook-goto');
+	}}>goto</button
+>
+
+<button
+	on:click={() => {
+		invalidate('/storybook-invalidate');
+	}}>invalidate</button
+>
+
+<button
+	on:click={() => {
+		invalidateAll();
+	}}>invalidateAll</button
+>