search

storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
886 stars 109 forks source link

Fully support Vite 4, remove @vitejs/plugin-react, update @storybook/mdx1-csf #548

Closed IanVS closed 1 year ago

IanVS commented 1 year ago

Fixes https://github.com/storybookjs/builder-vite/issues/547

This also updates the version of mdx1-csf to one that no longer requires the use of the react vite plugin to compile jsx, it handles compilation itself. So, we no longer need to include @vitejs/plugin-react in all projects, and react projects will need to make sure it's installed. That makes this a breaking change.

And this also updates Vite to 4 in the examples, and fixes some missing dependencies.

IanVS commented 1 year ago

@joshwooding, any idea what would be causing the parse errors in this PR? I don't recall seeing this before.

IanVS commented 1 year ago

Oh right, we had a problem with the original approach in storybook 7 as well when we tried to support Vite 4. The results of sending MDX through the vite react-plugin still contain JSX at the end, whereas previously all the jsx was converted to javascript. We never really figured out a solution to this in SB 7, we punted and said we'd only support MDX2, and we updated the way that mdx2-csf works so that it can handle jsx on its own (https://github.com/storybookjs/mdx2-csf/pull/30). Maybe we need to do the same thing to mdx1-csf? @ndelangen do you think that would be possible? I also heard that SB 7 might need to continue supporting mdx-1 in an opt-in way, so I think that change to mdx1-csf might be needed regardless.

Note: I've confirmed that using @storybook/mdx2-csf@next works here in the react example. I'm not sure why https://github.com/storybookjs/mdx2-csf/pull/30 required a major version bump, I don't think it was breaking. But we could say that in order to use mdx2, the version must be 1.0.0-next.0+. We still need a solution for mdx1 though.

ndelangen commented 1 year ago

Yes @IanVS @shilman and I looked at that this morning.. MDX1 support in 7.0 will make a come-back.

socket-security[bot] commented 1 year ago

Socket Security Pull Request Report

Dependency issues detected. If you merge this pull request, you will not be alerted to the instances of these issues again.

⚠️ Uses eval

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Avoid packages that use eval, since this could potentially execute any code.

