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üş)]

بمساعدة هذا الموضوع، تمكنت من إنشاء كائن SVG باستخدام المساعد 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"
        }
      })
    );

ومع ذلك، أرى أن السمة viewBox() يتم عرضها دائمًا بأحرف صغيرة.
يتم إنشاء صورة SVG بجميع السمات المحددة ()، ولكنها لا تُعرض على الصفحة. ما الذي أفتقده؟

أدرك أن هذا مقدم من حزمة virtual-dom، لكنني لم أتمكن من العثور على الحل هناك.

[Bas (Bas van Leeuwen)]

مثير للاهتمام.. هل يمكنك ربط/لصق ملف SVG الذي تم إنشاؤه أيضًا؟

[gormus (Osman Görmüş)]

@Bas للأسف، لم يعد لدي نفس الكود. لقد انتقلت، وقمت بتطبيق الشعار بطرق مختلفة.

ولكن هذا يمكنني أن أخبرك به الآن؛ إذا قمت بفحص المتصفح لصورة SVG، وقمت بتحريرها كـ HTML في المتصفح لإعادة تسمية السمة viewbox إلى viewBox، فستظهر صورة SVG بشكل صحيح في المتصفح.

وستكون مطابقة لصورة SVG الأصلية التي قمت بتفكيكها إلى مساعد h.

[Bas (Bas van Leeuwen)]

حسناً، شكراً لإعلامنا. يسعدنا أنك تمكنت من حل الأمر بطريقة مختلفة!