Split config, lib and tasks into npm packages

[colinrotherham]

This PR partially implements:

• Split project into separate app, config, lib and tasks packages #2886

Where each package directory is set up with:

1. Separate package.json to manage dependencies
2. Separate tsconfig.json for type checking "squiggles" including tests
3. Separate npm workspace, e.g. import { npm } from 'govuk-frontend-tasks'

To confirm everything works correctly this branch builds on:

• Add (optional) type declaration checks in all files #3493

Before

Everything at project level

├── app
├── bin
├── config
├── dist
├── docs
├── lib
├── package
├── src
└── tasks

After

Some dependencies (app, config, lib, tasks) moved to ./shared

├── app
├── bin
├── dist
├── docs
├── package
├── shared
│   ├── config
│   ├── lib
│   └── tasks
└── src

[romaricpascal]

Halfway through and looking nice so far, only one major comment 😊 I'll carry on tomorrow morning (note to self: just gone through "Add govuk-frontend-lib helpers package export").

[romaricpascal]

I like that this has moved from the browser tasks thanks to the reorganising 😍

[romaricpascal]

issue I think this and the helpers/index.js file get in the way more than they help the usage of the lib workspace. Instead of a single import for reaching a specific helper, now we need two instructions: first to import govuk-frontend-lib then to destructure helpers.xxx. I think it'd be simpler to just import directly from govuk-frontend-lib/helpers/xxx.js instead (that reorganisation is super neat), even if it means a little search and replace if we decide to move things inside lib.

[colinrotherham]

Yep totally agree, there's a later commit that separated "helpers" from "lib" so we could flatten this

I'm happy with destructuring though as it's similar to const { dirname, join } = require('path')

But if we want to avoid it we have some options:

Namespace-style objects

import { files } from 'govuk-frontend-lib'

files.getComponentsData()   // versus getComponentsData()
files.getDirectories()      // versus getDirectories()
files.getFullPageExamples() // versus getFullPageExamples()

Named package exports

import { getComponentsData, getDirectories, getFullPageExamples } from 'govuk-frontend-lib/files'

getComponentsData()
getDirectories()
getFullPageExamples()

Let me know

[romaricpascal]

Replied on the main thread of comments 😄

[romaricpascal]

Move to workspace makes imports so much tidier without the ../../... Splitting helpers and lib is also a nice way to distinguish what's build/test code and what's not 🙌🏻 Two little things for me:

• As I've mentioned in this comment, I think index.js files just add more steps for using the lib and helpers. They're one extra file to maintain and lead to extra destructuring to access the actual functions. I'd prefer we use your proposition for named package exports, @colinrotherham, as it both clarifies where the code lies (for people that may not be looking at it in an IDE with shortcuts to move around) and simplifies the access to the function.
• I'm not sure of the benefits of moving things into shared. We don't have that much complexity in the folders of the project that our root directory is crowded. Having everything at the root of the repository makes it easier to have a view of what's in the repository.

Documentation wise, would it be worth having a little README file in each workspace to complement the docs/application-architecture.md with a quick description of what we want to set in each package?

[colinrotherham]

@romaricpascal Brill, I'll add those named entries

Do you want READMEs as a blocker for this PR or something we can improve later?

Using shared came from @36degrees in #3399 (comment) instead of npm workspaces packages:

• Investigate using the packages folder convention #3490

[romaricpascal]

I wasn't super strongly against shared so happy to keep it and save moving more code around.

We can add READMEs later, I think, but a line in application-architecture.md to describe shared and more importantly shared/helpers would be good for that PR (had missed that it was missing looking at things commit by commit 😬 ).

[colinrotherham]

@romaricpascal I've added commit 7dbff83 for subpath package exports

Let me know if you're happy with the application-architecture.md edits

Thanks 😊

[romaricpascal]

Awesome! Thanks for the amends! 🙌🏻 ⛵