Brainstorming: Looking further than validation: creating configs

[jonathanglasmeyer]

Hey people,
Something has been stirring my mind for a while: validating existing configs is nice, but the problem starts earlier: the point when you start building your config. It's just overwhelming. Copy pasting from existing, complex configs is suboptimal, you don't understand the stuff you're doing. And creating it from scratch is difficult too: you alt tab between webpack configuration documentation and your editor, rinse and repeat; probably followed by many hours of searching miscellaneous GitHub issues for best practices.
I wonder how this could be optimized. I don't want another abstraction over webpack, users should stay in control when needing advanced customization. I imagine some form of interactive guidance, incorporating and hinting at best practices from the beginning. One approach would be a web service like webpackbin does it, providing inline hints etc. back and forth copy pasting to usage in local project is suboptimal though. Yeoman generator would be another option, I'd like something that's more incremental though. Maybe some interactive cli thing that analyses existing webpack config and provides hints and suggests additions and modifications over time. Like an experienced pair programmer who has all webpack config and existing best practices in his head all the time. :)

So, just some rambling thoughts here. I'm just interested in your thoughts on something like that.

[nyrosmith]

Do you mean some kind of interactive assistant that helps you creating new configs and helping you adding stuff to your existing configs?
That would exactly be something I thought heavily the last days. On my notes it is called "webpack-buddy". It recommends all the things I learned the hard way at would explain why approach X could fit better than approach Y. With verbose Mode it would "talk" to you like a mentor.
In my notes you also could give it a config and your buddy explains the config to you...

[bebraw]

This is what I'm pushing towards with configuration parts. That said, there is a package dependency, webpack-merge, to make the approach sane. I map a technique to a part in the related book.

If you want a cli tool, you could easily map a part to a question and then generate a reference to the part. Overall code generation should be simple this way.

[nyrosmith]

And of course it would integrate this great lib so webpack- buddy could validate too

[jonathanglasmeyer]

A web service providing rich inline annotations and possibilities to interactively extend the config with more stuff via comfortable choosing from gui-configurable, community-curated presets sounds pretty attractive though.

[bebraw]

Yeah, I see no reason why these ideas couldn't live on the web. A cli is a nice starting point as it forces you to develop an important part of the logic.

[jonathanglasmeyer]

I'm hyped about this. Just need to find some time. :)

[bebraw]

@christianalfoni Any thoughts on this?

[nyrosmith]

@jonathanewerner Me too. Count me in!

[jonathanglasmeyer]

http://graphql-swapi.parseapp.com def is an inspiration re autocomplete and inline documentation.

[jonathanglasmeyer]

I am actually thinking about adapting the code from https://github.com/graphql/codemirror-graphql to write a generic joi-interactive-codemirror package as a first step. (Could be used for all kinds of configs)
This would then be set up with the joi schema that webpack-validator provides and allow creating the webpack config using auto completion and popup documentation and linting. Later this could be extended to show the relevant part (currently selected part in the code editor) of the webpack config documentation on a right split window.

Additional features would be a) selecting "parts" aka snippets for insertion and b) from the cli side (webpack-validator) a link to a to-be-existing-web service, where the link additionally has the webpack config that has just been validated included as a query string, so that the "intelligent" version of the config file existing in your local code base can be inspected at any time.

Thoughts?

[nlarche]

Yes It's a great idea. Last week, I started to think about a "webpack-config-cli" to build webpack config step by step. But build something interactive with codemirror could be really better. If I find some time, I would love to help.

[jonathanglasmeyer]

I also keep thinking about this. ;)
Right now i'm not really sure that people would actually use an only editor for a task like this, as you need the actual feedback from webpack as for evaluating if your config does the right thing.

I can't really see people copy pasting the config between browser and local editor a zillion times... That's why i started webpack-explain, which has the long term goal of "tutoring" you through the creation of a webpack config. So if you start with an empty {} as a webpack config, it'd tell you via cli stdout "hey you should add the following stuff as a minimum viable config ;))" and then you iterate by running webpack-explain multiple times while adding more stuff to the config.. sth like that. :)