Modify output config

Programmatically update the generated config

As the CLI parses your code, it builds up a configuration object with the information it has found. At the end of the parsing stage it outputs this information as JSON data to .interplay/stage/config/parsing.json in the interplay folder, ready to send to Interplay. Sometimes it is useful to modify either the config before it is submitted to Interplay. You can do this using event and modifier functions.

Modifier functions

At various stages during processing, the CLI calls event functions, passing the context so that you can modify it to change the CLI behaviour or parsing results.

You can implement handlers for these events by implementing them in your interplay.config.js file. For example, for the parsingComplete event:

//interplay.config.js
module.exports = {
    events: {
	parsingComplete: (context) => {
		//get the components and examples from the context
			const { components = {}, examples = {}} = context;

					//make changes to component config or examples (presets) here

					//return the context to pass it on to next function in CLI
           return context;
        }
    }
}

The following modifier events and placeholders are currently available. We will be expanding this list as needed to allow more customisation of the CLI's behaviour - please let us know what you need.

//interplay.config.js
module.exports = {
    events: {
	//modify config after the CLI resolves source files, before parsing
	resolveComponentsComplete: (context) => {},


	//modify config after all parsing, before deploy to interplay
	parsingComplete: (context) => { return context;}
    },
    modifiers:{
	//modify the plugins used to transpile
	babelPlugins: (plugins) => { return plugins},


	//modify the webpack config used to bundle
	webpackConfig: (config, webpack) => { return config},
    }
}<br>

Use cases

Setting the folder for each component

We can override the parsingComplete event to modify the component config produced by the parsing.

In this scenario we will set a folder of 'Icons/Arrows' on selected components:

//interplay.config.js
module.exports = {
    events: {
	//override the parsingComplete event
	parsingComplete: (context) => {
		//get the component config from the context
        	const { components = {} } = context;

            	Object.keys(components).forEach(componentId => {
                	const component = components[componentId] || {};
                	const { code } = component;
                	if(code.exportName && code.exportName.indexOf('Arrow') > -1){
			//set the component folder
                    	component.path = 'Icons/Arrows';
                }
            });

            return context;
        }
    }
}

Parsing additional component source files

Sometimes we may need to instruct the CLI to parse components addition to those defined in your component index. This may be useful for subcomponents not exported from your index (e.g. Dropdown.Item), or where the CLI cannot resolve a source file from your index for some reason.

To do this we effectively need to provide a mapping between the source file to parse and where in the build Interplay can find the component to run (because it is not exported from your index).

We can use the resolveComponentsComplete event to programmatically add the same mapping config the CLI would have generated, as if it had found and resolved the component from the index:

//interplay.config.js
module.exports = {
    events: {
	//override the resolveComponentsComplete event
	resolveComponentsComplete: (context) => {

		//get the config generated by resolving the index components
      		const { components = {} } = context;

		//tell Interplay about another component
            	const DropdownItem = {

			//use the same ID format as for your other components
                	id: 'PackageName_DropdownItem',

			//package build and export to use at runtime
                	code: {
                    		packageName: '@package/name',
                    		exportName: 'Dropdown.Item'//as exported from build
                	},


			//component source file and export to parse, relative to cwd
                	resolved: {
                    		relativePath: 'src/components/Dropdown/DropdownItem.js',
                    		exportName: 'default'//as exported from source file
                	}
              	}

		//add to the components config for CLI to process
	        components[DropdownItem.id] = DropdownItem

            return context;
        }
    },
}

Customising babel plugins

The CLI uses a default set of babel plugins when bundling your code using webpack. In many cases the CLI defaults will be suitable, because we you can transpile your source code using your own build process before running the CLI.

In some situations you may need to modify the default set of babel plugins used by the CLI. You can do this by overriding the babelPlugins modifier function as shown below. The function is called when initialising the CLI.

//interplay.config.js
const removeGraphQlPlugin =require("babel-plugin-remove-graphql-queries").default;
module.exports = {
    modifiers: {
	babelPlugins: (plugins) => {
		//add a plugin to the babel plugins array
            	plugins.unshift(removeGraphQlPlugin);
            	return plugins;
        },
    }
}<br>

Customising webpack config

The CLI uses webpack with a default configuration to bundle your code for deployment to Interplay.

You can customise the webpack config used by the CLI using the  webpackConfig modifier function.

For more details please see Custom Builds

Did this answer your question?
😞
😐
🤩