storybookjs / builder-vite

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

Inject mdx compiler for mdx1 #556

Closed IanVS closed 1 year ago

IanVS commented 1 year ago

fixes https://github.com/storybookjs/builder-vite/issues/557

I found that mdx was not working correctly here, and @valentinpalkovic realized my fallback in Storybook 7 wasn't either (https://github.com/storybookjs/storybook/pull/20823). It was because we used to inject the mdx compiler into the source code that we get back from the @storybook/mdx1-csf compiler, but we lost that in https://github.com/storybookjs/builder-vite/pull/548/files#diff-f2dfc4dfa9074d77a728a88e6629a1d66be8a0765cab8562526cd00fbae910e5L6. This re-introduces it, with a bit better of a guarantee that the correct version is going to be loaded, by starting from inside @storybook/mdx1-csf.

I've also pinned mdx1-csf here, in case the import is moved from the loader to the compiler, as @shilman has suggested doing. We'll need to adjust this if that happens.

IanVS commented 1 year ago

Hm, based on the CI failures we might need to also require react to be a peer dependency like we do in SB 7. :-/

joshwooding commented 1 year ago

Looks good. :)

IanVS commented 1 year ago

Turns out that rollup does not respect NODE_PATH, so we need to do a bit of resolution hackery to get it to resolve react relative to the example, and not from within builder-vite's node_modules. Normal projects will not need to worry about this, it's just due to our non-standard multi-project example structure.

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.

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package Script field Source
@swc/core@1.3.34 (upgraded) postinstall examples/react-18/package.json via @vitejs/plugin-react-swc@3.1.0, packages/builder-vite/package.json via @vitejs/plugin-react-swc@3.1.0
⚠️ New author

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

Package New Author Previous Author Source
regexpu-core@5.3.0 (upgraded) nicolo-ribaudo google-wombot examples/lit-ts/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.4.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.4.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.4.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.4.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.4.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.4.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.4.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, examples/vue2.7/package.json via @storybook/addon-essentials@6.5.16, @storybook/builder-vite@0.4.0, @storybook/test-runner@0.1.0, @storybook/vue@6.5.16, examples/vue3/package.json via @storybook/addon-essentials@6.5.16, @storybook/addon-interactions@6.5.9, @storybook/builder-vite@0.4.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.4.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
Pull request report summary
Issue Status
Install scripts ⚠️ 1 issue
Native code ✅ 0 issues
Bin script confusion ✅ 0 issues
Bin script shell injection ✅ 0 issues
Shell access ✅ 0 issues
Uses eval ✅ 0 issues
Unresolved require ✅ 0 issues
Invalid package.json ✅ 0 issues
HTTP dependency ✅ 0 issues
Git dependency ✅ 0 issues
GitHub dependency ✅ 0 issues
New author ⚠️ 1 issue
Potential typo squat ✅ 0 issues
Known Malware ✅ 0 issues
Telemetry ✅ 0 issues
Protestware/Troll package ✅ 0 issues
AI detected malware ✅ 0 issues
Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@2.4.2

  • @SocketSecurity ignore @swc/core@1.3.34
  • @SocketSecurity ignore regexpu-core@5.3.0

Powered by socket.dev

IanVS commented 1 year ago

@joshwooding I'm having trouble with Windows here. Any chance you can give this a shot?

zhyd1997 commented 1 year ago

Hi @IanVS

from issue 21023

CI passed when enabled previewMdx2:

Screenshot 2023-02-10 at 18 52 37

https://github.com/zhyd1997/builder-vite/pull/2/files/5e198d79e680ddc8047238a8e8e6f0ffe83c2ab6..824c0585f12824f6f08a18f2d526dcfe81673987

so maybe this is mdx1-csf transform issue: 👀

https://github.com/storybookjs/builder-vite/blob/4d49af67e795330248c6967741eafb6c5f0cc6cf/packages/builder-vite/plugins/mdx-plugin.ts#L20-L26

IanVS commented 1 year ago

Yes, mdx1 requires us to inject an import into the code, and the yarn portal we are using for the examples doesn't seem to be working very well, because imports in builder-vite are not resolving back to the example's node_modules without some help. It's working fine on posix systems, but not windows. I'm tempted to merge anyway and hope that Josh can get our CI green later. It's only an issue in our examples I believe.