Addon-docs: Dynamic source rendering for Vue #12812
Conversation
#11400 This commit adds dynamic source code rendering feature to Docs addon for Vue.js. The goals are 1) reflecting Controls' value to code block and 2) showing a code similar to what component consumers would write. To archive these goals, this feature compiles a component with Vue, then walks through vdom and stringifys the result. It could be possible to parse components' template or render function then stringify results, but it would be costly and hard to maintain (especially for parsing). We can use vue-template-compiler for the purpose, but it can't handle render functions so it's not the way to go IMO. Speaking of the goal 2, someone wants events to be in the output code. But it's so hard to retrieve component definitions (e.g. `methods`, `computed`). I think it's okay to skip events until we figure there is a high demand for that.
| </div>`, | ||
| }) | ||
| ) | ||
| ).toMatchInlineSnapshot(`<div ><form ><button >Button</button></form></div>`); |
There was a problem hiding this comment.
Anyway to get rid of the extra spaces? E.g. <div > => <div>? Or is that standard in Vue?
There was a problem hiding this comment.
Or is that standard in Vue?
Nope, AFAIK.
It's ugly but will be erased by Prettier before emitting. Should we remove it before formatting?
There was a problem hiding this comment.
Aha didn't realize this was the pre-prettier output. If prettier fixes, that's fine by me.
There was a problem hiding this comment.
I wonder how I can write a story to achieve this effect!
Yes, you can use the v-bind shorthand syntax ( <template>
<my-component
:bool-prop="true"
:number-prop="1"
:string-prop="'extra quotes needed since this is a JS expression'"
/>
</template> |
I would prefer to see it like this... My goal would be to just click copy and then paste it into my code, without any editing. This means:
Lastly, the Vue style guide recommends using PascalCase for Components. I was gonna jump on this request, but really excited someone already did! Awesome work @pocka! |
|
The
Probably the casing transform is easy to implement (https://github.com/storybookjs/storybook/pull/12812/files#diff-83d08076a6b73dab376e42608b87b8720952063d14015e3fbf5d38ac3a23fa94R76) and a good-to-have-feature. Anyone interests? |
I want to know how can I write a story to make this happen！ |
|
This looks so much better!
|
|
I am using vue 3 with storybook 6.2.0-alpha.23 but it didnt render the dynamic code.
|
#13562 In a Pull Request that adds dynamic source rendering feature for Vue.js [0], prettier was added as regular dependency. It broke IE11 (ES5) compatibility because prettier is published in ES2015 or later. This commit make Storybook's webpack config to transpile prettier down to ES5. [0] ... #12812
#13562 In a Pull Request that adds dynamic source rendering feature for Vue.js [0], prettier was added as regular dependency. It broke IE11 (ES5) compatibility because prettier is published in ES2015 or later. This commit make Storybook's webpack config to transpile prettier down to ES5. [0] ... #12812
Issue: #11400
What I did
Added a decorator takes Vue story and emits source code for that.
NOTE: I didn't test directives (e.g.
v-model,v-on, custom directives)How to test
If your answer is yes to any of these, please make sure to include it in your PR. ... done (
addons/docs/src/frameworks/vue/sourceDecorator.test.ts)To see, run
cd examples/vue-kitchen-sink && yarn storybook