dev: Improve prod build and monorepo scripts

[zetlen]

This PR is a:

[ ] New feature
[x] Enhancement/Optimization
[ ] Refactor
[ ] Bugfix
[ ] Test for existing code
[ ] Documentation

Summary

• Add more root-directory usability to monorepo scripts
• Add npm run watch:venia mode that:
  • Simultaneously builds buildpack, peregrine, and venia
  • Hot reloads venia if either peregrine or venia change on disk
  • Fully restarts dev server if buildpack changes on disk
  • Interleaves and prefixes output
  • Doesn't use lerna to do this, because lerna's parallelizing console
    mode is not customizable enough
• Fix production builds (by pegging them to very new browsers)

Additional information

Production builds will need further optimization in the future.
TODO: Adjust production build for middle tier concept
TODO: Use performance analysis to optimize chunk layout

[zetlen]

Feel free to clone and run npm run watch:venia and/or npm run build && lerna run --stream --scope=theme-* build to see the new hotness.

[coveralls]

Pull Request Test Coverage Report for Build 378

• 3 of 3 (100.0%) changed or added relevant lines in 1 file are covered.
• 25 unchanged lines in 3 files lost coverage.
• Overall coverage decreased (-0.1%) to 55.515%

---

Files with Coverage Reduction	New Missed Lines	%
packages/pwa-buildpack/src/WebpackTools/middlewares/StaticRootRoute.js	5	18.18%
packages/venia-concept/src/util/makeMediaPath.js	8	0.0%
packages/pwa-buildpack/src/WebpackTools/middlewares/OriginSubstitution.js	12	33.33%

Totals
Change from base Build 369:	-0.1%
Covered Lines:	867
Relevant Lines:	1617

---

💛 - Coveralls

[jimbo]

This should slim down the build. 👍

[jimbo]

Is this really the plan? Watch all of these at the same time? I'd rather just watch venia, personally. Can we make this one watch:all or something?

[zetlen]

This is definitely what you want. This has the exact same functionality that npm start in venia does today, with three key improvements:

1. If you change a Peregrine source file (e.g. moving a concept from Venia to Peregrine) it will hot reload and stay up to date, instead of requiring a manual Peregrine rebuild
2. If you change a Buildpack source file (e.g. changing the behavior of a plugin or DevServer), it will shut down the dev server, rebuild Buildpack, and restart the dev server to reflect the new changes.
3. You can run it from project root.

If you don't touch Peregrine or Buildpack, it's functionally the same.

[jimbo]

If you don't touch peregrine or buildpack, is it more expensive to watch them? Does it bog your system down more? That's my only concern.

[zetlen]

@jimbo Peregrine and Buildpack have many fewer files than Venia, so I don't think it's a major concern. However: I could just change this so that "watch:venia" just runs "cd packages/venia-concept && npm start; cd -", and the command currently named "watch:venia" could be renamed "watch:all". Would that help?

[jimbo]

Yes, I think that would help. 👍

[jimbo]

Can you elaborate? What does this workaround do that URL doesn't?

[zetlen]

It's guaranteed to produce an absolute URL from a possibly-relative URL. The webpackPublicPath argument is relative in production and absolute in dev, so we need something that can handle both. URL objects cannot:

// URL constructors deal in absolute URLs.
try {
  new URL('/hermano')
} catch(e) {
  console.warn(e.message, '/hermano'); // Failed to construct 'URL': Invalid URL
}

// They can use relative URLs if you supply a "base URL" as a second argument.
const absoluteBase = 'https://github.com/magento-research/pwa-studio/';
const url = new URL('pulls/165', absoluteBase);
console.log(url)
// Url { protocol: "https:" hostname: "github.com", pathname: "/magento-research/pwa-studio/pulls/165" }

// If the base URL is relative, they throw.
try {
  new URL('pulls/165', '/magento-research/pwa-studio/');
} catch(e) {
  console.warn(e.message, '/magento-research/pwa-studio/');
}

// Anchor tags will accept absolute or relative 'href' attributes:
const parserTag = document.createElement('a');
parserTag.setAttribute('href','/magento-research/pwa-studio');
// But their properties are always absolute:
console.log('parserTag.getAttribute("href")', parserTag.getAttribute("href"));
console.log('parserTag.href', parserTag.href); // "https://github.com/magento-research/pwa-studio/";

// So you can guarantee an absolute URL built with URL semantics
// if you can guarantee an absolute base, which we do with our parser.
// Which is a lot safer than string concatenation.

function appendPathToUrl(path, base) {
   const parser = document.createElement('a');
   parser.setAttribute('href', base);
   return new URL(path, parser.href).toString()
}

console.log(
  'true or false: using an anchor tag as a parser normalizes absolute URLs:'
  appendPathToUrl('pulls/165', '/magento-research/pwa-studio/') === 
  appendPathToUrl('pulls/165', 'https://github.com/magento-research/pwa-studio/')
);
// true

[jimbo]

I see, makes perfect sense to me now. Thanks for the explanation. 👍

[jimbo]

is this a bug fix?

[zetlen]

Yep! For Webpack tree shaking.

[zetlen]

@jimbo Made changes based on your feedback.

[zetlen]

@jimbo Build is fixed. We had a misconfiguration in CI where the test suite wouldn't run anymore, which is how the Greenkeeper update got merged without noticing test failure.

• We don't run our tests directly in CI; we run Danger and it runs the tests from the Dangerfile.
• Danger is evidently incompatible with a CircleCI setting which builds all pushed branches. It can't tell if it's in a PR anymore.
• I had enabled that setting while configuring Greenkeeper, but I don't think we need it anymore.
• Disabled that setting and Danger runs now.
• TODO: run tests directly, store artifacts, and run Danger on those artifacts.

[jimbo]

@zetlen Thanks for making changes. Looks good to me now.

For what it's worth, watch:all is very slow compared to watch:venia. It makes my machine's fans spin up to high, and it takes a long time to hot reload. That can be optimized, so I don't think it blocks this, but it's something we'll need to improve or remove.