Parcel 2: Vue transformer

Create the @parcel/transformer-vue package in packages/transforms/vue. This package is a Parcel 2 transform plugin for Vue. It should be based on the VueAsset from Parcel 1.

The @parcel/transformer-vue package is responsible for the following things:

• Parsing Vue SFCs with @vue/component-compiler-utils
• Extracting scripts, styles, and templates as child assets
• Compile templates
• Compile CSS modules
• Compile scoped styles
• Insert HMR runtime
• Combine the results into JS and CSS child assets

Additional features above what Parcel 1 offers to consider:

• Support for external script and style tags (#1333)
• Support for CSS source maps (#2721)
• Remove minification from the transformer - it will be handled by the optimizer, and sometimes causes issues like #1183

[yyx990803]

Some pointers for whoever interested in working on it:

Vue 3 SFC transform should be using https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc

The docs are non-existent yet, but the types in the source code are pretty self-explanatory. I would also recommend using https://github.com/vuejs/rollup-plugin-vue/tree/next and https://github.com/vuejs/vue-loader/tree/next as references.

The general idea is that the base transform will parse the SFC and rewrite it into JavaScript code that make additional “virtual requests” to the same *.vue file but with different query params. These requests would come back to the transform and the transform should parse the query and perform appropriate transforms for each part of the SFC.

[RobertWHurst]

It doesn’t look like much, but it may be the first vue component build with Parcel 2.

src:

<template>
  <div>
    <header>
      <h1>I'm a template!</h1>
    </header>
    <p v-if="helloWorld">{{ helloWorld }}</p>
    <p v-else>No message.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    helloWorld: 'Hello World'
  })
}
</script>

rendered:

Next I’ll be implementing HMR, external blocks, and custom blocks.