diff --git a/addons/actions/src/models/ActionOptions.ts b/addons/actions/src/models/ActionOptions.ts
index 548c9c5075bb..c4a838b17c25 100644
--- a/addons/actions/src/models/ActionOptions.ts
+++ b/addons/actions/src/models/ActionOptions.ts
@@ -2,4 +2,5 @@ export interface ActionOptions {
depth?: number;
clearOnStoryChange?: boolean;
limit?: number;
+ allowFunction?: boolean;
}
diff --git a/addons/actions/src/preview/__tests__/action.test.js b/addons/actions/src/preview/__tests__/action.test.js
index 75128b8b5c25..36a954efdb58 100644
--- a/addons/actions/src/preview/__tests__/action.test.js
+++ b/addons/actions/src/preview/__tests__/action.test.js
@@ -91,3 +91,62 @@ describe('Depth config', () => {
});
});
});
+
+describe('allowFunction config', () => {
+ it('with global allowFunction false', () => {
+ const channel = createChannel();
+
+ const allowFunction = false;
+
+ configureActions({
+ allowFunction,
+ });
+
+ action('test-action')({
+ root: {
+ one: {
+ a: 1,
+ b: () => 'foo',
+ },
+ },
+ });
+
+ expect(getChannelData(channel)[0]).toEqual({
+ root: {
+ one: {
+ a: 1,
+ b: expect.any(Function),
+ },
+ },
+ });
+ });
+
+ // TODO: this test is pretty pointless, as the real channel isn't used, nothing is changed
+ it('with global allowFunction true', () => {
+ const channel = createChannel();
+
+ const allowFunction = true;
+
+ configureActions({
+ allowFunction,
+ });
+
+ action('test-action')({
+ root: {
+ one: {
+ a: 1,
+ b: () => 'foo',
+ },
+ },
+ });
+
+ expect(getChannelData(channel)[0]).toEqual({
+ root: {
+ one: {
+ a: 1,
+ b: expect.any(Function),
+ },
+ },
+ });
+ });
+});
diff --git a/addons/actions/src/preview/action.ts b/addons/actions/src/preview/action.ts
index f24843595593..1a3642325579 100644
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@@ -22,6 +22,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
options: {
...actionOptions,
depth: minDepth + (actionOptions.depth || 3),
+ allowFunction: actionOptions.allowFunction || false,
},
};
channel.emit(EVENT_ID, actionDisplayToEmit);
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index 88d87745f9c0..8e3afb2858fb 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -139,8 +139,10 @@ export const allTypes = () => {
-
-
+
+
diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
index 8b8cd2faee6e..a2a01a4ea836 100644
--- a/lib/channel-postmessage/src/index.ts
+++ b/lib/channel-postmessage/src/index.ts
@@ -67,12 +67,18 @@ export class PostmsgTransport {
});
}
let depth = 15;
+ let allowFunction = true;
+
+ if (options && typeof options.allowFunction === 'boolean') {
+ // eslint-disable-next-line prefer-destructuring
+ allowFunction = options.allowFunction;
+ }
if (options && Number.isInteger(options.depth)) {
// eslint-disable-next-line prefer-destructuring
depth = options.depth;
}
- const data = stringify({ key: KEY, event }, { maxDepth: depth });
+ const data = stringify({ key: KEY, event }, { maxDepth: depth, allowFunction });
// TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
// might replace '*' with document.location ?