Storybook 9 support (#42)

DylanPiercey · web-flow · commit bff1cd50cc76 · 2025-07-01T11:40:17.000-07:00
* feat: storybook 9 upgrade
diff --git a/.changeset/curly-spiders-argue.md b/.changeset/curly-spiders-argue.md
@@ -0,0 +1,7 @@
+---
+"@storybook/marko-webpack": major
+"@storybook/marko-vite": major
+"@storybook/marko": major
+---
+
+Upgrade to support storybook 9.
diff --git a/README.md b/README.md
@@ -44,6 +44,8 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ## Getting Started
 
+> `@storybook/marko@10` Is for storybook@9, for storybook@8 use `@storybook/marko@9` (yes it'd be cool if these were in sync).
+
 > `@storybook/marko` >= 7 Only supports Marko 5+.
 > For Marko 4 support use `@storybook/marko@6`.
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
   "workspaces": [
     "packages/frameworks/*",
     "packages/renderers/*",
-    "tests/frameworks/*",
-    "tests/fixtures"
+    "tests/fixtures",
+    "tests/frameworks/*"
   ],
   "scripts": {
     "build": "npm run build:types && npm run build:js",
@@ -23,31 +23,31 @@
     "@babel/plugin-transform-modules-commonjs": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@babel/register": "^7.27.1",
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.12",
-    "@marko/compiler": "^5.39.21",
-    "@marko/testing-library": "^6.2.0",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.5",
+    "@marko/compiler": "^5.39.28",
+    "@marko/testing-library": "^6.3.1",
     "@marko/type-check": "^1.3.22",
-    "@playwright/test": "^1.50.1",
+    "@playwright/test": "^1.53.2",
     "@testing-library/dom": "^10.4.0",
     "@types/babel__register": "^7.17.3",
-    "@types/node": "^22.13.1",
+    "@types/node": "^24.0.8",
     "@types/resolve": "^1.20.6",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
+    "~preload": "file:scripts/preload.js",
     "c8": "^10.1.3",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "husky": "^9.1.7",
-    "jsdom": "^26.0.0",
-    "lint-staged": "^15.4.3",
-    "marko": "^5.37.32",
-    "prettier": "^3.5.0",
-    "sort-package-json": "^2.14.0",
-    "typescript": "^5.7.3",
-    "~preload": "file:scripts/preload.js"
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.1.2",
+    "marko": "^5.37.40",
+    "prettier": "^3.6.2",
+    "sort-package-json": "^3.3.1",
+    "typescript": "^5.8.3"
   }
 }
diff --git a/packages/frameworks/marko-vite/package.json b/packages/frameworks/marko-vite/package.json
@@ -39,9 +39,7 @@
   "dependencies": {
     "@marko/compiler": "^5",
     "@marko/vite": "^5",
-    "@storybook/builder-vite": "^8.5.4",
-    "@storybook/core-common": "^8.5.4",
-    "@storybook/global": "^5.0.0",
-    "@storybook/types": "^8.5.4"
+    "@storybook/builder-vite": "^9.0.15",
+    "@storybook/global": "^5.0.0"
   }
 }
diff --git a/packages/frameworks/marko-vite/src/preset.ts b/packages/frameworks/marko-vite/src/preset.ts
@@ -1,5 +1,5 @@
 import { hasVitePlugins } from "@storybook/builder-vite";
-import type { PresetProperty } from "@storybook/types";
+import type { PresetProperty } from "storybook/internal/types";
 import type { StorybookConfig } from "./types";
 
 export const core: PresetProperty<"core"> = async (config, options) => {
diff --git a/packages/frameworks/marko-vite/src/types.ts b/packages/frameworks/marko-vite/src/types.ts
@@ -5,7 +5,7 @@ import type {
 import type {
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsBase,
-} from "@storybook/types";
+} from "storybook/internal/types";
 
 type FrameworkName = "@storybook/marko-vite";
 type BuilderName = "@storybook/builder-vite";
diff --git a/packages/frameworks/marko-webpack/package.json b/packages/frameworks/marko-webpack/package.json
@@ -39,9 +39,7 @@
   "dependencies": {
     "@marko/compiler": "^5",
     "@marko/webpack": "^10",
-    "@storybook/builder-webpack5": "^8.5.4",
-    "@storybook/core-common": "^8.5.4",
-    "@storybook/global": "^5.0.0",
-    "@storybook/types": "^8.5.4"
+    "@storybook/builder-webpack5": "^9.0.15",
+    "@storybook/global": "^5.0.0"
   }
 }
