Показывать по ховеру название зоны

whymolchanov commented 4 years ago

Завел заглушку для бота, которая пишет в консоль MouseEvent при наведении на элементы.

whymolchanov commented 4 years ago

Нашел вот такой репозиторий https://github.com/facebook/react-devtools/tree/v3 Это место где раньше хранилось react-devtools (до того как его перенесли в react) У него есть debug режим. Это позволит посмотреть каким образом (через какое API итд) он получает данные о VirtualDOM.

whymolchanov commented 4 years ago

Элементы VirtualDOM называются fibers. В react-dev-tools есть множество методов как получить элемент зная fiberId, как найти fiberId элемента. Однако все они требуют доступа до агента (который является частью react-dev-tools, который не хотелось бы тянуть как зависимость) или renderer-а.

Чтобы нам хотелось получить - доступ до ReactElement-а, на который указывает указатель мыши.

Как самый простой вариант, мы бы могли пробрасывать название зоны в обертку VisibilitySensor-а и доставать ее оттуда. Это решение реально, однако не будем же мы пробрасывать в обертку VisibilitySensor какие-то дополнительные данные о зоне (а они со временем появятся).

@tashbenbetov правильно я понял что data-tid атрибуты в DOM - это как раз и есть fiberId?

whymolchanov commented 4 years ago

Хотя, возможно, история с добавлением названия зоны в VisibilitySensor - это не самое глупое промежуточное решение. Так мы сможем быстро уже отдать инструмент, который будет показывать хотя бы названия зон.

Думаю что первый шаг должен быть таким. @tashbenbetov что думаешь об этом?

tashbenbetov commented 4 years ago

@ymolchanov, Юра, думаю идея - отличная. Нам надо сейчас запуститься и иметь внешний интерфейс для всех заинтересованных. Остальное потом можем и переиграть без особых проблем.

whymolchanov commented 4 years ago

Я добавил в VisibilitySensor.options новое поле - zoneName. zoneName прикрепляется к DOM посредством data-zone-name (дата атрибута).

Сейчас использование zoneName в VisiblitySensor выглядит так:

Нужно подумать вот о чем:

есть ли способ добавить data-zone-name к Zone, чтобы именно зона имела это значение, а не VisibilitiySensor
есть ли способ как-то иначе пробросить zoneName в VisibiltySensor (неявно, чтобы не заставлять разработчика постоянно делать это руками)
если это невозможно, то для новых analytics.ts можно завести plop, который будет пробрасывать zoneName в VisibilitySensor (нормально ли это решение будет распространяться с библиотекой, все-таки plop будет новой зависимостью?)
нужно будет обновить кодовую базу (во все VisibilitySensors нужно будет пробросить zoneName) - для этого можно написать консольную тулзу, которая будет ходить по файлам и править их

В extension добавил обход ветка дерева до корня с аккумуляцией всех зон по пути. Сейчас вывожу в консоль и выглядит это как-то так:

whymolchanov commented 4 years ago

Кажется, нашел способ: VisibilitySensor так и так у нас имеет представление в DOM-дереве, почему бы нам не сделать так чтобы он сообщал о зонах с которыми он работает. Но пробрасывать в него данные руками - это моветон. Поэтом я задумался: "А может VisibilitySensor сам узнать названия зон?", оказалось еще как может.

Это будет выглядеть как-то так:

А вот как я это сделал: https://bb.yandex-team.ru/projects/OTT/repos/frontend/commits/cc31a000f5fcfe44ae89e582b782b52b2e221890

@tashbenbetov как и всегда, мне очень важно твое мнение. Если получится найти минутку и высказаться - буду очень рад. :)

tashbenbetov commented 4 years ago

Последнее понравилось!

whymolchanov commented 4 years ago

Решил сделать по другому: в <div> VisibilitySensor будет попадать только последняя зона, а не склеенное через _ множество зон. Мотивация: позже мы добавим в эти <div> еще и данные зоны (они есть в контексте), поэтому:

лучше реализовать склейку зон на уровне расширения.
это более гибкое решение и оно потенциально закроет больше кейсов

tashbenbetov / react-analytics-extension

Показывать по ховеру название зоны #1