Add Vue.js recipe #1361
Add Vue.js recipe #1361
Conversation
blake-newman
force-pushed
the
feature/recipe-vue
branch
from
1d6782d to
1bca6ae
Compare
readme.md
Outdated
| @@ -1158,6 +1158,7 @@ It's the [Andromeda galaxy](https://simple.wikipedia.org/wiki/Andromeda_galaxy). | |||
| - [TypeScript](docs/recipes/typescript.md) | |||
| - [Configuring Babel](docs/recipes/babelrc.md) | |||
| - [Testing React components](docs/recipes/react.md) | |||
| - [Testing Vue components](docs/recipes/vue.md) | |||
docs/recipes/vue.md
Outdated
| @@ -0,0 +1,71 @@ | |||
| # Testing Vue components | |||
docs/recipes/vue.md
Outdated
| "require": [ | ||
| "./test/helpers/setup.js" | ||
| ], | ||
| }, |
docs/recipes/vue.md
Outdated
| } | ||
| ``` | ||
|
|
||
| ```js |
There was a problem hiding this comment.
Make it clear that this is ./test/helpers/setup.js
docs/recipes/vue.md
Outdated
| test('renders', t => { | ||
| const vm = new Vue(Component).$mount(); | ||
| const tree = { $el: vm.$el.outerHTML }; | ||
| t.snapshot(tree); |
| // Setup vue files to be processed by `require-extension-hooks-vue` | ||
| hooks('vue').plugin('vue').push(); | ||
| // Setup vue and js files to be processed by `require-extension-hooks-babel` | ||
| hooks(['vue', 'js']).plugin('babel').push(); |
There was a problem hiding this comment.
Would be cool if someone made all this a module, so you could just do require('ava-vue-setup'); and be done.
There was a problem hiding this comment.
Agree, currently you can add more options to babel extension plugin and there will most likely be more work for vue extension plugin to support other languages (TypeScript, Pug ect). Once this is done then we could create this npm module to wrap these options to make it simplier.
For now i think this setup is relatively easy to create and at least gives users the ability to test Vue with Ava.js which is a large step forward to Vue.js testing workflow.
There was a problem hiding this comment.
On a further note, it should be trivial to add support for this in https://github.com/vuejs-templates/webpack so this could be the first stepping stone.
There was a problem hiding this comment.
I know I wrote the babel extension hook but I've actually stopped using it myself due to the amount of slowdown babel causes.
I instead went for manually transpiling export/import statements like this as node can already handle pretty much all of ES2015. So unless you're using cutting edge 2017 stuff you'll probably find this much faster than babel (I should probably create a package for it).
I'm aware the impact of importing babel-core in every ava process is a known issue but I'm not sure about whether people are happy to put up with it or not?
There was a problem hiding this comment.
Hmm perhaps this logic should sit in the ava-vue-setup as mentioned. As we can expose all this functionality with options, and maintainability for users will be reduced. Also i'd rather provide a fully functional solution for the time being. Would cause more issues to provide all that code, especially if there is an edgecase that hasn't yet been thought off, such as dynamic import statements import('a/file.js').
There was a problem hiding this comment.
@blake-newman Any updates?
There was a problem hiding this comment.
I'm happy for this recipe to be released. Looking at adding a ava-setup-vue package. However due to the flexible nature of Vue files will need to be more customisable so you can select transpilers. Which will take a bit of time. This recipe is good fine for a standard Vue setup but not much more
blake-newman
force-pushed
the
feature/recipe-vue
branch
from
1bca6ae to
f5b237a
Compare
|
Thanks for doing the recipe. 🙌 |
Fixes #1276