feat: upgrade to storybook 8 (#28)

* feat: upgrade to storybook 8 --------- Co-authored-by: DylanPiercey <DylanPiercey@users.noreply.github.com>
storybookjs · Mar 19, 2024 · 63aa122 · 63aa122
1 parent 94fe4ae
commit 63aa122
Show file tree

Hide file tree

Showing 28 changed files with 2,335 additions and 4,360 deletions.
diff --git a/.changeset/giant-laws-promise.md b/.changeset/giant-laws-promise.md
@@ -0,0 +1,7 @@
+---
+"@storybook/marko-webpack": major
+"@storybook/marko-vite": major
+"@storybook/marko": major
+---
+
+Upgrade to storybook 8. See https://storybook.js.org/docs/migration-guide for changes
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,29 +25,29 @@
     "@babel/register": "^7.23.7",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@marko/compiler": "^5.34.7",
+    "@marko/compiler": "^5.35.7",
     "@marko/testing-library": "^6.2.0",
     "@marko/type-check": "^1.1.7",
     "@playwright/test": "^1.42.1",
     "@testing-library/dom": "^9.3.4",
     "@types/babel__register": "^7.17.3",
-    "@types/node": "^20.11.24",
+    "@types/node": "^20.11.28",
     "@types/resolve": "^1.20.6",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "c8": "^9.1.0",
-    "esbuild": "^0.20.1",
+    "esbuild": "^0.20.2",
     "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.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
-    "marko": "^5.32.15",
+    "marko": "^5.33.8",
     "prettier": "^3.2.5",
     "sort-package-json": "^2.8.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "~preload": "file:scripts/preload.js"
   }
 }
diff --git a/packages/frameworks/marko-vite/package.json b/packages/frameworks/marko-vite/package.json
@@ -37,14 +37,11 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@babel/core": "^7",
     "@marko/compiler": "^5",
     "@marko/vite": "^4",
-    "@storybook/builder-vite": "^7.6.4",
-    "@storybook/core-common": "^7.6.4",
+    "@storybook/builder-vite": "^8.0.0",
+    "@storybook/core-common": "^8.0.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/types": "^7.6.4",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@storybook/types": "^8.0.0"
   }
 }
diff --git a/packages/frameworks/marko-vite/src/preset.ts b/packages/frameworks/marko-vite/src/preset.ts
@@ -2,12 +2,8 @@ import { hasVitePlugins } from "@storybook/builder-vite";
 import type { PresetProperty } from "@storybook/types";
 import type { StorybookConfig } from "./types";
 
-export const core: PresetProperty<"core", StorybookConfig> = async (
-  config,
-  options,
-) => {
-  const framework =
-    await options.presets.apply<StorybookConfig["framework"]>("framework");
+export const core: PresetProperty<"core"> = async (config, options) => {
+  const framework = await options.presets.apply("framework");
 
   return {
     ...config,

diff --git a/packages/frameworks/marko-vite/src/types.ts b/packages/frameworks/marko-vite/src/types.ts
@@ -7,8 +7,8 @@ import type {
   TypescriptOptions as TypescriptOptionsBase,
 } from "@storybook/types";
 
-type FrameworkName = "@storybook/marko-vite" | (string & NonNullable<unknown>);
-type BuilderName = "@storybook/builder-vite" | (string & NonNullable<unknown>);
+type FrameworkName = "@storybook/marko-vite";
+type BuilderName = "@storybook/builder-vite";
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

diff --git a/packages/frameworks/marko-webpack/package.json b/packages/frameworks/marko-webpack/package.json
@@ -37,14 +37,11 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@babel/core": "^7",
     "@marko/compiler": "^5",
     "@marko/webpack": "^9",
-    "@storybook/builder-webpack5": "^7.6.4",
-    "@storybook/core-common": "^7.6.4",
+    "@storybook/builder-webpack5": "^8.0.0",
+    "@storybook/core-common": "^8.0.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/types": "^7.6.4",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@storybook/types": "^8.0.0"
   }
 }
diff --git a/packages/frameworks/marko-webpack/src/preset.ts b/packages/frameworks/marko-webpack/src/preset.ts
@@ -1,12 +1,8 @@
 import type { PresetProperty } from "@storybook/types";
 import type { StorybookConfig } from "./types";
 
-export const core: PresetProperty<"core", StorybookConfig> = async (
-  config,
-  options,
-) => {
-  const framework =
-    await options.presets.apply<StorybookConfig["framework"]>("framework");
+export const core: PresetProperty<"core"> = async (config, options) => {
+  const framework = await options.presets.apply("framework");
 
   return {
     ...config,
@@ -35,9 +31,5 @@ export const webpackFinal: StorybookConfig["webpackFinal"] = async (
         },
       ],
     },
-    resolve: {
-      ...baseConfig.resolve,
-      extensions: [...baseConfig.resolve!.extensions!, ".marko"],
-    },
   };
 };
diff --git a/packages/frameworks/marko-webpack/src/types.ts b/packages/frameworks/marko-webpack/src/types.ts
@@ -8,12 +8,8 @@ import type {
   TypescriptOptions as TypescriptOptionsBase,
 } from "@storybook/types";
 
-type FrameworkName =
-  | "@storybook/marko-webpack"
-  | (string & NonNullable<unknown>);
-type BuilderName =
-  | "@storybook/builder-webpack5"
-  | (string & NonNullable<unknown>);
+type FrameworkName = "@storybook/marko-webpack";
+type BuilderName = "@storybook/builder-webpack5";
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;

