Improve sourcemaps #437
Merged
Improve sourcemaps #437
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This is incredible. Thank you so much @IanVS! |
joshwooding
reviewed
Jul 13, 2022
|
|
||
| const namedExportsOrder = Object.entries<any>(stories) | ||
| .filter(([, def]) => !def.template) | ||
| .map(([id]) => id); | ||
|
|
||
| const output = [ | ||
| codeWithoutDefaultExport, | ||
| '', |
There was a problem hiding this comment.
We could just remove this right?
There was a problem hiding this comment.
No, it's needed so that a newline is added.
joshwooding
approved these changes
Jul 13, 2022
IanVS
added a commit
that referenced
this pull request
Jul 13, 2022
Turns out we weren't creating good sourcemaps, especially in dev. It seems that whereas rollup only uses the `mappings`, I guess that vite/esbuild uses the `sources` field of the sourcemap as well, and without passing the `source` option to MagicString's `generateMap`, we were losing the connection. So, this adds the `id` as the source, and also enables `hires` (high resolution) so that columns are correct and not just lines (useful for code coverage, for example). I also added MagicString to some of our other plugins which weren't using it. The most obvious changes are in the react and svelte projects. Vue is a bit improved, but we're still losing the story file sourcemaps for some reason. To test, fire up an example project (in dev especially, but good to check prod builds too), look in the sources tab in devtools, and poke around, looking for sourcemapped versions of the files. You should see them in this branch, but not nearly as many, if any, in main.
|
Released in v0.1.41. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Turns out we weren't creating good sourcemaps, especially in dev. It seems that whereas rollup only uses the
mappings, I guess that vite/esbuild uses thesourcesfield of the sourcemap as well, and without passing thesourceoption to MagicString'sgenerateMap, we were losing the connection. So, this adds theidas the source, and also enableshires(high resolution) so that columns are correct and not just lines (useful for code coverage, for example).I also added MagicString to some of our other plugins which weren't using it.
The most obvious changes are in the react and svelte projects. Vue is a bit improved, but we're still losing the story file sourcemaps for some reason.
To test, fire up an example project (in dev especially, but good to check prod builds too), look in the sources tab in devtools, and poke around, looking for sourcemapped versions of the files. You should see them in this branch, but not nearly as many, if any, in main.
@yannbf, I also tested these changes by copying the
distfolder from this project into the node_modules of your https://github.com/yannbf/storybook-coverage-recipes project, and got good results from the react_vite and svelte_vite examples there.