Mark . (dot) notation components as PURE.

[Hugos68]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Currently we define components using the following syntax:

const Root = ...;
const SubComponent = ...;

export const Component = Object.assign(Root, { SubComponent });

This works great but means that if Component is imported, all subcomponents, used or not used, are bundled.
For bundlers to do their job correctly we can utilize the /*#__PURE__*/ comment to mark an object as "pure" meaning that the properties can be treeshaken individuaally without affecting one or another. We should add these comments to our exported . components.

It would look something like this:

const Root = ...;
const SubComponent = ...;

export const Component = /*#__PURE__*/ Object.assign(Root, { SubComponent });

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/pure-notation-spec.md
https://webpack.js.org/guides/tree-shaking/#clarifying-tree-shaking-and-sideeffects

[phamduylong]

Components to update:

• Accordion
• Navigation
• Segment (is there even a use case that includes Segment and doesn't involve Segment.Item)??
• Tabs

[endigo9740]

@phamduylong there's not a use case that involves any of these components being used without their parent. The only kind of edge case here is Navigation has two possible parents: Rail or Bar. So you would never use Rail and Bar as the same time.