Сохранить семантическую информацию о компонентах React в визуализированном HTML?

Question

В более новой версии Angular теги / имена используемых компонентов сохраняются в выводимом HTML:

<Invoice>
  <div class="itemlist">
    <InvoiceItem>
       <span>...</span>       <span>...</span>       <span>...</span>
    </InvoiceItem>
    <InvoiceItem>
       <span>...</span>       <span>...</span>       <span>...</span>
    </InvoiceItem>
  </div>
</Invoice>

но в React эта информация удаляется, оставляя только div и span без возможности сказать, какой компонент где закончился.

  <div class="itemlist">
       <span>...</span>       <span>...</span>       <span>...</span>
       <span>...</span>       <span>...</span>       <span>...</span>
  </div>

Есть ли способ восстановить эту информацию в виде тегов или атрибутов data- *? 1007 *

(я использую React / webpack / Typescript / Selenium.)

РЕДАКТИРОВАТЬ: Я в порядке, чтобы добавить что-то в сборочный конвейер, чтобы это произошло. Тем более, что имена классов искажаются во время минификации, это может потребоваться в любом случае. Если только в React / ReactDOM нет решения для этого где-то, как в AngularJS, а в Angular4 + всегда есть?

Answer 1

Ближайшее решение, которое я нашел до сих пор, это https://github.com/Igorbek/typescript-plugin-styled-components, которое делает это для styled-components, но не для обычных компонентов React.

Это не сработало с нашим процессом сборки - я даже не смог заставить его скомпилировать собственный пример после клонирования - но в остальном я стремлюсь к этому.