Html2React: Cover the remaining edge cases

mmczaplinski · 10 February 2020 23:37

Description

The current implementation is missing some of the edge cases when converting from HTML to react. Examples:

We need to add key attributes if an element has siblings
Handle the aria-* and SVG props correctly
Preserve custom attributes correctly (to handle webcomponents)

Examples

https://github.com/remarkablemark/html-react-parser

Possible solution

A possible solution is to re-use the attributesToProps function from:

github.com

remarkablemark/html-react-parser/blob/master/lib/attributes-to-props.js

var reactProperty = require('react-property');
var styleToObject = require('style-to-object');
var utilities = require('./utilities');

var camelCase = utilities.camelCase;

var htmlProperties = reactProperty.html;
var svgProperties = reactProperty.svg;
var isCustomAttribute = reactProperty.isCustomAttribute;

var hasOwnProperty = Object.prototype.hasOwnProperty;

/**
 * Converts HTML/SVG DOM attributes to React props.
 *
 * @param  {Object} [attributes={}] - The HTML/SVG DOM attributes.
 * @return {Object}                 - The React props.
 */
function attributesToProps(attributes) {
  attributes = attributes || {};

This file has been truncated. show original

Additionally, there is some potential for code reuse from: https://github.com/remarkablemark/html-react-parser/blob/master/lib/dom-to-react.js

codemonkeynorth · 5 June 2021 20:00

@mmczaplinski i think it also needs eg itemProp, itemType, itemScope. When I pulled these out of my database as the lowercase versions on a span or div etc React complained as they didn’t get converted

I’m not sure what the full list is but those are the main 3 I use
https://schema.org/docs/gs.html

I added my own processor for now to get rid of the errors using eg

if(node.props['itemtype']) {
  node.props.itemType = node.props['itemtype']
  delete node.props['itemtype']
}

I don’t know if that’s how I should do it, but as mentioned it removes the error.

Thanks
J

Note: issue raised at add schema attributes to Html2React · Issue #854 · frontity/frontity · GitHub