[Bug] e.querySelectorAll(...).forEach is not a function

[eugpoloz]

Fixes #2098.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9f3212f:

Sandbox	Source
VKUI - default example	Configuration

[github-actions]

size-limit report 📦

Path	Size
JS	58.36 KB (+0.03% 🔺)
JS, unstable	15.5 KB (0%)
CSS	29.26 KB (0%)
CSS, unstable	947 B (0%)

[ArthurStam]

У Array.from примерно тот же уровень поддержки: https://caniuse.com/?search=Array.from
Ни IE, ни Android 4-й версии его не поддерживают

[eugpoloz]

Но мы уже используем его в других местах и он работает. Вот, например, Cell:

Возможно, для него у нас есть полифилл, а для NodeList.forEach нет?

[ArthurStam]

Нет 100% уверенности, что он работает. Может нам просто не репортят о проблемах. На счёт полифилла — я ставлю на то, что babel не полифилит ни from, ни forEach. Это можно проверить, собрав библиотеку.

[ArthurStam]

Сейчас я бы использовал Array.prototype.forEach.call(ref.current.querySelectorAll(FOCUSABLE_ELEMENTS), cb)

[eolme]

Почему не пробежаться обычным for of

[fedorov-xyz]

Почему не пробежаться обычным for of

Обычный for of потом может превратиться во что-то подобное.

И в целом у for of не самая хорошая производительность, если сравнивать с forEach.

[eolme]

Ну раз бенчи, то вот https://jsben.ch/2uEkr

[thoughtspile]

Уф давайте без бенчей это прохладный код

[github-actions]

👀 Styleguide deployed

See the styleguide for this PR at https://vkcom.github.io/VKUI/pull/2099/

[github-actions]

Code coverage

lines	2926 / 3584	81.64%
statements	3015 / 3698	81.53%
functions	684 / 819	83.51%
branches	2338 / 3122	74.88%
branchesTrue	0 / 0	100.00%

Generated by 🚫 dangerJS against 9f3212f

[fedorov-xyz]

А не вариант заполифиллить forEach собственно?

Например, где-нибудь здесь: https://github.com/VKCOM/VKUI/blob/master/src/lib/polyfills.ts

function makeNodeListForEach(collection) {
  if (collection && !collection.prototype.forEach) {
    if (Array.prototype.forEach) {
      collection.prototype.forEach = Array.prototype.forEach;
    } else {
      collection.prototype.forEach = function(callback, thisArg) {
        thisArg = thisArg || window;
        for (let i = 0; i < this.length; i++) {
          callback.call(thisArg, this[i], i, this);
        }
      };
    }
  }
}

makeNodeListForEach(window.NodeList);
makeNodeListForEach(window.HTMLCollection);

[eolme]

Зачем проверка на Array.prototype.forEach? Упростить можно до

if (canUseDOM) {
  window.NodeList.prototype.forEach = Array.prototype.forEach;
  window.HTMLCollection.prototype.forEach = Array.prototype.forEach;
}

[thoughtspile]

Напомню про #1724

Глобальные полифиллы не надо больше пожалуйста

[ArthurStam]

Я согласен с Вовой, что все эти махинации со встроенными конструкторами доведут до беды. Предлагаю юзать дедовские методы вызова методов массива на коллекции дом-элементов.