Initial vue support

[DeMoorJasper]

Basic vue support using vue-compiler-utils

• Have a working demo/test in place
• Compile vue files using vue-compiler-utils
• Support pre-processors
• Sourcemaps support
• Add more tests

Closes #5

[laosb]

It seems parcel try to install some packages, which makes parcel itself not useable (missing prelude.min.js) on the first run. I need to stop parcel & patch parcel after the first run.

And, vue styles are not correctly packaged into css files

[laosb]

Styles in .vues wasn't generated to css bundles at all (I'm using dynamic imports to import vue components), and I don't really know why those import imgUrl from './xxx.jpg' doesn't work in this branch.

[laosb]

The intended behavior would be:

Bundler extract CSS (scoped if needed, with or without preprocessors) and JavaScript (Template & script) from .vue files, and bundle them into a .css file and a .js file. When a vue component is imported, it should import both .css & .js file.

[devongovett]

Ok here's what I think we should do. I think we don't really want to use the default vue compiler since it inlines everything into the JS (e.g. styles), and has its own compilation pipeline for styles, scripts, and templates. We should use the pipeline already built in parcel to do this as it will allow for correct file watching, css extraction, bundle splitting, etc.

What we want to do is parse the .vue files into their component pieces (script, style, template), and pass the resulting pieces through parcel's existing infrastructure. We should get most of what we want for free this way.

In order to do this, we'll need a couple of changes. We need a way to compose asset types together. Currently this is kinda faked in some asset types like stylus by extending from another asset type, and calling super to get that asset type's behavior in addition to some overrides. Ideally, parcel would just handle this automatically. If the stylus asset just compiled and output CSS from its generate method, then parcel could just pass that to the CSS asset type to do further compilation automatically - no class extension necessary. Similarly, the Vue asset type could just parse the file into its component pieces (script, style, template) and do no other work - parcel would take care of passing each of those to the correct compilers (other asset types).

[devongovett]

btw, I'm working on the composition system described above. once implemented, we can use it for vue files.

[DeMoorJasper]

Alright i'll change this to generate script, style and template seperately and once Devon's composition system lands I'll update it to use it

[laosb]

Great. Looking for CSS support.

[devongovett]

Implemented pipelines in #1065. Changed the base of this PR to point to that one, and merged in the changes. Updated VueAsset to use the new architecture. It could probably be a little cleaner still, but that should happen in the next major version when we can break the API.

There are still a few things to fix, but things seem to be mostly working now. Compilation happens, including support for preprocessors like Stylus, CoffeeScript, Jade (not implemented yet but theoretically), etc. I was able to successfully run the vue-dependencies, and vue-preprocessors apps from the tests.

Still need to fix:

• source maps
• HMR
• Scoped styles
• CSS modules
• Custom blocks
• Functional templates? (idk what that is)

@DeMoorJasper feel free to work on any of those if you like. 😄

[laosb]

Something is quite annoying is, Parcel doesn't always output the same when given the same input. I removed vue-hot-reload-api from my package.json, then all of sudden all scoped styles failed. After my revert, it doesn't work anymore, even if I tried to clear .cache and dist. What a strange behavior it is.

I can't really reproduce it. Its output is constantly changing, sometimes I do get the right, sometimes I do not.

I also tried to fix my private code by manually analyzing the output code. I'm getting to what I need by changing a lot of expressions, but just one change (and revert) destroyed all my work today. It backs to where I started to fix, with a lot of code already been rewritten. It never recover to work though my exactly same code worked 15 minutes before.

I'm thinking there might be some kind of race condition in Parcel, but I'm too tired to go on. I'll just go straight with Webpack and consider Parcel later, maybe few days later.

Edit: I just try yarn upgrade and cd node_modules/parcel-bundler && yarn again, everything works. I just don't get why. God bless it won't break again.

[marcelkorpel]

I don't want to clutter this PR with building questions, but I'm not sure whether or not I did the right thing to build Parcel using this PR locally. First, I cloned the repository, then I fetched this PR using

git clone https://github.com/parcel-bundler/parcel.git
cd parcel
git fetch origin pull/1052/head:origin/vue-v3

Then I installed all dependencies and built Parcel using Yarn:

yarn install

After creating an alias I tried to build shawwn's boiler plate, but I (still) only get an empty #app div. What am I doing wrong?

BTW, yarn test failed 1 test:

Error: Failed to install postcss-cssnext.

[marcelkorpel]

Wait, I still had to checkout the branch, in which these commits already are pushed. However, after trying to clone and build Parcel again, I still get the same issue.

[DeMoorJasper]

@laosb would be nice if you could provide a test repo for the bugs you encounter so we can test them or add them to the vue test cases.
@marcelkorpel This branch has nothing to do with shawwwn's example or implementation, his example should however work as all the test cases are build around his hello world test atm.

[devongovett]

@laosb by custom blocks I mean https://vue-loader.vuejs.org/en/configurations/custom-blocks.html

[marcelkorpel]

@DeMoorJasper I understand about the example, but somewhat more complicated code I wrote exhibited the same error. I also tried to use npm run dev, as that tends to give different results, but whatever I do, only an (untouched) #app div is present after opening localhost:1234.

[gnijuohz]

@marcelkorpel I tried shawwn's parcel-simple (vue-init shawwn/parcel-simple vue-example) and it worked for me. Although I had to do yarn install vue first somehow...

I suggest instead of using alias, just use ../path/to/parcel/bin/cli.js index.html to make sure you are using the correct version of parcel.

[marcelkorpel]

Thanks for the tip, @gnijuohz, but I already tried that.

But now I see this error that I got earlier, when using Parcel from npm and before I installed parcel-plugin-vue: in Firefox, the console complains

InvalidCharacterError: String contains an invalid character

In Chromium, the console is a bit more descriptive:

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/a6698109b5cf167c75bf419931e81341.vue') is not a valid name.

The code pointed to is

function isUnknownElement (tag) {
…
tag = tag.toLowerCase();
/* istanbul ignore if */
if (unknownElementCache[tag] != null) {
  return unknownElementCache[tag]
}
var el = document.createElement(tag);

But I thought you don't need parcel-plugin-vue anymore when using the vue-v3 branch, am I right?

[laosb]

@devongovett Ah I see. Hopefully it's not widely used, at least I haven't use it before. We can safely consider it later.

@DeMoorJasper I pushed my test app to GitHub, currently it works, if you need, you may add it to tests. It includes several ways to import a component in Vue, and all of them has failed at least once during my test.

@marcelkorpel Try to clean .cache, node_modules and dist, then retry install Parcel and build it. It should works. I've seen this before and it's how I solved it.

[laosb]

So now it sounds like we are going to see Vue support released?

[DeMoorJasper]

@laosb I'm pretty sure it'll be shipped in the next release (1.7)

[devongovett]

🎉