In the Show Code feature of Storybook, every element is being displayed for

Question

In the Show Code feature of Storybook, every element is being displayed for

My Vue 3 + Storybook setup is all running smoothly, except for a little hiccup when I click "Show Code". It seems to display everything instead of just the template. Can anyone help me figure out what's going wrong?

https://i.stack.imgur.com/zzBl0.png

Sharing my story below:

import Button from './Button.vue';

export default {
  title: 'Components/Button',
  component: Button
};

const Template = (args) => ({
  // Components used in your story `template` are defined in the `components` object
  components: { Button },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return { args };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: '<my-button v-bind="args" />',
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

vue.js storybook

Answer 1

Answer №1

Looking at the screenshot provided, it appears to be functioning as expected in Vue 2.

https://i.stack.imgur.com/HVauj.png

However, when testing with Vue 3, I am encountering the same issue.

https://i.stack.imgur.com/tRnUF.png

The straightforward explanation

The feature has not been implemented for Vue 3 yet.

Upon examining the source code of Storybook's docs add-on, it is evident that there is a specific implementation for Vue 3. However, this implementation in Vue 3 lacks the source decorator responsible for generating a rendered version of the source code.

Quick fix

If you prefer not to wait for the official update from the Storybook team, you can utilize the following code snippet to create your documentation based on specified arguments. Note that this solution may not cover all scenarios.

const stringifyArguments = (key, value) => {
    switch (typeof value) {
    case 'string':
        return `${key}="${value}"`;
    case 'boolean':
        return value ? key : '';
    default:
        return `:${key}="${value}"`;
    }
};

const generateSource = (templateSource, args) => {
    const stringifiedArguments = Object.keys(args)
    .map((key) => stringifyArguments(key, args[key]))
    .join(' ');

    return templateSource.replace('v-bind="args"', stringifiedArguments);
};

const template = '<my-button v-bind="args" />';

const Template = (args) => ({
    components: { MyButton },
    setup() {
    return { args };
    },
    template,
});

export const Primary = Template.bind({});
Primary.args = {
    primary: true,
    label: 'Button',
};

Primary.parameters = {
    docs: {
    source: { code: generateSource(template, Primary.args) },
    },
};

Another temporary workaround would be manually crafting the source code instead of relying on automatic generation.

Primary.parameters = {
  docs: {
    source: { code: '<my-button primary label="Button" />' },
  },
};

Answer 2

Looking at the screenshot provided, it appears to be functioning as expected in Vue 2.

https://i.stack.imgur.com/HVauj.png

However, when testing with Vue 3, I am encountering the same issue.

https://i.stack.imgur.com/tRnUF.png

The straightforward explanation

The feature has not been implemented for Vue 3 yet.

Upon examining the source code of Storybook's docs add-on, it is evident that there is a specific implementation for Vue 3. However, this implementation in Vue 3 lacks the source decorator responsible for generating a rendered version of the source code.

Quick fix

If you prefer not to wait for the official update from the Storybook team, you can utilize the following code snippet to create your documentation based on specified arguments. Note that this solution may not cover all scenarios.

const stringifyArguments = (key, value) => {
    switch (typeof value) {
    case 'string':
        return `${key}="${value}"`;
    case 'boolean':
        return value ? key : '';
    default:
        return `:${key}="${value}"`;
    }
};

const generateSource = (templateSource, args) => {
    const stringifiedArguments = Object.keys(args)
    .map((key) => stringifyArguments(key, args[key]))
    .join(' ');

    return templateSource.replace('v-bind="args"', stringifiedArguments);
};

const template = '<my-button v-bind="args" />';

const Template = (args) => ({
    components: { MyButton },
    setup() {
    return { args };
    },
    template,
});

export const Primary = Template.bind({});
Primary.args = {
    primary: true,
    label: 'Button',
};

Primary.parameters = {
    docs: {
    source: { code: generateSource(template, Primary.args) },
    },
};

Another temporary workaround would be manually crafting the source code instead of relying on automatic generation.

Primary.parameters = {
  docs: {
    source: { code: '<my-button primary label="Button" />' },
  },
};

Answer 3

Answer №2

An issue has been identified

To address this, you can implement a workaround provided in the GitHub issue linked above.

Start by creating a file called withSource.js within the .storybook directory with the following contents:

import { addons, makeDecorator } from "@storybook/addons";
import kebabCase from "lodash.kebabcase"
import { h, onMounted } from "vue";

// The value below is not exported by addons-docs
export const SNIPPET_RENDERED = `storybook/docs/snippet-rendered`;

function templateSourceCode (
  templateSource,
  args,
  argTypes,
  replacing = 'v-bind="args"',
) {
  const componentArgs = {}
  for (const [k, t] of Object.entries(argTypes)) {
    const val = args[k]
    if (typeof val !== 'undefined' && t.table && t.table.category === 'props' && val !== t.defaultValue) {
      componentArgs[k] = val
    }
  }

  const propToSource = (key, val) => {
    const type = typeof val
    switch (type) {
      case "boolean":
        return val ? key : ""
      case "string":
        return `${key}="${val}"`
      default:
        return `:${key}="${val}"`
    }
  }

  return templateSource.replace(
    replacing,
    Object.keys(componentArgs)
      .map((key) => " " + propToSource(kebabCase(key), args[key]))
      .join(""),
  )
}

export const withSource = makeDecorator({
  name: "withSource",
  wrapper: (storyFn, context) => {
    const story = storyFn(context);

    // This creates a new component that computes the source code when mounted
    // and emits an event handled by addons-docs
    // This approach is based on Vue (2) implementation
    // Refer to https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/sourceDecorator.ts
    return {
      components: {
        Story: story,
      },

      setup() {
        onMounted(() => {
          try {
            // Retrieve the story source
            const src = context.originalStoryFn().template;
            
            // Generate the source code based on the current arguments
            const code = templateSourceCode(
              src,
              context.args,
              context.argTypes
            );

            const channel = addons.getChannel();

            const emitFormattedTemplate = async () => {
              const prettier = await import("prettier/standalone");
              const prettierHtml = await import("prettier/parser-html");

              
              channel.emit(
                SNIPPET_RENDERED,
                (context || {}).id,
                prettier.format(`<template>${code}</template>`, {
                  parser: "vue",
                  plugins: [prettierHtml],
                  htmlWhitespaceSensitivity: "ignore",
                })
              );
            };

            setTimeout(emitFormattedTemplate, 0);
          } catch (e) {
            console.warn("Failed to render code", e);
          }
        });

        return () => h(story);
      },
    };
  },
});

Next, include this decorator in your preview.js file:

import { withSource } from './withSource'

...

export const decorators = [
  withSource
]

The solution was proposed by this author

Answer 4

An issue has been identified

To address this, you can implement a workaround provided in the GitHub issue linked above.

Start by creating a file called withSource.js within the .storybook directory with the following contents:

import { addons, makeDecorator } from "@storybook/addons";
import kebabCase from "lodash.kebabcase"
import { h, onMounted } from "vue";

// The value below is not exported by addons-docs
export const SNIPPET_RENDERED = `storybook/docs/snippet-rendered`;

function templateSourceCode (
  templateSource,
  args,
  argTypes,
  replacing = 'v-bind="args"',
) {
  const componentArgs = {}
  for (const [k, t] of Object.entries(argTypes)) {
    const val = args[k]
    if (typeof val !== 'undefined' && t.table && t.table.category === 'props' && val !== t.defaultValue) {
      componentArgs[k] = val
    }
  }

  const propToSource = (key, val) => {
    const type = typeof val
    switch (type) {
      case "boolean":
        return val ? key : ""
      case "string":
        return `${key}="${val}"`
      default:
        return `:${key}="${val}"`
    }
  }

  return templateSource.replace(
    replacing,
    Object.keys(componentArgs)
      .map((key) => " " + propToSource(kebabCase(key), args[key]))
      .join(""),
  )
}

export const withSource = makeDecorator({
  name: "withSource",
  wrapper: (storyFn, context) => {
    const story = storyFn(context);

    // This creates a new component that computes the source code when mounted
    // and emits an event handled by addons-docs
    // This approach is based on Vue (2) implementation
    // Refer to https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/sourceDecorator.ts
    return {
      components: {
        Story: story,
      },

      setup() {
        onMounted(() => {
          try {
            // Retrieve the story source
            const src = context.originalStoryFn().template;
            
            // Generate the source code based on the current arguments
            const code = templateSourceCode(
              src,
              context.args,
              context.argTypes
            );

            const channel = addons.getChannel();

            const emitFormattedTemplate = async () => {
              const prettier = await import("prettier/standalone");
              const prettierHtml = await import("prettier/parser-html");

              
              channel.emit(
                SNIPPET_RENDERED,
                (context || {}).id,
                prettier.format(`<template>${code}</template>`, {
                  parser: "vue",
                  plugins: [prettierHtml],
                  htmlWhitespaceSensitivity: "ignore",
                })
              );
            };

            setTimeout(emitFormattedTemplate, 0);
          } catch (e) {
            console.warn("Failed to render code", e);
          }
        });

        return () => h(story);
      },
    };
  },
});

Next, include this decorator in your preview.js file:

import { withSource } from './withSource'

...

export const decorators = [
  withSource
]

The solution was proposed by this author

In the Show Code feature of Storybook, every element is being displayed for

Answer №1

The straightforward explanation

Quick fix

Answer №2

Similar questions

The process of mounting a Vue component involves removing the surrounding div element

Passing data from an API in Vue.js to a different page

Enhancing the default vue-cli webpack app with additional components

Feeling lost when it comes to understanding how vue3 handles reactivity

Transfer information from an array to a Vue function

Exploring Firebase's Collection Retrieval through Vue.js

Identifying the specific filter used in Vue-tables-2

Change the Vue3 PrimeVue theme or CSS file with a simple click or upon page load

Verify for any empty values in a quiz

Executing functions from one component to another in Vue.js

how to switch page direction seamlessly in vue without triggering a page refresh

Unable to display nested JSON data from API in Vue.js

What is the process for dynamically inserting a new object into an array of data objects in Vue.js?

Vue.js dynamic HTML elements are constantly changing and evolving

Can you point me to the source of definition for Vue 2's ComponentDefinition and ComponentConstructor types?

What could be causing my POST request to fail in this basic VueJS form?

I keep encountering an attach() error every time I try to close a modal that contains a vee-validated form

How can I make text wrap instead of overflowing to ellipsis in a list when using vue-material?

Ways to automatically assign a unique div id to every item in a v-for loop?

Tips for using rspec to test front end functionality?