Widget Helper stripping attributes?

[Bas (Bas van Leeuwen)]

I was trying my hand at my first plugin, and to a certain extent it worked quite OK

However, I’m having trouble with the helper class. The class seems to strip out certain attributes and I have no idea what’s happening.

I’m adding an \<a> with some classes and a few attributes.

I’m trying to add

• id
• href
• title
• aria-label
• _target

The first three work fine, the last two don’t.

I’ve tried to reorder and rename the attributes. But it seems there is some sort of selection happening?

Snippet:

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'aria-label': 'my label',
                '_target': "_blank"
            }, [
                h('i.fa.fa-info.d-icon', {
                    'aria-hidden': 'true'
                })
            ]
        ),
    ]);
});

Rendered as

[vinothkannans (Vinoth Kannan)]

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L93-L104

As per above code, I guess it should be like below

decorateWidget('header-icons:before', helper => {
    return h('li.header-dropdown-toggle', [
        h('a.icon.btn-flat', {
                'id': 'my id',
                'href': 'http://example.com',
                'title': 'my title',
                'attributes': {
                    'aria-label': 'my label',
                    'target': "_blank"
                }
            }, [
                h('i.fa.fa-info.d-icon', { 'attributes': {
                    'aria-hidden': 'true'
                }})
            ]
        ),
    ]);
});

Also target is not _target.

[Bas (Bas van Leeuwen)]

Works like a charm, thanks!

[gormus (Osman Görmüş)]

Com a ajuda deste tópico, consegui criar um objeto SVG usando o helper h:

    let logo = h("svg", {
        "attributes": {
          "width": "22",
          "height": "24",
          "viewBox": "0 0 22 24",
          "fill": "none",
          "xmlns": "http://www.w3.org/2000/svg"
        }
      },
      h("path", {
        "attributes": {
          "d": "M11.5992 4.29387L15.4141 ... 0V4.29387Z",
          "fill": "#000000"
        }
      })
    );

No entanto, vejo que o atributo viewBox() é sempre renderizado em minúsculas.
A imagem SVG é gerada com todos os atributos definidos (), mas não é renderizada na página. O que estou perdendo?

Percebo que isso é fornecido pelo pacote virtual-dom, mas não consegui encontrar a solução lá.

[Bas (Bas van Leeuwen)]

Interessante.. Você poderia vincular/colar o SVG gerado também?

[gormus (Osman Görmüş)]

@Bas Infelizmente, não tenho mais o mesmo código. Segui em frente e implementei o logo por meio de métodos diferentes.

Mas isto posso lhe dizer agora; se eu inspecionasse o navegador para a imagem SVG e editasse como HTML no navegador para renomear o atributo viewbox para viewBox, a imagem SVG seria renderizada corretamente no navegador.

E seria idêntica à imagem SVG original que eu desconstruí no helper h.

[Bas (Bas van Leeuwen)]

Ok, obrigado por nos informar. Fico feliz que você tenha conseguido resolver com um método diferente!