FEATURE: adds a new plugin api to decorate plugin outlets (PR #8937)

GitHub

You’ve signed the CLA, jjaffeux. Thank you! This pull request is ready for review.

   * Used for decorating the `cooked` content of a plugin-outlet after it's been rendered

So this is decorating the rendered handlebars from the outlet? What happens if the content of the outlet changes after initial render? Do we re-decorate?

1 Like

So this is decorating the rendered handlebars from the outlet? What happens if the content of the outlet changes after initial render? Do we re-decorate?

I think it makes sense :+1: See my last commit

Cool! What’s the use case here? When would this be more useful than simply adding to the plugin outlet directly?

I think we need to be super careful before adding yet another extensibility method. Whatever we add will need to be maintained for a long time.

1 Like

The use case is mostly quality of life when you try to apply DOM functions over cooked elements.

If I have some markdown blocks : [my-custom-ui option=foo][/my-custom-ui] which I want to show in posts but also in group pages, or user card or category top…

I will usually have an initializer.js.es6 file which will have an api.decorateCooked method but doesn’t have the equivalent for plugin-outlets, making it kinda cumberstone to share code between some custom component connector code and this initializer. With this you can now have this kind of code:

function applyYellowBackground(element, args) {
  element.style.backgroundColor = "yellow";
}

api.decorateCooked(applyYellowBackground);
api.decoratePluginConnector("discovery-list-container-top", applyYellowBackground);

Seems like a fine idea. I’ve made some suggestions.

This should probably be done in the test helpers. Otherwise if people have acceptance tests for their plugins they could leak.

You could replace this filterBy with a hash lookup based on the outlet name.

for example if decorators looked like:

{ "my-outlet-name": [ dec0, dec1, dec2 ] }

You could then:

(_decorators[this.connector.outletName] || []) .forEach(dec => dec.callback(this.element, this.args))

   * Used for decorating the rendered HTML content of a plugin-outlet after it's been rendered

Cooked means something specific to us – taking raw text and rendering markdown – this change makes it clear that it’s the HTML in the outlet.

    addPluginConnectorDecorator(pluginConnector, callback, opts || {});

Could make this change and remove the opts = opts || {} above.

This should be safe before release as it’s not used yet.

Looks good now. I agree this should be safe for merge.