ConfigGenerator

import { buildConfig } from '@bbc/front-end-kit/js/showpad/managers/ConfigGenerator';

Generates a config.json skeleton by scanning the DOM for Showpad data attributes. Eliminates the manual work of listing fields and maintaining the correct JSON structure during development.

Tips

When active, label injection is suppressed so the element's default HTML content is shown instead of config values — useful for seeing placeholder text while building.

Warning

The generated config object lives in memory only. It resets on full page reload. This tool works best in single-page router setups (e.g. HighwayApp) where the page does not fully reload between views.

Tips

buildConfig adds a --config-gen modifier class to document.body. Use it to trigger developer-only CSS that highlights config paths or missing values during setup.

Getting started

import { buildConfig } from '@bbc/front-end-kit/js/showpad/managers/ConfigGenerator';
import ShowpadConfig from '@bbc/front-end-kit/js/showpad/managers/Config';

const config = new ShowpadConfig();

config.load().then(() => {
    const result = buildConfig(config);
    console.log(result); // copy-paste this into config.json
});

The result is logged to the console as a JavaScript object — copy and paste it into your config.json file.

Config field description

Add data-sp-description to provide a description for a field in the generated config. Add data-sp-required to append an asterisk (*) to the description, marking it as required.

<div data-sp="path.to.field"
     data-sp-required
     data-sp-description="Small description">
    Default value
</div>

Generates:

{
    "labels": {
        "path": {
            "to": {
                "field": {
                    "value": "Default value",
                    "description": "Small description *"
                }
            }
        }
    }
}

This also works for data-sp-asset types — the generated structure will use the appropriate asset shape (asset, multitype, tags, asset-tags, page-tags).

API

`buildConfig(configInstance, options = {})`

Scans the DOM for all elements with Showpad data attributes and builds a config object incrementally. Adds --config-gen to document.body. Consecutive calls to buildConfig merge into the same internal module-level object — entries are accumulated across calls, not replaced.

Parameters

configInstance (Config): The ShowpadConfig instance. Used to resolve attribute names and process placeholders.
options (object, optional):
- $el (Element, default document.body): Scope root — only elements within this element are scanned.

Returns

object — the accumulated config object with version, labels, and contents.

Singleton accumulator

config is a module-level variable. Every buildConfig call adds to the same object. If you need a fresh config, reload the page or call buildConfig only once per session.

External dependencies

Config: Provides getAttributeSelector() and extractPathInfo() for DOM scanning.
lodash-es get / set / camelCase: Path traversal and writing into the generated config object.