Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite: Support legacyMdx1 fallback flag #20823

Merged
merged 8 commits into from
Feb 13, 2023
Merged

Vite: Support legacyMdx1 fallback flag #20823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d49daf8
Vite: support legacyMdx1 fallback flag
IanVS Jan 30, 2023
6b3098d
Move migration note a bit further down the list
IanVS Jan 30, 2023
e72920e
Merge remote-tracking branch 'origin/next' into vite/mdx1
IanVS Feb 6, 2023
92a7ab2
Fix formatting
IanVS Feb 6, 2023
2cb7963
Merge remote-tracking branch 'origin/next' into vite/mdx1
IanVS Feb 6, 2023
39ebbce
Inject mdx renderer to code
IanVS Feb 7, 2023
27e24fc
Merge remote-tracking branch 'origin/next' into vite/mdx1
IanVS Feb 13, 2023
fddc1ae
Remove compiler injection
IanVS Feb 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
- [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This did not have a TOC before my vscode addon picked it up and added it. But I think this change isn't the most general for all users, so I moved it from the top to lower on the list. I honestly have a bit of a hard time understanding what users need to do based on the migration instructions, but maybe others do.

- [Core addons](#core-addons)
- [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
- [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
Expand Down Expand Up @@ -282,12 +283,6 @@ A number of these changes can be made automatically by the Storybook CLI. To tak

### 7.0 breaking changes

#### Story context is prepared before for supporting fine grained updates

This change modifies the way Storybook prepares stories to avoid reactive args to get lost for fine-grained updates JS frameworks as `SolidJS` or `Vue`. That's because those frameworks handle args/props as proxies behind the scenes to make reactivity work. So when `argType` mapping was done in `prepareStory` the Proxies were destroyed and args becomes a plain object again, losing the reactivity.

For avoiding that, this change passes the mapped args instead of raw args at `renderToCanvas` so that the proxies stay intact. Also decorators will benefit from this as well by receiving mapped args instead of raw args.

#### Dropped support for Node 15 and below

Storybook 7.0 requires **Node 16** or above. If you are using an older version of Node, you will need to upgrade or keep using Storybook 6 in the meantime.
Expand Down Expand Up @@ -629,6 +624,12 @@ In 7.0 we've removed the following feature flags:
| `breakingChangesV7` | This flag is no longer needed and should be deleted. |
| `babelModeV7` | See [Babel mode v7 exclusively](#babel-mode-v7-exclusively) |

#### Story context is prepared before for supporting fine grained updates

This change modifies the way Storybook prepares stories to avoid reactive args to get lost for fine-grained updates JS frameworks as `SolidJS` or `Vue`. That's because those frameworks handle args/props as proxies behind the scenes to make reactivity work. So when `argType` mapping was done in `prepareStory` the Proxies were destroyed and args becomes a plain object again, losing the reactivity.

For avoiding that, this change passes the mapped args instead of raw args at `renderToCanvas` so that the proxies stay intact. Also decorators will benefit from this as well by receiving mapped args instead of raw args.

### Core addons

#### Removed auto injection of @storybook/addon-actions decorator
Expand Down Expand Up @@ -1088,8 +1089,6 @@ export default {

NOTE: This only affects `.(stories|story).mdx` files. Notably, if you want to use Storybook 7's "pure" `.mdx` format, you'll need to use MDX2 for that.

NOTE: Legacy MDX1 support is only for Webpack projects. There is currently no legacy support for Vite.

#### Default docs styles will leak into non-story user components

Storybook's default styles in docs are now globally applied to any element instead of using classes. This means that any component that you add directly in a docs file will also get the default styles.
Expand Down
28 changes: 14 additions & 14 deletions code/frameworks/sveltekit/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,20 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann
All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath.
However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon:

| **Module** | **Status** | **Note** |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. |
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Planned for 7.1 | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1 | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer |
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | Mocks planned for 7.1, so you can set different store values per story. |
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | |
| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | |
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers |
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | |
| **Module** | **Status** | **Note** |
| ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. |
| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⏳ Planned for 7.1 | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⏳ Planned for 7.1 | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) |
| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer |
| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | Mocks planned for 7.1, so you can set different store values per story. |
| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. |
| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. |
| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | |
| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | |
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers |
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | |

This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/7.0/react/writing-stories/introduction), [test](https://storybook.js.org/docs/7.0/react/writing-tests/introduction) and [document](https://storybook.js.org/docs/7.0/react/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.

Expand Down
5 changes: 5 additions & 0 deletions code/lib/builder-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"slash": "^3.0.0"
},
"devDependencies": {
"@storybook/mdx1-csf": "next",
"@types/express": "^4.17.13",
"@types/node": "^16.0.0",
"rollup": "^3.0.0",
Expand All @@ -72,6 +73,7 @@
},
"peerDependencies": {
"@preact/preset-vite": "*",
"@storybook/mdx1-csf": "*",
"typescript": ">= 4.3.x",
"vite": "^3.0.0 || ^4.0.0",
"vite-plugin-glimmerx": "*"
Expand All @@ -80,6 +82,9 @@
"@preact/preset-vite": {
"optional": true
},
"@storybook/mdx1-csf": {
"optional": true
},
"typescript": {
"optional": true
},
Expand Down
10 changes: 5 additions & 5 deletions code/lib/builder-vite/src/plugins/mdx-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,18 @@ const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith
export async function mdxPlugin(options: Options): Promise<Plugin> {
const include = /\.mdx$/;
const filter = createFilter(include);
const { mdxPluginOptions, jsxOptions } = await options.presets.apply<Record<string, any>>(
'options',
{}
);
const { features, presets } = options;
const { mdxPluginOptions, jsxOptions } = await presets.apply<Record<string, any>>('options', {});

return {
name: 'storybook:mdx-plugin',
enforce: 'pre',
async transform(src, id) {
if (!filter(id)) return undefined;

const { compile } = await import('@storybook/mdx2-csf');
const { compile } = features?.legacyMdx1
? await import('@storybook/mdx1-csf')
: await import('@storybook/mdx2-csf');

const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
...mdxPluginOptions,
Expand Down
Loading