Improve <SvgIcon> to make it output svg node and optimize performance

[wxiaoguang]

Before, the Vue <SvgIcon> always outputs DOM nodes like:

<span class="outer-class">
    <svg class="class-name-defined" ...></svg>
</span>

The span is redundant and I guess such layout and the inconsistent class/class-name attributes would cause bugs sooner or later.

This PR makes the <SvgIcon> clear, and it's faster than before, because it doesn't need to parse the whole SVG string.

Before:

After:

[silverwind]

This does seem like a lot of extra code and it redoes most of what svg already does. I wonder if it wouldn't be better to have a shared parser function that returns {attributes, innerHTML} which could be used in both. It would lose the fast-path of svg with size 16 and no classes, thought, so that is a downside and probably not worth because of that.

[wxiaoguang]

This does seem like a lot of extra code and it redoes most of what svg already does.

Nope, not extra. Just some comment, and necessary code to handle attributes / "class"+"class-name" correctly.

I wonder if it wouldn't be better to have a shared parser function that returns {attributes, innerHTML} which could be used in both.

They do not do the same thing. The key point is, in your old svg function, the string is returned for default arguments. A "shared parser" would cause your worried "slow path".

It would lose the fast-path of svg with size 16 and no classes, thought, so that is a downside and probably not worth because of that.

No, nothing is lost.

Before, for the svg, browser parse both the svgOuterHtml and svgInnerHtml

Now, we parse the svgOuterHtml, and leave the svgInnerHtml to browser.

Nothing is parsed twice.

[wxiaoguang]

Actually, the old SvgIcon is slower, because it does create extra node or parse twice.

Old code for default arguments:

• Vue creates a VNode (extra node)
• Browser parses the svgOuterHtml and svgInnerHtml

Old code for non-default arguments:

• It parses the whole SVG string to Node (svgOuterHtml and svgInnerHtml)
• It converts the Node to string (slow)
• Then svgOuterHtml and svgInnerHtml are parsed again by the browser, twice!

After this PR:

• This PR first parses svgOuterHtml, it doesn't parse svgInnerHtml (fast)
• Then it creates a VNode by svgOuterHtml parsed node, which is faster, no extra node.
• Leave the svgInnerHtml to browser, which is faster.
• No extra node, nothing is parsed twice.

[codecov-commenter]

Codecov Report

Merging #23570 (faeaecb) into main (f521e88) will decrease coverage by 0.02%.
The diff coverage is 37.89%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##             main   #23570      +/-   ##
==========================================
- Coverage   47.14%   47.12%   -0.02%     
==========================================
  Files        1149     1154       +5     
  Lines      151446   152353     +907     
==========================================
+ Hits        71397    71798     +401     
- Misses      71611    72075     +464     
- Partials     8438     8480      +42     

Impacted Files	Coverage Δ
cmd/dump.go	0.67% <0.00%> (ø)
cmd/web.go	0.00% <0.00%> (ø)
models/actions/run.go	1.64% <0.00%> (-0.08%)	⬇️
models/actions/runner.go	1.44% <ø> (ø)
models/packages/package.go	45.45% <0.00%> (-1.13%)	⬇️
models/user/search.go	77.50% <0.00%> (-6.29%)	⬇️
modules/actions/github.go	0.00% <0.00%> (ø)
modules/actions/workflows.go	0.00% <0.00%> (ø)
modules/context/context.go	64.54% <0.00%> (-3.53%)	⬇️
modules/doctor/storage.go	31.93% <0.00%> (ø)
... and 33 more

... and 34 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.