Package Eval Type Location Source
@storybook/mdx1-csf@1.0.0-next.0 (added) Function dist/index.js packages/builder-vite/package.json
@storybook/mdx1-csf@1.0.0-next.0 (added) Function dist/index.mjs packages/builder-vite/package.json
@storybook/router@6.5.16 (added) Function dist/cjs/index.js examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-actions@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/client-api@6.5.16, @storybook/source-loader@6.5.16
@storybook/router@6.5.16 (added) Function dist/esm/index.js examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-actions@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/client-api@6.5.16, @storybook/source-loader@6.5.16
@storybook/router@6.5.16 (added) Function dist/modern/index.js examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-actions@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/addon-links@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/jest@0.0.10, @storybook/test-runner@0.1.0, @storybook/testing-library@0.0.13, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-a11y@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/client-api@6.5.16, @storybook/source-loader@6.5.16
@storybook/router@6.5.9 (added) Function dist/cjs/index.js examples/vue3/package.json via @storybook/addon-interactions@6.5.9, @storybook/jest@0.0.10, @storybook/testing-library@0.0.13, @storybook/vue3@6.5.9
@storybook/router@6.5.9 (added) Function dist/esm/index.js examples/vue3/package.json via @storybook/addon-interactions@6.5.9, @storybook/jest@0.0.10, @storybook/testing-library@0.0.13, @storybook/vue3@6.5.9
@storybook/router@6.5.9 (added) Function dist/modern/index.js examples/vue3/package.json via @storybook/addon-interactions@6.5.9, @storybook/jest@0.0.10, @storybook/testing-library@0.0.13, @storybook/vue3@6.5.9
@storybook/ui@6.5.9 (added) Function dist/cjs/index.js examples/vue3/package.json via @storybook/vue3@6.5.9
@storybook/ui@6.5.9 (added) Function dist/esm/index.js examples/vue3/package.json via @storybook/vue3@6.5.9
@storybook/ui@6.5.9 (added) Function dist/modern/index.js examples/vue3/package.json via @storybook/vue3@6.5.9
@sveltejs/vite-plugin-svelte@1.0.8 (added) Function dist/index.cjs examples/svelte/package.json via @storybook/builder-vite@0.3.0
@sveltejs/vite-plugin-svelte@1.0.8 (added) Function dist/index.js examples/svelte/package.json via @storybook/builder-vite@0.3.0
@vue/compiler-core@3.2.45 (added) Function dist/compiler-core.esm-bundler.js examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/compiler-dom@3.2.45 (added) Function dist/compiler-dom.cjs.js examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/compiler-dom@3.2.45 (added) Function dist/compiler-dom.cjs.prod.js examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/compiler-sfc@2.7.14 (added) Function dist/compiler-sfc.js examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added) Function dist/compiler-sfc.js examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added) Function dist/compiler-sfc.js examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added) Function dist/compiler-sfc.js examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@2.7.14 (added) Function dist/compiler-sfc.js examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, @vitejs/plugin-vue2@1.1.2, vue@2.7.14
@vue/compiler-sfc@3.2.45 (added) Function dist/compiler-sfc.cjs.js examples/vue2.6/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/builder-vite@0.3.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/server-renderer@3.2.45 (added) Function dist/server-renderer.cjs.js examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
@vue/server-renderer@3.2.45 (added) Function dist/server-renderer.cjs.prod.js examples/vue3/package.json via @storybook/builder-vite@0.3.0, @storybook/vue3@6.5.9, @vitejs/plugin-vue@3.2.0, vue@3.2.45, packages/builder-vite/package.json via @vitejs/plugin-vue@4.0.0, vue-docgen-api@4.56.4
ajv@6.12.6 (added) Function dist/ajv.bundle.js examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@15.10.1, examples/vue2.7/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@16.8.3, examples/vue3/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-interactions@6.5.9, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, @storybook/vue3@6.5.9, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/core-common@6.5.16, @typescript-eslint/eslint-plugin@5.50.0, @typescript-eslint/parser@5.50.0, eslint@8.33.0, eslint-config-prettier@8.6.0, eslint-plugin-storybook@0.6.10, sveltedoc-parser@4.3.1
ajv@6.12.6 (added) Function lib/compile/index.js examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@15.10.1, examples/vue2.7/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, vue-loader@16.8.3, examples/vue3/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-interactions@6.5.9, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.5.0, @storybook/vue3@6.5.9, examples/workspaces/package.json via @storybook/test-runner@0.1.0, examples/workspaces/packages/catalog/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, packages/builder-vite/package.json via @storybook/addon-svelte-csf@2.0.11, @storybook/core-common@6.5.16, @typescript-eslint/eslint-plugin@5.50.0, @typescript-eslint/parser@5.50.0, eslint@8.33.0, eslint-config-prettier@8.6.0, eslint-plugin-storybook@0.6.10, sveltedoc-parser@4.3.1
bluebird@3.7.2 (added) Function js/release/call_get.js examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/test-runner@0.1.0, @storybook/web-components@6.5.16, examples/preact/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/preact@6.5.16, @storybook/test-runner@0.1.0, examples/react/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-18/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/react-ts/package.json via @storybook/addon-docs@6.5.16, @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.3.0, @storybook/react@6.5.16, @storybook/test-runner@0.1.0, examples/svelte/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-svelte-csf@2.0.11, @storybook/builder-vite@0.3.0, @storybook/svelte@6.5.16, @storybook/test-runner@0.1.0, examples/vue2.6/package.json via @storybook/addon-essentials@6.5.16, [@storybook/builder-vite@0.3.0](https://socket.dev/npm/package/@storybook/builder-
IanVS commented 1 year ago

I'm not sure what's happening in the Workspaces example, something to do with the structure of the monorepo-within-a-monorepo, maybe.

With the latest changes, we can support mdx1 and mdx2. I've also removed the addition of @vitejs/plugin-react from all projects since it is no longer required to process mdx. This makes this a breaking change, since react users will need to be sure that the plugin is installed in their projects, just like for the other frameworks.