feat(templates): allow selecting the compiler per <template>

[basvanmeurs]

This is to allow multiple renderers to be used within the same Vue app. In particular, I am building a WebGL/Canvas2d renderer for the vue3 api. It enables the developer to write a part of the app in HTML DOM, and another part in WebGL.

Example usage:
webpack.config.js:

      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            templateCompilers: {
              vugel: {compiler: require('vugel'), compilerOptions: {}}
            }
          }
        }

Comp.vue:

<template compiler="vugel">
  <node :scale="prop">
    <rect v-for="(item,index) in images" :x="item.x" :w="item.w" :y="index * 40" :h="20" :color="0xff00ffff">
    </rect>
  </node>
</template>

[yyx990803]

Let's change the option format to use Babel config style options:

options: {
  compilerOptions: { /* options for default compiler */ },
  customCompilers: {
    vugel: [require('vugel'), { /* vugel compiler options */ }],
    foobar: require('foobar-compiler') // shorthand no options
  }
}

[RobbinBaauw]

@yyx990803 could you maybe take another look at this? Thanks!

[SaFrMo]

I'm looking into making a custom renderer for TroisJS and am running into a similar issue with needing to use multiple renderers - would love a feature like this to combine HTML and ThreeJS components easily!

[Korijn]

Is this still on the roadmap?