Merge remote-tracking branch 'origin/next' into tom/sb-813-move-remaining-examples-to-old-examples

2025-04-06 07:21:16 +08:00 · 2022-10-25 15:24:12 +11:00 · 2022-10-25 15:24:12 +11:00 · aad3ca1eb3
commit aad3ca1eb3
parent 53d64da53d 880b81517b
10 changed files with 39 additions and 31 deletions
--- a/README.md
+++ b/README.md
@ -165,7 +165,7 @@ If you're looking for material to use in your presentation about storybook, like
 - Tweeting via [@storybookjs](https://twitter.com/storybookjs)
 - Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs)
 - Chatting on [Discord](https://discord.gg/storybook)
- Videos and streams at [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
+- Videos and streams at [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)

 ## Contributing

--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@ -61,7 +61,7 @@
    "@storybook/csf": "next",
    "@storybook/csf-tools": "7.0.0-alpha.42",
    "@storybook/docs-tools": "7.0.0-alpha.42",
-    "@storybook/mdx2-csf": "0.1.0-next.0",
+    "@storybook/mdx2-csf": "next",
    "@storybook/node-logger": "7.0.0-alpha.42",
    "@storybook/postinstall": "7.0.0-alpha.42",
    "@storybook/preview-web": "7.0.0-alpha.42",
--- a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
+++ b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
@ -0,0 +1,18 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import globalThis from 'global';
+
+<Meta title="addons/docs/stories-mdx/iframe" component={globalThis.Components.Button} />
+
+# MDX Stories
+
+This file demonstrates rendering iframe stories in MDX.
+
+<Canvas>
+  <Story name="Primary" args={{ label: 'Primary' }} inline={false} />
+</Canvas>
+
+<ArgsTable story="^" />
+
+<Canvas>
+  <Story name="Secondary" args={{ label: 'Secondary' }} inline={false} />
+</Canvas>
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@ -60,7 +60,6 @@
    "@storybook/node-logger": "7.0.0-alpha.42",
    "@storybook/preview-web": "7.0.0-alpha.42",
    "@storybook/web-components": "7.0.0-alpha.42",
-    "@vitejs/plugin-vue": "^3.0.3",
    "magic-string": "^0.26.1",
    "vite": "3"
  },
--- a/code/lib/builder-manager/package.json
+++ b/code/lib/builder-manager/package.json
@ -54,6 +54,7 @@
    "express": "^4.17.1",
    "fs-extra": "^9.0.1",
    "process": "^0.11.10",
+    "slash": "^3.0.0",
    "util": "^0.12.4"
  },
  "devDependencies": {
--- a/code/lib/builder-manager/src/utils/files.ts
+++ b/code/lib/builder-manager/src/utils/files.ts
@ -1,6 +1,7 @@
 import { OutputFile } from 'esbuild';
 import fs from 'fs-extra';
 import { join } from 'path';
+import slash from 'slash';
 import { Compilation } from '../types';

 export async function readOrderedFiles(
@ -26,6 +27,6 @@ export async function readOrderedFiles(
 export function sanitizePath(file: OutputFile, addonsDir: string) {
  const filePath = file.path.replace(addonsDir, '');
  const location = join(addonsDir, filePath);
-  const url = `./sb-addons${filePath.split('/').map(encodeURIComponent).join('/')}`;
+  const url = `./sb-addons${slash(filePath).split('/').map(encodeURIComponent).join('/')}`;
  return { location, url };
 }
--- a/code/lib/builder-vite/package.json
+++ b/code/lib/builder-vite/package.json
@ -22,7 +22,7 @@
    "@storybook/client-api": "7.0.0-alpha.42",
    "@storybook/client-logger": "7.0.0-alpha.42",
    "@storybook/core-common": "7.0.0-alpha.42",
-    "@storybook/mdx2-csf": "0.1.0-next.0",
+    "@storybook/mdx2-csf": "next",
    "@storybook/node-logger": "7.0.0-alpha.42",
    "@storybook/preview-web": "7.0.0-alpha.42",
    "@storybook/source-loader": "7.0.0-alpha.42",
--- a/code/lib/builder-vite/src/plugins/mdx-plugin.ts
+++ b/code/lib/builder-vite/src/plugins/mdx-plugin.ts
@ -1,23 +1,13 @@
-import type { Options } from '@storybook/core-common';
 import type { Plugin } from 'vite';
 import { createFilter } from 'vite';

 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');

-function injectRenderer(code: string, mdx2: boolean) {
-  if (mdx2) {
-    return `
+function injectRenderer(code: string) {
+  return `
           import React from 'react';
           ${code}
           `;
-  }
-
-  return `
-        /* @jsx mdx */
-        import React from 'react';
-        import { mdx } from '@mdx-js/react';
-        ${code}
-        `;
 }

 /**
@ -28,9 +18,7 @@ function injectRenderer(code: string, mdx2: boolean) {
 *
 * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
 */
-export function mdxPlugin(options: Options): Plugin {
-  const { features } = options;
-
+export function mdxPlugin(): Plugin {
  let reactRefresh: Plugin | undefined;
  const include = /\.mdx?$/;
  const filter = createFilter(include);
@ -60,7 +48,7 @@ export function mdxPlugin(options: Options): Plugin {

      const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));

-      const modifiedCode = injectRenderer(mdxCode, true);
+      const modifiedCode = injectRenderer(mdxCode);

      // Hooks in recent rollup versions can be functions or objects, and though react hasn't changed, the typescript defs have
      const rTransform = reactRefresh?.transform;
--- a/code/lib/builder-vite/src/vite-config.ts
+++ b/code/lib/builder-vite/src/vite-config.ts
@ -79,7 +79,7 @@ export async function pluginConfig(options: ExtendedOptions) {
  const plugins = [
    codeGeneratorPlugin(options),
    // sourceLoaderPlugin(options),
-    mdxPlugin(options),
+    mdxPlugin(),
    injectExportOrderPlugin,
    stripStoryHMRBoundary(),
    {
--- a/code/yarn.lock
+++ b/code/yarn.lock
@ -2124,7 +2124,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.12.11, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.8, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.19.3, @babel/types@npm:^7.19.4, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.12.11, @babel/types@npm:^7.14.8, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.8, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.19.3, @babel/types@npm:^7.19.4, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6":
  version: 7.19.4
  resolution: "@babel/types@npm:7.19.4"
  dependencies:
@ -5457,7 +5457,7 @@ __metadata:
    "@storybook/csf": next
    "@storybook/csf-tools": 7.0.0-alpha.42
    "@storybook/docs-tools": 7.0.0-alpha.42
-    "@storybook/mdx2-csf": 0.1.0-next.0
+    "@storybook/mdx2-csf": next
    "@storybook/node-logger": 7.0.0-alpha.42
    "@storybook/postinstall": 7.0.0-alpha.42
    "@storybook/preview-web": 7.0.0-alpha.42
@ -6111,6 +6111,7 @@ __metadata:
    express: ^4.17.1
    fs-extra: ^9.0.1
    process: ^0.11.10
+    slash: ^3.0.0
    typescript: ~4.6.3
    util: ^0.12.4
  languageName: unknown
@ -6124,7 +6125,7 @@ __metadata:
    "@storybook/client-api": 7.0.0-alpha.42
    "@storybook/client-logger": 7.0.0-alpha.42
    "@storybook/core-common": 7.0.0-alpha.42
-    "@storybook/mdx2-csf": 0.1.0-next.0
+    "@storybook/mdx2-csf": next
    "@storybook/node-logger": 7.0.0-alpha.42
    "@storybook/preview-web": 7.0.0-alpha.42
    "@storybook/source-loader": 7.0.0-alpha.42
@ -6772,19 +6773,20 @@ __metadata:
  languageName: node
  linkType: hard

-"@storybook/mdx2-csf@npm:0.1.0-next.0":
-  version: 0.1.0-next.0
-  resolution: "@storybook/mdx2-csf@npm:0.1.0-next.0"
+"@storybook/mdx2-csf@npm:next":
+  version: 0.1.0-next.2
+  resolution: "@storybook/mdx2-csf@npm:0.1.0-next.2"
  dependencies:
    "@babel/generator": ^7.12.11
    "@babel/parser": ^7.12.11
+    "@babel/types": ^7.14.8
    "@mdx-js/mdx": ^2.0.0
    estree-to-babel: ^4.9.0
    hast-util-to-estree: ^2.0.2
    js-string-escape: ^1.0.1
    loader-utils: ^2.0.0
    lodash: ^4.17.21
-  checksum: 116292c2bc658ad575dbc31c1aa6530f57e7c392ee1728143a8b31686e38ecb3fac6ccea860ce9860fe78167dabe6e09bed5ca5089594851b7733091ad0f91e9
+  checksum: 4375d35d49976a0f916dc9311af5e29845892ed49bd8ad1fcc994294617898b19b4fac17b7a4c851f720cb491ee2c6e44e879341cf411685e02956dbcaef57cf
  languageName: node
  linkType: hard

@ -7931,7 +7933,6 @@ __metadata:
    "@storybook/preview-web": 7.0.0-alpha.42
    "@storybook/web-components": 7.0.0-alpha.42
    "@types/node": ^16.0.0
-    "@vitejs/plugin-vue": ^3.0.3
    magic-string: ^0.26.1
    typescript: ~4.6.3
    vite: ^3.1.0
@ -9496,7 +9497,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@vitejs/plugin-vue@npm:^3.0.0, @vitejs/plugin-vue@npm:^3.0.3":
+"@vitejs/plugin-vue@npm:^3.0.0":
  version: 3.1.2
  resolution: "@vitejs/plugin-vue@npm:3.1.2"
  peerDependencies: