@skbkontur/react-props2attrs v0.1.3

react-props2attrs

Транслирует пропы реакт-компонентов в атрибуты ассоциированных html-элементов.

Ассоциированный элемент, в который транслируются пропы - это первый HTMLElement, найденный внутри компонента. Пакет работает только с 3-мя (из ~24) типами WorkTag: ClassComponent, FunctionComponent и HostComponent(div, span, table etc.). Остальные типы игнорируются.

Установка

Установка с npm:

npm i @skbkontur/react-props2attrs

Установка с yarn:

yarn add @skbkontur/react-props2attrs

Подключение

Основан на пакете @skbkontur/react-sorge. Поэтому подключение должно происходить до первого подключения пакета react-dom в приложении:

// entry.js

import '@skbkontur/react-props2attrs';
import ReactDOM from 'react-dom';
...

Фильтр

Для управление пропами, которые необходимо транслировать, используйте хелпер setFilter(filter: FilterType).

type FilterType = (fiber: Fiber) => string[] | null;

Установленный фильтр должен возвращать либо массив имён пропов, либо null, для игнорирования фильтра.
Имя компонента игнорирует фильтр.

import { setFilter } from '@skbkontur/react-props2attrs';

setFilter((fiber) => {
  // Пропускаем только контролы из пакета @skbkontur/react-ui
  if (typeof fiber.type?.__KONTUR_REACT_UI__ === 'string') {
    return null;
  }
  return [];
});

Примеры трансляции разных типов

Для наглядности представим, что в приложении есть такие компоненты:

const Foo = () => <span>Foo</span>;
const Bar = () => <Foo hello="world" />;

<Bar data-tid="Bar" />;

Тогда их ассоциированные html-элементы будут выглядеть так:

<span data-comp-name="Bar Foo" data-prop-hello="world" data-testid="Bar" data-tid="Bar">
  Foo
</span>

Обратите внимание на проп data-tid. Он транслирован в атрибут без приставки prop-. Также его значение продублировано в атрибут data-testid. Это дефолтное название атрибута для метода getByTestId() в библиотеке Testing Library.

Примеры трансляции всех специальных пропов:

* — Особенным образом транслируется имя компонента в атрибут data-comp-name.В этом атрибуте собираются имена всех react компонентов, с которыми был ассоциирован элемент. Имя компонента транслируется всегда, независимо от настроек фильтра.

Примеры трансляции обычных пропов: