From 9d1747331721123c09e3c01232aa048540b9e97f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 10 Nov 2025 13:30:05 +0100 Subject: [PATCH 01/10] upgrade to sb10 and esm-only --- .babelrc.js | 20 +- .github/workflows/release.yml | 6 +- .github/workflows/test.yml | 5 +- .prettierignore | 1 - .prettierrc | 7 +- .vscode/settings.json | 3 + README.md | 18 +- examples/vite/.storybook/main.ts | 10 +- examples/vite/.storybook/preview.ts | 12 +- examples/vite/index.html | 2 +- examples/vite/src/App.tsx | 20 +- examples/vite/src/main.tsx | 10 +- examples/vite/src/stories/Button.stories.tsx | 26 +- examples/vite/src/stories/Button.tsx | 8 +- examples/vite/src/stories/Header.stories.tsx | 16 +- examples/vite/src/stories/Header.tsx | 15 +- examples/vite/src/stories/Page.stories.tsx | 16 +- examples/vite/src/stories/Page.tsx | 12 +- examples/vite/vite.config.ts | 8 +- examples/webpack5/.babelrc | 2 +- examples/webpack5/.storybook/main.ts | 12 +- examples/webpack5/.storybook/preview.ts | 12 +- examples/webpack5/README.md | 2 +- examples/webpack5/stories/Button.stories.tsx | 28 +- examples/webpack5/stories/Button.tsx | 8 +- examples/webpack5/stories/Header.stories.tsx | 18 +- examples/webpack5/stories/Header.tsx | 15 +- examples/webpack5/stories/Page.stories.tsx | 18 +- examples/webpack5/stories/Page.tsx | 12 +- examples/webpack5/webpack.config.js | 10 +- package.json | 19 +- preset.js | 2 +- src/constants.ts | 36 +- src/loader/webpack5-istanbul-loader.ts | 45 +- src/nyc-config.ts | 8 +- src/preset.ts | 56 +- src/types.ts | 4 +- src/webpack5-exclude.ts | 10 +- tsconfig.json | 11 +- tsup.config.ts | 24 +- yarn.lock | 1361 ++++++++++-------- 41 files changed, 1017 insertions(+), 911 deletions(-) delete mode 100644 .prettierignore create mode 100644 .vscode/settings.json diff --git a/.babelrc.js b/.babelrc.js index 8a5ab9a..91726ae 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -1,28 +1,28 @@ module.exports = { presets: [ [ - "@babel/preset-env", + '@babel/preset-env', { shippedProposals: true, - useBuiltIns: "usage", - corejs: "3", - targets: { node: "14" }, + useBuiltIns: 'usage', + corejs: '3', + targets: { node: '14' }, }, ], - "@babel/preset-typescript", - "@babel/preset-react", + '@babel/preset-typescript', + '@babel/preset-react', ], env: { esm: { presets: [ [ - "@babel/preset-env", + '@babel/preset-env', { shippedProposals: true, - useBuiltIns: "usage", - corejs: "3", + useBuiltIns: 'usage', + corejs: '3', modules: false, - targets: { chrome: "100" }, + targets: { chrome: '100' }, }, ], ], diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 94a973c..85acea9 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -8,10 +8,10 @@ jobs: if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')" steps: - uses: actions/checkout@v3 - + - name: Enable Corepack run: corepack enable - + - name: Prepare repository run: git fetch --unshallow --tags @@ -26,4 +26,4 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} run: | - yarn release \ No newline at end of file + yarn release diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 73a363b..05a8f40 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -7,7 +7,7 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - + - name: Enable Corepack run: corepack enable @@ -15,7 +15,7 @@ jobs: uses: actions/setup-node@v4 - name: Build coverage addon - run: | + run: | yarn install yarn build @@ -32,4 +32,3 @@ jobs: npx playwright install --with-deps yarn test-storybook:ci-coverage working-directory: examples/vite - diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 1521c8b..0000000 --- a/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -dist diff --git a/.prettierrc b/.prettierrc index 0967ef4..c523e2f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,6 @@ -{} +{ + "singleQuote": true, + "trailingComma": "es5", + "printWidth": 120, + "tabWidth": 2 +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..25fa621 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/README.md b/README.md index 8ff8cb6..f65b349 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ And by registering it in your `.storybook/main.js`: ```js export default { - addons: ["@storybook/addon-coverage"], + addons: ['@storybook/addon-coverage'], }; ``` @@ -26,10 +26,10 @@ This addon instruments your code by using a custom wrapper around [istanbul-lib- export default { addons: [ { - name: "@storybook/addon-coverage", + name: '@storybook/addon-coverage', options: { istanbul: { - include: ["**/stories/**"], + include: ['**/stories/**'], }, }, }, @@ -59,7 +59,7 @@ export default { > If you're using TypeScript, you can import the type for the options like so: > > ```ts -> import type { AddonOptionsWebpack } from "@storybook/addon-coverage"; +> import type { AddonOptionsWebpack } from '@storybook/addon-coverage'; > ``` **The available options if your project uses Vite are as follows:** @@ -80,10 +80,9 @@ export default { > If you're using TypeScript, you can import the type for the options like so: > > ```ts -> import type { AddonOptionsVite } from "@storybook/addon-coverage"; +> import type { AddonOptionsVite } from '@storybook/addon-coverage'; > ``` - ## Troubleshooting ### The coverage addon doesn't support optimized builds @@ -99,13 +98,10 @@ export default { // Your Storybook configuration goes here build: { test: { - disabledAddons: [ - '@storybook/addon-docs', - '@storybook/addon-essentials/docs', - ], + disabledAddons: ['@storybook/addon-docs', '@storybook/addon-essentials/docs'], }, }, -} +}; ``` ### Development scripts diff --git a/examples/vite/.storybook/main.ts b/examples/vite/.storybook/main.ts index 567faf0..7a5c70f 100644 --- a/examples/vite/.storybook/main.ts +++ b/examples/vite/.storybook/main.ts @@ -1,14 +1,10 @@ export default { - stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"], + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - "@storybook/addon-essentials", - "@storybook/addon-interactions", - "@storybook/addon-coverage", - ], + addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-coverage'], framework: { - name: "@storybook/react-vite", + name: '@storybook/react-vite', options: {}, }, }; diff --git a/examples/vite/.storybook/preview.ts b/examples/vite/.storybook/preview.ts index 1f07351..4481fcf 100644 --- a/examples/vite/.storybook/preview.ts +++ b/examples/vite/.storybook/preview.ts @@ -1,7 +1,9 @@ -export const decorators = [(StoryFn) => { - console.log(globalThis.__coverage__) - return StoryFn() -}] +export const decorators = [ + (StoryFn) => { + console.log(globalThis.__coverage__); + return StoryFn(); + }, +]; export const parameters = { controls: { @@ -10,4 +12,4 @@ export const parameters = { date: /Date$/, }, }, -} \ No newline at end of file +}; diff --git a/examples/vite/index.html b/examples/vite/index.html index e0d1c84..e4b78ea 100644 --- a/examples/vite/index.html +++ b/examples/vite/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index cd20136..f1f87e6 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -1,9 +1,9 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import './App.css' +import { useState } from 'react'; +import reactLogo from './assets/react.svg'; +import './App.css'; function App() { - const [count, setCount] = useState(0) + const [count, setCount] = useState(0); return (
@@ -17,18 +17,14 @@ function App() {

Vite + React

- +

Edit src/App.tsx and save to test HMR

-

- Click on the Vite and React logos to learn more -

+

Click on the Vite and React logos to learn more

- ) + ); } -export default App +export default App; diff --git a/examples/vite/src/main.tsx b/examples/vite/src/main.tsx index 611e848..a2bf01b 100644 --- a/examples/vite/src/main.tsx +++ b/examples/vite/src/main.tsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import './index.css'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( -) +); diff --git a/examples/vite/src/stories/Button.stories.tsx b/examples/vite/src/stories/Button.stories.tsx index e0f7cc8..b3580d7 100644 --- a/examples/vite/src/stories/Button.stories.tsx +++ b/examples/vite/src/stories/Button.stories.tsx @@ -1,15 +1,15 @@ -import type { StoryFn, Meta } from "@storybook/react"; +import type { StoryFn, Meta } from '@storybook/react'; -import { Button } from "./Button"; -import { expect } from "@storybook/test"; +import { Button } from './Button'; +import { expect } from '@storybook/test'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { - title: "Example/Button", + title: 'Example/Button', component: Button, // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { - backgroundColor: { control: "color" }, + backgroundColor: { control: 'color' }, }, } as Meta; @@ -20,28 +20,26 @@ export const Primary = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args Primary.args = { primary: true, - label: "Button", + label: 'Button', }; Primary.play = async () => { const coverage = (globalThis as any).__coverage__; - await expect( - Object.keys(coverage).find((cvg) => cvg.endsWith("Button.tsx")) - ).toBeTruthy(); + await expect(Object.keys(coverage).find((cvg) => cvg.endsWith('Button.tsx'))).toBeTruthy(); }; export const Secondary = Template.bind({}); Secondary.args = { - label: "Button", + label: 'Button', }; export const Large = Template.bind({}); Large.args = { - size: "large", - label: "Button", + size: 'large', + label: 'Button', }; export const Small = Template.bind({}); Small.args = { - size: "small", - label: "Button", + size: 'small', + label: 'Button', }; diff --git a/examples/vite/src/stories/Button.tsx b/examples/vite/src/stories/Button.tsx index c33be6e..66f8fd3 100644 --- a/examples/vite/src/stories/Button.tsx +++ b/examples/vite/src/stories/Button.tsx @@ -27,13 +27,7 @@ interface ButtonProps { /** * Primary UI component for user interaction */ -export const Button = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: ButtonProps) => { +export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return (