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