Living on the edge with "dangerous"
As I've been using Styled Components (SC hereafter) and been wondering about the magic behind it.
At the end of article, Max finished the article with following sentence.
I’m very excited to see what other use cases for tagged template literals people come up with!
So I created dangerous, a tagged template literal function, which accepts a dangerous text (such as malicious user input) and sets inner HTML of a component in SC like style.
I will skip on what tagged template literal is or how it works as Max has explained quite well.
When you pass a string to component, they are encoded to prevent malicious user input/scripts.
React team has made it hard to set innerHTML of a component to help developers accidentally set malicious string to prevent XSS attacks.
But dangerous makes it easy to set an innerHTML value and returns a component with the unsafe HTML string.
Result of DangerousApp.js
As you can with SC, you can pass a component or an HTML tag to the dangerous like or even wrap SC component and vice versa.
So if you need to style the dangerous component, either pass a SC component or wrap the dangerous component in SC component.
I will be frank. It's quite useless in practice and promotes bad behavior.
It was mostly an academic project to learn how tagged template literal works & get used to TypeScript.
And a plan to migrate to TypeScript for React, and learn how to test it.
Like a kid with FOMO
So the easy way out was to use RollUp, which I've used before.
But with TypeScript in play, it was harder as TypeScript has its own transpiler.
I also ended up bloating up the library size and had to learn how to fix it.
Fixed by marking react methods as external dependencies in tsconfig.
Size comparison on BundlePhobia
I remember making the same mistake while first learning React, trying to learn Redux, Node, Express, and all other related technologies all at once and got no where after shaving the yak for months.
But learning from these failures (try to use Rollup for simple libraries, don't use new language [typescript] without understanding how it works first, etc) was a great lesson.
Frankly speaking, I've never had much need to use dangerouslySetInnerHTML at all.
Please don't hesitate to give me any feedback (good or harsh, both are welcome) or changes required.