[Feature Request]Plugin system for vue-loader like babel

[NE-SmallTown]

What problem does this feature solve?

I want to parse a vue file(SFC) and modify(add/change/delete) some code within it, but it seems not easy for me to do that, but for a js file, you could do that easily due to the babel plugin system(it provides more simpler ways to do that).

I notice that there are a few repos which wanted to do this, like vue-sfc-parser, vue-parser, but is not enough to write a plugin.

So, based on the doc "you will only need it separately if you are writing build tools with very specific needs." in https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler, I think there is no anything like a plugin system, but that is really helpful for some specific needs if we have.

What does the proposed API look like?

I don't know to be honest, maybe something like babel plugin is good enough

[yyx990803]

There is a modules option. As an example, the internal class transform is a module: https://github.com/vuejs/vue/blob/dev/src/platforms/web/compiler/modules/class.js

You can pass the modules option via compilerOptions in vue-loader.

[NE-SmallTown]

Thanks, I will try

[NE-SmallTown]

There is a little question troubles me, when component-compiler-utils calls vue-template-es2015-compiler to compile, it doesn't pass its options.

So if I only want to execute postTransformNode for some directories(like src/pageA/**), it seems there is no way to do this because I don't have something like filename of current processing file(it's in options but doesn't pass into vue-template-es2015-compiler like said above)

[NE-SmallTown]

@yyx990803 Sorry to bother in the closed thread, another question is, could I do methods transform when do the template transformation? E.g:

After postTransformNode, <div @click="myAlert">foo</div> -----> <div @click="newAlert">foo</div>, but seems I can't add new method like newAlert to the component methods object(I can't do that in Vue.prototype because every element will have different method(not only newAlert, maybe newBar, newBaz) according to its attrs), because postTransformNode is only for template rather than scripts/style of the SFC.

I found that both sfc object and descriptor object are not exposed, so I think there is no way to do the things I want above, could you share any thought about this? Thanks!

[yyx990803]

If you want to transform both templates and JavaScript at the same time, then what you really need is an extra loader before vue-loader that transforms the whole file. You can do that with a generic HTML transform tool (like posthtml) plus a generic JS transform toolchain (like acorn + estree-walker + astring). This is out of scope for vue-loader.

[NE-SmallTown]

Gotcha, thanks!