@dennisdigital/injection-engine
Advanced tools
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 kep
injectionEngineEach 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.
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}
/>
)
}
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
};
conditionThis 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
amp Boolean that says whether the page is amp or not (defaults to false)bodyElements Array of body elements you can check againstbodyIndex The current index of the body element being checked againstcurrentRuleInjectedComponentCount The total number of current type of components injected (uses the shared componentType to keep track)currentRuleComponentTypeWordCount The total number of word count by specific rule (uses unique rule id to keep track)currentType The current type of body element being checked againstcurrentTypeCurrentCount The current number of times the current type has been iterated over in the array after the count reset took place (this number will equal the currentTypeTotalCount if no reset took place)currentTypeTotalCount The total number of times that the current type has been iterated over in the arrayinjectedArray Injected array up to the current iterationnextType The next type of body element in the arrayprevType The next type of body element in the arrayprops The props being passed into the injectionEngine to be used by the rulestotalWordCount Total word count up to the current iterationcomponentThis 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)
resetCurrentItemTypeCurrentCounterThe 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.
FAQs
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 kep
The npm package @dennisdigital/injection-engine receives a total of 0 weekly downloads. As such, @dennisdigital/injection-engine popularity was classified as not popular.
We found that @dennisdigital/injection-engine demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.