Dynamic Source Code

[dspanier]

Is your feature request related to a problem? Please describe.

Right now you can use parameters.docs.source.code to static render the source code of a component.
But i want to customize the source code and have the args dynamicly included.

For example:
I want to show a vue component as JSON string.
And when a user interacts with the args over the control area, args should be added or removed from the json string

Describe the solution you'd like

Solution 1:
Change the code attribute to string or a function returning a string, but the function gets a parameter with the newest (updated) args.

Solution 2:
Include the parameters.docs.source.code to the render funktion, so that the code gets always the newest args or include it to the return of the etup function within the render function.

Examples of solution 2:

export const Button: Story = {
    args: {
        label: 'Button',
    },
    render: (args: any) => ({
        components: { Button },
        setup() {
            return {
                args,
            };
        },
        template: '<button v-bind="args">{{args.label}}</button>',
        parameters: {
            docs: {
                source: {
                    code: JSON.stringify({ title: args.label }),
                },
            },
        },
    }),
};

export const Button: Story = {
    args: {
        label: 'Button',
    },
    render: (args: any) => ({
        components: { Button },
        setup() {
            return {
                args,
                parameters: {
                    docs: {
                        source: {
                            code: JSON.stringify({ title: args.label }),
                        },
                    },
                },
            };
        },
        template: '<button v-bind="args">{{args.label}}</button>',
    }),
};

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response