Options: Further Details

What are we learning here?

• Some last details about options

Global Defaults

You can modify also defaults globally. This means that after the global defaults have been modified, all newly created components (regardless of which system) will use them.

This is not recommended. It is always better to use settings on the root component to set the defaults for one system.

To set defaults globally you can modify the static property of a component class. Here we set for example the default panel size for all components on any stage that will be created after this:

import { Panel } from "@codecoupler/cc-ui";
Panel.defaults["@codecoupler"].panel.panelSize = "640 400";

Override Options of Base Classes in own Component

As you know you can override the options of the base class with your own defaults in static defaults when you write a new component. But sometimes this is not the best place. For example, if you want to set options with callback functions that need to access your instance and not to your class.

The asnyc init() method is best suited for this purpose. The async start() method we have used so far is not suitable for this, because when this function is called, all base classes have already completed their initialization and have used their options.

So both codes below do the same thing:

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

export default class extends Application {
  async init(){
    this.options["@codecoupler"].panel.panelSize = "640 400";
    this.options["@codecoupler"].panel.headerTitle = "Test Component Features";
  }
}

Well known Options

There are options that are always expected at the root level. To distinguish these from other options, they start with a $ sign. We will see some examples later in this walkthrough. First of all, here is a brief overview. For now the following well known options will be used:

• $manifest: Information about the component that have to be available before loading.
• $i18n: Language strings of a component.
• $map: Used to map root options into namespace.
• $globals: Placeholder for defining system wide defaults.

Passing complex objects

You can pass complex objects as options values, but you have to keep a few things in mind. Objects which are constructed via new will be kept intact (and will not be merged like an ordinary object). But if you call a function of this instace which access private properties leads to an error. This is because you do not get the origin instance, but a reactive Proxy.

You can do the following to work with passed complex objects:

(1) Extract the raw object from the proxy (Preferred):

import { toRaw } from "vue";
let originObject = toRaw(this.options.passedObject);

(2) Use the origin object which was passed from this.env.options. But keep in mind that you maybe you have to check this.env.settings and this.env.defaults, too. This method should therefore only be used with caution and is not recommended:

let originObject = this.env.options.passedObject;

Intermediate Results

All intermediate merge results are available separately and you can of course build your own merging strategy from this:

1. Intermediate result after merging static defaults of class hierarchy is available in this.env.defaults.
2. Intermediate result after merging settings from parent component with passed settings is available in this.env.settings.
3. The origin passed options are available in this.env.options.