Options: Options Inheritance

What are we learning here?

                                                               ┌──────────────┐
                                                               │   Change     │
                                                               │   Options    │
                                                               └───────┬──────┘
┌──────────────┐ ┌─────────────────────────────────────────────────────┼──────┐
│ Loading      │ │ Component                                           │      │
│ Component    │ │                                                     │      │
│ ┌──────────┐ │ │                         ┌──────────────────┐   ╔════▼════╗ │
│ │ options  ├─┼─┼───Transform────────────►│ Received Options ├──►║ Final   ║ │
│ └──────────┘ │ │   (optional)            └────────▲─────────┘   ║ Options ║ │
│              │ │                                Merge           ╚════╤════╝ │
└──────────────┘ │ ┌───────────────────┐   ┌────────┴─────────┐   ┌────▼────┐ │
                 │ │ Static Defaults   ├──►│ Merged Defaults  │   │ ! Watch │ │
                 │ └──────────▲────────┘   └──────────────────┘   └─────────┘ │
                 │          Merge                                             │
                 └────────────┼───────────────────────────────────────────────┘
                 ┌────────────┼──────────┐
                 │ Base Component        │
                 │ ┌──────────┴────────┐ │
                 │ │ Static Defaults   │ │
                 │ └──────────▲────────┘ │
                 └──────────Merge────────┘
                 ┌────────────┼──────────┐
                 │ Base Component        │
                 │ ┌──────────┴────────┐ │
                 │ │ Static Defaults   │ │
                 │ └───────────────────┘ │
                 └───────────────────────┘

---

• Details about options inheritance

The options that are available in this.options are collected in a very specific way, which we will now explain in more detail in the following chapters.

First we look at the base classes of a component which define all its own static defaults. All these static defaults of all base classes are merged. Let's look at our application component that extends the class Application:

export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "640 510",
        headerTitle: "Test Component Features"
      }
    }
  };
}

The Application class, in turn, extends the Panel class. And this ultimately like all components extends the Component class:

Our Class
  🡑
Application
  🡑
Panel
  🡑
Component

Any class in this hierarchy can define its own defaults. To keep these options from getting in each other's way, each class uses its own namespace.

The class Application have defined its default in @codecoupler.application, the class Panel in @codecoupler.panel and the class Component in @codecoupler.component.

Therefore if writing components you should always put the default options into an own namespace. The namespace should be the product name, prefixed by @ and divided into subspaces named like the component.

As you see we override in our class the default options of the Panel class which is responsible to build the dragable panel.

After merging the defaults these are in turn merged with the passed options.