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},
    }
}

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' 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 ask you to 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. 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;
        },
    }
}

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 section in Running the CLI