Parcel 2: Vue transformer #3364

devongovett · 2019-08-12T00:51:59Z

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 (Vue SFC code splitting #1333)
Support for CSS source maps (Vue SFC: missing CSS sourcemaps #2721)
Remove minification from the transformer - it will be handled by the optimizer, and sometimes causes issues like 🐛 In VueAsset supplemental is minified independently from js which sometimes leads to weird shadowing. #1183

The text was updated successfully, but these errors were encountered:

guillenotfound · 2019-08-14T15:43:53Z

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 · 2019-09-21T17:24:45Z

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 · 2019-09-21T17:26:11Z

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

RobertWHurst · 2019-10-15T23:51:34Z

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 · 2019-10-20T17:53:24Z

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 · 2019-11-02T00:22:01Z

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 · 2019-11-12T10:09:30Z

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

RobertWHurst · 2019-11-15T01:30:15Z

@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 · 2020-03-13T15:42:53Z

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.

DarioDaF@cfedc87
Is the latest commit working.

mischnic · 2020-03-14T17:06:50Z

@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 · 2020-04-30T03:16:20Z

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 · 2020-04-30T06:50:49Z

@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 · 2020-04-30T17:31:46Z

@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 · 2020-04-30T17:43:21Z

I have to highly 👍 @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 · 2020-04-30T17:51:06Z

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 · 2020-04-30T18:44:29Z

@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 · 2020-04-30T19:08:14Z

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 · 2020-04-30T20:16:53Z

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 · 2020-07-18T00:22:16Z

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

bubnenkoff · 2020-08-05T08:03:10Z

@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 · 2020-08-05T11:03:11Z

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 · 2020-08-06T00:36:08Z

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

bubnenkoff · 2020-08-06T09:32:35Z

@101arrowz done #4982

Samstiles · 2020-10-08T15:21:07Z

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

101arrowz · 2020-10-08T16:55:56Z

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

devongovett added ✨ Parcel 2 🔌 Plugins labels Aug 12, 2019

devongovett added this to To do in Parcel 2 via automation Aug 12, 2019

mischnic mentioned this issue Nov 4, 2019

ES Module type=module cause "parcelRequire is not defined" error #1401

Closed

DeMoorJasper mentioned this issue Jan 5, 2020

Parcel development server using programmatic API works on v1.x but not on v2.x #3960

Closed

DeMoorJasper mentioned this issue Jan 18, 2020

How to use Vue 3 alpha with Parcel 2? #4016

Closed

101arrowz mentioned this issue Jul 15, 2020

Vue Transformer #4892

Merged

2 tasks

DeMoorJasper closed this as completed in #4892 Jul 21, 2020

Parcel 2 automation moved this from To do to Done Jul 21, 2020

bubnenkoff mentioned this issue Aug 6, 2020

Seems multiple bugs in Parcel 2. Not able to run Vue project #4982

Closed

101arrowz mentioned this issue Nov 2, 2020

Fix extending parcelrc pipeline order #4842

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parcel 2: Vue transformer #3364

Parcel 2: Vue transformer #3364

devongovett commented Aug 12, 2019

guillenotfound commented Aug 14, 2019

mekhami commented Sep 21, 2019

mkg20001 commented Sep 21, 2019

RobertWHurst commented Oct 15, 2019 •

edited

RobertWHurst commented Oct 20, 2019 •

edited

RobertWHurst commented Nov 2, 2019

maximal commented Nov 12, 2019 •

edited

RobertWHurst commented Nov 15, 2019

DarioDaF commented Mar 13, 2020 •

edited

mischnic commented Mar 14, 2020

mismith commented Apr 30, 2020

DeMoorJasper commented Apr 30, 2020

mismith commented Apr 30, 2020

mekhami commented Apr 30, 2020

mischnic commented Apr 30, 2020 •

edited

mismith commented Apr 30, 2020

mischnic commented Apr 30, 2020 •

edited

yyx990803 commented Apr 30, 2020

101arrowz commented Jul 18, 2020

bubnenkoff commented Aug 5, 2020

bubnenkoff commented Aug 5, 2020

101arrowz commented Aug 6, 2020

bubnenkoff commented Aug 6, 2020

Samstiles commented Oct 8, 2020

101arrowz commented Oct 8, 2020 •

edited

Parcel 2: Vue transformer #3364

Parcel 2: Vue transformer #3364

Comments

devongovett commented Aug 12, 2019

guillenotfound commented Aug 14, 2019

mekhami commented Sep 21, 2019

mkg20001 commented Sep 21, 2019

RobertWHurst commented Oct 15, 2019 • edited

RobertWHurst commented Oct 20, 2019 • edited

RobertWHurst commented Nov 2, 2019

maximal commented Nov 12, 2019 • edited

RobertWHurst commented Nov 15, 2019

DarioDaF commented Mar 13, 2020 • edited

mischnic commented Mar 14, 2020

mismith commented Apr 30, 2020

DeMoorJasper commented Apr 30, 2020

mismith commented Apr 30, 2020

mekhami commented Apr 30, 2020

mischnic commented Apr 30, 2020 • edited

mismith commented Apr 30, 2020

mischnic commented Apr 30, 2020 • edited

yyx990803 commented Apr 30, 2020

101arrowz commented Jul 18, 2020

bubnenkoff commented Aug 5, 2020

bubnenkoff commented Aug 5, 2020

101arrowz commented Aug 6, 2020

bubnenkoff commented Aug 6, 2020

Samstiles commented Oct 8, 2020

101arrowz commented Oct 8, 2020 • edited

RobertWHurst commented Oct 15, 2019 •

edited

RobertWHurst commented Oct 20, 2019 •

edited

maximal commented Nov 12, 2019 •

edited

DarioDaF commented Mar 13, 2020 •

edited

mischnic commented Apr 30, 2020 •

edited

mischnic commented Apr 30, 2020 •

edited

101arrowz commented Oct 8, 2020 •

edited