diff --git a/.github/workflows/generate-sandboxes.yml b/.github/workflows/generate-sandboxes.yml index dad7066c0614..88dc9e21bb41 100644 --- a/.github/workflows/generate-sandboxes.yml +++ b/.github/workflows/generate-sandboxes.yml @@ -6,9 +6,9 @@ on: workflow_dispatch: # To test fixes on push rather than wait for the scheduling, do the following: # 1. Uncomment the lines below and add your branch. - push: - branches: - - kasper/fix-sandboxes-next + # push: + # branches: + # - # 2. Change the "ref" value to in the actions/checkout step below. # 3. Comment out the whole "generate-main" job starting at line 77 # 4. 👉 DON'T FORGET TO UNDO THE STEPS BEFORE YOU MERGE YOUR CHANGES! @@ -28,7 +28,7 @@ jobs: steps: - uses: actions/checkout@v4 with: - ref: kasper/fix-sandboxes-next + ref: next - uses: actions/setup-node@v4 with: @@ -74,54 +74,54 @@ jobs: The generation of some or all sandboxes on the **next** branch has failed. [See the job summary for details](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) -# generate-main: -# name: Generate to main -# runs-on: ubuntu-latest -# steps: -# - uses: actions/checkout@v4 -# with: -# ref: main -# -# - uses: actions/setup-node@v4 -# with: -# node-version-file: ".nvmrc" -# -# - name: Setup git user -# run: | -# git config --global user.name "storybook-bot" -# git config --global user.email "32066757+storybook-bot@users.noreply.github.com" -# -# - name: Install dependencies -# working-directory: ./scripts -# run: node --experimental-modules ./check-dependencies.js -# -# - name: Compile Storybook libraries -# run: yarn task --task compile --start-from=auto --no-link -# -# - name: Publish to local registry -# run: yarn local-registry --publish -# -# - name: Run local registry -# run: yarn local-registry --open & -# -# - name: Wait for registry -# run: yarn wait-on tcp:127.0.0.1:6001 -# -# - name: Generate -# id: generate -# run: yarn generate-sandboxes --local-registry -# -# - name: Publish -# # publish sandboxes even if the generation fails, as some sandboxes might have been generated successfully -# if: ${{ !cancelled() }} -# run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT }}@github.com/storybookjs/sandboxes.git --push --branch=main -# -# - name: Report failure to Discord -# if: failure() -# env: -# DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }} -# uses: Ilshidur/action-discord@master -# with: -# args: | -# The generation of some or all sandboxes on the **main** branch has failed. -# [See the job summary for details](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) + generate-main: + name: Generate to main + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + ref: main + + - uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + + - name: Setup git user + run: | + git config --global user.name "storybook-bot" + git config --global user.email "32066757+storybook-bot@users.noreply.github.com" + + - name: Install dependencies + working-directory: ./scripts + run: node --experimental-modules ./check-dependencies.js + + - name: Compile Storybook libraries + run: yarn task --task compile --start-from=auto --no-link + + - name: Publish to local registry + run: yarn local-registry --publish + + - name: Run local registry + run: yarn local-registry --open & + + - name: Wait for registry + run: yarn wait-on tcp:127.0.0.1:6001 + + - name: Generate + id: generate + run: yarn generate-sandboxes --local-registry + + - name: Publish + # publish sandboxes even if the generation fails, as some sandboxes might have been generated successfully + if: ${{ !cancelled() }} + run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT }}@github.com/storybookjs/sandboxes.git --push --branch=main + + - name: Report failure to Discord + if: failure() + env: + DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }} + uses: Ilshidur/action-discord@master + with: + args: | + The generation of some or all sandboxes on the **main** branch has failed. + [See the job summary for details](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 9f0afe1f6501..8be319848da1 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,8 @@ +## 8.4.0-beta.0 + +- Core: Add unified UI Testing Module - [#29241](https://github.com/storybookjs/storybook/pull/29241), thanks @yannbf! +- Svelte: Improve argTypes inference with `svelte2tsx` - support runes - [#29423](https://github.com/storybookjs/storybook/pull/29423), thanks @JReinhold! + ## 8.4.0-alpha.8 - Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw! diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 70139e756d4a..6778d0861c0a 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index f6cf41c75fec..67b279ecabbb 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index be6df998f96a..88efc39f5274 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 95cdbce48408..d3ac60cd2e9a 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 8a38c24695e2..7afd2cad5060 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 4ded7ad164f2..9b283c80c205 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 29e9d5f35f37..2173b1668d4e 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 6890d6ca8cea..75ff5c752a4f 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index b08b51d492c8..ab7b4960afae 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 051a99eec1ba..a1bce0f4ccae 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 9ac8330b8664..15ed93400ad6 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 6fd48d3ce51b..b0b6a2f0dd9a 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index a721ccd0529c..c651f5bcd89a 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 5602c94b27ef..3eeaf3641fd8 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 607818c5f3af..b8fafb013f8e 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 50f16f3dad2b..ebae8b47baa4 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 31d8fe9e930f..755ce85e0961 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index acfc9620cfbe..9722203a5c6d 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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 index 59d2421fd363..d452503e0f13 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index fd01a63ed47d..e2bd1a750d71 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "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-webpack5/package.json b/code/builders/builder-webpack5/package.json index 99383fdb79d5..c0ecb83a006b 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/assets/server/base-preview-body.html b/code/core/assets/server/base-preview-body.html index b6314fd75900..adbe363c2b5a 100644 --- a/code/core/assets/server/base-preview-body.html +++ b/code/core/assets/server/base-preview-body.html @@ -93,7 +93,7 @@

Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the - Decorators documentation. diff --git a/code/core/package.json b/code/core/package.json index 01dc569f6351..eda0a4037376 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/presets.ts b/code/core/src/common/presets.ts index c578b0502889..b85b35d62b77 100644 --- a/code/core/src/common/presets.ts +++ b/code/core/src/common/presets.ts @@ -198,7 +198,7 @@ const map = resolved = resolveAddonName(configDir, name, options); } catch (err) { logger.error( - `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` + `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/addons/writing-presets/\n${item}` ); return undefined; } diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 47aa0a30af7e..b0a01e2767fa 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,87 +1,87 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.4.0-alpha.8', - '@storybook/addon-actions': '8.4.0-alpha.8', - '@storybook/addon-backgrounds': '8.4.0-alpha.8', - '@storybook/addon-controls': '8.4.0-alpha.8', - '@storybook/addon-docs': '8.4.0-alpha.8', - '@storybook/addon-essentials': '8.4.0-alpha.8', - '@storybook/addon-mdx-gfm': '8.4.0-alpha.8', - '@storybook/addon-highlight': '8.4.0-alpha.8', - '@storybook/addon-interactions': '8.4.0-alpha.8', - '@storybook/addon-jest': '8.4.0-alpha.8', - '@storybook/addon-links': '8.4.0-alpha.8', - '@storybook/addon-measure': '8.4.0-alpha.8', - '@storybook/addon-onboarding': '8.4.0-alpha.8', - '@storybook/addon-outline': '8.4.0-alpha.8', - '@storybook/addon-storysource': '8.4.0-alpha.8', - '@storybook/experimental-addon-test': '8.4.0-alpha.8', - '@storybook/addon-themes': '8.4.0-alpha.8', - '@storybook/addon-toolbars': '8.4.0-alpha.8', - '@storybook/addon-viewport': '8.4.0-alpha.8', - '@storybook/builder-vite': '8.4.0-alpha.8', - '@storybook/builder-webpack5': '8.4.0-alpha.8', - '@storybook/core': '8.4.0-alpha.8', - '@storybook/builder-manager': '8.4.0-alpha.8', - '@storybook/channels': '8.4.0-alpha.8', - '@storybook/client-logger': '8.4.0-alpha.8', - '@storybook/components': '8.4.0-alpha.8', - '@storybook/core-common': '8.4.0-alpha.8', - '@storybook/core-events': '8.4.0-alpha.8', - '@storybook/core-server': '8.4.0-alpha.8', - '@storybook/csf-tools': '8.4.0-alpha.8', - '@storybook/docs-tools': '8.4.0-alpha.8', - '@storybook/manager': '8.4.0-alpha.8', - '@storybook/manager-api': '8.4.0-alpha.8', - '@storybook/node-logger': '8.4.0-alpha.8', - '@storybook/preview': '8.4.0-alpha.8', - '@storybook/preview-api': '8.4.0-alpha.8', - '@storybook/router': '8.4.0-alpha.8', - '@storybook/telemetry': '8.4.0-alpha.8', - '@storybook/theming': '8.4.0-alpha.8', - '@storybook/types': '8.4.0-alpha.8', - '@storybook/angular': '8.4.0-alpha.8', - '@storybook/ember': '8.4.0-alpha.8', - '@storybook/experimental-nextjs-vite': '8.4.0-alpha.8', - '@storybook/html-vite': '8.4.0-alpha.8', - '@storybook/html-webpack5': '8.4.0-alpha.8', - '@storybook/nextjs': '8.4.0-alpha.8', - '@storybook/preact-vite': '8.4.0-alpha.8', - '@storybook/preact-webpack5': '8.4.0-alpha.8', - '@storybook/react-vite': '8.4.0-alpha.8', - '@storybook/react-webpack5': '8.4.0-alpha.8', - '@storybook/server-webpack5': '8.4.0-alpha.8', - '@storybook/svelte-vite': '8.4.0-alpha.8', - '@storybook/svelte-webpack5': '8.4.0-alpha.8', - '@storybook/sveltekit': '8.4.0-alpha.8', - '@storybook/vue3-vite': '8.4.0-alpha.8', - '@storybook/vue3-webpack5': '8.4.0-alpha.8', - '@storybook/web-components-vite': '8.4.0-alpha.8', - '@storybook/web-components-webpack5': '8.4.0-alpha.8', - '@storybook/blocks': '8.4.0-alpha.8', - storybook: '8.4.0-alpha.8', - sb: '8.4.0-alpha.8', - '@storybook/cli': '8.4.0-alpha.8', - '@storybook/codemod': '8.4.0-alpha.8', - '@storybook/core-webpack': '8.4.0-alpha.8', - 'create-storybook': '8.4.0-alpha.8', - '@storybook/csf-plugin': '8.4.0-alpha.8', - '@storybook/instrumenter': '8.4.0-alpha.8', - '@storybook/react-dom-shim': '8.4.0-alpha.8', - '@storybook/source-loader': '8.4.0-alpha.8', - '@storybook/test': '8.4.0-alpha.8', - '@storybook/preset-create-react-app': '8.4.0-alpha.8', - '@storybook/preset-html-webpack': '8.4.0-alpha.8', - '@storybook/preset-preact-webpack': '8.4.0-alpha.8', - '@storybook/preset-react-webpack': '8.4.0-alpha.8', - '@storybook/preset-server-webpack': '8.4.0-alpha.8', - '@storybook/preset-svelte-webpack': '8.4.0-alpha.8', - '@storybook/preset-vue3-webpack': '8.4.0-alpha.8', - '@storybook/html': '8.4.0-alpha.8', - '@storybook/preact': '8.4.0-alpha.8', - '@storybook/react': '8.4.0-alpha.8', - '@storybook/server': '8.4.0-alpha.8', - '@storybook/svelte': '8.4.0-alpha.8', - '@storybook/vue3': '8.4.0-alpha.8', - '@storybook/web-components': '8.4.0-alpha.8', + '@storybook/addon-a11y': '8.4.0-beta.0', + '@storybook/addon-actions': '8.4.0-beta.0', + '@storybook/addon-backgrounds': '8.4.0-beta.0', + '@storybook/addon-controls': '8.4.0-beta.0', + '@storybook/addon-docs': '8.4.0-beta.0', + '@storybook/addon-essentials': '8.4.0-beta.0', + '@storybook/addon-mdx-gfm': '8.4.0-beta.0', + '@storybook/addon-highlight': '8.4.0-beta.0', + '@storybook/addon-interactions': '8.4.0-beta.0', + '@storybook/addon-jest': '8.4.0-beta.0', + '@storybook/addon-links': '8.4.0-beta.0', + '@storybook/addon-measure': '8.4.0-beta.0', + '@storybook/addon-onboarding': '8.4.0-beta.0', + '@storybook/addon-outline': '8.4.0-beta.0', + '@storybook/addon-storysource': '8.4.0-beta.0', + '@storybook/experimental-addon-test': '8.4.0-beta.0', + '@storybook/addon-themes': '8.4.0-beta.0', + '@storybook/addon-toolbars': '8.4.0-beta.0', + '@storybook/addon-viewport': '8.4.0-beta.0', + '@storybook/builder-vite': '8.4.0-beta.0', + '@storybook/builder-webpack5': '8.4.0-beta.0', + '@storybook/core': '8.4.0-beta.0', + '@storybook/builder-manager': '8.4.0-beta.0', + '@storybook/channels': '8.4.0-beta.0', + '@storybook/client-logger': '8.4.0-beta.0', + '@storybook/components': '8.4.0-beta.0', + '@storybook/core-common': '8.4.0-beta.0', + '@storybook/core-events': '8.4.0-beta.0', + '@storybook/core-server': '8.4.0-beta.0', + '@storybook/csf-tools': '8.4.0-beta.0', + '@storybook/docs-tools': '8.4.0-beta.0', + '@storybook/manager': '8.4.0-beta.0', + '@storybook/manager-api': '8.4.0-beta.0', + '@storybook/node-logger': '8.4.0-beta.0', + '@storybook/preview': '8.4.0-beta.0', + '@storybook/preview-api': '8.4.0-beta.0', + '@storybook/router': '8.4.0-beta.0', + '@storybook/telemetry': '8.4.0-beta.0', + '@storybook/theming': '8.4.0-beta.0', + '@storybook/types': '8.4.0-beta.0', + '@storybook/angular': '8.4.0-beta.0', + '@storybook/ember': '8.4.0-beta.0', + '@storybook/experimental-nextjs-vite': '8.4.0-beta.0', + '@storybook/html-vite': '8.4.0-beta.0', + '@storybook/html-webpack5': '8.4.0-beta.0', + '@storybook/nextjs': '8.4.0-beta.0', + '@storybook/preact-vite': '8.4.0-beta.0', + '@storybook/preact-webpack5': '8.4.0-beta.0', + '@storybook/react-vite': '8.4.0-beta.0', + '@storybook/react-webpack5': '8.4.0-beta.0', + '@storybook/server-webpack5': '8.4.0-beta.0', + '@storybook/svelte-vite': '8.4.0-beta.0', + '@storybook/svelte-webpack5': '8.4.0-beta.0', + '@storybook/sveltekit': '8.4.0-beta.0', + '@storybook/vue3-vite': '8.4.0-beta.0', + '@storybook/vue3-webpack5': '8.4.0-beta.0', + '@storybook/web-components-vite': '8.4.0-beta.0', + '@storybook/web-components-webpack5': '8.4.0-beta.0', + '@storybook/blocks': '8.4.0-beta.0', + storybook: '8.4.0-beta.0', + sb: '8.4.0-beta.0', + '@storybook/cli': '8.4.0-beta.0', + '@storybook/codemod': '8.4.0-beta.0', + '@storybook/core-webpack': '8.4.0-beta.0', + 'create-storybook': '8.4.0-beta.0', + '@storybook/csf-plugin': '8.4.0-beta.0', + '@storybook/instrumenter': '8.4.0-beta.0', + '@storybook/react-dom-shim': '8.4.0-beta.0', + '@storybook/source-loader': '8.4.0-beta.0', + '@storybook/test': '8.4.0-beta.0', + '@storybook/preset-create-react-app': '8.4.0-beta.0', + '@storybook/preset-html-webpack': '8.4.0-beta.0', + '@storybook/preset-preact-webpack': '8.4.0-beta.0', + '@storybook/preset-react-webpack': '8.4.0-beta.0', + '@storybook/preset-server-webpack': '8.4.0-beta.0', + '@storybook/preset-svelte-webpack': '8.4.0-beta.0', + '@storybook/preset-vue3-webpack': '8.4.0-beta.0', + '@storybook/html': '8.4.0-beta.0', + '@storybook/preact': '8.4.0-beta.0', + '@storybook/react': '8.4.0-beta.0', + '@storybook/server': '8.4.0-beta.0', + '@storybook/svelte': '8.4.0-beta.0', + '@storybook/vue3': '8.4.0-beta.0', + '@storybook/web-components': '8.4.0-beta.0', }; diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx index cd1fbe7af16b..712b329ce2f0 100644 --- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx +++ b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx @@ -187,10 +187,10 @@ export const Story = { const meta = { title: 'Example/Header', component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], parameters: { - // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout + // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout layout: 'fullscreen', }, } satisfies Meta; diff --git a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts index 87fe8317ea35..7aa3621c2893 100644 --- a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts +++ b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts @@ -56,7 +56,7 @@ Your main configuration somehow does not contain a 'stories' field, or it resolv Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array. -More info: https://storybook.js.org/docs/react/faq#can-i-have-a-storybook-with-no-local-stories +More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories ] `); }); diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts index d1cafb31bb64..b953395c9abc 100644 --- a/code/core/src/csf-tools/CsfFile.ts +++ b/code/core/src/csf-tools/CsfFile.ts @@ -174,7 +174,7 @@ export class NoMetaError extends Error { super(dedent` CSF: ${message} ${formatLocation(ast, fileName)} - More info: https://storybook.js.org/docs/react/writing-stories#default-export + More info: https://storybook.js.org/docs/writing-stories#default-export `); this.name = this.constructor.name; } diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 6b71582aabc9..95cc34a25cda 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.4.0-alpha.8'; +export const version = '8.4.0-beta.0'; diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx index e34f28d744d6..a6f01155a3d4 100644 --- a/code/core/src/manager/components/sidebar/RefIndicator.tsx +++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx @@ -307,10 +307,7 @@ const ReadDocsMessage: FC = () => { const theme = useTheme(); return ( - +
Read Composition docs @@ -348,14 +345,12 @@ const LoadingMessage: FC<{ url: string }> = ({ url }) => { ); }; +// TODO: This is a temporary fix as the documentation link is not available with the 8.0 release, since the features it referenced were removed. See https://storybook.js.org/docs/7/sharing/storybook-composition#improve-your-storybook-composition for context. const PerformanceDegradedMessage: FC = () => { const theme = useTheme(); return ( - +
Reduce lag diff --git a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts index 9045530a3c19..06d1cd5320be 100644 --- a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts +++ b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts @@ -115,7 +115,7 @@ export const parseArgsParam = (argsString: string): Args => { once.warn(dedent` Omitted potentially unsafe URL args. - More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url + More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url `); return acc; }, {} as Args); diff --git a/code/core/src/preview-api/modules/store/args.ts b/code/core/src/preview-api/modules/store/args.ts index ea678dd4d2df..145ccdfbc620 100644 --- a/code/core/src/preview-api/modules/store/args.ts +++ b/code/core/src/preview-api/modules/store/args.ts @@ -120,7 +120,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => { once.error(dedent` Invalid argType: '${key}.options' should be an array. - More info: https://storybook.js.org/docs/react/api/argtypes + More info: https://storybook.js.org/docs/api/arg-types `); return allowArg(); } @@ -129,7 +129,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => { once.error(dedent` Invalid argType: '${key}.options' should only contain primitives. Use a 'mapping' for complex values. - More info: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values + More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values `); return allowArg(); } diff --git a/code/core/src/router/utils.ts b/code/core/src/router/utils.ts index e0772f45a31c..bd8e3edc7aa5 100644 --- a/code/core/src/router/utils.ts +++ b/code/core/src/router/utils.ts @@ -197,7 +197,7 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin once.warn(dedent` Omitted potentially unsafe URL args. - More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url + More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url `); return acc; }, {} as Args); diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts index 5df2a3df9667..a119e46ac74a 100644 --- a/code/core/src/server-errors.ts +++ b/code/core/src/server-errors.ts @@ -116,7 +116,7 @@ export class ConflictingStaticDirConfigError extends StorybookError { category: Category.CORE_SERVER, code: 1, documentation: - 'https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration', + 'https://storybook.js.org/docs/configure/integration/images-and-assets#serving-static-files-via-storybook-configuration', message: dedent` Storybook encountered a conflict when trying to serve statics. You have configured both: * Storybook's option in the config file: 'staticDirs' @@ -133,7 +133,7 @@ export class InvalidStoriesEntryError extends StorybookError { category: Category.CORE_COMMON, code: 4, documentation: - 'https://storybook.js.org/docs/react/faq#can-i-have-a-storybook-with-no-local-stories', + 'https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories', message: dedent` Storybook could not index your stories. Your main configuration somehow does not contain a 'stories' field, or it resolved to an empty array. @@ -150,7 +150,7 @@ export class WebpackMissingStatsError extends StorybookError { code: 1, documentation: [ 'https://webpack.js.org/configuration/stats/', - 'https://storybook.js.org/docs/react/builders/webpack#configure', + 'https://storybook.js.org/docs/builders/webpack#configure', ], message: dedent` No Webpack stats found. Did you turn off stats reporting in your Webpack config? @@ -217,7 +217,7 @@ export class MissingAngularJsonError extends StorybookError { super({ category: Category.CLI_INIT, code: 2, - documentation: 'https://storybook.js.org/docs/angular/faq#error-no-angularjson-file-found', + documentation: 'https://storybook.js.org/docs/faq#error-no-angularjson-file-found', message: dedent` An angular.json file was not found in the current working directory: ${data.path} Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located.`, diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts index 8528917cf19a..61473d42958c 100644 --- a/code/core/src/types/modules/addons.ts +++ b/code/core/src/types/modules/addons.ts @@ -178,7 +178,7 @@ export interface Addon_BaseAnnotations< /** * Dynamic data that are provided (and possibly updated by) Storybook and its addons. * - * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs) + * @see [Arg story inputs](https://storybook.js.org/docs/api/csf#args-story-inputs) */ args?: Partial; @@ -186,14 +186,14 @@ export interface Addon_BaseAnnotations< * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an * arg. These get automatically filled in by Storybook Docs. * - * @see [Arg types](https://storybook.js.org/docs/react/api/arg-types) + * @see [Arg types](https://storybook.js.org/docs/api/arg-types) */ argTypes?: Addons_ArgTypes; /** * Custom metadata for a story. * - * @see [Parameters](https://storybook.js.org/docs/react/writing-stories/parameters) + * @see [Parameters](https://storybook.js.org/docs/writing-stories/parameters) */ parameters?: Parameters; @@ -202,7 +202,7 @@ export interface Addon_BaseAnnotations< * * Decorators defined in Meta will be applied to every story variation. * - * @see [Decorators](https://storybook.js.org/docs/addons/#1-decorators) + * @see [Decorators](https://storybook.js.org/docs/writing-stories/decorators) */ decorators?: Addon_BaseDecorators; @@ -229,7 +229,7 @@ export interface Addon_Annotations * includeStories: /.*Story$/; * ``` * - * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports) + * @see [Non-story exports](https://storybook.js.org/docs/api/csf#non-story-exports) */ includeStories?: string[] | RegExp; @@ -244,7 +244,7 @@ export interface Addon_Annotations * excludeStories: /.*Data$/; * ``` * - * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports) + * @see [Non-story exports](https://storybook.js.org/docs/api/csf#non-story-exports) */ excludeStories?: string[] | RegExp; } @@ -263,7 +263,7 @@ export interface Addon_BaseMeta { * export default { title: 'Design System/Atoms/Button' }; * ``` * - * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy) + * @see [Story Hierarchy](https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy) */ title?: string; @@ -274,7 +274,7 @@ export interface Addon_BaseMeta { * Storybook will prioritize the id over the title for ID generation, if provided, and will * prioritize the story.storyName over the export key for display. * - * @see [Sidebar and URLs](https://storybook.js.org/docs/react/configure/sidebar-and-urls#permalinking-to-stories) + * @see [Sidebar and URLs](https://storybook.js.org/docs/configure/user-interface/sidebar-and-urls#permalink-to-stories) */ id?: string; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 89e5d02cbf95..f9ac95e7b381 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 1e76611ba778..4520f8cc1270 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index b5da6166a1b2..9c1ee730268e 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index c6d49682b3ba..a14077e02f97 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 1ccc9266f8e4..4364f1763314 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index b702cd0a3dcd..23d6506be585 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 93ade9cd77f8..ca2d70e0d825 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 82d56392034b..c2f3105926f4 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index b7418deec8bb..972a514132a9 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index ad4627499a9b..65fb9b380edd 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index a349c6dd024f..5a1955b9061f 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 11f8751f8104..d87ebfdce781 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index cae353ba0f43..53015feb0fb3 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index b46aad5176e7..94a228ece87f 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index c4f9753cca24..ab0bb4523298 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index f265138d2658..921328679226 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 8a2699fce024..3059e2910f68 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index be3063a042ac..43e30516e286 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index ddf855e2a54e..c32532b4e7ed 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -17,20 +17,20 @@ test.describe('Svelte', () => { test('JS story has auto-generated args table', async ({ page }) => { const sbPage = new SbPage(page, expect); - await sbPage.navigateToStory('stories/renderers/svelte/js-docs', 'docs'); + await sbPage.navigateToStory('stories/renderers/svelte/docs-jsdoc', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); - await expect(argsTable).toContainText('Rounds the button'); + await expect(argsTable).toContainText('Union of literal strings'); }); test('TS story has auto-generated args table', async ({ page }) => { test.skip(!templateName?.endsWith('ts') || false, 'Only test TS story in TS templates'); const sbPage = new SbPage(page, expect); - await sbPage.navigateToStory('stories/renderers/svelte/ts-docs', 'docs'); + await sbPage.navigateToStory('stories/renderers/svelte/docs-ts', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); - await expect(argsTable).toContainText('Rounds the button'); + await expect(argsTable).toContainText('Union of literal strings'); }); test('Decorators are excluded from generated source code', async ({ page }) => { diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 1373ff10308a..f4676a7c9b9e 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json index dbc2a734417e..6d976bf5dd0d 100644 --- a/code/frameworks/angular/src/builders/build-storybook/schema.json +++ b/code/frameworks/angular/src/builders/build-storybook/schema.json @@ -51,7 +51,7 @@ }, "docs": { "type": "boolean", - "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.", + "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/writing-docs/build-documentation#preview-storybooks-documentation.", "default": false }, "test": { diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json index a2eef03e4b08..729c3ea5b724 100644 --- a/code/frameworks/angular/src/builders/start-storybook/schema.json +++ b/code/frameworks/angular/src/builders/start-storybook/schema.json @@ -83,7 +83,7 @@ }, "docs": { "type": "boolean", - "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.", + "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/writing-docs/build-documentation#preview-storybooks-documentation.", "default": false }, "compodoc": { diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 3910854111bf..9f6e7dd2d37a 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 80b2d0e6db95..98d52d01cc10 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 89f2af08794f..7bc2d8737976 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 130f88680ada..3fa5d9cc1bb1 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 8b4f7735aa8b..2f66695992b2 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index c47d19c7e868..3018328077d7 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index bfd8fd02e9e6..6a49369f8852 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index bab0c325cc86..82abefbbc0eb 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 39b421d15e5b..cbc06816fbf3 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 6ae3ceffca3a..13864158fc98 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 4aa937d61e09..a558a42cedc6 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.4.0-alpha.8", + "version": "8.4.0-beta.0", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -51,8 +51,10 @@ "@storybook/svelte": "workspace:*", "magic-string": "^0.30.0", "svelte-preprocess": "^5.1.1", + "svelte2tsx": "^0.7.13", "sveltedoc-parser": "^4.2.1", - "ts-dedent": "^2.2.0" + "ts-dedent": "^2.2.0", + "typescript": "^4.9.4 || ^5.0.0" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^4.0.0", diff --git a/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts b/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts new file mode 100644 index 000000000000..eff343fbfe0b --- /dev/null +++ b/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts @@ -0,0 +1,528 @@ +import path from 'node:path'; + +import svelte2tsx from 'svelte2tsx'; +import { VERSION } from 'svelte/compiler'; +import ts from 'typescript'; + +export type Docgen = { + name?: string; + propsRuneUsed?: boolean; + props: PropInfo[]; +}; + +export type PropInfo = { + name: string; + type?: Type; + optional?: boolean; + defaultValue?: DefaultValue; + description?: string; +}; + +type BaseType = object; + +type ScalarType = BaseType & { + type: 'number' | 'string' | 'boolean' | 'symbol' | 'any' | 'null' | 'undefined' | 'void'; +}; +type FunctionType = BaseType & { + type: 'function'; + text: string; +}; +type LiteralType = BaseType & { + type: 'literal'; + value: string | number | boolean; + text: string; +}; +type ArrayType = BaseType & { + type: 'array'; + text: string; +}; +type ObjectType = BaseType & { + type: 'object'; + text: string; +}; +type UnionType = BaseType & { + type: 'union'; + types: Type[]; +}; +type IntersectionType = BaseType & { + type: 'intersection'; + types: Type[]; +}; + +export type Type = + | ScalarType + | LiteralType + | FunctionType + | ArrayType + | ObjectType + | UnionType + | IntersectionType; + +type DefaultValue = { + text: string; +}; + +function convertType(type: ts.Type, checker: ts.TypeChecker): Type | undefined { + // TypeScript compiler uses bit flags to represent type information. + // Note the use of the bitwise AND (&) operator here. + // See examples at: https://github.com/search?q=repo%3Amicrosoft%2FTypeScript+TypeFlags.&type=code + if (type.flags & ts.TypeFlags.Any) { + return { type: 'any' }; + } + if (type.flags & ts.TypeFlags.Number) { + return { type: 'number' }; + } + if (type.flags & ts.TypeFlags.String) { + return { type: 'string' }; + } + if (type.flags & ts.TypeFlags.Boolean) { + return { type: 'boolean' }; + } + if (type.flags & ts.TypeFlags.ESSymbol) { + return { type: 'symbol' }; + } + if (type.flags & ts.TypeFlags.Null) { + return { type: 'null' }; + } + if (type.flags & ts.TypeFlags.Undefined) { + return { type: 'undefined' }; + } + if (type.flags & ts.TypeFlags.Void) { + return { type: 'void' }; + } + if (type.getCallSignatures().length > 0) { + return { type: 'function', text: checker.typeToString(type) }; + } + if (type.flags & ts.TypeFlags.Object) { + const indexType = checker.getIndexTypeOfType(type, ts.IndexKind.Number); + if (indexType) { + return { type: 'array', text: checker.typeToString(type) }; + } + return { type: 'object', text: checker.typeToString(type) }; + } + if (type.isNumberLiteral() || type.isStringLiteral()) { + return { + type: 'literal', + value: type.value, + text: + type.flags & ts.TypeFlags.EnumLiteral + ? checker.typeToString(type) + : JSON.stringify(type.value), + }; + } + if (type.flags & ts.TypeFlags.BooleanLiteral) { + const text = checker.typeToString(type); + return { type: 'literal', value: text === 'true', text: text }; + } + if (type.isUnion()) { + // TypeA | TypeB + const types = type.types + .map((t) => convertType(t, checker)) + .filter((t) => { + return t !== undefined && t.type !== 'undefined'; + }) as Type[]; + + // Boolean is represented as 'true' | 'false' in TypeScript's type checker, + // so we need to merge them into a single 'boolean' type. + const idxTrue = types.findIndex((t) => t.type === 'literal' && t.value === true); + const idxFalse = types.findIndex((t) => t.type === 'literal' && t.value === false); + if (idxTrue !== -1 && idxFalse !== -1) { + types.splice(Math.max(idxTrue, idxFalse), 1); + types.splice(Math.min(idxTrue, idxFalse), 1, { type: 'boolean' }); + } + + return types.length > 1 ? { type: 'union', types: types } : types[0]; + } + if (type.isIntersection()) { + // TypeA & TypeB + const types = type.types + .map((t) => convertType(t, checker)) + .filter((t) => t !== undefined) as Type[]; + return { type: 'intersection', types }; + } + + return undefined; +} + +function initializerToDefaultValue( + expr: ts.Expression, + checker: ts.TypeChecker +): DefaultValue | undefined { + if (ts.isNumericLiteral(expr)) { + return { text: expr.text }; + } else if (ts.isStringLiteral(expr)) { + return { text: JSON.stringify(expr.text) }; + } else if (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr)) { + const symbol = checker.getSymbolAtLocation(expr); + if (symbol && checker.isUndefinedSymbol(symbol)) { + return undefined; + } + const type = checker.getTypeAtLocation(expr); + if (type.flags & ts.TypeFlags.EnumLiteral) { + return { text: checker.typeToString(type) }; + } else if (type.isLiteral()) { + // string or number + return { text: JSON.stringify(type.value) }; + } else if (type.flags & ts.TypeFlags.Null) { + return { text: 'null' }; + } else if (type.flags & ts.TypeFlags.BooleanLiteral) { + return { text: checker.typeToString(type) }; + } else if (type.getCallSignatures().length > 0) { + return { text: 'function' }; + } + } else if ( + ts.isArrayLiteralExpression(expr) || + ts.isObjectLiteralExpression(expr) || + ts.isNewExpression(expr) + ) { + return { text: expr.getText() }; + } else if (ts.isArrowFunction(expr)) { + return { text: 'function' }; + } + switch (expr.kind) { + case ts.SyntaxKind.TrueKeyword: + return { text: 'true' }; + case ts.SyntaxKind.FalseKeyword: + return { text: 'false' }; + case ts.SyntaxKind.NullKeyword: + return { text: 'null' }; + } + return { text: '...' }; +} + +function loadConfig(basepath: string): [ts.CompilerOptions, Set] { + const configPath = + ts.findConfigFile(basepath, ts.sys.fileExists) || + ts.findConfigFile(basepath, ts.sys.fileExists, 'jsconfig.json'); + + const forcedOptions = { + sourceMap: false, + noEmit: true, + strict: true, + allowJs: true, + checkJs: true, + skipLibCheck: true, + skipDefaultLibCheck: true, + }; + if (!configPath) { + return [forcedOptions, new Set()]; + } + + const configFile = ts.readConfigFile(configPath, ts.sys.readFile); + const config = ts.parseJsonConfigFileContent( + configFile.config, + ts.sys, + path.dirname(configPath), + undefined, + configPath, + undefined, + [ + { + extension: 'svelte', + isMixedContent: true, + scriptKind: ts.ScriptKind.Deferred, + }, + ] + ); + + const fileNames = new Set( + config.fileNames + .filter((fileName) => fileName.endsWith('.svelte')) + .map((fileName) => fileName + '.tsx') + ); + + return [ + { + ...config.options, + ...forcedOptions, + }, + fileNames, + ]; +} + +export interface DocgenCache { + filenameToModifiedTime: Record; + filenameToSourceFile: Record; + fileCache: Record; + oldProgram?: ts.Program; + options?: ts.CompilerOptions; + rootNames?: Set; +} + +export function createDocgenCache(): DocgenCache { + return { + filenameToModifiedTime: {}, + filenameToSourceFile: {}, + fileCache: {}, + }; +} + +export function generateDocgen(targetFileName: string, cache: DocgenCache): Docgen { + if (targetFileName.endsWith('.svelte')) { + targetFileName = targetFileName + '.tsx'; + } + let propsRuneUsed = false; + + if (cache.options === undefined || !cache.rootNames?.has(targetFileName)) { + [cache.options, cache.rootNames] = loadConfig(targetFileName); + + const shimFilename = require.resolve('svelte2tsx/svelte-shims-v4.d.ts'); + cache.rootNames.add(shimFilename); + cache.rootNames.add(targetFileName); + } + + // Create a custom host + const originalHost = ts.createCompilerHost(cache.options); + const host: ts.CompilerHost = { + ...originalHost, + readFile(fileName) { + // Cache package.json + const isCacheTarget = fileName.endsWith(path.sep + 'package.json'); + if (isCacheTarget && cache.fileCache[fileName]) { + return cache.fileCache[fileName]; + } + const content = originalHost.readFile(fileName); + if (content && isCacheTarget) { + cache.fileCache[fileName] = content; + } + return content; + }, + fileExists(fileName) { + const isCacheTarget = fileName.endsWith(path.sep + 'package.json'); + if (isCacheTarget && cache.fileCache[fileName]) { + return true; + } + + let exists = originalHost.fileExists(fileName); + if (exists) { + return exists; + } + + // Virtual .svelte.tsx file + if (fileName.endsWith('.svelte.tsx') || fileName.endsWith('.svelte.jsx')) { + fileName = fileName.slice(0, -4); // remove .tsx or .jsx + exists = originalHost.fileExists(fileName); + return exists; + } + + return false; + }, + getSourceFile(fileName, languageVersion, onError) { + if (fileName.endsWith('.svelte.tsx') || fileName.endsWith('.svelte.jsx')) { + // .svelte file (`import ... from './path/to/file.svelte'`) + + const realFileName = fileName.slice(0, -4); // remove .tsx or .jsx + + const modifiedTime: Date | undefined = ts.sys.getModifiedTime + ? ts.sys.getModifiedTime(realFileName) + : undefined; + if (modifiedTime) { + const cachedModifiedTime = cache.filenameToModifiedTime[fileName]; + if (cachedModifiedTime?.getTime() === modifiedTime.getTime()) { + return cache.filenameToSourceFile[fileName]; + } + } + + const content = originalHost.readFile(realFileName); + if (content === undefined) { + return; + } + + const isTsFile = /]*?lang=('|")(ts|typescript)('|")/.test(content); + + const tsx = svelte2tsx.svelte2tsx(content, { + version: VERSION, + isTsFile, + mode: 'dts', + }); + + const sourceFile = ts.createSourceFile( + fileName, + tsx.code, + languageVersion, + true, + isTsFile ? ts.ScriptKind.TS : ts.ScriptKind.JS // Set to 'JS' to enable TypeScript to parse JSDoc. + ); + + // update cache + cache.filenameToSourceFile[fileName] = sourceFile; + cache.filenameToModifiedTime[fileName] = modifiedTime; + + return sourceFile; + } else { + // non-svelte file + + let staticCaching = false; + staticCaching ||= fileName + .split(path.sep) + .some((part) => part.toLowerCase() === 'node_modules'); + + // We can significantly speed up the docgen process by caching source files. + const cachedSourceFile = cache.filenameToSourceFile[fileName]; + if (cachedSourceFile && staticCaching) { + return cachedSourceFile; + } + const modifiedTime: Date | undefined = ts.sys.getModifiedTime + ? ts.sys.getModifiedTime(fileName) + : undefined; + if (modifiedTime) { + const cachedModifiedTime = cache.filenameToModifiedTime[fileName]; + if (cachedModifiedTime?.getTime() === modifiedTime.getTime()) { + return cache.filenameToSourceFile[fileName]; + } + } + + const content = originalHost.readFile(fileName); + if (content === undefined) { + return; + } + + const sourceFile = ts.createSourceFile(fileName, content, languageVersion, true); + + // update cache + cache.filenameToSourceFile[fileName] = sourceFile; + cache.filenameToModifiedTime[fileName] = modifiedTime; + + return sourceFile; + } + }, + writeFile() { + // Write nothing + }, + }; + + const program = ts.createProgram({ + rootNames: Array.from(cache.rootNames), + options: cache.options, + host, + oldProgram: cache.oldProgram, + }); + cache.oldProgram = program; + + const checker = program.getTypeChecker(); + const sourceFile = program.getSourceFile(targetFileName); + if (sourceFile === undefined) { + return { + props: [], + }; + } + + const propMap: Map = new Map(); + + // Get render function generated by svelte2tsx + const renderFunction = sourceFile.statements.find((statement) => { + return ts.isFunctionDeclaration(statement) && statement.name?.text === 'render'; + }) as ts.FunctionDeclaration | undefined; + if (renderFunction === undefined) { + return { + props: [], + }; + } + + let propsType: ts.Type | undefined; + + const signature = checker.getSignatureFromDeclaration(renderFunction); + + if (signature && signature.declaration) { + // Get props type from ReturnType + const type = checker.getReturnTypeOfSignature(signature); + + type.getProperties().forEach((retObjProp) => { + if (retObjProp.name === 'props') { + const decl = signature.getDeclaration(); + propsType = checker.getTypeOfSymbolAtLocation(retObjProp, decl); + propsType.getProperties().forEach((prop) => { + const name = prop.getName(); + let description = + ts.displayPartsToString(prop.getDocumentationComment(checker)) || undefined; + + // Infer prop type + const propType = checker.getTypeOfSymbolAtLocation(prop, decl); + + if (prop.valueDeclaration) { + // Comment from JSDoc '@type {type} comment' + const typeTag = ts.getJSDocTypeTag(prop.valueDeclaration); + if (typeTag?.comment) { + description = ((description || '') + '\n' + typeTag.comment).trim(); + } + } + + // Ignore props from svelte/elements.d.ts (HTMLAttributes, AriaAttributes and DOMAttributes). + // Some libraries use these for {...$$restProps} + if ( + prop.valueDeclaration + ?.getSourceFile() + .fileName.includes('node_modules/svelte/elements.d.ts') + ) { + return; + } + + // Check if this prop is optional + const optional = (prop.flags & ts.SymbolFlags.Optional) !== 0; + propMap.set(name, { + name, + optional, + description, + type: convertType(propType, checker), + }); + }); + } + }); + } + + renderFunction.body?.forEachChild((node) => { + if (ts.isVariableStatement(node)) { + node.declarationList.declarations.forEach((declaration) => { + // Extract default values from: + // let { = , ... }: = $props(); + + if (ts.isObjectBindingPattern(declaration.name)) { + const isPropsRune = + declaration.initializer && + ts.isCallExpression(declaration.initializer) && + ts.isIdentifier(declaration.initializer.expression) && + declaration.initializer.expression.text === '$props'; + + const isPropsType = + declaration.type && propsType === checker.getTypeFromTypeNode(declaration.type); + + if (isPropsRune || isPropsType) { + propsRuneUsed = true; + declaration.name.elements.forEach((element) => { + const name = element.name.getText(); + const prop = propMap.get(name); + if (prop && element.initializer) { + const defaultValue = initializerToDefaultValue(element.initializer, checker); + if (defaultValue) { + prop.defaultValue = defaultValue; + } + } + }); + } + } + + // Extract default values from: + // export let = + if ( + ts.isVariableDeclaration(declaration) && + ts.isIdentifier(declaration.name) && + propMap.has(declaration.name.text) + ) { + const prop = propMap.get(declaration.name.text); + if (prop && declaration.initializer) { + prop.optional = true; + const defaultValue = initializerToDefaultValue(declaration.initializer, checker); + if (defaultValue) { + prop.defaultValue = defaultValue; + } + } + } + }); + } + }); + + return { + props: Array.from(propMap.values()), + propsRuneUsed, + }; +} diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index a9dc886f69ee..c153bd9d8b28 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -6,10 +6,17 @@ import { logger } from 'storybook/internal/node-logger'; import MagicString from 'magic-string'; import { replace, typescript } from 'svelte-preprocess'; import { preprocess } from 'svelte/compiler'; +import type { + JSDocType, + SvelteComponentDoc, + SvelteDataItem, + SvelteParserOptions, +} from 'sveltedoc-parser'; import svelteDoc from 'sveltedoc-parser'; -import type { SvelteComponentDoc, SvelteParserOptions } from 'sveltedoc-parser'; import type { PluginOption } from 'vite'; +import { type Docgen, type Type, createDocgenCache, generateDocgen } from './generateDocgen'; + /* * Patch sveltedoc-parser internal options. * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87 @@ -62,6 +69,68 @@ function getNameFromFilename(filename: string) { return base[0].toUpperCase() + base.slice(1); } +function transformToSvelteDocParserType(type: Type): JSDocType { + switch (type.type) { + case 'string': + return { kind: 'type', type: 'string', text: 'string' }; + case 'number': + return { kind: 'type', type: 'number', text: 'number' }; + case 'boolean': + return { kind: 'type', type: 'boolean', text: 'boolean' }; + case 'symbol': + return { kind: 'type', type: 'other', text: 'symbol' }; + case 'null': + return { kind: 'type', type: 'other', text: 'null' }; + case 'undefined': + return { kind: 'type', type: 'other', text: 'undefined' }; + case 'void': + return { kind: 'type', type: 'other', text: 'void' }; + case 'any': + return { kind: 'type', type: 'any', text: 'any' }; + case 'object': + return { kind: 'type', type: 'object', text: type.text }; + case 'array': + return { kind: 'type', type: 'array', text: type.text }; + case 'function': + return { kind: 'function', text: type.text }; + case 'literal': + return { kind: 'const', type: typeof type.value, value: type.value, text: type.text }; + case 'union': { + const nonNull = type.types.filter((t) => t.type !== 'null'); // ignore null + const text = nonNull.map((t): string => transformToSvelteDocParserType(t).text).join(' | '); + const types = nonNull.map((t) => transformToSvelteDocParserType(t)); + return types.length === 1 ? types[0] : { kind: 'union', type: types, text }; + } + case 'intersection': { + const text = type.types + .map((t): string => transformToSvelteDocParserType(t).text) + .join(' & '); + return { kind: 'type', type: 'intersection', text }; + } + } +} + +/** Mimic sveltedoc-parser's props data structure */ +function transformToSvelteDocParserDataItems(docgen: Docgen): SvelteDataItem[] { + return docgen.props.map((p) => { + const required = p.optional === false && p.defaultValue === undefined; + return { + name: p.name, + visibility: 'public', + description: p.description, + keywords: required ? [{ name: 'required', description: '' }] : [], + kind: 'let', + type: p.type ? transformToSvelteDocParserType(p.type) : undefined, + static: false, + readonly: false, + importPath: undefined, + originalName: undefined, + localName: undefined, + defaultValue: p.defaultValue ? p.defaultValue.text : undefined, + } satisfies SvelteDataItem; + }); +} + export async function svelteDocgen(svelteOptions: Record = {}): Promise { const cwd = process.cwd(); const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions; @@ -69,6 +138,7 @@ export async function svelteDocgen(svelteOptions: Record = {}): Pro const { createFilter } = await import('vite'); const filter = createFilter(include); + const sourceFileCache = createDocgenCache(); let docPreprocessOptions: Parameters[1] | undefined; @@ -79,69 +149,82 @@ export async function svelteDocgen(svelteOptions: Record = {}): Pro return undefined; } - if (preprocessOptions && !docPreprocessOptions) { - /* - * We can't use vitePreprocess() for the documentation - * because it uses esbuild which removes jsdoc. - * - * By default, only typescript is transpiled, and style tags are removed. - * - * Note: these preprocessors are only used to make the component - * compatible to sveltedoc-parser (no ts), not to compile - * the component. - */ - docPreprocessOptions = [replace([[//gims, '']])]; + const resource = relative(cwd, id); - try { - const ts = require.resolve('typescript'); - if (ts) { - docPreprocessOptions.unshift(typescript()); + // Get props information + const docgen = generateDocgen(resource, sourceFileCache); + const data = transformToSvelteDocParserDataItems(docgen); + + let componentDoc: SvelteComponentDoc & { keywords?: string[] } = {}; + + if (!docgen.propsRuneUsed) { + // Retain sveltedoc-parser for backward compatibility, as it can extract slot information from HTML comments. + // See: https://github.com/alexprey/sveltedoc-parser/issues/61 + // + // Note: Events are deprecated in Svelte 5, and slots cannot be used in runes mode. + + if (preprocessOptions && !docPreprocessOptions) { + /* + * We can't use vitePreprocess() for the documentation + * because it uses esbuild which removes jsdoc. + * + * By default, only typescript is transpiled, and style tags are removed. + * + * Note: these preprocessors are only used to make the component + * compatible to sveltedoc-parser (no ts), not to compile + * the component. + */ + docPreprocessOptions = [replace([[//gims, '']])]; + + try { + const ts = require.resolve('typescript'); + if (ts) { + docPreprocessOptions.unshift(typescript()); + } + } catch { + // this will error in JavaScript-only projects, this is okay } - } catch { - // this will error in JavaScript-only projects, this is okay } - } - - const resource = relative(cwd, id); - - let docOptions; - if (docPreprocessOptions) { - const rawSource = readFileSync(resource).toString(); - const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, { - filename: resource, - }); + let docOptions; + if (docPreprocessOptions) { + const rawSource = readFileSync(resource).toString(); + const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, { + filename: resource, + }); + + docOptions = { + fileContent, + }; + } else { + docOptions = { filename: resource }; + } - docOptions = { - fileContent, + // set SvelteDoc options + const options: SvelteParserOptions = { + ...docOptions, + version: 3, }; - } else { - docOptions = { filename: resource }; - } - - // set SvelteDoc options - const options: SvelteParserOptions = { - ...docOptions, - version: 3, - }; - const s = new MagicString(src); - - let componentDoc: SvelteComponentDoc & { keywords?: string[] }; - try { - componentDoc = await svelteDoc.parse(options); - } catch (error: any) { - componentDoc = { keywords: [], data: [] }; - if (logDocgen) { - logger.error(error); + try { + componentDoc = await svelteDoc.parse(options); + } catch (error: any) { + componentDoc = { keywords: [], data: [] }; + if (logDocgen) { + logger.error(error); + } } } + // Always use props info from generateDocgen + componentDoc.data = data; + // get filename for source content const file = basename(resource); componentDoc.name = basename(file); + const s = new MagicString(src); const componentName = getNameFromFilename(resource); s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`); diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte deleted file mode 100644 index cd00f38a3d57..000000000000 --- a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - -

Button TypeScript

- -