Knobs array of objects does not work with a function property

[kaitmore]

Support request summary

I have a story that uses the object knob with an array of objects. These objects have an "onSort" property:

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    width: "50%",
    onSort: () => console.log("onSort was called")
  },  ...
]

storiesOf("Table", module).add("simple Table", () => {
  return (
    <Table columns={object("columns", columns)} data={object("data", data)} />
  );
});

This is valid javascript, but serializing it strips out the function property because it's not valid JSON:

Is there a workaround for this?

Steps to reproduce

• Create a story with a prop that is an array of objects, and includes a function as a property value, as shown above.
• Use the objects knob
• Notice that the function prop is missing

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.4.10
• @storybook/addon-knobs 3.4.10

[KendraTang]

@kaitmore May I ask why you closed this issue? I'm encountering this issue, too. Wondering if there's a workaround for this :/

[kaitmore]

@KendraTang Unfortunately I haven't found a workaround. I closed it because I realized this is just how serializing JSON works - It's not really storybook's fault. 🤷‍♀️ If you call JSON.stringify() on that object in the console, it will strip out the function key/val pair.

I'd still be interested to hear about workarounds though, or if storybook has plans to support this sort of use case in the future.

[ganorberg]

@kaitmore I'm not sure if this solution makes sense for Storybook to implement, but I wanted to throw out an option for allowing functions to survive JSON.stringify and JSON.parse in case it might be helpful to you.

You can customize their replacer and reviver functions like so:

/**
* @description Used as JSON.stringify parameter to stringify functions. 
* @param {String} key - If replacer finds object or array, this represents each key
* @param {Any} value - If replacer finds object or array, this represents each value
* @return {Any} Replaces old value. If falsy, removes old value.
*/
function replacer(key, value) {
  if (value instanceof Function) return value.toString();
  return value;
}

/**
* @description Used as JSON.parse parameter to convert a function string to a function
* @param {String} key - If reviver finds object or array, this represents each key
* @param {Any} value - If reviver finds object or array, this represents each value
* @return {Any} - Revives original value or function
*/
function reviver(key, value) {
  return key === 'myFunctionName' ? new Function('return ' + value)() : value;
}

Usage:

const json = JSON.stringify(object, replacer);
JSON.parse(json, reviver);

Of course, we'd want to set up the reviver in such a way that it dynamically uses your function names instead of hard-coding them into the reviver. Otherwise, you'd have to set up a separate reviver for each function.

Hope this helps!

[shilman]

Hi gang, We’ve just released addon-controls in 6.0-beta!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls README
• Migration instructions

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

[shilman]

For anybody who is interested in Controls but don't know where to start, I've created a quick & dirty step-by-step walkthrough to go from a fresh CRA project to a working demo. Check it out:

=> Storybook Controls w/ CRA & TypeScript

There are also some "knobs to controls" migration docs in the Controls README:

=> How do I migrate from addon-knobs?