Skip to content

Commit

Permalink
Merge pull request #22717 from storybookjs/kasper/update-args-reactively
Browse files Browse the repository at this point in the history
Vue3: Fix reactive args updates in decorators
  • Loading branch information
kasperpeulen committed May 25, 2023
1 parent 23ee6c2 commit a5bef95
Show file tree
Hide file tree
Showing 12 changed files with 24 additions and 15 deletions.
3 changes: 2 additions & 1 deletion code/addons/controls/template/stories/basics.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: globalThis.Components.Pre,
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: { ...context.args } } }),
],
argTypes: {
boolean: { control: 'boolean' },
Expand Down
3 changes: 2 additions & 1 deletion code/addons/controls/template/stories/conditional.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: globalThis.Components.Pre,
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: { ...context.args } } }),
],
};

Expand Down
3 changes: 2 additions & 1 deletion code/addons/controls/template/stories/disable.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: globalThis.Components.Pre,
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: { ...context.args } } }),
],
};

Expand Down
3 changes: 2 additions & 1 deletion code/addons/controls/template/stories/filters.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: globalThis.Components.Pre,
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: { ...context.args } } }),
],
args: {
helloWorld: 1,
Expand Down
3 changes: 2 additions & 1 deletion code/addons/controls/template/stories/issues.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: globalThis.Components.Pre,
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: { ...context.args } } }),
],
};

Expand Down
3 changes: 2 additions & 1 deletion code/addons/controls/template/stories/matchers.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: globalThis.Components.Pre,
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: { ...context.args } } }),
],
};

Expand Down
3 changes: 2 additions & 1 deletion code/addons/controls/template/stories/sorting.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import type { PartialStoryFn, StoryContext } from '@storybook/types';
export default {
component: globalThis.Components.Pre,
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.args } }),
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: { ...context.args } } }),
],
argTypes: {
x: { type: { required: true } },
Expand Down
2 changes: 1 addition & 1 deletion code/lib/store/template/stories/argMapping.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default {
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => {
return storyFn({
args: { object: context.args },
args: { object: { ...context.args } },
});
},
],
Expand Down
2 changes: 1 addition & 1 deletion code/lib/store/template/stories/argTypes.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default {
// Compose all the argTypes into `object`, so the pre component only needs a single prop
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) =>
storyFn({ args: { object: context.argTypes } }),
storyFn({ args: { object: { ...context.argTypes } } }),
],
argTypes: {
componentArg: { type: 'string' },
Expand Down
3 changes: 2 additions & 1 deletion code/lib/store/template/stories/args.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export default {
decorators: [
(storyFn: PartialStoryFn, context: StoryContext) => {
const { argNames } = context.parameters;
const object = argNames ? pick(context.args, argNames) : context.args;
const args = { ...context.args };
const object = argNames ? pick(args, argNames) : args;
return storyFn({ args: { object } });
},
],
Expand Down
8 changes: 4 additions & 4 deletions code/renderers/vue3/src/decorateStory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ export function decorateStory(
let story: VueRenderer['storyResult'] | undefined;

const decoratedStory: VueRenderer['storyResult'] = decorator((update) => {
story = decorated({
...context,
...sanitizeStoryContextUpdate(update),
});
const sanitizedUpdate = sanitizeStoryContextUpdate(update);
// update the args in a reactive way
if (update) sanitizedUpdate.args = Object.assign(context.args, sanitizedUpdate.args);
story = decorated({ ...context, ...sanitizedUpdate });
return story;
}, context);

Expand Down
3 changes: 2 additions & 1 deletion code/renderers/vue3/src/docs/sourceDecorator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import parserHTML from 'prettier/parser-html';

// eslint-disable-next-line import/no-extraneous-dependencies
import { isArray } from '@vue/shared';
import { toRaw } from 'vue';

type ArgEntries = [string, any][];
type Attribute = {
Expand Down Expand Up @@ -60,7 +61,7 @@ function getComponentNameAndChildren(component: any): {
*/
function generateAttributesSource(_args: Args, argTypes: ArgTypes, byRef?: boolean): string {
// create a copy of the args object to avoid modifying the original
const args = { ..._args };
const args = { ...toRaw(_args) };
// filter out keys that are children or slots, and convert event keys to the proper format
const argsKeys = Object.keys(args)
.filter(
Expand Down

0 comments on commit a5bef95

Please sign in to comment.