storybook-eol / storybook-addon-actions Goto Github PK

I'm still investigating, but #24 appears to have broken our storybook. Specifically we're seeing:

Cannot read property 'replace' of undefined
TypeError: Cannot read property 'replace' of undefined
    at action (webpack:///./~/@kadira/storybook-addon-actions/dist/preview.js?:52:20)
    at exports.default (webpack:///./examples/AttributeToggleRow_example.jsx?:137:19)
    at eval (webpack:///./story/story.jsx?:33:23)
    at Array.forEach (native)
    at Object.eval (webpack:///./story/story.jsx?:25:29)
    at eval (webpack:///./story/story.jsx?:81:30)
    at Object.<anonymous> (http://localhost:9001/static/preview.bundle.js:11745:2)
    at __webpack_require__ (http://localhost:9001/static/preview.bundle.js:556:30)
    at fn (http://localhost:9001/static/preview.bundle.js:87:20)
    at webpackContext (webpack:///./story_^\.\/.*\.jsx$?:6:9)

Which suggests that name in https://github.com/storybooks/storybook-addon-actions/blob/master/src/preview.js#L30 is undefined. We're going to peg to the previous version for now while we investigate, but I wanted to open this issue for tracking.

When we upgraded React, we started getting the following in our tests:
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead. I tracked some of them down to this package.

It looks like at least the ActionLogger accesses PropTypes with React.PropTypes

Issue / how to reproduce:
When a component calls an action handler with an object in the args that has circular references (in my case, that was a Proxy), you see no action logged. But you will see an error in the actual JavaScript console: Uncaught TypeError: Converting circular structure to JSON

Some investigation:
I could try/catch the error around the emit() call in preview.js.

Ideas:
I am not sure how to resolve this actually. The action logger could still show the name of the invoked action and the property names on the root level of the object or something like that. Or the emit function could get support for circular structures, or the communication done otherwise, or the structure resolved to a non-circular one (which might be a bit trickier if there is not already a module for that).

So currently, if I do args => args.splice(0, 1) still I will get an array. How can I just log the first element of that array ?

if I do

const firstArg = decorateAction([
  args => args[0]
]);

In simpler terms how do I log firstTerm instead of [firstTerm] if my args was [firstTerm, secondTerm, thirdTerm]

It can be replicated by replacing circular with something like window within:

https://github.com/kadirahq/storybook-addon-actions/blob/master/.storybook/stories.js#L20

The click on the circular button will cause the action to never be logged.

I've tried replacing json-stringify-safe with circular-json which seems to behave better.
But even then after the 4th click circular-json will throw a circular reference error.

I now know how to circumvent this by just not logging something with circular references, however when this bug is encountered it's not immediately clear the hang originates from within storybook which makes one try to debug the application code itself first.

I think replacing json-stringify-safe with circular-json would already be an improvement.

Currently there is none.

Hello all,
Where can I find type definitions for this? I am using typescript and importing {action} from '@storybook/addon-actions' in a .tsx file.

Thanks!

This is a common shortcut in terminals (and even in the Chrome DevTools!) to clear the output.

This would be very handy.

I can submit this request upstream in https://github.com/kadirahq/react-storybook/issues/new as well, if you'd prefer.

Thanks!

I have a story that passes onFocus={action('Focused')}
The component is an input element with onFocus={this.onFocus}

onFocus = e => {
  this.props.onFocus && this.props.onFocus(e.target);  // App hangs.  'e' alone is fine.
};