waterfall injection logic

Benchmark created on

Setup

const EMBEDDED_ENTRY_BLOCK_ALIAS = "embedded-entry-block";
const COUNTABLE_TAGS_LIST = ["p", "ul", "ol"];
const INJECTION_INTERVAL = 3;
const WATERFALL_UNITS = [
  {
    shouldDisplay: () => false,
    component: "waterfall unit injected 0 - hidden",
  },
  {
    shouldDisplay: () => true,
    component: "waterfall unit injected 1",
  },
  {
    shouldDisplay: () => true,
    component: "waterfall unit injected 2",
  },
  {
    shouldDisplay: () => true,
    component: "waterfall unit injected 3",
  },
  {
    shouldDisplay: () => false,
    component: "waterfall unit injected 4 - hidden",
  },
  {
    shouldDisplay: () => true,
    component: "waterfall unit injected 5",
  },
  {
    shouldDisplay: () => false,
    component: "waterfall unit injected 6 - hidden",
  },
];

const MOCKED_CONTENT = [
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { children: "element" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "h2-rte", children: "section" } },
  { props: { as: EMBEDDED_ENTRY_BLOCK_ALIAS, children: "embeded unit" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { children: "element" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "h2-rte", children: "section" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "h2-rte", children: "section" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { children: "element" } },
  { props: { as: "ol", children: "ordered list" } },
  { props: { as: "ul", children: "unordered list" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
  { props: { as: "p", children: "paragraph" } },
];

const isCountableNodeForContentInjection = (node) => {
  const tagAlias = node?.props?.as;
  return COUNTABLE_TAGS_LIST.includes(tagAlias);
};
const isNodeEmebededEntryBlock = (node) => node?.props?.as === EMBEDDED_ENTRY_BLOCK_ALIAS;

Test runner

Ready to run.

Testing in
TestOps/sec
mutable approach
const addWaterfallUnitsFactory =
  (waterfallUnits, injectionInterval) =>
  (content, contentMetadata = {}) => {
    let countableNodesCounter = 0;
    const contentWithOptionalUnits = [];
    const waterfallUnitComponentsToAdd = waterfallUnits
      .filter(({ shouldDisplay }) => shouldDisplay(contentMetadata))
      .map(({ component }) => component);

    content.forEach((node) => {
      const isCountable = isCountableNodeForContentInjection(node);
      const shouldSkipWaterfallUnitInjection = isNodeEmebededEntryBlock(node);
      isCountable && countableNodesCounter++;

      contentWithOptionalUnits.push(node);
      const shouldInsertWaterfallUnit =
        countableNodesCounter === injectionInterval &&
        waterfallUnitComponentsToAdd?.length > 0 &&
        isCountable &&
        !shouldSkipWaterfallUnitInjection;

      if (shouldInsertWaterfallUnit) {
        insertWaterfallUnit();
      }
      if (shouldSkipWaterfallUnitInjection || shouldInsertWaterfallUnit) {
        // Reset the counter
        countableNodesCounter = 0;
      }
    });

    function insertWaterfallUnit() {
      const waterfallUnitNode = waterfallUnitComponentsToAdd.shift();
      waterfallUnitNode && contentWithOptionalUnits.push(waterfallUnitNode);
    }

    return { content: contentWithOptionalUnits, contentMetadata };
  };

const modifier = addWaterfallUnitsFactory(WATERFALL_UNITS, INJECTION_INTERVAL);

modifier(MOCKED_CONTENT, {});
ready
immutable approach
const insertWaterfallUnit = (waterfallUnitComponentsToAdd, contentWithOptionalUnits) => {
  const waterfallUnitNode = waterfallUnitComponentsToAdd[0];
  contentWithOptionalUnits.push(waterfallUnitNode);

  return [waterfallUnitComponentsToAdd.slice(0), [...contentWithOptionalUnits, waterfallUnitNode]];
};

const addWaterfallUnitsFactory =
  (waterfallUnits, injectionInterval) =>
  (content, contentMetadata = {}) => {
    let countableNodesCounter = 0;
    let contentWithOptionalUnits = [];
    let waterfallUnitComponentsToAdd = waterfallUnits
      .filter(({ shouldDisplay }) => shouldDisplay(contentMetadata))
      .map(({ component }) => component);

    content.forEach((node) => {
      const isCountable = isCountableNodeForContentInjection(node);
      const shouldSkipWaterfallUnitInjection = isNodeEmebededEntryBlock(node);
      isCountable && countableNodesCounter++;

      contentWithOptionalUnits.push(node);
      const shouldInsertWaterfallUnit =
        countableNodesCounter === injectionInterval &&
        waterfallUnitComponentsToAdd?.length > 0 &&
        isCountable &&
        !shouldSkipWaterfallUnitInjection;

      if (shouldInsertWaterfallUnit) {
        [waterfallUnitComponentsToAdd, contentWithOptionalUnits] = insertWaterfallUnit(
          waterfallUnitComponentsToAdd,
          contentWithOptionalUnits
        );
      }
      if (shouldSkipWaterfallUnitInjection || shouldInsertWaterfallUnit) {
        // Reset the counter
        countableNodesCounter = 0;
      }
    });

    return { content: contentWithOptionalUnits, contentMetadata };
  };

const modifier = addWaterfallUnitsFactory(WATERFALL_UNITS, INJECTION_INTERVAL);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.