ReactVite: Docgen ignore un-parsable files #26254

ndelangen · 2024-02-29T11:03:25Z

Closes: #26109
Closes: #25662

Related: reactjs/react-docgen#892

What I did

I made a video explaining the process:

I modified the react-docgen configuration to override the mechanism used to resolve files.
When docgen tries to resolve a file, that we don't include in the files to transform, the custom resolver will throw an error.
The error will cause react-docgen to skip/ignore the file.
Unlike the parsing error, which is fatal and bubbles up to here

storybook/code/frameworks/react-vite/src/plugins/react-docgen.ts

Line 75 in 1d5e9f8

throw e;

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

I performed a manual test by copying over frameworks/react-vite/dist to a reproduction provided by the user (which I modified to make more informative).

The error went away, and docgen information showed up in the bundled assets's code.

The UI changes detected by chromatic are the proof the fix is working.

I added an explicit test to prevent this regression in the future.

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

code/frameworks/react-vite/src/plugins/react-docgen.ts

ndelangen · 2024-02-29T14:46:34Z

I'm experimenting with bringing this fix to webpack as well

code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

code/renderers/react/template/stories/docgen-components/imported.module.css

shilman · 2024-02-29T15:43:38Z

code/presets/react-webpack/src/loaders/react-docgen-loader.ts

+import {
+  ReactDocgenResolveError,
+  defaultLookupModule,
+} from '../../../../frameworks/react-vite/src/plugins/docgen-resolver';


Is there anything we can do to clean things up? cc @valentinpalkovic

I did this on purpose.

The only 2 places in our codebase that currently depend on react-docgen are:

So in order to extract this somewhere else, I'd need to introduce the dependency to some shared package.
I understand this might look a bit weird, but it's bundled correctly.

I'm open to suggestions that do not create a new package.

Alternatively (I'm not a fan of this idea either) we could add this code to docs-tools;
but then docs tools gains a dependency to react-docgen, and with it, this:

If you feel like this is so bad we're better off duplicating the code, we could do that?

Although this is kind of ugly (requiring files from the react-vite framework into the react-webpack preset things will compile.

I would rather vote to copy the code from frameworks/react-vite/src/plugins/docgen-resolver into a directory that is correctly accessible by both, the framework react-vite and the preset react-webpack, like in e.g. @storybook/core-common

or

we just duplicate the code in ../../../../frameworks/react-vite/src/plugins/docgen-resolver which I think is okay if we don't want to move it into a sharable core package.

The third option is that things stay as is, but then resolve should be a direct dependency of the react-webpack package.

@ndelangen Just to clarify. Are you talking about extracting code/frameworks/react-vite/src/plugins/docgen-resolver.ts into a core package? Because this file doesn't have any react-docgen dependencies or am i overlooking something?

Can you define "correctly accessible by both"? @valentinpalkovic
Placing the code in a shared package, like I mentioned that that would cause that package to gain dependencies it currently does not have.
You suggest core-common, I suggested docs-tools.

Are you talking about extracting code/frameworks/react-vite/src/plugins/docgen-resolver.ts into a core package?

Yes we currently do not have a suitable package, hence I decided to just do this way, which minimizes duplicated code, and optimizes for easy of replaceability because I assume that at some point in the future this code will change upstream and updating it in 2 places going to be fragile, right?

But if you both agree that duplicating the code is better than 1 slightly ugly import, I'll change it.

resolve should be a direct dependency of the react-webpack package.

Ah, yes that's right. I missed that. 🙏

I duplicated the code.

code/frameworks/react-vite/src/plugins/react-docgen.ts

valentinpalkovic

Thanks for the video! It was very helpful!

code/frameworks/react-vite/src/plugins/react-docgen.ts

valentinpalkovic · 2024-02-29T17:03:53Z

code/presets/react-webpack/src/loaders/react-docgen-loader.ts

+import {
+  ReactDocgenResolveError,
+  defaultLookupModule,
+} from '../../../../frameworks/react-vite/src/plugins/docgen-resolver';


Although this is kind of ugly (requiring files from the react-vite framework into the react-webpack preset things will compile.

I would rather vote to copy the code from frameworks/react-vite/src/plugins/docgen-resolver into a directory that is correctly accessible by both, the framework react-vite and the preset react-webpack, like in e.g. @storybook/core-common

or

we just duplicate the code in ../../../../frameworks/react-vite/src/plugins/docgen-resolver which I think is okay if we don't want to move it into a sharable core package.

The third option is that things stay as is, but then resolve should be a direct dependency of the react-webpack package.

valentinpalkovic · 2024-02-29T17:13:12Z

Great work! 🥳

ndelangen · 2024-02-29T19:45:16Z

code/frameworks/react-vite/src/plugins/react-docgen.ts

+            if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext)) === undefined) {
+              return result;
+            }


@shilman here i'm now using the array, do you think this is preferable?

I guess we should then also adjust line 29 to support a wider range of file extensions?!
~ @valentinpalkovic

I guess that's done now, but originally I figured we'd keep it the same as the code just slightly above it.
As it made no sense to me to use 2 different patterns.

