When to use a plugin vs theme component?

Development

AI-generated summary

The discussion revolves around when to use a plugin versus a theme component in Discourse. maaatt asks whether small front-end changes, like CSS adjustments or tooltips, require a plugin. merefield clarifies that plugins are only needed for back-end changes, while theme components (TCs) suffice for front-end presentation changes. pfaffman adds that changes involving data not available in the API may require a plugin or AJAX. maaatt seeks guidance on setting up a TC locally, to which Arkshine recommends the Discourse Theme CLI tool. pfaffman notes that the

1

I need to do little changes to some views:
Eg:

Do I need to create a plugin for every change? even if is really small like only css?
Thanks for your help.

2

No, plugins are only required if you intend to change the back-end.

If it’s just a local change you can go to Admin → Customize → Theme and enter changes into a new Theme Component, then add it to your current Theme.

Take a look at https://meta.discourse.org/c/documentation/theme-developers/127, especially:

3

thanks!
So if I need to change a label or add a tooltip I need to create a theme but if I need to add a new column to a page (eg: the topic list) I need to create a plugin?

4

The distinction is this:

  • If you need to change the API, e.g. any data in .json route, changes to authorisation, back-end processing of data, you need a plugin
  • For many front end changes that don’t need different data, you only need a TC. ie a lot of presentational changes, or any logic in javascript that is not sensitive.
5

And a gray area (which doesn’t apply here, I think) is if you need data that is not available (like user custom fields) you could either use AJAX to pull that data with javascript when you need it, or have a plugin that adds the data to the serializer.

6

ok thanks. In the guide I don’t undestand how can I setuo and import a TC locally, there’s only an example for a remote one.

7

I would suggest using this wonderful tool, to create TC easily locally:

8

Unless you have a very small CSS change, I’d recommend using a remote theme or the CLI tool.

But if you click the “install theme” dialog will allow you to create a theme (or theme component if you do it on the component page)

9

inside the category topics list I need to add a new column with the “created_at” column and change the date from “tiny” to extended (eg: DD/MM/YYYY HH:MM)

10

If you want to add new stuff to a template, I would start with GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub, but I don’t know how to go about adding a column there. I guess there’s some javascript magic you could do, but that’s not my wheelhouse.

You know that you can see that information if you mouse-over, right?

image
image237×167 5.03 KB

Also see Plugin outlet locations theme component, but there’s no plugin outlet there.

11

You have these plugin outlets: topic-list-after-columns and topic-list-header-after.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr#L90

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/raw-templates/topic-list-header.hbr#L27

12

Good catch. It seemed wrong that there was no outlet there. I guess the theme component just doesn’t show it.

13

The plugin outlet locations theme component does not show raw outlets at the moment.

This theme component shows you how to add a column GitHub - discourse/discourse-add-category-column · GitHub