Support for ES module named exports

[chrisnicola]

What problem does this feature solve?

The primary purpose for this feature is to improve testability of Vue single file components. With named exports it is possible to have both a default export of the component with all dependencies assigned as well as a named constructor function export which would allow substitutes to be injected.

This avoids the need to use things like the inject-loader.

There are probably other use cases for supporting named exports, but testability is the primary one for me.

Related discussion on the forum: https://forum.vuejs.org/t/vue-loader-proposal-to-support-named-exports-for-testability

What does the proposed API look like?

<script>
import dep1 from 'dep1'
import dep2 from 'dep2'

export function component(dep1, dep2) {
   ...
   return {
      properties: {},
      data() { },
      methods: {},
      ...
   };
}

export default component(dep1, dep2);
</script>

[goldenram]

Yes, I agree with this. Another use case we have been trying to solve is to have a component be able to export constants that you want defined to use with that component.

export const INPUT_TYPES = ["option1", "option2"]

export default component;

[Jinjiang]

I have tried a way to support named exports in Vue SFC.

But the default export of a .vue file is not just the <script> code but with the render functions from <template>, injected style from <style> and other custom block runtime code. So obviously they will be lost from the component constructor which is created from the named export like the code above because they cannot get the encapsulation. Maybe it's a little different than you hope.

Thanks.

[chrisnicola]

@Jinjiang yeah I can see the potential issue there. Perhaps this better support for injection for testability can be considered as a wider issue then. My main issue with SFCs right now is the idea of having to rely on inject-loader in tests.

My current workaround is simply assigning dependencies to a _ variable on the component itself and then I can stub them there. A sort of property injection approach. It works but feels a bit clumsy.

[goldenram]

@Jinjiang, that makes sense actually. The default export would contain all the script, template, style stuff while the non default exports would just have those named objects. Thanks for getting this implemented. Once it is released I can give it and test and let you know how it goes.

[goldenram]

Looks good, thanks for the feature! Tested it with 13.6.0