attr adds duplicate namespaced attribute in 1.0.0-rc.5

[ceefour]

Example:

<a transform="translate(1135.9 750)" fill="#5293d5" xlink:href="https://certificateUrl">
  <text id="certificateUrl" transform="scale(1,-1)" x="242.74602" y="545.25012" fill="#5293d5" font-family="'Open Sans'" font-size="100px" letter-spacing="0px" stroke-width="7.5" word-spacing="0px" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" xml:space="preserve">
    <tspan x="242.74602" y="545.25012" fill="#5293d5" font-family="'Open Sans'" font-size="100px" stroke-width="7.5" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">https://certificateUrl</tspan>
  </text>
</a>

Code:

  const $ = cheerio.load(template);
  // WARNING: in cheerio 1.0.0-rc.3 this worked properly, in cheerio 1.0.0-rc.5 it will clear the tag's contents
  $('a[href="https://certificateUrl"]').attr('xlink:href', data.certificateUrl);

Please fix this behavior of attr like jQuery.
Related to #1664.

Result:

In 1.0.0-rc.3:

• When setting attribute xlink:href, it creates another attribute href but properly setting the xlink:href one
• Child attributes are mangled, specifically font-family
• xml:space get turned into -> space

In 1.0.0-rc.5:

• When setting attribute xlink:href, it creates another attribute with same name xlink:href making that attribute duplicate and thus invalid XML
• Child attributes are properly processed, like font-family and xml:space

[5saviahv]

It seems to working fine:

const cheerio = require('cheerio');

const template = `<a transform="translate(1135.9 750)" fill="#5293d5" xlink:href="https://certificateUrl">
<text id="certificateUrl" transform="scale(1,-1)" x="242.74602" y="545.25012" fill="#5293d5" font-family="'Open Sans'" font-size="100px" letter-spacing="0px" stroke-width="7.5" word-spacing="0px" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;line-height:1.25" xml:space="preserve">
  <tspan x="242.74602" y="545.25012" fill="#5293d5" font-family="'Open Sans'" font-size="100px" stroke-width="7.5" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">https://certificateUrl</tspan>
</text>
</a>`;

const $ = cheerio.load(template), data = {};

// WARNING: in cheerio 1.0.0-rc.3 this worked properly, in cheerio 1.0.0-rc.5 it will clear the tag's contents
const url = $('a[xlink\\:href]').attr('xlink:href', data.certificateUrl);
console.log(url);

results:

https://certificateUrl

I compared rc.3 & rc.5 and it behaves very similarly - cant see where content may be lost.

[ceefour]

Thanks @5saviahv , I've revised the title and description (my initial diagnosis was incorrect, but there's still this bug), with illustration of which attributes are wrong.

[5saviahv]

Interesting, at first look it seems like parse5 serializer is who adds those prefixes there. Cheerio wont handle namespaced attributes correctly.

[ceefour]

yes that's correct, this happens with namespaced attributes only

[fb55]

I just tried to replicate this on the latest version:

const d = $.load(
  `<a xlink:href="https://certificateUrl"><text xml:space="preserve"></text></a>`,
  null,
  false
);

d('a').attr('xlink:href', 'boohoo');

expect(d.html()).toBe(
  `<a xlink:href="boohoo"><text xml:space="preserve"></text></a>`
);

Looks like this issue has been resolved.