feat: remove rollup application compiler, delegate compilation to the shell

[amcgee]

BREAKING CHANGE: This will break applications which use the named import workaround, but now treeshaking will work!!

This overhauls (actually strips down) the application compiler, delegating most of the compilation and bundling responsibility to Create React App in the shell. This has several benefits:

1. It SIGNIFICANTLY improves compilation performance
2. We no longer run into out-of-memory issues when the app (including all dependencies) gets huge
3. ES6 modules and named imports from CJS dependencies are now supported out-of-the-box
4. svg/png imports just work - as does anything supported by CRA

There are also a few of drawbacks, however:

1. We cede control of the compilation step to CRA, so we're not able to do much if we want to diverge from their webpack configuration. We could, of course, eject the shell and manage our own configuration there, which might not be a bad idea.
2. We run the application source files through a single pass of babel with (currently) only the styled-jsx plugin enabled. This means the source files processed by CRA might not be identical to the source files the developer sees in their ./src directory. It also means we run into an ugly eslint error because styled-jsx generates non-compliant _JSX components which break the CRA linter.
3. We bifurcate our compilers, so apps and libs no longer share the same compilation process (libs still use rollup (excluding dependencies) and build both ES and CJS bundles.
4. We can't use pnp for shell dependencies any more because we need to rely on find-up resolution to get to app-specific dependencies in the top-level node_modules. This increases shell bootstrap/install latency and requires a lot more disk space to bootstrap a local shell.
5. We lose the ability to do our own bundle analysis at the rollup stage, we'd have to re-introduce it by parsing the webpack bundles generated by CRA

---

TODO

• Properly exclude node_modules when copying shell and adapter assets into cli dist bundle
• Support public directory for static assets
• Version and automatically overwrite the existing local shell when d2-app-scripts is upgraded
• Automatically ignore ESLint errors from styled-jsx generated code.
• Document the new static file support
• Re-introduce bundle analysis / statistics generation (optional/future)

[netlify]

Deploy preview for dhis2-app-platform canceled.

Built with commit f98d664

https://app.netlify.com/sites/dhis2-app-platform/deploys/5ddf99fb1bd8820008dbccde

[amcgee]

I added a babel plugin to inject /* eslint-disable */ to the top of each babel-compiled source file. This means we won't get any CRA-triggered eslint errors in the browser (particularly from JSX stuff that the user has no control over) but it also means we don't automatically do eslint checks on those files any more. I think this is OK since we presume the app will be using cli-style at commit time. In the future we should automatically run our own ESLint rules on all source files before running babel!

[amcgee]

Added usage documentation for static files, CSS, and dependencies

https://deploy-preview-187--dhis2-app-platform.netlify.com/#/usage

[amcgee]

@varl @dhis2/team-apps this should be ready for testing and review!

[Mohammer5]

Code looks good to me. I tried to understand the full impact of this, but that's very difficult as I'm new to the code. Only thing I saw that I didn't like too much is exporting functions in index.js files, it's always unclear what's inside an index.js unless you look inside. If they're just used for re-exporting, you won't have to look into them all them time. The compile function is inside an index.js, which I def. did not expect. Can we move that one to its own file and just export it from the index.js?

[varl]

@Mohammer5 Check out the port of Data Vizualizer to the App Platform if you want to get an idea of the full impact: dhis2/data-visualizer-app#327

[amcgee]

The compile function is inside an index.js, which I def. did not expect. Can we move that one to its own file and just export it from the index.js?

Done. It makes index.js a bit superfluous, and we do have index.js logic elsewhere in this repo, but I can get behind the no logic in index files rule.

Thanks for taking a look through the code @Mohammer5 !

[Mohammer5]

I can get behind the no logic in index files rule

Uber nice, cheers!

[varl]

fix: update browserlist (should consolidate these with cli-style)

It should be exported in the config property:

import { config } from '@dhis2/cli-style'

const browserslistsrc = config['browserslist']
// path/to/node_modules/@dhis2/cli-style/config/js/browserslist.config.rc

Maybe you can use that?

[amcgee]

Yep, that’s what I was thinking! Will do it with another PR though

[dhis2-bot]

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[amcgee]

Closes #72