Parcel: Parcel 2: Vue transformer

[devongovett]

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

[guillenotfound]

I'm not sure if this is the right place to put this, but vue-cli automatically split vendors into another bundle chunk to reduce app load time:

  File                                 Size               Gzipped

  dist/js/chunk-vendors.61376fe5.js    514.86 KiB         138.76 KiB
  dist/js/app.b3d29b31.js              4.67 KiB           1.68 KiB
  dist/css/app.e2713bb0.css            0.33 KiB           0.23 KiB

Is this something we should be able to do with the transformer or with a plugin?

[mekhami]

I assume this isn't completed, which is why I can't get a basic vue project working on it?

https://github.com/mekhami/parcelvuetest

[mkg20001]

@mekhami Your assumption is correct. It's still a todo, for now you can try to use parcel v1 instead

[RobertWHurst]

I've started on this, and so far have the basics working well. I'm hoping to have a PR up by next week. I'll also try to incorporate #1333 but may do so as a follow up PR.

[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.

[RobertWHurst]

Just an update, I'm still working away. I've been delayed a bit as work has been demanding and thus haven't had a lot of time. I should have more done soon.

[maximal]

@RobertWHurst, it’ll break if you add a child component.

[RobertWHurst]

@maximal My transform isn't part of parcel 2 yet. It doesn't support vue at all at the moment. If you mean on my branch, I haven't pushed for a bit.

[DarioDaF]

I am new to Parcel and GitHub projects with multiple collaborators, I will load a simple vue SFC transformer (probably butchered because I have not grasped the full plugin mechanics).
It is working for simple projects, it is not supporting HMR and stylesheet compilation for "scoped" assets is handled by Vue (I have to move it to postProcess).

I couldn't find @RobertWHurst branch in main or https://github.com/RobertWHurst/parcel/branches, but I would like to help in development.

https://github.com/DarioDaF/parcel/commit/cfedc87665feb6d1ff3084693000b2b2bc614b23
Is the latest commit working.

[mischnic]

@DarioDaF
You can open a PR if you want to add this as a Parcel core plugin (as opposed to publishing and maintaining it yourself) and want feedback.

[mismith]

Has anyone been able to get Vue 3 beta working using Parcel (either v1 or v2)? I see something similar was asked in #4016, but it was directed here, where I personally can't find anything that can get me up and running. Am I missing something or is this just not possible yet?

[DeMoorJasper]

@mismith that issue is about Parcel 2 specifically. This issue is to track progress on implementing Vue in Parcel.

Unfortunately we do not have anyone in the core team who uses vue on a daily basis so it would be ideal to get someone with a wide understanding of Vue to implement this.

[mismith]

@yyx990803 @linusborg I know your guys' plates are surely full already, but do you have any tips on where to start here? Or where—or to who—I could look in order to get acquainted with a Parcel 2 + Vue 3 integration? Is it on the roadmap already maybe?

Parcel is, as I'm sure you're both aware, a really nice compliment to the low-config/get-started-quickly philosophy of Vue/vue-cli, so I figured even if it's outside of the vue project scope, technically speaking, it likely still benefits the Vue community overall :)

[mekhami]

I have to highly :+1: @mismith here. Parcel and vue are a match made in heaven, but the integration needs a little more work. This combination has saved me a tremendous amount of time and energy in the past.

[mischnic]

I'm happy to answer any questions (unfortunately the plugin docs aren't ready yet),
the basic concept of the V1 plugin is still the same https://github.com/parcel-bundler/parcel/blob/v2/packages/core/parcel-bundler/src/assets/VueAsset.js:
A Transformer plugin (instead of Asset) receives the Vue file and needs to return a JS, HTML and CSS asset which will be handled by Parcel. (The PostCSS transformer does this as well with CSS modules: turns a single CSS file into a JS and CSS asset)

[mismith]

@mischnic awesome. I will try to throw together some repros tonight, but the basic issue I was having the other day was that it looks like Vue v3 no longer uses vue-template-compiler, or, at least, the version that gets imported does not work with Vue 3 beta. I think I was using latest v1 of Parcel, so maybe this is solved already in the v2 implementation?

[mischnic]

so maybe this is solved already in the v2 implementation?

Parcel 2 doesn't handle Vue SFC's at all at the moment, you would get an error that .vue files aren't a known extension.

If the Parcel 1 implementation is outdated, Webpack's vue-loader might be a good source of inspiration (they are using @vue/component-compiler-utils and vue-hot-reload-api ?): https://github.com/vuejs/vue-loader/blob/master/package.json

[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.

[101arrowz]

I've made a PR (#4892) for a Vue transformer. If any Vue users could test it, it would be much appreciated.

[bubnenkoff]

@parcel/transformer-vue: Duplicate attribute.
SyntaxError: Duplicate attribute.
    at createCompilerError (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:16:19)
    at emitError (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:1179:29)
    at parseAttribute (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:945:9)
    at parseAttributes (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:928:22)
    at parseTag (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:849:17)
    at parseElement (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:799:21)
    at parseChildren (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:635:28)
    at parseElement (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:808:22)
    at parseChildren (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:635:28)
    at parseElement (D:\code\fas_2020\zakupki-back\html\node_modules\@vue\compiler-core\dist\compiler-core.cjs.prod.js:808:22)
D:\code\fas_2020\zakupki-back\html\src\components\SearchPage.vue:1872:147

Building InterceptorManager.js...

````

on:

"parcel": "^2.0.0-nightly.358",
```

[bubnenkoff]

It's point to this string:

<el-form-item label="Some text" style="border: 2px solid #f2ecec;">
    <el-checkbox v-model="MyResultForm.is_filed" border size="medium"></el-checkbox>
</el-form-item>

[101arrowz]

Could you open a new issue @bubnenkoff? Also, please provide more context (i.e. a reproduction repo or at least the entire file).

[bubnenkoff]

@101arrowz done https://github.com/parcel-bundler/parcel/issues/4982

[Samstiles]

Does parcel 2 still not support .vue file extension + single file components?

[101arrowz]

It does, the transformer was completed months ago, you should be able to use Vue with zero config. There are still plenty of bugs, but they're quite hard to fix as of right now. Check #4935 for an example. If you're having problems with it, please file a new issue.

For more info on how to use them, check the docs