storybookjs/storybook

[Bug]: import statements in Source block not available as input to transform function

Open

#25,962 建立於 2024年2月8日

在 GitHub 查看
 (0 留言) (1 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
block: sourcefeature requesthelp wanted

描述

Describe the bug

My team manages a Lerna monorepo of React component packages. We use the Source block component in our MDX documentation. Due to the location of the stories.tsx files relative to the component itself, they are often imported like this:

import {Tabs} from '../tabs.react-component';

In our Source block, the "Show code" section shows something like this:

import { Tabs } from '../tabs.react-component';

<Tabs title="foo" content="bar" />

^ We have feedback from developers that the relative path import in the code block is not as helpful as if they were listed by the actual npm package they are shipped with, for example:

import { Tabs } from '@foo/react-tabs-component';

We have tested out using imports like this in storybook, and they DO work, but it breaks hot re-loading of the page (without having Lerna rebuild packages), so it diminishes my teams ability to maintain these components.

I attempted to use the transform option as part of the Source component, but quickly realized that the import statements in the code block are not provided as part of the actual string passed in as the first parameter (the second is StoryContext type).

Searching through the source code I couldn't easily determine where these import statements were being applied or if there was a way I could tie into some existing functionality to just modify the imports for our developers. I'm open to any suggestions as well. Thanks!

To Reproduce

No response

System

storybook@7.6.13

Additional context

No response

貢獻者指南