Merge pull request #55 from storybookjs/norbert/upgrade-sb-10-esm-only

upgrade to sb10 and esm-only

Author: yannbf

.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' },
           },
         ],
       ],

.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
+          yarn release

.github/workflows/test.yml

@@ -7,16 +7,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      
+
       - name: Enable Corepack
         run: corepack enable
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
 
+      - name: Install dependencies
+        run: yarn install
+
       - name: Build coverage addon
-        run: | 
-          yarn install
+        run: |
           yarn build
 
       - name: Run tests in webpack example
@@ -25,11 +27,14 @@ jobs:
           npx playwright install --with-deps
           yarn test-storybook:ci-coverage
         working-directory: examples/webpack5
+        env:
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
 
       - name: Run tests in vite example
         run: |
           yarn install
           npx playwright install --with-deps
           yarn test-storybook:ci-coverage
         working-directory: examples/vite
-
+        env:
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false

.prettierignore

@@ -1 +1,6 @@
-{}
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "tabWidth": 2
+}

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.vscode/settings.json

@@ -2,6 +2,21 @@
 
 Tools to support code coverage in Storybook and the [Storybook test runner](https://github.com/storybookjs/test-runner). It supports Storybook projects that use **Webpack5** or **Vite**.
 
+> [!WARNING]
+> If you're using Storybook in a Vite-based project, you might want to use [Storybook's Vitest integration](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon?ref=test-runner-migration) instead. It's faster, provides code coverage out of the box (so you don't need this addon anymore), and integrates well with all Storybook's latest features.
+
+## Requirements
+
+- Storybook@>=10.0.0
+
+### Version compatibility
+
+| Addon coverage version | Storybook version |
+| ---------------------- | ----------------- |
+| ^3.0.0                 | ^10.0.0           |
+| ^2.0.0                 | ^9.0.0            |
+| ^2.0.0                 | ^8.0.0            |
+
 ### Installation
 
 Install this addon by adding the `@storybook/addon-coverage` dependency:
@@ -14,7 +29,7 @@ And by registering it in your `.storybook/main.js`:
 
 ```js
 export default {
-  addons: ["@storybook/addon-coverage"],
+  addons: ['@storybook/addon-coverage'],
 };
 ```
 
@@ -26,10 +41,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 +74,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 +95,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 +113,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

README.md

@@ -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-coverage'],
 
   framework: {
-    name: "@storybook/react-vite",
+    name: '@storybook/react-vite',
     options: {},
   },
 };

examples/vite/.storybook/main.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$/,
     },
   },
-}
+};

examples/vite/.storybook/preview.ts

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />