Widget Helper stripping attributes?

Desarrollador
1

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

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

45
451524×208 31.7 KB

2

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.

3

Works like a charm, thanks! :slight_smile:

4

Con la ayuda de este tema, pude crear un objeto SVG usando el ayudante 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"
        }
      })
    );

Sin embargo, veo que el atributo viewBox () siempre se renderiza en minúsculas.
La imagen SVG se genera con todos los atributos definidos (), pero no se renderiza en la página. ¿Qué me falta?

Me doy cuenta de que esto es proporcionado por el paquete virtual-dom, pero no pude encontrar la solución allí.

5

Interesante… ¿Podrías enlazar/pegar también el SVG generado?

7

@Bas Lamentablemente, ya no tengo el mismo código. He avanzado y he implementado el logo a través de diferentes métodos.

Pero esto sí puedo decirte ahora; si inspeccioné el navegador para la imagen SVG y la edité como HTML en el navegador para renombrar el atributo viewbox a viewBox, la imagen SVG se renderizaría correctamente en el navegador.

Y sería idéntica a la imagen SVG original que deconstruí en el ayudante h.

8

Ok, gracias por informarnos. ¡Me alegra que lo hayas resuelto con un método diferente!