postProcessFiles files arg is an empty object

[maurop123]

Version

3.0.0-alpha.13

Reproduction link

https://github.com/maurop123/vuecli3-test

Steps to reproduce

Starting from a project generated with vue cli 3

1. npm i -D cli-plugin-foobar
2. vue invoke cli-plugin-foobar
3. open files.txt. should see files: {}

Or with pwa plugin...

1. npm i -D @vue/cli-plugin/pwa
2. vue invoke pwa
3. notice that main.js wasn't updated although it should have been

What is expected?

In postProcessFiles(files => of generator API, the files args should contain the existing files.... right?

What is actually happening?

In postProcessFiles(files => of generator API, the files args is an empty object.

---

I was trying to add an import statement in main.js. I noticed that the pwa plugin seems to have the same code. When I tried running it, I noticed that main.js wasn't updated.

Where pwa generator index.js checks if (main), main is probably undefined.

[LinusBorg]

So I looked into it and this is not actually a bug.

postProcessFiles only receives the files that were copied / rendered by this generator. Since your plugin doesn't render and template files, the argument doesn't contain any references to files.

So it's by design that you only get the files your plugin renders, not the whole rest of the project.

You will have to get those files yourself.

You can take a look at how @Akryum solved this in vue-cli-plugin-apollo:

https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/generator/index.js#L68-L91

[LinusBorg]

Note: We should write a real guide on how to write a plugin that goes further than current documentation. In such a guide, we should address strategies for manipulating existing files.

[maurop123]

Hm, so what do you make of the PWA plugin that isn't adding the import line into main.js like it looks like it's trying to do here...
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-pwa/generator/index.js#L10

[yyx990803]

@maurop123 postProcessFiles only gets access to other files when all those plugins are invoked together. When invoked alone, it only gets the files injected by itself.

Technically, you can just use plain fs to manipulate files in the project, but we may provide an API to make that more straightforward.

[maurop123]

Yea that could be good. The way the PWA plugin handles the main file in generator/index.js looks easy and straightforward, except of course like you guys explained it doesn't get all the files. But if that same way of manipulating files can be accessible, even if it's not exactly in postProcessFiles, I think that could be a good user experience for developers.

As for my use case, I'll follow Akryum's lead in the apollo plugin. Looks like it should work alright 😄

[maurop123]

@yyx990803

postProcessFiles only gets access to other files when all those plugins are invoked together. When invoked alone, it only gets the files injected by itself.

So when I select the pwa plugin when I create the project, the imports in src/main.js are different than when I install and invoke it by itself.

// All together
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'

// By itself
import Vue from 'vue'
import App from './App.vue'

That's not right, is it?