A3 alpha 4: webpack 5, async-friendly "fragments," CSS assets and more

[boutell]

This is an intermediate release of A3, addressing early feedback. In the next few weeks we'll be moving on with bigger features and bigger announcements.

Breaking changes

• A3 now uses webpack 5. For now, due to a known issue with vue-loader, your own project must also be updated to use webpack 5. The a3-boilerplate project has been updated accordingly, so you may refer to the a3-boilerplate project for an example of the changes to be made, notably in webpack.config.js and package.json. We are in communication with upstream developers to resolve the issue so that projects and apostrophe core can use different major versions of webpack.

Other Changes

• "Fragments" have been added to the Apostrophe template API, as an alternative to Nunjucks' macros, to fully support areas and async components. See the A3 alpha documentation for instructions on how to use this feature.
• CSS files in the ui/public subdirectory of any module are now bundled and pushed to the browser. This allows you to efficiently deliver your CSS assets, just as you can deliver JS assets in ui/public. Note that these assets must be browser-ready JS and CSS, so it is customary to use your own webpack build to generate them. See the a3-boilerplate project for an example, especially webpack.config.js.
• More support for rendering HTML in REST API requests. See the render-areas query parameter in piece and page REST API documentation.
• Context bar takeover capability, for situations where a secondary document should temporarily own the undo/redo/publish UI.
• Unpublished pages in the tree are easier to identify
• Range fields have been added.
• Support for npm bundles is back. It works just like in 2.x, but the property is bundle, not moogBundle. Thanks to Miro Yovchev.