[Bug]: 🔥🐞🔥 docs.source.transform not modifying "Show Code" for stories

[dbaitech]

Describe the bug

Based off the bug from https://github.saobby.my.eu.org.mcas.ms/storybookjs/storybook/issues/23367.

I'm using the docs.source.transform parameter to transform the code string like this:

The original code is as follows:

export const BasicUsage = (args) => {
    const [activeId, setActiveId] = useState('2');

    const _onClick = (id) => {
        setActiveId(id);
    };

    return (
        <Tabs activeId={activeId} {...args}>
            <Tab id="1" onClick={_onClick}>
                Tab
            </Tab>
            <Tab id="2" onClick={_onClick}>
                Tab
            </Tab>
            <Tab id="3" onClick={_onClick}>
                Tab
            </Tab>
            <Tab id="4" onClick={_onClick}>
                Tab
            </Tab>
        </Tabs>
    );
};

When I check the transform using console.log it is giving the exact source code I would like to see where "args" is removed:

() => {
  const [activeId, setActiveId] = useState('1');
  const _onClick = id => {
    setActiveId(id);
  };
  return <Tabs activeId={activeId}>
            <Tab id="1" onClick={_onClick} disabled>
                Disabled Active Tab
            </Tab>
            <Tab id="2" onClick={_onClick} disabled>
                Disabled Default Tab
            </Tab>
        </Tabs>;
}

However, it is not showing up in the "Show Code" area and instead is being replaced with the returned HTML from the code:

Is there a way to get the code modified in transform to show in the "Show Code" section?

To Reproduce

1. Create a story using React functional components
2. Add "args" as a parameter to the functional component
3. Pass {...args} as a prop inside component inside the return expression
4. Add the following to the export default object:

parameters: {
        docs: {
            source: {
                transform: (code, storyContext) => {
                    code.replace('{...args}', '');
                    code.replace('args', '');
                    return code;
                },
            },
        },
},

6. View the component in Storybook and click "Show Code"

System

No response

Additional context

No response

[ChenReuven]

Describe the bug

Based off the bug from https://github.saobby.my.eu.org.mcas.ms/storybookjs/storybook/issues/23367.

I'm using the docs.source.transform parameter to transform the code string like this:

The original code is as follows:

export const BasicUsage = (args) => {
    const [activeId, setActiveId] = useState('2');

    const _onClick = (id) => {
        setActiveId(id);
    };

    return (
        <Tabs activeId={activeId} {...args}>
            <Tab id="1" onClick={_onClick}>
                Tab
            </Tab>
            <Tab id="2" onClick={_onClick}>
                Tab
            </Tab>
            <Tab id="3" onClick={_onClick}>
                Tab
            </Tab>
            <Tab id="4" onClick={_onClick}>
                Tab
            </Tab>
        </Tabs>
    );
};

When I check the transform using console.log it is giving the exact source code I would like to see where "args" is removed:

() => {
  const [activeId, setActiveId] = useState('1');
  const _onClick = id => {
    setActiveId(id);
  };
  return <Tabs activeId={activeId}>
            <Tab id="1" onClick={_onClick} disabled>
                Disabled Active Tab
            </Tab>
            <Tab id="2" onClick={_onClick} disabled>
                Disabled Default Tab
            </Tab>
        </Tabs>;
}

However, it is not showing up in the "Show Code" area and instead is being replaced with the returned HTML from the code:

Is there a way to get the code modified in transform to show in the "Show Code" section?

To Reproduce

1. Create a story using React functional components
2. Add "args" as a parameter to the functional component
3. Pass {...args} as a prop inside component inside the return expression
4. Add the following to the export default object:

parameters: {
        docs: {
            source: {
                transform: (code, storyContext) => {
                    code.replace('{...args}', '');
                    code.replace('args', '');
                    return code;
                },
            },
        },
},

6. View the component in Storybook and click "Show Code"

System

No response

Additional context

No response

same issue

@dbaitech did you find another solution maybe?>

[GuillemPM]

According to Javascript docs:
The replace() method of String values returns a new string with one, some, or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced.
--> The original string is left unchanged. <--

So instead of doing:

code.replace('{...args}', '');
code.replace('args', '');
return code;

You could do

code = code.replace('{...args}', '');
code = code.replace('args', '');
return code;

Or any other variant like

return code.replace('{...args}', '').replace('args', '');

Or use more advanced regexp, etc.