Computed Options

Sometimes it is useful to have an option which have a value which depends on other option values. Or if you want to override some options if other options have specific values.

That's why we have created Computed Options. Thanks to it, you can avoid of creation of the additional options UI and complex code in your theme.

How Computed Options works?

Computed Options are defined in the computed-options.js file in the root directory of your theme.

The computed-options.js file must contain a function which will return the array of objects which will contain name and value for the computed options: 

module.exports = function (themeConfig) {
    // One-liner to get a value of the specific option value from customConfig
	let customConfigOptionValue = themeConfig.customConfig.filter(option => option.name === 'optionName')[0].value;
    // Calculate a value
	let computedValue = themeConfig.renderer.relatedPostsNumber + customConfigOptionValue;

    // Return an array with new options which will be appended to the customConfig array
	return [{
		name: 'testcomputed',
		value: computedValue
	}];
};

In the above case a new option called testcomputed will be available under @config.custom.computedOption.

So in such way you can create a totally new options which will be available during rendering of your theme and they can depend from the other option values.

How to override existing options with Computed Options?

Consider the following case: you have an option headerSize in your theme - if your computed-options.js file will return option with the same name - it will override your original option value.

Why it happens this way? 

Because the output of the function placed in the computed-options.js file is concatenated with the customConfig array and then merged with the default theme config. The last occurrence of the option overrides previous ones with the same name:

default config MERGE WITH (customConfig + computed options)

How to override renderer options?

It is possible to override most of the renderer options using Computed Options. Just create a function which will return the option with name which is used in the render options - then this value will be used as a value for the renderer options.

Thanks to this possibility you can control renderer options using your theme settings.

For example - you can create a Computed Option which will disable rendering of the author pages if some options are enabled in the theme:

module.exports = function (themeConfig) {
    let customConfigOptionValue1 = themeConfig.customConfig.filter(option => option.name === 'optionName1')[0].value;
    let customConfigOptionValue2 = themeConfig.customConfig.filter(option => option.name === 'optionName2')[0].value;
    let computedValue = customConfigOptionValue1 && customConfigOptionValue2;

    return [{
		name: 'createAuthorPages',
		value: computedValue
	}];
};

Thanks to the above code in computed-options.js you can control renderer behaviour through your theme options.