Integrate webpack, npm, and better support for developing plugins

[ribaricplusplus]

In my private projects for clients I use WordPressify to develop theme and plugins in a monorepo. Also, I integrate webpack and npm so that powerful JavaScript can be written; I even use React, for example on admin pages.

I think it would be quite cool to have webpack available in WordPressify by default, so that JavaScript dependencies could be added with a simple npm install.

Furthermore, WordPressify is not currently too friendly towards developing plugins; it's mostly meant for developing the theme. It requires quite a bit of custom modification to have Sass in a plugin for example. Or to have webpack + JS in a plugin.

My private repositories where I've set these things up are not ready for the public, they require cleanup, but I'm open to adding these features to WordPressify if you would want it.

[luangjokaj]

It is a very interesting idea. I'm super curious to see what you did, can you send me the repo?

[ribaricplusplus]

Sorry for the late reply.

I've invited you to the private repository where I've set this up, but it would probably help if I explained more clearly what I mean, especially because I have a lot of additional stuff in that repository like TypeScript, synchronization scripts, etc.

The directory structure with the new setup would be as follows:

src/
-- theme/
---- js/ => JavaScript files with npm & webpack go here
---- theme.php
---- ...
-- plugins/
---- plugin-name/
------ js/ => JavaScript files with npm & webpack go here
------ plugin.php
------ ...

The layout of those js directories for the plugins and theme would be:

js/
-- src/
---- product-page/
------ index.js
------ utils.js
------ ... => other js files
---- category-page/
------ index.js
------ ... => other js files
-- package.json
-- webpack.config.js
-- ... => Other files like babel configuration, linting, etc. JavaScript stuff

Every directory with an index.js file within js/src/ would represent an independent webpack 'entry point'. Every such directory generates its own JS file, so there is no need to have one huge bundle that is loaded on every single page, instead you can split up the scripts and only load those that are needed. In the example above, bundles product-page.js and category-page.js would be created.

Also, just to be clear, multiple plugins could be developed, not just one.

Not all directories in plugins/ would be watched for changes, as they are now. Instead, if people wanted to add plugins as dependencies, there could be a separate directory for that.

I'm very open to suggestions how this could be improved if anything comes to mind.

[luangjokaj]

I had a bit of time to look into this. I don't think removing browser-sync is a good idea. Having the auto-reload especially for styling is such a time saver.

Maybe the plugin development workflow could be different? People making themes (writing CSS) are not that technical thus we have a super simple workflow in WordPressify.

But we can afford to have more complexity for the plugin developers.

These tasks could run simultaneously so you have both. Just thinking out loud 😄

[ribaricplusplus]

Good points.

I'll also be thinking out loud here so excuse my lack of eloquence

As more and more features are added to WordPressify, we should probably take the Open/Closed principle seriously, and integrate it into the design of WordPressify.

What I mean by this is that everyone should be able to configure WordPressify to their needs without modifying gulpfile or any wordpressify code. It should be easy to choose whether you want Sass or PostCSS, whether you want JavaScript or TypeScript, whether you want browser-sync, whether you want to use webpack as I proposed here, or go without it.

Furthermore, we need to keep "incremental complexity" in mind. By that I mean that by default WordPressify should be dead simple to use, made for people who have no clue about Docker or Node or even plugins, and have no idea about the internals of how WordPressify works.

Open/Closed is usually achieved by a plugin system. We could make WordPressify pluggable, so there would be a simple configuration file wordpressify.config.js, setup by default (for incremental complexity), and then people who want it different can change the config file. There, you choose "Sass plugin", "Webpack plugin", etc. All these plugins would be kept within this main repo.

Lastly, and this is somewhat unrelated but still important, ideally we want to maintain as little code as possible and rely on external dependencies. @wordpress/env is getting pretty mature. If you're not familiar with it, it's a package developed by Gutenberg which sets up a Docker development environment. I've also started contributing to it recently, and it would be awesome to move from our own Docker setup to @wordpress/env. It's not a replacement for wordpressify, but WordPressify + @wordpress/env would be sick.

And additionally, @wordpress/scripts could be tightly integrated for formatting, linting, etc.

This would make WordPressify by FAR the leading solution for developing WordPress plugins and themes.

The only problem with all of this is that it's probably 1-2 weeks of full time work... I'd love to do it but it will certainly be financially difficult. But I guess such is the nature of Open Source. Do you think there's a chance we could ask someone to sponsor this?