Storybook v10

CHANGELOG.md

@@ -1,5 +1,13 @@
 # storybook-solidjs-vite
 
+## 10.0.0-beta.0
+
+### Minor Changes
+
+- Support for Storybook 10 beta.2
+- Package now builds only in ESM format
+- Simplified configuration for docgen
+
 ## 9.0.2
 
 ### Patch Changes

MIGRATION.md

@@ -0,0 +1,152 @@
+# Migration Guide: Version 9 to 10
+
+## Important Core Changes
+
+Before migrating your `storybook-solidjs-vite` configuration, be aware of these critical Storybook 10 core changes:
+
+### Node.js Requirements
+
+- **Node.js 20.19+ or 22.12+** is now required
+- Storybook 10 requires these versions for ESM support without flags
+
+### ESM Requirements
+
+- **`.storybook/main.*` and `vite.config.ts` files must be valid ESM** - CJS constants (`require`, `__dirname`, `__filename`) are no longer defined
+- If you need CJS constants, define them manually:
+
+  ```typescript
+  import { createRequire } from "node:module";
+  import { dirname } from "node:path";
+  import { fileURLToPath } from "node:url";
+
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const require = createRequire(import.meta.url);
+  ```
+
+### TypeScript Configuration
+
+- **Update `tsconfig.json`** to use a `moduleResolution` that supports the `types` condition:
+  ```json
+  {
+    "compilerOptions": {
+      "moduleResolution": "bundler" // or "node16"/"nodenext"
+    }
+  }
+  ```
+
+### Addon Path Resolution
+
+- **Local addons must be fully resolved** - relative paths like `"./my-addon.ts"` must become `import.meta.resolve("./my-addon.ts")`
+
+For complete details on all Storybook 10 changes, see the [official Storybook migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-9x-to-1000).
+
+---
+
+## Configuration Changes
+
+### .storybook/main.ts Configuration
+
+The main configuration file has several important changes:
+
+#### 1. Docgen configuration
+
+**Before (v9):**
+
+```typescript
+framework: 'storybook-solidjs-vite',
+typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+        shouldExtractLiteralValuesFromEnum: true,
+        propFilter: (prop: any) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+},
+```
+
+**After (v10):**
+
+```typescript
+framework: {
+    name: 'storybook-solidjs-vite',
+    options: {
+        docgen: true, // Enable docgen (optional, defaults to true)
+        // docgenOptions: {}, // Optional react-docgen-typescript options
+    },
+},
+```
+
+#### 2. Addon Path Resolution
+
+To ensure that addons are correctly resolved, you need to use the `getAbsolutePath` helper function.
+
+**Before (v9):**
+
+```typescript
+addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    {
+        name: '@storybook/addon-vitest',
+        options: {
+            cli: false,
+        },
+    },
+],
+```
+
+**After (v10):**
+
+```typescript
+// Add this helper function at the top
+const getAbsolutePath = (packageName: string): string =>
+    path.dirname(import.meta.resolve(path.join(packageName, 'package.json'))).replace(/^file:\/\//, '');
+
+addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-links'),
+    {
+        name: getAbsolutePath('@storybook/addon-vitest'),
+        options: {
+            cli: false,
+        },
+    },
+],
+```
+
+#### 3. Removed Configuration Sections
+
+**Removed from v10:**
+
+- `typescript` docgen configuration section (moved to framework options)
+- `viteFinal` function (moved to vite.config.ts)
+
+#### 4. Vite configuration
+
+**Before (v9):**
+
+```typescript
+viteFinal: async (config) => {
+    return mergeConfig(config, {
+        plugins: [
+            ...
+        ]
+    });
+},
+```
+
+**After (v10):**
+You can use the `viteFinal` function if you want but I do recommend using `vite.config.ts` instead.
+
+```typescript
+// vite.config.ts
+export default {
+    plugins: [
+        ...
+    ]
+};
+```

README.md

@@ -9,20 +9,22 @@
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](./LICENSE)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/solidjs-community/storybook/pulls)
 
