injectionEngine
Each array item is iterated over and has each of the provided rules applied to it. If the rule condition passes then the component specified by the rule is injected after the current item. A counter of how many of such components have been injected is kept (by using the rule's componentType) and exposed by the function for other rules to use. Different rules might be adding the same components, in which case the relevant counter will be updated. A counter of how many times each rule has passed is also kept and exposed (by using the rule's unique id). Please ensure that when modifying/adding rules ids are unique.
Usage:
import { injectionRules } from '@dennisdigital/injection-rules-helpers';
const bodyInjected = injectionEngine({
body, // body array returned by GraphQL
rules, // rules to be applied on each body array element
amp, // whether amp or not
props: propsToInject, // props that we want to pass in the injectionEngine function to be used by the rules
});
render() {
return (
<Body
bodyInjected={injectBodyData} template={template}
/>
)
}Defining Rules
The rules parameter is an array of objects containing all the rules you want to apply in the body elements. Each object will have the following structure:
{
id: 'inline-and-side', // used by injectionEngine function to keep track of how many times the object injected by the that individual rule has been injected up the current iteration
componentType: 'desktopSideAndInlineAd' // used by injectionEngine function to keep track of how many times the component injected has been injected up the current iteration
condition: options => shouldInject(options), // this is the logic that decides whether to inject or not
component: ({ componentCount: adCount }) => getAdsConfig(adCount), // this is used by injectionEngine function to pass props needed by the component injected. The props that are passed into the injectionEngine function as well as the componentCount (how many times this component has been injected) are available by the function (props are not being used in this case)
resetCurrentItemTypeCurrentCounter: true, // this determines whether you want to reset the current type count after you inject the component. Used for restarting the count once the component gets injected - that count is then compared with config (eg numberOfWordsBetweenInlineDesktopAds) to decide whether component will be injected
};
condition
This is a function you must provide to decide if your component will be injected at this point. When called each condition function will be provided an object parameter with the following properties which can be used for your logic
-
ampBoolean that says whether the page is amp or not (defaults tofalse) -
bodyElementsArray of body elements you can check against -
bodyIndexThe current index of the body element being checked against -
currentRuleInjectedComponentCountThe total number of current type of components injected (uses the shared componentType to keep track) -
currentRuleComponentTypeWordCountThe total number of word count by specific rule (uses unique rule id to keep track) -
currentTypeThe current type of body element being checked against -
currentTypeCurrentCountThe current number of times the current type has been iterated over in the array after the count reset took place (this number will equal thecurrentTypeTotalCountif no reset took place) -
currentTypeTotalCountThe total number of times that the current type has been iterated over in the array -
injectedArrayInjected array up to the current iteration -
nextTypeThe next type of body element in the array -
prevTypeThe next type of body element in the array -
propsThe props being passed into the injectionEngine to be used by the rules -
totalWordCountTotal word count up to the current iteration
component
This can either return an Array of data objects that the <Body/> component knows how to parse, or just an Array of normal React components
Data object example
component: (props) => [{
type: 'HEADER',
data: `Hi there ${props.name}`,
}]React component example
component: (props) => [
<Card
title={props.title}
/>
]or
component: ({ componentCount: adCount }) => getAdsConfig(adCount),The component function has access to the props that are passed into the injectionEngine function as well as the componentCount that is provided by the injectionEngine, (how many times this component has been injected) are available by the function (props are not being used in this case)
resetCurrentItemTypeCurrentCounter
The function keeps track of the count (both total and current - ie. for when counter gets reset) and matches this count against the rules to decide whether to inject or not.
For example imagine that we want to inject a component every 7 text block. The injectionEngine function exposes two properties, the currentTypeCurrentCount and the currentTypeTotalCount. Both count the number of current type blocks elapsed. The difference is that when we inject a block and the resetCurrentItemTypeCurrentCounter flag is true, the currentTypeCurrentCount will get reset so it starts counting from zero again and when it reaches 7, the confition will be met again. The currentTypeTotalCount will continue counting the total number of current type blocks iterated over without being reset.