Upgrade to src 0.18.1

[SiAdcock]

Upgrade to Source v0.18.1

It's important for all Source packages to be at the same version, to ensure compatability between foundations and the components.

Recent upgrades to components bring a variety of bug fixes, accessibility improvements, performance increases and extra polish. You can read all about them on our Releases page. It's also better to stay relatively up-to-date at pre-version 1 to make upgrading to version 1.0.0 easier.

Include Source Foundations in server bundle

I'm including src-foundations and its submodules in the server bundle by whitelisting them in webpack-node-externals. This is because by default the submodules are exposed as ECMAScript modules, and Node can't execute them, so dist/server.js crashes.

What else have you tried?

src-foundations exposes CommonJS builds of the submodules, which can be accessed by appending /cjs to the end of each import path (e.g. @guardian/src-foundations/typography/cjs). We could manually replace all imports of src-foundations/* with src-foundations/*/cjs, but this might be difficult to remember to do when you're coding. It also means the client bundle loses out on the treeshaking benefits of ES modules.

Ideally we could use resolve.alias to alias @guardian/src-foundations/typography to @guardian/src-foundations/typography/cjs in the server bundle. However webpack-node-externals doesn't seem to like this (see liady/webpack-node-externals#66) and ignores attempts to alias external modules.

Whitelisting foundations, and bundling this package and its submodules into the server build, seems to be the easiest way to resolve this issue for the time being.

Have you tested these changes?

Honestly, I have not. The build seems to work and dist/server.js runs this time. But I'm having difficulty with the setup process for this repo (it's really really long!). It would be great if someone could show me the most frictionless way to visually test changes on this repo 😊 Ideally we'd have Storybook or similar, so we can develop components or mockups of screens in isolation. Is this on the roadmap?

Let me know if you have any questions.

[twrichards]

This is awesome @SiAdcock - such a great write-up - thank you!

I appreciate that manage-frontend is far from the most accessible for new/outsider developers, I had some ideas over the weekend about how to reduce that list of startup requirements significantly (by proxying CODE resources as gulocal using webpack proxies - will look into those early this week, hopefully).

As for storybook, that's something I would really like to add. manage-fronted doesn't have a formal roadmap as such, but this quarter I really do want to crack the visual regression testing nut (with Storybook, ChromaticQA etc).

We also now have a health ticket to review/overhaul the JS bundling / transpilation for manage-frontend (and ideally move to ParcelJS).

In the meantime, deploying to CODE is by far the simplest way to test stuff without needing any setup. I will happily test this in CODE, although I think we need to get the build passing first...

[twrichards]

... as for the failing build, test are failing because SyntaxError: Unexpected token export - I think related to the transpilation of the tests themselves... @rBangay or I will checkout the branch and try get it working later today.

[SiAdcock]

I fixed the failing build and documented why it was happening in the Source FAQs. tl;dr: submodules such as @guardian/src-foundations/typography are exposed as ES modules, but Jest needs to work with CJS modules. I've added a moduleNameMapper that maps the ESM paths to CJS ones using a proper sophisticated RegExp that I truly and honestly wrote all by myself and fully understand 🤞

[prout-bot]

Seen on PROD (created by @SiAdcock and merged by @twrichards 7 minutes and 30 seconds ago) Please check your changes!