-
 Community supported [Storybook](https://storybook.js.org/) **framework adapter** for [SolidJS](https://solidjs.com/), using Vite as the bundler.
 
 ---
 
 ## 📋 Table of Contents
 
-- [Features](#features)
-- [Installation](#installation)
-- [Quick Start](#quick-start)
-- [Configuration](#configuration)
-- [Contributing](#contributing)
-- [License](#license)
-- [Maintainer](#maintainer)
+- [Storybook for SolidJS](#storybook-for-solidjs)
+  - [📋 Table of Contents](#-table-of-contents)
+  - [✨ Features](#-features)
+  - [🚀 Getting Started](#-getting-started)
+  - [📦 Manual Installation](#-manual-installation)
+  - [⚙️ Configuration](#️-configuration)
+  - [🔄 Migration Guide](#-migration-guide)
+  - [🤝 Contributing](#-contributing)
+  - [👤 Maintainer](#-maintainer)
+  - [📖 License](#-license)
 
 ---
 
@@ -41,7 +43,6 @@ Community supported [Storybook](https://storybook.js.org/) **framework adapter**
 
 ---
 
-
 ## 🚀 Getting Started
 
 The fastest way to start using Storybook with SolidJS:
@@ -64,8 +65,10 @@ Open the provided URL in your browser to view your Storybook instance.
 ---
 
 ## 📦 Manual Installation
+
 You can set everything up manually.
 To do this:
+
 1. Copy the following files from [storybook-solid-template](https://github.com/kachurun/create-solid-storybook/tree/main/packages/storybook-solid-template) to your project:
 
 - `.storybook/**`
@@ -104,6 +107,12 @@ npm run storybook
 
 ---
 
+## 🔄 Migration Guide
+
+Migrating from version 9 to 10? Check out our [Migration Guide](./MIGRATION.md) for step-by-step instructions and breaking changes.
+
+---
+
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome! Feel free to [open an issue](https://github.com/solidjs-community/storybook/issues) or submit a PR.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "storybook-solidjs-vite",
-    "version": "9.0.2",
+    "version": "10.0.0-beta.2",
     "description": "SolidJS integration with Storybook",
     "private": false,
     "keywords": [
@@ -27,41 +27,39 @@
         "url": "https://github.com/solidjs-community/storybook.git",
         "directory": "packages/storybook-solid-vite"
     },
-    "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-    },
     "license": "MIT",
+    "type": "module",
     "exports": {
-        "./package.json": "./package.json",
-        "./renderer/package.json": "./renderer/package.json",
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
+            "default": "./dist/index.js"
         },
+        "./package.json": "./package.json",
         "./preset": {
             "types": "./dist/preset.d.ts",
-            "require": "./dist/preset.js",
-            "import": "./dist/preset.mjs"
+            "default": "./dist/preset.js"
+        },
+        "./node": {
+            "types": "./dist/node/index.d.ts",
+            "default": "./dist/node/index.js"
         },
+
         "./renderer": {
             "types": "./dist/renderer/index.d.ts",
-            "import": "./dist/renderer/index.mjs",
-            "require": "./dist/renderer/index.js"
+            "default": "./dist/renderer/index.js"
         },
+        "./renderer/package.json": "./renderer/package.json",
         "./renderer/preset": "./dist/renderer/preset.js",
-        "./renderer/entry-preview.mjs": "./dist/renderer/entry-preview.mjs",
-        "./renderer/entry-preview-docs.mjs": "./dist/renderer/entry-preview-docs.mjs"
+        "./renderer/entry-preview": "./dist/renderer/entry-preview.js",
+        "./renderer/entry-preview-argtypes": "./dist/renderer/entry-preview-argtypes.js",
+        "./renderer/entry-preview-docs": "./dist/renderer/entry-preview-docs.js"
     },
     "main": "dist/index.js",
-    "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
     "files": [
         "dist/**/*",
         "bin/**/*",
         "README.md",
-        "preset.js",
         "**/*.d.ts"
     ],
     "scripts": {
@@ -71,12 +69,12 @@
         "postbuild": "bun run types",
         "types": "tsc -b tsconfig.build.json",
         "clean": "rm -rf dist && rm -rf .turbo && rm -rf node_modules",
-        "version-packages": "changeset version",
+        "version": "changeset version",
         "release": "changeset publish"
     },
     "dependencies": {
         "vite-plugin-solid": "^2.11.8",
-        "@storybook/builder-vite": "^9.1.1",
+        "@storybook/builder-vite": "next",
         "@joshwooding/vite-plugin-react-docgen-typescript": "^0.6.1",
         "@storybook/global": "^5.0.0"
     },
@@ -104,7 +102,7 @@
     },
     "peerDependencies": {
         "solid-js": "^1.9.0",
-        "storybook": "^9.0.0",
+        "storybook": "next",
         "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
         "typescript": ">= 4.9.x"
     },
@@ -114,6 +112,7 @@
         }
     },
     "publishConfig": {
-        "access": "public"
+        "access": "public",
+        "tag": "next"
     }
 }

preset.js

@@ -1 +1 @@
-module.exports = require('./dist/preset');
+export * from './dist/preset.js';

src/node/index.ts

@@ -0,0 +1,5 @@
+import type { StorybookConfig } from '../types';
+
+export function defineMain(config: StorybookConfig) {
+    return config;
+}