A tour of how the Widget (Virtual DOM) code in Discourse works

dev
61

Right, after a lot of headaches I’ve got it working - thanks for the help! :tada:

The two other problems I hit which could possibly do with some re-engineering in the widget code:

  • When setting dirtyKeys, it only re-renders the first widget with that buildKey. I’ve got around that by adding the post-id to the post-avatar’s buildKey so that every buildKey is unique
  • Setting the dirtyKey doesn’t work if the widget you want to re-render is inside another widget. In my case the post-avatar is inside a post. I think this is because of the shadowTree stuff.
    It would be really nice if the widget code could work out that the widget is deep in the tree and re-render its parents. I’ve got around this by setting the post widget as dirty as well.

https://github.com/davidtaylorhq/discourse-whos-online/blob/0437d7f2c8f9e396416e66f0a306b4e9377fc389/assets/javascripts/discourse/initializers/start-whos-online.js.es6#L88-L101

1 Like
62

That’s because keys are supposed to be unique! So adding the post id to the avatar is correct in this case. I might want to raise an error in development mode if two elements use the same keys. If you want to commit the post avatar key to master that would be fine.

That’s exactly what it is. By default I think a widget is supposed to re-render its parents, but the shadowTree is a performance optimization that avoids too much re-rendering and requires you to be more explicit.

5 Likes
63

Just in case anyone is trying to track down how widgets can use handlebars templates, see the commit message here (can’t find it documented anywhere on meta):

https://github.com/discourse/discourse/commit/dffb1fc4ee8a4d58f48145decb1590a304e8cf7d

15 Likes
64

How to create a navigation bar? using widget.

like this

image

65

The following code in the instruction no longer work. The render works but the state is not incrementing on clicks:

<script type="text/javascript">
        const { createWidget } = require('discourse/widgets/widget');

        createWidget('increment-button', {
            tagName: 'button',

            defaultState() {
                return { clicks: 0 };
            },

            html(attrs, state) {
                return `Click me! ${state.clicks} clicks`;
            },

            click() {
                this.state.clicks++;
            }
        });
</script>


<script type='text/x-handlebars' data-template-name='/connectors/above-footer/increment-button'>
    {{mount-widget widget="increment-button" }}
</script>```
66

Weird, for me when I try that component it doesn’t render at all because it is missing a key. I’ve updated the documentation above to add a buildKey method and it’s working for me. Try that out.

5 Likes
67

Thanks @eviltrout I was able to get that to work! Much appreciated

1 Like
68

How can I render html coming from an argument into the widget? Right now it is escaping the HTML and rendering it as it is.

Also the following example is not working:

It seems like the user variable is null. Do I have to do something to pass user into the hbs from where the widget is mounted?

69

Found answer to this one:

Answer:

import { createWidget } from 'discourse/widgets/widget';
import RawHtml from "discourse/widgets/raw-html";

createWidget('display-name', {
  tagName: 'div.name',

  html() {
    return new RawHtml({ html: `<div>${this.siteSettings.user_rank_alert_message}</div>` });
  }
});

But I still don’t know how to get user data in a connector hbs where data is not passed in from the outlet.

2 Likes
70

https://github.com/discourse/discourse/blob/a0bbc346cb5d5b89d1a3efdfa89869349a8b067f/app/assets/javascripts/discourse/app/widgets/widget-dropdown.js#L148
check out the triple curlys, bro :smiley:

3 Likes
71

Not so fast :wink: :warning: :

https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-triple-curlies.md

2 Likes
72

Instead of triple curlies we have a helper you can use instead:

{{html-safe result}}
10 Likes
73

Hey @eviltrout,

I noticed in the OP for this you say:

But lower down in this topic, you mention

Would you be willing to correct the OP?

1 Like
74

Thanks, I’ve made that edit.

2 Likes
75

@eviltrout Shouldn’t this be action="deleteThing" ?

76

It depends on your widget. In @eviltrout’s example, the my-widget expects to be passed an action named “deleteThing”. Different widgets will use different names for their actions (and indeed, it’s possible for them to call their action “action”)

2 Likes