#Docs not rendering inline functions in code tab

6 messages · Page 1 of 1 (latest)

flint temple
#

Hey everyone, I added a story with an inline onClick handler and in the Docs tab when I view the code the inline function is stripped out. We are using transformSource to manipulate the code that is returned in the Code tab, however I've checked and these inline functions appear to be getting stripped out beforehand so transformSource is having no affect on this.

I've attached a screenshot of what is being rendered, but basically it is rendering the onClick like so:

onClick={() => {}}

The behavior I'm expecting is that the the onClick would be rendered as it was passed in.

onClick={() => {
  document.querySelector('rds-panel').toggle();
}}

Anyone have ideas as to why this may be happening? I have been unsuccessful finding documentation around this and my Google-fu has also been inadequate so far.

Current Storybook dependencies:
"@storybook/addon-a11y": "^6.5.14",
"@storybook/addon-actions": "^6.5.14",
"@storybook/addon-docs": "^6.5.14",
"@storybook/addon-essentials": "~6.5.14",
"@storybook/addon-interactions": "^6.5.14",
"@storybook/addon-links": "^6.5.14",
"@storybook/addon-viewport": "^6.5.14",
"@storybook/addons": "^6.5.14",
"@storybook/api": "^6.5.14",
"@storybook/builder-webpack5": "^6.5.14",
"@storybook/components": "^6.5.14",
"@storybook/core-events": "^6.5.14",
"@storybook/core-server": "^6.5.14",
"@storybook/jest": "^0.0.10",
"@storybook/manager-webpack5": "^6.5.14",
"@storybook/react": "~6.5.14",
"@storybook/testing-library": "^0.0.13",
"storybook-addon-designs": "^6.3.1",
"storybook-addon-docs-tabs": "^1.0.3",
"storybook-addon-playroom": "^3.0.2",
"storybook-dark-mode": "^2.0.4",
"storybook-docs-toc": "^1.7.0",

📎 docs-not-rendering-inline-functions
flint temple
lavish palm
urban saddle
#

@flint temple it helps to share a bit more context when asking question.

  • Your project setup: Storybook version, main.js file, package.json, and any relevant details. You mentioned you're using transformSource, great what does that setup look like?

  • Where do you apply this onClick handler? In a Story or on the component? Share the full source of that file too.

If you're unsure if you have a problem in your code or if it's a general bug in Storybook, you can try reproducing the issue in a minimal project that doesn't include any of your code. https://storybook.new/ is a great resource for that.

flint temple
#

@urban saddle Thanks for your request for more information. I provided the installed storybook versions from our package.json in my post as well as some sample code from a story, and the screenshot, docs-not-rendering-inline-functions, shows what is rendered in docs. I'll try to compile more information as well such as the full main.js and docs config including that transform I mentioned as soon as I can, and I'll ping you again when I do. Since this post has been up for a while I have been working on other things so I need to get back into that space to get what you need.

#

@lavish palm Thank you for helping me bump this up also!