FEATURE - Component bundles

[khawkins98]

As discussed in Slack last week, it would be helpful for getting started and component management to have "bundles" that pull in needed components.

For examples, vf-bundle-group-sites might contain:

• vf-inlay
• vf-page-header
• vf-activity-group
• and so on

And embl-bundle-default might contain:

• embl-logo
• embl-favicon
• embl-content-hub-loader
• embl-breadcrumbs-lookup
• and so on

The use case seems pretty clear, but there are — as ever — implementation questions:

• what do we call these? "bundles"?
• how do format the names? {scope}-bundle-{name}, that is: embl-bundle-event-pages
• where do they live? in the vf-core repo? in ./components/* or a new ./bundles/*?
• how do they work? a package.json with documentation?

They would probably be similar to this: https://github.com/primer/css/tree/v10.3.0/modules/primer-marketing

These will be useful as we make more EMBL eleventy sites so I think the priority here is fairly high.

If nothing above sounds terribly wrong I'll make a quick PR with a proof of concept for discussion.

[auto-comment]

Thank you for raising an issue. We will try and get back to you as soon as possible.
Please make sure you have given us as much context as possible.

[sturobson]

an easy-ish one to answer:

where do they live? in the vf-core repo? in ./components/* or a new ./bundles/*?

./whatever-we-decide-on/*

I know we're using a monorepo but that doesn't mean that we cannot have multiple top-level folders of 'things'. Like we are with tools.

I guess bundles kinda works but does that nomenclature have potential 'messiness' with anything else that uses 'bundles'?

I think we need to keep vf-core/components as light as possible and only include the actual components (I have been thinking about what/how we approach things with the gulp stuff and whether it should be in components or tools or something else.

[khawkins98]

A quick brainstorm:

• compilations
• projects
• boilerplate
• scaffold
• starters
• template
• groups
• meta-components

Might be a good twitter poll in it.

Related reading:

• https://www.freecodecamp.org/news/whats-boilerplate-and-why-do-we-use-it-let-s-check-out-the-coding-style-guide-ac2b6c814ee7/
• https://en.wikipedia.org/wiki/Boilerplate_code

[khawkins98]

And how GitHub described them in Primer:

Primer is monorepo composed of 23 packages which can be installed altogether or individually via npm. We group our packages into 3 meta-packages which you can install individually: primer-core, primer-product, and primer-marketing. Install primer if you want to install all 23 packages.

https://github.com/primer/css/tree/v10.3.0/modules

[khawkins98]

Dropping the priority on this. Still would be really good, but clearly we've got other things to tackle.

[khawkins98]

We don't have the capacity to action this, it is being moved to the backlog #446