[WIP] Feat: add Vue integration #95

pedronauck · 2018-06-27T01:26:28Z

Description

This pull request support Vue integration

Review

Add example with vue
Add docz-plugin-vue
Translate VueWrapper to component name in output

Pre-merge checklist

Test <PropsTable> integration
Test <Playground> integration

pedronauck · 2018-06-27T11:58:03Z

packages/docz-plugin-vue/src/index.ts

+import { createPlugin } from 'docz-core'
+import { VueLoaderPlugin } from 'vue-loader'
+
+interface BabelRC {


@marceloavf you can remove this interface here, typescript already infer this type!

pedronauck · 2018-06-27T11:58:14Z

packages/docz-plugin-vue/src/index.ts

+
+export const doczPluginVue = () =>
+  createPlugin({
+    modifyBabelRc: (babelrc: BabelRC): BabelRC => {


so, I don't get it here too!

pedronauck · 2018-06-27T11:58:50Z

packages/docz-plugin-vue/src/index.ts

+      })
+
+      config.module.rules.push({
+        test: /\.css$/,


I was thinking about that and how it can integrate with docz-plugin-css 🤔

That should be a good thing too, we could specify it in Playground tag or also in configuration file, in vue we can just set a tag lang="scss" to change the processor of template, style and script. Might be a way to get it. https://vue-loader.vuejs.org/guide/pre-processors.html#sass

pedronauck · 2018-06-27T11:59:32Z

examples/vue/src/components/Alert.vue

+
+<script>
+  export default {
+    name: 'Alert',


Can you make this Alert in the same pattern of others that has in the examples? Changing the background based on the kind property...

pedronauck · 2018-06-27T12:00:10Z

packages/docz-plugin-vue/src/index.ts

+  babelrc?: boolean
+}
+
+export const doczPluginVue = () =>


keep the simplicity pattern here, instead of export doczPluginVue, use just vue

pedronauck · 2018-06-30T04:08:29Z

Closed until we figure out the best strategy for that 👍

artalar · 2018-08-09T08:23:46Z

Hi! Any news?
@pedronauck

marceloavf · 2018-08-09T10:17:45Z

Still no solution for the parse of proptables, component name conversion and full compatibility tested with render and single file components @artalar.

artalar · 2018-08-09T18:42:11Z

What about https://github.com/akxcv/vuera ?

marceloavf · 2018-08-09T19:06:57Z

We are using vuera @artalar, you can see more in this branch https://github.com/pedronauck/docz/tree/feat/vue

We also have some problems with babel, as you can see here too akxcv/vuera#46

If you figure out something, feel free to discuss or help us with that integration!

Aaron-Pool · 2018-08-16T19:43:18Z

So, would these problems also exist for plain old .js Vue components? My company uses Vue, but our design system code is purely .js, we don't use .vue single file components. We just write Vue components with a render function and JSX. Its very react-y, actually.

marceloavf · 2018-08-16T20:00:50Z

We need also to make pure render components to work @Aaron-Pool, they both render normally, but we still have an issue with PropsTable and make vuera more interactive to render our code.

Aaron-Pool · 2018-08-16T20:04:24Z

Ok! I'll look through the vue branch you have set up and see if there's anything I can think of worth suggesting. Thanks for the quick response!

Aaron-Pool · 2018-08-17T16:48:17Z

Ok, so, just a thought after poking around for a bit, instead of using VueWrapper, have you considered creating a simple webpack loader to chain after the .vue file loader that does two things:

Runs the component through vue-docgen-api (https://github.com/vue-styleguidist/vue-docgen-api)
Wraps the vue component in the vuera VueInReact HOC
Assign the output of vue-docgen-api to __docgenInfo, just like react-docgen does

Then you could conditionally skip adding react-docgen loader to jsx if any non-compatible plugins have been required (such as a vue plugin), so that the __docgenInfo isn't overwritten?

Or, if you didn't want to worry about conditionally skipping the react-docgen loader based on current plugins, you could just assign the output of vue-docgen-api to __altDocgenInfo and use __altDocgenInfo if it's defined when you parse the props/component name. That could be a pattern for future "nonReact" jsx plugins as well.

I've never done a webpack loader before, but if the theory sounds alright I would consider putting some time into a PR. But I wouldn't want to commit any time to it if that sounds like too messy of an approach to you.

marceloavf · 2018-08-17T18:10:17Z

Great ideas @Aaron-Pool, I was thinking about a while ago about abandon VueWrapper to make it more interactive and show real component name inside playground, but I can't make it work with webpack.

Also saw vue-docgen-api and tried something, but no success either. Some of this points can also be discussed with @pedronauck, since him understand more of the docz-core

I'll try to rebase the feat/vue branch to get it working with latest release of docz, I would be very grateful if you could help me implement these solutions to see what we can get.

Thank you again!

Aaron-Pool · 2018-08-21T14:25:05Z

Got my contributor environment set up last night and started messing with creating a webpack loader. Totally haven't forgotten about this! 👍

marceloavf added 2 commits June 26, 2018 22:00

feat(docz-example-vue): include draft component

02fb75d

feat(docz-plugin-vue): initial base for vue support

4f8707a

pedronauck added enhancement labels Jun 27, 2018

pedronauck assigned marceloavf Jun 27, 2018

pedronauck commented Jun 27, 2018

View reviewed changes

pedronauck changed the title ~~Feat: add Vue integration~~ [WIP] Feat: add Vue integration Jun 28, 2018

pedronauck closed this Jun 30, 2018

ronalson mentioned this pull request Jul 25, 2018

Projects using docz 🙌🏻 #37

Closed

marceloavf mentioned this pull request Sep 28, 2018

vue support #18

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Feat: add Vue integration #95

[WIP] Feat: add Vue integration #95

pedronauck commented Jun 27, 2018 •

edited by marceloavf

pedronauck Jun 27, 2018 •

edited

pedronauck Jun 27, 2018 •

edited

pedronauck Jun 27, 2018 •

edited

marceloavf Jun 27, 2018

pedronauck Jun 27, 2018 •

edited

pedronauck Jun 27, 2018 •

edited

pedronauck commented Jun 30, 2018

artalar commented Aug 9, 2018

marceloavf commented Aug 9, 2018

artalar commented Aug 9, 2018

marceloavf commented Aug 9, 2018

Aaron-Pool commented Aug 16, 2018

marceloavf commented Aug 16, 2018

Aaron-Pool commented Aug 16, 2018

Aaron-Pool commented Aug 17, 2018 •

edited

marceloavf commented Aug 17, 2018

Aaron-Pool commented Aug 21, 2018

[WIP] Feat: add Vue integration #95

[WIP] Feat: add Vue integration #95

Conversation

pedronauck commented Jun 27, 2018 • edited by marceloavf

Description

Review

Pre-merge checklist

pedronauck Jun 27, 2018 • edited

Choose a reason for hiding this comment

pedronauck Jun 27, 2018 • edited

Choose a reason for hiding this comment

pedronauck Jun 27, 2018 • edited

Choose a reason for hiding this comment

marceloavf Jun 27, 2018

Choose a reason for hiding this comment

pedronauck Jun 27, 2018 • edited

Choose a reason for hiding this comment

pedronauck Jun 27, 2018 • edited

Choose a reason for hiding this comment

pedronauck commented Jun 30, 2018

artalar commented Aug 9, 2018

marceloavf commented Aug 9, 2018

artalar commented Aug 9, 2018

marceloavf commented Aug 9, 2018

Aaron-Pool commented Aug 16, 2018

marceloavf commented Aug 16, 2018

Aaron-Pool commented Aug 16, 2018

Aaron-Pool commented Aug 17, 2018 • edited

marceloavf commented Aug 17, 2018

Aaron-Pool commented Aug 21, 2018

pedronauck commented Jun 27, 2018 •

edited by marceloavf

pedronauck Jun 27, 2018 •

edited

pedronauck Jun 27, 2018 •

edited

pedronauck Jun 27, 2018 •

edited

pedronauck Jun 27, 2018 •

edited

pedronauck Jun 27, 2018 •

edited

Aaron-Pool commented Aug 17, 2018 •

edited