drop dependency on react 15

[talbet]

There have been a few discussions about problems with bundling react 15 and react 16 side by side (#101 #105). Since react-dom-core seems to only be used for creating look-up tables for html attributes, and since react15 hasn't seen an update in two years, would it make sense to extract these lookups into html-react-parser and drop the react-dom-core dependency?

This may require dropping support for react 15 so I understand if this is not a good direction.

[remarkablemark]

Thanks for opening this issue @talbet

You're correct in that html-react-parser only relies on react-dom-core for the HTML and SVG property configs.

In the past, I considered keeping a map of the attributes in this package, but I ended up deciding against due to the additional scope of having to update it manually if the attribute map ever changes.

However, like you mentioned, it seems that react 15 will see little or no updates in the foreseeable future so I'm willing to look into this again.

If we are to go forth with stripping out the dependency, I'd like to accomplish the following:

• keep the properties config files as a separate package (i.e., add it as a new package in the react-dom-core monorepo),
• build the attribute map from react 15,
• allow the map to be modified before publish,
• ensure no breaking changes when used in html-react-parser

What are your thoughts?

[talbet]

Those all sound sensible. If you want I can try and get a PR together for react-dom-core some time next week?

[remarkablemark]

Hey sorry for the late reply, yes I'm open to that. Let's discuss what I can do to help.

[talbet]

I'm on vacation for the next two weeks. Was hoping to get something together before then, but got caught up on other things. Once I get back we can have a chat and work out how to proceed.

[remarkablemark]

No worries! Please do enjoy your time off @talbet. Let's sync up once you're back.

[Amin52J]

This is not a feature, this is a bug breaking apps because it's loading react v15 next to the newer versions of react.

[remarkablemark]

What version of html-react-parser are you using @Amin52J?

$ npm ls html-react-parser

The bug you're experiencing should be fixed in 0.7.1

[Amin52J]

v0.4.7

The thing is when html-react-parser is added as a dependency the next.js build is complaining about Invalid use of hooks pointing to a line using html-react-parser, but when it's removed it's still showing the same error pointing to somewhere else in the code, so I might be wrong that it's html-react-parser that's in fact breaking the build.

[Amin52J]

I confirm that the issue was not caused by html-react-parser.

[remarkablemark]

Thanks for confirming @Amin52J. Do let me know if you uncover anything new.

[talbet]

It looks like react-dom is being used for 4 things:

1. a function that can determine custom attributes like data- and aria-
2. a check to see if an attribute is a boolean attribute
3. a map for html attributes to react props
4. a map for svg attributes to react props

I propose they could be handled like this:

1. Probably easiest just to copy this function across
2. Could be extracted to an array of strings since it's only 24 attributes
3. About 150 key/value pairs. Could either:
   • extracted as an object, or
   • build at runtime with the array of valid react props, and then running toLowerCase() over them and merging the 4 exceptions (class -> className).
4. About 400 key/value pairs. Could either
   • extracted as an object, or
   • build at runtime with the array of valid svg attributes, and then converting kebab case attributes to camel case props.

Let me know what you think @remarkablemark and if I've missed anything?

[remarkablemark]

I think that covers all bases. Thanks for thinking this through @talbet!

I ended up building something really quick and I'd love to get your feedback. We can use it as an an initial foundation to build on top of.

See remarkablemark/react-dom-core#9