build-prs-stack-xmas2019.md

Fixed sourcemaps: Stack of PRs

In an effort to fix our sourcemaps all 3 layers of riot-web needed to be upgraded to support and use ES6 imports/exports due to a babel upgrade. Babel doesn't really like CommonJS and it causes some problems with type inference for non-TypeScript files.

Upgrading babel gives us accurate source maps nearly for free, we just have to make a couple other changes.

While we're also there fixing all the exports and imports, we're importing from src/ instead of lib/ for the SDK layers because of the new webpack config. To keep the most accurate sourcemaps we build from source always, though the SDKs themselves still export components which could be used by others with less advanced build systems (we export to lib/ still).

This effort includes upgrading our webpack dependencies to better bring us up to modern standards (and to have a better chance at compatible source maps).

js-sdk changes

The js-sdk doesn't have a whole lot of complicated things going on, unlike the react-sdk. There's 4 PRs shown above, all of which are relatively straightforward. They make more sense in the context of the riot-web changes described below.

react-sdk changes

These ones are significantly more complicated. Previously the js-sdk was converted to ES6, so there's a bit of handling for that in this stack of PRs. The react-sdk didn't get converted to ES6 at the same time, so that has also been done here in two streams: imports and exports. With the ES6 changes, there's an imports PR, an exports PR, a js-sdk import fix PR, and finally a general cleanup PR to fix the last ES6 bugs known.

The other PRs are largely just architectural for riot-web, which is described below. There's also a few minor patches which could theoretically go to develop, though for safety and tracking reasons they are still against the feature branch.

The react-sdk still needs to work out the skinning problem (applying the decorator everywhere, etc).

riot-web changes

Note: These haven't been split out yet.

The PR for all of the things lumped together is element-hq/element-web#11679 - this needs to be broken down into more managable and understandable chunks. What follows is a rough description of what those changes are supposed to do to hopefully aid the review of the js-sdk and react-sdk PRs.

Like the react-sdk, there's some ES6 conversion going on though the impact is significantly less due to the fewer number of components. The remainder of the changes are focused on the webpack config.

The webpack config is largely just focusing the efforts on dependency upgrades. There's some added TypeScript resolution and a change in how babel is configured (inline to the config rather than a different config file), though largely the config is the same. We output a few more JS files than before due to module bootstrapping stuff, though they are small and minify nicely.

The largest webpack change is probably the CSS handling: the plugin used to pull the stylesheets into their own files was changed, which led to a number of seemingly unrelated options being changed (like splitChunks). The other change was the handling of resolutions: we added custom fields to resolve by in the package.json because we expect the js-sdk and react-sdk to be imported from src/, but they say to use lib/ in isolation. To get around this, we simply define an alternative entry point for webpack to pick up as otherwise we'd be importing from src/ for explicit imports and lib/ for the top-level package. We do not expect other consumers to be capable of supporting this kind of workflow which is why we still have a lib/ directory in the first place.

Remaining changes

Here's what's left, roughly:

1. Fix the react-sdk tests.
2. Merge develop into the branches before merging back to develop (merge conflicts).
3. Rip out tslint (it was introduced early on in this sourcemaps adventure).
4. Double check that lib/ and other build outputs are usuable, including fixing any examples.
5. Double check that the release scripts work/will work.
6. Update the yarn scripts for the new tooling (mostly in riot-web).
7. Solve the skinning problem for the webpack dev server.

After all that, it should be safe to take this to develop. Further work is planned after that happens:

• Enable contributor PRs to riot-web and co. by moving the pipeline to the pipelines repo.
  • Includes modernization of the pipeline to not use so many resources and be a bit faster.
• Support writing tests in TypeScript. We already support TS in the src/ tree, just not for tests/.
• Modernization of the source. Convert things to classes, updating documentation, etc.