Addon-docs: Support Vue JSX in MDX stories

[Aaron-Pool]

Describe the bug
A clean install of vue and addon-docs preset doesn't work.

To Reproduce
Steps to reproduce the behavior:

1. Fork: https://github.com/Aaron-Pool/storybook-vue-addon-docs-repro
2. Run yarn storybook

Expected behavior
It displays the docs for Test.stories.mdx correctly.

Screenshots

System:

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 12.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.12.3 - ~\.yarn\bin\yarn.CMD
    npm: 6.10.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @storybook/addon-actions: ^5.2.0-beta.26 => 5.2.0-beta.26
    @storybook/addon-docs: ^5.2.0-beta.26 => 5.2.0-beta.26
    @storybook/addon-links: ^5.2.0-beta.26 => 5.2.0-beta.26
    @storybook/addons: ^5.2.0-beta.26 => 5.2.0-beta.26
    @storybook/vue: ^5.2.0-beta.26 => 5.2.0-beta.26

Additional context
Before I even got to this state, the storybook build wouldn't even run until I manually added yarn add -D @babel/plugin-transform-react-jsx

[shilman]

Hi @Aaron-Pool the contents of <Story> need to be appropriately structured for Vue. It can be a function that returns an object, or just the return object itself.

Here's a valid example:

<Story name="square" height="60px">
  {{
    template: '<my-button :rounded="false">A Button with square edges</my-button>',
  }}
</Story>

This should exactly parallel the return value from a regular Storybook for Vue story. https://storybook.js.org/docs/guides/guide-vue/

[Aaron-Pool]

Oh? Sorry, this example in in the technical preview threw me off

import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';

<Meta title='MDX|Button' component={Button} />


# Hello Docs

Welcome to the future of Storybook!

<Story name="hello">
  <Button onClick={action('clicked')}>Hello button!</Button>
</Story>

<Story name="with emoji">
  <Button onClick={action('clicked')}>🤘🚀💯</Button>
</Story>

I assumed that that would work for any JSX supporting view layer, since (to my knowledge) the above has no parallel to the current usage of the way stories are written, even in the react view layer?

[shilman]

Unfortunately we're not there yet. We support JSX directly in React, but it's going to take a little work to get that level of ergonomics for the other view layers. There are two reasons:

1. The contents of the <Story> block are passed directly to the underlying storiesOf().add(...) function in the Storybook API. AFAIK, @storybook/vue does not support JSX directly yet.
2. We might need to do some work to get MDX to do the right thing. This could be as simple as configuring the right webpack loader to pick up the output of MDX => JSX and transforming it into the right Vue code. Or it could be something more involved. AFAIK MDX for Vue is in alpha.

Now that I write this I realize that we could probably make our own compiler smarter about this and eliminate the need for both of those things. I'm not sure what's the best solution yet, but would be up for figuring that out together after 5.2 ships.

I'm converting this bug report into a feature request. :)

[Aaron-Pool]

@shilman yeah, I actually spent about an hour digging through your mdx compiler plug-in, it seems like it should be possible to check the view layer and parse the contents of the tag with a different set of Babel plugins, depending on the view layer that is active. But I tried to do a quick hack of the storybook compiler dist code and I was still running into some parsing errors. Whenever I get a chance to get back to it, I'll try to add a more detailed write up to this thread.

[Aaron-Pool]

Oh, and also, I don't entirely know what you specifically mean when you say "AFAIK, @storybook/vue does not support JSX directly yet". Because you can definitely use JSX with the Vue storiesOf API, but maybe you're talking about putting JSX directly in, rather than a function that returns JSX?

[shilman]

Yeah that's what I meant. I think the non-react view layers support stores that return objects and strings. Whereas react specifically supports JSX (React elements, to be more specific).

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mathieuartu]

Hi,
A little bump on this.

Using versions 5.2.1 of @storybook/vue and @storybook/addon-docs

I've been following drastically the installation guide for addon-docs, replacing the preset with @storybook/addon-docs/vue/preset and I've tried for the last 24 hours to display a vue component within a .mdx file, but still no success...

Here is my Button.stories.mdx file

import { Meta, Story, Props } from '@storybook/addon-docs/blocks'

import { Button } from './Button'

<Meta title="Button" component={Button} />

# Button

<Story name="positive">
    <Button>A Button with square edges</Button>
</Story>

Then I run storybook and when I go the docs tab on the Button story, I get this error :

TypeError: Cannot add property _Ctor, object is not extensible at Function.Vue.extend

Do you guys have a link towards a working example of storybooks addon-docs with Vue ?