diff --git a/packages/frameworks/marko-webpack/src/preset.ts b/packages/frameworks/marko-webpack/src/preset.ts
@@ -1,4 +1,4 @@
-import type { PresetProperty } from "@storybook/types";
+import type { PresetProperty } from "storybook/internal/types";
 import type { StorybookConfig } from "./types";
 
 export const core: PresetProperty<"core"> = async (config, options) => {
diff --git a/packages/frameworks/marko-webpack/src/types.ts b/packages/frameworks/marko-webpack/src/types.ts
@@ -6,7 +6,7 @@ import type {
 import type {
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsBase,
-} from "@storybook/types";
+} from "storybook/internal/types";
 
 type FrameworkName = "@storybook/marko-webpack";
 type BuilderName = "@storybook/builder-webpack5";
diff --git a/packages/renderers/marko/package.json b/packages/renderers/marko/package.json
@@ -36,10 +36,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@storybook/core-client": "^7.6.17",
-    "@storybook/docs-tools": "^8.5.4",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "^8.5.4",
-    "@storybook/types": "^8.5.4"
+    "storybook": "^9.0.15"
   }
 }
diff --git a/packages/renderers/marko/src/decorators.ts b/packages/renderers/marko/src/decorators.ts
@@ -1,5 +1,9 @@
-import { sanitizeStoryContextUpdate } from "@storybook/preview-api";
-import type { Args, DecoratorApplicator, StoryContext } from "@storybook/types";
+import type {
+  Args,
+  DecoratorApplicator,
+  StoryContext,
+} from "storybook/internal/types";
+import { sanitizeStoryContextUpdate } from "storybook/preview-api";
 import type { MarkoRenderer, MarkoStoryResult } from "./types";
 
 export const applyDecorators: DecoratorApplicator<MarkoRenderer, Args> = (
diff --git a/packages/renderers/marko/src/entry-preview-docs.ts b/packages/renderers/marko/src/entry-preview-docs.ts
@@ -1,8 +1,8 @@
-import { SourceType, enhanceArgTypes } from "@storybook/docs-tools";
+import { SourceType, enhanceArgTypes } from "storybook/internal/docs-tools";
 import type {
   Addon_DecoratorFunction,
   ArgTypesEnhancer,
-} from "@storybook/types";
+} from "storybook/internal/types";
 
 import type { MarkoStoryResult } from "./types";
 
diff --git a/packages/renderers/marko/src/preset.ts b/packages/renderers/marko/src/preset.ts
@@ -1,5 +1,5 @@
 import { join } from "path";
-import type { PresetProperty } from "@storybook/types";
+import type { PresetProperty } from "storybook/internal/types";
 
 export const previewAnnotations: PresetProperty<"previewAnnotations"> = async (
   input = [],
diff --git a/packages/renderers/marko/src/public-types.ts b/packages/renderers/marko/src/public-types.ts
@@ -7,11 +7,16 @@ import type {
   LoaderFunction,
   ProjectAnnotations,
   StoryAnnotations,
-} from "@storybook/types";
+} from "storybook/internal/types";
 
 import type { MarkoRenderer } from "./types";
 
-export type { Args, ArgTypes, Parameters, StrictArgs } from "@storybook/types";
+export type {
+  Args,
+  ArgTypes,
+  Parameters,
+  StrictArgs,
+} from "storybook/internal/types";
 
 /**
  * Metadata to configure the stories for a component.
diff --git a/packages/renderers/marko/src/render.ts b/packages/renderers/marko/src/render.ts
@@ -1,4 +1,4 @@
-import type { ArgsStoryFn, RenderContext } from "@storybook/types";
+import type { ArgsStoryFn, RenderContext } from "storybook/internal/types";
 import type { MarkoRenderer } from "./types";
 
 type Subscriptions = Record<string, (...args: unknown[]) => void>;
diff --git a/packages/renderers/marko/src/testing-api.ts b/packages/renderers/marko/src/testing-api.ts
@@ -1,14 +1,14 @@
-import {
-  composeStories as originalComposeStories,
-  composeStory as originalComposeStory,
-  setProjectAnnotations as originalSetProjectAnnotations,
-} from "@storybook/preview-api";
 import type {
   Args,
   ComposedStoryFn,
   Store_CSFExports,
   StoryAnnotationsOrFn,
-} from "@storybook/types";
+} from "storybook/internal/types";
+import {
+  composeStories as originalComposeStories,
+  composeStory as originalComposeStory,
+  setProjectAnnotations as originalSetProjectAnnotations,
+} from "storybook/preview-api";
 
 import { applyDecorators } from "./decorators";
 import type { Meta, Story, Preview } from "./public-types";
diff --git a/packages/renderers/marko/src/types.ts b/packages/renderers/marko/src/types.ts
@@ -2,7 +2,7 @@ import type {
   Args,
   StoryContext as StoryContextBase,
   WebRenderer,
-} from "@storybook/types";
+} from "storybook/internal/types";
 
 export type StoryContext<Input extends Args = Args> = StoryContextBase<
   MarkoRenderer<Input>
diff --git a/tests/frameworks/vite/.storybook/main.ts b/tests/frameworks/vite/.storybook/main.ts
@@ -3,11 +3,7 @@ import type { StorybookConfig } from "@storybook/marko-vite";
 
 export default {
   stories: [path.join(__dirname, "../../../fixtures/**/stories.ts")],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
