Feat: support vue3

packages/mock-addon-docs/stories/examples/stories/fetch/stories.jsx

@@ -10,7 +10,7 @@ export default {
 };
 
 const Template = (args) => (
-    <GetComponent title={`${args.name} GET Request`} callApi={callFetch} />
+    <GetComponent title={args.title} callApi={callFetch} />
 );
 
 export const Get = Template.bind({});
@@ -25,9 +25,9 @@ Get.parameters = {
 export const ResponseFunction = Template.bind({});
 ResponseFunction.args = {
     title: 'Fetch (Response function)',
+    code: customFunctinBlock,
 };
 
 ResponseFunction.parameters = {
     mockData: customMockData,
-    code: customFunctinBlock,
 };

packages/mock-addon-docs/stories/examples/stories/superagent/stories.jsx

@@ -10,7 +10,7 @@ export default {
 };
 
 const Template = (args) => (
-    <GetComponent title={`${args.name} GET Request`} callApi={callSuperAgent} />
+    <GetComponent title={args.title} callApi={callSuperAgent} />
 );
 
 export const Get = Template.bind({});
@@ -25,9 +25,9 @@ Get.parameters = {
 export const ResponseFunction = Template.bind({});
 ResponseFunction.args = {
     title: 'Superagent (Response function)',
+    code: customFunctinBlock,
 };
 
 ResponseFunction.parameters = {
     mockData: customMockData,
-    code: customFunctinBlock,
 };

packages/mock-addon-docs/stories/examples/utils/index.js

@@ -81,7 +81,6 @@ export const callSuperAgent = async ({
 
     try {
         const response = await request(method, url, body);
-
         data = response.body;
         status = response.status;
     } catch (err) {

packages/mock-addon-docs/stories/mock.js

@@ -46,23 +46,13 @@ export const mockData = [
 
 export const customMockData = [
     {
-        url: 'https://jsonplaceholder.typicode.com/todos/1',
+        url: 'https://jsonplaceholder.typicode.com/todos/:id',
         method: 'GET',
         status: 200,
         response: (request) => {
-            const { body, searchParams } = request;
-
-            if (searchParams.id == 1) {
-                return {
-                    data: 'Custom data for id 1',
-                };
-            } else if (body.name === 'mock') {
-                return {
-                    data: 'Custom data for name mock',
-                };
-            }
             return {
-                data: 'Default data',
+                data: 'Custom function data',
+                method: `Request method: ${request.method}`,
             };
         },
     },

packages/mock-addon/src/Panel.js

@@ -15,8 +15,8 @@ export const Panel = (props) => {
         },
     });
 
-    const onChange = (item, name, value) => {
-        emit(EVENTS.UPDATE, item, name, value);
+    const onChange = (item, key, value) => {
+        emit(EVENTS.UPDATE, { item, key, value });
     };
 
     if (!mockData || mockData.length === 0) {
@@ -49,8 +49,8 @@ export const Panel = (props) => {
                         <MockItem
                             id={index}
                             key={index}
-                            onChange={(name, value) =>
-                                onChange(item, name, value)
+                            onChange={(key, value) =>
+                                onChange(item, key, value)
                             }
                             {...rest}
                         />

packages/mock-addon/src/utils/faker.js

@@ -141,7 +141,11 @@ export class Faker {
             setTimeout(() => {
                 if (typeof response === 'function') {
                     const data = response(new Request(url, { method, body }));
-                    xhr.respond(status, defaultResponseHeaders, data);
+                    xhr.respond(
+                        +status,
+                        defaultResponseHeaders,
+                        JSON.stringify(data)
+                    );
                 } else {
                     xhr.respond(
                         +status,

packages/mock-addon/src/withRoundTrip.js

@@ -1,33 +1,58 @@
-import { useEffect } from 'react';
-import { FORCE_RE_RENDER } from '@storybook/core-events';
-import { useChannel, useParameter } from '@storybook/addons';
+import { FORCE_RE_RENDER, STORY_CHANGED } from '@storybook/core-events';
+import addons from '@storybook/addons';
 import { EVENTS, PARAM_KEY, GLOBAL_PARAM_KEY } from './utils/constants';
 import faker from './utils/faker';
 
-export const withRoundTrip = (storyFn) => {
-    const paramData = useParameter(PARAM_KEY, []);
-    const mockAddonConfigs = useParameter(GLOBAL_PARAM_KEY, {
+const getParameter = (parameters, key, defaultValue) => {
+    return parameters[key] || defaultValue;
+};
+
+let INITIAL_MOUNT_STATE = true;
+let STORY_CHANGED_STATE = false;
+
+const channel = addons.getChannel();
+
+export const withRoundTrip = (storyFn, context) => {
+    const { parameters } = context;
+    const paramData = getParameter(parameters, PARAM_KEY, []);
+    const mockAddonConfigs = getParameter(parameters, GLOBAL_PARAM_KEY, {
         refreshStoryOnUpdate: false,
         globalMockData: [],
     });
+    const { globalMockData, refreshStoryOnUpdate } = mockAddonConfigs;
+    const data = [...globalMockData, ...paramData];
+
+    /**
+     * Initiate event listener for story change and update.
+     * This state executes once to setup.
+     */
+    if (INITIAL_MOUNT_STATE) {
+        faker.makeInitialRequestMap(data);
+
+        channel.emit(EVENTS.SEND, faker.getRequests());
 
-    const emit = useChannel({
-        [EVENTS.UPDATE]: (item, name, value) => {
-            faker.update(item, name, value);
+        channel.on(STORY_CHANGED, () => {
+            STORY_CHANGED_STATE = true;
+        });
 
-            const { refreshStoryOnUpdate } = mockAddonConfigs;
+        channel.on(EVENTS.UPDATE, ({ item, key, value }) => {
+            faker.update(item, key, value);
             const req = faker.getRequests();
-            emit(EVENTS.SEND, req);
-            refreshStoryOnUpdate && emit(FORCE_RE_RENDER);
-        },
-    });
+            channel.emit(EVENTS.SEND, req);
+            refreshStoryOnUpdate && channel.emit(FORCE_RE_RENDER);
+        });
 
-    useEffect(() => {
-        const { globalMockData } = mockAddonConfigs;
-        const data = [...globalMockData, ...paramData];
-        faker.makeInitialRequestMap(data);
-        emit(EVENTS.SEND, faker.getRequests());
-    }, []);
+        INITIAL_MOUNT_STATE = false;
+    }
 
-    return storyFn();
+    /**
+     * This state executes when a story change. So that it can
+     * take the new parameters to setup the faker requests.
+     */
+    if (STORY_CHANGED_STATE) {
+        faker.makeInitialRequestMap(data);
+        channel.emit(EVENTS.SEND, faker.getRequests());
+        STORY_CHANGED_STATE = false;
+    }
+    return storyFn(context);
 };