<Playground /> doesn't like '$'

[kentcdodds]

Bug Report

Describe the bug

Source:

<Playground>
  Playground is fine with the $ character by itself
</Playground>

Result:

---

Source:

<Playground>
  Playground does not like the '$' character in single quotes
</Playground>

Result:

Expected behavior

I expect that the playground result for the $ in single quotes will render properly, but it does not.

My guess is there's some regex magic going on and the source isn't being properly escaped.

[rakannimer]

This also happens with backticks.

<Playground>
`This doesnt work`
 <MyComponent didMount={()=>{
	alert(`This also doesnt work`)
 }} />
</Playground>

Looks like the issue is here

I'm working on a fix, should have a PR soon 😄

[pedronauck]

Hi @kentcdodds, this happens because we inject the children as a code prop for Playground via AST to show the code without any parsing. If you inspect the webpack code generated on devtools you will see something like that:

<Playground __position={1} __code={`This is a some ${1 + 1} content`}>
  This is a some ${1 + 1} content
</Playground>

So, if you wanna try to put '$' javascript will break because syntax error.

In the beginning, I tried to use jsx-to-string to make this works, but it has some bugs when you use render props, so I need to use this approach. I think that is not the best one, but was the only way that came to my mind 😕

[pedronauck]

Fixed on the new v0.10.0 🚀

[kentcdodds]

Thank you!