+  addons: ["@storybook/addon-links"],
   framework: {
     name: "@storybook/marko-vite",
     options: {},
diff --git a/tests/frameworks/vite/package.json b/tests/frameworks/vite/package.json
@@ -5,16 +5,13 @@
     "storybook": "storybook dev -p $PORT --no-version-updates --disable-telemetry --no-open"
   },
   "devDependencies": {
-    "@marko/compiler": "^5.39.12",
-    "@marko/vite": "^5.0.14",
-    "@storybook/addon-essentials": "^8.5.4",
-    "@storybook/addon-interactions": "^8.5.4",
-    "@storybook/addon-links": "^8.5.4",
-    "@storybook/blocks": "^8.5.4",
+    "@marko/compiler": "^5.39.28",
+    "@marko/vite": "^5.1.7",
+    "@storybook/addon-links": "^9.0.15",
     "@storybook/marko": "*",
     "@storybook/marko-vite": "*",
-    "marko": "^5.37.14",
-    "storybook": "^8.5.4",
-    "vite": "^6.1.0"
+    "marko": "^5.37.40",
+    "storybook": "^9.0.15",
+    "vite": "^7.0.0"
   }
 }
diff --git a/tests/frameworks/webpack/.storybook/main.ts b/tests/frameworks/webpack/.storybook/main.ts
@@ -5,8 +5,6 @@ export default {
   stories: [path.join(__dirname, "../../../fixtures/**/stories.ts")],
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-webpack5-compiler-babel",
   ],
   framework: {
diff --git a/tests/frameworks/webpack/package.json b/tests/frameworks/webpack/package.json
@@ -5,17 +5,13 @@
     "storybook": "storybook dev -p ${PORT:-3000} --no-version-updates --disable-telemetry --no-open"
   },
   "devDependencies": {
-    "@marko/compiler": "^5.39.12",
+    "@marko/compiler": "^5.39.28",
     "@marko/webpack": "^10.0.1",
-    "@storybook/addon-essentials": "^8.5.4",
-    "@storybook/addon-interactions": "^8.5.4",
-    "@storybook/addon-links": "^8.5.4",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/blocks": "^8.5.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/marko": "*",
     "@storybook/marko-webpack": "*",
-    "marko": "^5.37.14",
-    "storybook": "^8.5.4",
-    "webpack": "^5.97.1"
+    "marko": "^5.37.40",
+    "storybook": "^9.0.15",
+    "webpack": "^5.99.9"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -39,9 +39,7 @@`
`39`	`39`	`"dependencies": {`
`40`	`40`	`"@marko/compiler": "^5",`
`41`	`41`	`"@marko/vite": "^5",`
`42`		`- "@storybook/builder-vite": "^8.5.4",`
`43`		`- "@storybook/core-common": "^8.5.4",`
`44`		`- "@storybook/global": "^5.0.0",`
`45`		`- "@storybook/types": "^8.5.4"`
	`42`	`+ "@storybook/builder-vite": "^9.0.15",`
	`43`	`+ "@storybook/global": "^5.0.0"`
`46`	`44`	`}`
`47`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { PresetProperty } from "@storybook/types";`
	`1`	`+import type { PresetProperty } from "storybook/internal/types";`
`2`	`2`	`import type { StorybookConfig } from "./types";`
`3`	`3`
`4`	`4`	`export const core: PresetProperty<"core"> = async (config, options) => {`