Living on the edge with “dangerous”

As I’ve been using Styled Components (SC hereafter) and been wondering about the magic behind it.

Thankfully, Max Stoiber (a creator of SC) has written an article, The magic behind styled-components on how Styled Components work with Tagged Template Literals.

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!

Max Stoiber

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.

Prerequisite

I will skip on what tagged template literal is or how it works as Max hasexplained quite well.

☢ What is “dangerous”?

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.

                    Alert will show on CodeSandbox only

So if you need to style the dangerous component, either pass a SC component or wrap the dangerous component in SC component.

🤔 Why did you create it then?

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.

💀 Failures?

I’ve implemented it on CodeSandboxusing vanilla JavaScript but wanted to try TypeScript.

                    Like a kid with FOMO

• Creating a JavaScript library with Webpack when using TypeScript wasn’t as easy as I had anticipated.
  1. Trying to do/learn too many things at once (TypeScript, tagged template literal, CircleCI, etc) really made it worse.
  2. I’ve given up on writing tests in the prev v1.0 release (currently it’s at 0.1.x).
  3. I decided to hold off after finishing Kent C. Dodd’s Testing JavaScript course.

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.

👋 Parting Words

Many thanks to Max Stoiber to his blog & Styled Components for sharing his knowledge and code in public.

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.

🏔 Resources

• The magic behind styled-components
• Template literals on MDN
• dangerous
  • Source Code (MIT) on GitHub
  • NPM
• dangerouslySetInnerHTML
• Styled Components

The post Living on the edge with “dangerous” appeared first on Sung's Technical Blog.

Comments

[Marius Espejo]

just wanted to share, another cool use case that I’ve seen it used is in testcafe for defining a group of e2e tests

fixture `MyFixture`
    .page `http://mywebsite.com/path`;

test('Test1', async t => {
    // Starts at http://mywebsite.com/path
});

[Sung M. Kim]

Thanks Marius. 😄

I can't think of use case for chaining right now but knowing what's available does help 👍