Thanks!

Edit : I also tried this implementation

<Story name="positive">
    {{
        template: '<Button>A Button with square edges</Button>'
    }}
</Story>

With no success. It does not outputs any error, but I still dont get my custom Button classes and all when I inspect the result.

Quick FYI : it still works like this in .stories.js files :

storiesOf('Button', module).add('Button', () => {
    return {
        components: { Button },

        template: `<Button>A Button with square edges</Button>`,
    }
})

[Aaron-Pool]

@mathieuartu Vue JSX does not currently work on mdx files. Hopefully something that will be addressed in one of the next few releases.

As for your edit, have you registered Button globally somewhere (a.k.a Vue.component(Button))? Because, if not, you still need to declare it in your component definition like so:

import { Button } from './Button';
<Story name="positive">
    {{
        components: { Button},
        template: '<Button>A Button with square edges</Button>'
    }}
</Story>

[mathieuartu]

@Aaron-Pool Thank you so much for your answer! I understand and I'll keep waiting for the day Vue JSX works in mdx files :)
In the meantime, your solution worked like a charm! Thank you.

[nickforddev]

Any updates on this? @storybook/vue fully supports JSX stories for Vue...

[fpunny]

Not saying that this should be a solution... but here's a code snippet of getting JSX to work with vue for anyone who is dying to use JSX for vue

import ReactDOM from 'react-dom';
import { v4 } from 'uuid';
import React from 'react';
import Vue from 'vue';

// https://github.com/egoist/vue-to-react/blob/master/src/index.js
export default ({ vue, children, ...props }) => {
  const el = React.useRef(null);

  React.useEffect(() => {
    const id = v4();
    const app = new Vue({
      el: el.current,
      render: (h) => h(vue, { props }, children && [h('span', { attrs: { id } })]),
      mounted() {
        if (children) {
          ReactDOM.render(
            React.createElement(React.Fragment, {}, children),
            document.getElementById(id),
          );
        }
      }
    });

    return () => app.$destroy();
  });

  return React.createElement('div', { ref: el });
};

An example of using this looks like this

import { Meta, Title, Preview, Props } from '@storybook/addon-docs/blocks';
import ToReact from '../../helpers/ToReact'; # This is the snippet
import Component from '.';

<Meta title='Component' component={Component} />

<Title />

A component of some sort

<Props of={Component} />

<Preview>
  <ToReact vue={Component} { ...[your props] }>
    <input name='twt' placeholder='text'/>
  </ToReact>
</Preview>

[sdailly]

import { Meta, Props, Story, Preview } from "@storybook/addon-docs/blocks";
import Button from "@/components/UpButton/Button.vue";
import ButtonStory from "./Button.story.vue";

<Meta title="Components|Button" component={Button} />

# Button

<Props of={Button} />

All Buttons

<Preview>
  <Story name="Button">{() => ButtonStory}</Story>
</Preview>

This is how I write story in mdx

How do you set args in your component ?

[collinmesser]

How do you set args in your component ?

@sdailly I followed the example in vue-kitchen-sink here https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx

<Meta
  title="Addon/ControlsMDX"
  component={MyButton}
  argTypes={{
    color: { control: { type: 'color' } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyButton },
  template: '<my-button :color="color" :rounded="rounded">{{label}}</my-button>',
});

<Canvas>
  <Story
    name="Rounded"
    args={{
      rounded: true,
      color: '#f00',
      label: 'A Button with rounded edges',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

[Hishengs]

I considering update my storybook form 5.3.x to 6.0.x, is vue mdx supported or not at 6.0.x. or 6.1.x ? I can not find any solution so far

[jodelamo]

☝️ Also curious. Pretty sure this was announced as a feature for 6.x. Can't find where I read it, however, so maybe I dreamt it.

[shilman]

@Hishengs not in 6.0 and 6.1 is just starting now

[nikwilliamson]

@shilman I saw you removed this from 6.2 docs milestone. Any news or movement on this?

[shilman]

waiting on mdx 2.0

[Sidnioulz]

https://www.npmjs.com/package/storybook-addon-vue-mdx should address this ticket. It's now possible, with caveats as the addon is very experimental, to load Vue components in MDX docs pages.

[bodograumann]

Is this even still relevant with inline stories in mdx files being deprecated?

[shilman]

@bodograumann indeed, I'd say that this is no longer relevant. And I believe that @Sidnioulz addon addresses a related but different problem. So I'm closing this for now. Thanks!

[Sidnioulz]

You're right, I got confused by the all-too-familiar error message and missed that the execution contexts are different!