diff --git a/packages/renderers/marko/package.json b/packages/renderers/marko/package.json
@@ -17,10 +17,10 @@
   "exports": {
     "./package.json": "./package.json",
     "./*.d.ts": "./*.d.ts",
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "import": "./dist/config.mjs",
-      "default": "./dist/config.js"
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "import": "./dist/preset.mjs",
+      "default": "./dist/preset.js"
     },
     ".": {
       "types": "./dist/index.d.ts",
@@ -36,10 +36,10 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@storybook/core-client": "^7.6.4",
-    "@storybook/docs-tools": "^7.6.4",
+    "@storybook/core-client": "^7.6.17",
+    "@storybook/docs-tools": "^8.0.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "^7.6.4",
-    "@storybook/types": "^7.6.4"
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/types": "^8.0.0"
   }
 }
diff --git a/packages/renderers/marko/preset.js b/packages/renderers/marko/preset.js
@@ -0,0 +1 @@
+module.exports = require("./dist/preset");
diff --git a/packages/renderers/marko/preview.js b/packages/renderers/marko/preview.js
diff --git a/packages/renderers/marko/src/config.ts b/packages/renderers/marko/src/config.ts
diff --git a/packages/renderers/marko/src/decorators.ts b/packages/renderers/marko/src/decorators.ts
@@ -2,7 +2,7 @@ import { sanitizeStoryContextUpdate } from "@storybook/preview-api";
 import type { Args, DecoratorApplicator, StoryContext } from "@storybook/types";
 import type { MarkoRenderer, MarkoStoryResult } from "./types";
 
-export const decorateStory: DecoratorApplicator<MarkoRenderer, Args> = (
+export const applyDecorators: DecoratorApplicator<MarkoRenderer, Args> = (
   storyFn,
   decorators,
 ) =>

diff --git a/packages/renderers/marko/src/docs/config.ts → ...renderers/marko/src/entry-preview-docs.ts b/packages/renderers/marko/src/docs/config.ts → ...renderers/marko/src/entry-preview-docs.ts
@@ -4,7 +4,7 @@ import type {
   ArgTypesEnhancer,
 } from "@storybook/types";
 
-import type { MarkoStoryResult } from "../types";
+import type { MarkoStoryResult } from "./types";
 
 export const decorators: Addon_DecoratorFunction<MarkoStoryResult>[] = [];
 
@@ -19,3 +19,5 @@ export const parameters = {
 };
 
 export const argTypesEnhancers: ArgTypesEnhancer[] = [enhanceArgTypes];
+
+export { applyDecorators } from "./decorators";
diff --git a/packages/renderers/marko/src/entry-preview.ts b/packages/renderers/marko/src/entry-preview.ts
@@ -0,0 +1,3 @@
+export { renderToCanvas, render } from "./render";
+
+export const parameters = { renderer: "marko" };
diff --git a/packages/renderers/marko/src/index.ts b/packages/renderers/marko/src/index.ts
@@ -1,7 +1,6 @@
 /// <reference types="marko" />
 
 import "./globals";
-export * from "./public-api";
 export * from "./public-types";
 export * from "./testing-api";
 

diff --git a/packages/renderers/marko/src/preset.ts b/packages/renderers/marko/src/preset.ts
@@ -0,0 +1,15 @@
+import { join } from "path";
+import type { PresetProperty } from "@storybook/types";
+
+export const previewAnnotations: PresetProperty<"previewAnnotations"> = async (
+  input = [],
+  options,
+) => {
+  const docsEnabled =
+    Object.keys(await options.presets.apply("docs", {}, options)).length > 0;
+  return [
+    ...input,
+    join(__dirname, "entry-preview.mjs"),
+    ...(docsEnabled ? [join(__dirname, "entry-preview-docs.mjs")] : []),
+  ];
+};
diff --git a/packages/renderers/marko/src/public-api.ts b/packages/renderers/marko/src/public-api.ts
diff --git a/packages/renderers/marko/src/testing-api.ts b/packages/renderers/marko/src/testing-api.ts
@@ -1,4 +1,3 @@
-import { deprecate } from "@storybook/client-logger";
 import {
   composeStories as originalComposeStories,
   composeStory as originalComposeStory,
@@ -11,7 +10,7 @@ import type {
   StoryAnnotationsOrFn,
 } from "@storybook/types";
 
-import { decorateStory } from "./decorators";
+import { applyDecorators } from "./decorators";
 import type { Meta, Story, Preview } from "./public-types";
 import { render } from "./render";
 import type { MarkoRenderer } from "./types";
@@ -50,21 +49,10 @@ export function setProjectAnnotations(projectAnnotations: Preview | Preview[]) {
   originalSetProjectAnnotations<MarkoRenderer>(projectAnnotations);
 }
 
-/** Preserved for users migrating from `@storybook/marko@7`.
- *
- * @deprecated Use setProjectAnnotations instead
- */
-export function setGlobalConfig(projectAnnotations: Preview | Preview[]) {
-  deprecate(
-    `setGlobalConfig is deprecated. Use setProjectAnnotations instead.`,
-  );
-  setProjectAnnotations(projectAnnotations);
-}
-
 // This will not be necessary once we have auto preset loading
 const defaultProjectAnnotations: Preview = {
   render,
-  applyDecorators: decorateStory,
+  applyDecorators,
 };
 
 /**