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.

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

| prop name | prop value | | attr value | attr name | | ---------------- | --------------------------------- | --- | -------------------------------- | ---------------------------- | | children | ~~не поддерживается~~ | ➜ | ~~не поддерживается~~ | | | style | { paddingLeft: 20, color: 'red' } | ➜ | {"paddingLeft":20,"color":"red"} | data-prop-style | | class | colored | ➜ | colored | data-prop-classname | | key | value | ➜ | value | data-key | | data-tid | MyControl | ➜ | MyControl | data-tid and data-testid | | *Имя компонента | ButtonCover | ➜ | *ButtonCover Button | data-comp-name |

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

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

| prop name (type) | prop value | | attr value | attr name | | ---------------- | ---------- | --- | ---------- | ------------------------ | | string | str | ➜ | str | data-prop-string | | number | 123 | ➜ | 123 | data-prop-number | | array | ['a', 'b'] | ➜ | ["a","b"] | data-prop-array | | object | { a: 'b' } | ➜ | {"a":"b"} | data-prop-object | | func | () => {} | ➜ | true | data-prop-func | | boolean | false | ➜ | false | data-prop-boolean | | empty_string | | ➜ | undefined | data-prop-empty_string | | null | null | ➜ | undefined | data-prop-null | | undefined | undefined | ➜ | undefined | data-prop-undefined |