@skbkontur/react-props2attrs
v0.1.0react-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 |