LWC: Modularizing Code using Singleton pattern

Imagine that we have a custom LWC component, which we drag-and-drop onto a Lightning page in Lightning App Builder. This component has 2 design attributes for First Name and Last Name. We need a way to access these values from any component without communicating down the containment hierarchy. Setting the public properties of child components becomes a tedious job if there are nested components.

To solve this issue, we can use the Singleton Pattern, which states that the number of instances of an object must be restricted to one only, hence the "single" in Singleton. The intent of the Singleton is ensuring a class has only one instance, and providing a global point of access to it.

For the sake of simplicity, I have created 2 components component1 and component2 where component2 is the child of component1. I need to access the design attribute values of the parent component from the child component. In this example, we are storing the design attribute values in a single central place, sharedData component, written in the Singleton pattern.

which can be accessed by any component in the application like below:

Similarly, to get one point of access to custom labels, I have created a component customLabels using Javascript classes to access the custom labels

To know more about Object.freeze(), refer one of my post titled Javascript: Preventing Object Modification. Now any component in the application can access these values like below:

Please see the below repo for the code:
https://github.com/iamsonal/lwc-singleton