Check line 33 here (that code has been there like that for 19 months

storybook/code/frameworks/react-vite/src/plugins/react-docgen.ts

Lines 32 to 56 in 899ba75

export function reactDocgen({

include = /\.(mjs|tsx?|jsx?)$/,

exclude = [/node_modules\/.*/],

}: Options = {}): PluginOption {

const cwd = process.cwd();

const filter = createFilter(include, exclude);

return {

name: 'storybook:react-docgen-plugin',

enforce: 'pre',

async transform(src: string, id: string) {

if (!filter(path.relative(cwd, id))) {

return;

}

try {

const docgenResults = parse(src, {

resolver: defaultResolver,

handlers,

importer: makeFsImporter((filename, basedir) => {

const result = defaultLookupModule(filename, basedir);

if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext)) === undefined) {

return result;

}

So in my defense, I thought that to keep those patterns in sync was pretty reasonable.

Is the request for me to make a change to the code above (what now line 33)?

AFAIK that code is unrelated to my PR?

ndelangen added 2 commits February 29, 2024 11:44

filter docgen import resolution files to only JS

1d5e9f8

Merge branch 'next' into norbert/fix-react-docgen-vite-plugin

9940766

ndelangen self-assigned this Feb 29, 2024

ndelangen added bug ci:normal docgen labels Feb 29, 2024

ndelangen changed the title ~~filter docgen import resolution files to only JS~~ ReactVite: Docgen ignore un-parsable files Feb 29, 2024

ndelangen commented Feb 29, 2024

View reviewed changes

code/frameworks/react-vite/src/plugins/react-docgen.ts Outdated Show resolved Hide resolved

ndelangen added 3 commits February 29, 2024 13:20

making a little simplification, see if it causes a regression too

7246a17

fix

dd3ba90

fix issue with files without extension

686867f

ndelangen requested review from shilman and valentinpalkovic February 29, 2024 13:26

ndelangen added 4 commits February 29, 2024 14:48

add regression test for import of css file

5fa9f5b

remove it

0d52b80

fix

6a6e4cf

fix for webpack as well!

cea2827

ndelangen removed the request for review from valentinpalkovic February 29, 2024 14:46

ndelangen commented Feb 29, 2024

View reviewed changes

code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx Show resolved Hide resolved

ndelangen commented Feb 29, 2024

View reviewed changes

code/renderers/react/template/stories/docgen-components/imported.module.css Show resolved Hide resolved

shilman reviewed Feb 29, 2024

View reviewed changes

shilman requested a review from valentinpalkovic February 29, 2024 15:55

valentinpalkovic reviewed Feb 29, 2024

View reviewed changes

make use of RESOLVE_EXTENSIONS as requested

899ba75

ndelangen commented Feb 29, 2024

View reviewed changes

ndelangen added 3 commits February 29, 2024 20:55

add dependency

ef36c36

duplicated to code to prevent ugly import

463d488

added extra extensions

da5ee52

fix filter logic

70ee50f

valentinpalkovic approved these changes Mar 1, 2024

View reviewed changes

ndelangen merged commit 075f911 into next Mar 1, 2024
56 checks passed

ndelangen deleted the norbert/fix-react-docgen-vite-plugin branch March 1, 2024 07:55

github-actions bot mentioned this pull request Mar 1, 2024

Release: Prerelease 8.0.0-rc.1 #26268

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReactVite: Docgen ignore un-parsable files #26254

ReactVite: Docgen ignore un-parsable files #26254

ndelangen commented Feb 29, 2024 •

edited

Loading

ndelangen commented Feb 29, 2024

shilman Feb 29, 2024

ndelangen Feb 29, 2024 •

edited

Loading

valentinpalkovic Feb 29, 2024

valentinpalkovic Feb 29, 2024

ndelangen Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024

ndelangen Feb 29, 2024

valentinpalkovic left a comment

valentinpalkovic Feb 29, 2024

valentinpalkovic commented Feb 29, 2024

ndelangen Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024 •

edited

Loading

	export function reactDocgen({
	include = /\.(mjs\|tsx?\|jsx?)$/,
	exclude = [/node_modules\/.*/],
	}: Options = {}): PluginOption {
	const cwd = process.cwd();
	const filter = createFilter(include, exclude);

	return {
	name: 'storybook:react-docgen-plugin',
	enforce: 'pre',
	async transform(src: string, id: string) {
	if (!filter(path.relative(cwd, id))) {
	return;
	}

	try {
	const docgenResults = parse(src, {
	resolver: defaultResolver,
	handlers,
	importer: makeFsImporter((filename, basedir) => {
	const result = defaultLookupModule(filename, basedir);

	if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext)) === undefined) {
	return result;
	}

ReactVite: Docgen ignore un-parsable files #26254

ReactVite: Docgen ignore un-parsable files #26254

Conversation

ndelangen commented Feb 29, 2024 • edited Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

ndelangen commented Feb 29, 2024

shilman Feb 29, 2024

Choose a reason for hiding this comment

ndelangen Feb 29, 2024 • edited Loading

Choose a reason for hiding this comment

valentinpalkovic Feb 29, 2024

Choose a reason for hiding this comment

valentinpalkovic Feb 29, 2024

Choose a reason for hiding this comment

ndelangen Feb 29, 2024 • edited Loading

Choose a reason for hiding this comment

ndelangen Feb 29, 2024

Choose a reason for hiding this comment

ndelangen Feb 29, 2024

Choose a reason for hiding this comment

valentinpalkovic left a comment

Choose a reason for hiding this comment

valentinpalkovic Feb 29, 2024

Choose a reason for hiding this comment

valentinpalkovic commented Feb 29, 2024

ndelangen Feb 29, 2024 • edited Loading

Choose a reason for hiding this comment

ndelangen Feb 29, 2024 • edited Loading

Choose a reason for hiding this comment

ndelangen Feb 29, 2024 • edited Loading

Choose a reason for hiding this comment

ndelangen commented Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024 •

edited

Loading

ndelangen Feb 29, 2024 •

edited

Loading