ElMassimo / iles

🏝 The joyful site generator
https://iles.pages.dev
MIT License
1.08k stars 32 forks source link

Island broken if prop contains the string `$'` #224

Closed ouuan closed 1 year ago

ouuan commented 1 year ago

Description 📖

If the prop of an island contains the string $', it will be broken in the production build.

Reproduction 🐞

https://github.com/ouuan/iles-issue-224-reproduction

The production build output:

    <div id="app"><ile-root id="ile-1"></ile-root><script></script><script type="module" async>import{h as o,c as a}from"/assets/iles.ad977ee4.js";import{_ as r}from"/assets/Foo.dc3d22a4.js";import"/assets/vendor-vue.c0787f6d.js";o(a,r,"ile-1",{foo:"</div>
  </body>
</html>"},{});
</script></div>

The following snippet should be foo:"$'":

foo:"</div>
  </body>
</html>"
ouuan commented 1 year ago

This is a weird issue. I accidentally discovered it because I wrote $'$ in my blog and the search page went broken.

ouuan commented 1 year ago

I found the bug.

https://github.com/ElMassimo/iles/blob/ed9c072ce58c128a6abbc2096d37d9d369895185/packages/iles/src/node/build/write.ts#L52-L55

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_the_replacement. I only knew $1, $2 before and this is the first time I hear of $&, $` and $'.