[Proposal] Initial approach

[rogeliog]

More context here: facebook/create-react-app#401

Given that you created this repo I decided that it would make more sense to make a PR here rather than in the create-react-app repo.

This is a really early implementation of my proposal, please feel more than free to tell me if this is totally wrong :) There is still a lot of clean up that I need to do and add tests to all of it.

It would be great if we could make the core of this plugin agnostic of what the which types of errors it knows how to parse. In my proposal the plugin only knows that it has a set of transformers and a set of formatters. We could modify it so that the user could inject extra transformers and formatters in their Webpack config new FriendlyErrorsWebpackPlugin({ extraTransformers: [...], extraFormatters: [...]).

There are two concepts that I've added. I'm still not super happy the names or the exact responsibilities of each of them, but I think that something like it could be interesting.

• Transformers: (error) => (error)... Given an error it will transform it the "next" error state or add some type of metadata if it matches certain criteria. For example the moduleNotFound transformer will add the appropriate type and specific module name to the error.
• Formatters: ([error]) => ([logStatements or chunks])... Given a collection of errors it will return a collection of log statements to print of for those set of errors. For example the moduleNotFound formatter will gather and group all the missing modules.

Again, this is still an early implementation and I'm not super happy with parts of it, but this will also allow us easily unit test each of the transformers and formatter

Imagine if we could make it really easy to add any set of error formatters. That will mean that the community can build formatters for any specific use case, if someone already knows JavaScript but it is their first time exposed to ES6 they could add a something like a es6HelpFormatter that whenever errors like this TypeError: Assignment to constant variable. show up, it will also give them a detail explanation of what const is, along with a link to a blog post or to MDN.

[geowarin]

Hi @rogeliog !
Thanks for this PR. It's a great idea and I was planning to do something similar.
It makes the code more modular and it looks very good.

Is it ready to merge ?

[rogeliog]

@geowarin Not yet, I first wanted to validate the main idea with you. It still needs some clean up and tests. Also, I want to make sure that we have the correct abstractions with the transformers and formatters, before moving forward with them :)

[rogeliog]

@geowarin I added some tests and fixed some styling stuff. It should be in a better spot now :)

[geowarin]

I just came back from holidays and stumbled upon your awesome PR, @rogeliog. Thank you so much!
I want to release this ASAP but we still need to:

1. Make sure that the plugin works with webpack 1 and webpack 2. I've got a prototype for integration tests with both webpack versions, I'll ask you for a review later today
2. Add node 4 to the travis build to make sure we have the same compatibility than create-react-app. This might mean some refactoring in the code (I don't think we need a babel build thought)