Source's HTML processing breaks inline SVG

[mik01aj]

I guess it might be connected with Cheerio or whatever you use, but I'll just post it here.

When I put this in my spec:

<svg viewBox="0 0 8 16" style="margin-left:0.5em;width:8px;height:16px;position:absolute;top:6px;left:-15px;" data-reactid=".ujif4jny80.2.1.2.0">
  <path d="M8 0 L0 8 L8 16 Z" fill="white" data-reactid=".ujif4jny80.2.1.2.0.0">
  </path>
  <path d="M8 0 L0 8 L8 16" fill="none" stroke="rgba(0, 0, 0, 0.1)" data-reactid=".ujif4jny80.2.1.2.0.1">
  </path>
</svg>

I get this in HTML (as in HTTP response, this is not from Browser DOM):

<svg viewBox="0 0 8 16" style="margin-left:0.5em;width:8px;height:16px;position:absolute;top:6px;left:-15px;" data-reactid=".ujif4jny80.2.1.2.0">
  <path d="M8 0 L0 8 L8 16 Z" fill="white" data-reactid=".ujif4jny80.2.1.2.0.0">
    <path d="M8 0 L0 8 L8 16" fill="none" stroke="rgba(0, 0, 0, 0.1)" data-reactid=".ujif4jny80.2.1.2.0.1">
    </path>
  </path>
</svg>

And the SVG really looks different.

[robhrt7]

Yeah... Currently we're using JSDom inside wrap.js middleware, and it does some magic with normalizing the DOM. I already have a ready solution on cheerio, which is much faster and should not do any unpredictable magic.

I will try to add it in 0.5.4-dev, and check if it fixes the issue with SVG. This is really critical.

[robhrt7]

Can you please try to reproduce the bug with this SourceJS version? https://github.com/sourcejs/Source/releases/tag/0.5.3-no-jsdom

npm install sourcejs@0.5.3-no-jsdom

In this version JSDom is replaced with Cheerio, which don't mess up the HTML.

[mik01aj]

With this version I get this:

<svg viewbox="0 0 8 16" style="margin-left:0.5em;width:8px;height:16px;position:absolute;top:6px;left:-15px;" data-reactid=".ujif4jny80.2.1.2.0">
  <path d="M8 0 L0 8 L8 16 Z" fill="white" data-reactid=".ujif4jny80.2.1.2.0.0">

  <path d="M8 0 L0 8 L8 16" fill="none" stroke="rgba(0, 0, 0, 0.1)" data-reactid=".ujif4jny80.2.1.2.0.1">

</svg>

So the </path> closing tag is missing. Chrome parses this as follows:

Still wrong.

I tried putting the SVG tag in both .md and .src.html specs, with the same result.

Related: http://stackoverflow.com/questions/24299969/closing-svg-paths-explicit-or-self-closing.

[robhrt7]

I removed JSDom in wrap.js and bumped Cheerio version. Now this bug is fixed in 0.5.4-dev branch, and SVG output is not broken following your example.

The only thing I see, Cheerio, which is pre-parsing spec contents, changes <path></path> to <path />:

<svg viewbox="0 0 8 16" style="margin-left<img src='/node_modules/sourcejs-smiles/assets/i/smiles/1f627.png' alt=':0' />.5em;width:8px;height:16px;position:absolute;top:6px;left:-15px;" data-reactid=".ujif4jny80.2.1.2.0">
          <path d="M8 0 L0 8 L8 16 Z" fill="white" data-reactid=".ujif4jny80.2.1.2.0.0"/>
          <path d="M8 0 L0 8 L8 16" fill="none" stroke="rgba(0, 0, 0, 0.1)" data-reactid=".ujif4jny80.2.1.2.0.1"/>
</svg>

In Chrome's DOM viewer

!image

This should be not critical, since does not affect actual view.

[mik01aj]

Yes, changing <path></path> to <path /> shouldn't break anything. Didn't test it yet, but what you write looks ok. Thanks!