Function updateStylingMap

packages/core/src/render3/instructions/styling.ts:771–828

* Update map based styling. * * Map based styling could be anything which contains more than one binding. For example `string`, * or object literal. Dealing with all of these types would complicate the logic so * instead this function expects that the complex input is first converted into normal

(
  tView: TView,
  tNode: TNode,
  lView: LView,
  renderer: Renderer,
  oldKeyValueArray: KeyValueArray<any>,
  newKeyValueArray: KeyValueArray<any>,
  isClassBased: boolean,
  bindingIndex: number,
)

 * @param bindingIndex Binding index of the binding.
 */
function updateStylingMap(
  tView: TView,
  tNode: TNode,
  lView: LView,
  renderer: Renderer,
  oldKeyValueArray: KeyValueArray<any>,
  newKeyValueArray: KeyValueArray<any>,
  isClassBased: boolean,
  bindingIndex: number,
) {
  if ((oldKeyValueArray as KeyValueArray<any> | NO_CHANGE) === NO_CHANGE) {
    // On first execution the oldKeyValueArray is NO_CHANGE => treat it as empty KeyValueArray.
    oldKeyValueArray = EMPTY_ARRAY as any;
  }
  let oldIndex = 0;
  let newIndex = 0;
  let oldKey: string | null = 0 < oldKeyValueArray.length ? oldKeyValueArray[0] : null;
  let newKey: string | null = 0 < newKeyValueArray.length ? newKeyValueArray[0] : null;
  while (oldKey !== null || newKey !== null) {
    ngDevMode && assertLessThan(oldIndex, 999, 'Are we stuck in infinite loop?');
    ngDevMode && assertLessThan(newIndex, 999, 'Are we stuck in infinite loop?');
    const oldValue =
      oldIndex < oldKeyValueArray.length ? oldKeyValueArray[oldIndex + 1] : undefined;
    const newValue =
      newIndex < newKeyValueArray.length ? newKeyValueArray[newIndex + 1] : undefined;
    let setKey: string | null = null;
    let setValue: any = undefined;
    if (oldKey === newKey) {
      // UPDATE: Keys are equal => new value is overwriting old value.
      oldIndex += 2;
      newIndex += 2;
      if (oldValue !== newValue) {
        setKey = newKey;
        setValue = newValue;
      }
    } else if (newKey === null || (oldKey !== null && oldKey < newKey!)) {
      // DELETE: oldKey key is missing or we did not find the oldKey in the newValue
      // (because the keyValueArray is sorted and `newKey` is found later alphabetically).
      // `"background" < "color"` so we need to delete `"background"` because it is not found in the
      // new array.
      oldIndex += 2;
      setKey = oldKey;
    } else {
      // CREATE: newKey's is earlier alphabetically than oldKey's (or no oldKey) => we have new key.
      // `"color" > "background"` so we need to add `color` because it is in new array but not in
      // old array.
      ngDevMode && assertDefined(newKey, 'Expecting to have a valid key');
      newIndex += 2;
      setKey = newKey;
      setValue = newValue;
    }
    if (setKey !== null) {
      updateStyling(tView, tNode, lView, renderer, setKey, setValue, isClassBased, bindingIndex);
    }
    oldKey = oldIndex < oldKeyValueArray.length ? oldKeyValueArray[oldIndex] : null;
    newKey = newIndex < newKeyValueArray.length ? newKeyValueArray[newIndex] : null;
  }
}